@hzab/edit-table 0.1.9 → 0.1.11

package/src/common/WidthWrapHoc.tsx

@@ -1,242 +1,255 @@
-import { useEffect, useMemo, useRef, useState } from "react";
-
-import type {
-  Cell,
-  CellTemplate,
-  Compatible,
-  Uncertain,
-  UncertainCompatible} from "@silevis/reactgrid";
-import {
-  getCellProperty,
-  getCharFromKey,
-  isAlphaNumericKey,
-  isNavigationKey,
-  keyCodes
-} from "@silevis/reactgrid";
-import { InfoCircleOutlined } from "@ant-design/icons";
-import { Popover } from "antd";
-import { isTriggerBlur } from "./childAntdComponent";
-export type OptionType = {
-  label: string;
-  value: string | number;
-  isDisabled?: boolean;
-};
-
-export interface BaseCell extends Cell {
-  selectedValue?: string;
-  value: string | number;
-  values: OptionType[];
-  isDisabled?: boolean;
-}
-interface DIProps {
-  onCellChanged: (...args: any[]) => void;
-  cell: Record<string, any>;
-  isInEditMode?: boolean;
-}
-
-export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
-  class createBaseCellTemplate implements CellTemplate<BaseCell> {
-    getCompatibleCell(uncertainCell: Uncertain<BaseCell>): Compatible<BaseCell> {
-      let values: any;
-      try {
-        values = getCellProperty(uncertainCell, "values", "object");
-      } catch {
-        values = [];
-      }
-      const value = uncertainCell.selectedValue ? parseFloat(uncertainCell.selectedValue) : NaN;
-      let isDisabled = true;
-      try {
-        isDisabled = getCellProperty(uncertainCell, "isDisabled", "boolean");
-      } catch {
-        isDisabled = false;
-      }
-      const selectedValue = uncertainCell.selectedValue;
-      const text = selectedValue || "";
-      return { ...uncertainCell, selectedValue, text, value, values, isDisabled };
-    }
-
-    update(cell: Compatible<BaseCell>, cellToMerge: UncertainCompatible<BaseCell>): Compatible<BaseCell> {
-      const selectedValueFromText = cell.values.some((val: any) => val.value == cellToMerge.text)
-        ? cellToMerge.text
-        : cellToMerge?.text || undefined;
-
-      return this.getCompatibleCell({
-        ...cell,
-        selectedValue: selectedValueFromText,
-      });
-    }
-
-    getClassName(cell: Compatible<BaseCell>, isInEditMode: boolean): string {
-      return "";
-    }
-    /** enableEditMode为true 时输入中文会报错 */
-    handleCompositionEnd(
-      cell: Compatible<BaseCell>,
-      eventData: any,
-    ): { cell: Compatible<BaseCell>; enableEditMode: boolean } {
-      return {
-        cell: {
-          ...cell,
-        },
-        enableEditMode: false,
-      };
-    }
-    /** render 不能抽出来组件，否则点击会失效 */
-    render(cell: any, isInEditMode: boolean, onCellChanged: (cell: any, commit: boolean) => void): React.ReactNode {
-      const [edit, setEdit] = useState<boolean>(false);
-      const [open, setOpen] = useState<boolean>(false);
-      const datatypeId = cell?.columnId + cell?.rowId;
-      const [comValue, setComValue] = useState(cell?.text);
-      const [isValidator, setIsValidator] = useState(false);
-      const comValueInit = useRef<any>(cell?.text);
-      const openTimerRef = useRef<any>();
-      useEffect(() => {
-        setComValue(cell?.text);
-        comValueInit.current = cell?.text;
-      }, [cell?.text]);
-
-      useEffect(() => {
-        // 处理下拉选项弹层失焦逻辑
-        function onClick(e) {
-          if ((window as any).gridEditId != datatypeId) {
-            setEdit(false);
-          }
-        }
-        document.addEventListener("click", onClick);
-        return () => {
-          document.removeEventListener("click", onClick);
-        };
-      }, []);
-
-      /** 校验触发器 */
-      const onValidator = (val) => {
-        let flag = false;
-        let isVerify = false;
-        for (const it of cell?.validatorList || []) {
-          if (it?.pattern?.test(val)) {
-            flag = true;
-          }
-          break;
-        }
-        isVerify = !flag && Array.isArray(cell?.validatorList) && cell?.validatorList?.length > 0;
-        setIsValidator(isVerify);
-      };
-
-      useEffect(() => {
-        if (!open) return;
-        // 等下一帧，弹窗DOM渲染完成
-        const timer = setTimeout(() => {
-          const popup: any = document.querySelector(".ant-picker-dropdown");
-          if (!popup) return;
-
-          const stopPointer = (e: PointerEvent) => {
-            // 阻断事件往上冒泡到document
-            e.stopPropagation();
-          };
-          // 捕获阶段监听 pointerdown！！必须是pointerdown不是mousedown
-          popup.addEventListener("pointerdown", stopPointer, true);
-
-          // 清理函数
-          return () => {
-            popup.removeEventListener("pointerdown", stopPointer, true);
-          };
-        }, 0);
-
-        return () => clearTimeout(timer);
-      }, [open]);
-
-      /** 失焦提交 */
-      const onBlurSubmit = () => {
-        const targetValue = comValueInit.current;
-        onCellChanged(
-          this.getCompatibleCell({
-            ...cell,
-            text: targetValue,
-            selectedValue: targetValue,
-          }),
-          true,
-        );
-      };
-
-      const dataPickerProps = useMemo(() => {
-        if (isTriggerBlur?.includes(cell?.type)) {
-          return {
-            open: open,
-            /** 兼容datapicker 闪烁问题 */
-            onOpenChange: (isOpen) => {
-              if (openTimerRef.current) {
-                clearTimeout(openTimerRef.current);
-              }
-              openTimerRef.current = setTimeout(() => {
-                setOpen(isOpen);
-              }, 80);
-            },
-          };
-        }
-        return {};
-      }, [cell]);
-      /** 监听上传组件失焦回调 */
-      useEffect(() => {
-        if (!edit && cell.type == "Upload" && (window as any).uploadEdit && (window as any).uploadEdit == datatypeId) {
-          (window as any).uploadEdit = null;
-          onBlurSubmit();
-        }
-      }, [edit, comValue]);
-
-      return (
-        <div
-          className={`base-hoc ${edit ? "base-hoc-edit" : ""}`}
-          onDoubleClick={(e) => {
-            if (cell?.nonEditable) {
-              return;
-            }
-            if (cell.type === "Upload") {
-              (window as any).uploadEdit = datatypeId;
-            }
-            setEdit(true);
-          }}
-        >
-          <WrapComponent
-            {...props}
-            onPointerDown={(e) => e.stopPropagation()}
-            componentProps={{
-              style: { width: "100%", display: "flex", alignItems: "center" },
-              value: comValue,
-              options: cell.values,
-              onChange: (e) => {
-                const targetValue = e?.target?.value ?? e;
-                setComValue(targetValue);
-                comValueInit.current = targetValue;
-                onValidator(targetValue);
-              },
-              onBlur: (e) => {
-                onBlurSubmit();
-                if (!isTriggerBlur?.includes(cell?.type)) {
-                  setEdit(false);
-                }
-              },
-
-              onPointerDown: (e) => {
-                e.stopPropagation();
-              },
-              onKeyDown: (e) => {
-                if (isAlphaNumericKey(e.keyCode) || isNavigationKey(e.keyCode)) e.stopPropagation();
-              },
-              ...dataPickerProps,
-              ...((cell?.getField && cell?.getField()["x-component-props"]) || {}),
-            }}
-            pattern={edit ? "" : "readPretty"}
-            cell={cell}
-          ></WrapComponent>
-          {isValidator && (
-            <Popover content={cell?.validatorMessage ?? "该字段不合法"}>
-              <InfoCircleOutlined className="validator-icon" />
-            </Popover>
-          )}
-        </div>
-      );
-    }
-  }
-
-  return new createBaseCellTemplate();
-};
+import { useEffect, useMemo, useRef, useState } from "react";
+
+import type {
+  Cell,
+  CellTemplate,
+  Compatible,
+  Uncertain,
+  UncertainCompatible,
+} from "@silevis/reactgrid";
+import {
+  getCellProperty,
+  getCharFromKey,
+  isAlphaNumericKey,
+  isNavigationKey,
+  keyCodes,
+} from "@silevis/reactgrid";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Popover } from "antd";
+import { isTriggerBlur } from "./childAntdComponent";
+export type OptionType = {
+  label: string;
+  value: string | number;
+  isDisabled?: boolean;
+};
+
+export interface BaseCell extends Cell {
+  selectedValue?: string;
+  value: string | number;
+  values: OptionType[];
+  isDisabled?: boolean;
+}
+interface DIProps {
+  onCellChanged: (...args: any[]) => void;
+  cell: Record<string, any>;
+  isInEditMode?: boolean;
+}
+
+export const WidthWrapHoc = (WrapComponent: any, props = {}) => {
+  class createBaseCellTemplate implements CellTemplate<BaseCell> {
+    getCompatibleCell(uncertainCell: Uncertain<BaseCell>): Compatible<BaseCell> {
+      let values: any;
+      try {
+        values = getCellProperty(uncertainCell, "values", "object");
+      } catch {
+        values = [];
+      }
+      const value = uncertainCell.selectedValue ? parseFloat(uncertainCell.selectedValue) : NaN;
+      let isDisabled = true;
+      try {
+        isDisabled = getCellProperty(uncertainCell, "isDisabled", "boolean");
+      } catch {
+        isDisabled = false;
+      }
+      const selectedValue = uncertainCell.selectedValue;
+      const text = selectedValue || "";
+      return { ...uncertainCell, selectedValue, text, value, values, isDisabled };
+    }
+
+    update(
+      cell: Compatible<BaseCell>,
+      cellToMerge: UncertainCompatible<BaseCell>,
+    ): Compatible<BaseCell> {
+      const selectedValueFromText = cell.values.some((val: any) => val.value == cellToMerge.text)
+        ? cellToMerge.text
+        : cellToMerge?.text || undefined;
+
+      return this.getCompatibleCell({
+        ...cell,
+        selectedValue: selectedValueFromText,
+      });
+    }
+
+    getClassName(cell: Compatible<BaseCell>, isInEditMode: boolean): string {
+      return "";
+    }
+    /** enableEditMode为true 时输入中文会报错 */
+    handleCompositionEnd(
+      cell: Compatible<BaseCell>,
+      eventData: any,
+    ): { cell: Compatible<BaseCell>; enableEditMode: boolean } {
+      return {
+        cell: {
+          ...cell,
+        },
+        enableEditMode: false,
+      };
+    }
+    /** render 不能抽出来组件，否则点击会失效 */
+    render(
+      cell: any,
+      isInEditMode: boolean,
+      onCellChanged: (cell: any, commit: boolean) => void,
+    ): React.ReactNode {
+      const [edit, setEdit] = useState<boolean>(false);
+      const [open, setOpen] = useState<boolean>(false);
+      const datatypeId = cell?.columnId + cell?.rowId;
+      const [comValue, setComValue] = useState(cell?.text);
+      const [isValidator, setIsValidator] = useState(false);
+      const comValueInit = useRef<any>(cell?.text);
+      const openTimerRef = useRef<any>();
+      useEffect(() => {
+        setComValue(cell?.text);
+        comValueInit.current = cell?.text;
+      }, [cell?.text]);
+
+      useEffect(() => {
+        // 处理下拉选项弹层失焦逻辑
+        function onClick(e) {
+          if ((window as any).gridEditId != datatypeId) {
+            setEdit(false);
+          }
+        }
+        document.addEventListener("click", onClick);
+        return () => {
+          document.removeEventListener("click", onClick);
+        };
+      }, []);
+
+      /** 校验触发器 */
+      const onValidator = (val) => {
+        let flag = false;
+        let isVerify = false;
+        for (const it of cell?.validatorList || []) {
+          if (it?.pattern?.test(val)) {
+            flag = true;
+          }
+          break;
+        }
+        isVerify = !flag && Array.isArray(cell?.validatorList) && cell?.validatorList?.length > 0;
+        setIsValidator(isVerify);
+      };
+
+      useEffect(() => {
+        if (!open) return;
+        // 等下一帧，弹窗DOM渲染完成
+        const timer = setTimeout(() => {
+          const popup: any = document.querySelector(".ant-picker-dropdown");
+          if (!popup) return;
+
+          const stopPointer = (e: PointerEvent) => {
+            // 阻断事件往上冒泡到document
+            e.stopPropagation();
+          };
+          // 捕获阶段监听 pointerdown！！必须是pointerdown不是mousedown
+          popup.addEventListener("pointerdown", stopPointer, true);
+
+          // 清理函数
+          return () => {
+            popup.removeEventListener("pointerdown", stopPointer, true);
+          };
+        }, 0);
+
+        return () => clearTimeout(timer);
+      }, [open]);
+
+      /** 失焦提交 */
+      const onBlurSubmit = () => {
+        const targetValue = comValueInit.current;
+        onCellChanged(
+          this.getCompatibleCell({
+            ...cell,
+            text: targetValue,
+            selectedValue: targetValue,
+          }),
+          true,
+        );
+      };
+
+      const dataPickerProps = useMemo(() => {
+        if (isTriggerBlur?.includes(cell?.type)) {
+          return {
+            open: open,
+            /** 兼容datapicker 闪烁问题 */
+            onOpenChange: (isOpen) => {
+              if (openTimerRef.current) {
+                clearTimeout(openTimerRef.current);
+              }
+              openTimerRef.current = setTimeout(() => {
+                setOpen(isOpen);
+              }, 80);
+            },
+          };
+        }
+        return {};
+      }, [cell]);
+      /** 监听上传组件失焦回调 */
+      useEffect(() => {
+        if (
+          !edit &&
+          cell.type == "Upload" &&
+          (window as any).uploadEdit &&
+          (window as any).uploadEdit == datatypeId
+        ) {
+          (window as any).uploadEdit = null;
+          onBlurSubmit();
+        }
+      }, [edit, comValue]);
+
+      return (
+        <div
+          className={`base-hoc ${edit ? "base-hoc-edit" : ""}`}
+          onDoubleClick={(e) => {
+            if (cell?.nonEditable) {
+              return;
+            }
+            if (cell.type === "Upload") {
+              (window as any).uploadEdit = datatypeId;
+            }
+            setEdit(true);
+          }}
+        >
+          <WrapComponent
+            {...props}
+            onPointerDown={(e) => e.stopPropagation()}
+            componentProps={{
+              style: { width: "100%", display: "flex", alignItems: "center" },
+              value: comValue,
+              options: cell.values,
+              onChange: (e) => {
+                const targetValue = e?.target?.value ?? e;
+                setComValue(targetValue);
+                comValueInit.current = targetValue;
+                onValidator(targetValue);
+              },
+              onBlur: (e) => {
+                onBlurSubmit();
+                if (!isTriggerBlur?.includes(cell?.type)) {
+                  setEdit(false);
+                }
+              },
+
+              onPointerDown: (e) => {
+                e.stopPropagation();
+              },
+              onKeyDown: (e) => {
+                if (isAlphaNumericKey(e.keyCode) || isNavigationKey(e.keyCode)) e.stopPropagation();
+              },
+              ...dataPickerProps,
+              ...((cell?.getField && cell?.getField()["x-component-props"]) || {}),
+            }}
+            pattern={edit ? "" : "readPretty"}
+            cell={cell}
+          ></WrapComponent>
+          {isValidator && (
+            <Popover content={cell?.validatorMessage ?? "该字段不合法"}>
+              <InfoCircleOutlined className="validator-icon" />
+            </Popover>
+          )}
+        </div>
+      );
+    }
+  }
+
+  return new createBaseCellTemplate();
+};

package/src/common/childAntdComponent.ts

@@ -1,16 +1,24 @@
-import { DatePicker, Input, TimePicker } from "antd";
-
-export const childAntdComponent: any = {
-  "DatePicker.MonthPicker": DatePicker.MonthPicker,
-  "DatePicker.QuarterPicker": DatePicker.QuarterPicker,
-  "DatePicker.RangePicker": DatePicker.RangePicker,
-  "DatePicker.TimePicker": DatePicker.TimePicker,
-  "DatePicker.WeekPicker": DatePicker.WeekPicker,
-  "DatePicker.YearPicker": DatePicker.YearPicker,
-  "Input.Password": Input.Password,
-  "Input.Search": Input.Search,
-  "Input.TextArea": Input.TextArea,
-  "TimePicker.RangePicker": TimePicker.RangePicker,
-}
-export const isTriggerBlur = ["DatePicker", "DatePicker.MonthPicker", "DatePicker.QuarterPicker", "DatePicker.RangePicker", "DatePicker.TimePicker", "DatePicker.WeekPicker", "DatePicker.YearPicker", "TimePicker.RangePicker"];
-
+import { DatePicker, Input, TimePicker } from "antd";
+
+export const childAntdComponent: any = {
+  "DatePicker.MonthPicker": DatePicker.MonthPicker,
+  "DatePicker.QuarterPicker": DatePicker.QuarterPicker,
+  "DatePicker.RangePicker": DatePicker.RangePicker,
+  "DatePicker.TimePicker": DatePicker.TimePicker,
+  "DatePicker.WeekPicker": DatePicker.WeekPicker,
+  "DatePicker.YearPicker": DatePicker.YearPicker,
+  "Input.Password": Input.Password,
+  "Input.Search": Input.Search,
+  "Input.TextArea": Input.TextArea,
+  "TimePicker.RangePicker": TimePicker.RangePicker,
+};
+export const isTriggerBlur = [
+  "DatePicker",
+  "DatePicker.MonthPicker",
+  "DatePicker.QuarterPicker",
+  "DatePicker.RangePicker",
+  "DatePicker.TimePicker",
+  "DatePicker.WeekPicker",
+  "DatePicker.YearPicker",
+  "TimePicker.RangePicker",
+];