plain-design 1.0.0-beta.147 → 1.0.0-beta.148

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

@@ -1,140 +1,140 @@
-import {iTreeKeyOrNode, iTreeNodeComputedData, iTreeProps} from "./TreeCore.type";
-import {iTreeNode} from "./createTreeNode";
-import {toArray} from "@peryl/utils/toArray";
-import {iterate as utilsIterate} from "@peryl/utils/iterate";
-import {eTreeDropType} from "./createTreeDraggier";
-
-export function createTreeUtils(
-  {
-    props,
-    getTreeNodeComputedData,
-    setCheckModel,
-  }: {
-    props: iTreeProps,
-    getTreeNodeComputedData: () => iTreeNodeComputedData,
-    setCheckModel: (keys: string | string[] | null | undefined) => void,
-  }) {
-
-  /**
-   * 创建一个虚拟key
-   * @author  韦胜健
-   * @date    2022/9/20 11:56
-   */
-  const nextWeakKey = (() => {
-    let count = 0;
-    return () => `weak_key_${count++}`;
-  })();
-
-  /**
-   * 根据nodeData得到一个唯一标识key
-   * @author  韦胜健
-   * @date    2022/9/20 11:57
-   */
-  const getNodeDataKey = (() => {
-    const nodeData2Key = new WeakMap<any, string | undefined>();
-    return (nodeData: any): string => {
-      const { keyField } = props;
-      /*先从nodeData上取key*/
-      let key: string | undefined = (typeof keyField === "string" ? nodeData[keyField] : keyField?.(nodeData)) as any;
-      /*nodeData上没有key的话，根据nodeData对象生成一个key*/
-      if (!key) {
-        key = nodeData2Key.get(nodeData);
-        if (!key) {
-          key = nextWeakKey();
-          nodeData2Key.set(nodeData, key);
-        }
-      }
-      return key;
-    };
-  })();
-
-  /**
-   * 计算treeNode的id
-   * @author  韦胜健
-   * @date    2022/9/20 14:59
-   */
-  const getTreeNodeId = ({ nodeKey, parent, level, index }: { nodeKey: string, parent: iTreeNode | null, level: number, index: number }): string => {
-    return [parent?.key, nodeKey, level, index].join('_');
-  };
-
-  /**
-   * 递归遍历节点
-   * @author  韦胜健
-   * @date    2022/9/21 10:11
-   */
-  const iterate = (
-    {
-      treeNodeList,
-      handler,
-      isIterateChildrenFirst,
-      isIterateChildren,
-    }: {
-      treeNodeList: iTreeNode[] | null | undefined,
-      handler: (treeNode: iTreeNode) => void,
-      isIterateChildren?: (node: iTreeNode) => boolean,
-      isIterateChildrenFirst?: (node: iTreeNode) => boolean,
-    }) => utilsIterate<iTreeNode>({
-    treeNodeList,
-    handler,
-    getChildren: treeNode => treeNode.children(),
-    isIterateChildrenFirst,
-    isIterateChildren,
-  });
-
-  /**
-   * 根据key获取节点
-   * @author  韦胜健
-   * @date    2022/9/21 11:26
-   */
-  const getTreeNode = (keyOrNode: null | undefined | string | iTreeNode): iTreeNode | null | undefined => {
-    if (!keyOrNode || keyOrNode == null) {return null;}
-    return typeof keyOrNode === "string" ? getTreeNodeComputedData().key2treeNode[keyOrNode] : keyOrNode;
-  };
-
-  /**
-   * 处理keyOrNode
-   * @author  韦胜健
-   * @date    2022/9/21 11:33
-   */
-  const handleKeyOrNode = async (keyOrNode: iTreeKeyOrNode, handler: (treeNode: iTreeNode) => void | Promise<void>): Promise<void> => {
-    if (!keyOrNode) {return; }
-    await Promise.all(
-      toArray(keyOrNode)
-        .map(i => getTreeNode(i)!)
-        .filter(Boolean)
-        .map(i => handler(i))
-    );
-  };
-
-  /**
-   * 节点是否可以拖拽
-   * @author  韦胜健
-   * @date    2022.10.3 20:50
-   */
-  const isAllowDraggable = (node: iTreeNode) => {
-    return !props.isAllowDraggable || props.isAllowDraggable(node) !== false;
-  };
-  /**
-   * 节点是否可以被放置
-   * @author  韦胜健
-   * @date    2022.10.3 20:50
-   */
-  const isAllowDroppable = (startNode: iTreeNode, moveNode: iTreeNode, dropType: typeof eTreeDropType.TYPE) => {
-    return !props.isAllowDroppable || props.isAllowDroppable(startNode, moveNode, dropType) !== false;
-  };
-
-  return {
-    nextWeakKey,
-    getNodeDataKey,
-    getTreeNodeId,
-    iterate,
-    getTreeNode,
-    handleKeyOrNode,
-    getTreeNodeComputedData,
-    isAllowDraggable,
-    isAllowDroppable,
-    setCheckModel,
-  };
-}
-
-export type iTreeUtils = ReturnType<typeof createTreeUtils>
+import {iTreeKeyOrNode, iTreeNodeComputedData, iTreeProps} from "./TreeCore.type";
+import {iTreeNode} from "./createTreeNode";
+import {toArray} from "@peryl/utils/toArray";
+import {iterate as utilsIterate} from "@peryl/utils/iterate";
+import {eTreeDropType} from "./createTreeDraggier";
+
+export function createTreeUtils(
+  {
+    props,
+    getTreeNodeComputedData,
+    setCheckModel,
+  }: {
+    props: iTreeProps,
+    getTreeNodeComputedData: () => iTreeNodeComputedData,
+    setCheckModel: (keys: string | string[] | null | undefined) => void,
+  }) {
+
+  /**
+   * 创建一个虚拟key
+   * @author  韦胜健
+   * @date    2022/9/20 11:56
+   */
+  const nextWeakKey = (() => {
+    let count = 0;
+    return () => `weak_key_${count++}`;
+  })();
+
+  /**
+   * 根据nodeData得到一个唯一标识key
+   * @author  韦胜健
+   * @date    2022/9/20 11:57
+   */
+  const getNodeDataKey = (() => {
+    const nodeData2Key = new WeakMap<any, string | undefined>();
+    return (nodeData: any): string => {
+      const { keyField } = props;
+      /*先从nodeData上取key*/
+      let key: string | undefined = (typeof keyField === "string" ? nodeData[keyField] : keyField?.(nodeData)) as any;
+      /*nodeData上没有key的话，根据nodeData对象生成一个key*/
+      if (!key) {
+        key = nodeData2Key.get(nodeData);
+        if (!key) {
+          key = nextWeakKey();
+          nodeData2Key.set(nodeData, key);
+        }
+      }
+      return key;
+    };
+  })();
+
+  /**
+   * 计算treeNode的id
+   * @author  韦胜健
+   * @date    2022/9/20 14:59
+   */
+  const getTreeNodeId = ({ nodeKey, parent, level, index }: { nodeKey: string, parent: iTreeNode | null, level: number, index: number }): string => {
+    return [parent?.key, nodeKey, level, index].join('_');
+  };
+
+  /**
+   * 递归遍历节点
+   * @author  韦胜健
+   * @date    2022/9/21 10:11
+   */
+  const iterate = (
+    {
+      treeNodeList,
+      handler,
+      isIterateChildrenFirst,
+      isIterateChildren,
+    }: {
+      treeNodeList: iTreeNode[] | null | undefined,
+      handler: (treeNode: iTreeNode) => void,
+      isIterateChildren?: (node: iTreeNode) => boolean,
+      isIterateChildrenFirst?: (node: iTreeNode) => boolean,
+    }) => utilsIterate<iTreeNode>({
+    treeNodeList,
+    handler,
+    getChildren: treeNode => treeNode.children(),
+    isIterateChildrenFirst,
+    isIterateChildren,
+  });
+
+  /**
+   * 根据key获取节点
+   * @author  韦胜健
+   * @date    2022/9/21 11:26
+   */
+  const getTreeNode = (keyOrNode: null | undefined | string | iTreeNode): iTreeNode | null | undefined => {
+    if (!keyOrNode || keyOrNode == null) {return null;}
+    return typeof keyOrNode === "string" ? getTreeNodeComputedData().key2treeNode[keyOrNode] : keyOrNode;
+  };
+
+  /**
+   * 处理keyOrNode
+   * @author  韦胜健
+   * @date    2022/9/21 11:33
+   */
+  const handleKeyOrNode = async (keyOrNode: iTreeKeyOrNode, handler: (treeNode: iTreeNode) => void | Promise<void>): Promise<void> => {
+    if (!keyOrNode) {return; }
+    await Promise.all(
+      toArray(keyOrNode)
+        .map(i => getTreeNode(i)!)
+        .filter(Boolean)
+        .map(i => handler(i))
+    );
+  };
+
+  /**
+   * 节点是否可以拖拽
+   * @author  韦胜健
+   * @date    2022.10.3 20:50
+   */
+  const isAllowDraggable = (node: iTreeNode) => {
+    return !props.isAllowDraggable || props.isAllowDraggable(node) !== false;
+  };
+  /**
+   * 节点是否可以被放置
+   * @author  韦胜健
+   * @date    2022.10.3 20:50
+   */
+  const isAllowDroppable = (startNode: iTreeNode, moveNode: iTreeNode, dropType: typeof eTreeDropType.TYPE) => {
+    return !props.isAllowDroppable || props.isAllowDroppable(startNode, moveNode, dropType) !== false;
+  };
+
+  return {
+    nextWeakKey,
+    getNodeDataKey,
+    getTreeNodeId,
+    iterate,
+    getTreeNode,
+    handleKeyOrNode,
+    getTreeNodeComputedData,
+    isAllowDraggable,
+    isAllowDroppable,
+    setCheckModel,
+  };
+}
+
+export type iTreeUtils = ReturnType<typeof createTreeUtils>

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

@@ -1,65 +1,65 @@
-import {iTreeKey2CheckStatus, iTreeProps, iTreeState} from "./TreeCore.type";
-import {iTreeUtils} from "./createTreeUtils";
-import {createTreeNode, iTreeNode} from "./createTreeNode";
-
-/**
- * 将nodeData转化为treeNode
- * @author  韦胜健
- * @date    2022/9/20 15:17
- */
-export function formatNodeData2TreeNode(
-  {
-    nodeDataList,
-    parent,
-    level,
-    props,
-    state,
-    utils,
-    cacheNodeId2treeNode,
-    getCheckStatus,
-    ignoreEmpty,
-  }: {
-    /*要转化的nodeData数组*/
-    nodeDataList: any[],
-    /*要转化的nodeData数组的父节点treeNode对象*/
-    parent: iTreeNode | null,
-    /*当前层级*/
-    level: number,
-    /*tree属性*/
-    props: iTreeProps,
-    /*tree状态*/
-    state: iTreeState,
-    /*工具对象*/
-    utils: iTreeUtils,
-    /*上一次执行计算时缓存的treeNode*/
-    cacheNodeId2treeNode: Record<string, iTreeNode | undefined>,
-    /*获取选中状态*/
-    getCheckStatus: () => iTreeKey2CheckStatus,
-    /*是否忽略空节点*/
-    ignoreEmpty: boolean | undefined,
-  }): iTreeNode[] {
-  return nodeDataList.map((nodeData, index) => {
-    const nodeKey = utils.getNodeDataKey(nodeData);
-    const id = utils.getTreeNodeId({ nodeKey, parent, level, index });
-    /*先从上一次的计算中取缓存*/
-    let treeNode = cacheNodeId2treeNode[id];
-    /*如果没有创建过treeNode，或者老的treeNode的父节点、所在层级、所在数组索引以及key发生了变化的话，重新创建一个treeNode*/
-    if (!treeNode || treeNode.id !== id || treeNode.data !== nodeData) {
-      treeNode = createTreeNode({
-        data: nodeData,
-        key: nodeKey,
-        parent,
-        level,
-        index,
-        id,
-        props,
-        state,
-        utils,
-        cacheNodeId2treeNode,
-        getCheckStatus,
-        ignoreEmpty,
-      });
-    }
-    return treeNode;
-  });
-}
+import {iTreeKey2CheckStatus, iTreeProps, iTreeState} from "./TreeCore.type";
+import {iTreeUtils} from "./createTreeUtils";
+import {createTreeNode, iTreeNode} from "./createTreeNode";
+
+/**
+ * 将nodeData转化为treeNode
+ * @author  韦胜健
+ * @date    2022/9/20 15:17
+ */
+export function formatNodeData2TreeNode(
+  {
+    nodeDataList,
+    parent,
+    level,
+    props,
+    state,
+    utils,
+    cacheNodeId2treeNode,
+    getCheckStatus,
+    ignoreEmpty,
+  }: {
+    /*要转化的nodeData数组*/
+    nodeDataList: any[],
+    /*要转化的nodeData数组的父节点treeNode对象*/
+    parent: iTreeNode | null,
+    /*当前层级*/
+    level: number,
+    /*tree属性*/
+    props: iTreeProps,
+    /*tree状态*/
+    state: iTreeState,
+    /*工具对象*/
+    utils: iTreeUtils,
+    /*上一次执行计算时缓存的treeNode*/
+    cacheNodeId2treeNode: Record<string, iTreeNode | undefined>,
+    /*获取选中状态*/
+    getCheckStatus: () => iTreeKey2CheckStatus,
+    /*是否忽略空节点*/
+    ignoreEmpty: boolean | undefined,
+  }): iTreeNode[] {
+  return nodeDataList.map((nodeData, index) => {
+    const nodeKey = utils.getNodeDataKey(nodeData);
+    const id = utils.getTreeNodeId({ nodeKey, parent, level, index });
+    /*先从上一次的计算中取缓存*/
+    let treeNode = cacheNodeId2treeNode[id];
+    /*如果没有创建过treeNode，或者老的treeNode的父节点、所在层级、所在数组索引以及key发生了变化的话，重新创建一个treeNode*/
+    if (!treeNode || treeNode.id !== id || treeNode.data !== nodeData) {
+      treeNode = createTreeNode({
+        data: nodeData,
+        key: nodeKey,
+        parent,
+        level,
+        index,
+        id,
+        props,
+        state,
+        utils,
+        cacheNodeId2treeNode,
+        getCheckStatus,
+        ignoreEmpty,
+      });
+    }
+    return treeNode;
+  });
+}

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

@@ -1,95 +1,95 @@
-import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "@peryl/react-compose";
-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>> },
-    hideButton: { type: Boolean },
-  },
-  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>
-        {(() => {
-          if (props.hideButton) {
-            return;
-          }
-          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;
+import {cacheComputed, ComponentPropsType, computed, designComponent, getComponentCls, iHTMLDivElement, iMouseEvent, PropType, useClassCache, useRefs} from "@peryl/react-compose";
+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>> },
+    hideButton: { type: Boolean },
+  },
+  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>
+        {(() => {
+          if (props.hideButton) {
+            return;
+          }
+          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;