@canlooks/can-ui 0.0.96 → 0.0.98

package/dist/esm/components/tree/treeNode.js

@@ -11,114 +11,127 @@ import { Icon } from '../icon';
 import { faChevronRight } from '@fortawesome/free-solid-svg-icons/faChevronRight';
 import { faGripVertical } from '@fortawesome/free-solid-svg-icons';
 import { useTreeDndContext } from './treeDnd';
-export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level = 0, ...props }) => {
+import { treeDndClasses } from './treeDnd.style';
+export const TreeNode = memo(({ id, label, prefix, suffix, disabled, _level = 0, ...props }) => {
     const { expandedSet, toggleExpanded, indent, renderExpandIcon, showCheckbox, readOnly, clickLabelToExpand, ...context } = useTreeContext();
     disabled ??= context.disabled;
-    const { selectionStatus, toggleSelected } = useSelectionContext();
-    const currentExpanded = expandedSet.has(value);
-    const status = selectionStatus.get(value);
+    const { optionsMap: nodesMap, selectionStatus, toggleSelected } = useSelectionContext();
+    const currentExpanded = expandedSet.has(id);
+    const status = selectionStatus.get(id);
     const clickHandler = () => {
-        !readOnly && !disabled && toggleSelected(value);
-        clickLabelToExpand && toggleExpanded(value);
+        !readOnly && !disabled && toggleSelected(id);
+        clickLabelToExpand && toggleExpanded(id);
     };
     const hasChildren = !!props.children && (!Array.isArray(props.children) || props.children.length > 0);
     /**
      * ---------------------------------------------------------------------
      * 拖拽部分
      */
-    const { sortable, showDragHandle, onSort, containerRef, isOffsetSatisfied: [isOffsetSatisfied, setIsOffsetSatisfied], dragging: [dragging, setDragging], overing: [overing, setOvering], placement: [placement, setPlacement], overingTimer } = useTreeDndContext();
-    const onClick = (e) => {
-        props.onClick?.(e);
-        !showCheckbox && clickHandler();
-    };
+    const { sortable, showDragHandle, onSort, dragging: [dragging, setDragging], overing, placement } = useTreeDndContext();
+    const isDraggingNode = dragging === id;
+    const nodeRef = useRef(null);
     const dragHandleProps = useDraggable({
         disabled: !sortable,
-        onDragStart(e) {
-            setDragging(value);
-            setOvering(void 0);
-            currentExpanded && toggleExpanded(value);
-        },
-        onDrag({ diff: [diffX] }) {
-            setIsOffsetSatisfied(diffX > indent * 2);
+        onDragStart() {
+            overing.current = void 0;
+            setDragging(id);
+            currentExpanded && toggleExpanded(id);
         },
         onDragEnd() {
-            inactiveParentBlock();
-            leaveMask();
+            overing.current && placement.current && onSort?.({
+                source: dragging,
+                destination: overing.current,
+                placement: placement.current
+            });
             setDragging(void 0);
-            if (typeof overing !== 'undefined' && placement.current) {
-                onSort?.({
-                    source: dragging,
-                    destination: overing,
-                    placement: isOffsetSatisfied ? 'child' : placement.current
-                });
-            }
-        },
-        onClick
+            inactiveBlock();
+        }
     });
-    const nodeRef = useRef(null);
-    const activeParentBlock = (target) => {
-        return findPredecessor(target, parent => {
-            const ret = parent.classList.contains(classes.levelBlock);
-            if (ret) {
+    const pointerEnterMaskArea = (e, _placement) => {
+        if (!isDraggingNode) {
+            activeBlock(e.currentTarget, _placement);
+        }
+    };
+    const pointerLeaveMaskArea = (e) => {
+        !isDraggingNode && inactiveBlock(e.currentTarget);
+    };
+    const pointerEnterPredecessor = (e, upLevel) => {
+        activeBlock(e.currentTarget, 'parent', upLevel);
+    };
+    const pointerLeavePredecessor = (e) => {
+        inactiveBlock(e.currentTarget);
+    };
+    const activeBlock = (el, _placement, upLevel = 0) => {
+        if (_placement === 'parent') {
+            let i = upLevel;
+            let parentId = id;
+            do {
+                const currentNode = nodesMap.get(parentId);
+                if (!currentNode._isLast) {
+                    return;
+                }
+                parentId = currentNode._parentId;
+            } while (--i && parentId);
+            overing.current = parentId;
+            placement.current = 'after';
+        }
+        else {
+            overing.current = id;
+            placement.current = _placement;
+        }
+        el.dataset.active = 'true';
+        _placement !== 'child' && findPredecessor(el, parent => {
+            if (parent.classList.contains(treeDndClasses.levelBlock) && !upLevel--) {
                 parent.dataset.active = 'true';
+                const parentNode = parent.previousElementSibling;
+                if (parentNode && parentNode.classList.contains(classes.node)) {
+                    parentNode.dataset.active = 'true';
+                }
                 return true;
             }
         });
     };
-    const inactiveParentBlock = () => {
-        const fn = (el) => {
+    const inactiveBlock = (el) => {
+        if (el) {
             el.dataset.active = 'false';
-        };
-        fn(containerRef.current);
-        containerRef.current.querySelectorAll('.' + classes.levelBlock).forEach(fn);
-    };
-    const overingMask = (e) => {
-        if (hasChildren && !expandedSet.has(value)) {
-            overingTimer.current ||= setTimeout(() => {
-                toggleExpanded(value);
-                placement.current === 'after' && inactiveParentBlock();
-            }, 800);
         }
-    };
-    const leaveMask = () => {
-        clearTimeout(overingTimer.current);
-        overingTimer.current = void 0;
-    };
-    const onPointerEnter = (e, placement) => {
-        setOvering(value);
-        setPlacement(placement);
-        activeParentBlock(e.currentTarget);
-    };
-    const onPointerLeave = () => {
-        setOvering(void 0);
-        inactiveParentBlock();
+        document.querySelectorAll('.' + treeDndClasses.levelBlock).forEach(el => {
+            el.dataset.active = 'false';
+        });
+        document.querySelectorAll('.' + classes.node).forEach(el => {
+            el.dataset.active = 'false';
+        });
+        overing.current = void 0;
     };
     /**
      * ---------------------------------------------------------------------
      * 渲染部分
      */
     const renderedIndents = useMemo(() => {
-        return Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent, style: { width: indent } }, i));
-    }, [_level, indent]);
-    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: cloneRef(nodeRef, props.ref), className: clsx(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": dragging === value, ...!showDragHandle && dragHandleProps, onClick: showDragHandle ? onClick : props.onClick, children: [renderedIndents, _jsx(Button, { className: classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
+        return Array(_level).fill(void 0).map((_, i) => _jsx("div", { className: classes.indent }, i));
+    }, [_level]);
+    return (_jsxs(_Fragment, { children: [_jsxs("div", { ...props, ref: cloneRef(nodeRef, props.ref), className: clsx(classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": isDraggingNode, onClick: clickHandler, ...!showDragHandle && dragHandleProps, children: [renderedIndents, _jsx(Button, { className: classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
                             e.stopPropagation();
-                            toggleExpanded(value);
+                            toggleExpanded(id);
                         }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon
-                            ? renderExpandIcon(value, currentExpanded, [...expandedSet])
+                            ? renderExpandIcon(id, currentExpanded, [...expandedSet])
                             : hasChildren &&
                                 _jsx(Icon, { icon: faChevronRight, className: classes.icon, style: {
                                         rotate: currentExpanded ? '90deg' : '0deg'
                                     } }) }), _jsxs("div", { className: classes.contentWrap, children: [sortable && showDragHandle &&
-                                _jsx("div", { className: classes.dragHandle, ...dragHandleProps, onClick: e => e.stopPropagation(), children: _jsx(Icon, { icon: faGripVertical }) }), showCheckbox &&
+                                _jsx("div", { className: treeDndClasses.dragHandle, ...dragHandleProps, onClick: e => e.stopPropagation(), children: _jsx(Icon, { icon: faGripVertical }) }), showCheckbox &&
                                 _jsx(Checkbox, { className: classes.checkbox, checked: status === 2, indeterminate: status === 1, onClick: e => {
                                         e.stopPropagation();
                                         clickHandler();
                                     } }), !!prefix &&
                                 _jsx("div", { className: classes.prefix, children: prefix }), _jsx("div", { className: classes.label, children: label }), !!suffix &&
-                                _jsx("div", { className: classes.suffix, children: suffix }), typeof dragging !== 'undefined' && dragging !== value &&
-                                _jsxs("div", { className: classes.dragMask, onPointerOver: overingMask, onPointerLeave: leaveMask, children: [_jsx("div", { className: classes.dragMaskPrev, "data-overing": overing === value && placement.current === 'before', onPointerEnter: e => onPointerEnter(e, 'before'), onPointerLeave: onPointerLeave }), (!hasChildren || !expandedSet.has(value)) &&
-                                            _jsx("div", { className: classes.dragMaskNext, "data-offset": !hasChildren && isOffsetSatisfied, "data-overing": overing === value && placement.current === 'after', onPointerEnter: e => onPointerEnter(e, 'after'), onPointerLeave: onPointerLeave })] })] })] }), hasChildren &&
-                _jsx(Collapse, { className: classes.levelBlock, in: currentExpanded, children: Children.map(props.children, child => {
+                                _jsx("div", { className: classes.suffix, children: suffix })] }), typeof dragging !== 'undefined' &&
+                        _jsxs("div", { className: treeDndClasses.mask, children: [Array(_level + 1).fill(void 0).map((_, i) => _jsx("div", { className: treeDndClasses.predecessor, ...i && {
+                                        onPointerEnter: e => pointerEnterPredecessor(e, _level + 1 - i),
+                                        onPointerLeave: pointerLeavePredecessor
+                                    } }, i)), _jsxs("div", { className: treeDndClasses.sibling, children: [_jsx("div", { className: treeDndClasses.siblingPrev, onPointerEnter: e => pointerEnterMaskArea(e, 'before'), onPointerLeave: pointerLeaveMaskArea }), _jsx("div", { className: treeDndClasses.siblingNext, onPointerEnter: e => pointerEnterMaskArea(e, 'after'), onPointerLeave: pointerLeaveMaskArea }), !hasChildren &&
+                                            _jsx("div", { className: treeDndClasses.child, onPointerEnter: e => pointerEnterMaskArea(e, 'child'), onPointerLeave: pointerLeaveMaskArea })] })] })] }), hasChildren &&
+                _jsx(Collapse, { className: treeDndClasses.levelBlock, in: currentExpanded, children: Children.map(props.children, child => {
                         return isValidElement(child)
                             ? cloneElement(child, { _level: _level + 1 })
                             : child;

package/dist/esm/components/upload/upload.style.d.ts

@@ -8,8 +8,8 @@ export declare const classes: {
     file: string;
     files: string;
     images: string;
-    control: string;
     sortable: string;
+    control: string;
     imageWrap: string;
 } & {
     root: string;

package/dist/esm/utils/dnd.d.ts

@@ -1,13 +1,21 @@
 import { DragEndEvent } from '@dnd-kit/core';
-import { Obj } from '../types';
+import { Id, Obj } from '../types';
+import { NodeType, SortInfo } from '../components/tree';
 /**
  * 默认提供给@dnd-kit的sensors属性
  */
 export declare function useDndSensors(): import("@dnd-kit/core").SensorDescriptor<import("@dnd-kit/core").SensorOptions>[];
 /**
  * <DndContext>组件通用的onDragEnd方法
- * @param e
+ * @param e 事件
  * @param prevState 传入需要排序的数组
- * @param primaryKey 索引用的主键
+ * @param primaryKey 索引用的主键，默认为`id`
  */
 export declare function onDndDragEnd<S extends Obj>(e: DragEndEvent, prevState: S[], primaryKey?: string): S[] | undefined;
+/**
+ * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}
+ * @param info 信息
+ * @param treeNodes 树节点
+ * @param primaryKey 索引用的主键，默认为`id`
+ */
+export declare function onTreeNodeSort<N extends NodeType<V>, V extends Id = Id>(info: SortInfo<V>, treeNodes: N[], primaryKey?: string): N[];

package/dist/esm/utils/dnd.js

@@ -12,9 +12,9 @@ export function useDndSensors() {
 }
 /**
  * <DndContext>组件通用的onDragEnd方法
- * @param e
+ * @param e 事件
  * @param prevState 传入需要排序的数组
- * @param primaryKey 索引用的主键
+ * @param primaryKey 索引用的主键，默认为`id`
  */
 export function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const { active, over } = e;
@@ -26,3 +26,45 @@ export function onDndDragEnd(e, prevState, primaryKey = 'id') {
     const newIndex = prevState.findIndex(v => v[primaryKey] === over.id);
     return arrayMove(prevState, oldIndex, newIndex);
 }
+/**
+ * <Tree>组件通用的onSort方法，注意：该方法会原地修改{@link treeNodes}
+ * @param info 信息
+ * @param treeNodes 树节点
+ * @param primaryKey 索引用的主键，默认为`id`
+ */
+export function onTreeNodeSort(info, treeNodes, primaryKey = 'id') {
+    const find = (arr, id) => {
+        let target = null;
+        let targetIndex = -1;
+        let siblings = null;
+        const recurse = (arr) => {
+            return !!arr?.some((v, i, _siblings) => {
+                if (v[primaryKey] === id) {
+                    target = v;
+                    targetIndex = i;
+                    siblings = _siblings;
+                    return true;
+                }
+                return v.children?.length && recurse(v.children);
+            });
+        };
+        recurse(arr);
+        return target ? { target, targetIndex, siblings: siblings } : null;
+    };
+    const source = find(treeNodes, info.source);
+    source.siblings.splice(source.targetIndex, 1);
+    const destination = find(treeNodes, info.destination);
+    switch (info.placement) {
+        case 'before':
+            destination.siblings.splice(destination.targetIndex, 0, source.target);
+            break;
+        case 'after':
+            destination.siblings.splice(destination.targetIndex + 1, 0, source.target);
+            break;
+        default:
+            // children
+            destination.target.children ||= [];
+            destination.target.children.push(source.target);
+    }
+    return treeNodes;
+}

package/dist/esm/utils/utils.d.ts

@@ -145,5 +145,5 @@ export declare function filterProperties<T extends Record<string, any>>(obj: T,
  * 合并属性
  */
 type ExtendableProps<T> = (T extends ElementType ? ComponentProps<T> : T) & Obj;
-export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | undefined)[]): ExtendableProps<T>;
+export declare function mergeComponentProps<T>(...props: (Partial<ExtendableProps<T>> | null | false | undefined)[]): ExtendableProps<T>;
 export {};

package/package.json

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