@lowdefy/blocks-antd 5.3.0 → 5.4.0

package/dist/blocks/TreeSelector/TreeSelector.js

@@ -12,98 +12,137 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ import React, { useState, useEffect } from 'react';
-import { Tree } from 'antd';
+*/ import React, { useState } from 'react';
+import { TreeSelect } from 'antd';
 import { renderHtml, withBlockDefaults } from '@lowdefy/block-utils';
+import { type } from '@lowdefy/helpers';
+import Label from '../Label/Label.js';
 import withTheme from '../withTheme.js';
-const transformData = (data, valueMap, prefix = '')=>{
-    return data.map(({ children, disabled, disableCheckbox, label, value }, i)=>{
-        const key = `${prefix}-${i}`;
-        valueMap[key] = prefix ? [
-            value,
-            ...valueMap[prefix]
-        ] : [
-            value
-        ];
-        return {
-            children: children && transformData(children, valueMap, key),
-            disabled,
-            disableCheckbox,
-            key,
-            renderTitle: label
-        };
+import useSelectorOptions from '../../useSelectorOptions.js';
+import getSelectedIndex from '../../getSelectedIndex.js';
+import getTreeData, { ROOT_PID } from '../../getTreeData.js';
+const TreeSelector = ({ blockId, classNames = {}, components: { Icon }, events, loading, methods, properties, required, styles = {}, validation, value })=>{
+    const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
+    const entries = useSelectorOptions({
+        properties,
+        methods
     });
-};
-const getValueKeys = (value, valueMap)=>{
-    for(const key in valueMap){
-        if (JSON.stringify(value) === JSON.stringify(valueMap[key])) {
-            return key.split('-').slice(1).reduce((acc, curr, i)=>[
-                    ...acc,
-                    acc[i - 1] ? acc[i - 1] + '-' + curr : '-' + curr
-                ], []);
-        }
-    }
-    return [];
-};
-const TreeSelector = ({ blockId, classNames = {}, properties, content, methods, styles = {}, value })=>{
-    const treeData = properties.options;
-    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) {
-            nextValue = [];
-        } else {
-            nextValue = getValueKeys(value, valueMap);
-        }
-        setSelectedKeys([
-            nextValue[nextValue.length - 1]
-        ]);
-        setExpandedKeys([
-            ...new Set([
-                ...nextValue.slice(0, nextValue.length - 1),
-                ...expandedKeys
-            ])
-        ]);
-    }, [
-        value
-    ]);
-    const onSelect = (selectedKeys)=>{
-        const val = selectedKeys.map((key)=>valueMap[key]).flat();
-        methods.setValue(val);
-        methods.triggerEvent({
-            name: 'onChange',
-            event: {
-                value: val
-            }
-        });
-        setSelectedKeys(selectedKeys);
-    };
-    const onExpand = (nextExpandedKeys)=>{
-        setExpandedKeys(nextExpandedKeys);
+    const treeData = getTreeData({
+        entries,
+        properties
+    });
+    // primaryKey / parentKey are structural (node id + parent ref); the stored value is the valueKey
+    // value, so selection is matched on valueKey — hide primaryKey from getSelectedIndex.
+    const matchProps = {
+        ...properties,
+        primaryKey: undefined
     };
-    return /*#__PURE__*/ React.createElement(Tree, {
-        id: blockId,
-        className: classNames.element,
-        checkable: properties.checkable,
-        disabled: properties.disabled,
-        defaultExpandAll: properties.defaultExpandAll,
-        showLine: properties.showLine,
-        selectable: properties.selectable,
-        multiple: false,
-        content: content.options && content.options(),
-        style: styles.element,
-        treeData: transformedData,
-        onSelect: onSelect,
-        onExpand: onExpand,
-        titleRender: ({ renderTitle })=>renderHtml({
-                html: renderTitle,
-                methods
-            }),
-        selectedKeys: selectedKeys,
-        expandedKeys: expandedKeys
+    let antdVariant = properties.variant;
+    if (properties.bordered === false) antdVariant = 'borderless';
+    return /*#__PURE__*/ React.createElement(Label, {
+        blockId: blockId,
+        methods: methods,
+        classNames: classNames,
+        components: {
+            Icon
+        },
+        events: events,
+        properties: {
+            title: properties.title,
+            size: properties.size,
+            ...properties.label
+        },
+        required: required,
+        styles: styles,
+        validation: validation,
+        content: {
+            content: ()=>/*#__PURE__*/ React.createElement("div", {
+                    style: {
+                        width: '100%'
+                    }
+                }, /*#__PURE__*/ React.createElement("div", {
+                    id: `${blockId}_${elementId}_popup`
+                }), /*#__PURE__*/ React.createElement(TreeSelect, {
+                    id: `${blockId}_input`,
+                    variant: antdVariant,
+                    className: classNames.element,
+                    style: {
+                        width: '100%',
+                        ...styles.element
+                    },
+                    disabled: properties.disabled || loading,
+                    allowClear: properties.allowClear !== false,
+                    placeholder: properties.placeholder ?? methods.translate('blocks.treeSelector.placeholder'),
+                    status: validation.status,
+                    size: properties.size,
+                    autoFocus: properties.autoFocus,
+                    getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
+                    treeDataSimpleMode: {
+                        id: 'id',
+                        pId: 'pId',
+                        rootPId: ROOT_PID
+                    },
+                    treeData: treeData,
+                    treeDefaultExpandAll: properties.treeDefaultExpandAll,
+                    showSearch: properties.showSearch !== false,
+                    treeNodeFilterProp: "title",
+                    treeTitleRender: (node)=>renderHtml({
+                            html: `${node.title}`,
+                            methods
+                        }),
+                    notFoundContent: properties.notFoundContent ?? methods.translate('blocks.treeSelector.notFound'),
+                    suffixIcon: properties.suffixIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_suffixIcon`,
+                        classNames: {
+                            element: classNames.suffixIcon
+                        },
+                        events: events,
+                        properties: properties.suffixIcon,
+                        styles: {
+                            element: styles.suffixIcon
+                        }
+                    }),
+                    clearIcon: properties.clearIcon && /*#__PURE__*/ React.createElement(Icon, {
+                        blockId: `${blockId}_clearIcon`,
+                        classNames: {
+                            element: classNames.clearIcon
+                        },
+                        events: events,
+                        properties: properties.clearIcon,
+                        styles: {
+                            element: styles.clearIcon
+                        }
+                    }),
+                    value: getSelectedIndex(value, entries, {
+                        properties: matchProps
+                    }),
+                    onChange: (idx)=>{
+                        const val = type.isNone(idx) ? null : entries[idx].value;
+                        methods.setValue(val);
+                        methods.triggerEvent({
+                            name: 'onChange',
+                            event: {
+                                value: val
+                            }
+                        });
+                    },
+                    onBlur: ()=>methods.triggerEvent({
+                            name: 'onBlur'
+                        }),
+                    onFocus: ()=>methods.triggerEvent({
+                            name: 'onFocus'
+                        }),
+                    onClear: ()=>methods.triggerEvent({
+                            name: 'onClear'
+                        }),
+                    onSearch: (v)=>methods.triggerEvent({
+                            name: 'onSearch',
+                            event: {
+                                value: v
+                            }
+                        })
+                }))
+        }
     });
 };
 export default withTheme('TreeSelect', withBlockDefaults(TreeSelector));

package/dist/blocks/TreeSelector/e2e.js

@@ -14,20 +14,31 @@
   limitations under the License.
 */ import { createBlockHelper, escapeId } from '@lowdefy/e2e-utils';
 import { expect } from '@playwright/test';
-const locator = (page, blockId)=>page.locator(`#bl-${escapeId(blockId)} .ant-tree`);
+const locator = (page, blockId)=>page.locator(`.ant-select:has(#${escapeId(blockId)}_input)`);
+const openDropdown = (page)=>page.locator('.ant-select-dropdown:not(.ant-select-dropdown-hidden)');
 export default createBlockHelper({
     locator,
     do: {
-        expand: (page, blockId, label)=>locator(page, blockId).locator('.ant-tree-treenode').filter({
+        select: async (page, blockId, label)=>{
+            await locator(page, blockId).click();
+            await openDropdown(page).locator('.ant-select-tree-node-content-wrapper').filter({
                 hasText: label
-            }).locator('.ant-tree-switcher').click(),
-        clickNode: (page, blockId, label)=>locator(page, blockId).locator('.ant-tree-node-content-wrapper').filter({
-                hasText: label
-            }).click()
+            }).click();
+        },
+        clear: async (page, blockId)=>{
+            const sel = locator(page, blockId);
+            await sel.hover();
+            await sel.locator('.ant-select-clear').click();
+        },
+        search: async (page, blockId, text)=>{
+            await locator(page, blockId).click();
+            await page.keyboard.type(text);
+        }
     },
     expect: {
-        selected: (page, blockId, label)=>expect(locator(page, blockId).locator('.ant-tree-treenode-selected').filter({
-                hasText: label
-            })).toBeVisible()
+        disabled: (page, blockId)=>expect(locator(page, blockId)).toHaveClass(/ant-select-disabled/),
+        enabled: (page, blockId)=>expect(locator(page, blockId)).not.toHaveClass(/ant-select-disabled/),
+        value: (page, blockId, val)=>expect(locator(page, blockId).locator('.ant-select-selection-item')).toHaveText(val),
+        placeholder: (page, blockId, text)=>expect(locator(page, blockId).locator('.ant-select-selection-placeholder')).toHaveText(text)
     }
 });

package/dist/blocks/TreeSelector/meta.js

@@ -12,282 +12,98 @@
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-*/ export default {
+*/ import LabelMeta from '../Label/meta.js';
+import label from '../../schemas/label.js';
+import icon from '../../schemas/icon.js';
+import options from '../../schemas/options.js';
+import treeSelectTheme from '../../schemas/treeSelectTheme.js';
+import { data, html, valueKey, primaryKey, parentKey } from '../../schemas/dataOptions.js';
+import { disabled, placeholder, inputTitle, autoFocus, variant, bordered, allowClear, sizeSmallDefaultLarge } from '../../schemas/inputProperties.js';
+export default {
     category: 'input',
-    icons: [],
-    valueType: 'array',
-    slots: {
-        options: 'Custom option content.'
-    },
+    icons: [
+        ...LabelMeta.icons,
+        'AiOutlineCloseCircle',
+        'AiOutlineDown'
+    ],
+    valueType: 'any',
     cssKeys: {
-        element: 'The TreeSelector element.'
+        element: 'The TreeSelector element.',
+        label: 'The TreeSelector label.',
+        extra: 'The TreeSelector extra content.',
+        feedback: 'The TreeSelector validation feedback.',
+        suffixIcon: 'The suffix icon in the TreeSelector.',
+        clearIcon: 'The clear icon in the TreeSelector.'
     },
     events: {
+        onBlur: 'Trigger action when the selector loses focus.',
         onChange: {
             description: 'Trigger action when selection is changed.',
             event: {
                 value: 'The selected value.'
             }
-        }
+        },
+        onFocus: 'Trigger action when the selector gains focus.',
+        onClear: 'Trigger action when the selector is cleared.',
+        onSearch: {
+            description: 'Trigger action when the search input changes.',
+            event: {
+                value: 'The search input value.'
+            }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
         additionalProperties: false,
         properties: {
-            checkable: {
-                type: 'boolean',
-                default: false,
-                description: 'Make nodes checkboxes.'
+            data,
+            html,
+            valueKey,
+            primaryKey,
+            parentKey,
+            options,
+            label,
+            disabled,
+            autoFocus,
+            allowClear: {
+                ...allowClear,
+                default: true
+            },
+            bordered,
+            variant,
+            size: sizeSmallDefaultLarge,
+            title: inputTitle,
+            placeholder: {
+                ...placeholder,
+                default: 'Select item'
             },
-            disabled: {
+            showSearch: {
                 type: 'boolean',
-                default: false,
-                description: 'Disable the block if true.'
+                default: true,
+                description: 'Make the tree searchable.'
             },
-            showLine: {
+            treeDefaultExpandAll: {
                 type: 'boolean',
                 default: false,
-                description: 'Show a connecting line if true.'
+                description: 'Expand all tree nodes by default.'
             },
-            selectable: {
-                type: 'boolean',
-                default: true,
-                description: 'Selectable if true.'
+            notFoundContent: {
+                type: 'string',
+                default: 'Not found',
+                description: 'Content shown when no nodes match the search.'
             },
-            options: {
-                default: [],
-                oneOf: [
-                    {
-                        type: 'array',
-                        description: 'Options can either be an array of label, value pairs.',
-                        items: {
-                            type: 'object',
-                            required: [
-                                'value'
-                            ],
-                            properties: {
-                                label: {
-                                    type: 'string',
-                                    description: 'Value label shown to user - supports html.'
-                                },
-                                value: {
-                                    description: 'Value selected. Can be of any type.',
-                                    oneOf: [
-                                        {
-                                            type: 'string'
-                                        },
-                                        {
-                                            type: 'number'
-                                        },
-                                        {
-                                            type: 'boolean'
-                                        },
-                                        {
-                                            type: 'object'
-                                        },
-                                        {
-                                            type: 'array'
-                                        }
-                                    ],
-                                    docs: {
-                                        displayType: 'yaml'
-                                    }
-                                },
-                                disabled: {
-                                    type: 'boolean',
-                                    description: 'Disable the node if true.',
-                                    default: false
-                                },
-                                disableCheckbox: {
-                                    type: 'boolean',
-                                    description: 'Disable the checkbox if true.',
-                                    default: false
-                                },
-                                style: {
-                                    type: 'object',
-                                    description: 'Css style to applied to option.',
-                                    docs: {
-                                        displayType: 'yaml'
-                                    }
-                                },
-                                children: {
-                                    type: 'array',
-                                    description: 'Options can either be an array of label, value pairs.',
-                                    items: {
-                                        type: 'object',
-                                        required: [
-                                            'value'
-                                        ],
-                                        properties: {
-                                            label: {
-                                                type: 'string',
-                                                description: 'Value label shown to user - supports html.'
-                                            },
-                                            value: {
-                                                description: 'Value selected. Can be of any type.',
-                                                oneOf: [
-                                                    {
-                                                        type: 'string'
-                                                    },
-                                                    {
-                                                        type: 'number'
-                                                    },
-                                                    {
-                                                        type: 'boolean'
-                                                    },
-                                                    {
-                                                        type: 'object'
-                                                    },
-                                                    {
-                                                        type: 'array'
-                                                    }
-                                                ],
-                                                docs: {
-                                                    displayType: 'yaml'
-                                                }
-                                            },
-                                            disabled: {
-                                                type: 'boolean',
-                                                description: 'Disable the node if true.',
-                                                default: false
-                                            },
-                                            disableCheckbox: {
-                                                type: 'boolean',
-                                                description: 'Disable the checkbox if true.',
-                                                default: false
-                                            },
-                                            style: {
-                                                type: 'object',
-                                                description: 'Css style to applied to option.',
-                                                docs: {
-                                                    displayType: 'yaml'
-                                                }
-                                            }
-                                        }
-                                    }
-                                }
-                            }
-                        }
-                    }
-                ]
+            suffixIcon: {
+                ...icon,
+                default: 'AiOutlineDown',
+                description: 'Dropdown suffix icon.'
             },
-            theme: {
-                type: 'object',
-                description: 'Antd design token overrides for this block. See <a href="https://ant.design/components/overview#design-token">antd design tokens</a>.',
-                docs: {
-                    displayType: 'yaml',
-                    link: 'https://ant.design/components/tree-select#design-token'
-                },
-                properties: {
-                    nodeSelectedBg: {
-                        type: 'string',
-                        description: 'Background color of selected tree node.'
-                    },
-                    nodeHoverBg: {
-                        type: 'string',
-                        description: 'Background color of hovered tree node.'
-                    },
-                    titleHeight: {
-                        type: 'number',
-                        default: 24,
-                        description: 'Height of tree node title.'
-                    },
-                    directoryNodeSelectedBg: {
-                        type: 'string',
-                        description: 'Background color of selected directory node.'
-                    },
-                    directoryNodeSelectedColor: {
-                        type: 'string',
-                        description: 'Text color of selected directory node.'
-                    },
-                    clearBg: {
-                        type: 'string',
-                        description: 'Background color of clear button.'
-                    },
-                    selectorBg: {
-                        type: 'string',
-                        description: 'Background color of the selector.'
-                    },
-                    hoverBorderColor: {
-                        type: 'string',
-                        description: 'Border color when hovered.'
-                    },
-                    activeBorderColor: {
-                        type: 'string',
-                        description: 'Border color when active/focused.'
-                    },
-                    activeOutlineColor: {
-                        type: 'string',
-                        description: 'Outline color when active/focused.'
-                    },
-                    optionSelectedBg: {
-                        type: 'string',
-                        description: 'Background of selected option.'
-                    },
-                    optionSelectedColor: {
-                        type: 'string',
-                        description: 'Text color of selected option.'
-                    },
-                    optionSelectedFontWeight: {
-                        type: 'string',
-                        description: 'Font weight of selected option.'
-                    },
-                    optionActiveBg: {
-                        type: 'string',
-                        description: 'Background of active (hovered) option.'
-                    },
-                    optionFontSize: {
-                        type: 'number',
-                        default: 14,
-                        description: 'Font size of options.'
-                    },
-                    optionHeight: {
-                        type: 'number',
-                        default: 32,
-                        description: 'Height of each option.'
-                    },
-                    optionLineHeight: {
-                        type: 'string',
-                        description: 'Line height of options.'
-                    },
-                    optionPadding: {
-                        type: 'string',
-                        description: 'Padding of options.'
-                    },
-                    multipleSelectorBgDisabled: {
-                        type: 'string',
-                        description: 'Background when disabled in multiple mode.'
-                    },
-                    multipleItemBg: {
-                        type: 'string',
-                        description: 'Background of tag items in multiple mode.'
-                    },
-                    multipleItemBorderColor: {
-                        type: 'string',
-                        description: 'Border color of tag items.'
-                    },
-                    multipleItemHeight: {
-                        type: 'number',
-                        default: 24,
-                        description: 'Height of tag items.'
-                    },
-                    multipleItemHeightSM: {
-                        type: 'number',
-                        default: 16,
-                        description: 'Height of tag items (small).'
-                    },
-                    multipleItemHeightLG: {
-                        type: 'number',
-                        default: 32,
-                        description: 'Height of tag items (large).'
-                    },
-                    zIndexPopup: {
-                        type: 'number',
-                        default: 1050,
-                        description: 'z-index of the dropdown.'
-                    }
-                }
-            }
+            clearIcon: {
+                ...icon,
+                default: 'AiOutlineCloseCircle',
+                description: 'Clear icon.'
+            },
+            theme: treeSelectTheme
         }
     }
 };

package/dist/blocks/WeekSelector/WeekSelector.js

@@ -30,6 +30,7 @@ const WeekSelector = ({ blockId, classNames = {}, components: { Icon, Link }, ev
     const [elementId] = useState((0 | Math.random() * 9e2) + 1e2);
     return /*#__PURE__*/ React.createElement(Label, {
         blockId: blockId,
+        methods: methods,
         classNames: classNames,
         components: {
             Icon,
@@ -66,7 +67,7 @@ const WeekSelector = ({ blockId, classNames = {}, components: { Icon, Link }, ev
                     disabledDate: disabledDate(properties.disabledDates),
                     format: properties.format ?? 'YYYY-wo',
                     getPopupContainer: ()=>document.getElementById(`${blockId}_${elementId}_popup`),
-                    placeholder: properties.placeholder ?? 'Select Week',
+                    placeholder: properties.placeholder,
                     size: properties.size,
                     status: validation.status,
                     suffixIcon: /*#__PURE__*/ React.createElement(Icon, {

package/dist/blocks/WeekSelector/meta.js

@@ -38,7 +38,8 @@ export default {
             event: {
                 value: 'The selected week value.'
             }
-        }
+        },
+        onTooltipClick: 'Trigger actions when the tooltip icon is clicked.'
     },
     properties: {
         type: 'object',
@@ -72,8 +73,7 @@ export default {
                 description: 'Format in which to format the date value, eg. "wo-YYYY" will format a date value of 1999-12-26 as "52nd-1999". The format has to conform to dayjs formats.'
             },
             placeholder: {
-                ...placeholder,
-                default: 'Select Week'
+                ...placeholder
             },
             label,
             showToday: {