@lemon-fe/components 0.0.0

package/es/EditableTable/Table.js

@@ -0,0 +1,363 @@
+var _excluded = ["value", "onChange", "editable", "rowKey", "columns"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+import React, { cloneElement, createContext, useContext, useEffect, useMemo, useState, memo, isValidElement, forwardRef, useImperativeHandle } from 'react';
+import { get, isEqual } from 'lodash';
+import BaseTable from '../BaseTable';
+import { FormStore } from './util';
+import { PREFIX_CLS } from '../constants';
+import { randomStr } from '../BaseTable/utils';
+import EditableCell from './EditableCell';
+var Context = /*#__PURE__*/createContext(null);
+
+var getColKey = function getColKey(name) {
+  return typeof name === 'string' || typeof name === 'number' ? name : name.join('-');
+};
+
+function Cell(props) {
+  var _children;
+
+  var name = props.name,
+      children = props.children,
+      index = props.index,
+      rowKey = props.rowKey;
+  var colKey = getColKey(name);
+  var store = useContext(Context);
+
+  var _useState = useState(store.getData(index)),
+      _useState2 = _slicedToArray(_useState, 2),
+      value = _useState2[0],
+      setValue = _useState2[1];
+
+  var _useState3 = useState(store.getError(rowKey, colKey)),
+      _useState4 = _slicedToArray(_useState3, 2),
+      errors = _useState4[0],
+      setErrors = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      focused = _useState6[0],
+      setFocused = _useState6[1];
+
+  useEffect(function () {
+    var listener = store.listen(rowKey, colKey, function (_ref) {
+      var record = _ref.record,
+          focusedType = _ref.focused,
+          errMessages = _ref.errors;
+
+      if (record !== undefined) {
+        setValue(record);
+      }
+
+      if (focusedType !== undefined) {
+        setFocused(focusedType);
+      }
+
+      if (errMessages !== undefined) {
+        setErrors(errMessages);
+      }
+    });
+    return listener;
+  }, []);
+  var cellValue = get(value, name);
+
+  if (children === undefined) {
+    return cellValue !== null && cellValue !== void 0 ? cellValue : null;
+  }
+
+  return (_children = children(cellValue, value, index, {
+    focused: focused,
+    onFocus: function onFocus() {
+      store.focus(rowKey, colKey);
+    },
+    errors: errors || undefined,
+    onChange: function onChange(val) {
+      store.setData(index, val);
+    }
+  })) !== null && _children !== void 0 ? _children : null;
+}
+
+var MemoTable = /*#__PURE__*/memo(BaseTable);
+
+function EditableTable(props, ref) {
+  var value = props.value,
+      onChange = props.onChange,
+      editable = props.editable,
+      rowKey = props.rowKey,
+      columns = props.columns,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var getRowKey = function getRowKey(record, index) {
+    if (typeof rowKey === 'function') {
+      return rowKey(record, index);
+    }
+
+    if (rowKey !== undefined) {
+      return get(record, rowKey);
+    }
+
+    return get(record, 'key');
+  };
+
+  var store = useMemo(function () {
+    return new FormStore([], []);
+  }, []);
+
+  var _useState7 = useState([]),
+      _useState8 = _slicedToArray(_useState7, 2),
+      rows = _useState8[0],
+      setRows = _useState8[1];
+
+  useEffect(function () {
+    var newRows = [];
+    var keys = [];
+    var val = value || [];
+    val.forEach(function (item, index) {
+      var key = getRowKey(item, index);
+      newRows.push({
+        key: key,
+        index: index
+      });
+      keys.push(key);
+    });
+    store.update(val, keys);
+    setRows(function (prev) {
+      if (!isEqual(prev, newRows)) {
+        return newRows;
+      }
+
+      return prev;
+    });
+  }, [value]);
+  useEffect(function () {
+    store.onChange(onChange);
+  }, [onChange]);
+  var cols = useMemo(function () {
+    var mCols = [];
+    var validators = [];
+    columns.forEach(function (item) {
+      var _item$editable2;
+
+      var path = item.key || item.dataIndex || 'key';
+
+      var col = _objectSpread(_objectSpread({}, item), {}, {
+        editable: undefined,
+        render: function render(_, _ref2) {
+          var key = _ref2.key,
+              index = _ref2.index;
+          var render = item.render;
+
+          if (editable && item.editable !== undefined) {
+            var _item$editable = item.editable,
+                renderFormItem = _item$editable.renderFormItem,
+                disableLeftRight = _item$editable.disableLeftRight,
+                disableUpDown = _item$editable.disableUpDown;
+
+            if ( /*#__PURE__*/isValidElement(renderFormItem)) {
+              render = function render(value, _, __, opts) {
+                return /*#__PURE__*/React.createElement(EditableCell, {
+                  disableLeftRight: disableLeftRight,
+                  disableUpDown: disableUpDown,
+                  errors: opts.errors,
+                  focused: opts.focused,
+                  onFocus: opts.onFocus
+                }, /*#__PURE__*/cloneElement(renderFormItem, {
+                  bordered: false,
+                  value: value,
+                  onChange: function onChange(e) {
+                    var val = e;
+
+                    if (e !== undefined && e !== null && e.currentTarget instanceof HTMLInputElement) {
+                      val = e.currentTarget.value;
+                    }
+
+                    opts.onChange(_defineProperty({}, path, val));
+                  }
+                }));
+              };
+            } else {
+              render = renderFormItem;
+            }
+          }
+
+          return /*#__PURE__*/React.createElement(Cell, {
+            name: path,
+            index: index,
+            rowKey: key
+          }, render);
+        }
+      });
+
+      if (editable && ((_item$editable2 = item.editable) === null || _item$editable2 === void 0 ? void 0 : _item$editable2.rules) !== undefined) {
+        var _item$editable3;
+
+        validators.push([path, (_item$editable3 = item.editable) === null || _item$editable3 === void 0 ? void 0 : _item$editable3.rules]);
+      }
+
+      mCols.push(col);
+    });
+    store.setValidators(validators);
+    return mCols;
+  }, [columns, editable]); // 键盘事件
+
+  var tableID = useMemo(function () {
+    return randomStr();
+  }, []);
+  useEffect(function () {
+    var table = document.getElementById(tableID);
+
+    if (table === null) {
+      return;
+    }
+
+    var handleKeyUp = function handleKeyUp(e) {
+      var _cell$parentElement, _cell$parentElement2, _cell$parentElement3, _cell$parentElement3$, _cell$parentElement4, _cell$parentElement4$;
+
+      var inputElm = e.target;
+      var editableCell = inputElm.closest(".".concat(PREFIX_CLS, "-form-item"));
+
+      if (editableCell === null) {
+        return;
+      }
+
+      var cell = editableCell.closest('td');
+
+      if (!cell) {
+        return;
+      }
+
+      var colIndex = 0;
+      var node = cell;
+      var elm;
+      var nodes;
+
+      while (node !== null) {
+        node = node.previousElementSibling;
+        colIndex += 1;
+      }
+
+      switch (e.key) {
+        case 'ArrowRight':
+          if (editableCell.dataset.leftRight === '0') {
+            break;
+          }
+
+          nodes = (_cell$parentElement = cell.parentElement) === null || _cell$parentElement === void 0 ? void 0 : _cell$parentElement.querySelectorAll('input');
+
+          if (nodes !== undefined) {
+            var target;
+
+            for (var i = 0; i < nodes.length; i += 1) {
+              var item = nodes[i];
+
+              if (item === inputElm) {
+                target = nodes[i + 1];
+              }
+            }
+
+            if (target !== undefined && target.tabIndex >= 0) {
+              target.select();
+            }
+          }
+
+          break;
+
+        case 'ArrowLeft':
+          if (editableCell.dataset.leftRight === '0') {
+            break;
+          }
+
+          nodes = (_cell$parentElement2 = cell.parentElement) === null || _cell$parentElement2 === void 0 ? void 0 : _cell$parentElement2.querySelectorAll('input');
+
+          if (nodes !== undefined) {
+            var _target;
+
+            for (var _i2 = 0; _i2 < nodes.length; _i2 += 1) {
+              var _item = nodes[_i2];
+
+              if (_item === inputElm) {
+                _target = nodes[_i2 - 1];
+              }
+            }
+
+            if (_target !== undefined && _target.tabIndex >= 0) {
+              _target.select();
+            }
+          }
+
+          break;
+
+        case 'ArrowDown':
+        case 'Enter':
+          if (editableCell.dataset.upDown === '0') {
+            break;
+          }
+
+          elm = (_cell$parentElement3 = cell.parentElement) === null || _cell$parentElement3 === void 0 ? void 0 : (_cell$parentElement3$ = _cell$parentElement3.nextElementSibling) === null || _cell$parentElement3$ === void 0 ? void 0 : _cell$parentElement3$.querySelector("td:nth-child(".concat(colIndex, ") input"));
+
+          if (elm) {
+            elm.select();
+          }
+
+          break;
+
+        case 'ArrowUp':
+          if (editableCell.dataset.upDown === '0') {
+            break;
+          }
+
+          elm = (_cell$parentElement4 = cell.parentElement) === null || _cell$parentElement4 === void 0 ? void 0 : (_cell$parentElement4$ = _cell$parentElement4.previousElementSibling) === null || _cell$parentElement4$ === void 0 ? void 0 : _cell$parentElement4$.querySelector("td:nth-child(".concat(colIndex, ") input"));
+
+          if (elm) {
+            elm.select();
+          }
+
+      }
+    };
+
+    table.addEventListener('keyup', handleKeyUp);
+    return function () {
+      table.removeEventListener('keyup', handleKeyUp);
+    };
+  }, [tableID]);
+  useImperativeHandle(ref, function () {
+    return {
+      validate: function validate() {
+        return store.validate();
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(Context.Provider, {
+    value: store
+  }, /*#__PURE__*/React.createElement(MemoTable, _objectSpread(_objectSpread({
+    rowHeight: editable ? 47 : 37,
+    columns: cols,
+    dataSource: rows,
+    rowKey: "key"
+  }, restProps), {}, {
+    id: tableID
+  })));
+}
+
+export default /*#__PURE__*/forwardRef(EditableTable);

package/es/EditableTable/index.d.ts

@@ -0,0 +1,9 @@
+import EditableTable from './Table';
+import EditableCell from './EditableCell';
+import EditableTableFormItem from './EditableTableFormItem';
+declare type TableType = typeof EditableTable & {
+    EditableCell: typeof EditableCell;
+    EditableTableFormItem: typeof EditableTableFormItem;
+};
+declare const _default: TableType;
+export default _default;

package/es/EditableTable/index.js

@@ -0,0 +1,8 @@
+import EditableTable from './Table';
+import EditableCell from './EditableCell';
+import EditableTableFormItem from './EditableTableFormItem';
+Object.assign(EditableTable, {
+  EditableCell: EditableCell,
+  EditableTableFormItem: EditableTableFormItem
+});
+export default EditableTable;

package/es/EditableTable/index.less

@@ -0,0 +1,19 @@
+@import '../theme.less';
+
+.@{prefixCls}-form-item {
+  display: flex;
+  align-items: center;
+  justify-content: start;
+  min-width: 100%;
+  height: 32px;
+  padding: 0;
+
+  & > .ant-select {
+    flex: 1;
+  }
+
+  &-error {
+    padding: 6px 6px 6px 0;
+    cursor: pointer;
+  }
+}

package/es/EditableTable/typings.d.ts

@@ -0,0 +1,86 @@
+import type { Key, ReactElement } from 'react';
+import type { BaseTableProps, ColumnType } from '../BaseTable/typings';
+import { RuleItem } from 'async-validator/dist-types/interface';
+
+type RowType = {
+  key: Key;
+  index: number;
+};
+
+type EditableCellFocusedType = 0 | 1 | 2;
+
+export type EditableRender<T> = (
+  val: any,
+  record: T,
+  index: number,
+  opts: {
+    focused: EditableCellFocusedType;
+    onFocus: () => void;
+    errors?: string[];
+    onChange: (value: Partial<T>) => void;
+  },
+) => ReactElement | null;
+
+export type EditableTableRule<T> = Pick<
+  RuleItem,
+  'required' | 'message' | 'pattern' | 'min' | 'max' | 'len' | 'type'
+> & {
+  validator?: (rule: unknown, val: any, record: T) => void | Promise<void>;
+};
+
+export type EditableTableRef = {
+  validate(): Promise<any>;
+};
+
+export interface EditableTableColumnType<T>
+  extends Pick<
+    ColumnType<T>,
+    'key' | 'width' | 'render' | 'align' | 'ellipsis' | 'title' | 'fixed'
+  > {
+  dataIndex: string;
+  render?: (
+    val: any,
+    record: T,
+    index: number,
+  ) => ReactElement | string | number | null | undefined;
+  editable?: {
+    /**
+     * @description 是否禁止可编辑单元格支持上下键切换，注意不是禁止单元格表单组件的上下键操作，而是EditableCell的上下键切换
+     */
+    disableLeftRight?: boolean;
+    /**
+     * @description 同disabledLeftRight
+     */
+    disableUpDown?: boolean;
+    rules?: EditableTableRule<T>[];
+    /**
+     * @description 是否自定义渲染单元格内表单组件，需要配合EditableCell组件进行使用，详见demo中的使用方式
+     */
+    renderFormItem: EditableRender<T> | ReactElement;
+  };
+}
+
+export type EditableTableRowError = {
+  key: string;
+  errors: string[];
+  children?: {
+    key: string;
+    errors: string[];
+  }[];
+};
+
+export interface EditableTableProps<T>
+  extends Pick<BaseTableProps<T>, 'rowKey' | 'virtual' | 'scroll' | 'pagination'> {
+  editable?: boolean;
+  value?: T[];
+  error?: string | EditableTableRowError[];
+  onChange?: (value: T[]) => void;
+  rowSelection?: BaseTableProps<RowType>['rowSelection'];
+  columns: EditableTableColumnType<T>[];
+}
+
+export type EditableTableObserverHandler<T> = (params: {
+  record?: T;
+  focused?: EditableCellFocusedType;
+  errors?: string[] | null;
+}) => void;

package/es/EditableTable/util.d.ts

@@ -0,0 +1,25 @@
+import type { Key } from 'react';
+import { EditableTableObserverHandler, EditableTableRule } from './typings';
+export declare class FormStore<T = Record<Key, any>> {
+    private data;
+    private keys;
+    private focused;
+    private handler?;
+    private errors;
+    private observers;
+    private validator;
+    constructor(initialData: T[], keys: Key[]);
+    private setError;
+    private removeError;
+    getError(rowKey: Key, colKey: Key): string[] | null;
+    setValidators(validators: [Key, EditableTableRule<T>[]][]): void;
+    getData(index: number): T;
+    validate(): Promise<boolean>;
+    private validateRecord;
+    setData(index: number, value: Partial<T>): void;
+    update(value: T[], keys: Key[]): void;
+    focus(rowKey: Key, colKey: Key): void;
+    onChange(handler: undefined | ((data: T[]) => void)): void;
+    listen(rowKey: Key, colKey: Key, cb: EditableTableObserverHandler<T>): () => void;
+    private notify;
+}