@zhenliang/sheet 0.1.67 → 0.1.69

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -51,10 +51,9 @@ export var getSelectEditor = function getSelectEditor(options) {
51
51
  });
52
52
  };
53
53
  var customOptions = getCustomOptions ? getCustomOptions(props) : options;
54
- return /*#__PURE__*/_jsx(Select, _objectSpread(_objectSpread({}, selectProps), {}, {
54
+ return /*#__PURE__*/_jsx(Select, _objectSpread({
55
55
  autoFocus: true,
56
56
  className: "select-editor",
57
- allowClear: true,
58
57
  open: isOpen,
59
58
  onMouseDown: function onMouseDown(e) {
60
59
  e.stopPropagation();
@@ -64,11 +63,12 @@ export var getSelectEditor = function getSelectEditor(options) {
64
63
  onKeyDown: handleKeyDown,
65
64
  options: customOptions,
66
65
  popupClassName: "select-editor-dropdown",
67
- dropdownRender: dropdown
68
- }));
66
+ dropdownRender: dropdown,
67
+ allowClear: true
68
+ }, selectProps));
69
69
  };
70
70
  SelectEditor.checker = function (value) {
71
- if (isNil(value)) return true;
71
+ if (isNil(value) && selectProps.allowClear !== false) return true;
72
72
  return options.some(function (item) {
73
73
  return item.value == value;
74
74
  }) || options.some(function (item) {
@@ -1,5 +1,5 @@
1
1
  import type { SheetType } from "../../type";
2
- export type SheetAction = 'change' | 'changes' | 'rowMove' | 'colMove' | 'editFinish' | 'pushHistory' | 'popHistory' | 'select' | 'selectOneRow' | 'changeSearch' | 'closeSearch' | 'openSearch' | 'clearSelect' | 'clearSelectIfNotSingleRow' | 'clearEdit' | 'mouseDown' | 'mouseOver' | 'mouseUp' | 'selectRow' | 'selectCol' | 'loseFocus' | 'doubleClick' | 'mouseLeaveInterval' | 'move' | 'selectAll' | 'escape' | 'reverse' | 'delete' | 'enter' | 'otherInput' | 'none';
2
+ export type SheetAction = 'change' | 'changes' | 'rowMove' | 'colMove' | 'editFinish' | 'pushHistory' | 'popHistory' | 'select' | 'selectOneRow' | 'changeSearch' | 'closeSearch' | 'openSearch' | 'changeFixedPosition' | 'clearSelect' | 'clearSelectIfNotSingleRow' | 'clearEdit' | 'mouseDown' | 'mouseOver' | 'mouseUp' | 'selectRow' | 'selectCol' | 'loseFocus' | 'doubleClick' | 'mouseLeaveInterval' | 'move' | 'selectAll' | 'escape' | 'reverse' | 'delete' | 'enter' | 'otherInput' | 'none';
3
3
  export type reducerAction = (type: Partial<SheetType.UpdateStateType>, payload?: unknown) => Partial<SheetType.UpdateStateType>;
4
4
  declare const sheetReducer: (state: Partial<SheetType.UpdateStateType>, action: {
5
5
  type: SheetAction;
@@ -18,6 +18,7 @@ var sheetReducer = function sheetReducer(state, action) {
18
18
  case 'changeSearch':
19
19
  case 'closeSearch':
20
20
  case 'openSearch':
21
+ case 'changeFixedPosition':
21
22
  return stateReducer[action.type](state, action.payload);
22
23
  case 'mouseDown':
23
24
  case 'mouseOver':
@@ -13,12 +13,18 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
13
13
  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); }
14
14
  function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
15
15
  function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
16
- import { head, isNil, last, pick } from 'lodash';
16
+ import { head, isEmpty, isNil, last, pick } from 'lodash';
17
17
  import { clipboardDataToString, flatRowCol, flatRowColIndex, formatDataToCell, getRowColConfig, groupConfigToGroupMap, stringToClipboardData } from "../util";
18
18
  export var sideEffectReducer = {
19
19
  init: function init(dispatch, getState) {
20
20
  var _getState = getState(),
21
21
  eventBus = _getState.eventBus;
22
+ eventBus.on('change-fixed-position', function (value) {
23
+ dispatch({
24
+ type: 'changeFixedPosition',
25
+ payload: value
26
+ });
27
+ });
22
28
  eventBus.on('cell-change', function (cell) {
23
29
  dispatch(function () {
24
30
  var _getState2 = getState(),
@@ -58,13 +64,13 @@ export var sideEffectReducer = {
58
64
  });
59
65
  }
60
66
  });
61
- eventBus.on("row-select", function (value) {
67
+ eventBus.on('row-select', function (value) {
62
68
  dispatch({
63
69
  type: 'selectRow',
64
70
  payload: value
65
71
  });
66
72
  });
67
- eventBus.on("col-select", function (value) {
73
+ eventBus.on('col-select', function (value) {
68
74
  dispatch({
69
75
  type: 'selectCol',
70
76
  payload: value
@@ -322,24 +328,25 @@ export var sideEffectReducer = {
322
328
  var groupMap = groupConfigToGroupMap(groupConfig);
323
329
  var cellIndex = flatRowColIndex(start, end);
324
330
  var changes = cellIndex.filter(function (item) {
325
- var _data$item$row, _data$item$row2;
326
- return !(data !== null && data !== void 0 && (_data$item$row = data[item.row]) !== null && _data$item$row !== void 0 && _data$item$row[item.col].readonly) && (data === null || data === void 0 || (_data$item$row2 = data[item.row]) === null || _data$item$row2 === void 0 ? void 0 : _data$item$row2[item.col].editable);
331
+ var _data$item$row, _data$item$row2, _data$item$row3;
332
+ return !(data !== null && data !== void 0 && (_data$item$row = data[item.row]) !== null && _data$item$row !== void 0 && _data$item$row[item.col].readonly) && (data === null || data === void 0 || (_data$item$row2 = data[item.row]) === null || _data$item$row2 === void 0 ? void 0 : _data$item$row2[item.col].allowClear) !== false && (data === null || data === void 0 || (_data$item$row3 = data[item.row]) === null || _data$item$row3 === void 0 ? void 0 : _data$item$row3[item.col].editable);
327
333
  }).filter(
328
334
  // 过滤掉分组的子行并且是关闭的状态
329
335
  function (item) {
330
336
  var _groupMap$get3, _groupMap$get4;
331
337
  return !(groupMap.get(item.row) && !((_groupMap$get3 = groupMap.get(item.row)) !== null && _groupMap$get3 !== void 0 && _groupMap$get3.isStart) && !((_groupMap$get4 = groupMap.get(item.row)) !== null && _groupMap$get4 !== void 0 && _groupMap$get4.isOpen));
332
338
  }).map(function (item) {
333
- var _data$item$row3, _data$item$row4;
339
+ var _data$item$row4, _data$item$row5, _data$item$row6;
334
340
  return {
335
- cell: data === null || data === void 0 || (_data$item$row3 = data[item.row]) === null || _data$item$row3 === void 0 ? void 0 : _data$item$row3[item.col],
341
+ cell: data === null || data === void 0 || (_data$item$row4 = data[item.row]) === null || _data$item$row4 === void 0 ? void 0 : _data$item$row4[item.col],
336
342
  row: item.row,
337
343
  col: item.col,
338
344
  value: null,
339
- id: data === null || data === void 0 || (_data$item$row4 = data[item.row]) === null || _data$item$row4 === void 0 ? void 0 : _data$item$row4[item.col].id
345
+ key: data === null || data === void 0 || (_data$item$row5 = data[item.row]) === null || _data$item$row5 === void 0 ? void 0 : _data$item$row5[item.col].dataIndex,
346
+ id: data === null || data === void 0 || (_data$item$row6 = data[item.row]) === null || _data$item$row6 === void 0 ? void 0 : _data$item$row6[item.col].id
340
347
  };
341
348
  });
342
- if (!changes.length) {
349
+ if (!changes || isEmpty(changes)) {
343
350
  return;
344
351
  }
345
352
  var newHistory = _toConsumableArray(history || []);
@@ -83,6 +83,11 @@ export var searchReducer = {
83
83
  }
84
84
  };
85
85
  export var stateReducer = _objectSpread({
86
+ changeFixedPosition: function changeFixedPosition(state, payload) {
87
+ return _objectSpread(_objectSpread({}, state), {}, {
88
+ fixedInfo: payload
89
+ });
90
+ },
86
91
  change: function change(state, payload) {
87
92
  var _ref = payload,
88
93
  key = _ref.key,
@@ -16,20 +16,6 @@ function initialData(_ref) {
16
16
  var cell = _ref.cell;
17
17
  return renderValue(cell);
18
18
  }
19
- function widthStyle(cell) {
20
- var width = typeof (cell === null || cell === void 0 ? void 0 : cell.width) === 'number' ? "".concat(cell.width, "px") : cell.width;
21
- var align = cell.align || 'left';
22
- var position = cell.fixed ? 'sticky' : 'unset';
23
- var left = cell.fixed === 'left' ? 0 : 'unset';
24
- var right = cell.fixed === 'right' ? 0 : 'unset';
25
- return {
26
- width: width,
27
- textAlign: align,
28
- position: position,
29
- left: left,
30
- right: right
31
- };
32
- }
33
19
  var Cell = function Cell(props) {
34
20
  var _cell$editable;
35
21
  var row = props.row,
@@ -39,7 +25,8 @@ var Cell = function Cell(props) {
39
25
  CellRenderer = _props$cellRenderer === void 0 ? DefaultCell : _props$cellRenderer,
40
26
  dataEditor = props.dataEditor,
41
27
  valueViewer = props.valueViewer,
42
- attributesRenderer = props.attributesRenderer;
28
+ attributesRenderer = props.attributesRenderer,
29
+ cellFixedInfo = props.cellFixedInfo;
43
30
  var eventBus = useSheetEvent();
44
31
  var _useSetState = useSetState(),
45
32
  _useSetState2 = _slicedToArray(_useSetState, 2),
@@ -101,7 +88,8 @@ var Cell = function Cell(props) {
101
88
  row: row,
102
89
  col: col,
103
90
  id: cell.id,
104
- value: value
91
+ value: value,
92
+ key: cell.dataIndex
105
93
  // 没必要format value 已经是legal 的值了
106
94
  // value: cell.dataEditor?.formatter
107
95
  // ? cell.dataEditor.formatter?.(value)
@@ -125,6 +113,7 @@ var Cell = function Cell(props) {
125
113
  col: col,
126
114
  id: cell.id,
127
115
  value: value,
116
+ key: cell.dataIndex,
128
117
  confirm: true
129
118
  });
130
119
  }, [eventBus, valueRef, cell]);
@@ -163,6 +152,25 @@ var Cell = function Cell(props) {
163
152
  return a;
164
153
  }).join(' ');
165
154
  }, [editing, selected, selectedInfo, cell.className, cell.readonly]);
155
+ var widthStyle = useMemo(function () {
156
+ var _cellFixedInfo$fixPos, _cellFixedInfo$fixPos2;
157
+ var width = typeof (cell === null || cell === void 0 ? void 0 : cell.width) === 'number' ? "".concat(cell.width, "px") : cell.width;
158
+ var align = cell.align || 'left';
159
+ var position = cell.fixed ? 'sticky' : 'unset';
160
+ var left = cell.fixed === 'left' ? (_cellFixedInfo$fixPos = cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.fixPosition) !== null && _cellFixedInfo$fixPos !== void 0 ? _cellFixedInfo$fixPos : 0 : 'unset';
161
+ var right = cell.fixed === 'right' ? (_cellFixedInfo$fixPos2 = cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.fixPosition) !== null && _cellFixedInfo$fixPos2 !== void 0 ? _cellFixedInfo$fixPos2 : 0 : 'unset';
162
+ var obj = {
163
+ width: width,
164
+ textAlign: align,
165
+ position: position,
166
+ left: left,
167
+ right: right
168
+ };
169
+ if (cell.col !== undefined && cell.col < 0 && cell.fixed === 'left') {
170
+ obj.visibility = 'collapse';
171
+ }
172
+ return obj;
173
+ }, [cellFixedInfo, cell]);
166
174
  return /*#__PURE__*/_jsx(CellRenderer, {
167
175
  row: row,
168
176
  col: col,
@@ -171,11 +179,15 @@ var Cell = function Cell(props) {
171
179
  editing: eventState.editing,
172
180
  attributesRenderer: attributesRenderer,
173
181
  className: className,
174
- style: widthStyle(cell),
182
+ style: widthStyle,
183
+ isFirstFixedRight: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isFirstFixedRight,
184
+ isLastFixedLeft: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isLastFixedLeft,
185
+ isScrolledOver: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isScrolledOver,
186
+ isScrolledToEnd: cellFixedInfo === null || cellFixedInfo === void 0 ? void 0 : cellFixedInfo.isScrolledToEnd,
175
187
  children: content
176
188
  });
177
189
  };
178
190
  export default /*#__PURE__*/memo(Cell, function (pre, next) {
179
- var shouldUpdate = pre.col === next.col && pre.row === next.row && pre.cell.value === next.cell.value && pre.cell.dataEditor === next.cell.dataEditor && pre.cell.className === next.cell.className && pre.cell.record === next.cell.record;
191
+ var shouldUpdate = pre.col === next.col && pre.row === next.row && pre.cell.value === next.cell.value && pre.cell.dataEditor === next.cell.dataEditor && pre.cell.className === next.cell.className && pre.cell.record === next.cell.record && pre.cellFixedInfo === next.cellFixedInfo;
180
192
  return shouldUpdate;
181
193
  });
@@ -7,5 +7,9 @@ declare const DefaultCell: (props: {
7
7
  className: string;
8
8
  style: Record<string, string>;
9
9
  children: React.ReactElement;
10
+ isFirstFixedRight: boolean;
11
+ isLastFixedLeft: boolean;
12
+ isScrolledOver: boolean;
13
+ isScrolledToEnd: boolean;
10
14
  }) => import("react/jsx-runtime").JSX.Element;
11
15
  export default DefaultCell;
@@ -13,14 +13,18 @@ var DefaultCell = function DefaultCell(props) {
13
13
  attributesRenderer = props.attributesRenderer,
14
14
  className = props.className,
15
15
  style = props.style,
16
- children = props.children;
16
+ children = props.children,
17
+ isFirstFixedRight = props.isFirstFixedRight,
18
+ isLastFixedLeft = props.isLastFixedLeft,
19
+ isScrolledOver = props.isScrolledOver,
20
+ isScrolledToEnd = props.isScrolledToEnd;
17
21
  var colSpan = cell.colSpan,
18
22
  rowSpan = cell.rowSpan;
19
23
  var attributes = attributesRenderer ? attributesRenderer(cell, row, col) : {};
20
24
  return /*#__PURE__*/_jsx("td", _objectSpread(_objectSpread({
21
25
  "data-row": row,
22
26
  "data-col": col,
23
- className: classNames(className, cell.fixed && 'fixed', cell.fixed && "fixed-".concat(cell.fixed), cell.dataIndex === 'index' ? "index" : null),
27
+ className: classNames(className, cell.fixed && 'fixed', cell.fixed && "fixed-".concat(cell.fixed), cell.dataIndex === 'index' ? 'index' : null, isLastFixedLeft && isScrolledOver ? "last-fixed-left" : null, isFirstFixedRight && !isScrolledToEnd ? "first-fixed-right" : null),
24
28
  colSpan: colSpan,
25
29
  rowSpan: rowSpan,
26
30
  style: style
@@ -3,6 +3,9 @@ import type { SheetType } from "../../type";
3
3
  interface DefaultRowMapperProps {
4
4
  rowData: SheetType.Cell[];
5
5
  row: number;
6
+ fixedInfo: SheetType.FixedInfo[];
7
+ isScrolledOver: boolean;
8
+ isScrolledToEnd: boolean;
6
9
  }
7
10
  export declare const DefaultRowMapper: React.FC<DefaultRowMapperProps>;
8
11
  export {};
@@ -1,15 +1,28 @@
1
+ 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); }
2
+ 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; }
3
+ 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; }
4
+ 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; }
5
+ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
6
+ 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); }
1
7
  import { memo } from 'react';
2
8
  import Cell from "./Cell";
3
9
  import { jsx as _jsx } from "react/jsx-runtime";
4
10
  import { Fragment as _Fragment } from "react/jsx-runtime";
5
11
  export var DefaultRowMapper = /*#__PURE__*/memo(function (_ref) {
6
12
  var rowData = _ref.rowData,
7
- row = _ref.row;
13
+ row = _ref.row,
14
+ fixedInfo = _ref.fixedInfo,
15
+ isScrolledOver = _ref.isScrolledOver,
16
+ isScrolledToEnd = _ref.isScrolledToEnd;
8
17
  var cls = rowData.map(function (cell, col) {
9
18
  return /*#__PURE__*/_jsx(Cell, {
10
19
  row: row,
11
20
  col: col,
12
- cell: cell
21
+ cell: cell,
22
+ cellFixedInfo: _objectSpread(_objectSpread({}, fixedInfo[col]), {}, {
23
+ isScrolledOver: isScrolledOver,
24
+ isScrolledToEnd: isScrolledToEnd
25
+ })
13
26
  }, col);
14
27
  });
15
28
  return /*#__PURE__*/_jsx(_Fragment, {
@@ -4,7 +4,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
4
4
  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; }
5
5
  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; } }
6
6
  function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
7
- import { useEffect, useImperativeHandle, useMemo, useRef } from 'react';
7
+ import { useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
8
8
  // import ReduxLogger from 'redux-logger';
9
9
  import ReduxThunk from 'redux-thunk';
10
10
  import DefaultRow from "./DefaultRow";
@@ -66,6 +66,14 @@ var Sheet = function Sheet(props) {
66
66
  _props$showQuickLocat = props.showQuickLocationBtn,
67
67
  showQuickLocationBtn = _props$showQuickLocat === void 0 ? false : _props$showQuickLocat,
68
68
  ControlContainer = props.ControlContainer;
69
+ var _useState = useState(false),
70
+ _useState2 = _slicedToArray(_useState, 2),
71
+ isScrolledOver = _useState2[0],
72
+ setIsScrolledOver = _useState2[1];
73
+ var _useState3 = useState(false),
74
+ _useState4 = _slicedToArray(_useState3, 2),
75
+ isScrolledToEnd = _useState4[0],
76
+ setIsScrolledToEnd = _useState4[1];
69
77
  var sheetWrapperRef = useRef(null);
70
78
  var contextMenuRef = useRef(null);
71
79
  var eventBus = useEventBus();
@@ -77,7 +85,8 @@ var Sheet = function Sheet(props) {
77
85
  editing: undefined,
78
86
  lastFocus: [],
79
87
  groupConfig: groupConfig,
80
- eventBus: eventBus
88
+ eventBus: eventBus,
89
+ fixedInfo: []
81
90
  },
82
91
  // [ReduxThunk, ReduxLogger],
83
92
  [ReduxThunk]),
@@ -229,12 +238,15 @@ var Sheet = function Sheet(props) {
229
238
  cells: rowData,
230
239
  rowClassName: rowCN,
231
240
  children: /*#__PURE__*/_jsx(DefaultRowMapper, {
241
+ fixedInfo: state.fixedInfo,
232
242
  rowData: rowData,
233
- row: row
243
+ row: row,
244
+ isScrolledOver: isScrolledOver,
245
+ isScrolledToEnd: isScrolledToEnd
234
246
  })
235
247
  }, row);
236
248
  });
237
- }, [visibleData, groupConfig, virtualStart, virtualEnd, rowClassName]);
249
+ }, [visibleData, groupConfig, virtualStart, virtualEnd, rowClassName, state.fixedInfo]);
238
250
  var memoHeight = Math.min(((_visibleData$length = visibleData === null || visibleData === void 0 ? void 0 : visibleData.length) !== null && _visibleData$length !== void 0 ? _visibleData$length : 0) + 1, 10) * 42 + 43;
239
251
  var _useSelectVisible = useSelectVisible(sheetWrapperRef, state.start),
240
252
  _useSelectVisible2 = _slicedToArray(_useSelectVisible, 1),
@@ -265,6 +277,23 @@ var Sheet = function Sheet(props) {
265
277
  return null;
266
278
  }, [isEmptyData, emptyRenderer]);
267
279
  var hasHorizontalScrollbar = sheetWrapperRef.current && sheetWrapperRef.current.scrollWidth > sheetWrapperRef.current.clientWidth;
280
+ var handleScroll = useCallback(function (event) {
281
+ var div = event.target;
282
+
283
+ // 当前的滚动位置
284
+ var scrollLeft = div.scrollLeft;
285
+ // 整个内容的宽度
286
+ var scrollWidth = div.scrollWidth;
287
+ // 当前可视区域的宽度
288
+ var clientWidth = div.clientWidth;
289
+ setIsScrolledOver(scrollLeft > 0);
290
+ // 判断是否滚动到底
291
+ if (scrollLeft + clientWidth >= scrollWidth) {
292
+ setIsScrolledToEnd(true);
293
+ } else {
294
+ setIsScrolledToEnd(false);
295
+ }
296
+ }, []);
268
297
  return /*#__PURE__*/_jsx(SheetEventContext.Provider, {
269
298
  value: eventBus,
270
299
  children: /*#__PURE__*/_jsxs(_Fragment, {
@@ -280,8 +309,11 @@ var Sheet = function Sheet(props) {
280
309
  maxHeight: (_scroll$y = scroll === null || scroll === void 0 ? void 0 : scroll.y) !== null && _scroll$y !== void 0 ? _scroll$y : memoHeight,
281
310
  width: (_scroll$x = scroll === null || scroll === void 0 ? void 0 : scroll.x) !== null && _scroll$x !== void 0 ? _scroll$x : '100%'
282
311
  },
312
+ onScroll: handleScroll,
283
313
  children: [/*#__PURE__*/_jsxs(SheetShell, {
284
314
  className: classNames('harvest-sheet', className),
315
+ isScrolledOver: isScrolledOver,
316
+ isScrolledToEnd: isScrolledToEnd,
285
317
  children: [/*#__PURE__*/_jsx(VirtualizeStart, {
286
318
  virtualized: virtualized,
287
319
  paddingTop: paddingTop
@@ -51,7 +51,7 @@ span.harvest-sheet-container:focus {
51
51
 
52
52
  th.cell-title {
53
53
  line-height: var(--row-height);
54
- border-bottom: 1px solid transparent;
54
+ border-bottom: none;
55
55
  }
56
56
 
57
57
  td {
@@ -89,36 +89,50 @@ span.harvest-sheet-container:focus {
89
89
  z-index: 3;
90
90
  }
91
91
 
92
+ &::before {
93
+ position: absolute;
94
+ top: -1px;
95
+ left: 0;
96
+ width: calc(100% + 1px);
97
+ height: calc(100% + 2px);
98
+ border-top: 1px solid;
99
+ border-bottom: 1px solid;
100
+ border-right: 1px solid;
101
+ border-color: var(--cell-border-color);
102
+ content: '';
103
+ }
92
104
 
93
105
  &.fixed-left::after {
94
106
  position: absolute;
95
107
  z-index: 3;
96
108
  top: 0;
97
109
  bottom: -1px;
98
- right: 0;
99
- width: 30px;
100
- // border-left: 1px solid var(--cell-border-color);
101
- content: '';
110
+ right: 0px;
111
+ border-left: 1px solid var(--cell-border-color);
102
112
  pointer-events: none;
103
113
  transform: translate(100%);
104
- transition: box-shadow 0.3s;
105
- // box-shadow: var(--cell-fixed-box-shadow-left);
114
+ content: '';
106
115
  }
107
116
 
108
- &.fixed-right {
109
- transform: translateX(1px);
117
+ &.last-fixed-left::after {
118
+ width: 30px;
119
+ transition: box-shadow 0.3s;
120
+ box-shadow: var(--cell-fixed-box-shadow-left);
110
121
  }
111
122
 
112
123
  &.fixed-right::after {
113
124
  position: absolute;
114
125
  top: 0;
115
- bottom: -1px;
116
- left: -1px;
117
- width: 30px;
126
+ bottom: 0;
127
+ left: 0;
118
128
  border-right: 1px solid var(--cell-border-color);
119
129
  content: '';
120
130
  pointer-events: none;
121
131
  transform: translate(-100%);
132
+ }
133
+
134
+ &.first-fixed-right::after {
135
+ width: 30px;
122
136
  transition: box-shadow 0.3s;
123
137
  box-shadow: var(--cell-fixed-box-shadow-right);
124
138
  }
@@ -160,12 +174,12 @@ span.harvest-sheet-container:focus {
160
174
  }
161
175
 
162
176
  .harvest-sheet-container .harvest-sheet .cell.sheet-control {
163
- border-right: 1px solid transparent;
177
+ border-right-color: transparent;
164
178
  background: var(--cell-background-color);
165
179
  color: var(--read-color);
166
180
 
167
181
  &.read-only {
168
- border-right: 1px solid var(--cell-title-background-color);
182
+ // border-right: 1px solid var(--cell-title-background-color);
169
183
  }
170
184
 
171
185
  // position: relative !important;
@@ -183,7 +197,17 @@ span.harvest-sheet-container:focus {
183
197
  }
184
198
 
185
199
  .harvest-sheet-container .harvest-sheet .cell-title.sheet-control {
186
- border-right: 1px solid var(--cell-title-background-color);
200
+ // border-right: 1px solid var(--cell-title-background-color);
201
+ &::after {
202
+ position: absolute;
203
+ top: 0;
204
+ bottom: 0;
205
+ right: -2px;
206
+ border-right: 1px solid var(--cell-title-background-color);
207
+ content: '';
208
+ pointer-events: none;
209
+ transform: translate(-100%);
210
+ }
187
211
  }
188
212
 
189
213
  .harvest-sheet-container .harvest-sheet .cell.cell-title {
@@ -302,7 +326,6 @@ span.harvest-sheet-container:focus {
302
326
  margin-right: 0;
303
327
  }
304
328
  }
305
-
306
329
  }
307
330
 
308
331
  .harvest-search-text {
@@ -3,4 +3,6 @@ import type { SheetType } from "../../../type";
3
3
  import './index.less';
4
4
  export declare const DraggableShell: ({ columns, className, showGroup, showSelect, controlProps, controlWidth, }: SheetType.SheetShell) => import("react").FC<{
5
5
  children: React.ReactElement;
6
+ isScrolledOver: boolean;
7
+ isScrolledToEnd: boolean;
6
8
  }>;
@@ -26,7 +26,9 @@ export var DraggableShell = function DraggableShell(_ref) {
26
26
  _ref$controlWidth = _ref.controlWidth,
27
27
  controlWidth = _ref$controlWidth === void 0 ? 30 : _ref$controlWidth;
28
28
  var TableShell = function TableShell(_ref2) {
29
- var children = _ref2.children;
29
+ var children = _ref2.children,
30
+ isScrolledOver = _ref2.isScrolledOver,
31
+ isScrolledToEnd = _ref2.isScrolledToEnd;
30
32
  var headRef = useRef(null);
31
33
  var downRef = useRef(null);
32
34
  var _useSetState = useSetState({}),
@@ -41,10 +43,49 @@ export var DraggableShell = function DraggableShell(_ref) {
41
43
  var widths = contextWidths || _widths;
42
44
  var hasControl = showGroup || showSelect;
43
45
  var offset = 1 + (hasControl ? 1 : 0);
46
+ var colItems = useMemo(function () {
47
+ var cols = [/*#__PURE__*/_jsx("col", {
48
+ className: classNames('sheet-control sheet-row-cursor'),
49
+ style: {
50
+ width: 0,
51
+ border: 'none'
52
+ }
53
+ }, "sheet-row-cursor")];
54
+ if (hasControl) {
55
+ cols.push( /*#__PURE__*/_jsx("col", {
56
+ className: classNames('sheet-control'),
57
+ style: {
58
+ width: controlWidth
59
+ }
60
+ }, "sheet-control"));
61
+ }
62
+ var i = 0;
63
+ columns.forEach(function (item, index) {
64
+ var _item$titleConfig, _item$dataIndex;
65
+ var currentWidth = item.width || 'unset';
66
+ if (((_item$titleConfig = item.titleConfig) === null || _item$titleConfig === void 0 ? void 0 : _item$titleConfig.colSpan) !== 0) {
67
+ currentWidth = widths[i] || item.width || 'unset';
68
+ i++;
69
+ }
70
+ cols.push( /*#__PURE__*/_jsx("col", {
71
+ className: classNames('cell'),
72
+ style: {
73
+ width: currentWidth,
74
+ border: 'none'
75
+ }
76
+ }, (_item$dataIndex = item.dataIndex) !== null && _item$dataIndex !== void 0 ? _item$dataIndex : index));
77
+ });
78
+ return cols;
79
+ }, [widths, hasControl, columns]);
44
80
  var thItems = useMemo(function () {
45
81
  var ths = [/*#__PURE__*/_jsx("th", {
46
82
  className: "cell cell-title read-only sheet-control sheet-row-cursor"
47
83
  }, -2)];
84
+ var positionArr = [{
85
+ isLastFixedLeft: false,
86
+ isFirstFixedRight: false,
87
+ fixPosition: 0
88
+ }];
48
89
  if (hasControl) {
49
90
  var _controlProps$group, _controlProps$check, _controlProps$check2, _controlProps$check3;
50
91
  ths.push( /*#__PURE__*/_jsxs("th", {
@@ -68,27 +109,55 @@ export var DraggableShell = function DraggableShell(_ref) {
68
109
  }
69
110
  })]
70
111
  }, "-1"));
112
+ positionArr.push({
113
+ isLastFixedLeft: false,
114
+ isFirstFixedRight: false,
115
+ fixPosition: 0
116
+ });
71
117
  }
118
+ var fixLeftPosition = 0;
119
+ var fixRightPosition = columns.reduce(function (pre, cur, index) {
120
+ if (cur.fixed === 'right') {
121
+ var positionIndex = hasControl ? index + 2 : index + 1;
122
+ return pre + colItems[positionIndex].props.style.width;
123
+ }
124
+ return pre + 0;
125
+ }, 0);
72
126
  columns.forEach(function (item, index) {
73
- var _item$titleConfig, _item$titleConfig2, _item$titleConfig3, _item$dataIndex, _ref3;
74
- ((_item$titleConfig = item.titleConfig) === null || _item$titleConfig === void 0 ? void 0 : _item$titleConfig.colSpan) !== 0 && ths.push( /*#__PURE__*/_jsx("th", {
75
- className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed), (_item$titleConfig2 = item.titleConfig) === null || _item$titleConfig2 === void 0 ? void 0 : _item$titleConfig2.className),
76
- colSpan: (_item$titleConfig3 = item.titleConfig) === null || _item$titleConfig3 === void 0 ? void 0 : _item$titleConfig3.colSpan,
127
+ var _item$titleConfig2, _item$titleConfig3, _item$titleConfig4, _item$dataIndex2, _ref3;
128
+ var positionIndex = hasControl ? index + 2 : index + 1;
129
+ if (item.fixed === 'right') {
130
+ fixRightPosition -= colItems[positionIndex].props.style.width;
131
+ }
132
+ var isLastFixedLeft = item.fixed === 'left' && !columns.slice(index + 1).some(function (item) {
133
+ return item.fixed === 'left';
134
+ });
135
+ var isFirstFixedRight = item.fixed === 'right' && !columns.slice(0, index).some(function (item) {
136
+ return item.fixed === 'right';
137
+ });
138
+ positionArr.push({
139
+ isLastFixedLeft: isLastFixedLeft,
140
+ isFirstFixedRight: isFirstFixedRight,
141
+ fixPosition: item.fixed === 'right' ? fixRightPosition : fixLeftPosition
142
+ });
143
+ ((_item$titleConfig2 = item.titleConfig) === null || _item$titleConfig2 === void 0 ? void 0 : _item$titleConfig2.colSpan) !== 0 && ths.push( /*#__PURE__*/_jsx("th", {
144
+ className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed), (_item$titleConfig3 = item.titleConfig) === null || _item$titleConfig3 === void 0 ? void 0 : _item$titleConfig3.className, isLastFixedLeft && isScrolledOver ? "last-fixed-left" : '', isFirstFixedRight && !isScrolledToEnd ? "first-fixed-right" : ''),
145
+ colSpan: (_item$titleConfig4 = item.titleConfig) === null || _item$titleConfig4 === void 0 ? void 0 : _item$titleConfig4.colSpan,
77
146
  onClick: function onClick(e) {
78
147
  if (item.fixed) return;
79
148
  var target = e.target;
80
149
  if (e.nativeEvent.offsetX <= target.offsetWidth - 8) {
81
- var _item$titleConfig4;
150
+ var _item$titleConfig5;
82
151
  eventBus.emit('col-select', {
83
- col: index + offset,
84
- colSpan: (_item$titleConfig4 = item.titleConfig) === null || _item$titleConfig4 === void 0 ? void 0 : _item$titleConfig4.colSpan
152
+ col: hasControl ? index + 1 : index,
153
+ colSpan: (_item$titleConfig5 = item.titleConfig) === null || _item$titleConfig5 === void 0 ? void 0 : _item$titleConfig5.colSpan
85
154
  });
86
155
  }
87
156
  },
88
157
  style: {
89
158
  textAlign: (_ref3 = item.align) !== null && _ref3 !== void 0 ? _ref3 : 'unset',
90
- left: item.fixed === 'left' ? 0 : 'unset',
91
- right: item.fixed === 'right' ? 0 : 'unset'
159
+ left: item.fixed === 'left' ? fixLeftPosition : 'unset',
160
+ right: item.fixed === 'right' ? fixRightPosition : 'unset'
92
161
  },
93
162
  onMouseDown: function onMouseDown(e) {
94
163
  var target = e.target;
@@ -123,43 +192,16 @@ export var DraggableShell = function DraggableShell(_ref) {
123
192
  className: "value-viewer",
124
193
  children: typeof item.title === 'function' ? /*#__PURE__*/createElement(item.title) : item.title
125
194
  })
126
- }, (_item$dataIndex = item.dataIndex) !== null && _item$dataIndex !== void 0 ? _item$dataIndex : index));
127
- });
128
- return ths;
129
- }, [columns, offset]);
130
- var colItems = useMemo(function () {
131
- var cols = [/*#__PURE__*/_jsx("col", {
132
- className: classNames('sheet-control sheet-row-cursor'),
133
- style: {
134
- width: 0,
135
- border: 'none'
136
- }
137
- }, "sheet-row-cursor")];
138
- if (hasControl) {
139
- cols.push( /*#__PURE__*/_jsx("col", {
140
- className: classNames('sheet-control'),
141
- style: {
142
- width: controlWidth
143
- }
144
- }, "sheet-control"));
145
- }
146
- var i = 0;
147
- columns.forEach(function (item, index) {
148
- var _item$titleConfig5, _item$dataIndex2;
149
- var currentWidth = item.width || 'unset';
150
- if (((_item$titleConfig5 = item.titleConfig) === null || _item$titleConfig5 === void 0 ? void 0 : _item$titleConfig5.colSpan) !== 0) {
151
- currentWidth = widths[i] || item.width || 'unset';
152
- i++;
153
- }
154
- cols.push( /*#__PURE__*/_jsx("col", {
155
- className: classNames('cell'),
156
- style: {
157
- width: currentWidth
158
- }
159
195
  }, (_item$dataIndex2 = item.dataIndex) !== null && _item$dataIndex2 !== void 0 ? _item$dataIndex2 : index));
196
+ if (item.fixed === 'left') {
197
+ fixLeftPosition += colItems[positionIndex].props.style.width;
198
+ }
160
199
  });
161
- return cols;
162
- }, [widths, hasControl, columns]);
200
+ setTimeout(function () {
201
+ eventBus.emit('change-fixed-position', positionArr);
202
+ }, 16);
203
+ return ths;
204
+ }, [columns, colItems, isScrolledOver, isScrolledToEnd]);
163
205
  useEffect(function () {
164
206
  var handleMouseUp = function handleMouseUp() {
165
207
  //结束宽度调整
@@ -3,4 +3,6 @@ import type { SheetType } from "../../type";
3
3
  import './draggableShell/index.less';
4
4
  export declare const TableShell: ({ columns, className, showGroup, showSelect, controlProps, controlWidth, }: SheetType.SheetShell) => import("react").FC<{
5
5
  children: React.ReactElement;
6
+ isScrolledOver: boolean;
7
+ isScrolledToEnd: boolean;
6
8
  }>;
@@ -1,9 +1,9 @@
1
1
  import { useMemo } from 'react';
2
+ import { useSheetEvent } from "../../hooks";
2
3
  import { classNames } from "../util";
3
4
  import { CheckViewer } from "../viewer/checkViewer";
4
5
  import { GroupViewer } from "../viewer/groupViewer";
5
6
  import "./draggableShell/index.less";
6
- import { useSheetEvent } from "../../hooks";
7
7
  import { jsx as _jsx } from "react/jsx-runtime";
8
8
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
9
  import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -15,12 +15,38 @@ export var TableShell = function TableShell(_ref) {
15
15
  controlProps = _ref.controlProps,
16
16
  _ref$controlWidth = _ref.controlWidth,
17
17
  controlWidth = _ref$controlWidth === void 0 ? 30 : _ref$controlWidth;
18
- var eventBus = useSheetEvent();
19
18
  var TableShell = function TableShell(_ref2) {
20
- var children = _ref2.children;
19
+ var children = _ref2.children,
20
+ isScrolledOver = _ref2.isScrolledOver,
21
+ isScrolledToEnd = _ref2.isScrolledToEnd;
22
+ var eventBus = useSheetEvent();
23
+ var colItems = useMemo(function () {
24
+ var cols = [];
25
+ if (showGroup || showSelect) {
26
+ cols.push( /*#__PURE__*/_jsx("col", {
27
+ className: classNames('sheet-control'),
28
+ style: {
29
+ width: controlWidth,
30
+ border: 'none'
31
+ }
32
+ }, "sheet-control"));
33
+ }
34
+ columns.forEach(function (item, index) {
35
+ cols.push( /*#__PURE__*/_jsx("col", {
36
+ className: classNames('cell'),
37
+ style: {
38
+ width: item.width || 'unset',
39
+ border: 'none'
40
+ }
41
+ }, item.dataIndex || index));
42
+ });
43
+ return cols;
44
+ }, [columns, showGroup || showSelect, controlWidth]);
21
45
  var thItems = useMemo(function () {
22
46
  var ths = [];
23
- if (showGroup || showSelect) {
47
+ var hasControl = showGroup || showSelect;
48
+ var positionArr = [];
49
+ if (hasControl) {
24
50
  var _controlProps$group, _controlProps$check, _controlProps$check2, _controlProps$check3;
25
51
  ths.push( /*#__PURE__*/_jsxs("th", {
26
52
  className: "cell cell-title read-only sheet-control",
@@ -43,11 +69,39 @@ export var TableShell = function TableShell(_ref) {
43
69
  }
44
70
  })]
45
71
  }, "-1"));
72
+ positionArr.push({
73
+ isLastFixedLeft: false,
74
+ isFirstFixedRight: false,
75
+ fixPosition: 0
76
+ });
46
77
  }
78
+ var fixLeftPosition = 0;
79
+ var fixRightPosition = columns.reduce(function (pre, cur, index) {
80
+ if (cur.fixed === 'right') {
81
+ var positionIndex = hasControl ? index + 1 : index;
82
+ return pre + colItems[positionIndex].props.style.width;
83
+ }
84
+ return pre + 0;
85
+ }, 0);
47
86
  columns.forEach(function (item, index) {
48
87
  var _item$titleConfig, _item$titleConfig2, _ref3;
88
+ var positionIndex = hasControl ? index + 1 : index;
89
+ if (item.fixed === 'right') {
90
+ fixRightPosition -= colItems[positionIndex].props.style.width;
91
+ }
92
+ var isLastFixedLeft = item.fixed === 'left' && !columns.slice(index + 1).some(function (item) {
93
+ return item.fixed === 'left';
94
+ });
95
+ var isFirstFixedRight = item.fixed === 'right' && !columns.slice(0, index).some(function (item) {
96
+ return item.fixed === 'right';
97
+ });
98
+ positionArr.push({
99
+ isLastFixedLeft: isLastFixedLeft,
100
+ isFirstFixedRight: isFirstFixedRight,
101
+ fixPosition: item.fixed === 'right' ? fixRightPosition : fixLeftPosition
102
+ });
49
103
  ((_item$titleConfig = item.titleConfig) === null || _item$titleConfig === void 0 ? void 0 : _item$titleConfig.colSpan) !== 0 && ths.push( /*#__PURE__*/_jsx("th", {
50
- className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed)),
104
+ className: classNames('cell', 'cell-title', 'read-only', item.fixed && 'fixed', item.fixed && "fixed-".concat(item.fixed), isLastFixedLeft && isScrolledOver ? "last-fixed-left" : '', isFirstFixedRight && !isScrolledToEnd ? "first-fixed-right" : ''),
51
105
  colSpan: (_item$titleConfig2 = item.titleConfig) === null || _item$titleConfig2 === void 0 ? void 0 : _item$titleConfig2.colSpan,
52
106
  onClick: function onClick() {
53
107
  eventBus.emit('col-select', {
@@ -57,37 +111,23 @@ export var TableShell = function TableShell(_ref) {
57
111
  style: {
58
112
  textAlign: (_ref3 = item.align) !== null && _ref3 !== void 0 ? _ref3 : 'unset',
59
113
  cursor: 'e-resizer',
60
- left: item.fixed === 'left' ? 0 : 'unset',
61
- right: item.fixed === 'right' ? 0 : 'unset'
114
+ left: item.fixed === 'left' ? fixLeftPosition : 'unset',
115
+ right: item.fixed === 'right' ? fixRightPosition : 'unset'
62
116
  },
63
117
  children: /*#__PURE__*/_jsx("span", {
64
118
  className: "value-viewer",
65
119
  children: item.title
66
120
  })
67
121
  }, item.dataIndex || index));
122
+ if (item.fixed === 'left') {
123
+ fixLeftPosition += colItems[positionIndex].props.style.width;
124
+ }
68
125
  });
126
+ setTimeout(function () {
127
+ eventBus.emit('change-fixed-position', positionArr);
128
+ }, 16);
69
129
  return ths;
70
- }, [columns, showGroup || showSelect, controlProps]);
71
- var colItems = useMemo(function () {
72
- var cols = [];
73
- if (showGroup || showSelect) {
74
- cols.push( /*#__PURE__*/_jsx("col", {
75
- className: classNames('sheet-control'),
76
- style: {
77
- width: controlWidth
78
- }
79
- }, "sheet-control"));
80
- }
81
- columns.forEach(function (item, index) {
82
- cols.push( /*#__PURE__*/_jsx("col", {
83
- className: classNames('cell'),
84
- style: {
85
- width: item.width || 'unset'
86
- }
87
- }, item.dataIndex || index));
88
- });
89
- return cols;
90
- }, [columns, showGroup || showSelect, controlWidth]);
130
+ }, [columns, showGroup || showSelect, controlProps, isScrolledOver, isScrolledToEnd]);
91
131
  return /*#__PURE__*/_jsxs(_Fragment, {
92
132
  children: [/*#__PURE__*/_jsxs("table", {
93
133
  className: classNames('header', 'harvest-sheet', className),
@@ -99,7 +99,7 @@ var Table = function Table(_ref) {
99
99
  col: item.col,
100
100
  row: item.row,
101
101
  id: item.id,
102
- key: columns[item.col - offset].dataIndex,
102
+ key: item.key || columns[item.col - offset].dataIndex,
103
103
  value: item.value
104
104
  };
105
105
  }), extChange === null || extChange === void 0 ? void 0 : extChange.map(function (item) {
@@ -107,7 +107,7 @@ var Table = function Table(_ref) {
107
107
  col: item.col,
108
108
  row: item.row,
109
109
  id: item.id,
110
- key: columns[item.col - offset].dataIndex,
110
+ key: item.key || columns[item.col - offset].dataIndex,
111
111
  value: item.value
112
112
  };
113
113
  }));
@@ -164,6 +164,7 @@ export var formatGroupData = function formatGroupData(param) {
164
164
  className: !(((_colInfo$cellConfig = colInfo.cellConfig) === null || _colInfo$cellConfig === void 0 ? void 0 : _colInfo$cellConfig.className) instanceof Function) ? (_colInfo$cellConfig2 = colInfo.cellConfig) === null || _colInfo$cellConfig2 === void 0 ? void 0 : _colInfo$cellConfig2.className : (_colInfo$cellConfig3 = colInfo.cellConfig) === null || _colInfo$cellConfig3 === void 0 ? void 0 : _colInfo$cellConfig3.className(value, itemRow, currentIndex),
165
165
  dataIndex: colInfo.dataIndex,
166
166
  key: colInfo.key,
167
+ allowClear: colInfo.allowClear,
167
168
  col: col
168
169
  });
169
170
  });
@@ -81,6 +81,7 @@ export var formatSelectionData = function formatSelectionData(param) {
81
81
  row: row,
82
82
  col: col,
83
83
  dataIndex: colInfo.dataIndex,
84
+ allowClear: colInfo.allowClear,
84
85
  key: colInfo.key
85
86
  });
86
87
  });
@@ -96,8 +96,8 @@ var columns = [{
96
96
  editor: Precision2Number,
97
97
  readonly: function readonly(value, record, row) {
98
98
  return row === 1;
99
- }
100
- // fixed: 'left',
99
+ },
100
+ fixed: 'left'
101
101
  }, {
102
102
  title: 'price',
103
103
  width: 100,
@@ -106,8 +106,8 @@ var columns = [{
106
106
  editor: Precision2MoneyEditor,
107
107
  readonly: function readonly(value, record, row) {
108
108
  return row === 1;
109
- }
110
- // fixed: 'left',
109
+ },
110
+ fixed: 'left'
111
111
  }, {
112
112
  title: 'date',
113
113
  width: 150,
@@ -120,7 +120,10 @@ var columns = [{
120
120
  width: 200,
121
121
  dataIndex: 'select',
122
122
  render: getSelectorViewer(SelectorOptions),
123
- editor: getSelectEditor(SelectorOptions, 'label')
123
+ editor: getSelectEditor(SelectorOptions, 'label', undefined, {
124
+ allowClear: false
125
+ }),
126
+ allowClear: false
124
127
  }, {
125
128
  title: 'Column 2',
126
129
  width: 200,
@@ -161,12 +164,14 @@ var columns = [{
161
164
  title: 'Column 7',
162
165
  width: 200,
163
166
  dataIndex: 'address6',
164
- key: '7'
167
+ key: '7',
168
+ fixed: 'right'
165
169
  }, {
166
170
  title: 'Column 8',
167
171
  width: 200,
168
172
  dataIndex: 'address7',
169
- key: '8'
173
+ key: '8',
174
+ fixed: 'right'
170
175
  }, {
171
176
  title: 'Action',
172
177
  align: SheetType.CellAlign.center,
@@ -193,7 +198,14 @@ var data = [{
193
198
  address2: '打开对话框2',
194
199
  age: 2,
195
200
  select: '222222',
196
- address: 'London Park'
201
+ address: 'London Park',
202
+ children: [{
203
+ key: '11',
204
+ name: 'John Brown',
205
+ date: '2020-01-01',
206
+ open: true,
207
+ age: 1
208
+ }]
197
209
  }];
198
210
  var App = function App() {
199
211
  var _useState = useState(data),
@@ -270,7 +282,7 @@ var App = function App() {
270
282
  freePaste: true,
271
283
  draggable: true,
272
284
  sheetInstance: sheetInstance,
273
- columns: antColumns,
285
+ columns: columns,
274
286
  dataSource: state,
275
287
  scroll: {
276
288
  x: '100%'
@@ -29,6 +29,14 @@ export type Cell = {
29
29
  align?: CellAlign;
30
30
  fixed?: Omit<CellAlign, 'center'>;
31
31
  value?: string | number | null;
32
+ allowClear?: boolean;
33
+ };
34
+ export type FixedInfo = {
35
+ isFirstFixedRight: boolean;
36
+ isLastFixedLeft: boolean;
37
+ fixPosition: number;
38
+ isScrolledOver?: boolean;
39
+ isScrolledToEnd?: boolean;
32
40
  };
33
41
  export type CellViewerProps = {
34
42
  value: unknown;
@@ -58,6 +66,7 @@ export type CellData = {
58
66
  cell: Cell;
59
67
  row: number;
60
68
  col: number;
69
+ key?: string;
61
70
  value?: string;
62
71
  };
63
72
  export type CellNavigable = (cell?: Cell, row?: number, col?: number) => boolean;
@@ -174,6 +183,7 @@ export type CellProps = {
174
183
  dataEditor?: React.ElementType;
175
184
  valueViewer?: React.ElementType;
176
185
  attributesRenderer?: AttributesRenderer;
186
+ cellFixedInfo: SheetType.FixedInfo;
177
187
  };
178
188
  export type SearchState = {
179
189
  showSearch: boolean;
@@ -215,6 +225,7 @@ export type UpdateStateType = {
215
225
  confirm?: boolean;
216
226
  };
217
227
  cellChangeHandler: (cells: CellData[], additions?: CellData[]) => void;
228
+ fixedInfo: SheetType.FixedInfo[];
218
229
  } & SearchState;
219
230
  export type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
220
231
  export type Options<T = any> = {
@@ -34,6 +34,7 @@ export type ColumnProps = {
34
34
  key?: string;
35
35
  editable?: boolean | RecordRowMap<boolean>;
36
36
  readonly?: boolean | RecordRowMap<boolean>;
37
+ allowClear?: boolean;
37
38
  render?: SheetType.CellViewer;
38
39
  editor?: SheetType.CellEditor;
39
40
  searchKey?: (value: unknown, record: Record<string, unknown>) => string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zhenliang/sheet",
3
- "version": "0.1.67",
3
+ "version": "0.1.69",
4
4
  "description": "A react library developed with dumi",
5
5
  "license": "MIT",
6
6
  "module": "dist/index.js",
@@ -80,4 +80,4 @@
80
80
  "authors": [
81
81
  "fizz.zhou@ap.jll.com"
82
82
  ]
83
- }
83
+ }
package/changes.md DELETED
@@ -1,45 +0,0 @@
1
- ### 为什么要重写
2
-
3
- #### 存在问题
4
-
5
- 1、表格选择逻辑与虚拟列表的冲突
6
- 2、表格的刷新机制: setRefresh(在多人开发的时候不便维护)
7
- 3、回调地狱
8
- 4、无法从 jll-portal 中剥离,有些地方与业务字段耦合
9
-
10
- #### 后果
11
-
12
- 1、新增功能难度大
13
- 2、修改容易出 bug
14
- 3、不利于业务代码优化和重构
15
-
16
- ### 重写后的表格
17
-
18
- #### 优点
19
-
20
- 1、维护性
21
- 2、扩展性
22
- 3、新的功能
23
-
24
- #### 新的 API
25
-
26
- 1、TableProps
27
-
28
- | 表头 | 表头 | 表头 |
29
- | -------------------------------------------- | ----------------------- | ---- |
30
- | className | container 类名 | 无 | |
31
- | | sheetInstance | sheet 对外暴露的一些 API | 选中行,参与回滚等 | |
32
-
33
- | columns | 表格列 | 无 ,必填 |
34
- | dataSource | 数据源 | 无,必填 |
35
- | virtualized |虚拟列表 | false |
36
- | draggable | 列宽可调整 | false |
37
- | rowClassName | 行类名 | 无 |
38
- | rowKey | 唯一标识字段 | key , id |
39
- | scroll | 同 antd table | {y:Math.min(400,row \* 40)} |
40
- | rowSelection | 选中行的配置 | 尚未完全实现 |
41
- | groupConfig | 表格分组 | 表格内部自动支持,对外配置尚未完全实现 |
42
- | onChange | 表格 cell change handler | 无 |
43
- | eventHandler | 自定义事件 handler | Record<string,(value:unknown)=>void> |
44
-
45
- 2、 ColumnProps