@hzab/list-render 1.10.21-alpha.1 → 1.10.21-alpha.3

package/CHANGELOG.md

@@ -1,3 +1,7 @@
+# @hzab/list-render@1.10.21
+
+feat: 增加行内编辑表格时，canEditCallback的回调，从外部控制cell是否能编辑，修复原有的hasEdit逻辑
+
 # @hzab/list-render@1.10.20
 
 fix: 修复 PaginationRender 的 全部样式

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.21-alpha.1",
+  "version": "1.10.21-alpha.3",
   "description": "",
   "main": "src",
   "scripts": {

package/src/common/utils.js

@@ -95,6 +95,19 @@ export function getDateVal(val, format) {
   return dayjs(val).format(format);
 }
 
+/** 递归生成children数据 */
+
+const handleSchema = (arr) => {
+  arr?.forEach((item) => {
+    if (item?.type == "object" && !item?.["x-component"]) {
+      item.children = Schema.getOrderProperties(item)?.map((it) => it?.schema);
+      if (item.children?.length > 0) {
+        handleSchema(item.children);
+      }
+    }
+  });
+};
+
 export function getFieldList(_schema, fieldList = [], opt = {}, isTableSortXIdex = false) {
   const schema = cloneSchema(_schema?.schema || _schema);
 
@@ -142,7 +155,14 @@ export function getFieldList(_schema, fieldList = [], opt = {}, isTableSortXIdex
       } else {
         fieldList.push(field);
       }
+      if (field?.type == "object" && !field?.["x-component"]) {
+        field.children = Schema.getOrderProperties(field)?.map((it) => it?.schema);
+        if (field.children?.length > 0) {
+          handleSchema(field.children);
+        }
+      }
     });
+
   isTableSortXIdex && fieldList.sort((a, b) => a["x-index"] - b["x-index"]);
   return fieldList;
 }

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

@@ -0,0 +1,18 @@
+.expandList-template {
+  display: flex;
+  align-items: center;
+
+
+
+  .expandList-template-icon {
+    cursor: pointer;
+  }
+
+  .expandList-template-name {
+    margin-left: 8px;
+  }
+
+  .expandList-template-indent {
+    margin-left: 26px;
+  }
+}

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

@@ -0,0 +1,80 @@
+import { MinusSquareOutlined, PlusCircleOutlined } from "@ant-design/icons";
+import { useEffect, useState } from "react";
+import "./index.less";
+export const ExpandListTemplate = (props) => {
+  const [expand, setExpand] = useState<boolean>(false);
+  const { record, item } = props;
+  const { Slots, setExpandKeys, expandKeys }: any = item;
+  const onExpand = (isExpand) => {
+    item?.setNewDataSource((pre) => {
+      if (isExpand) {
+        const findIndex = pre?.findIndex((el) => el?.groupId == props?.record?.groupId);
+        pre.splice(findIndex + 1, 0, ...(props?.record?.children || []));
+        return [...pre];
+      }
+      const childrenIds = props?.record?.children?.map((el) => el?.groupId);
+
+      return pre?.filter((el) => !childrenIds?.includes(el?.groupId));
+    });
+  };
+  useEffect(() => {
+    if (expandKeys?.includes(props?.record?.groupId)) {
+      setExpand(true);
+      onExpand(true);
+    } else {
+      setExpand(false);
+      onExpand(false);
+    }
+
+    // setExpand(props?.record?.expand);
+  }, [props?.record]);
+
+  // console.log(props,"propspropsprops2",Slots[item?.columnId]);
+  const colRender = function (text, record) {
+    const Slot = Slots[item?.columnId];
+    const slotProps = {
+      text,
+      record,
+      // field: { ...field, ...fieldSchemas?.[name] },
+      // fieldSchema: fieldSchemas?.[name],
+    };
+    return <Slot {...slotProps} />;
+  };
+  return (
+    <div className="expandList-template">
+      {props?.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?.groupId != props?.record?.groupId);
+                  }
+                  return [...preExpandKeys, props?.record?.groupId];
+                });
+                setExpand(!expand);
+                onExpand(!expand);
+              }}
+            />
+          ) : (
+            <MinusSquareOutlined
+              className="expandList-template-icon"
+              onClick={() => {
+                props.record["expand"] = !expand;
+                setExpand(!expand);
+                onExpand(!expand);
+              }}
+            />
+          )}
+        </>
+      )}
+
+      <div className={`expandList-template-name ${props?.record?.children ? "" : "expandList-template-indent"}`}>
+        {Slots?.[item?.columnId] ? colRender("", record) : record[item?.columnId]}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,168 @@
+import {
+  Cell,
+  CellTemplate,
+  Compatible,
+  getCellProperty,
+  getCharFromKey,
+  inNumericKey,
+  isAllowedOnNumberTypingKey,
+  isCharAllowedOnNumberInput,
+  isFunctionKey,
+  isNavigationKey,
+  isNumpadNumericKey,
+  keyCodes,
+  Uncertain,
+  UncertainCompatible,
+} from "@silevis/reactgrid";
+import * as React from "react";
+import { parseLocaleNumber } from "./utils";
+
+// NOTE: all modules imported below may be imported from '@silevis/reactgrid'
+
+export interface NumberCell extends Cell {
+  type: "number";
+  value: number;
+  format?: Intl.NumberFormat;
+  validator?: (value: number) => boolean;
+  nanToZero?: boolean;
+  hideZero?: boolean;
+  errorMessage?: string;
+}
+
+export class NumberCellTemplate implements CellTemplate<NumberCell> {
+  private wasEscKeyPressed = false;
+
+  getCompatibleCell(uncertainCell: Uncertain<NumberCell>): Compatible<NumberCell> {
+    let value: number;
+    try {
+      value = getCellProperty(uncertainCell, "value", "number");
+    } catch (error) {
+      value = NaN;
+    }
+    const numberFormat = uncertainCell.format || new Intl.NumberFormat(window.navigator.language);
+    const displayValue = uncertainCell.nanToZero && Number.isNaN(value) ? 0 : value;
+    const text =
+      Number.isNaN(displayValue) || (uncertainCell.hideZero && displayValue === 0)
+        ? ""
+        : numberFormat.format(displayValue);
+    return { ...uncertainCell, value: displayValue, text };
+  }
+
+  handleKeyDown(
+    cell: Compatible<NumberCell>,
+    keyCode: number,
+    ctrl: boolean,
+    shift: boolean,
+    alt: boolean,
+    key: string,
+    capsLock: boolean,
+  ): { cell: Compatible<NumberCell>; enableEditMode: boolean } {
+    if (isNumpadNumericKey(keyCode)) keyCode -= 48;
+    if (isFunctionKey(keyCode)) {
+      if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
+      return { cell, enableEditMode: false };
+    }
+
+    const char = getCharFromKey(key);
+
+    if (!ctrl && isCharAllowedOnNumberInput(char)) {
+      const value = Number(char);
+
+      if (Number.isNaN(value) && isCharAllowedOnNumberInput(char))
+        return { cell: { ...this.getCompatibleCell({ ...cell, value }), text: char }, enableEditMode: true };
+      return { cell: this.getCompatibleCell({ ...cell, value }), enableEditMode: true };
+    }
+
+    return {
+      cell,
+      enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER,
+    };
+  }
+
+  update(cell: Compatible<NumberCell>, cellToMerge: UncertainCompatible<NumberCell>): Compatible<NumberCell> {
+    return this.getCompatibleCell({ ...cell, value: cellToMerge.value });
+  }
+
+  private getTextFromCharCode = (cellText: string): string => {
+    switch (cellText.charCodeAt(0)) {
+      case keyCodes.DASH:
+      case keyCodes.FIREFOX_DASH:
+      case keyCodes.SUBTRACT:
+        return "-";
+      case keyCodes.COMMA:
+        return ",";
+      case keyCodes.PERIOD:
+      case keyCodes.DECIMAL:
+        return ".";
+      default:
+        return cellText;
+    }
+  };
+
+  getClassName(cell: Compatible<NumberCell>, isInEditMode: boolean): string {
+    const isValid = cell.validator?.(cell.value) ?? true;
+    const className = cell.className || "";
+    return `${!isValid ? "rg-invalid" : ""} ${className}`;
+  }
+
+  render(
+    cell: Compatible<NumberCell>,
+    isInEditMode: boolean,
+    onCellChanged: (cell: Compatible<NumberCell>, commit: boolean) => void,
+  ): React.ReactNode {
+    if (!isInEditMode) {
+      const isValid = cell.validator?.(cell.value) ?? true;
+      const textToDisplay = !isValid && cell.errorMessage ? cell.errorMessage : cell.text;
+      return textToDisplay;
+    }
+
+    const locale = cell.format ? cell.format.resolvedOptions().locale : window.navigator.languages[0];
+    const format = new Intl.NumberFormat(locale, { useGrouping: false, maximumFractionDigits: 20 });
+
+    return (
+      <input
+        className="rg-input"
+        inputMode="decimal"
+        ref={(input) => {
+          if (input) {
+            input.focus();
+            input.setSelectionRange(input.value.length, input.value.length);
+          }
+        }}
+        defaultValue={Number.isNaN(cell.value) ? this.getTextFromCharCode(cell.text) : format.format(cell.value)}
+        onChange={(e) =>
+          onCellChanged(this.getCompatibleCell({ ...cell, value: parseLocaleNumber(e.currentTarget.value) }), false)
+        }
+        onBlur={(e) => {
+          onCellChanged(
+            this.getCompatibleCell({ ...cell, value: parseLocaleNumber(e.currentTarget.value) }),
+            !this.wasEscKeyPressed,
+          );
+          this.wasEscKeyPressed = false;
+        }}
+        onKeyDown={(e) => {
+          if (
+            inNumericKey(e.keyCode) ||
+            isNavigationKey(e.keyCode) ||
+            isAllowedOnNumberTypingKey(e.keyCode) ||
+            ((e.ctrlKey || e.metaKey) && e.keyCode === keyCodes.KEY_A)
+          )
+            e.stopPropagation();
+          if (
+            !inNumericKey(e.keyCode) &&
+            !isNavigationKey(e.keyCode) &&
+            !isCharAllowedOnNumberInput(getCharFromKey(e.key))
+          )
+            e.preventDefault();
+          if (e.keyCode === keyCodes.ESCAPE) this.wasEscKeyPressed = true;
+        }}
+        onCopy={(e) => e.stopPropagation()}
+        onCut={(e) => e.stopPropagation()}
+        onPaste={(e) => e.stopPropagation()}
+        onPointerDown={(e) => e.stopPropagation()}
+      />
+    );
+  }
+}
+
+export const NumberTemplate = new NumberCellTemplate();

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

@@ -0,0 +1,202 @@
+// import * as React from "react";
+
+// import {
+//   Cell,
+//   CellTemplate,
+//   Compatible,
+//   getCellProperty,
+//   getCharFromKey,
+//   isAlphaNumericKey,
+//   keyCodes,
+//   Uncertain,
+//   UncertainCompatible,
+// } from "@silevis/reactgrid";
+// import { getVal } from "../../../common/utils";
+
+// import { Select } from "antd";
+// import { WidthWrap } from "./widthWrap";
+
+// export type OptionType = {
+//   label: string;
+//   value: string;
+//   isDisabled?: boolean;
+// };
+
+// export interface SelectCell extends Cell {
+//   type: "Select";
+//   selectedValue?: string;
+//   value: string | number;
+//   values: OptionType[];
+//   isDisabled?: boolean;
+//   isOpen?: boolean;
+//   inputValue?: string;
+// }
+
+// export class createSelectCellTemplate implements CellTemplate<SelectCell> {
+//   getCompatibleCell(uncertainCell: Uncertain<SelectCell>): Compatible<SelectCell> {
+//     let selectedValue: string | undefined;
+//     try {
+//       selectedValue = getCellProperty(uncertainCell, "selectedValue", "number");
+//     } catch {
+//       selectedValue = undefined;
+//     }
+//     const values = getCellProperty(uncertainCell, "values", "object");
+//     const value = selectedValue ? parseFloat(selectedValue) : NaN;
+
+//     let isDisabled = true;
+//     try {
+//       isDisabled = getCellProperty(uncertainCell, "isDisabled", "boolean");
+//     } catch {
+//       isDisabled = false;
+//     }
+
+//     let inputValue: string | undefined;
+//     try {
+//       inputValue = getCellProperty(uncertainCell, "inputValue", "string");
+//     } catch {
+//       inputValue = undefined;
+//     }
+
+//     let isOpen: boolean;
+//     try {
+//       isOpen = getCellProperty(uncertainCell, "isOpen", "boolean");
+//     } catch {
+//       isOpen = false;
+//     }
+
+//     const text = selectedValue || "";
+
+//     return { ...uncertainCell, selectedValue, text, value, isOpen, values, isDisabled, inputValue };
+//   }
+
+//   update(cell: Compatible<SelectCell>, cellToMerge: UncertainCompatible<SelectCell>): Compatible<SelectCell> {
+//     const selectedValueFromText = cell.values.some((val: any) => val.value === cellToMerge.text)
+//       ? cellToMerge.text
+//       : undefined;
+//     return this.getCompatibleCell({
+//       ...cell,
+//       selectedValue: selectedValueFromText,
+//       isOpen: cellToMerge?.isOpen,
+//       inputValue: cellToMerge.inputValue,
+//     });
+//   }
+
+//   getClassName(cell: Compatible<SelectCell>, isInEditMode: boolean): string {
+//     const isOpen = cell.isOpen ? "open" : "closed";
+//     return `${cell.className ? cell.className : ""}${isOpen}`;
+//   }
+
+//   handleKeyDown(
+//     cell: Compatible<SelectCell>,
+//     keyCode: number,
+//     ctrl: boolean,
+//     shift: boolean,
+//     alt: boolean,
+//     key: string,
+//     capsLock: boolean,
+//   ): { cell: Compatible<SelectCell>; enableEditMode: boolean } {
+//     if ((keyCode === keyCodes.SPACE || keyCode === keyCodes.ENTER) && !shift) {
+//       return {
+//         cell: this.getCompatibleCell({
+//           ...cell,
+//           isOpen: !cell.isOpen,
+//         }),
+//         enableEditMode: false,
+//       };
+//     }
+
+//     const char = getCharFromKey(key, shift, capsLock);
+
+//     if (!ctrl && !alt && isAlphaNumericKey(keyCode) && !(shift && keyCode === keyCodes.SPACE))
+//       return {
+//         cell: this.getCompatibleCell({
+//           ...cell,
+//           inputValue: char,
+//           isOpen: !cell.isOpen,
+//         }),
+//         enableEditMode: false,
+//       };
+
+//     return { cell, enableEditMode: false };
+//   }
+
+//   handleCompositionEnd(
+//     cell: Compatible<SelectCell>,
+//     eventData: any,
+//   ): { cell: Compatible<SelectCell>; enableEditMode: boolean } {
+//     return {
+//       cell: {
+//         ...cell,
+//         inputValue: eventData,
+//         isOpen: !cell.isOpen,
+//       },
+//       enableEditMode: false,
+//     };
+//   }
+
+//   render(
+//     cell: Compatible<SelectCell>,
+//     isInEditMode: boolean,
+//     onCellChanged: (cell: Compatible<SelectCell>, commit: boolean) => void,
+//   ): React.ReactNode {
+//     return (
+//       <SelectInput
+//         onCellChanged={(cell) => onCellChanged(this.getCompatibleCell(cell), true)}
+//         cell={cell}
+//         isInEditMode={isInEditMode}
+//       />
+//     );
+//   }
+// }
+
+// interface DIProps {
+//   onCellChanged: (...args: any[]) => void;
+//   cell: Record<string, any>;
+//   isInEditMode?: boolean;
+// }
+
+// const SelectInput: React.FC<DIProps> = ({ onCellChanged, cell, isInEditMode }) => {
+//   const [isOpen, setIsOpen] = React.useState<boolean>(false);
+//   const datatypeId = cell?.columnId + cell?.rowId;
+//   React.useEffect(() => {
+//     // 处理下拉选项弹层失焦逻辑
+//     function onClick() {
+//       if (window.gridEditId != datatypeId) {
+//         setIsOpen(false);
+//       }
+//     }
+//     document.addEventListener("click", onClick);
+//     return () => {
+//       document.removeEventListener("click", onClick);
+//     };
+//   }, []);
+
+//   return (
+//     <div
+//       style={{ width: "100%", height: "100%" }}
+//       onDoubleClick={(e) => {
+//         setIsOpen(true);
+//       }}
+//     >
+//       {isOpen ? (
+//         <div onPointerDown={(e) => e.stopPropagation()}>
+//           <Select
+//             open={isOpen}
+//             style={{ width: "100%" }}
+//             value={cell?.selectedValue}
+//             options={cell.values}
+//             onChange={(e) => {
+//               onCellChanged({ ...cell, selectedValue: e });
+//             }}
+//           ></Select>
+//         </div>
+//       ) : (
+//         <div style={{ height: "100%" }}>
+//           {getVal(cell?.getField(), { [cell?.getField().name]: cell?.selectedValue })}
+//         </div>
+//       )}
+//     </div>
+//   );
+// };
+
+// export const SelectTemplate = WidthWrap(Select);

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

@@ -0,0 +1,123 @@
+import {
+  Cell,
+  CellTemplate,
+  Compatible,
+  getCellProperty,
+  getCharFromKey,
+  isAlphaNumericKey,
+  isFunctionKey,
+  keyCodes,
+  Uncertain,
+  UncertainCompatible,
+} from "@silevis/reactgrid";
+import * as React from "react";
+
+export interface TextCell extends Cell {
+  type: "Input";
+  text: string;
+  placeholder?: string;
+  validator?: (text: string) => boolean;
+  renderer?: (text: string) => React.ReactNode;
+  errorMessage?: string;
+}
+
+export class TextCellTemplate implements CellTemplate<TextCell> {
+  private wasEscKeyPressed = false;
+
+  getCompatibleCell(uncertainCell: Uncertain<TextCell>): Compatible<TextCell> {
+    const text = getCellProperty(uncertainCell, "text", "string");
+    let placeholder: string | undefined;
+    try {
+      placeholder = getCellProperty(uncertainCell, "placeholder", "string");
+    } catch {
+      placeholder = "";
+    }
+    const value = parseFloat(text); // TODO more advanced parsing for all text based cells
+    return { ...uncertainCell, text, value, placeholder };
+  }
+
+  update(cell: Compatible<TextCell>, cellToMerge: UncertainCompatible<TextCell>): Compatible<TextCell> {
+    return this.getCompatibleCell({ ...cell, text: cellToMerge.text, placeholder: cellToMerge.placeholder });
+  }
+
+  handleKeyDown(
+    cell: Compatible<TextCell>,
+    keyCode: number,
+    ctrl: boolean,
+    shift: boolean,
+    alt: boolean,
+    key: string,
+    capsLock: boolean,
+  ): { cell: Compatible<TextCell>; enableEditMode: boolean } {
+    if (isFunctionKey(keyCode)) {
+      if (keyCode === keyCodes.F2) return { cell, enableEditMode: true };
+      return { cell, enableEditMode: false };
+    }
+
+    const char = getCharFromKey(key, shift, capsLock);
+
+    if (!ctrl && !alt && isAlphaNumericKey(keyCode) && !(shift && keyCode === keyCodes.SPACE))
+      return { cell: this.getCompatibleCell({ ...cell, text: char }), enableEditMode: true };
+    return {
+      cell,
+      enableEditMode: keyCode === keyCodes.POINTER || keyCode === keyCodes.ENTER,
+    };
+  }
+
+  handleCompositionEnd(
+    cell: Compatible<TextCell>,
+    eventData: any,
+  ): { cell: Compatible<TextCell>; enableEditMode: boolean } {
+    return { cell: { ...cell, text: eventData }, enableEditMode: true };
+  }
+
+  getClassName(cell: Compatible<TextCell>, isInEditMode: boolean): string {
+    const isValid = cell.validator ? cell.validator(cell.text) : true;
+    const className = cell.className ? cell.className : "";
+    return `${isValid ? "valid" : "rg-invalid"} ${
+      cell.placeholder && cell.text === "" ? "placeholder" : ""
+    } ${className}`;
+  }
+
+  render(
+    cell: Compatible<TextCell>,
+    isInEditMode: boolean,
+    onCellChanged: (cell: Compatible<TextCell>, commit: boolean) => void,
+  ): React.ReactNode {
+    if (!isInEditMode) {
+      const isValid = cell.validator ? cell.validator(cell.text) : true;
+      const cellText = cell.text || cell.placeholder || "";
+      const textToDisplay = !isValid && cell.errorMessage ? cell.errorMessage : cellText;
+      return cell.renderer ? cell.renderer(textToDisplay) : textToDisplay;
+    }
+
+    return (
+      <input
+        className="rg-input"
+        ref={(input) => {
+          if (input) {
+            input.focus();
+            // input.setSelectionRange(input.value.length, input.value.length);
+          }
+        }}
+        defaultValue={cell.text}
+        onChange={(e) => onCellChanged(this.getCompatibleCell({ ...cell, text: e.currentTarget.value }), false)}
+        onBlur={(e) => {
+          onCellChanged(this.getCompatibleCell({ ...cell, text: e.currentTarget.value }), !this.wasEscKeyPressed);
+          this.wasEscKeyPressed = false;
+        }}
+        onCopy={(e) => e.stopPropagation()}
+        onCut={(e) => e.stopPropagation()}
+        onPaste={(e) => e.stopPropagation()}
+        onPointerDown={(e) => e.stopPropagation()}
+        placeholder={cell.placeholder}
+        onKeyDown={(e) => {
+          // if (isAlphaNumericKey(e.keyCode) || isNavigationKey(e.keyCode)) e.stopPropagation();
+          // if (e.keyCode === keyCodes.ESCAPE) this.wasEscKeyPressed = true;
+        }}
+      />
+    );
+  }
+}
+
+export const TextTemplate = new TextCellTemplate();