@canlooks/can-ui 0.0.199 → 0.0.201

package/dist/cjs/components/cascade/cascade.js

@@ -32,6 +32,36 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     (0, react_1.useEffect)(() => {
         loadOptions && searchable && deferredSearchValue && innerLoadOptions();
     }, [deferredSearchValue]);
+    /**
+     * --------------------------------------------------------------------
+     * 控制选中状态
+     */
+    const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
+    // 路径转单一键
+    const toStandardValue = (path) => {
+        if (!path) {
+            return;
+        }
+        if (multiple) {
+            return path.map(path => path[path.length - 1]);
+        }
+        return path[path.length - 1];
+    };
+    // 单一键转路径
+    const toPathifiedValue = (value) => {
+        if (!value) {
+            return;
+        }
+        const findParent = (v, path = []) => {
+            const node = optionsMap.get(v);
+            if (node) {
+                path.unshift(v);
+                node._parentId && findParent(node._parentId, path);
+            }
+            return path;
+        };
+        return multiple ? value.map(v => findParent(v)) : findParent(value);
+    };
     /**
      * --------------------------------------------------------------------
      * 打开的弹框与面板
@@ -41,7 +71,13 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 关闭动画结束后清空搜索框
         searchable && !open && setInnerSearchValue('');
     };
-    const [openedPanels, setOpenedPanels] = (0, react_1.useState)([]);
+    const [openedPanels, setOpenedPanels] = (0, react_1.useState)(() => {
+        const value = multiple ? pathifiedValue.current?.[0] : pathifiedValue.current;
+        if ((0, utils_1.isNoValue)(value)) {
+            return [];
+        }
+        return value.slice(0, -1);
+    });
     const toggleOpenedPanels = (value, index) => {
         setOpenedPanels(o => {
             const newOpened = o.slice(0, index);
@@ -69,55 +105,17 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 打开下拉框时请求数据
         loadOptions && innerOpen.current && innerLoadOptions(innerSearchValue.current);
     }, [innerOpen.current]);
-    const actualOptions = innerOptions || options;
-    /**
-     * --------------------------------------------------------------------
-     * 控制选中状态
-     */
-    const [pathifiedValue, setPathifiedValue] = (0, utils_1.useControlled)(defaultValue || [], value, onChange);
-    // 路径转单一键
-    const toStandardValue = (path) => {
-        if (!path) {
-            return;
-        }
-        if (multiple) {
-            return path.map(path => path[path.length - 1]);
-        }
-        return path[path.length - 1];
-    };
-    // 单一键转路径
-    const toPathifiedValue = (value) => {
-        if (!value) {
-            return;
-        }
-        const findParent = (v, path = []) => {
-            const node = optionsMap.get(v);
-            if (node) {
-                path.unshift(v);
-                node._parentId && findParent(node._parentId, path);
-            }
-            return path;
-        };
-        return multiple ? value.map(v => findParent(v)) : findParent(value);
-    };
-    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
-        options: actualOptions,
-        multiple,
-        value: toStandardValue(pathifiedValue.current),
-        onChange(value) {
-            setPathifiedValue(toPathifiedValue(value));
-        },
-        primaryKey,
-        childrenKey,
-        clearable,
-        integration
-    });
     const onClear = () => {
         setInnerValue([]);
         setOpenedPanels([]);
     };
     const onOptionClick = async (option, index) => {
         const optVal = option[primaryKey];
+        if (!option.children?.length) {
+            toggleSelected(option[primaryKey]);
+            !multiple && setInnerOpen(false);
+            return;
+        }
         const opened = openedPanels[index] === optVal;
         if (!opened) {
             loadOptions && await innerLoadOptions(innerSearchValue.current, option);
@@ -131,6 +129,20 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         toggleSelected(option[primaryKey]);
         onOptionClick(option, index);
     };
+    const actualOptions = innerOptions || options;
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = (0, selectionContext_1.useSelection)({
+        standalone: true,
+        options: actualOptions,
+        multiple,
+        value: toStandardValue(pathifiedValue.current),
+        onChange(value) {
+            setPathifiedValue(toPathifiedValue(value));
+        },
+        primaryKey,
+        childrenKey,
+        clearable,
+        integration
+    });
     /**
      * --------------------------------------------------------------------
      * 键盘控制
@@ -156,13 +168,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         setOpen: setInnerOpen,
         onEnter(info) {
             keyboardPressHandler(info);
-        },
-        onKeyDown(info, e) {
-            if (e.key === 'ArrowRight' && info.horizontalIndex === info.horizontalCount - 1) {
-                // 在最后一个面板按右箭头，相当于按回车
-                e.preventDefault();
-                keyboardPressHandler(info);
-            }
         }
     });
     const keyboardPressHandler = ({ verticalIndex, horizontalIndex }) => {
@@ -185,9 +190,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         if (multiple) {
             return pathifiedValue.current?.map(path => (0, jsx_runtime_1.jsx)(tag_1.Tag, { closable: true, onClose: () => toggleSelected(path[path.length - 1]), children: (0, utils_1.joinNodes)(path, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }, path[path.length - 1]));
         }
-        else {
-            return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
-        }
+        return ((0, jsx_runtime_1.jsx)("div", { className: cascade_style_1.classes.backfillWrap, children: (0, utils_1.joinNodes)(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
     };
     return ((0, jsx_runtime_1.jsx)(popper_1.Popper, { ...(0, utils_1.mergeComponentProps)({
             css: cascade_style_1.cascadePopperStyle,

package/dist/cjs/components/cascade/cascade.style.js

@@ -61,7 +61,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, text, easing }) => (0, react_
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
-                direction: rtl;
             }
         }
     }

package/dist/cjs/components/cascade/cascadePanel.js

@@ -35,7 +35,7 @@ function CascadePanel({ options, index = 0 }) {
             if (!option || typeof option !== 'object') {
                 return option;
             }
-            const { _parentId, ...opt } = option;
+            const { _parentId, _isLast, ...opt } = option;
             const optVal = opt[primaryKey];
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;

package/dist/cjs/components/selectionContext/selectionContext.d.ts

@@ -32,6 +32,8 @@ export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id
     disabled?: boolean;
     onToggle?(checked: boolean, value: V, option?: O): void;
     children?: ReactNode;
+    /** 若设为true，则该Context不受父级Context影响，默认为`false` */
+    standalone?: boolean;
 };
 export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
     inSelection: true;

package/dist/cjs/components/selectionContext/selectionHook.js

@@ -19,15 +19,12 @@ function useSelection({ ...props }) {
      * 若嵌套在另个一SelectionContext内，取最外层数据
      */
     const context = (0, selectionContext_1.useSelectionContext)();
-    if (context.inSelection) {
+    if (!props.standalone && context.inSelection) {
         innerValue.current = context.value;
         setInnerValue = context.setValue;
         innerOptions.current = context.options;
     }
-    const optionsMap = (0, react_1.useMemo)(() => {
-        if (context.inSelection) {
-            return context.optionsMap;
-        }
+    const _optionsMap = (0, react_1.useMemo)(() => {
         const map = new Map();
         const fn = (arr, parentId) => {
             // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
@@ -41,7 +38,8 @@ function useSelection({ ...props }) {
         };
         fn(innerOptions.current);
         return map;
-    }, [innerOptions.current, props.primaryKey, props.childrenKey, context.optionsMap]);
+    }, [innerOptions.current, props.primaryKey, props.childrenKey]);
+    const optionsMap = !props.standalone && context.inSelection ? context.optionsMap : _optionsMap;
     const syncOptionsMap = (0, utils_1.useSync)(optionsMap);
     const syncProps = (0, utils_1.useSync)(props);
     const calSelectionStatus = (selectedSet = new Set((0, utils_1.toArray)(innerValue.current))) => {
@@ -84,21 +82,15 @@ function useSelection({ ...props }) {
         return map;
     };
     const preCalSelectionStatus = (0, react_1.useRef)(void 0);
-    const selectionStatus = (0, react_1.useMemo)(() => {
-        if (context.inSelection) {
-            return context.selectionStatus;
-        }
+    const _selectionStatus = (0, react_1.useMemo)(() => {
         // 调用toggleSelected()方法后可能会预先计算selectionStatus
         const ret = preCalSelectionStatus.current || calSelectionStatus();
         preCalSelectionStatus.current = void 0;
         return ret;
-    }, [innerValue.current, optionsMap, props.multiple, props.relation, context.selectionStatus]);
+    }, [innerValue.current, optionsMap, props.multiple, props.relation]);
+    const selectionStatus = !props.standalone && context.inSelection ? context.selectionStatus : _selectionStatus;
     const syncSelectionStatus = (0, utils_1.useSync)(selectionStatus);
-    const toggleSelected = (0, react_1.useCallback)((value) => {
-        if (context.inSelection) {
-            context.toggleSelected(value);
-            return;
-        }
+    const _toggleSelected = (0, react_1.useCallback)((value) => {
         if (syncProps.current.disabled) {
             return;
         }
@@ -190,7 +182,8 @@ function useSelection({ ...props }) {
                 children && loopOptions(callback, children, ret);
             });
         }
-    }, [context.inSelection]);
+    }, []);
+    const toggleSelected = !props.standalone && context.inSelection ? context.toggleSelected : _toggleSelected;
     return {
         inSelection: true,
         multiple: props.multiple,

package/dist/cjs/components/treeSelect/treeSelect.js

@@ -39,6 +39,7 @@ value, onChange, renderBackfill, ...props }) => {
         return fn(react_1.Children.toArray(children));
     }, [options, nodes, children]);
     const { value: innerValue, setValue: setInnerValue, toggleSelected, optionsMap } = (0, selectionContext_1.useSelection)({
+        standalone: true,
         options: actualOptions,
         primaryKey,
         childrenKey,

package/dist/esm/components/cascade/cascade.js

@@ -28,6 +28,36 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
     useEffect(() => {
         loadOptions && searchable && deferredSearchValue && innerLoadOptions();
     }, [deferredSearchValue]);
+    /**
+     * --------------------------------------------------------------------
+     * 控制选中状态
+     */
+    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
+    // 路径转单一键
+    const toStandardValue = (path) => {
+        if (!path) {
+            return;
+        }
+        if (multiple) {
+            return path.map(path => path[path.length - 1]);
+        }
+        return path[path.length - 1];
+    };
+    // 单一键转路径
+    const toPathifiedValue = (value) => {
+        if (!value) {
+            return;
+        }
+        const findParent = (v, path = []) => {
+            const node = optionsMap.get(v);
+            if (node) {
+                path.unshift(v);
+                node._parentId && findParent(node._parentId, path);
+            }
+            return path;
+        };
+        return multiple ? value.map(v => findParent(v)) : findParent(value);
+    };
     /**
      * --------------------------------------------------------------------
      * 打开的弹框与面板
@@ -37,7 +67,13 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 关闭动画结束后清空搜索框
         searchable && !open && setInnerSearchValue('');
     };
-    const [openedPanels, setOpenedPanels] = useState([]);
+    const [openedPanels, setOpenedPanels] = useState(() => {
+        const value = multiple ? pathifiedValue.current?.[0] : pathifiedValue.current;
+        if (isNoValue(value)) {
+            return [];
+        }
+        return value.slice(0, -1);
+    });
     const toggleOpenedPanels = (value, index) => {
         setOpenedPanels(o => {
             const newOpened = o.slice(0, index);
@@ -65,55 +101,17 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         // 打开下拉框时请求数据
         loadOptions && innerOpen.current && innerLoadOptions(innerSearchValue.current);
     }, [innerOpen.current]);
-    const actualOptions = innerOptions || options;
-    /**
-     * --------------------------------------------------------------------
-     * 控制选中状态
-     */
-    const [pathifiedValue, setPathifiedValue] = useControlled(defaultValue || [], value, onChange);
-    // 路径转单一键
-    const toStandardValue = (path) => {
-        if (!path) {
-            return;
-        }
-        if (multiple) {
-            return path.map(path => path[path.length - 1]);
-        }
-        return path[path.length - 1];
-    };
-    // 单一键转路径
-    const toPathifiedValue = (value) => {
-        if (!value) {
-            return;
-        }
-        const findParent = (v, path = []) => {
-            const node = optionsMap.get(v);
-            if (node) {
-                path.unshift(v);
-                node._parentId && findParent(node._parentId, path);
-            }
-            return path;
-        };
-        return multiple ? value.map(v => findParent(v)) : findParent(value);
-    };
-    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
-        options: actualOptions,
-        multiple,
-        value: toStandardValue(pathifiedValue.current),
-        onChange(value) {
-            setPathifiedValue(toPathifiedValue(value));
-        },
-        primaryKey,
-        childrenKey,
-        clearable,
-        integration
-    });
     const onClear = () => {
         setInnerValue([]);
         setOpenedPanels([]);
     };
     const onOptionClick = async (option, index) => {
         const optVal = option[primaryKey];
+        if (!option.children?.length) {
+            toggleSelected(option[primaryKey]);
+            !multiple && setInnerOpen(false);
+            return;
+        }
         const opened = openedPanels[index] === optVal;
         if (!opened) {
             loadOptions && await innerLoadOptions(innerSearchValue.current, option);
@@ -127,6 +125,20 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         toggleSelected(option[primaryKey]);
         onOptionClick(option, index);
     };
+    const actualOptions = innerOptions || options;
+    const { value: innerValue, setValue: setInnerValue, toggleSelected, selectionStatus, optionsMap } = useSelection({
+        standalone: true,
+        options: actualOptions,
+        multiple,
+        value: toStandardValue(pathifiedValue.current),
+        onChange(value) {
+            setPathifiedValue(toPathifiedValue(value));
+        },
+        primaryKey,
+        childrenKey,
+        clearable,
+        integration
+    });
     /**
      * --------------------------------------------------------------------
      * 键盘控制
@@ -152,13 +164,6 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         setOpen: setInnerOpen,
         onEnter(info) {
             keyboardPressHandler(info);
-        },
-        onKeyDown(info, e) {
-            if (e.key === 'ArrowRight' && info.horizontalIndex === info.horizontalCount - 1) {
-                // 在最后一个面板按右箭头，相当于按回车
-                e.preventDefault();
-                keyboardPressHandler(info);
-            }
         }
     });
     const keyboardPressHandler = ({ verticalIndex, horizontalIndex }) => {
@@ -181,9 +186,7 @@ loading, options, labelKey = 'label', primaryKey = 'value', childrenKey = 'child
         if (multiple) {
             return pathifiedValue.current?.map(path => _jsx(Tag, { closable: true, onClose: () => toggleSelected(path[path.length - 1]), children: joinNodes(path, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }, path[path.length - 1]));
         }
-        else {
-            return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
-        }
+        return (_jsx("div", { className: classes.backfillWrap, children: joinNodes(pathifiedValue.current, v => optionsMap.get(v)?.[labelKey] ?? v.toString()) }));
     };
     return (_jsx(Popper, { ...mergeComponentProps({
             css: cascadePopperStyle,

package/dist/esm/components/cascade/cascade.style.js

@@ -58,7 +58,6 @@ export const style = defineCss(({ spacing, text, easing }) => css `
                 white-space: nowrap;
                 text-overflow: ellipsis;
                 overflow: hidden;
-                direction: rtl;
             }
         }
     }

package/dist/esm/components/cascade/cascadePanel.js

@@ -32,7 +32,7 @@ export function CascadePanel({ options, index = 0 }) {
             if (!option || typeof option !== 'object') {
                 return option;
             }
-            const { _parentId, ...opt } = option;
+            const { _parentId, _isLast, ...opt } = option;
             const optVal = opt[primaryKey];
             const status = selectionStatus?.get(optVal);
             const opened = openedPanels[index] === optVal;

package/dist/esm/components/selectionContext/selectionContext.d.ts

@@ -32,6 +32,8 @@ export type SelectionContextBaseProps<O extends OptionType<V>, V extends Id = Id
     disabled?: boolean;
     onToggle?(checked: boolean, value: V, option?: O): void;
     children?: ReactNode;
+    /** 若设为true，则该Context不受父级Context影响，默认为`false` */
+    standalone?: boolean;
 };
 export type ISelectionContext<O extends OptionType<V>, V extends Id = Id> = {
     inSelection: true;

package/dist/esm/components/selectionContext/selectionHook.js

@@ -15,15 +15,12 @@ export function useSelection({ ...props }) {
      * 若嵌套在另个一SelectionContext内，取最外层数据
      */
     const context = useSelectionContext();
-    if (context.inSelection) {
+    if (!props.standalone && context.inSelection) {
         innerValue.current = context.value;
         setInnerValue = context.setValue;
         innerOptions.current = context.options;
     }
-    const optionsMap = useMemo(() => {
-        if (context.inSelection) {
-            return context.optionsMap;
-        }
+    const _optionsMap = useMemo(() => {
         const map = new Map();
         const fn = (arr, parentId) => {
             // 有时arr可能不为数组，需要判断，如DataGrid组件的row.children
@@ -37,7 +34,8 @@ export function useSelection({ ...props }) {
         };
         fn(innerOptions.current);
         return map;
-    }, [innerOptions.current, props.primaryKey, props.childrenKey, context.optionsMap]);
+    }, [innerOptions.current, props.primaryKey, props.childrenKey]);
+    const optionsMap = !props.standalone && context.inSelection ? context.optionsMap : _optionsMap;
     const syncOptionsMap = useSync(optionsMap);
     const syncProps = useSync(props);
     const calSelectionStatus = (selectedSet = new Set(toArray(innerValue.current))) => {
@@ -80,21 +78,15 @@ export function useSelection({ ...props }) {
         return map;
     };
     const preCalSelectionStatus = useRef(void 0);
-    const selectionStatus = useMemo(() => {
-        if (context.inSelection) {
-            return context.selectionStatus;
-        }
+    const _selectionStatus = useMemo(() => {
         // 调用toggleSelected()方法后可能会预先计算selectionStatus
         const ret = preCalSelectionStatus.current || calSelectionStatus();
         preCalSelectionStatus.current = void 0;
         return ret;
-    }, [innerValue.current, optionsMap, props.multiple, props.relation, context.selectionStatus]);
+    }, [innerValue.current, optionsMap, props.multiple, props.relation]);
+    const selectionStatus = !props.standalone && context.inSelection ? context.selectionStatus : _selectionStatus;
     const syncSelectionStatus = useSync(selectionStatus);
-    const toggleSelected = useCallback((value) => {
-        if (context.inSelection) {
-            context.toggleSelected(value);
-            return;
-        }
+    const _toggleSelected = useCallback((value) => {
         if (syncProps.current.disabled) {
             return;
         }
@@ -186,7 +178,8 @@ export function useSelection({ ...props }) {
                 children && loopOptions(callback, children, ret);
             });
         }
-    }, [context.inSelection]);
+    }, []);
+    const toggleSelected = !props.standalone && context.inSelection ? context.toggleSelected : _toggleSelected;
     return {
         inSelection: true,
         multiple: props.multiple,

package/dist/esm/components/treeSelect/treeSelect.js

@@ -36,6 +36,7 @@ value, onChange, renderBackfill, ...props }) => {
         return fn(Children.toArray(children));
     }, [options, nodes, children]);
     const { value: innerValue, setValue: setInnerValue, toggleSelected, optionsMap } = useSelection({
+        standalone: true,
         options: actualOptions,
         primaryKey,
         childrenKey,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.199",
+  "version": "0.0.201",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",