@hzab/list-render 1.10.21-alpha.5 → 1.10.21-alpha.6

package/src/components/CellEditTable/Template/ExpandListTemplate/index.tsx

@@ -1,82 +1,56 @@
-import { MinusCircleOutlined, MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
-import { useEffect, useState, memo } from "react";
+import { MinusCircleOutlined, PlusCircleOutlined } from "@ant-design/icons";
+import { useEffect, useState } from "react";
 import "./index.less";
 export const ExpandListTemplate = (props) => {
+  const { cell } = props;
+  const { Slots, setExpandKeys, expandKeys, rowKey, setNewDataSource, record, columnId } = cell;
   const [expand, setExpand] = useState<boolean>(false);
-  const { record, item } = props;
-  const { Slots, setExpandKeys, expandKeys }: any = item;
   const onExpand = (isExpand) => {
-    item?.setNewDataSource((pre) => {
+    setNewDataSource((pre) => {
       const tempPre = [...pre];
-      const childrenIds = props?.record?.children?.map((el) => el?.groupId);
+      const childrenIds = record?.children?.map((el) => el?.[rowKey]);
       if (isExpand) {
-        const findIndex = pre?.findIndex((el) => el?.groupId == props?.record?.groupId);
-        const filterList = pre?.filter((el) => childrenIds?.includes(el?.groupId)) || [];
+        const findIndex = pre?.findIndex((el) => el?.[rowKey] == record?.[rowKey]);
+        const filterList = pre?.filter((el) => childrenIds?.includes(el?.[rowKey])) || [];
         if (filterList?.length == 0) {
-          tempPre.splice(findIndex + 1, 0, ...(props?.record?.children || []));
+          tempPre.splice(findIndex + 1, 0, ...(record?.children || []));
         }
         return [...tempPre];
       }
 
-      return tempPre?.filter((el) => !childrenIds?.includes(el?.groupId));
+      return pre?.filter((el) => !childrenIds?.includes(el?.[rowKey]));
     });
   };
   useEffect(() => {
-    if (expandKeys?.includes(props?.record?.groupId)) {
+    if (expandKeys?.includes(record?.[rowKey])) {
       setExpand(true);
       onExpand(true);
-    } else {
-      setExpand(false);
-      onExpand(false);
     }
+  }, [cell?.record]);
 
-    // setExpand(props?.record?.expand);
-  }, [props?.record]);
-
-  const colRender = function (text, record) {
-    const Slot = Slots[item?.columnId];
-    const slotProps = {
-      text,
-      record,
-      // field: { ...field, ...fieldSchemas?.[name] },
-      // fieldSchema: fieldSchemas?.[name],
-    };
-    return <Slot {...slotProps} />;
+  const colRender = function (record) {
+    const Slot = Slots[columnId];
+    return <Slot record={record} />;
+  };
+  /** 展开关闭子项 */
+  const onClickExpand = () => {
+    setExpandKeys((preExpandKeys) => {
+      if (preExpandKeys?.includes(record?.[rowKey])) {
+        return preExpandKeys?.filter((el) => el != record?.[rowKey]);
+      }
+      return [...preExpandKeys, record?.[rowKey]];
+    });
+    setExpand(!expand);
+    onExpand(!expand);
   };
   return (
     <div className="expandList-template">
-      {props?.record?.children && (
+      {record?.children && (
         <>
           {!expand ? (
-            <PlusCircleOutlined
-              className="expandList-template-icon"
-              onClick={() => {
-                props.record["expand"] = !expand;
-                setExpandKeys((preExpandKeys) => {
-                  if (preExpandKeys?.includes(props?.record?.groupId)) {
-                    return preExpandKeys?.filter((el) => el != props?.record?.groupId);
-                  }
-                  return [...preExpandKeys, props?.record?.groupId];
-                });
-                setExpand(!expand);
-                onExpand(!expand);
-              }}
-            />
+            <PlusCircleOutlined className="expandList-template-icon" onClick={onClickExpand} />
           ) : (
-            <MinusCircleOutlined
-              className="expandList-template-icon"
-              onClick={() => {
-                props.record["expand"] = !expand;
-                setExpandKeys((preExpandKeys) => {
-                  if (preExpandKeys?.includes(props?.record?.groupId)) {
-                    return preExpandKeys?.filter((el) => el != props?.record?.groupId);
-                  }
-                  return [...preExpandKeys, props?.record?.groupId];
-                });
-                setExpand(!expand);
-                onExpand(!expand);
-              }}
-            />
+            <MinusCircleOutlined className="expandList-template-icon" onClick={onClickExpand} />
           )}
         </>
       )}
@@ -85,7 +59,7 @@ export const ExpandListTemplate = (props) => {
         className={`expandList-template-name ${record?.spiltTag == 0 ? "expandList-template-indent" : ""}`}
         style={record?.spiltTag == 1 && !record?.children ? { marginLeft: "22px" } : {}}
       >
-        {Slots?.[item?.columnId] ? colRender("", record) : record[item?.columnId]}
+        {Slots?.[columnId] ? colRender(record) : record[columnId]}
       </div>
     </div>
   );

package/src/components/CellEditTable/Template/GetBaseTemplate.tsx

@@ -0,0 +1,33 @@
+import { useMemo } from "react";
+import { getVal } from "../../../common/utils";
+
+export const GetBaseTemplate = (props) => {
+  const { pattern, cell, componentProps, Com } = props;
+
+  const echoValue = useMemo(() => {
+    if (!cell?.getField) {
+      return;
+    }
+    return getVal(
+      { ...(cell?.getField && cell?.getField()), enum: cell?.getField()?.enum || cell?.values },
+      { [cell?.getField && cell?.getField().name]: cell.text },
+    );
+  }, [cell]);
+  return (
+    <div className="base-hoc">
+      {pattern == "readPretty" ? (
+        <div>{echoValue}</div>
+      ) : (
+        <Com
+          className="rg-input"
+          ref={(input) => {
+            if (input) {
+              input.focus();
+            }
+          }}
+          {...componentProps}
+        />
+      )}
+    </div>
+  );
+};

package/src/components/CellEditTable/Template/widthWrap.tsx

@@ -26,6 +26,7 @@ export interface BaseCell extends Cell {
   isDisabled?: boolean;
   isOpen?: boolean;
   inputValue?: string;
+  commit?: boolean;
 }
 interface DIProps {
   onCellChanged: (...args: any[]) => void;
@@ -51,7 +52,13 @@ export const WidthWrap = (opt: any, edit = false) => {
           selectedValue = undefined;
         }
       }
+      let commit: boolean;
 
+      try {
+        commit = getCellProperty(uncertainCell, "commit", "boolean");
+      } catch {
+        commit = false;
+      }
       let values: any;
       try {
         values = getCellProperty(uncertainCell, "values", "object");
@@ -77,7 +84,7 @@ export const WidthWrap = (opt: any, edit = false) => {
 
       const text = selectedValue || "";
 
-      return { ...uncertainCell, selectedValue, text, value, values, isDisabled, inputValue };
+      return { ...uncertainCell, selectedValue, text, value, values, isDisabled, inputValue, commit };
     }
 
     update(cell: Compatible<BaseCell>, cellToMerge: UncertainCompatible<BaseCell>): Compatible<BaseCell> {
@@ -89,6 +96,7 @@ export const WidthWrap = (opt: any, edit = false) => {
         selectedValue: selectedValueFromText,
         isOpen: cellToMerge?.isOpen,
         inputValue: cellToMerge.inputValue,
+        commit: cellToMerge?.commit,
       });
     }
 
@@ -223,18 +231,19 @@ export const WidthWrap = (opt: any, edit = false) => {
                   input?.focus();
                 }
               }}
-              open={isOpen}
+              // open={isOpen}
               style={{ width: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}
               value={cell[_value]}
               options={cell.values}
               onChange={(e) => {
-                setIsOpen(false);
-                if (cell?.type.includes("DatePicker")) {
-                  onCellChanged({ ...cell, inputValue: e?.target?.value || e });
-                  return;
-                }
+                cell["commit"] = false;
                 onCellChanged({ ...cell, selectedValue: e?.target?.value || e });
               }}
+              onBlur={(e) => {
+                cell["commit"] = true;
+                setIsOpen(false);
+                onCellChanged({ ...cell, selectedValue: cell?.text });
+              }}
               {...((cell?.getField && cell?.getField()["x-component-props"]) || {})}
             ></WrapComponent>
           </div>

package/src/components/CellEditTable/common/WidthWrapHoc.tsx

@@ -0,0 +1,215 @@
+import { useEffect, useMemo, useState } from "react";
+
+import {
+  Cell,
+  CellTemplate,
+  Compatible,
+  getCellProperty,
+  getCharFromKey,
+  isAlphaNumericKey,
+  isNavigationKey,
+  keyCodes,
+  Uncertain,
+  UncertainCompatible,
+} from "@silevis/reactgrid";
+import { getVal } from "@hzab/list-render/src/common/utils";
+import { InfoCircleOutlined } from "@ant-design/icons";
+import { Popover } from "antd";
+
+export type OptionType = {
+  label: string;
+  value: string | number;
+  isDisabled?: boolean;
+};
+
+export interface BaseCell extends Cell {
+  selectedValue?: string;
+  value: string | number;
+  values: OptionType[];
+  isDisabled?: boolean;
+  commit?: string;
+}
+interface DIProps {
+  onCellChanged: (...args: any[]) => void;
+  cell: Record<string, any>;
+  isInEditMode?: boolean;
+}
+
+export const WidthWrapHoc = (WrapComponent: any) => {
+  class createBaseCellTemplate implements CellTemplate<BaseCell> {
+    getCompatibleCell(uncertainCell: Uncertain<BaseCell>): Compatible<BaseCell> {
+      let selectedValue: string | undefined;
+      try {
+        selectedValue = getCellProperty(uncertainCell, "selectedValue", "number");
+      } catch {
+        selectedValue = undefined;
+      }
+      if (!selectedValue) {
+        try {
+          selectedValue = getCellProperty(uncertainCell, "selectedValue", "string");
+        } catch {
+          selectedValue = undefined;
+        }
+      }
+      let commit: string;
+
+      try {
+        commit = getCellProperty(uncertainCell, "commit", "string");
+      } catch {
+        commit = "submit";
+      }
+
+      let values: any;
+      try {
+        values = getCellProperty(uncertainCell, "values", "object");
+      } catch {
+        values = [];
+      }
+      const value = selectedValue ? parseFloat(selectedValue) : NaN;
+      let isDisabled = true;
+      try {
+        isDisabled = getCellProperty(uncertainCell, "isDisabled", "boolean");
+      } catch {
+        isDisabled = false;
+      }
+      const text = selectedValue || "";
+      return { ...uncertainCell, selectedValue, text, value, values, isDisabled, commit };
+    }
+
+    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,
+        commit: cellToMerge?.commit,
+      });
+    }
+
+    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 [isOpen, setIsOpen] = useState<boolean>(false);
+      const datatypeId = cell?.columnId + cell?.rowId;
+      const [comValue, setComValue] = useState(cell?.text);
+      useEffect(() => {
+        // 处理下拉选项弹层失焦逻辑
+        function onClick() {
+          if ((window as any).gridEditId != datatypeId) {
+            setIsOpen(false);
+          }
+        }
+        document.addEventListener("click", onClick);
+        return () => {
+          document.removeEventListener("click", onClick);
+        };
+      }, []);
+      const echoValue = useMemo(() => {
+        if (!cell?.getField) {
+          return;
+        }
+        return getVal(
+          { ...cell?.getField(), enum: cell?.getField()?.enum || cell?.values },
+          { [cell?.getField().name]: cell.text },
+        );
+      }, [cell]);
+
+      const isValidator = useMemo(() => {
+        let flag = false;
+        let isVerify = false;
+        for (let it of cell?.validatorList || []) {
+          if (it?.pattern?.test(cell.text)) {
+            flag = true;
+          }
+          break;
+        }
+        isVerify = !flag && cell?.validatorList?.length > 0;
+
+        return isVerify;
+      }, [cell?.validatorList, cell.text]);
+
+      return (
+        <div
+          className="base-hoc"
+          onDoubleClick={(e) => {
+            if (cell?.nonEditable) {
+              return;
+            }
+            (window as any).preCell = cell;
+            setIsOpen(true);
+          }}
+        >
+          <WrapComponent
+            componentProps={{
+              style: { width: "100%", display: "flex", alignItems: "center" },
+              value: comValue,
+              options: cell.values,
+              onChange: (e) => {
+                cell["commit"] = "change";
+                const targetValue = e?.target?.value ?? e;
+                setComValue(targetValue);
+                onCellChanged(
+                  this.getCompatibleCell({
+                    ...cell,
+                    text: targetValue,
+                    selectedValue: targetValue,
+                  }),
+                  true,
+                );
+              },
+              onBlur: (e) => {
+                cell["commit"] = "submit";
+                if (isValidator) {
+                  cell["commit"] = "verify";
+                }
+                const targetValue = cell?.text;
+                onCellChanged(
+                  this.getCompatibleCell({
+                    ...cell,
+                    text: targetValue,
+                    selectedValue: targetValue,
+                  }),
+                  true,
+                );
+                setIsOpen(false);
+              },
+
+              onPointerDown: (e) => {
+                e.stopPropagation();
+              },
+              onKeyDown: (e) => {
+                if (isAlphaNumericKey(e.keyCode) || isNavigationKey(e.keyCode)) e.stopPropagation();
+              },
+              ...((cell?.getField && cell?.getField()["x-component-props"]) || {}),
+            }}
+            pattern={isOpen ? "" : "readPretty"}
+            cell={cell}
+          ></WrapComponent>
+          {isValidator && (
+            <Popover content="该字段不合法">
+              <InfoCircleOutlined style={{ cursor: "pointer" }} />
+            </Popover>
+          )}
+        </div>
+      );
+    }
+  }
+
+  return new createBaseCellTemplate();
+};

package/src/components/CellEditTable/common/childAntdComponent.ts

@@ -0,0 +1,14 @@
+import { DatePicker, Input, TimePicker } from "antd";
+
+export const childAntdComponent = {
+  "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,
+}