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

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

@@ -1,204 +1,204 @@
-import {iTableNode, iTablePropsType} from "../utils/table.utils";
-import {iTableHooks} from "../utils/createTableHooks";
-import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
-import {createEffects} from "@peryl/utils/createEffects";
-import {PlainObject} from "@peryl/utils/event";
-import {computed, onBeforeUnmount, reactive, RenderNode, useRefs} from "@peryl/react-compose";
-import {Dialog} from "../../../Dialog";
-import {delay} from "@peryl/utils/delay";
-import {Table} from "../Table";
-import {Plc} from "../../../Plc";
-import {Form} from "../../../Form";
-import {Button} from "../../../Button";
-import {FormItem} from "../../../FormItem";
-import {useCellValue} from "../body/useCellValue";
-import {iTableMethods} from "./useTableMethods";
-import {PlcCheck} from "../../standard/PlcCheck/PlcCheck";
-import $message from "../../../$message";
-import {pick} from "@peryl/utils/pick";
-import i18n from "../../../i18n";
-
-/**
- * 批量修改弹窗
- * @author  韦胜健
- * @date    2023.1.2 19:07
- */
-export function useTableModifyEditor(
-  {
-    props, hooks, getFlatPlcList, methods: tableMethods,
-  }: {
-    props: iTablePropsType,
-    hooks: iTableHooks,
-    getFlatPlcList: () => tPlc[] | undefined,
-    methods: iTableMethods,
-  }
-) {
-
-  /**
-   * 副作用
-   * @author  韦胜健
-   * @date    2022/12/5 20:45
-   */
-  const { effects } = createEffects();
-
-  const { refs, onRef } = useRefs({ form: Form });
-
-  const state = reactive({
-    optionGetter: null as null | (() => iTableModifyEditOption),
-    show: false,
-    modifyPlcIndexList: [] as { index: number, title: string | undefined, getPlc: () => tPlc }[],
-    contentRender: (() => null) as (() => RenderNode),
-    node: null as null | iTableNode,
-    editRow: {} as PlainObject,
-  });
-
-  const styles = { width: '400px' };
-
-  const availablePlcList = computed(() => (state.optionGetter?.().plcList || getFlatPlcList() || [])
-    .filter(i => i.props.editable !== false && typeof i.props.editable !== "function" && !i.props.hideInForm)
-    .map((i, index) => ({ index, title: i.props.title, getPlc: () => i }))
-  );
-
-  /**
-   * 每个表单项的渲染内容
-   * @author  韦胜健
-   * @date    2022/12/5 20:45
-   */
-  const { effects: cellBodyArrayEffects } = createEffects();
-  effects.push(() => cellBodyArrayEffects.clear());
-  const cellBodyArray = computed(() => {
-    if (!state.optionGetter) {return [];}
-    const { node } = state;
-    if (!node) {return [];}
-    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true, effects: cellBodyArrayEffects }));
-  });
-
-  const handler = {
-    handleConfirm: async () => {
-      if (!state.node) {
-        $message.warn(i18n.$it('table.pleaseClickNext').d('请点击下一步'));
-        return Promise.reject('next step');
-      }
-      await refs.form?.validate();
-      await state.optionGetter?.().onConfirm?.(state.editRow);
-      state.show = false;
-    },
-    handleCancel: () => state.optionGetter?.().onCancel?.(),
-  };
-
-  const utils = {
-    renderSelectPlcList: () => {
-      state.editRow = {};
-      state.node = null;
-      state.contentRender = () => (
-        <>
-          <Table data={availablePlcList.value}>
-            <PlcCheck field="index" v-model={state.modifyPlcIndexList} toggleOnClickRow/>
-            <Plc title={i18n.$it('table.columnTitle').d('列标题')} field="title"/>
-          </Table>
-          <div className="table-modify-dialog-operations">
-            <Button label={i18n.$it('base.nextStep').d('下一步')} onClick={utils.renderModifyForm}/>
-          </div>
-        </>
-      );
-    },
-    renderModifyForm: () => {
-      state.editRow = {};
-      state.node = tableMethods.createTableNode(state.editRow, 0);
-      state.node.state.editRow = state.editRow;
-      state.node.state.edit = true;
-      state.contentRender = () => (
-        <>
-          <Form modelValue={state.editRow} ref={onRef.form}>
-            {state.modifyPlcIndexList.sort((a, b) => a.index - b.index).map(({ getPlc, index }) => {
-              const plc = getPlc();
-              if (plc.props.editColSpan === 0) {
-                return null;
-              }
-              const { bodyCell } = cellBodyArray.value[index];
-              const { editable, body } = bodyCell.value();
-              const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
-              return (
-                <FormItem
-                  key={index}
-                  label={plc.props.formLabel || plc.props.title}
-                  field={plc.props.field}
-                  required={plc.props.required}
-                  rules={plc.props.rules}
-                  validator={plc.props.validator}
-                  tip={plc.props.tip}
-                  disabled={!editable}
-                  {...validateAttrs}
-                >
-                  {body}
-                </FormItem>
-              );
-            })}
-          </Form>
-          <div className="table-modify-dialog-operations">
-            <Button label={i18n.$it('base.prevStep').d('上一步')} onClick={utils.renderSelectPlcList}/>
-            <Button label={i18n.$it('base.edit.done').d('完成')} mode="fill" onClick={handler.handleConfirm}/>
-          </div>
-        </>
-      );
-    },
-    initialize: (() => {
-      let hasInitialized = false;
-      return () => {
-        /*已经初始化过就不用再初始化了*/
-        if (hasInitialized) {return;}
-        hasInitialized = true;
-        effects.push(hooks.onRender.use(
-          {
-            processor: ({ list, render }) => {list.push({ seq: -1, key: 'modify_editor', render });},
-            render: () => {
-              const option = state.optionGetter?.();
-              if (!option) {return null;}
-              const title = option.title || i18n.$it('table.batchModify').d('批量修改');
-              const plcList = option.plcList || getFlatPlcList();
-              if (!plcList) {return null;}
-              return (
-                <Dialog
-                  externalClass="table-modify-dialog"
-                  v-model={state.show}
-                  title={title}
-                  cancelButton
-                  handleCancel={handler.handleCancel}
-                  position="right"
-                  initialize
-                >
-                  <div style={styles}>
-                    {state.contentRender()}
-                  </div>
-                </Dialog>
-              );
-            },
-          }
-        ));
-      };
-    })()
-  };
-
-  const methods = {
-    open: async (option: iTableModifyEditOption) => {
-      state.modifyPlcIndexList = [];
-
-      state.optionGetter = () => option;
-      utils.initialize();
-      await delay();
-      state.show = true;
-      utils.renderSelectPlcList();
-    },
-  };
-
-  onBeforeUnmount(() => effects.clear());
-
-  return { methods, state };
-}
-
-export interface iTableModifyEditOption {
-  title?: string,
-  plcList?: tPlc[],
-  onConfirm?: (editRow: PlainObject) => void,
-  onCancel?: () => void,
-}
+import {iTableNode, iTablePropsType} from "../utils/table.utils";
+import {iTableHooks} from "../utils/createTableHooks";
+import {PlcValidatePropsOption, tPlc} from "../../plc/utils/plc.utils";
+import {createEffects} from "@peryl/utils/createEffects";
+import {PlainObject} from "@peryl/utils/event";
+import {computed, onBeforeUnmount, reactive, RenderNode, useRefs} from "@peryl/react-compose";
+import {Dialog} from "../../../Dialog";
+import {delay} from "@peryl/utils/delay";
+import {Table} from "../Table";
+import {Plc} from "../../../Plc";
+import {Form} from "../../../Form";
+import {Button} from "../../../Button";
+import {FormItem} from "../../../FormItem";
+import {useCellValue} from "../body/useCellValue";
+import {iTableMethods} from "./useTableMethods";
+import {PlcCheck} from "../../standard/PlcCheck/PlcCheck";
+import $message from "../../../$message";
+import {pick} from "@peryl/utils/pick";
+import i18n from "../../../i18n";
+
+/**
+ * 批量修改弹窗
+ * @author  韦胜健
+ * @date    2023.1.2 19:07
+ */
+export function useTableModifyEditor(
+  {
+    props, hooks, getFlatPlcList, methods: tableMethods,
+  }: {
+    props: iTablePropsType,
+    hooks: iTableHooks,
+    getFlatPlcList: () => tPlc[] | undefined,
+    methods: iTableMethods,
+  }
+) {
+
+  /**
+   * 副作用
+   * @author  韦胜健
+   * @date    2022/12/5 20:45
+   */
+  const { effects } = createEffects();
+
+  const { refs, onRef } = useRefs({ form: Form });
+
+  const state = reactive({
+    optionGetter: null as null | (() => iTableModifyEditOption),
+    show: false,
+    modifyPlcIndexList: [] as { index: number, title: string | undefined, getPlc: () => tPlc }[],
+    contentRender: (() => null) as (() => RenderNode),
+    node: null as null | iTableNode,
+    editRow: {} as PlainObject,
+  });
+
+  const styles = { width: '400px' };
+
+  const availablePlcList = computed(() => (state.optionGetter?.().plcList || getFlatPlcList() || [])
+    .filter(i => i.props.editable !== false && typeof i.props.editable !== "function" && !i.props.hideInForm)
+    .map((i, index) => ({ index, title: i.props.title, getPlc: () => i }))
+  );
+
+  /**
+   * 每个表单项的渲染内容
+   * @author  韦胜健
+   * @date    2022/12/5 20:45
+   */
+  const { effects: cellBodyArrayEffects } = createEffects();
+  effects.push(() => cellBodyArrayEffects.clear());
+  const cellBodyArray = computed(() => {
+    if (!state.optionGetter) {return [];}
+    const { node } = state;
+    if (!node) {return [];}
+    return availablePlcList.value.map(i => useCellValue({ optionGetter: () => ({ plc: i.getPlc(), node }), formEdit: true, effects: cellBodyArrayEffects }));
+  });
+
+  const handler = {
+    handleConfirm: async () => {
+      if (!state.node) {
+        $message.warn(i18n.$it('table.pleaseClickNext').d('请点击下一步'));
+        return Promise.reject('next step');
+      }
+      await refs.form?.validate();
+      await state.optionGetter?.().onConfirm?.(state.editRow);
+      state.show = false;
+    },
+    handleCancel: () => state.optionGetter?.().onCancel?.(),
+  };
+
+  const utils = {
+    renderSelectPlcList: () => {
+      state.editRow = {};
+      state.node = null;
+      state.contentRender = () => (
+        <>
+          <Table data={availablePlcList.value}>
+            <PlcCheck field="index" v-model={state.modifyPlcIndexList} toggleOnClickRow/>
+            <Plc title={i18n.$it('table.columnTitle').d('列标题')} field="title"/>
+          </Table>
+          <div className="table-modify-dialog-operations">
+            <Button label={i18n.$it('base.nextStep').d('下一步')} onClick={utils.renderModifyForm}/>
+          </div>
+        </>
+      );
+    },
+    renderModifyForm: () => {
+      state.editRow = {};
+      state.node = tableMethods.createTableNode(state.editRow, 0);
+      state.node.state.editRow = state.editRow;
+      state.node.state.edit = true;
+      state.contentRender = () => (
+        <>
+          <Form modelValue={state.editRow} ref={onRef.form}>
+            {state.modifyPlcIndexList.sort((a, b) => a.index - b.index).map(({ getPlc, index }) => {
+              const plc = getPlc();
+              if (plc.props.editColSpan === 0) {
+                return null;
+              }
+              const { bodyCell } = cellBodyArray.value[index];
+              const { editable, body } = bodyCell.value();
+              const validateAttrs = pick(plc.props, Object.keys(PlcValidatePropsOption) as (keyof typeof PlcValidatePropsOption)[]);
+              return (
+                <FormItem
+                  key={index}
+                  label={plc.props.formLabel || plc.props.title}
+                  field={plc.props.field}
+                  required={plc.props.required}
+                  rules={plc.props.rules}
+                  validator={plc.props.validator}
+                  tip={plc.props.tip}
+                  disabled={!editable}
+                  {...validateAttrs}
+                >
+                  {body}
+                </FormItem>
+              );
+            })}
+          </Form>
+          <div className="table-modify-dialog-operations">
+            <Button label={i18n.$it('base.prevStep').d('上一步')} onClick={utils.renderSelectPlcList}/>
+            <Button label={i18n.$it('base.edit.done').d('完成')} mode="fill" onClick={handler.handleConfirm}/>
+          </div>
+        </>
+      );
+    },
+    initialize: (() => {
+      let hasInitialized = false;
+      return () => {
+        /*已经初始化过就不用再初始化了*/
+        if (hasInitialized) {return;}
+        hasInitialized = true;
+        effects.push(hooks.onRender.use(
+          {
+            processor: ({ list, render }) => {list.push({ seq: -1, key: 'modify_editor', render });},
+            render: () => {
+              const option = state.optionGetter?.();
+              if (!option) {return null;}
+              const title = option.title || i18n.$it('table.batchModify').d('批量修改');
+              const plcList = option.plcList || getFlatPlcList();
+              if (!plcList) {return null;}
+              return (
+                <Dialog
+                  externalClass="table-modify-dialog"
+                  v-model={state.show}
+                  title={title}
+                  cancelButton
+                  handleCancel={handler.handleCancel}
+                  position="right"
+                  initialize
+                >
+                  <div style={styles}>
+                    {state.contentRender()}
+                  </div>
+                </Dialog>
+              );
+            },
+          }
+        ));
+      };
+    })()
+  };
+
+  const methods = {
+    open: async (option: iTableModifyEditOption) => {
+      state.modifyPlcIndexList = [];
+
+      state.optionGetter = () => option;
+      utils.initialize();
+      await delay();
+      state.show = true;
+      utils.renderSelectPlcList();
+    },
+  };
+
+  onBeforeUnmount(() => effects.clear());
+
+  return { methods, state };
+}
+
+export interface iTableModifyEditOption {
+  title?: string,
+  plcList?: tPlc[],
+  onConfirm?: (editRow: PlainObject) => void,
+  onCancel?: () => void,
+}

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

@@ -1,49 +1,49 @@
-import {PlainScroll} from "../../../Scroll";
-import VirtualTable from "../../../VirtualTable";
-import {reactive, watch} from "@peryl/react-compose";
-
-export function useTableScroll(
-  {
-    refs,
-  }: {
-    refs: {
-      virtual: undefined | null | typeof VirtualTable.use.class
-    }
-  }
-) {
-  const state = reactive({
-    getScroll: () => null as null | undefined | PlainScroll
-  });
-
-  const freezeState = {
-    handlers: [] as ((scroll: PlainScroll | null | undefined) => void)[],
-  };
-
-  const onTableScrollRefer = (handler: (scroll: PlainScroll | null | undefined) => void) => {
-    freezeState.handlers.push(handler);
-
-    const scroll = state.getScroll();
-    if (!!scroll) {
-      handler(scroll);
-    }
-
-    return () => {
-      const index = freezeState.handlers.indexOf(handler);
-      if (index > -1) {
-        freezeState.handlers.splice(index, 1);
-      }
-    };
-  };
-
-  const getScroll = () => state.getScroll()!;
-
-  watch(() => refs.virtual, virtual => {
-    const scroll = virtual?.refs.scroll;
-    freezeState.handlers.forEach(i => i(scroll));
-    state.getScroll = () => scroll;
-  });
-
-  return { onTableScrollRefer, getScroll };
-}
-
-export type iTableScrollRefer = ReturnType<typeof useTableScroll>
+import {PlainScroll} from "../../../Scroll";
+import VirtualTable from "../../../VirtualTable";
+import {reactive, watch} from "@peryl/react-compose";
+
+export function useTableScroll(
+  {
+    refs,
+  }: {
+    refs: {
+      virtual: undefined | null | typeof VirtualTable.use.class
+    }
+  }
+) {
+  const state = reactive({
+    getScroll: () => null as null | undefined | PlainScroll
+  });
+
+  const freezeState = {
+    handlers: [] as ((scroll: PlainScroll | null | undefined) => void)[],
+  };
+
+  const onTableScrollRefer = (handler: (scroll: PlainScroll | null | undefined) => void) => {
+    freezeState.handlers.push(handler);
+
+    const scroll = state.getScroll();
+    if (!!scroll) {
+      handler(scroll);
+    }
+
+    return () => {
+      const index = freezeState.handlers.indexOf(handler);
+      if (index > -1) {
+        freezeState.handlers.splice(index, 1);
+      }
+    };
+  };
+
+  const getScroll = () => state.getScroll()!;
+
+  watch(() => refs.virtual, virtual => {
+    const scroll = virtual?.refs.scroll;
+    freezeState.handlers.forEach(i => i(scroll));
+    state.getScroll = () => scroll;
+  });
+
+  return { onTableScrollRefer, getScroll };
+}
+
+export type iTableScrollRefer = ReturnType<typeof useTableScroll>

package/src/packages/components/Table/table/utils/createTableHooks.ts

@@ -1,70 +1,70 @@
-import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "@peryl/react-compose";
-import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
-import {iTableMessyData, iTableNode} from "./table.utils";
-import {PlainObject} from "@peryl/utils/event";
-import {VirtualTable} from "../../../VirtualTable";
-
-export const createTableHooks = () => {
-  return {
-    /*渲染table主体内容*/
-    onRender: createRenderHook(),
-    /*渲染列*/
-    onRenderColumns: createRenderHook(),
-    /*收集原始列信息*/
-    onPlcTypes: createHooks<(list: tPlcType[]) => void>(),
-    /*左右滚动*/
-    onScroll: createHooks<(e: any) => void>(),
-    /*table根节点挂载*/
-    onTableMounted: createHooks<(el: HTMLDivElement) => void>(),
-    /*是否可以开启虚拟滚动*/
-    onEnableVirtual: createSyncHooks<(data: boolean) => void>(),
-    /*当虚拟滚动的pageIndex变化的时候触发动作*/
-    onVirtualPageIndexChange: createHooks<(data: { pageIndex: number, startIndex: number }) => void>(),
-    /*点击行动作*/
-    onClickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
-    /*双击行动作*/
-    onDblclickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
-    /*单击单元格动作*/
-    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
-    /*双击单元格动作*/
-    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
-    /*右击单元格动作*/
-    onContextmenuCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
-    /*鼠标进入单元格*/
-    onEnterCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
-    /*鼠标离开单元格*/
-    onLeaveCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
-    /*计算cell的class*/
-    onCellClass: createSyncHooks<(data: { classes: any[], plc: tPlcType, node?: iTableNode }) => void>(true),
-    /*计算cell的style*/
-    onCellStyle: createSyncHooks<(data: { styles: StyleProperties, plc: tPlcType, node?: iTableNode }) => void>(true),
-    /*点击列拖拽按钮动作*/
-    onClickColDraggier: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
-    /*点击行拖拽按钮动作*/
-    onClickRowDraggier: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
-
-    /*点击列标题单元格*/
-    onClickHeadCell: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
-    /*鼠标进入标题单元格*/
-    onEnterHeadCell: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
-    /*鼠标离开标题单元格*/
-    onLeaveHeadCell: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
-
-    /*渲染行tr*/
-    onRenderRow: createSyncHooks<(scope: { node: iTableNode, row: any, content: RenderNode }) => void>(),
-    /*表格数据*/
-    onData: createSyncHooks<(scope: { data: PlainObject[] | undefined }) => void>(true),
-    /*表格渲染行数据（其中的行数据不一定是tableNode）*/
-    onTableMessyData: createSyncHooks<(scope: { data: iTableMessyData[] }) => void>(true),
-    /*处理行样式*/
-    onRowClass: createSyncHooks<(data: { node: iTableNode, classList: any[] }) => void>(true),
-    /*鼠标移动经过row时*/
-    onMousemoveRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
-    /*鼠标进入row时*/
-    onMouseenterRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
-    /*获取virtual table的引用的时候*/
-    onRefVirtual: createHooks<(data: { virtual: typeof VirtualTable.use.class | null | undefined }) => void>(),
-  };
-};
-
-export type iTableHooks = ReturnType<typeof createTableHooks>
+import {createHooks, createRenderHook, createSyncHooks, iMouseEvent, RenderNode, StyleProperties} from "@peryl/react-compose";
+import {tPlc, tPlcType} from "../../plc/utils/plc.utils";
+import {iTableMessyData, iTableNode} from "./table.utils";
+import {PlainObject} from "@peryl/utils/event";
+import {VirtualTable} from "../../../VirtualTable";
+
+export const createTableHooks = () => {
+  return {
+    /*渲染table主体内容*/
+    onRender: createRenderHook(),
+    /*渲染列*/
+    onRenderColumns: createRenderHook(),
+    /*收集原始列信息*/
+    onPlcTypes: createHooks<(list: tPlcType[]) => void>(),
+    /*左右滚动*/
+    onScroll: createHooks<(e: any) => void>(),
+    /*table根节点挂载*/
+    onTableMounted: createHooks<(el: HTMLDivElement) => void>(),
+    /*是否可以开启虚拟滚动*/
+    onEnableVirtual: createSyncHooks<(data: boolean) => void>(),
+    /*当虚拟滚动的pageIndex变化的时候触发动作*/
+    onVirtualPageIndexChange: createHooks<(data: { pageIndex: number, startIndex: number }) => void>(),
+    /*点击行动作*/
+    onClickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
+    /*双击行动作*/
+    onDblclickRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
+    /*单击单元格动作*/
+    onClickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
+    /*双击单元格动作*/
+    onDblclickCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
+    /*右击单元格动作*/
+    onContextmenuCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlc }) => void>(),
+    /*鼠标进入单元格*/
+    onEnterCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    /*鼠标离开单元格*/
+    onLeaveCell: createHooks<(data: { e: iMouseEvent, node: iTableNode, plc: tPlcType }) => void>(),
+    /*计算cell的class*/
+    onCellClass: createSyncHooks<(data: { classes: any[], plc: tPlcType, node?: iTableNode }) => void>(true),
+    /*计算cell的style*/
+    onCellStyle: createSyncHooks<(data: { styles: StyleProperties, plc: tPlcType, node?: iTableNode }) => void>(true),
+    /*点击列拖拽按钮动作*/
+    onClickColDraggier: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
+    /*点击行拖拽按钮动作*/
+    onClickRowDraggier: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
+
+    /*点击列标题单元格*/
+    onClickHeadCell: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
+    /*鼠标进入标题单元格*/
+    onEnterHeadCell: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
+    /*鼠标离开标题单元格*/
+    onLeaveHeadCell: createHooks<(data: { e: iMouseEvent, plc: tPlcType }) => void>(),
+
+    /*渲染行tr*/
+    onRenderRow: createSyncHooks<(scope: { node: iTableNode, row: any, content: RenderNode }) => void>(),
+    /*表格数据*/
+    onData: createSyncHooks<(scope: { data: PlainObject[] | undefined }) => void>(true),
+    /*表格渲染行数据（其中的行数据不一定是tableNode）*/
+    onTableMessyData: createSyncHooks<(scope: { data: iTableMessyData[] }) => void>(true),
+    /*处理行样式*/
+    onRowClass: createSyncHooks<(data: { node: iTableNode, classList: any[] }) => void>(true),
+    /*鼠标移动经过row时*/
+    onMousemoveRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
+    /*鼠标进入row时*/
+    onMouseenterRow: createHooks<(data: { e: iMouseEvent, node: iTableNode }) => void>(),
+    /*获取virtual table的引用的时候*/
+    onRefVirtual: createHooks<(data: { virtual: typeof VirtualTable.use.class | null | undefined }) => void>(),
+  };
+};
+
+export type iTableHooks = ReturnType<typeof createTableHooks>