is there a method to virtulize the antd collapse component?

[oylp1988]

Thanks for this great lib, I have an user case of building a virtulized collapse list.

As you as know, the child of a collapse component is an array of some collapse panel. However, the FixedSizeList will return you a container, which will cause the collapse unable to be rendered.

Could anyone share the thoughts?

[jtheberge]

Hi @oylp1988 , were you able to find a solution to this problem? I may be looking at this same thing soon 😄

[roddc]

This is what I do with react-window:

    const innerElementType = useMemo(
      () => (props: any) =>
        (
          <Collapse
            {...props}
            bordered={false}
            accordion
            expandIconPosition="end"
            className={styles.collapseList}
            onChange={onCollapseChange}
          />
        ),
      [onCollapseChange]
    );
<VariableSizeList
        height={500}
        itemCount={items.length}
       // need to pass the custom key here, otherwise the index will be the key
        itemKey={(index) => items[index].id}
        itemSize={() => 200}
        width="100%"
        innerElementType={innerElementType}>
        {({ index, style, data, isScrolling, ...rest }) => {
          const item = items[index];
          return (
            <div style={style}>
             // This is a wrapper for Collapse.Panel
              <ItemCard {...rest} key={data.id} item={item} header='Info'>
                <InfoList info={item.info} />
              </ItemCard>
            </div>
          );
        }}
</VariableSizeList>

Hope it helps