@canlooks/can-ui 0.0.96 → 0.0.98

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

@@ -1,248 +1,138 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.style = exports.classes = void 0;
+exports.classes = void 0;
+exports.useStyle = useStyle;
 const tslib_1 = require("tslib");
 const react_1 = require("@emotion/react");
 const utils_1 = require("../../utils");
 const color_1 = tslib_1.__importDefault(require("color"));
+const treeDnd_style_1 = require("./treeDnd.style");
 exports.classes = (0, utils_1.defineInnerClasses)('tree', [
-    'levelBlock',
     'search',
-    'container',
     'node',
     'contentWrap',
     'indent',
     'expand',
     'checkbox',
-    'dragHandle',
     'icon',
     'label',
     'prefix',
-    'suffix',
-    'dragMask',
-    'dragMaskPrev',
-    'dragMaskNext'
+    'suffix'
 ]);
-exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
-    const c = (0, color_1.default)(colors.primary.main);
-    const hover = gray(mode === 'light' ? .05 : .2);
-    const active = gray(mode === 'light' ? .1 : .12);
-    const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
-    const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
-    const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
-    return (0, react_1.css) `
-        .${exports.classes.search} {
-            margin-bottom: ${spacing[3]}px;
-        }
-        
-        .${exports.classes.container}[data-dragging=true] {
-            &, * {
-                cursor: grabbing;
-            }
-        }
-
-        .${exports.classes.node} {
-            display: flex;
-            align-items: center;
-            padding-right: ${spacing[2]}px;
-            border-radius: ${borderRadius}px;
-            transition: background-color .25s ${easing.easeOut};
-            touch-action: none;
-            -webkit-tap-highlight-color: transparent;
-
-            &[data-disabled=true] {
-                color: ${text.disabled};
-                cursor: not-allowed;
-            }
-
-            &:not([data-read-only=true]) {
-                cursor: pointer;
-            }
-
-            &[data-selected=true] {
-                background-color: ${selectedBg};
-
-                &:hover {
-                    background-color: ${selectedHover};
+function useStyle({ indent }) {
+    return [
+        (0, utils_1.useCss)(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
+            const c = (0, color_1.default)(colors.primary.main);
+            const hover = gray(mode === 'light' ? .05 : .2);
+            const active = gray(mode === 'light' ? .1 : .12);
+            const selectedBg = c.alpha(mode === 'light' ? .1 : .2).string();
+            const selectedHover = c.alpha(mode === 'light' ? .07 : .17).string();
+            const selectedActive = c.alpha(mode === 'light' ? .13 : .23).string();
+            return (0, react_1.css) `
+                .${exports.classes.search} {
+                    margin-bottom: ${spacing[3]}px;
                 }
 
-                &:active {
-                    transition: background-color 0s;
-                    background-color: ${selectedActive};
-                }
-            }
-
-            &:not([data-disabled=true]):not([data-selected=true]):hover {
-                background-color: ${hover};
-            }
-
-            &:not([data-disabled=true]):not([data-selected=true]):active {
-                transition: background-color 0s;
-                background-color: ${active};
-            }
-
-            .${exports.classes.indent} {
-                align-self: stretch;
-                display: flex;
-            }
-
-            .${exports.classes.expand} {
-                width: 29px;
-                align-self: stretch;
-                align-items: center;
-                justify-content: center;
-
-                .${exports.classes.icon} {
-                    transition: rotate .25s ${easing.easeOut};
-                }
-            }
-
-            .${exports.classes.contentWrap} {
-                flex: 1;
-                display: flex;
-                align-items: center;
-                position: relative;
-            }
-
-            .${exports.classes.dragHandle} {
-                width: 20px;
-                margin-right: ${spacing[3]}px;
-                text-align: center;
-                color: ${gray(.12)};
-                cursor: grab;
-            }
-
-            .${exports.classes.checkbox} {
-                margin-right: ${spacing[3]}px;
-            }
-
-            .${exports.classes.label} {
-                flex: 1;
-                padding: 5px 0;
-
-            }
-
-            .${exports.classes.prefix} {
-                color: ${text.secondary};
-                margin-right: ${spacing[2]}px;
-            }
-
-            .${exports.classes.suffix} {
-                color: ${text.disabled};
-                margin-left: ${spacing[2]}px;
-            }
-
-            .${exports.classes.dragMask} {
-                position: absolute;
-                inset: 0;
-
-                > div {
-                    width: 100%;
-                    height: 50%;
-                    position: absolute;
-                    left: 0;
-
-                    &:before, &:after {
-                        content: '';
-                        display: none;
-                        position: absolute;
-                        pointer-events: none;
+                .${exports.classes.node} {
+                    display: flex;
+                    align-items: center;
+                    padding-right: ${spacing[2]}px;
+                    border-radius: ${borderRadius}px;
+                    transition: background-color .25s ${easing.easeOut};
+                    touch-action: none;
+                    -webkit-tap-highlight-color: transparent;
+
+                    &[data-disabled=true] {
+                        color: ${text.disabled};
+                        cursor: not-allowed;
                     }
 
-                    &:before {
-                        width: 8px;
-                        height: 8px;
-                        border: 2px solid ${colors.primary.main};
-                        border-radius: 50%;
-                        left: 0;
+                    &:not([data-read-only=true]) {
+                        cursor: pointer;
                     }
 
-                    &:after {
-                        width: 100%;
-                        height: 2px;
-                        background: ${colors.primary.main};
-                        left: 8px;
+                    .${exports.classes.indent} {
+                        width: ${indent}px;
+                        align-self: stretch;
+                        display: flex;
                     }
 
-                    &.${exports.classes.dragMaskPrev} {
-                        top: 0;
+                    .${exports.classes.expand} {
+                        width: 29px;
+                        align-self: stretch;
+                        align-items: center;
+                        justify-content: center;
 
-                        &:before {
-                            top: -4px;
+                        .${exports.classes.icon} {
+                            transition: rotate .25s ${easing.easeOut};
                         }
+                    }
 
-                        &:after {
-                            top: -1px;
-                        }
+                    .${exports.classes.contentWrap} {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        position: relative;
                     }
 
-                    &.${exports.classes.dragMaskNext} {
-                        bottom: 0;
+                    .${exports.classes.checkbox} {
+                        margin-right: ${spacing[3]}px;
+                    }
 
-                        &:before {
-                            bottom: -4px;
-                        }
+                    .${exports.classes.label} {
+                        flex: 1;
+                        padding: 6px 0;
 
-                        &:after {
-                            bottom: -1px;
-                        }
                     }
 
-                    &[data-offset=true] {
-                        &:before {
-                            width: 10px;
-                            border-top: 0;
-                            border-right: 0;
-                            border-bottom: 2px dashed ${colors.primary.main};
-                            border-left: 2px dashed ${colors.primary.main};
-                            border-radius: 0;
-                            left: 24px;
-                            bottom: -1px;
+                    .${exports.classes.prefix} {
+                        color: ${text.secondary};
+                        margin-right: ${spacing[2]}px;
+                    }
+
+                    .${exports.classes.suffix} {
+                        color: ${text.disabled};
+                        margin-left: ${spacing[2]}px;
+                    }
+                }
+                
+                &:not(:has([data-dragging=true])) { {
+                    .${exports.classes.node} {
+                        &[data-selected=true] {
+                            background-color: ${selectedBg};
+
+                            &:hover {
+                                background-color: ${selectedHover};
+                            }
+
+                            &:active {
+                                transition: background-color 0s;
+                                background-color: ${selectedActive};
+                            }
                         }
 
-                        &:after {
-                            width: calc(100% - 36px);
-                            left: 36px;
+                        &:not([data-disabled=true]):not([data-selected=true]):hover {
+                            background-color: ${hover};
                         }
-                    }
 
-                    &[data-overing=true] {
-                        &:before, &:after {
-                            display: block;
+                        &:not([data-disabled=true]):not([data-selected=true]):active {
+                            transition: background-color 0s;
+                            background-color: ${active};
                         }
                     }
-                }
-            }
-        }
-
-        &[data-show-line=true] {
-            .${exports.classes.indent}:after {
-                content: '';
-                width: 1px;
-                height: 100%;
-                margin-left: 14px;
-                background-color: ${divider};
-            }
-        }
-
-        &, .${exports.classes.levelBlock} {
-            &[data-active=true] {
-                outline: 1px dashed ${colors.primary.main};
-            }
-        }
-
-        &[data-sortable=true] {
-            .${exports.classes.node} {
-                &[data-dragging=true] {
-                    &, &:active {
-                        background-color: ${selectedBg};
-                    }
-                }
+                }}
 
-                &:has(+ .${exports.classes.levelBlock}[data-active=true]) {
-                    outline: 1px solid ${colors.primary.main};
+                &[data-show-line=true] {
+                    .${exports.classes.indent}:after {
+                        content: '';
+                        width: 1px;
+                        height: 100%;
+                        margin-left: 14px;
+                        background-color: ${divider};
+                    }
                 }
-            }
-        }
-    `;
-});
+            `;
+        }),
+        (0, treeDnd_style_1.useStyle)({ indent })
+    ];
+}

package/dist/cjs/components/tree/treeDnd.d.ts

@@ -5,21 +5,17 @@ type TreeDndContextItem<T> = [T | undefined, Dispatch<SetStateAction<T | undefin
 type ITreeDndContext = {
     sortable: boolean;
     showDragHandle: boolean;
-    containerRef: RefObject<HTMLDivElement | null>;
-    isOffsetSatisfied: [boolean, Dispatch<SetStateAction<boolean>>];
     dragging: TreeDndContextItem<Id>;
-    overing: TreeDndContextItem<Id>;
-    placement: [RefObject<SortPlacement | undefined>, Dispatch<SetStateAction<SortPlacement | undefined>>];
+    overing: RefObject<Id | undefined>;
+    placement: RefObject<SortPlacement | undefined>;
     onSort: TreeBaseProps<any>['onSort'];
-    overingTimer: RefObject<any>;
 };
 export declare const TreeDndContext: import("react").Context<ITreeDndContext>;
 export declare function useTreeDndContext(): ITreeDndContext;
-export declare const TreeDnd: import("react").MemoExoticComponent<({ sortable, showDragHandle, onSort, containerRef, children }: {
+export declare const TreeDnd: import("react").MemoExoticComponent<({ sortable, showDragHandle, onSort, children }: {
     sortable: boolean;
     showDragHandle: boolean;
     onSort: TreeBaseProps<any>["onSort"];
-    containerRef: RefObject<HTMLDivElement | null>;
     children: ReactNode;
 }) => import("@emotion/react/jsx-runtime").JSX.Element>;
 export {};

package/dist/cjs/components/tree/treeDnd.js

@@ -4,29 +4,17 @@ exports.TreeDnd = exports.TreeDndContext = void 0;
 exports.useTreeDndContext = useTreeDndContext;
 const jsx_runtime_1 = require("@emotion/react/jsx-runtime");
 const react_1 = require("react");
-const utils_1 = require("../../utils");
-const tree_style_1 = require("./tree.style");
+const treeDnd_style_1 = require("./treeDnd.style");
 exports.TreeDndContext = (0, react_1.createContext)({});
 function useTreeDndContext() {
     return (0, react_1.useContext)(exports.TreeDndContext);
 }
-exports.TreeDnd = (0, react_1.memo)(({ sortable, showDragHandle, onSort, containerRef, children }) => {
-    const isOffsetSatisfied = (0, react_1.useState)(false);
+exports.TreeDnd = (0, react_1.memo)(({ sortable, showDragHandle, onSort, children }) => {
     const dragging = (0, react_1.useState)(void 0);
-    const overing = (0, react_1.useState)(void 0);
-    const placement = (0, utils_1.useSyncState)(void 0);
-    (0, react_1.useEffect)(() => {
-        if (dragging[0]) {
-            document.documentElement.style.cursor = 'grabbing';
-        }
-        return () => {
-            document.documentElement.style.cursor = '';
-        };
-    }, [dragging[0]]);
-    const overingTimer = (0, react_1.useRef)(void 0);
+    const overing = (0, react_1.useRef)(void 0);
+    const placement = (0, react_1.useRef)(void 0);
     return ((0, jsx_runtime_1.jsx)(exports.TreeDndContext, { value: {
-            sortable, showDragHandle, onSort, containerRef,
-            isOffsetSatisfied, dragging, overing, placement,
-            overingTimer
-        }, children: (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.container, "data-dragging": !!dragging[0], children: children }) }));
+            sortable, showDragHandle, onSort,
+            dragging, overing, placement
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: treeDnd_style_1.treeDndClasses.levelBlock, children: children }) }));
 });

package/dist/cjs/components/tree/treeDnd.style.d.ts

@@ -0,0 +1,15 @@
+export declare const treeDndClasses: {
+    mask: string;
+    child: string;
+    levelBlock: string;
+    dragHandle: string;
+    predecessor: string;
+    sibling: string;
+    siblingPrev: string;
+    siblingNext: string;
+} & {
+    root: string;
+};
+export declare function useStyle({ indent }: {
+    indent: number;
+}): import("@emotion/react").SerializedStyles;

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

@@ -0,0 +1,191 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.treeDndClasses = void 0;
+exports.useStyle = useStyle;
+const tslib_1 = require("tslib");
+const utils_1 = require("../../utils");
+const react_1 = require("@emotion/react");
+const tree_style_1 = require("./tree.style");
+const color_1 = tslib_1.__importDefault(require("color"));
+exports.treeDndClasses = (0, utils_1.defineInnerClasses)('tree-dnd', [
+    'levelBlock',
+    'dragHandle',
+    'mask',
+    'predecessor',
+    'sibling',
+    'siblingPrev',
+    'siblingNext',
+    'child'
+]);
+function useStyle({ indent }) {
+    return (0, utils_1.useCss)(({ mode, spacing, gray, colors }) => (0, react_1.css) `
+        .${tree_style_1.classes.node} {
+            position: relative;
+            
+            &[data-dragging=true] {
+                background-color: ${(0, color_1.default)(colors.primary.main).alpha(mode === 'light' ? .13 : .23).string()} !important;
+            }
+            
+            &[data-active=true] {
+                outline: 2px solid ${colors.primary.main};
+            }
+        }
+
+        .${exports.treeDndClasses.dragHandle} {
+            width: 20px;
+            margin-right: ${spacing[3]}px;
+            text-align: center;
+            color: ${gray(.12)};
+            cursor: grab;
+        }
+
+        .${exports.treeDndClasses.mask} {
+            display: flex;
+            position: absolute;
+            inset: 0;
+            z-index: 1;
+
+            .${tree_style_1.classes.indent}:after {
+                display: none;
+            }
+
+            .${exports.treeDndClasses.predecessor} {
+                width: ${indent}px;
+                position: relative;
+                
+                &:has(+ .${exports.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;
+                        }
+                    }
+                }
+            }
+            
+            .${exports.treeDndClasses.sibling} {
+                width: ${indent * 2}px;
+                flex: 1;
+                display: flex;
+                flex-direction: column;
+                position: relative;
+                
+                .${exports.treeDndClasses.siblingPrev}, .${exports.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;
+                        }
+                    }
+                }
+
+                .${exports.treeDndClasses.siblingPrev} {
+                    &:before {
+                        top: -4px
+                    }
+                    
+                    &:after {
+                        top: -1px;
+                    }
+                }
+
+                .${exports.treeDndClasses.siblingNext} {
+                    &:before {
+                        bottom: -4px;
+                    }
+                    
+                    &:after {
+                        bottom: -1px;
+                    }
+                }
+
+                .${exports.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;
+                        }
+                    }
+                }
+            }
+        }
+        
+        .${exports.treeDndClasses.levelBlock} {
+            &[data-active=true] {
+                outline: 1px dashed ${colors.primary.main};
+            }
+        }
+    `, [indent]);
+}

package/dist/cjs/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>;