plain-design 1.0.0-beta.72 → 1.0.0-beta.74

package/src/packages/components/Table/plc/useTablePlc.tsx

@@ -1,226 +1,226 @@
-import {iTablePropsType, iTableSlotsType} from "../table/utils/table.utils";
-import {iTableHooks} from "../table/utils/createTableHooks";
-import {computed, nextTick, onBeforeUnmount, reactive, useRefs, watch} from "plain-design-composition";
-import {PlcGroup} from "../../PlcGroup";
-import {TablePlcFixedType, tPlc, tPlcType} from "./utils/plc.utils";
-import {runOnce} from "plain-utils/utils/runOnce";
-import {formatPlcList, tPlcData} from "./formatPlcList";
-import {OpenController} from "../../../utils/OpenController";
-import {createEffects} from "plain-utils/utils/createEffects";
-import {throttle} from "plain-utils/utils/throttle";
-
-export function useTablePlc(
-  {
-    props,
-    slots,
-    hooks,
-    onCollectPlcData,
-  }: {
-    props: iTablePropsType,
-    slots: iTableSlotsType,
-    hooks: iTableHooks,
-    onCollectPlcData: (data: tPlcData) => void,
-  }
-) {
-
-  const { refs, onRef } = useRefs({ group: PlcGroup });
-
-  hooks.onRenderColumns.use({
-    /*不隔断渲染，因为是渲染插槽内容，无法检测响应式变化*/
-    separate: false,
-    processor: ({ list, render }) => {list.push({ key: 'defaultSlot', seq: 1, render });},
-    render: () => slots.default(),
-  });
-
-  hooks.onRender.use({
-    /*因为onRenderColumns不隔断，所以这里也不隔断*/
-    separate: false,
-    processor: ({ list, render }) => {list.push({ seq: 5, key: 'plc_collector', render });},
-    render: () => <PlcGroup ref={onRef.group}>{hooks.onRenderColumns.exec()}</PlcGroup>
-  });
-
-  /*---------------------------------------state-------------------------------------------*/
-
-  const state = reactive({
-    tableWidth: null as null | number,
-    getTableEl: null as null | (() => HTMLDivElement),
-    getPlcTypeArr: null as null | (() => tPlcType[]),
-  });
-
-  hooks.onPlcTypes.use(list => {state.getPlcTypeArr = () => list;});
-
-  (() => {
-    const updateWidth = () => {
-      const el = state.getTableEl?.();
-      if (!el) {return;}
-      const { offsetWidth } = el;
-      if (state.tableWidth !== offsetWidth) {
-        state.tableWidth = offsetWidth;
-      }
-    };
-    const { effects } = createEffects();
-    /*table 挂载的时候保存table的宽度*/
-    effects.push(
-      hooks.onTableMounted.use(el => {
-        state.getTableEl = () => el;
-        updateWidth();
-      })
-    );
-
-    window.addEventListener('resize', updateWidth);
-    effects.push(() => {window.removeEventListener('resize', updateWidth);});
-
-    effects.push(
-      watch(() => !refs.group ? null : refs.group.children, list => {hooks.onPlcTypes.exec(list || []);})
-    );
-
-    const isOpen = OpenController.inject();
-    if (!!isOpen) {
-      effects.push(
-        watch(() => isOpen(), async flag => {
-          if (!flag) {return;}
-          await nextTick();
-          updateWidth();
-        })
-      );
-    }
-
-    onBeforeUnmount(() => {effects.clear();});
-  })();
-
-  /*---------------------------------------computed-------------------------------------------*/
-
-  const runConfig = runOnce((plcList: tPlcType[], flatList: tPlc[]) => {!!props.config && props.config(plcList, flatList);});
-
-  const plcData = computed(() => {
-    if (!state.tableWidth || !state.getPlcTypeArr) {return null;}
-    const plcData = formatPlcList({
-      plcList: state.getPlcTypeArr(),
-      tableWidth: state.tableWidth,
-      plcConfigProcessor: runConfig,
-    });
-    // console.warn('onCollectPlcData');
-    onCollectPlcData(plcData);
-    return plcData;
-  });
-
-  const virtualFlatPlcList = (() => {
-    const state = reactive({ scrollLeft: 0 });
-    const setScrollLeft = throttle((scrollLeft: number) => {state.scrollLeft !== scrollLeft && (state.scrollLeft = scrollLeft);}, 50);
-    hooks.onScroll.use((e) => {setScrollLeft(e.target.scrollLeft);});
-    return computed((): tPlc[] => {
-      if (!plcData.value) {return [];}
-      const { targetTableWidth, tableWidth, flatPlcList } = plcData.value;
-      if (targetTableWidth == null || targetTableWidth - tableWidth < 400) {return flatPlcList;}
-
-      /*需要合并隐藏的左部分的列*/
-      let virtualLeftPlcList: tPlc[] = [];
-      /*需要合并隐藏的右部分的列*/
-      let virtualRightPlcRight: tPlc[] = [];
-      /*最后一个左固定列的index*/
-      let lastFixedLeftIndex = null as null | number;
-      /*第一个有固定的列的index*/
-      let firstFixedRightIndex = null as null | number;
-
-      const plcList = [...plcData.value?.flatPlcList || []];
-
-      /*左固定列总宽度，右固定列总宽度*/
-      const { left: fixedLeftWidth, right: fixedRightWidth } = plcList.reduce((prev, item) => {
-        if (!!item.props.fixed) {prev[item.props.fixed as 'left' | 'right'] += item.props.width;}
-        return prev;
-      }, { left: 0, right: 0 });
-
-      /*累计计算每个列距离表格左侧的距离*/
-      let left = 0;
-      plcList.forEach((plc, index) => {
-        if (plc.props.fixed === TablePlcFixedType.left) {
-          lastFixedLeftIndex = index;
-          left += plc.props.width;
-          return;
-        }
-        if (plc.props.fixed === TablePlcFixedType.right) {
-          if (firstFixedRightIndex == null) {firstFixedRightIndex = index;}
-          left += plc.props.width;
-          return;
-        }
-        /*列在当前滚动下距离左侧的值*/
-        const plcLeftValue = left - state.scrollLeft;
-        /*列在当前滚动下，右边界剧烈左侧的值*/
-        const plcRightValue = plcLeftValue + plc.props.width;
-
-        /*列的右边界小于左固定列的右边界*/
-        if (plcRightValue < fixedLeftWidth - 500) {
-          virtualLeftPlcList.push(plc);
-        }
-        /*列的左边界大于右固定列的左边界*/
-        if (plcLeftValue > tableWidth - fixedRightWidth + 500) {
-          virtualRightPlcRight.push(plc);
-        }
-        left += plc.props.width;
-      });
-
-      if (virtualLeftPlcList.length > 0) {
-        plcList.splice(plcList.findIndex(i => i == virtualLeftPlcList[0]), virtualLeftPlcList.length, buildVirtualPlc(virtualLeftPlcList.reduce((prev, item) => prev + item.props.width, 0), 'prev'));
-      }
-      if (virtualRightPlcRight.length > 0) {
-        plcList.splice(plcList.findIndex(i => i == virtualRightPlcRight[0]), virtualRightPlcRight.length, buildVirtualPlc(virtualRightPlcRight.reduce((prev, item) => prev + item.props.width, 0), 'next'));
-      }
-      return plcList;
-    });
-  })();
-
-  const bodyPlcList = computed(() => props.virtualColumn ? virtualFlatPlcList.value : plcData.value?.flatPlcList);
-
-  return {
-    plcData,
-    bodyPlcList,
-    plcDataState: state,
-  };
-}
-
-
-function buildVirtualPlc(width: number, plcKey: string): tPlc {
-  return {
-    plcKey,
-    level: 0,
-    rowspan: 0,
-    colspan: 0,
-    isLastFixedLeft: false,
-    isFirstFixedRight: false,
-    fixedPosition: {
-      left: 0,
-      right: 0,
-    },
-    styles: {
-      head: {},
-      body: {},
-    },
-    classes: {
-      head: {},
-      body: {},
-    },
-    group: false,
-    props: {
-      width,
-    } as any,
-    sourceProps: {
-      width,
-    } as any,
-    slots: {},
-    scopeSlots: {
-      head: Object.assign(() => {return null;}, { isExist: () => true }),
-      normal: Object.assign(() => {return null;}, { isExist: () => true }),
-      summary: Object.assign(() => {return null;}, { isExist: () => true }),
-      edit: Object.assign(() => {return null;}, { isExist: () => true }),
-      form: Object.assign(() => {return null;}, { isExist: () => true }),
-    },
-    event: {} as any,
-    refer: () => ({}) as any,
-    setDurWidth: () => {},
-    setPropsState: () => {},
-    getState: () => ({}) as any,
-    isRequired: () => false,
-    getWidth: () => 0,
-    isExclude: () => false,
-  };
-}
+import {iTablePropsType, iTableSlotsType} from "../table/utils/table.utils";
+import {iTableHooks} from "../table/utils/createTableHooks";
+import {computed, nextTick, onBeforeUnmount, reactive, useRefs, watch} from "plain-design-composition";
+import {PlcGroup} from "../../PlcGroup";
+import {TablePlcFixedType, tPlc, tPlcType} from "./utils/plc.utils";
+import {runOnce} from "plain-utils/utils/runOnce";
+import {formatPlcList, tPlcData} from "./formatPlcList";
+import {OpenController} from "../../../utils/OpenController";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {throttle} from "plain-utils/utils/throttle";
+
+export function useTablePlc(
+  {
+    props,
+    slots,
+    hooks,
+    onCollectPlcData,
+  }: {
+    props: iTablePropsType,
+    slots: iTableSlotsType,
+    hooks: iTableHooks,
+    onCollectPlcData: (data: tPlcData) => void,
+  }
+) {
+
+  const { refs, onRef } = useRefs({ group: PlcGroup });
+
+  hooks.onRenderColumns.use({
+    /*不隔断渲染，因为是渲染插槽内容，无法检测响应式变化*/
+    separate: false,
+    processor: ({ list, render }) => {list.push({ key: 'defaultSlot', seq: 1, render });},
+    render: () => slots.default(),
+  });
+
+  hooks.onRender.use({
+    /*因为onRenderColumns不隔断，所以这里也不隔断*/
+    separate: false,
+    processor: ({ list, render }) => {list.push({ seq: 5, key: 'plc_collector', render });},
+    render: () => <PlcGroup ref={onRef.group}>{hooks.onRenderColumns.exec()}</PlcGroup>
+  });
+
+  /*---------------------------------------state-------------------------------------------*/
+
+  const state = reactive({
+    tableWidth: null as null | number,
+    getTableEl: null as null | (() => HTMLDivElement),
+    getPlcTypeArr: null as null | (() => tPlcType[]),
+  });
+
+  hooks.onPlcTypes.use(list => {state.getPlcTypeArr = () => list;});
+
+  (() => {
+    const updateWidth = () => {
+      const el = state.getTableEl?.();
+      if (!el) {return;}
+      const { offsetWidth } = el;
+      if (state.tableWidth !== offsetWidth) {
+        state.tableWidth = offsetWidth;
+      }
+    };
+    const { effects } = createEffects();
+    /*table 挂载的时候保存table的宽度*/
+    effects.push(
+      hooks.onTableMounted.use(el => {
+        state.getTableEl = () => el;
+        updateWidth();
+      })
+    );
+
+    window.addEventListener('resize', updateWidth);
+    effects.push(() => {window.removeEventListener('resize', updateWidth);});
+
+    effects.push(
+      watch(() => !refs.group ? null : refs.group.children, list => {hooks.onPlcTypes.exec(list || []);})
+    );
+
+    const isOpen = OpenController.inject();
+    if (!!isOpen) {
+      effects.push(
+        watch(() => isOpen(), async flag => {
+          if (!flag) {return;}
+          await nextTick();
+          updateWidth();
+        })
+      );
+    }
+
+    onBeforeUnmount(() => {effects.clear();});
+  })();
+
+  /*---------------------------------------computed-------------------------------------------*/
+
+  const runConfig = runOnce((plcList: tPlcType[], flatList: tPlc[]) => {!!props.config && props.config(plcList, flatList);});
+
+  const plcData = computed(() => {
+    if (!state.tableWidth || !state.getPlcTypeArr) {return null;}
+    const plcData = formatPlcList({
+      plcList: state.getPlcTypeArr(),
+      tableWidth: state.tableWidth,
+      plcConfigProcessor: runConfig,
+    });
+    // console.warn('onCollectPlcData');
+    onCollectPlcData(plcData);
+    return plcData;
+  });
+
+  const virtualFlatPlcList = (() => {
+    const state = reactive({ scrollLeft: 0 });
+    const setScrollLeft = throttle((scrollLeft: number) => {state.scrollLeft !== scrollLeft && (state.scrollLeft = scrollLeft);}, 50);
+    hooks.onScroll.use((e) => {setScrollLeft(e.target.scrollLeft);});
+    return computed((): tPlc[] => {
+      if (!plcData.value) {return [];}
+      const { targetTableWidth, tableWidth, flatPlcList } = plcData.value;
+      if (targetTableWidth == null || targetTableWidth - tableWidth < 400) {return flatPlcList;}
+
+      /*需要合并隐藏的左部分的列*/
+      let virtualLeftPlcList: tPlc[] = [];
+      /*需要合并隐藏的右部分的列*/
+      let virtualRightPlcRight: tPlc[] = [];
+      /*最后一个左固定列的index*/
+      let lastFixedLeftIndex = null as null | number;
+      /*第一个有固定的列的index*/
+      let firstFixedRightIndex = null as null | number;
+
+      const plcList = [...plcData.value?.flatPlcList || []];
+
+      /*左固定列总宽度，右固定列总宽度*/
+      const { left: fixedLeftWidth, right: fixedRightWidth } = plcList.reduce((prev, item) => {
+        if (!!item.props.fixed) {prev[item.props.fixed as 'left' | 'right'] += item.props.width;}
+        return prev;
+      }, { left: 0, right: 0 });
+
+      /*累计计算每个列距离表格左侧的距离*/
+      let left = 0;
+      plcList.forEach((plc, index) => {
+        if (plc.props.fixed === TablePlcFixedType.left) {
+          lastFixedLeftIndex = index;
+          left += plc.props.width;
+          return;
+        }
+        if (plc.props.fixed === TablePlcFixedType.right) {
+          if (firstFixedRightIndex == null) {firstFixedRightIndex = index;}
+          left += plc.props.width;
+          return;
+        }
+        /*列在当前滚动下距离左侧的值*/
+        const plcLeftValue = left - state.scrollLeft;
+        /*列在当前滚动下，右边界剧烈左侧的值*/
+        const plcRightValue = plcLeftValue + plc.props.width;
+
+        /*列的右边界小于左固定列的右边界*/
+        if (plcRightValue < fixedLeftWidth - 500) {
+          virtualLeftPlcList.push(plc);
+        }
+        /*列的左边界大于右固定列的左边界*/
+        if (plcLeftValue > tableWidth - fixedRightWidth + 500) {
+          virtualRightPlcRight.push(plc);
+        }
+        left += plc.props.width;
+      });
+
+      if (virtualLeftPlcList.length > 0) {
+        plcList.splice(plcList.findIndex(i => i == virtualLeftPlcList[0]), virtualLeftPlcList.length, buildVirtualPlc(virtualLeftPlcList.reduce((prev, item) => prev + item.props.width, 0), 'prev'));
+      }
+      if (virtualRightPlcRight.length > 0) {
+        plcList.splice(plcList.findIndex(i => i == virtualRightPlcRight[0]), virtualRightPlcRight.length, buildVirtualPlc(virtualRightPlcRight.reduce((prev, item) => prev + item.props.width, 0), 'next'));
+      }
+      return plcList;
+    });
+  })();
+
+  const bodyPlcList = computed(() => props.virtualColumn ? virtualFlatPlcList.value : plcData.value?.flatPlcList);
+
+  return {
+    plcData,
+    bodyPlcList,
+    plcDataState: state,
+  };
+}
+
+
+function buildVirtualPlc(width: number, plcKey: string): tPlc {
+  return {
+    plcKey,
+    level: 0,
+    rowspan: 0,
+    colspan: 0,
+    isLastFixedLeft: false,
+    isFirstFixedRight: false,
+    fixedPosition: {
+      left: 0,
+      right: 0,
+    },
+    styles: {
+      head: {},
+      body: {},
+    },
+    classes: {
+      head: {},
+      body: {},
+    },
+    group: false,
+    props: {
+      width,
+    } as any,
+    sourceProps: {
+      width,
+    } as any,
+    slots: {},
+    scopeSlots: {
+      head: Object.assign(() => {return null;}, { isExist: () => true }),
+      normal: Object.assign(() => {return null;}, { isExist: () => true }),
+      summary: Object.assign(() => {return null;}, { isExist: () => true }),
+      edit: Object.assign(() => {return null;}, { isExist: () => true }),
+      form: Object.assign(() => {return null;}, { isExist: () => true }),
+    },
+    event: {} as any,
+    refer: () => ({}) as any,
+    setDurWidth: () => {},
+    setPropsState: () => {},
+    getState: () => ({}) as any,
+    isRequired: () => false,
+    getWidth: () => 0,
+    isExclude: () => false,
+  };
+}

package/src/packages/components/Table/plc/utils/iteratePlcList.tsx

@@ -1,48 +1,48 @@
-import {tPlc, tPlcGroup, tPlcType} from "./plc.utils";
-
-export enum IteratePlcHandleType {
-  remove = 'remove',                      // 移除当前节点
-  nothing = 'nothing'                     // 什么事也不做
-}
-
-/**
- * 在遍历plc的时候，操作类型，remove意思是遍历完这一次之删除这个plc或者plc组
- * @author  韦胜健
- * @date    2020/8/14 17:26
- */
-export function iteratePlcList(
-  {
-    plcList,
-    onPlc,
-    onGroup,
-  }: {
-    plcList: tPlcType[],
-    onPlc: (plc: tPlc) => IteratePlcHandleType,
-    onGroup: (group: tPlcGroup) => IteratePlcHandleType,
-  }
-) {
-
-  for (let i = 0; i < plcList.length; i++) {
-    const plc = plcList[i];
-    if (!plc.group) {
-      const handleType = onPlc(plc);
-      if (handleType === IteratePlcHandleType.remove) {
-        plcList.splice(i, 1);
-        i--;
-      }
-    } else {
-      const handleType = onGroup(plc);
-      if (handleType === IteratePlcHandleType.remove) {
-        plcList.splice(i, 1);
-        i--;
-      } else {
-        iteratePlcList({ plcList: plc.children, onPlc, onGroup, });
-        // 当这个分组没有列的时候（可能都隐藏了），自动删除这个分组
-        if (plc.children.length === 0) {
-          plcList.splice(i, 1);
-          i--;
-        }
-      }
-    }
-  }
-}
+import {tPlc, tPlcGroup, tPlcType} from "./plc.utils";
+
+export enum IteratePlcHandleType {
+  remove = 'remove',                      // 移除当前节点
+  nothing = 'nothing'                     // 什么事也不做
+}
+
+/**
+ * 在遍历plc的时候，操作类型，remove意思是遍历完这一次之删除这个plc或者plc组
+ * @author  韦胜健
+ * @date    2020/8/14 17:26
+ */
+export function iteratePlcList(
+  {
+    plcList,
+    onPlc,
+    onGroup,
+  }: {
+    plcList: tPlcType[],
+    onPlc: (plc: tPlc) => IteratePlcHandleType,
+    onGroup: (group: tPlcGroup) => IteratePlcHandleType,
+  }
+) {
+
+  for (let i = 0; i < plcList.length; i++) {
+    const plc = plcList[i];
+    if (!plc.group) {
+      const handleType = onPlc(plc);
+      if (handleType === IteratePlcHandleType.remove) {
+        plcList.splice(i, 1);
+        i--;
+      }
+    } else {
+      const handleType = onGroup(plc);
+      if (handleType === IteratePlcHandleType.remove) {
+        plcList.splice(i, 1);
+        i--;
+      } else {
+        iteratePlcList({ plcList: plc.children, onPlc, onGroup, });
+        // 当这个分组没有列的时候（可能都隐藏了），自动删除这个分组
+        if (plc.children.length === 0) {
+          plcList.splice(i, 1);
+          i--;
+        }
+      }
+    }
+  }
+}