plain-design 1.0.0-beta.2 → 1.0.0-beta.21

package/src/packages/components/Table/table/use/useTableDraggier.col.tsx

@@ -12,6 +12,7 @@ import {getComponentCls, iMouseEvent, nextIndex, StyleProperties} from "plain-de
 import {iTableHooks} from "../utils/createTableHooks";
 import {iElementRect} from "../../../../utils/getRowEl";
 import {createEnum} from "plain-utils/utils/createEnum";
+import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierCol(
   {
@@ -223,11 +224,12 @@ export function useTableDraggierCol(
     };
 
     const start = (e: iMouseEvent, plc: tPlcType) => {
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         plc,
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         data: null
       };
@@ -237,11 +239,13 @@ export function useTableDraggierCol(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientX, clientY } = !e ? { clientX: 0, clientY: 0 } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientX - staticState.start.x) > 5) {
+        if (!!e && Math.abs(clientX - staticState.start.x) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -253,7 +257,7 @@ export function useTableDraggierCol(
       }
 
       if (!!e) {
-        staticState.data.move = { x: e.clientX, y: e.clientY };
+        staticState.data.move = { x: clientX, y: clientY };
       }
       const { data: { cloneTable, move, table, left }, start } = staticState;
       cloneTable.style.top = table.getBoundingClientRect().top + 'px';
@@ -470,7 +474,8 @@ export function useTableDraggierCol(
     };
     const update = (e?: MouseEvent) => {
       if (!!e) {
-        staticState!.moveClientX = e.clientX;
+        const { clientX } = ClientZoom.getClientPosition(e);
+        staticState!.moveClientX = clientX;
       } else {
         staticState!.moveScrollLeft = staticState!.scrollParent!.scrollLeft;
       }

package/src/packages/components/Table/table/use/useTableDraggier.row.tsx

@@ -9,6 +9,7 @@ import {hasClass} from "plain-utils/dom/hasClass";
 import {addClass} from "plain-utils/dom/addClass";
 import {disabledUserSelect} from "plain-utils/dom/disabledUserSelect";
 import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
+import {ClientZoom} from "../../../ClientZoom";
 
 export function useTableDraggierRow(
   {
@@ -85,9 +86,10 @@ export function useTableDraggierRow(
     };
     let prevClientY = 0;
     const update = (e?: MouseEvent) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
       const moveIndex = (() => {
         const hostRect = staticState!.bodyHostEl.getBoundingClientRect();
-        let index = Math.floor((((e?.clientY || prevClientY) - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
+        let index = Math.floor(((clientY - hostRect.top + refs.virtual!.refs.scroll!.freezeState.wrapperScrollTop - (staticState!.headTableEl?.clientHeight || 0)) / numberState.bodyRowHeight));
         if (index < 0) {index = 0;}
         if (index > bodyNodes.value.length - 1) {
           index = bodyNodes.value.length - 1;
@@ -95,7 +97,7 @@ export function useTableDraggierRow(
         return index;
       })();
       if (moveIndex !== move.state.index) {move.state.index = moveIndex;}
-      if (!!e) {prevClientY = e.clientY;}
+      if (!!e) {prevClientY = clientY;}
     };
     return { state, update, start, get staticState() {return staticState;} };
   })();
@@ -188,9 +190,10 @@ export function useTableDraggierRow(
     };
 
     const start = (e: iMouseEvent, node: iTableNode) => {
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
       const rowEl = (Array.from(refs.el!.querySelectorAll(`.plt-row`)) as HTMLTableRowElement[]).find(i => i.dataset.vid == node.state.index.toString())!;
       const rowRect = rowEl.getBoundingClientRect();
-      staticState = { startY: e.clientY, startTop: rowRect.top, node, rowEl, data: null, };
+      staticState = { startY: clientY, startTop: rowRect.top, node, rowEl, data: null, };
       /*清理状态*/
       draggierEffects.push(() => {staticState = null;});
     };
@@ -199,11 +202,13 @@ export function useTableDraggierRow(
     const update = (e?: MouseEvent) => {
       if (!staticState) {return;}
 
+      const { clientY } = !e ? { clientY: prevClientY } : ClientZoom.getClientPosition(e);
+
       let isDragging = !!staticState.data;
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.startY) > 5) {
+        if (!!e && Math.abs(clientY - staticState.startY) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -214,7 +219,7 @@ export function useTableDraggierRow(
         return;
       }
 
-      const durY = (e?.clientY || prevClientY) - staticState.startY;
+      const durY = clientY - staticState.startY;
       let top = staticState.startTop + durY;
       const minTop = move.staticState!.bodyHostEl.getBoundingClientRect().top + (move.staticState!.headTableEl?.clientHeight || 0);
       if (top < minTop) {
@@ -229,7 +234,7 @@ export function useTableDraggierRow(
 
       staticState.data!.cloneRowEl.style.top = `${top}px`;
       if (!!e) {
-        prevClientY = e.clientY;
+        prevClientY = clientY;
       }
 
       /*更细move index信息*/

package/src/packages/components/ThemePrimaryColors/index.ts

@@ -0,0 +1,5 @@
+import {ThemePrimaryColors} from "../PageThemeUtils";
+
+export default ThemePrimaryColors;
+
+export {ThemePrimaryColors};

package/src/packages/components/Tree/RenderTreeNode.tsx

@@ -34,13 +34,16 @@ export const RenderTreeNode = designComponent({
       getComponentCls('tree-node'),
       {
         'tree-node-current': tree.state.current === props.treeNode.key,
+        'tree-node-lead': isLeaf.value,
         'tree-node-single-check': !props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
+        'tree-node-multi-check': props.multiple && props.treeNode.checkStatus() === CheckboxStatus.check,
         'tree-node-disable-check': !props.treeNode.isCheckAble(),
       }
     ]);
 
     const checkStatus = cacheComputed(() => props.treeNode.checkStatus());
     const isExpanded = cacheComputed(() => props.treeNode.isExpanded());
+    const isLeaf = cacheComputed(() => props.treeNode.isLeaf());
 
     const connectorClassesList = computed(() => {
 
@@ -89,6 +92,7 @@ export const RenderTreeNode = designComponent({
        */
       onClickNodeContent: () => {
         if (props.treeNode.empty) {return;}
+        if (tree.draggier.value?.isDragging()) {return;}
         tree.hooks.onClickNodeContent.exec({ treeNode: props.treeNode, el: refs.el! });
       },
       /**
@@ -124,7 +128,7 @@ export const RenderTreeNode = designComponent({
                 />
             }
           </div>
-          {tree.props.draggable && (
+          {tree.props.draggable && !tree.props.customDraggier && (
             <div
               className={classnames(['tree-node-draggier', { 'tree-node-draggier-disable': !tree.utils.isAllowDraggable(props.treeNode) }])}
               onMouseDown={handler.onMousedownDraggier.value}

package/src/packages/components/Tree/tree.scss

@@ -3,6 +3,7 @@
   align-items: center;
   line-height: 22px;
   padding-bottom: 1px;
+  position: relative;
 
   .tree-node-operator > div, .tree-node-content {
     transition: background-color linear 150ms, color linear 150ms;
@@ -88,19 +89,43 @@
   .tree-node-content {
     padding: 5px 8px;
     color: plv(text-2);
+  }
 
-    &:hover {
+  .tree-node-operator, .tree-node-content {
+    position: relative;
+    z-index: 2;
+  }
+
+  &:after {
+    position: absolute;
+    top: 1px;
+    bottom: 1px;
+    left: 0;
+    right: 0;
+    z-index: 1;
+    border-radius: plv(border-radius-normal);
+    content: '';
+    transition: background-color ease 0.3s;
+  }
+
+  &:hover:not(.tree-node-current):not(.tree-node-single-check) {
+    cursor: pointer;
+
+    &:after {
       background-color: plv(background-hover);
-      cursor: pointer;
+      content: '';
     }
   }
 
-  &.tree-node-current, &.tree-node-single-check {
-    .tree-node-content {
-      &, &:hover {
-        background-color: plv(primary-light-1);
-        color: plv(primary-6);
-      }
+  &.tree-node-current, &.tree-node-single-check, &.tree-node-multi-check {
+
+    .tree-node-operator, .tree-node-content {
+      color: plv(primary-6);
+    }
+
+    &:after {
+      background-color: plv(primary-light-1);
+      content: '';
     }
   }
 
@@ -168,9 +193,16 @@
   }
 
   &.tree-expander-cover {
+    @include comp(tree-node) {
+      &:not(.tree-node-lead) {
+        .tree-node-expander {
+          background-color: plv(secondary-2);
+        }
+      }
+    }
+
     .tree-node-expander {
       border-radius: 2px;
-      background-color: plv(secondary-2);
       transform: scale(0.75);
     }
   }
@@ -216,6 +248,7 @@
 @include comp(tree-draggier-indicator) {
   position: fixed;
   pointer-events: none;
+  z-index: 10;
 
   &[data-available=true] {
     background-color: plv(primary-6);

package/src/packages/components/TreeCore/TreeCore.type.tsx

@@ -63,6 +63,8 @@ export interface iTreeProps {
   getNodeIcon?: (node: iTreeNode) => string,
   /*是否开启拖拽节点功能*/
   draggable?: boolean,
+  /*自定义draggier按钮*/
+  customDraggier?: boolean,
   /*判断节点是否可以拖拽*/
   isAllowDraggable?: (treeNode: iTreeNode) => boolean | void,
   /*判断节点是否可以放置*/

package/src/packages/components/TreeCore/createTreeCore.tsx

@@ -327,7 +327,11 @@ export function createTreeCore(
     hooks.onClickExpandIcon.use(({ treeNode }) => {methods.toggleExpand(treeNode);})
   );
   effects.push(
-    hooks.onClickNodeContent.use(({ treeNode }) => {methods.singleSelect(treeNode);})
+    hooks.onClickNodeContent.use(({ treeNode }) => {
+      methods.singleSelect(treeNode);
+      if (props.expandOnClickNode) {methods.toggleExpand(treeNode);}
+      if (props.checkOnClickNode) {methods.toggleCheck(treeNode);}
+    })
   );
   effects.push(
     hooks.onClickCheckbox.use(({ treeNode }) => {

package/src/packages/components/TreeCore/createTreeDraggier.tsx

@@ -14,6 +14,8 @@ import {enableUserSelect} from "plain-utils/dom/enableUserSelect";
 import {onParentElementsScroll} from "../../utils/onParentElementsScroll";
 import {addClass} from "plain-utils/dom/addClass";
 import {iTreeHooks} from "./createTreeHooks";
+import {ClientZoom} from "../ClientZoom";
+import {delay} from "plain-utils/utils/delay";
 
 export function createTreeDraggier(
   {
@@ -108,6 +110,8 @@ export function createTreeDraggier(
    */
   const shadowTreeNode = (() => {
 
+    const reactiveState = reactive({ dragging: false, });
+
     let staticState = null as null | {
       startNode: iTreeNode,                           // 拖拽开始的时候节点
       rowElement: HTMLElement,                        // 拖拽开始的row对象
@@ -222,71 +226,78 @@ export function createTreeDraggier(
       if (!rowElement) {
         throw new Error(`tree draggier: can't find row element with selector: .${rowClass}`);
       }
+      const { clientX, clientY } = ClientZoom.getClientPosition(e);
       staticState = {
         startNode: node,
         rowElement,
         start: {
-          x: e.clientX,
-          y: e.clientY,
+          x: clientX,
+          y: clientY,
         },
         data: null,
       };
+      reactiveState.dragging = true;
       /**
        * 拖拽结束之后，处理拖拽数据
        * @author  韦胜健
        * @date    2023/6/1 21:13
        */
       draggierEffects.push(async () => {
-        if (!!staticState?.data) {
-          const { startNode, } = staticState;
-          const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
-          if (!droppable || isHideDraggier) {
-            return;
-          }
-          const newParentNode = moveNode.parent;
-          const oldParentNode = startNode.parent;
-          const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
-          const newSiblingsBak = [...newSiblings];
-          const oldSiblings = methods.getParentChildrenData(startNode);
-          const oldSiblingsBak = [...oldSiblings];
-
-          methods.removeSelf(startNode!);
-          switch (dropType) {
-            case eTreeDropType.prev:
-              methods.previousSibling(moveNode!, startNode!);
-              break;
-            case eTreeDropType.inner:
-              methods.unshiftChild(moveNode!, startNode!);
-              await methods.expand(moveNode!);
-              break;
-            case eTreeDropType.next:
-              methods.nextSibling(moveNode!, startNode!);
-              await methods.collapse(moveNode);
-              break;
+        await (async () => {
+          if (!!staticState?.data) {
+            const { startNode, } = staticState;
+            const { moveNode, dropType, droppable, isHideDraggier } = staticState.data.move;
+            if (!droppable || isHideDraggier) {
+              return;
+            }
+            const newParentNode = dropType === eTreeDropType.inner ? moveNode : moveNode.parent;
+            const oldParentNode = startNode.parent;
+            const newSiblings = dropType === eTreeDropType.inner ? methods.getReactiveChildrenData(moveNode) : methods.getParentChildrenData(moveNode);
+            const newSiblingsBak = [...newSiblings];
+            const oldSiblings = methods.getParentChildrenData(startNode);
+            const oldSiblingsBak = [...oldSiblings];
+
+            methods.removeSelf(startNode!);
+            switch (dropType) {
+              case eTreeDropType.prev:
+                methods.previousSibling(moveNode!, startNode!);
+                break;
+              case eTreeDropType.inner:
+                methods.unshiftChild(moveNode!, startNode!);
+                await methods.expand(moveNode!);
+                break;
+              case eTreeDropType.next:
+                methods.nextSibling(moveNode!, startNode!);
+                await methods.collapse(moveNode);
+                break;
+            }
+            await nextTick();
+            await Promise.all([
+              methods.refreshCheckStatus(startNode!.parent),
+              methods.refreshCheckStatus(moveNode!.parent)
+            ]);
+            await hooks.onDragChange.exec({
+              data: startNode.data,
+              newParent: newParentNode?.data,
+              oldParent: oldParentNode?.data,
+              node: startNode,
+              newParentNode,
+              oldParentNode,
+              newSiblings,
+              oldSiblings,
+              newSiblingsBak,
+              oldSiblingsBak,
+              undo: () => {
+                newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
+                oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
+              },
+            });
           }
-          await nextTick();
-          await Promise.all([
-            methods.refreshCheckStatus(startNode!.parent),
-            methods.refreshCheckStatus(moveNode!.parent)
-          ]);
-          await hooks.onDragChange.exec({
-            data: startNode.data,
-            newParent: newParentNode?.data,
-            oldParent: oldParentNode?.data,
-            node: startNode,
-            newParentNode,
-            oldParentNode,
-            newSiblings,
-            oldSiblings,
-            newSiblingsBak,
-            oldSiblingsBak,
-            undo: () => {
-              newSiblings.splice(0, newSiblings.length, ...newSiblingsBak);
-              oldSiblings.splice(0, oldSiblings.length, ...oldSiblingsBak);
-            },
-          });
-        }
-        staticState = null;
+        })();
+        delay().then(() => {
+          staticState = null;
+          reactiveState.dragging = false;
+        });
       });
     };
 
@@ -302,7 +313,8 @@ export function createTreeDraggier(
 
       if (!isDragging) {
         /*拖拽超过一定距离的时候才开始拖拽，避免与点击事件冲突*/
-        if (!!e && Math.abs(e.clientY - staticState.start.y) > 5) {
+        const { clientY } = ClientZoom.getClientPosition(e);
+        if (!!e && Math.abs(clientY - staticState.start.y) > 5) {
           isDragging = true;
           initDraggierState();
         }
@@ -323,9 +335,10 @@ export function createTreeDraggier(
         staticState.data.move.isHideDraggier = true;
         staticState.data.cloneTreeNode.style.opacity = '0';
       } else {
+        const { clientX, clientY } = ClientZoom.getClientPosition(e);
         staticState.data.move.isHideDraggier = false;
-        staticState.data.move.x = e.clientX;
-        staticState.data.move.y = e.clientY;
+        staticState.data.move.x = clientX;
+        staticState.data.move.y = clientY;
         staticState.data.move.moveNode = node;
         staticState.data.move.contentRect = (e.currentTarget as HTMLElement).querySelector(`.${contentClass}`)!.getBoundingClientRect();
         const percent = (staticState.data.move.y - staticState.data.move.contentRect.top) / staticState.data.move.contentRect.height;
@@ -366,7 +379,7 @@ export function createTreeDraggier(
       indicatorHandler.update();
     };
 
-    const isDragging = () => !staticState;
+    const isDragging = () => reactiveState.dragging;
 
     const getState = () => staticState;
 
@@ -384,7 +397,8 @@ export function createTreeDraggier(
         document.removeEventListener('mouseup', draggierEffects.clear);
       });
     },
-    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void)
+    onMousemoveRow: null as null | ((e: iMouseEvent, node: iTreeNode) => void),
+    isDragging: () => shadowTreeNode.isDragging(),
   });
 
   return ret;

package/src/packages/components/TreeCore/createTreeMethods.tsx

@@ -254,6 +254,7 @@ export function createTreeMethods(
      * @date    2022/9/22 19:56
      */
     refreshCheckStatus: async (keyOrNode: iTreeKeyOrNode, emitChange = true) => {
+      if (!props.multiple) {return;}
       const checkKeys: string[] = [];
       const unCheckKeys: string[] = [];
       await nextTick();

package/src/packages/components/TreeCore/createTreeProps.ts

@@ -29,9 +29,10 @@ export const TreePropsOptions = {
   defaultExpandAll: { type: Boolean as PropType<iTreeProps["defaultExpandAll"]> },
   getNodeIcon: { type: Function as PropType<iTreeProps["getNodeIcon"]> },
   draggable: { type: Boolean as PropType<iTreeProps["draggable"]> },
+  customDraggier: { type: Boolean as PropType<iTreeProps["customDraggier"]> },
   isAllowDraggable: { type: Function as PropType<iTreeProps["isAllowDraggable"]> },
   isAllowDroppable: { type: Function as PropType<iTreeProps["isAllowDroppable"]> },
-  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-file' as string },
+  leafIcon: { type: String as PropType<iTreeProps["leafIcon"]>, default: 'pi-drive-file' as string },
   folderCollapseIcon: { type: String as PropType<iTreeProps["folderCollapseIcon"]>, default: 'pi-caret-right' as string },
   folderExpandIcon: { type: String as PropType<iTreeProps["folderExpandIcon"]>, default: 'pi-down' as string },
   expanderCover: { type: Boolean as PropType<iTreeProps["expanderCover"]>, default: true },

package/src/packages/components/TreeNodeWithMenu/index.tsx

@@ -0,0 +1,91 @@
+import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "plain-design-composition";
+import {Icon} from "../Icon";
+import {iTreeNode} from "../TreeCore/createTreeNode";
+import './tree-node-with-menu.scss';
+import {Tree} from "../Tree";
+import {useTooltip} from "../useTooltip";
+import {iTreeNodeWithMenuOption} from "./treeNodeWithMenu.utils";
+import {Dropdown} from "../Dropdown";
+import {DropdownOption} from "../DropdownOption";
+
+export const TreeNodeWithMenu = designComponent({
+  name: 'tree-node-with-menu',
+  props: {
+    treeNode: { type: Object as PropType<iTreeNode>, required: true },
+    dropdownOptions: { type: Array as PropType<iTreeNodeWithMenuOption[]> },
+    dropdownAttrs: { type: Object as PropType<ComponentPropsType<typeof Dropdown>> },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ content: iHTMLDivElement });
+
+    const tree = Tree.use.inject();
+
+    const isDraggable = cacheComputed(() => tree.props.draggable && tree.utils.isAllowDraggable(props.treeNode));
+
+    const classes = useClassCache(() => [
+      getComponentCls('tree-node-with-menu'),
+      {
+        'tree-node-with-menu-draggable': isDraggable.value,
+      }
+    ]);
+
+    const dropdownAttrs = computed(() => {
+      return {
+        trigger: 'hover' as const,
+        placement: 'right-start' as const,
+        ...props.dropdownAttrs,
+      };
+    });
+
+    const handler = {
+      onMousedownDraggier: computed(() => !tree.draggier.value ? undefined : ((e: iMouseEvent) => {
+        tree.draggier.value!.onMousedownDraggier(e, props.treeNode);
+      })),
+    };
+
+    useTooltip({
+      overflow: true,
+      tooltip: () => ({
+        reference: refs.content,
+        message: props.treeNode.label()
+      }),
+    });
+
+    return () => (
+      <div className={classes.value}>
+        <div className="tree-node-with-menu-content" ref={onRef.content}>{props.treeNode.label()}</div>
+        {(() => {
+          let btn = (
+            <div className="tree-node-with-menu-button" onMouseDown={handler.onMousedownDraggier.value}>
+              <Icon icon="pi-drag-dot-vertical"/>
+            </div>
+          );
+          let ret = btn;
+          if (!!props.dropdownOptions?.length && !tree.draggier.value?.isDragging()) {
+            ret = (
+              <Dropdown
+                {...dropdownAttrs.value}
+                v-slots={{
+                  default: () => btn,
+                  popper: () => (
+                    props.dropdownOptions?.map((option, index) => {
+                      const { renderDefault, renderContent, ...leftOption } = option;
+                      const vSlots = {} as any;
+                      if (!!renderDefault) {vSlots.default = () => renderDefault();}
+                      if (!!renderContent) {vSlots.content = () => renderContent();}
+                      return <DropdownOption key={index} {...leftOption} v-slots={vSlots}/>;
+                    })
+                  )
+                }}
+              />
+            );
+          }
+          return ret;
+        })()}
+      </div>
+    );
+  },
+});
+
+export default TreeNodeWithMenu;

package/src/packages/components/TreeNodeWithMenu/tree-node-with-menu.scss

@@ -0,0 +1,39 @@
+@include comp(tree-node-with-menu) {
+  display: flex;
+  align-items: center;
+
+  .tree-node-with-menu-content {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .tree-node-with-menu-button {
+    height: 1em;
+    width: 1em;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    //transition: all ease 0.3s;
+  }
+
+  &.tree-node-with-menu-draggable {
+    .tree-node-with-menu-button {
+      cursor: row-resize;
+      padding-right: 6px;
+    }
+  }
+}
+
+@include comp(tree-node) {
+  &:not(:hover) {
+    .tree-node-with-menu-button {
+      opacity: 0;
+      width: 0;
+      pointer-events: none;
+    }
+  }
+}

package/src/packages/components/TreeNodeWithMenu/treeNodeWithMenu.utils.ts

@@ -0,0 +1,12 @@
+import {iMouseEvent, RenderNode} from "plain-design-composition";
+
+export interface iTreeNodeWithMenuOption {
+  label?: string,
+  disabled?: boolean,
+  readonly?: boolean,
+  icon?: string,
+  val?: any,
+  onClick?: (e: iMouseEvent) => void
+  renderDefault?: () => RenderNode,
+  renderContent?: () => RenderNode,
+}