@zhenliang/sheet 0.2.3 → 0.2.4-beta.1

package/dist/core/editor/index.d.ts

@@ -2,3 +2,4 @@ export { default as getCascaderEditor } from './cascaderEditor';
 export { getDateEditor } from './dateEditor';
 export { getNumberEditor, NumberEditor } from './numberEditor';
 export { default as getSelectEditor } from './selectEditor';
+export { default as getInputSelectEditor } from './inputSelectEditor/inputSelect';

package/dist/core/editor/index.js

@@ -1,4 +1,5 @@
 export { default as getCascaderEditor } from "./cascaderEditor";
 export { getDateEditor } from "./dateEditor";
 export { getNumberEditor, NumberEditor } from "./numberEditor";
-export { default as getSelectEditor } from "./selectEditor";
+export { default as getSelectEditor } from "./selectEditor";
+export { default as getInputSelectEditor } from "./inputSelectEditor/inputSelect";

package/dist/core/editor/inputSelectEditor/index.d.ts

@@ -0,0 +1,2 @@
+export { getInputSelectEditor } from './inputSelect';
+export { getInputSelectEditor as default } from './inputSelect';

package/dist/core/editor/inputSelectEditor/index.js

@@ -0,0 +1,2 @@
+export { getInputSelectEditor } from "./inputSelect";
+export { getInputSelectEditor as default } from "./inputSelect";

package/dist/core/editor/inputSelectEditor/index.less

@@ -0,0 +1,39 @@
+.harvest-sheet-container .number-editor {
+  border: none !important;
+  background: transparent !important;
+  width: 100% !important;
+  height: var(--cell-inner-height) !important;
+  display: block !important;
+  font-size: 12px !important;
+  box-shadow: none !important;
+  text-align: inherit !important;
+  padding-left: 0;
+
+  .ant-input-wrapper {
+    text-align: inherit !important;
+  }
+
+  .ant-input {
+    text-align: inherit !important;
+  }
+
+  .ant-input-wrapper > input {
+    padding: 0;
+    height: 38px;
+    border: none;
+    outline: none;
+    box-shadow: none;
+    background: transparent;
+    font-size: 12px;
+  }
+
+  .ant-input-group-addon {
+    background: transparent;
+    border: none;
+    padding: 0;
+  }
+}
+
+.select-editor-dropdown {
+  min-width: 80px !important;
+}

package/dist/core/editor/inputSelectEditor/inputSelect.d.ts

@@ -0,0 +1,9 @@
+import type { SheetType } from "../../../type";
+import { InputProps } from 'antd';
+import 'antd/es/input/style/index.css';
+import './index.less';
+export declare const getInputSelectEditor: (options: SheetType.Options[], valueKey?: string, extra?: React.ReactNode, inputProps?: Partial<InputProps>, format?: ((value: any) => any) | undefined, warnMethod?: ((record: any) => void) | undefined, rangeMethod?: ((record: any) => {
+    max?: number;
+    min?: number;
+}) | undefined, getCustomOptions?: ((record: any) => SheetType.Options[]) | undefined) => SheetType.CellEditor;
+export default getInputSelectEditor;

package/dist/core/editor/inputSelectEditor/inputSelect.js

@@ -0,0 +1,176 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+/* eslint-disable eqeqeq */
+// 使用 antd 的 Input + Dropdown，实现可搜索且可自由输入的编辑器
+
+import { Dropdown, Input, Menu } from 'antd';
+import 'antd/es/input/style/index.css';
+import { isNil } from 'lodash';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import "./index.less";
+import { Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+export var getInputSelectEditor = function getInputSelectEditor(options) {
+  var valueKey = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'value';
+  var extra = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : /*#__PURE__*/_jsx(_Fragment, {});
+  var inputProps = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  var format = arguments.length > 4 ? arguments[4] : undefined;
+  var warnMethod = arguments.length > 5 ? arguments[5] : undefined;
+  var rangeMethod = arguments.length > 6 ? arguments[6] : undefined;
+  var getCustomOptions = arguments.length > 7 ? arguments[7] : undefined;
+  var InputSelectEditor = function InputSelectEditor(props) {
+    var value = props.value,
+      onConfirm = props.onConfirm,
+      onChange = props.onChange,
+      record = props.record,
+      isEditing = props.isEditing;
+    var _useState = useState(true),
+      _useState2 = _slicedToArray(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
+    var _useState3 = useState(function () {
+        return String(value !== null && value !== void 0 ? value : '');
+      }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      inputValue = _useState4[0],
+      setInputValue = _useState4[1];
+    var baseOptions = useMemo(function () {
+      return getCustomOptions ? getCustomOptions(record !== null && record !== void 0 ? record : {}) : options;
+    }, [getCustomOptions, options, record]);
+    var filteredOptions = useMemo(function () {
+      return baseOptions.filter(function (item) {
+        var _item$label;
+        return String((_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : '').toLowerCase().includes(String(inputValue).toLowerCase());
+      });
+    }, [baseOptions, inputValue]);
+    var handleOptionClick = function handleOptionClick(opt) {
+      setInputValue(opt.label);
+      onConfirm(opt.value);
+      setOpen(false);
+    };
+    var dropdownOverlay = /*#__PURE__*/_jsxs(Menu, {
+      className: "select-editor-dropdown",
+      onMouseDown: function onMouseDown(e) {
+        // 防止点击下拉时触发行内编辑器失焦
+        e.preventDefault();
+        e.stopPropagation();
+      },
+      children: [filteredOptions.map(function (opt) {
+        var _opt$label;
+        return /*#__PURE__*/_jsx(Menu.Item, {
+          className: "select-editor-dropdown-item",
+          onClick: function onClick() {
+            return handleOptionClick(opt);
+          },
+          children: (_opt$label = opt.label) !== null && _opt$label !== void 0 ? _opt$label : opt.value
+        }, String(opt.value));
+      }), extra]
+    });
+    var inputNumberRef = useRef(null);
+    var handleChange = useCallback(function (e) {
+      setInputValue(e.target.value);
+      onChange(!isNil(e.target.value) ? e.target.value : null);
+    }, [onChange]);
+    useEffect(function () {
+      if (isEditing) {
+        var _inputNumberRef$curre;
+        inputNumberRef === null || inputNumberRef === void 0 || (_inputNumberRef$curre = inputNumberRef.current) === null || _inputNumberRef$curre === void 0 || _inputNumberRef$curre.focus();
+      }
+    }, [isEditing]);
+    useEffect(function () {
+      setOpen(filteredOptions.length > 0);
+    }, [filteredOptions]);
+    var reFocus = useCallback(function () {
+      if (isEditing) {
+        var _inputNumberRef$curre2;
+        inputNumberRef === null || inputNumberRef === void 0 || (_inputNumberRef$curre2 = inputNumberRef.current) === null || _inputNumberRef$curre2 === void 0 || _inputNumberRef$curre2.focus();
+      }
+    }, [isEditing]);
+    return /*#__PURE__*/_jsx(Dropdown, {
+      overlay: dropdownOverlay,
+      open: open,
+      children: /*#__PURE__*/_jsx(Input, _objectSpread({
+        autoFocus: true,
+        className: "number-editor",
+        onMouseDown: function onMouseDown(e) {
+          return e.stopPropagation();
+        },
+        value: value,
+        onChange: handleChange,
+        ref: inputNumberRef,
+        onBlur: reFocus
+      }, inputProps))
+    });
+  };
+
+  // 校验：允许在选项中存在的值，或任意字符串（自定义值）
+  InputSelectEditor.checker = function (value, record) {
+    if (isNil(value)) return true;
+    var customOptions = getCustomOptions ? getCustomOptions(record !== null && record !== void 0 ? record : {}) : options;
+    var inOptions = customOptions.some(function (item) {
+      return item.value == value;
+    }) || customOptions.some(function (item) {
+      return item.label === value;
+    });
+    if (inOptions) return true;
+    var result = format ? format(value) : value;
+    if (result === undefined) {
+      return false;
+    }
+    // parse number with thousands separator
+    var range = rangeMethod === null || rangeMethod === void 0 ? void 0 : rangeMethod(record);
+    if (!isNil(range === null || range === void 0 ? void 0 : range.max) && !isNil(range === null || range === void 0 ? void 0 : range.min)) {
+      var _ref = range || {},
+        _ref$max = _ref.max,
+        max = _ref$max === void 0 ? 0 : _ref$max,
+        _ref$min = _ref.min,
+        min = _ref$min === void 0 ? 0 : _ref$min;
+      if (result < min || result > max) {
+        warnMethod === null || warnMethod === void 0 || warnMethod(record);
+        return false;
+      }
+    }
+    return true;
+  };
+
+  // 粘贴/内部解析：如果在选项中，则取 valueKey 对应字段；否则直接返回原值
+  InputSelectEditor.parser = function (value, record) {
+    var customOptions = getCustomOptions ? getCustomOptions(record !== null && record !== void 0 ? record : {}) : options;
+    var hitByValue = customOptions.find(function (item) {
+      return item.value == value;
+    });
+    if (hitByValue) return hitByValue[valueKey];
+    var hitByLabel = customOptions.find(function (item) {
+      return item.label === value;
+    });
+    if (hitByLabel) return hitByLabel[valueKey];
+    return value;
+  };
+
+  // 展示：如果在选项中，用 label；否则展示原始值（自定义）
+  InputSelectEditor.formatter = function (value, record) {
+    var customOptions = getCustomOptions ? getCustomOptions(record !== null && record !== void 0 ? record : {}) : options;
+    var hitByValue = customOptions.find(function (item) {
+      return item.value == value;
+    });
+    if (hitByValue) return hitByValue.label;
+    var hitByLabel = customOptions.find(function (item) {
+      return item.label === value;
+    });
+    if (hitByLabel) return hitByLabel.label;
+    return value;
+  };
+  return InputSelectEditor;
+};
+export default getInputSelectEditor;

package/dist/core/editor/numberEditor/index.js

@@ -93,13 +93,13 @@ export var getNumberEditor = function getNumberEditor(extraProps, getExtraProps)
       }
     }, [isEditing]);
     return /*#__PURE__*/_jsx(Input, _objectSpread(_objectSpread({
-      ref: inputNumberRef
+      ref: inputNumberRef,
+      onBlur: reFocus
     }, inputArgs), {}, {
       className: "number-editor",
       onMouseDown: function onMouseDown(e) {
         return e.stopPropagation();
       },
-      onBlur: reFocus,
       value: (_ref3 = value) !== null && _ref3 !== void 0 ? _ref3 : '',
       onChange: function onChange(e) {
         handleChange(e.target.value);

package/dist/example/basic.js

@@ -14,14 +14,35 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Table, getNumberEditor } from "./..";
-import { Space, Tag } from 'antd';
+import { Table, getNumberEditor, getInputSelectEditor } from "./..";
+import { Space, Tag, Select } from 'antd';
 import 'antd/dist/antd.css';
 import React, { useCallback, useState } from 'react';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var columns = [{
+  title: 'Status',
+  dataIndex: 'status',
+  editor: getInputSelectEditor([{
+    label: 'Open',
+    value: 'open'
+  }, {
+    label: 'Closed',
+    value: 'closed'
+  }, {
+    label: '1.5%',
+    value: '1500'
+  }, {
+    label: '2%',
+    value: '2000'
+  }, {
+    label: '3%',
+    value: '3000'
+  }], 'value', null, {}, function (value) {
+    return isNaN(value) ? null : value;
+  })
+}, {
   title: 'Name',
   dataIndex: 'name',
   key: 'name',
@@ -110,6 +131,7 @@ var App = function App() {
     dataSource = _useState2[0],
     setData = _useState2[1];
   var onChange = useCallback(function (changes) {
+    console.log('changes', changes);
     var newData = _toConsumableArray(dataSource);
     changes.forEach(function (_ref4) {
       var _String;
@@ -120,12 +142,38 @@ var App = function App() {
     });
     setData(newData);
   }, [dataSource]);
-  return /*#__PURE__*/_jsx(Table, {
-    draggable: true,
-    columns: columns,
-    dataSource: dataSource,
-    onChange: onChange,
-    showQuickLocationBtn: true
+  return /*#__PURE__*/_jsxs("div", {
+    children: [/*#__PURE__*/_jsx(Table, {
+      draggable: true,
+      columns: columns,
+      dataSource: dataSource,
+      onChange: onChange,
+      showQuickLocationBtn: true
+    }), /*#__PURE__*/_jsx(Select, {
+      showSearch: true,
+      placeholder: "Select a person",
+      optionFilterProp: "children",
+      onChange: function onChange(value) {
+        console.log('onChange', value);
+      },
+      onSearch: function onSearch(value) {
+        console.log('onSearch', value);
+      },
+      filterOption: function filterOption(input, option) {
+        var _option$label;
+        return ((_option$label = option === null || option === void 0 ? void 0 : option.label) !== null && _option$label !== void 0 ? _option$label : '').toLowerCase().includes(input.toLowerCase());
+      },
+      options: [{
+        value: 'jack',
+        label: 'Jack'
+      }, {
+        value: 'lucy',
+        label: 'Lucy'
+      }, {
+        value: 'tom',
+        label: 'Tom'
+      }]
+    })]
   });
 };
 export default App;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zhenliang/sheet",
-  "version": "0.2.3",
+  "version": "0.2.4-beta.1",
   "description": "A react library developed with dumi",
   "license": "MIT",
   "module": "dist/index.js",
@@ -65,10 +65,10 @@
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@umijs/lint": "^4.0.0",
-    "dumi": "^2.2.0",
+    "dumi": "^2.4.21",
     "eslint": "^8.23.0",
     "father": "^4.1.0",
-    "husky": "^8.0.1",
+    "husky": "^8.0.3",
     "lint-staged": "^13.0.3",
     "prettier": "^2.7.1",
     "prettier-plugin-organize-imports": "^3.0.0",