@hzab/edit-table 0.0.1

package/CHANGELOG.md

@@ -0,0 +1,3 @@
+# @hzab/edit-table@0.0.1
+
+组件初始化

package/README.md

@@ -0,0 +1,76 @@
+# @hzab/edit-table
+
+组件模板
+
+- node@16.16.0
+
+- 注意：首次克隆先执行 npm run prepare 命令
+
+# 组件
+
+## 示例
+
+```jsx
+import Demo from "@hzab/edit-table";
+
+<Demo />;
+```
+
+## API
+
+### InfoPanel Attributes
+
+| 参数   | 类型   | 必填 | 默认值 | 说明              |
+| ------ | ------ | ---- | ------ | ----------------- |
+| schema | Object | 是   | -      | 数据信息的 schema |
+
+# 组件开发流程
+
+- 在 config/webpack.config.js 中按需修改 library 配置的文件名
+- 在 config/webpack.config.js 中按需修改 alias 配置的包名，便于本地调试
+- 在 tsconfig.json 中按需修改 paths 配置的包名，解决 ts 报错问题
+- npm run dev
+
+## 文件目录
+
+- example 本地开发测试代码
+- src 组件源码
+
+## 命令
+
+- Mac 执行该命令，设置 pre-commit 为可执行文件
+  - npm run mac-chmod
+  - chmod +x .husky && chmod +x .husky/pre-commit
+
+- 生成文档：npm run docs
+- 本地运行：npm run dev
+
+## 发布
+
+- npm 源和云效源都需要发布
+
+- 命令：npm publish --access public
+- 发布目录：
+  - src
+
+### nrm
+
+- 安装
+  npm install -g nrm
+- 增加源
+  nrm add aliyun https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+- 切换源
+  nrm use aliyun
+  nrm use npm
+- 登录（账号密码在 https://packages.aliyun.com/npm/npm-registry/guide 查看）
+  npm login --registry=https://packages.aliyun.com/62046985b3ead41b374a17f7/npm/npm-registry/
+
+## 配置
+
+### 配置文件
+
+- 本地配置文件：config/config.js
+
+### webpack 配置文件
+
+- config/webpack.config.js

package/package.json

@@ -0,0 +1,59 @@
+{
+  "name": "@hzab/edit-table",
+  "version": "0.0.1",
+  "description": "",
+  "main": "src",
+  "scripts": {
+    "dev": "webpack serve -c ./config/webpack.config.js --env local",
+    "build": "webpack -c ./config/webpack.config.js --env production",
+    "version:alpha": "npm version prerelease --preid=alpha",
+    "publish:alpha": "npm publish --tag alpha",
+    "version:beta": "npm version prerelease --preid=beta",
+    "publish:beta": "npm publish --tag beta",
+    "version:patch": "npm version patch",
+    "version:minior": "npm version minor",
+    "version:major": "npm version major",
+    "publish:stable": "npm publish --access public",
+    "prepare": "husky install",
+    "mac-chmod": "chmod +x .husky && chmod +x .husky/pre-commit",
+    "docs": "typedoc"
+  },
+  "files": [
+    "src",
+    "CHANGELOG.md"
+  ],
+  "keywords": [],
+  "author": "CaiYansong",
+  "license": "ISC",
+  "devDependencies": {
+    "@hzab/permissions": "1.0.0",
+    "@hzab/webpack-config": "1.1.4",
+    "@types/react": "17.0.62",
+    "@types/react-dom": "17.0.20",
+    "antd": "4.24.16",
+    "axios": "1.13.6",
+    "eslint": "8.30.0",
+    "less": "4.1.3",
+    "mobx": "6.7.0",
+    "mobx-react": "7.6.0",
+    "react": "17.0.2",
+    "react-dom": "17.0.2",
+    "react-router-dom": "6.14.1",
+    "typedoc": "0.24.8",
+    "typescript": "4.9.4",
+    "webpack": "5.75.0"
+  },
+  "directories": {
+    "src": "src"
+  },
+  "lint-staged": {
+    "**.{js,jsx,ts,tsx,css,scss,less,json,html}": [
+      "prettier --write"
+    ]
+  },
+  "dependencies": {
+    "@hzab/form-render": "^1.7.17",
+    "@hzab/list-render": "^1.11.0",
+    "@silevis/reactgrid": "^4.1.17"
+  }
+}

package/src/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: 32px;
+  }
+}

package/src/Template/ExpandListTemplate/index.tsx

@@ -0,0 +1,65 @@
+import { MinusCircleOutlined, MinusSquareOutlined, 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 style={{ width: 14 }}></div>
+      )}
+      <div className={`expandList-template-name`} style={{ marginLeft: record?.level * 8 }}>
+        {Slots?.[columnId] ? colRender(record) : record[columnId]}
+      </div>
+    </div>
+  );
+};

package/src/Template/GetBaseTemplate.tsx

@@ -0,0 +1,32 @@
+import { useMemo } from "react";
+import { getVal } from "@hzab/list-render/src/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/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/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();