Uniforms: Embedding List Field Inside Accordion

[LordA98]

Hi,

Sorry, this isn't really an issue with uniforms, it's more of a question to solve my particular situation.

I have (somewhat horribly) embedded my List Field inside an accordion.

However, I'm struggling to figure out what to use as the Accordion eventKeys.

The code is below. It's currently still using the default "0" as the eventKey. Normally I would use an accordion when iterating an array and using the id of each array item. However, in a form like this, I'm not entirely sure what I can do to ensure each ListItemField eventKey is unique?

The accordion code is below. I'm happy to give more information if required.

<Accordion>
      <Card>
        <ListField
          name="customOptionGroups"
          addIcon={<Add text="Group" />}
          showInlineError
          className="list-field p-1 pl-3 pb-3 border-0"
        >
            <ListItemField name="$">
              <Container fluid className="mx-0">

                <Card.Header className="p-0 border">
                  <Row className="mx-0 d-flex align-items-center">
                    <AccordionToggle eventKey="0">Expand</AccordionToggle>
                    <Col xs={4}>
                      <TextField name="name" label={false} placeholder="Group Name" className="mb-0" />
                    </Col>
                    <ListDelField removeIcon={<Delete text="Group" />} className="ml-auto" />
                  </Row>
                </Card.Header>

                <Accordion.Collapse eventKey="0" className="border border-top-0">
                  <Container className="mx-0">
                    <Row>
                      <Col xs={3} className="border-right">
                        <Row className="my-2">
                          <Col>
                            <span>Limits</span>
                          </Col>
                        </Row>
                        <Row>
                          <Col>
                            <NumField name="max" label={false} placeholder="Max" className="mb-2" />
                          </Col>
                        </Row>
                        <Row>
                          <Col>
                            <NumField name="min" label={false} placeholder="Min" className="mb-2" />
                          </Col>
                        </Row>
                      </Col>
                      <Col xs={9}>
                        <Options />
                      </Col>
                    </Row>
                  </Container>  
                </Accordion.Collapse>

              </Container>              
            </ListItemField>
        </ListField>
      </Card>
    </Accordion>    

Thanks,
Alex

[radekmie]

Hi @LordA98. This looks quite complex :neutral_face: ListField uses cloneElement under the hood, therefore you won't be able to achieve that easily (or maybe even at all).

What you could do, would be to create a custom AccordionListField (with AccordionAddField, AccordionDelField and AccordionItemField; you may not need all of them, depending on the use case) instead, based on ListField logic. It may require some changes (mostly UI-related; that eventKey will have to be handled here as well) but it really pays off. I've never made an accordion one but a carousel one worked great.

[LordA98]

@radekmie Yes, it's a mess! It was a very hacky solution to make the nested ListField's more condensed.

Creating a custom AccordionListField is a good idea - I didn't think about that.

Would you be able to provide a link to the custom carousel field you created? It would be useful to use a reference.

[radekmie]

@LordA98 Well, I can't really (NDA). But I can assure you, that it's really similar to the ListField with a small layout change. Give it a try and post here any issues you'll encounter.

[LordA98]

@radekmie No problem. I did wonder but thought I'd ask anyway.

Okay, thank you!

[radekmie]

@LordA98 I'll close this issue for now, but feel free to file a new one or continue this one with further problems and questions.

[LordA98]

Hi @radekmie, that's fine. I will ask questions on this one.

To get started, should I copy the existing ListField code and go from there?

[radekmie]

@LordA98 Yep, copying the whole field and adjusting it completely is usually the easiest. Once you'll get used to that, you'll easily write new field components from scratch.

[LordA98]

@radekmie I'm currently using Javascript (not Typescript).

Can I simply remove the ListFieldProps type definition and usage from the most recent ListField component?

Or should I look at using something closer to the last Javascript implementation of the file?

[radekmie]

@LordA98 Use the one according to your uniforms version. TypeScript got introduced some time ago and we won’t go back, but simply erasing all types should work (assuming your transpiler will handle all required transforms, e.g. nullish coalescing).

[LordA98]

@radekmie Sorry, I've just got it "working" (I can see my changes being updated when the field is rendered now). I had been importing it incorrectly but had not been getting an error for some reason - assumed it was because I had removed the type.

I appreciate the fast replies - thank you!

[LordA98]

@radekmie I've managed to get it working using a custom accordion list field and custom accordion list item field. Thanks for the help!

I thought it might be useful for other people in similar situations. Either to use it or to use an example for creating their own custom fields.

If you think it might also be useful for others, is there somewhere I can upload it / post about it? I could comment the code here if not / upload the custom accordion field to NPM as a separate package?

[radekmie]

@LordA98 That's great! Do post it here so others can see it. We _may_ use it in the future as an example in the docs as well (maybe in a slightly simplified version). If you think it makes sense to release it as an npm package - do that as well.