react-bootstrap#Accordion TypeScript Examples

CollapsibleLight = ({
    title,
    content,
    eventKey,
    defaultActiveKey,
}: {
    title: Renderable;
    content: Renderable;
    eventKey: string;
    defaultActiveKey: string;
}) => {
    return (
        <Accordion defaultActiveKey={defaultActiveKey}>
            <Card className="collapsible-card">
                <Accordion.Toggle as="div" className="collapsible-header-tight" eventKey={eventKey}>
                    <span className="collapsible-header-title">{title}</span>
                    <span className="collapsible-header-arrow">
                        <ArrowToggle eventKey={eventKey} />
                    </span>
                </Accordion.Toggle>
                <Accordion.Collapse eventKey={eventKey}>
                    <>{content}</>
                </Accordion.Collapse>
            </Card>
        </Accordion>
    );
}

FormGroupConsentCkb = (props: any) => {

    const accordionRef = React.useRef(null);
    const [collapsed, setCollapsed] = React.useState(false);

    return (!props ? <></> :
        <Form.Group as={Row} controlId='props.controlId'>
            <Col sm='10'>
                <Accordion ref={accordionRef} onSelect={(evt) => setCollapsed(evt !== null)}>
                    <Accordion.Toggle as={Form.Label} className='input-label' eventKey='0' >
                        <strong>{props.title}{(props.required ? '*' : '')}</strong>{!collapsed && props.accordion ? ' (...)' : ''}
                    </Accordion.Toggle>

                    <Accordion.Collapse className='px-3' eventKey='0' >
                        <span className='d-flex input-label text-justify'>{props.accordion}</span>
                    </Accordion.Collapse>
                </Accordion>
            </Col>
            <Col sm='2' className='jcc-xs-jcfs-md'>
                <Form.Check>
                    <Form.Check.Input
                        className={props.type === 'radio' ? 'rdb-input' : 'ckb-input'}
                        onClick={props.onClick}
                        onChange={props.onChange}
                        type={props.type}
                        name={props.name}
                        disabled={props.readOnly}
                        checked={props.checked}
                        required={props.required}
                        id={props.controlId}
                    />
                </Form.Check>
            </Col>
        </Form.Group>
    )
}

ResultSection = (props: ResultSectionProps) => {
    const [listView, setListView] = useState(false);
    const fileList = props.fileUploadResultMap?.get(props.fileUploadResult);
    if (!fileList?.length) {
        return <></>;
    }
    return (
        <Accordion defaultActiveKey="1">
            <Section>
                <Accordion.Toggle eventKey="0" as="div">
                    <SectionTitle onClick={() => setListView(!listView)}>
                        {props.sectionTitle}
                        {listView ? <ExpandLess /> : <ExpandMore />}
                    </SectionTitle>
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="0">
                    <SectionContent>
                        {props.sectionInfo && (
                            <SectionInfo>{props.sectionInfo}</SectionInfo>
                        )}
                        <FileList
                            fileList={fileList.map((fileID) => (
                                <ResultItemContainer key={fileID}>
                                    {props.filenames.get(fileID)}
                                </ResultItemContainer>
                            ))}
                        />
                    </SectionContent>
                </Accordion.Collapse>
            </Section>
        </Accordion>
    );
}

InProgressSection = (props: InProgressProps) => {
    const [listView, setListView] = useState(true);
    const fileList = props.fileProgressStatuses ?? [];

    return (
        <Accordion defaultActiveKey="0">
            <Section>
                <Accordion.Toggle eventKey="0" as="div">
                    <SectionTitle onClick={() => setListView(!listView)}>
                        {props.sectionTitle}
                        {listView ? <ExpandLess /> : <ExpandMore />}
                    </SectionTitle>
                </Accordion.Toggle>
                <Accordion.Collapse eventKey="0">
                    <SectionContent>
                        {props.sectionInfo && (
                            <SectionInfo>{props.sectionInfo}</SectionInfo>
                        )}
                        <FileList
                            fileList={fileList.map(({ fileID, progress }) => (
                                <InProgressItemContainer key={fileID}>
                                    <span>{props.filenames.get(fileID)}</span>
                                    <span className="separator">{`-`}</span>
                                    <span>{`${progress}%`}</span>
                                </InProgressItemContainer>
                            ))}
                        />
                    </SectionContent>
                </Accordion.Collapse>
            </Section>
        </Accordion>
    );
}

function renderCollapsibleContent(
    {
        title,
        content,
        subheader,
        separator,
        initialOpen,
        accordionKey,
    }: {
        title: Renderable;
        content: Renderable;
        subheader: boolean;
        separator?: boolean;
        initialOpen?: boolean;
        accordionKey?: string;
    },
    enableBottomMargin = true
) {
    if (initialOpen === undefined) initialOpen = true;
    if (separator === undefined) separator = true;
    const eventKey = accordionKey ?? `${title}`;
    return (
        <Accordion defaultActiveKey={initialOpen ? eventKey : ""}>
            <Card className="collapsible-card">
                {separator && <hr className="collapsible-header-separator" />}
                <Accordion.Toggle className="collapsible-header" as="div" eventKey={eventKey}>
                    {subheader ? (
                        <h4 className="collapsible-header-title">{title}</h4>
                    ) : (
                        <h3 className="collapsible-header-title">{title}</h3>
                    )}
                    <span className="collapsible-header-arrow">
                        <ArrowToggle eventKey={eventKey} />
                    </span>
                </Accordion.Toggle>
                {/* 2 px to align the hr line with the start of content */}
                <Accordion.Collapse eventKey={eventKey}>
                    <div style={{ marginTop: "2px", marginBottom: enableBottomMargin ? "1em" : "unset" }}>
                        {content}
                    </div>
                </Accordion.Collapse>
            </Card>
        </Accordion>
    );
}