diff --git a/packages/docs/blocks/input/TreeSelector.yaml b/packages/docs/blocks/input/TreeSelector.yaml index ad48f6f22..d0d67253b 100644 --- a/packages/docs/blocks/input/TreeSelector.yaml +++ b/packages/docs/blocks/input/TreeSelector.yaml @@ -39,6 +39,8 @@ _ref: The options for the selector can be provided as an array of label-value pairs, where the label is a string, and the value can be of any type, including objects like dates and arrays. + The value in state is an array of values with the selected node value first followed by any parent node values. + examples: - title: Tree list of type and category with connecting line and single select. block: diff --git a/packages/plugins/blocks/blocks-antd/src/blocks/TreeSelector/TreeSelector.js b/packages/plugins/blocks/blocks-antd/src/blocks/TreeSelector/TreeSelector.js index 863e42545..dfdea8812 100644 --- a/packages/plugins/blocks/blocks-antd/src/blocks/TreeSelector/TreeSelector.js +++ b/packages/plugins/blocks/blocks-antd/src/blocks/TreeSelector/TreeSelector.js @@ -21,7 +21,7 @@ import { blockDefaultProps, renderHtml } from '@lowdefy/block-utils'; const transformData = (data, valueMap, prefix = '') => { return data.map(({ children, disabled, disableCheckbox, label, value }, i) => { const key = `${prefix}-${i}`; - valueMap[key] = prefix ? [...valueMap[prefix], value] : [value]; + valueMap[key] = prefix ? [value, ...valueMap[prefix]] : [value]; return { children: children && transformData(children, valueMap, key), disabled, @@ -32,13 +32,16 @@ const transformData = (data, valueMap, prefix = '') => { }); }; -const getValueKey = (value, valueMap) => { +const getValueKeys = (value, valueMap) => { for (const key in valueMap) { if (JSON.stringify(value) === JSON.stringify(valueMap[key])) { - return key; + return key + .split('-') + .slice(1) + .reduce((acc, curr, i) => [...acc, acc[i - 1] ? acc[i - 1] + '-' + curr : '-' + curr], []); } } - return null; + return []; }; const TreeSelector = ({ blockId, properties, content, methods, value }) => { @@ -46,13 +49,17 @@ const TreeSelector = ({ blockId, properties, content, methods, value }) => { const valueMap = {}; const transformedData = transformData(treeData, valueMap); const [selectedKeys, setSelectedKeys] = useState([]); + const [expandedKeys, setExpandedKeys] = useState([]); useEffect(() => { + let nextValue; if (value === null || (Array.isArray(value) && !value.length)) { - setSelectedKeys(null); + nextValue = []; } else { - setSelectedKeys([getValueKey(value, valueMap)]); + nextValue = getValueKeys(value, valueMap); } + setSelectedKeys([nextValue[nextValue.length - 1]]); + setExpandedKeys([...new Set([...nextValue.slice(0, nextValue.length - 1), ...expandedKeys])]); }, [value]); const onSelect = (selectedKeys) => { @@ -60,6 +67,11 @@ const TreeSelector = ({ blockId, properties, content, methods, value }) => { methods.triggerEvent({ name: 'onChange' }); setSelectedKeys(selectedKeys); }; + + const onExpand = (nextExpandedKeys) => { + setExpandedKeys(nextExpandedKeys); + }; + return ( { content={content.options && content.options()} treeData={transformedData} onSelect={onSelect} + onExpand={onExpand} titleRender={({ renderTitle }) => renderHtml({ html: renderTitle, methods })} selectedKeys={selectedKeys} + expandedKeys={expandedKeys} /> ); };