Нужно реализовать компонент каскадер как в библиотеке ant design

Доброго времени суток всем. Передо мной стоит задача, сделать собственную реализацию компонента каскадер из библиотеки ant design https://ant.design/components/cascader/ Не могу сказать, что у меня совсем не получилось, но, на данный момент, элементы каскадера выпадают вертикально, а надо чтоб горизонтально. Структура данных вот такая:

const options = [
{
        Children: [
            {
                Children: [
                    {
                        Children: [
                            {
                                Id: '123',
                                Label: '123'
                            },
                            {
                                Id: '456',
                                Label: '456'
                            },
                            {
                                Children: [
                                    {
                                        Id: '789',
                                        Label: '789'
                                    },
                                    {
                                        Id: '147',
                                        Label: '147'
                                    }
                                ],
                                Id: '258',
                                Label: '258'
                            },
                            {
                                Id: '369',
                                Label: '369'
                            },
                            {
                                Children: [
                                    {
                                        Id: '357',
                                        Label: '357'
                                    },
                                    {
                                        Id: '159',
                                        Label: '159'
                                    },
                                    {
                                        Id: '153',
                                        Label: '153'
                                    }
                                ],
                                Id: '486',
                                Label: '486'
                            }
                        ],
                        Id: '759',
                        Label: '759'
                    },
                    {
                        Id: '264',
                        Label: '264'
                    },
                    {
                        Children: [
                            {
                                Id: '111',
                                Label: '111'
                            },
                            {
                                Children: [
                                    {
                                        Id: '222',
                                        Label: '222'
                                    },
                                    {
                                        Id: '333',
                                        Label: '333'
                                    }
                                ],
                                Id: '444',
                                Label: '555'
                            }
                        ],
                        Id: '666',
                        Label: '666'
                    },
                    {
                        Children: [
                            {
                                Id: '777',
                                Label: '777'
                            },
                            {
                                Id: '888',
                                Label: '888'
                            },
                            {
                                Id: '999',
                                Label: '999'
                            }
                        ],
                        Id: '1212',
                        Label: '1212'
                    }
                ],
                Id: '2323',
                Label: '2323'
            }
        ],
        Id: '3434',
        Label: '3434'
    }
]

Вложенность может быть любая

Вот сам код каскадера (некоторые вещи пришлось убрать, так как не знаю, могу ли я это кому-то показывать, но, надеюсь, основная суть будет ясна)

const Cascader = props => {
const [cascaderRowVisible, setCascaderRowVisible] = useState(false)

const onInputClick = () => {
   //код выполняющийся по клику на инпут    

    }

return (
        <div>
            <div>
                <span>Label</span>
                <input type="text" readOnly={true} placeholder={props.inputPlaceholder} disabled={props.isDisabled}/>
            </div>

            {
                cascaderRowVisible && <div className={styles.cascaderRow}>

                    {
                        oprions.Children.map(element => {
                            return <>
                                <CascaderBlock element={element} setPath={setPath} path={path}
                                               placeholder={inputPlaceholder}
                                               setPlaceholder={setPlaceholder}
                                               setCascaderRowVisible={setCascaderRowVisible}/>
                            </>

                        })}

                </div>
            }

        </div>
    );
}


const CascaderBlock = ({element, setCascaderRowVisible}) => {
    const [expanded, setExpanded] = useState(false)

    const showBlocks = () => {
        let blocksArray = []

        if (element.Children && element.Children.length > 0) {
            element.Children.map((element, index) => {
                blocksArray.push(<CascaderBlock key={index} element={element} 
                                                setCascaderRowVisible={setCascaderRowVisible}/>)
            })
        }

        return blocksArray
    }

    return (
        <div className={styles.cascaderBlock}>
            <CascaderBlockItem element={element} expanded={expanded} showBlocks={showBlocks} setExpanded={setExpanded}
                                 
                               setCascaderRowVisible={setCascaderRowVisible}/>

            {
                expanded && <>
                    {showBlocks()}
                </>
            }
        </div>

    );
};

const CascaderBlockItem = ({element, expanded, setExpanded, setCascaderRowVisible}) => {

  

    const toggle = () => {// open other block on row click
        if(!expanded) {
            setExpanded(true)
     
        } else if (expanded && !element.Children) {
            setCascaderRowVisible(false)
        }

    }

    return (

        <div onClick={toggle}>
            {element.Label}
          

        </div>
    );
};

export default CascaderBlockItem;

Понимаю, что где-то что-то делаю не так, но не понимаю где и что именно


Ответы (0 шт):