plain-design 1.0.0-beta.3 → 1.0.0-beta.5

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

@@ -1,237 +1,237 @@
-import {iTableHooks} from "../utils/createTableHooks";
-import {iTableEventType, iTableNode, iTablePropsType} from "../utils/table.utils";
-import {findParentElement} from "../../../../utils/findParentElement";
-import {hasClass} from "plain-utils/dom/hasClass";
-import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "plain-design-composition";
-import {Icon} from "../../../Icon";
-import {tPlcType} from "../../plc/utils/plc.utils";
-import {useTableDraggierRow} from "./useTableDraggier.row";
-import {VirtualTable} from "../../../VirtualTable";
-import {useTableDraggierCol} from "./useTableDraggier.col";
-import {usePopup} from "../../../usePopup";
-import {iPopupUseOption} from "../../../usePopup/utils/popup.utils";
-import {Tooltip} from "../../../Tooltip";
-
-export function useTableDraggier(
-  {
-    hooks,
-    props,
-    event,
-    refs,
-    bodyNodes,
-    numberState,
-    getHeadPlcListArray,
-    getBodyPlcListArray,
-    getPlcListArray,
-  }: {
-    props: iTablePropsType,
-    event: iTableEventType,
-    refs: {
-      el: HTMLDivElement | null | undefined,
-      virtual: typeof VirtualTable.use.class | null | undefined
-    },
-    hooks: iTableHooks,
-    bodyNodes: { value: iTableNode[] },
-    numberState: { bodyRowHeight: number },
-    getHeadPlcListArray: () => tPlcType[][],
-    getBodyPlcListArray: () => tPlcType[],
-    getPlcListArray: () => tPlcType[],
-  }
-) {
-
-  /**
-   * 行拖拽组合逻辑
-   * @author  韦胜健
-   * @date    2023/5/18 20:05
-   */
-  const rowDraggier = useTableDraggierRow({ model: { get value() {return props.data;}, set value(val) {event.emit.onUpdateData(val);} }, refs, hooks, bodyNodes, numberState, });
-
-  /**
-   * 列拖拽组合逻辑
-   * @author  韦胜健
-   * @date    2023/5/18 20:05
-   */
-  const colDraggier = useTableDraggierCol({
-    refs,
-    hooks,
-    getScroll: () => refs.virtual?.refs.scroll,
-    getHeadPlcListArray,
-    getBodyPlcListArray,
-    getPlcListArray,
-    onChange: (broList) => event.emit.onOrderChange(broList)
-  });
-
-  /**
-   * 拖拽popup按钮
-   * @author  韦胜健
-   * @date    2023/5/18 20:05
-   */
-  const { $popup } = usePopup();
-
-  /**
-   * 行列hover拖拽按钮的公共popup属性
-   * @author  韦胜健
-   * @date    2023/5/18 20:06
-   */
-  const getPublicPopupOption = (): Partial<iPopupUseOption> => ({
-    noPadding: true,
-    noArrow: true,
-    hideOnScroll: true,
-    dark: true,
-    beforeShow: () => {if (rowDraggier.isDragging() || colDraggier.isDragging()) {return false;}},
-  });
-
-  /**
-   * 行拖拽hover按钮
-   * @author  韦胜健
-   * @date    2023/5/18 20:07
-   */
-  const rowPopupHandler = (() => {
-
-    const staticState = {
-      node: null as null | iTableNode,
-      id: null as null | string,
-    };
-
-    const createOption = (cellEl: HTMLTableCellElement, node: iTableNode): iPopupUseOption => {
-      staticState.node = node;
-      staticState.id = `row_${node.state.index}`;
-      return {
-        ...getPublicPopupOption(),
-        id: staticState.id,
-        type: 'row',
-        placement: 'left',
-        reference: cellEl,
-        stickyReference: findParentElement(cellEl, i => hasClass(i, getComponentCls('table')))!,
-        render: () => (
-          <DraggierButton
-            className={getComponentCls('table-col-draggier')}
-            data-button-type="row"
-            onMouseDown={e => rowDraggier.handler.onMousedown(e, node)}
-            tip="拖拽移动行"
-            onClick={e => hooks.onClickRowDraggier.exec({ e, node })}
-          >
-            <Icon icon="pi-drag-dot-vertical"/>
-          </DraggierButton>
-        )
-      };
-    };
-
-    const onEnter = (cellEl: HTMLTableCellElement, node: iTableNode) => {
-      $popup.show(createOption(cellEl, node));
-    };
-    const onLeave = () => {
-      !!staticState.id && $popup.hide(staticState.id!);
-      staticState.id = null;
-    };
-
-    return { onEnter, onLeave };
-  })();
-
-  /**
-   * 列拖拽hover按钮
-   * @author  韦胜健
-   * @date    2023/5/18 20:07
-   */
-  const colPopupHandler = (() => {
-
-    const staticState = {
-      plc: null as null | tPlcType,
-      id: null as null | string,
-    };
-
-    const createOption = (cellEl: HTMLTableCellElement, plc: tPlcType): iPopupUseOption => {
-      staticState.plc = plc;
-      staticState.id = `col_${plc.plcKey}`;
-      return {
-        ...getPublicPopupOption(),
-        id: staticState.id,
-        type: 'col',
-        placement: 'top',
-        reference: cellEl,
-        stickyReference: cellEl,
-        render: () => (
-          <DraggierButton
-            className={getComponentCls('table-col-draggier')}
-            data-button-type="col"
-            onMouseDown={e => colDraggier.handler.onMousedown(e, plc)}
-            tip="拖拽移动列"
-            onClick={e => hooks.onClickColDraggier.exec({ e, plc })}
-          >
-            <Icon icon="pi-drag-dot"/>
-          </DraggierButton>
-        )
-      };
-    };
-
-    const onEnter = (cellEl: HTMLTableCellElement, plc: tPlcType) => {
-      $popup.show(createOption(cellEl, plc));
-    };
-    const onLeave = () => {
-      !!staticState.id && $popup.hide(staticState.id!);
-      staticState.id = null;
-    };
-
-    return { onEnter, onLeave };
-
-  })();
-
-  const handler = {
-    onEnter: ({ e, plc, node }: { e: iMouseEvent, plc: tPlcType, node?: iTableNode }) => {
-      if (rowDraggier.isDragging() || colDraggier.isDragging()) {return;}
-
-      if (!!node) {
-        /*enter cell*/
-        if (!props.rowDraggable) {
-          return;
-        }
-        /*---------------------------------------row option-------------------------------------------*/
-        if (!!node) {
-          rowPopupHandler.onEnter(e.currentTarget as any, node);
-        }
-      } else {
-        /*enter head cell*/
-        if (!props.colDraggable) {
-          return;
-        }
-        /*---------------------------------------col option-------------------------------------------*/
-        colPopupHandler.onEnter(e.currentTarget as any, plc);
-      }
-    },
-    onLeave: ({ plc, node }: { e: iMouseEvent, plc: tPlcType, node?: iTableNode }) => {
-      if (!!node) {rowPopupHandler.onLeave();}
-      if (!!plc) {colPopupHandler.onLeave();}
-    },
-  };
-
-  hooks.onEnterHeadCell.use(handler.onEnter);
-  hooks.onLeaveHeadCell.use(handler.onLeave);
-
-  hooks.onEnterCell.use(handler.onEnter);
-  hooks.onLeaveCell.use(handler.onLeave);
-
-  hooks.onClickColDraggier.use(data => {event.emit.onClickColDraggier(data);});
-  hooks.onClickRowDraggier.use(data => {event.emit.onClickRowDraggier(data);});
-
-  return {
-    rowDraggier,
-  };
-}
-
-const DraggierButton = designComponent({
-  inheritPropsType: iHTMLDivElement,
-  inheritAttrs: false,
-  props: {
-    tip: { type: String },
-  },
-  slots: ['default'],
-  setup({ props, slots, attrs }) {
-    return () => (
-      <Tooltip message={props.tip}>
-        <div {...attrs}>
-          {slots.default()}
-        </div>
-      </Tooltip>
-    );
-  },
-});
+import {iTableHooks} from "../utils/createTableHooks";
+import {iTableEventType, iTableNode, iTablePropsType} from "../utils/table.utils";
+import {findParentElement} from "../../../../utils/findParentElement";
+import {hasClass} from "plain-utils/dom/hasClass";
+import {designComponent, getComponentCls, iHTMLDivElement, iMouseEvent} from "plain-design-composition";
+import {Icon} from "../../../Icon";
+import {tPlcType} from "../../plc/utils/plc.utils";
+import {useTableDraggierRow} from "./useTableDraggier.row";
+import {VirtualTable} from "../../../VirtualTable";
+import {useTableDraggierCol} from "./useTableDraggier.col";
+import {usePopup} from "../../../usePopup";
+import {iPopupUseOption} from "../../../usePopup/utils/popup.utils";
+import {Tooltip} from "../../../Tooltip";
+
+export function useTableDraggier(
+  {
+    hooks,
+    props,
+    event,
+    refs,
+    bodyNodes,
+    numberState,
+    getHeadPlcListArray,
+    getBodyPlcListArray,
+    getPlcListArray,
+  }: {
+    props: iTablePropsType,
+    event: iTableEventType,
+    refs: {
+      el: HTMLDivElement | null | undefined,
+      virtual: typeof VirtualTable.use.class | null | undefined
+    },
+    hooks: iTableHooks,
+    bodyNodes: { value: iTableNode[] },
+    numberState: { bodyRowHeight: number },
+    getHeadPlcListArray: () => tPlcType[][],
+    getBodyPlcListArray: () => tPlcType[],
+    getPlcListArray: () => tPlcType[],
+  }
+) {
+
+  /**
+   * 行拖拽组合逻辑
+   * @author  韦胜健
+   * @date    2023/5/18 20:05
+   */
+  const rowDraggier = useTableDraggierRow({ model: { get value() {return props.data;}, set value(val) {event.emit.onUpdateData(val);} }, refs, hooks, bodyNodes, numberState, });
+
+  /**
+   * 列拖拽组合逻辑
+   * @author  韦胜健
+   * @date    2023/5/18 20:05
+   */
+  const colDraggier = useTableDraggierCol({
+    refs,
+    hooks,
+    getScroll: () => refs.virtual?.refs.scroll,
+    getHeadPlcListArray,
+    getBodyPlcListArray,
+    getPlcListArray,
+    onChange: (broList) => event.emit.onOrderChange(broList)
+  });
+
+  /**
+   * 拖拽popup按钮
+   * @author  韦胜健
+   * @date    2023/5/18 20:05
+   */
+  const { $popup } = usePopup();
+
+  /**
+   * 行列hover拖拽按钮的公共popup属性
+   * @author  韦胜健
+   * @date    2023/5/18 20:06
+   */
+  const getPublicPopupOption = (): Partial<iPopupUseOption> => ({
+    noPadding: true,
+    noArrow: true,
+    hideOnScroll: true,
+    dark: true,
+    beforeShow: () => {if (rowDraggier.isDragging() || colDraggier.isDragging()) {return false;}},
+  });
+
+  /**
+   * 行拖拽hover按钮
+   * @author  韦胜健
+   * @date    2023/5/18 20:07
+   */
+  const rowPopupHandler = (() => {
+
+    const staticState = {
+      node: null as null | iTableNode,
+      id: null as null | string,
+    };
+
+    const createOption = (cellEl: HTMLTableCellElement, node: iTableNode): iPopupUseOption => {
+      staticState.node = node;
+      staticState.id = `row_${node.state.index}`;
+      return {
+        ...getPublicPopupOption(),
+        id: staticState.id,
+        type: 'row',
+        placement: 'left',
+        reference: cellEl,
+        stickyReference: findParentElement(cellEl, i => hasClass(i, getComponentCls('table')))!,
+        render: () => (
+          <DraggierButton
+            className={getComponentCls('table-col-draggier')}
+            data-button-type="row"
+            onMouseDown={e => rowDraggier.handler.onMousedown(e, node)}
+            tip="拖拽移动行"
+            onClick={e => hooks.onClickRowDraggier.exec({ e, node })}
+          >
+            <Icon icon="pi-drag-dot-vertical"/>
+          </DraggierButton>
+        )
+      };
+    };
+
+    const onEnter = (cellEl: HTMLTableCellElement, node: iTableNode) => {
+      $popup.show(createOption(cellEl, node));
+    };
+    const onLeave = () => {
+      !!staticState.id && $popup.hide(staticState.id!);
+      staticState.id = null;
+    };
+
+    return { onEnter, onLeave };
+  })();
+
+  /**
+   * 列拖拽hover按钮
+   * @author  韦胜健
+   * @date    2023/5/18 20:07
+   */
+  const colPopupHandler = (() => {
+
+    const staticState = {
+      plc: null as null | tPlcType,
+      id: null as null | string,
+    };
+
+    const createOption = (cellEl: HTMLTableCellElement, plc: tPlcType): iPopupUseOption => {
+      staticState.plc = plc;
+      staticState.id = `col_${plc.plcKey}`;
+      return {
+        ...getPublicPopupOption(),
+        id: staticState.id,
+        type: 'col',
+        placement: 'top',
+        reference: cellEl,
+        stickyReference: cellEl,
+        render: () => (
+          <DraggierButton
+            className={getComponentCls('table-col-draggier')}
+            data-button-type="col"
+            onMouseDown={e => colDraggier.handler.onMousedown(e, plc)}
+            tip="拖拽移动列"
+            onClick={e => hooks.onClickColDraggier.exec({ e, plc })}
+          >
+            <Icon icon="pi-drag-dot"/>
+          </DraggierButton>
+        )
+      };
+    };
+
+    const onEnter = (cellEl: HTMLTableCellElement, plc: tPlcType) => {
+      $popup.show(createOption(cellEl, plc));
+    };
+    const onLeave = () => {
+      !!staticState.id && $popup.hide(staticState.id!);
+      staticState.id = null;
+    };
+
+    return { onEnter, onLeave };
+
+  })();
+
+  const handler = {
+    onEnter: ({ e, plc, node }: { e: iMouseEvent, plc: tPlcType, node?: iTableNode }) => {
+      if (rowDraggier.isDragging() || colDraggier.isDragging()) {return;}
+
+      if (!!node) {
+        /*enter cell*/
+        if (!props.rowDraggable) {
+          return;
+        }
+        /*---------------------------------------row option-------------------------------------------*/
+        if (!!node) {
+          rowPopupHandler.onEnter(e.currentTarget as any, node);
+        }
+      } else {
+        /*enter head cell*/
+        if (!props.colDraggable) {
+          return;
+        }
+        /*---------------------------------------col option-------------------------------------------*/
+        colPopupHandler.onEnter(e.currentTarget as any, plc);
+      }
+    },
+    onLeave: ({ plc, node }: { e: iMouseEvent, plc: tPlcType, node?: iTableNode }) => {
+      if (!!node) {rowPopupHandler.onLeave();}
+      if (!!plc) {colPopupHandler.onLeave();}
+    },
+  };
+
+  hooks.onEnterHeadCell.use(handler.onEnter);
+  hooks.onLeaveHeadCell.use(handler.onLeave);
+
+  hooks.onEnterCell.use(handler.onEnter);
+  hooks.onLeaveCell.use(handler.onLeave);
+
+  hooks.onClickColDraggier.use(data => {event.emit.onClickColDraggier(data);});
+  hooks.onClickRowDraggier.use(data => {event.emit.onClickRowDraggier(data);});
+
+  return {
+    rowDraggier,
+  };
+}
+
+const DraggierButton = designComponent({
+  inheritPropsType: iHTMLDivElement,
+  inheritAttrs: false,
+  props: {
+    tip: { type: String },
+  },
+  slots: ['default'],
+  setup({ props, slots, attrs }) {
+    return () => (
+      <Tooltip message={props.tip}>
+        <div {...attrs}>
+          {slots.default()}
+        </div>
+      </Tooltip>
+    );
+  },
+});