@canlooks/can-ui 0.0.95 → 0.0.97

package/dist/esm/components/tree/treeDnd.style.js

@@ -0,0 +1,186 @@
+import { defineInnerClasses, useCss } from '../../utils';
+import { css } from '@emotion/react';
+import { classes } from './tree.style';
+import Color from 'color';
+export const treeDndClasses = defineInnerClasses('tree-dnd', [
+    'levelBlock',
+    'dragHandle',
+    'mask',
+    'predecessor',
+    'sibling',
+    'siblingPrev',
+    'siblingNext',
+    'child'
+]);
+export function useStyle({ indent }) {
+    return useCss(({ mode, spacing, gray, colors }) => css `
+        .${classes.node} {
+            position: relative;
+            
+            &[data-dragging=true] {
+                background-color: ${Color(colors.primary.main).alpha(mode === 'light' ? .13 : .23).string()} !important;
+            }
+            
+            &[data-active=true] {
+                outline: 2px solid ${colors.primary.main};
+            }
+        }
+
+        .${treeDndClasses.dragHandle} {
+            width: 20px;
+            margin-right: ${spacing[3]}px;
+            text-align: center;
+            color: ${gray(.12)};
+            cursor: grab;
+        }
+
+        .${treeDndClasses.mask} {
+            display: flex;
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+
+            .${classes.indent}:after {
+                display: none;
+            }
+
+            .${treeDndClasses.predecessor} {
+                width: ${indent}px;
+                position: relative;
+                
+                &:has(+ .${treeDndClasses.sibling}) {
+                    width: 29px;
+                }
+                
+                &[data-active=true] {
+                    &:before, &:after {
+                        content: '';
+                        position: absolute;
+                    }
+
+                    &:before {
+                        width: 8px;
+                        height: 8px;
+                        border-radius: 50%;
+                        border: 2px solid ${colors.primary.main};
+                        left: 0;
+                        bottom: -4px;
+                    }
+
+                    &:after {
+                        width: calc(100% - 8px);
+                        height: 2px;
+                        background: ${colors.primary.main};
+                        left: 8px;
+                        bottom: -1px;
+                    }
+                    
+                    & ~ * {
+                        &:after {
+                            content: '';
+                            width: 100%;
+                            height: 2px;
+                            background: ${colors.primary.main};
+                            position: absolute;
+                            left: 0;
+                            bottom: -1px;
+                        }
+                    }
+                }
+            }
+            
+            .${treeDndClasses.sibling} {
+                width: ${indent * 2}px;
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                
+                .${treeDndClasses.siblingPrev}, .${treeDndClasses.siblingNext} {
+                    flex: 1;
+                    position: relative;
+                    
+                    &[data-active=true] {
+                        &:before, &:after {
+                            content: '';
+                            position: absolute;
+                        }
+                        
+                        &:before {
+                            width: 8px;
+                            height: 8px;
+                            border-radius: 50%;
+                            border: 2px solid ${colors.primary.main};
+                            left: 0;
+                        }
+                        
+                        &:after {
+                            width: calc(100% - 8px);
+                            height: 2px;
+                            background: ${colors.primary.main};
+                            left: 8px;
+                        }
+                    }
+                }
+
+                .${treeDndClasses.siblingPrev} {
+                    &:before {
+                        top: -4px
+                    }
+                    
+                    &:after {
+                        top: -1px;
+                    }
+                }
+
+                .${treeDndClasses.siblingNext} {
+                    &:before {
+                        bottom: -4px;
+                    }
+                    
+                    &:after {
+                        bottom: -1px;
+                    }
+                }
+
+                .${treeDndClasses.child} {
+                    width: calc(100% - ${indent * 2}px);
+                    height: 50%;
+                    position: absolute;
+                    right: 0;
+                    bottom: 0;
+                    
+                    &[data-active=true] {
+                        &:before, &:after {
+                            content: '';
+                            position: absolute;
+                            bottom: -1px;
+                        }
+                        
+                        &:before {
+                            width: 8px;
+                            height: 8px;
+                            border-left: 2px solid ${colors.primary.main};
+                            border-bottom: 2px solid ${colors.primary.main};
+                            left: 0;
+                            
+                        }
+                        
+                        &:after {
+                            width: calc(100% - 12px);
+                            height: 2px;
+                            background: ${colors.primary.main};
+                            left: 12px;
+                        }
+                    }
+                }
+            }
+        }
+        
+        .${treeDndClasses.levelBlock} {
+            &[data-active=true] {
+                outline: 1px dashed ${colors.primary.main};
+            }
+        }
+    `, [indent]);
+}

package/dist/esm/components/tree/treeNode.d.ts

@@ -1,12 +1,12 @@
 import React, { ReactNode } from 'react';
 import { DivProps, Id } from '../../types';
-export interface TreeNodeProps extends Omit<DivProps, 'prefix'> {
-    value: Id;
+export interface TreeNodeProps extends Omit<DivProps, 'id' | 'prefix'> {
+    id: Id;
     label?: ReactNode;
     prefix?: ReactNode;
     suffix?: ReactNode;
     disabled?: boolean;
-    /** @private 内部使用，表明该节点的层级 */
+    /** @private 表明该节点的层级 */
     _level?: number;
 }
-export declare const TreeNode: React.MemoExoticComponent<({ value, label, prefix, suffix, disabled, _level, ...props }: TreeNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element>;
+export declare const TreeNode: React.MemoExoticComponent<({ id, label, prefix, suffix, disabled, _level, ...props }: TreeNodeProps) => import("@emotion/react/jsx-runtime").JSX.Element>;

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/package.json

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