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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hzab/list-render",
-  "version": "1.10.21-alpha.6",
+  "version": "1.10.21-alpha.8",
   "description": "",
   "main": "src",
   "scripts": {
@@ -44,7 +44,9 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.8.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "@hzab/edit-table": "^0.0.1",
+    "@silevis/reactgrid": "^4.1.17"
   },
   "peerDependencies": {
     "@formily/core": "2.3.1",
@@ -66,8 +68,6 @@
     "lib": "lib"
   },
   "dependencies": {
-    "@hzab/edit-table": "^0.0.1",
-    "@silevis/reactgrid": "^4.1.17",
     "array-move": "^4.0.0",
     "react-sortable-hoc": "^2.0.0"
   }

package/src/table-render/index.jsx

@@ -103,37 +103,37 @@ const TableRender = forwardRef(function (props, tableRef) {
   const handleChildColumns = (childColumns) => {
     const fieldSchemas = formilyRef.current?.fields;
     const { Slots = {} } = props;
-    return childColumns?.map((item, colIndex) => {
-      if (!(item.inTable !== false)) return
+    return childColumns?.map((field, colIndex) => {
+      if (!(field.inTable !== false)) return
 
-      const { name, title } = item;
-      const comName = item["x-component"];
+      const { name, title } = field;
+      const comName = field["x-component"];
       let _colConf = {};
-      if (props.config?.colConf && props.config?.colConf[item?.name]) {
-        _colConf = props.config?.colConf[item?.name];
+      if (props.config?.colConf && props.config?.colConf[field?.name]) {
+        _colConf = props.config?.colConf[field?.name];
       }
 
       let colRender = undefined;
-      if (Slots && Slots[item?.name]) {
+      if (Slots && Slots[field?.name]) {
         colRender = function (text, record, index) {
-          const Slot = Slots[item?.name];
+          const Slot = Slots[field?.name];
           const slotProps = {
             text,
             record,
             index,
-            field: { ...item, ...fieldSchemas?.[item?.name] },
-            fieldSchema: fieldSchemas?.[item?.name],
+            field: { ...field, ...fieldSchemas?.[field?.name] },
+            fieldSchema: fieldSchemas?.[field?.name],
           };
           return <Slot {...slotProps} />;
         };
       } else {
         colRender = function (text, record, index, ...args) {
           const { width, ellipsis, emptyValue, showTags, showPrefixNode, showMode, enumRenderProps } = _colConf || {};
-          const schemaDefaultValue = fieldSchemas[item?.name]?.componentProps?.emptyValue;
+          const schemaDefaultValue = fieldSchemas[field?.name]?.componentProps?.emptyValue;
           const defaultValue = emptyValue ?? schemaDefaultValue ?? tableEmptyValue ?? "";
 
-          let val = getVal({ ...item, ...fieldSchemas[item?.name] }, record, {
-            fieldSchema: fieldSchemas?.[item?.name],
+          let val = getVal({ ...field, ...fieldSchemas[field?.name] }, record, {
+            fieldSchema: fieldSchemas?.[field?.name],
           });
 
           if (val === "" || val === undefined || val === null) {
@@ -165,8 +165,8 @@ const TableRender = forwardRef(function (props, tableRef) {
             return (
               <EnumRender
                 showMode={_showMode}
-                value={_.get(record, item?.name)}
-                field={{ ...field, ...fieldSchemas?.[item?.name] }}
+                value={_.get(record, field?.name)}
+                field={{ ...field, ...fieldSchemas?.[field?.name] }}
                 {...enumRenderProps}
               />
             );
@@ -181,7 +181,7 @@ const TableRender = forwardRef(function (props, tableRef) {
       if (_colConf?.title) {
         _title = isFunction(_colConf?.title) ? _colConf?.title() : _colConf?.title;
       }
-      const decoratorProps = item["x-decorator-props"] || {};
+      const decoratorProps = field["x-decorator-props"] || {};
       if (decoratorProps.tooltip) {
         _title = (
           <span className="col-title-tooltip-wrap inline-block-max-w">
@@ -192,33 +192,31 @@ const TableRender = forwardRef(function (props, tableRef) {
           </span>
         );
       }
-      const childSelectList = fieldSchemas?.[item?.name]?.dataSource?.map((el) => ({
+      const childSelectList = fieldSchemas?.[field?.name]?.dataSource?.map((el) => ({
         ...el,
-        label: el?.[item?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
-        value: el?.[item?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
+        label: el?.[field?.["x-component-props"]?.["fieldNames"]?.["label"]] || el?.label,
+        value: el?.[field?.["x-component-props"]?.["fieldNames"]?.["value"]] || el?.value,
       }))
       return {
-        getField: () => item,
+        getField: () => field,
         editable: true,
         ..._colConf,
         onCell: (record, rowIndex, ci) =>
-          _colConf?.onCell?.({ ...record, _field: { ...item, ...(fieldSchemas?.[item?.name] || {}) } }, rowIndex, ci) || {},
+          _colConf?.onCell?.({ ...record, _field: { ...field, ...(fieldSchemas?.[field?.name] || {}) } }, rowIndex, ci) || {},
         // 函数式传入，解决 title ReactNode 传入报错问题（table 组件内部对 columns 进行 lodash.deepClone 导致 ReactNode 变成对象无法正常渲染） Uncaught TypeError: this.queryFeedbacks is not a function
         title: () => _title,
-        key: item?.name,
-        dataIndex: item?.name,
-        type: item["x-validator"] == "number" ? "Number" : comName,
-        validatorList: item["x-validator"] || [],
+        key: field?.name,
+        dataIndex: field?.name,
+        type: field["x-validator"] == "number" ? "Number" : comName,
+        validatorList: field["x-validator"] || [],
         nonEditable: editMode != "cell",
-        values: item?.enum || childSelectList || [],
-        cellProps: item.cellProps,
-        children: handleChildColumns(item?.children),
+        values: field?.enum || childSelectList || [],
+        cellProps: field.cellProps,
+        children: handleChildColumns(field?.children),
         render: getColRender(colRender),
       }
 
-    })
-
-
+    })?.filter((el) => (el))
   }
   useEffect(() => {
     if (!(props.schema && props.schema.properties)) {
@@ -444,6 +442,7 @@ const TableRender = forwardRef(function (props, tableRef) {
         isCellEditTable ? <CellEditTable
           {...tableProps}
           {...cellEditTableProps}
+          {...props}
           onEditSubmit={props?.onEditSubmit}
           Slots={props?.Slots}
           rowSelection={config?.rowSelection}

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

@@ -1,18 +0,0 @@
-.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

@@ -1,66 +0,0 @@
-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 onExpand = (isExpand) => {
-    setNewDataSource((pre) => {
-      const tempPre = [...pre];
-      const childrenIds = record?.children?.map((el) => el?.[rowKey]);
-      if (isExpand) {
-        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, ...(record?.children || []));
-        }
-        return [...tempPre];
-      }
-
-      return pre?.filter((el) => !childrenIds?.includes(el?.[rowKey]));
-    });
-  };
-  useEffect(() => {
-    if (expandKeys?.includes(record?.[rowKey])) {
-      setExpand(true);
-      onExpand(true);
-    }
-  }, [cell?.record]);
-
-  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">
-      {record?.children && (
-        <>
-          {!expand ? (
-            <PlusCircleOutlined className="expandList-template-icon" onClick={onClickExpand} />
-          ) : (
-            <MinusCircleOutlined className="expandList-template-icon" onClick={onClickExpand} />
-          )}
-        </>
-      )}
-
-      <div
-        className={`expandList-template-name ${record?.spiltTag == 0 ? "expandList-template-indent" : ""}`}
-        style={record?.spiltTag == 1 && !record?.children ? { marginLeft: "22px" } : {}}
-      >
-        {Slots?.[columnId] ? colRender(record) : record[columnId]}
-      </div>
-    </div>
-  );
-};

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

@@ -1,33 +0,0 @@
-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/NumberCellTemplate.tsx

@@ -1,168 +0,0 @@
-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/TextCellTemplate.tsx

@@ -1,123 +0,0 @@
-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();