Нужно реализовать компонент каскадер как в библиотеке 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;
Понимаю, что где-то что-то делаю не так, но не понимаю где и что именно