@canlooks/can-ui 0.0.96 → 0.0.98

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

@@ -1,244 +1,133 @@
 import { css } from '@emotion/react';
-import { defineInnerClasses, defineCss } from '../../utils';
+import { defineInnerClasses, useCss } from '../../utils';
 import Color from 'color';
+import { useStyle as useDndStyle } from './treeDnd.style';
 export const classes = defineInnerClasses('tree', [
-    'levelBlock',
     'search',
-    'container',
     'node',
     'contentWrap',
     'indent',
     'expand',
     'checkbox',
-    'dragHandle',
     'icon',
     'label',
     'prefix',
-    'suffix',
-    'dragMask',
-    'dragMaskPrev',
-    'dragMaskNext'
+    'suffix'
 ]);
-export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
-    const c = Color(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 css `
-        .${classes.search} {
-            margin-bottom: ${spacing[3]}px;
-        }
-        
-        .${classes.container}[data-dragging=true] {
-            &, * {
-                cursor: grabbing;
-            }
-        }
-
-        .${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};
+export function useStyle({ indent }) {
+    return [
+        useCss(({ spacing, mode, borderRadius, text, easing, gray, divider, colors }) => {
+            const c = Color(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 css `
+                .${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};
-            }
-
-            .${classes.indent} {
-                align-self: stretch;
-                display: flex;
-            }
-
-            .${classes.expand} {
-                width: 29px;
-                align-self: stretch;
-                align-items: center;
-                justify-content: center;
-
-                .${classes.icon} {
-                    transition: rotate .25s ${easing.easeOut};
-                }
-            }
-
-            .${classes.contentWrap} {
-                flex: 1;
-                display: flex;
-                align-items: center;
-                position: relative;
-            }
-
-            .${classes.dragHandle} {
-                width: 20px;
-                margin-right: ${spacing[3]}px;
-                text-align: center;
-                color: ${gray(.12)};
-                cursor: grab;
-            }
-
-            .${classes.checkbox} {
-                margin-right: ${spacing[3]}px;
-            }
-
-            .${classes.label} {
-                flex: 1;
-                padding: 5px 0;
-
-            }
-
-            .${classes.prefix} {
-                color: ${text.secondary};
-                margin-right: ${spacing[2]}px;
-            }
-
-            .${classes.suffix} {
-                color: ${text.disabled};
-                margin-left: ${spacing[2]}px;
-            }
-
-            .${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;
+                .${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;
+                    .${classes.indent} {
+                        width: ${indent}px;
+                        align-self: stretch;
+                        display: flex;
                     }
 
-                    &.${classes.dragMaskPrev} {
-                        top: 0;
+                    .${classes.expand} {
+                        width: 29px;
+                        align-self: stretch;
+                        align-items: center;
+                        justify-content: center;
 
-                        &:before {
-                            top: -4px;
+                        .${classes.icon} {
+                            transition: rotate .25s ${easing.easeOut};
                         }
+                    }
 
-                        &:after {
-                            top: -1px;
-                        }
+                    .${classes.contentWrap} {
+                        flex: 1;
+                        display: flex;
+                        align-items: center;
+                        position: relative;
                     }
 
-                    &.${classes.dragMaskNext} {
-                        bottom: 0;
+                    .${classes.checkbox} {
+                        margin-right: ${spacing[3]}px;
+                    }
 
-                        &:before {
-                            bottom: -4px;
-                        }
+                    .${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;
+                    .${classes.prefix} {
+                        color: ${text.secondary};
+                        margin-right: ${spacing[2]}px;
+                    }
+
+                    .${classes.suffix} {
+                        color: ${text.disabled};
+                        margin-left: ${spacing[2]}px;
+                    }
+                }
+                
+                &:not(:has([data-dragging=true])) { {
+                    .${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] {
-            .${classes.indent}:after {
-                content: '';
-                width: 1px;
-                height: 100%;
-                margin-left: 14px;
-                background-color: ${divider};
-            }
-        }
-
-        &, .${classes.levelBlock} {
-            &[data-active=true] {
-                outline: 1px dashed ${colors.primary.main};
-            }
-        }
-
-        &[data-sortable=true] {
-            .${classes.node} {
-                &[data-dragging=true] {
-                    &, &:active {
-                        background-color: ${selectedBg};
-                    }
-                }
+                }}
 
-                &:has(+ .${classes.levelBlock}[data-active=true]) {
-                    outline: 1px solid ${colors.primary.main};
+                &[data-show-line=true] {
+                    .${classes.indent}:after {
+                        content: '';
+                        width: 1px;
+                        height: 100%;
+                        margin-left: 14px;
+                        background-color: ${divider};
+                    }
                 }
-            }
-        }
-    `;
-});
+            `;
+        }),
+        useDndStyle({ indent })
+    ];
+}

package/dist/esm/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/esm/components/tree/treeDnd.js

@@ -1,28 +1,16 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, memo, useContext, useEffect, useRef, useState } from 'react';
-import { useSyncState } from '../../utils';
-import { classes } from './tree.style';
+import { createContext, memo, useContext, useRef, useState } from 'react';
+import { treeDndClasses } from './treeDnd.style';
 export const TreeDndContext = createContext({});
 export function useTreeDndContext() {
     return useContext(TreeDndContext);
 }
-export const TreeDnd = memo(({ sortable, showDragHandle, onSort, containerRef, children }) => {
-    const isOffsetSatisfied = useState(false);
+export const TreeDnd = memo(({ sortable, showDragHandle, onSort, children }) => {
     const dragging = useState(void 0);
-    const overing = useState(void 0);
-    const placement = useSyncState(void 0);
-    useEffect(() => {
-        if (dragging[0]) {
-            document.documentElement.style.cursor = 'grabbing';
-        }
-        return () => {
-            document.documentElement.style.cursor = '';
-        };
-    }, [dragging[0]]);
-    const overingTimer = useRef(void 0);
+    const overing = useRef(void 0);
+    const placement = useRef(void 0);
     return (_jsx(TreeDndContext, { value: {
-            sortable, showDragHandle, onSort, containerRef,
-            isOffsetSatisfied, dragging, overing, placement,
-            overingTimer
-        }, children: _jsx("div", { className: classes.container, "data-dragging": !!dragging[0], children: children }) }));
+            sortable, showDragHandle, onSort,
+            dragging, overing, placement
+        }, children: _jsx("div", { className: treeDndClasses.levelBlock, children: children }) }));
 });

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