@zhenliang/sheet 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) fizz.zhou@ap.jll.com
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,3 @@
+# zsheet
+
+zsheet is a excel-like table component write in react

package/dist/core/config.js

@@ -0,0 +1,13 @@
+export var TAB_KEY = 9;
+export var ENTER_KEY = 13;
+export var ESCAPE_KEY = 27;
+export var LEFT_KEY = 37;
+export var UP_KEY = 38;
+export var RIGHT_KEY = 39;
+export var DOWN_KEY = 40;
+export var DELETE_KEY = 46;
+export var BACKSPACE_KEY = 8;
+export var Z_KEY = 90;
+export var C_KEY = 67;
+export var V_KEY = 86;
+export var X_KEY = 88;

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

@@ -0,0 +1,63 @@
+import { Cascader } from 'antd';
+import 'antd/es/cascader/style/index.css';
+import { useMemo } from 'react';
+import { optionsTransferToValue } from "../../util";
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+var options = [{
+  value: 'zhejiang',
+  label: 'Zhejiang',
+  children: [{
+    value: 'hangzhou',
+    label: 'Hangzhou',
+    children: [{
+      value: 'West Lake',
+      label: 'West Lake'
+    }]
+  }]
+}, {
+  value: 'jiangsu',
+  label: 'Jiangsu',
+  children: [{
+    value: 'nanjing',
+    label: 'Nanjing',
+    children: [{
+      value: 'Zhong Hua Men',
+      label: 'Zhong Hua Men'
+    }]
+  }]
+}];
+export var CascaderEditor = function CascaderEditor(props) {
+  var value = props.value,
+    onConfirm = props.onConfirm;
+  var val = useMemo(function () {
+    return optionsTransferToValue(options, value);
+  }, [value, options]);
+  var handleChange = function handleChange(opt) {
+    console.log(opt);
+    onConfirm(opt ? opt[opt.length - 1] : null);
+  };
+  return /*#__PURE__*/_jsx(Cascader, {
+    autoFocus: true,
+    open: true,
+    className: 'cascader-editor',
+    onMouseDown: function onMouseDown(event) {
+      event.stopPropagation();
+    },
+    value: val
+    // allowClear={false}
+    ,
+    displayRender: function displayRender(label) {
+      return label[label.length - 1];
+    },
+    onChange: handleChange
+    // onBlur={handleBlur}
+    // onKeyDown={handleKeyDown}
+    ,
+    options: options
+  });
+};
+CascaderEditor.checker = function (value) {
+  var res = optionsTransferToValue(options, value);
+  return res && res.length > 0;
+};

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

@@ -0,0 +1,24 @@
+.cascader-editor{
+  width: 100%;
+  padding: 0;
+  height: 20px !important;
+
+
+  .ant-select-selector{
+    .ant-select-selection-search{
+      height: 16px !important;
+    }
+
+    border: none !important;
+    background: transparent !important;
+    box-shadow: none !important;
+    color: #292c33;
+    height: 20px !important;
+    padding:0 !important; 
+
+    input{
+      height: 18px !important;
+    }
+  }
+
+}

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

@@ -0,0 +1,42 @@
+import { DatePicker } from 'antd';
+import 'antd/es/date-picker/style/index.css';
+import moment from 'moment';
+import { useEffect, useMemo, useRef } from 'react';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var DateEditor = function DateEditor(props) {
+  var value = props.value,
+    onChange = props.onChange,
+    onConfirm = props.onConfirm;
+  var dateRef = useRef(null);
+  useEffect(function () {
+    var _dateRef$current;
+    dateRef === null || dateRef === void 0 ? void 0 : (_dateRef$current = dateRef.current) === null || _dateRef$current === void 0 ? void 0 : _dateRef$current.focus();
+  }, []);
+  var val = useMemo(function () {
+    return value && moment(value);
+  }, [value]);
+  var handleChange = function handleChange(value) {
+    onChange(value === null || value === void 0 ? void 0 : value.format('YYYY-MM-DD'));
+    onConfirm(value === null || value === void 0 ? void 0 : value.format('YYYY-MM-DD'));
+  };
+  return /*#__PURE__*/_jsx(DatePicker, {
+    open: true,
+    ref: dateRef,
+    className: "date-editor",
+    value: val,
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    onChange: handleChange
+  });
+};
+DateEditor.checker = function (value) {
+  var reg = /^[1-9]\d{3}-(0[1-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/;
+  return reg.test(value);
+};
+DateEditor.formatter = function (value) {
+  var _DateEditor$checker;
+  if (!(DateEditor !== null && DateEditor !== void 0 && (_DateEditor$checker = DateEditor.checker) !== null && _DateEditor$checker !== void 0 && _DateEditor$checker.call(DateEditor, value))) return null;
+  return value.replace('/', '-').replace('/', '-');
+};

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

@@ -0,0 +1,7 @@
+.date-editor{
+  width:100%;
+  border:none !important;
+  box-shadow: none !important;
+  background: transparent !important;
+  height: 20px;
+}

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

@@ -0,0 +1,25 @@
+import { InputNumber as AntInputNumber } from 'antd';
+import 'antd/es/input-number/style/index.css';
+import { useEffect, useRef } from 'react';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var NumberEditor = function NumberEditor(props) {
+  var value = props.value,
+    onChange = props.onChange;
+  var inputNumberRef = useRef(null);
+  useEffect(function () {
+    var _inputNumberRef$curre;
+    inputNumberRef === null || inputNumberRef === void 0 ? void 0 : (_inputNumberRef$curre = inputNumberRef.current) === null || _inputNumberRef$curre === void 0 ? void 0 : _inputNumberRef$curre.focus();
+  }, []);
+  return /*#__PURE__*/_jsx(AntInputNumber, {
+    ref: inputNumberRef,
+    controls: false,
+    className: "number-editor",
+    onMouseDown: function onMouseDown(e) {
+      return e.stopPropagation();
+    },
+    value: value,
+    addonAfter: "%",
+    onChange: onChange
+  });
+};

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

@@ -0,0 +1,17 @@
+.number-editor{
+  border: none !important;
+  background: transparent !important;
+  width:100%;
+  height: 38px;
+  box-shadow: none !important;
+
+  .ant-input-number-input-wrap >input{
+    padding:0;
+    height: 38px;
+  }
+  
+  .ant-input-number-group-addon{
+    background: transparent;
+    border: none;
+  }
+}

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

@@ -0,0 +1,44 @@
+import { Select } from 'antd';
+import 'antd/es/select/style/index.css';
+import "./index.less";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var GetSelectEditor = function GetSelectEditor(options) {
+  var SelectEditor = function SelectEditor(props) {
+    var value = props.value,
+      onConfirm = props.onConfirm;
+    var handleChange = function handleChange(opt) {
+      var updateValue = opt === undefined ? null : opt;
+      onConfirm(updateValue);
+    };
+    var handleKeyDown = function handleKeyDown(ev) {
+      // record last key pressed so we can handle enter
+      if (ev.which === 13 || ev.which === 9) {
+        ev.persist();
+      }
+    };
+    return /*#__PURE__*/_jsx(Select, {
+      autoFocus: true,
+      className: "select-editor",
+      defaultOpen: true,
+      allowClear: true,
+      open: true,
+      onMouseDown: function onMouseDown(e) {
+        e.stopPropagation();
+      },
+      value: value,
+      onChange: handleChange,
+      onKeyDown: handleKeyDown,
+      options: options,
+      popupClassName: 'excelTablePopupClassName'
+    });
+  };
+  SelectEditor.checker = function (value) {
+    return options.some(function (item) {
+      return item.value === value;
+    }) || options.some(function (item) {
+      return item.label === value;
+    });
+  };
+  return SelectEditor;
+};
+export default GetSelectEditor;

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

@@ -0,0 +1,41 @@
+.select-editor,.ant-select-selector {
+  // select style
+  width: 100%;
+  line-height: 20px;
+  height: 20px;
+
+    .ant-select-selector {
+      border: none !important;
+      background: transparent !important;
+      box-shadow: none !important;
+      color: #292c33;
+      height: 20px !important;
+      padding:0 !important; 
+    }
+
+    .ant-select-selection-item {
+      color: #292c33;
+      font-size: 12px;
+      line-height: unset !important;
+    }
+
+    .ant-select-arrow {
+      right: 0;
+    }
+
+    .ant-select-clear {
+      right: 0;
+      box-shadow: inset 0 -100px 0 rgba(33,133,208,15%);
+    }
+
+  .ant-select-single:not(.ant-select-customize-input) .ant-select-selector {
+    padding: 0;
+  }
+
+  .ant-select-focused:not(.ant-select-disabled).ant-select:not(.ant-select-customize-input) .ant-select-selector {
+    box-shadow: inset 0 -100px 0 rgba(33,133,208,15%);
+  }
+
+
+
+}

package/dist/core/reducers/index.js

@@ -0,0 +1,36 @@
+import { keyboardReducer } from "./keyboardReducer";
+import { mouseReducer } from "./mouseReducer";
+import { stateReducer } from "./stateReducer";
+var sheetReducer = function sheetReducer(state, action) {
+  switch (action.type) {
+    case 'change':
+    case 'changes':
+    case 'rowMove':
+    case 'colMove':
+    case 'editFinish':
+    case 'pushHistory':
+    case 'selectRow':
+    case 'clearSelect':
+    case 'clearSelectIfNotSingleRow':
+    case 'clearEdit':
+      return stateReducer[action.type](state, action.payload);
+    case 'mouseDown':
+    case 'mouseOver':
+    case 'mouseUp':
+    case 'loseFocus':
+    case 'doubleClick':
+    case 'mouseLeaveInterval':
+      return mouseReducer[action.type](state, action.payload);
+    case 'move':
+    case 'escape':
+    case 'reverse':
+    case 'delete':
+    case 'enter':
+    case 'otherInput':
+      return keyboardReducer[action.type](state, action.payload);
+    default:
+      throw new Error('Unexpected action');
+  }
+};
+export default sheetReducer;
+export { sideEffectReducer } from "./sideEffectReducer";

package/dist/core/reducers/keyboardReducer.js

@@ -0,0 +1,91 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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) { 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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import { isNil } from 'lodash';
+import { getNextVisibleRow, groupConfigToGroupMap } from "../util";
+export var keyboardReducer = {
+  move: function move(state, payload) {
+    var _state$start, _state$start2;
+    var _ref = payload,
+      row = _ref.row,
+      col = _ref.col;
+    var groupConfig = state.groupConfig,
+      _state$data = state.data,
+      data = _state$data === void 0 ? [] : _state$data;
+    var newRow = (((_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.row) || 0) + row;
+    if (groupConfig) {
+      newRow = getNextVisibleRow(newRow, data.length, groupConfigToGroupMap(groupConfig));
+    }
+    var currentPos = {
+      row: newRow,
+      col: (((_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.col) || 0) + col
+    };
+    var lastEditing = state.lastEditing;
+    if (state.editing) {
+      lastEditing = _objectSpread(_objectSpread({}, state.editing), {}, {
+        confirm: true
+      });
+    }
+    if (isNil(currentPos.row)) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        start: undefined,
+        end: undefined,
+        lastSelected: {
+          start: state.start,
+          end: state.end
+        },
+        editing: undefined,
+        lastEditing: lastEditing
+      });
+    }
+    return _objectSpread(_objectSpread({}, state), {}, {
+      start: currentPos,
+      end: currentPos,
+      lastSelected: {
+        start: state.start,
+        end: state.end
+      },
+      editing: undefined,
+      lastEditing: lastEditing
+    });
+  },
+  escape: function escape(state) {
+    return _objectSpread(_objectSpread({}, state), {}, {
+      editing: undefined,
+      lastEditing: state.editing
+    });
+  },
+  reverse: function reverse(state) {
+    return state;
+  },
+  delete: function _delete(state) {
+    return state;
+  },
+  enter: function enter(state, payload) {
+    var start = state.start,
+      end = state.end,
+      editing = state.editing;
+    if (!start || !end) {
+      return state;
+    }
+    if (!editing) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        end: start,
+        editing: _objectSpread(_objectSpread({}, start), {}, {
+          value: payload
+        })
+      });
+    }
+    return keyboardReducer.move(state, {
+      row: 1,
+      col: 0
+    });
+  },
+  otherInput: function otherInput(state, payload) {
+    if (state.editing) return state;
+    return keyboardReducer.enter(state, payload);
+  }
+};

package/dist/core/reducers/mouseReducer.js

@@ -0,0 +1,151 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+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) { 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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+export var mouseReducer = {
+  mouseDown: function mouseDown(state, payload) {
+    var _ref = payload,
+      _ref$pos = _ref.pos,
+      row = _ref$pos.row,
+      col = _ref$pos.col,
+      shiftKey = _ref.shiftKey;
+    var data = state.data;
+    if (data !== null && data !== void 0 && data[row][col].fixed) {
+      return _objectSpread({}, state);
+    }
+    if (shiftKey) {
+      return _objectSpread(_objectSpread({}, state), {}, {
+        mouseDown: true,
+        editing: undefined,
+        lastEditing: state.editing,
+        start: state.start ? state.start : {
+          row: row,
+          col: col
+        },
+        end: {
+          row: row,
+          col: col
+        },
+        lastSelected: {
+          start: state.start,
+          end: state.end
+        }
+      });
+    }
+    return _objectSpread(_objectSpread({}, state), {}, {
+      mouseDown: true,
+      editing: undefined,
+      lastEditing: state.editing,
+      start: {
+        row: row,
+        col: col
+      },
+      end: {
+        row: row,
+        col: col
+      },
+      lastSelected: {
+        start: state.start,
+        end: state.end
+      }
+    });
+  },
+  mouseOver: function mouseOver(state, payload) {
+    var _ref2 = payload,
+      row = _ref2.row,
+      col = _ref2.col;
+    var data = state.data;
+    if (state.mouseDown === false || data !== null && data !== void 0 && data[row][col].readonly) return state;
+    return _objectSpread(_objectSpread({}, state), {}, {
+      end: {
+        row: row,
+        col: col
+      },
+      lastSelected: {
+        start: state.start,
+        end: state.end
+      }
+    });
+  },
+  mouseUp: function mouseUp(state, payload) {
+    var _ref3 = payload,
+      row = _ref3.row,
+      col = _ref3.col;
+    var data = state.data;
+    if (state.mouseDown === false || data !== null && data !== void 0 && data[row][col].fixed) return state;
+    return _objectSpread(_objectSpread({}, state), {}, {
+      mouseDown: false,
+      end: {
+        row: row,
+        col: col
+      },
+      lastSelected: {
+        start: state.start,
+        end: state.end
+      }
+    });
+  },
+  loseFocus: function loseFocus(state) {
+    var lastEditing = state.lastEditing;
+    if (state.editing) {
+      lastEditing = _objectSpread(_objectSpread({}, state.editing), {}, {
+        confirm: true
+      });
+    }
+    return _objectSpread(_objectSpread({}, state), {}, {
+      start: undefined,
+      end: undefined,
+      editing: undefined,
+      lastEditing: lastEditing,
+      lastSelected: {
+        start: state.start,
+        end: state.end
+      }
+    });
+  },
+  doubleClick: function doubleClick(state, payload) {
+    var _data$row$col;
+    var _ref4 = payload,
+      row = _ref4.row,
+      col = _ref4.col;
+    var data = state.data;
+    if (data !== null && data !== void 0 && (_data$row$col = data[row][col]) !== null && _data$row$col !== void 0 && _data$row$col.readonly) {
+      return state;
+    }
+    return _objectSpread(_objectSpread({}, state), {}, {
+      mouseDown: false,
+      editing: {
+        row: row,
+        col: col
+      },
+      start: {
+        row: row,
+        col: col
+      },
+      end: {
+        row: row,
+        col: col
+      },
+      lastSelected: {
+        start: state.start,
+        end: state.end
+      },
+      lastEditing: state.editing
+    });
+  },
+  mouseLeaveInterval: function mouseLeaveInterval(state, payload) {
+    var _data$, _data$$end$col;
+    var _ref5 = payload,
+      end = _ref5.end;
+    var data = state.data;
+    // fixed 列不选中
+    if (data !== null && data !== void 0 && (_data$ = data[0]) !== null && _data$ !== void 0 && (_data$$end$col = _data$[end.col]) !== null && _data$$end$col !== void 0 && _data$$end$col.fixed) {
+      return state;
+    }
+    return _objectSpread(_objectSpread({}, state), {}, {
+      end: end
+    });
+  }
+};