@canlooks/can-ui 0.0.90 → 0.0.91

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

@@ -7,6 +7,7 @@ export declare const classes: {
     indent: string;
     node: string;
     checkbox: string;
+    container: string;
     suffix: string;
     contentWrap: string;
     levelBlock: string;

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

@@ -8,6 +8,7 @@ const color_1 = tslib_1.__importDefault(require("color"));
 exports.classes = (0, utils_1.defineInnerClasses)('tree', [
     'levelBlock',
     'search',
+    'container',
     'node',
     'contentWrap',
     'indent',
@@ -33,6 +34,12 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
         .${exports.classes.search} {
             margin-bottom: ${spacing[3]}px;
         }
+        
+        .${exports.classes.container}[data-dragging=true] {
+            &, * {
+                cursor: grabbing;
+            }
+        }
 
         .${exports.classes.node} {
             display: flex;
@@ -226,10 +233,6 @@ exports.style = (0, utils_1.defineCss)(({ spacing, mode, borderRadius, text, eas
 
         &[data-sortable=true] {
             .${exports.classes.node} {
-                &:not(:has(.${exports.classes.dragHandle})) {
-                    cursor: grab;
-                }
-
                 &[data-dragging=true] {
                     &, &:active {
                         background-color: ${selectedBg};

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

@@ -5,6 +5,7 @@ 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");
 exports.TreeDndContext = (0, react_1.createContext)({});
 function useTreeDndContext() {
     return (0, react_1.useContext)(exports.TreeDndContext);
@@ -14,10 +15,18 @@ exports.TreeDnd = (0, react_1.memo)(({ sortable, showDragHandle, onSort, contain
     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);
     return ((0, jsx_runtime_1.jsx)(exports.TreeDndContext, { value: {
             sortable, showDragHandle, onSort, containerRef,
             isOffsetSatisfied, dragging, overing, placement,
             overingTimer
-        }, children: children }));
+        }, children: (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.container, "data-dragging": !!dragging[0], children: children }) }));
 });

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

@@ -30,6 +30,10 @@ exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled,
      * 拖拽部分
      */
     const { sortable, showDragHandle, onSort, containerRef, isOffsetSatisfied: [isOffsetSatisfied, setIsOffsetSatisfied], dragging: [dragging, setDragging], overing: [overing, setOvering], placement: [placement, setPlacement], overingTimer } = (0, treeDnd_1.useTreeDndContext)();
+    const onClick = (e) => {
+        props.onClick?.(e);
+        !showCheckbox && clickHandler();
+    };
     const dragHandleProps = (0, utils_1.useDraggable)({
         disabled: !sortable,
         onDragStart(e) {
@@ -51,7 +55,8 @@ exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled,
                     placement: isOffsetSatisfied ? 'child' : placement.current
                 });
             }
-        }
+        },
+        onClick
     });
     const nodeRef = (0, react_1.useRef)(null);
     const activeParentBlock = (target) => {
@@ -98,7 +103,7 @@ exports.TreeNode = (0, react_1.memo)(({ value, label, prefix, suffix, disabled,
     const renderedIndents = (0, react_1.useMemo)(() => {
         return Array(_level).fill(void 0).map((_, i) => (0, jsx_runtime_1.jsx)("div", { className: tree_style_1.classes.indent, style: { width: indent } }, i));
     }, [_level, indent]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(nodeRef, props.ref), className: (0, utils_1.clsx)(tree_style_1.classes.node, props.className), "data-selected": status === 2, "data-read-only": readOnly, "data-disabled": disabled, "data-dragging": dragging === value, ...!showDragHandle && dragHandleProps, children: [renderedIndents, (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", { ...props, ref: (0, utils_1.cloneRef)(nodeRef, props.ref), className: (0, utils_1.clsx)(tree_style_1.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, (0, jsx_runtime_1.jsx)(button_1.Button, { className: tree_style_1.classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
                             e.stopPropagation();
                             toggleExpanded(value);
                         }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon

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

@@ -7,6 +7,7 @@ export declare const classes: {
     indent: string;
     node: string;
     checkbox: string;
+    container: string;
     suffix: string;
     contentWrap: string;
     levelBlock: string;

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

@@ -4,6 +4,7 @@ import Color from 'color';
 export const classes = defineInnerClasses('tree', [
     'levelBlock',
     'search',
+    'container',
     'node',
     'contentWrap',
     'indent',
@@ -29,6 +30,12 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
         .${classes.search} {
             margin-bottom: ${spacing[3]}px;
         }
+        
+        .${classes.container}[data-dragging=true] {
+            &, * {
+                cursor: grabbing;
+            }
+        }
 
         .${classes.node} {
             display: flex;
@@ -222,10 +229,6 @@ export const style = defineCss(({ spacing, mode, borderRadius, text, easing, gra
 
         &[data-sortable=true] {
             .${classes.node} {
-                &:not(:has(.${classes.dragHandle})) {
-                    cursor: grab;
-                }
-
                 &[data-dragging=true] {
                     &, &:active {
                         background-color: ${selectedBg};

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

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { createContext, memo, useContext, useRef, useState } from 'react';
+import { createContext, memo, useContext, useEffect, useRef, useState } from 'react';
 import { useSyncState } from '../../utils';
+import { classes } from './tree.style';
 export const TreeDndContext = createContext({});
 export function useTreeDndContext() {
     return useContext(TreeDndContext);
@@ -10,10 +11,18 @@ export const TreeDnd = memo(({ sortable, showDragHandle, onSort, containerRef, c
     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);
     return (_jsx(TreeDndContext, { value: {
             sortable, showDragHandle, onSort, containerRef,
             isOffsetSatisfied, dragging, overing, placement,
             overingTimer
-        }, children: children }));
+        }, children: _jsx("div", { className: classes.container, "data-dragging": !!dragging[0], children: children }) }));
 });

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

@@ -27,6 +27,10 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
      * 拖拽部分
      */
     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 dragHandleProps = useDraggable({
         disabled: !sortable,
         onDragStart(e) {
@@ -48,7 +52,8 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
                     placement: isOffsetSatisfied ? 'child' : placement.current
                 });
             }
-        }
+        },
+        onClick
     });
     const nodeRef = useRef(null);
     const activeParentBlock = (target) => {
@@ -95,7 +100,7 @@ export const TreeNode = memo(({ value, label, prefix, suffix, disabled, _level =
     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, children: [renderedIndents, _jsx(Button, { className: classes.expand, variant: "plain", color: "text.secondary", onClick: e => {
+    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 => {
                             e.stopPropagation();
                             toggleExpanded(value);
                         }, onPointerDown: e => e.stopPropagation(), children: renderExpandIcon

package/package.json

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