@zhenliang/sheet 0.0.2 → 0.0.3
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.
- package/dist/core/editor/cascaderEditor/index.d.ts +1 -1
- package/dist/core/editor/cascaderEditor/index.js +1 -0
- package/dist/core/editor/dateEditor/index.less +4 -0
- package/dist/core/editor/index.d.ts +1 -1
- package/dist/core/editor/index.js +1 -1
- package/dist/core/editor/numberEditor/index.d.ts +2 -0
- package/dist/core/editor/numberEditor/index.js +29 -0
- package/dist/core/editor/selectEditor/index.d.ts +1 -1
- package/dist/core/sheet/Event.d.ts +1 -1
- package/dist/core/sheet/Event.js +1 -1
- package/dist/core/sheet/index.less +6 -1
- package/dist/core/table/index.d.ts +1 -1
- package/dist/core/table/index.js +9 -2
- package/dist/core/viewer/btnViewer/index.d.ts +2 -0
- package/dist/core/viewer/btnViewer/index.js +37 -0
- package/dist/core/viewer/editViewer/index.d.ts +2 -0
- package/dist/core/viewer/editViewer/index.js +31 -0
- package/dist/core/viewer/index.d.ts +5 -0
- package/dist/core/viewer/index.js +5 -0
- package/dist/core/viewer/switchViewer/index.d.ts +2 -0
- package/dist/core/viewer/switchViewer/index.js +22 -0
- package/dist/example/antComponent.d.ts +3 -0
- package/dist/example/antComponent.js +216 -0
- package/dist/type/sheet.d.ts +17 -14
- package/dist/type/sheet.js +8 -1
- package/dist/type/sheetTable.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SheetType } from "../../../type";
|
|
2
2
|
import 'antd/es/cascader/style/index.css';
|
|
3
3
|
import './index.less';
|
|
4
|
-
declare const getCascaderEditor: (options: SheetType.OptionsType[]) =>
|
|
4
|
+
declare const getCascaderEditor: (options: SheetType.OptionsType[]) => SheetType.CellEditor;
|
|
5
5
|
export default getCascaderEditor;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as getCascaderEditor } from './cascaderEditor';
|
|
2
2
|
export { DateEditor } from './dateEditor';
|
|
3
|
-
export { NumberEditor } from './numberEditor';
|
|
3
|
+
export { getNumberEditor, NumberEditor } from './numberEditor';
|
|
4
4
|
export { default as getSelectEditor } from './selectEditor';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { default as getCascaderEditor } from "./cascaderEditor";
|
|
2
2
|
export { DateEditor } from "./dateEditor";
|
|
3
|
-
export { NumberEditor } from "./numberEditor";
|
|
3
|
+
export { getNumberEditor, NumberEditor } from "./numberEditor";
|
|
4
4
|
export { default as getSelectEditor } from "./selectEditor";
|
|
@@ -1,4 +1,6 @@
|
|
|
1
1
|
import type { SheetType } from "../../../type";
|
|
2
|
+
import { InputNumberProps } from 'antd';
|
|
2
3
|
import 'antd/es/input-number/style/index.css';
|
|
3
4
|
import './index.less';
|
|
4
5
|
export declare const NumberEditor: SheetType.CellEditor;
|
|
6
|
+
export declare const getNumberEditor: (extraProps: Pick<InputNumberProps, 'max' | 'min' | 'addonBefore' | 'addonAfter' | 'precision'>) => SheetType.CellEditor;
|
|
@@ -1,3 +1,9 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
+
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); }
|
|
1
7
|
import { InputNumber as AntInputNumber } from 'antd';
|
|
2
8
|
import 'antd/es/input-number/style/index.css';
|
|
3
9
|
import { useEffect, useRef } from 'react';
|
|
@@ -22,4 +28,27 @@ export var NumberEditor = function NumberEditor(props) {
|
|
|
22
28
|
addonAfter: "%",
|
|
23
29
|
onChange: onChange
|
|
24
30
|
});
|
|
31
|
+
};
|
|
32
|
+
export var getNumberEditor = function getNumberEditor(extraProps) {
|
|
33
|
+
var NumberEditor = function NumberEditor(props) {
|
|
34
|
+
var value = props.value,
|
|
35
|
+
onChange = props.onChange;
|
|
36
|
+
var inputNumberRef = useRef(null);
|
|
37
|
+
useEffect(function () {
|
|
38
|
+
var _inputNumberRef$curre2;
|
|
39
|
+
inputNumberRef === null || inputNumberRef === void 0 ? void 0 : (_inputNumberRef$curre2 = inputNumberRef.current) === null || _inputNumberRef$curre2 === void 0 ? void 0 : _inputNumberRef$curre2.focus();
|
|
40
|
+
}, []);
|
|
41
|
+
return /*#__PURE__*/_jsx(AntInputNumber, _objectSpread(_objectSpread({
|
|
42
|
+
ref: inputNumberRef
|
|
43
|
+
}, extraProps), {}, {
|
|
44
|
+
controls: false,
|
|
45
|
+
className: "number-editor",
|
|
46
|
+
onMouseDown: function onMouseDown(e) {
|
|
47
|
+
return e.stopPropagation();
|
|
48
|
+
},
|
|
49
|
+
value: value,
|
|
50
|
+
onChange: onChange
|
|
51
|
+
}));
|
|
52
|
+
};
|
|
53
|
+
return NumberEditor;
|
|
25
54
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { SheetType } from "../../../type";
|
|
2
2
|
import 'antd/es/select/style/index.css';
|
|
3
3
|
import './index.less';
|
|
4
|
-
export declare const getSelectEditor: (options:
|
|
4
|
+
export declare const getSelectEditor: (options: SheetType.Options[]) => SheetType.CellEditor;
|
|
5
5
|
export default getSelectEditor;
|
package/dist/core/sheet/Event.js
CHANGED
|
@@ -41,7 +41,10 @@ span.harvest-sheet-container, span.harvest-sheet-container:focus {
|
|
|
41
41
|
.harvest-sheet-container .harvest-sheet .cell {
|
|
42
42
|
height: 17px;
|
|
43
43
|
font-size: var(--cell-font-size);
|
|
44
|
-
padding:var(--cell-padding-
|
|
44
|
+
padding-left:var(--cell-padding-horizontal);
|
|
45
|
+
padding-right:var(--cell-padding-horizontal);
|
|
46
|
+
padding-top:var(--cell-padding-vertical);
|
|
47
|
+
padding-bottom:var(--cell-padding-vertical);
|
|
45
48
|
border: 1px solid var(--cell-border-color);
|
|
46
49
|
background-color: var(--cell-background-color);
|
|
47
50
|
cursor: cell;
|
|
@@ -143,6 +146,7 @@ span.harvest-sheet-container, span.harvest-sheet-container:focus {
|
|
|
143
146
|
.harvest-sheet-container .harvest-sheet .cell.sheet-control{
|
|
144
147
|
border-right: 1px solid transparent;
|
|
145
148
|
background: var(--cell-background-color) ;
|
|
149
|
+
color:var(--read-color);
|
|
146
150
|
// position: relative !important;
|
|
147
151
|
}
|
|
148
152
|
|
|
@@ -176,6 +180,7 @@ span.harvest-sheet-container, span.harvest-sheet-container:focus {
|
|
|
176
180
|
.harvest-sheet-container .harvest-sheet .cell > input {
|
|
177
181
|
display: block;
|
|
178
182
|
width: calc(100% - 6px);
|
|
183
|
+
font-size: var(--cell-font-size);
|
|
179
184
|
height: 11px;
|
|
180
185
|
border: 2px solid rgb(33, 133, 208);
|
|
181
186
|
background: none;
|
package/dist/core/table/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
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); }
|
|
2
|
-
var _excluded = ["columns", "dataSource", "rowKey", "rowSelection", "groupConfig", "onChange", "draggable"];
|
|
2
|
+
var _excluded = ["columns", "dataSource", "rowKey", "rowSelection", "groupConfig", "onChange", "draggable", "eventHandler"];
|
|
3
3
|
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; }
|
|
4
4
|
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; }
|
|
5
5
|
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; }
|
|
@@ -37,6 +37,7 @@ var Table = function Table(_ref) {
|
|
|
37
37
|
groupConfig = _ref.groupConfig,
|
|
38
38
|
onChange = _ref.onChange,
|
|
39
39
|
draggable = _ref.draggable,
|
|
40
|
+
eventHandler = _ref.eventHandler,
|
|
40
41
|
args = _objectWithoutProperties(_ref, _excluded);
|
|
41
42
|
var _useState = useState([[]]),
|
|
42
43
|
_useState2 = _slicedToArray(_useState, 2),
|
|
@@ -90,8 +91,8 @@ var Table = function Table(_ref) {
|
|
|
90
91
|
id: rowId,
|
|
91
92
|
row: currentIndex,
|
|
92
93
|
col: -1,
|
|
93
|
-
readonly: true,
|
|
94
94
|
editable: false,
|
|
95
|
+
align: 'center',
|
|
95
96
|
value: groupMap.get(currentIndex) && ((_groupMap$get = groupMap.get(currentIndex)) === null || _groupMap$get === void 0 ? void 0 : _groupMap$get.isStart),
|
|
96
97
|
record: {
|
|
97
98
|
open: groupMap.get(currentIndex) && ((_groupMap$get2 = groupMap.get(currentIndex)) === null || _groupMap$get2 === void 0 ? void 0 : _groupMap$get2.isOpen)
|
|
@@ -140,6 +141,7 @@ var Table = function Table(_ref) {
|
|
|
140
141
|
row: row,
|
|
141
142
|
col: -1,
|
|
142
143
|
readonly: true,
|
|
144
|
+
align: 'center',
|
|
143
145
|
value: checkedRow[row],
|
|
144
146
|
valueViewer: CheckViewer,
|
|
145
147
|
className: 'sheet-control'
|
|
@@ -305,6 +307,11 @@ var Table = function Table(_ref) {
|
|
|
305
307
|
}, "group-open-title")] : null, /*#__PURE__*/_jsx(SheetEvent, {
|
|
306
308
|
name: "reverse",
|
|
307
309
|
handler: handleReverse
|
|
310
|
+
}), Object.keys(eventHandler || {}).map(function (key) {
|
|
311
|
+
return /*#__PURE__*/_jsx(SheetEvent, {
|
|
312
|
+
name: key,
|
|
313
|
+
handler: eventHandler === null || eventHandler === void 0 ? void 0 : eventHandler[key]
|
|
314
|
+
}, key);
|
|
308
315
|
})]
|
|
309
316
|
}));
|
|
310
317
|
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import { useSheetEvent } from "../../../hooks";
|
|
2
|
+
import { Button, Divider } from 'antd';
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
export var BtnViewer = function BtnViewer(props) {
|
|
7
|
+
var value = props.value,
|
|
8
|
+
row = props.row,
|
|
9
|
+
record = props.record;
|
|
10
|
+
var eventBus = useSheetEvent();
|
|
11
|
+
var handleClick = useCallback(function (event) {
|
|
12
|
+
eventBus && eventBus.emit('btn-click', event);
|
|
13
|
+
}, [eventBus, row, record, value]);
|
|
14
|
+
return /*#__PURE__*/_jsxs("div", {
|
|
15
|
+
children: [/*#__PURE__*/_jsx(Button, {
|
|
16
|
+
type: "link",
|
|
17
|
+
onClick: function onClick() {
|
|
18
|
+
return handleClick({
|
|
19
|
+
row: row,
|
|
20
|
+
type: 'copy'
|
|
21
|
+
});
|
|
22
|
+
},
|
|
23
|
+
children: "\u590D\u5236"
|
|
24
|
+
}, "copy"), /*#__PURE__*/_jsx(Divider, {
|
|
25
|
+
type: "vertical"
|
|
26
|
+
}), /*#__PURE__*/_jsx(Button, {
|
|
27
|
+
type: "link",
|
|
28
|
+
onClick: function onClick() {
|
|
29
|
+
return handleClick({
|
|
30
|
+
row: row,
|
|
31
|
+
type: 'delete'
|
|
32
|
+
});
|
|
33
|
+
},
|
|
34
|
+
children: "\u5220\u9664"
|
|
35
|
+
}, "delete")]
|
|
36
|
+
});
|
|
37
|
+
};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { EditFilled } from '@ant-design/icons';
|
|
2
|
+
import { useSheetEvent } from "../../../hooks";
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
6
|
+
export var EditViewer = function EditViewer(props) {
|
|
7
|
+
var value = props.value,
|
|
8
|
+
row = props.row,
|
|
9
|
+
record = props.record;
|
|
10
|
+
var eventBus = useSheetEvent();
|
|
11
|
+
var handleClick = useCallback(function () {
|
|
12
|
+
if (!eventBus) return;
|
|
13
|
+
eventBus.emit('cell-edit', {
|
|
14
|
+
row: row,
|
|
15
|
+
record: record,
|
|
16
|
+
value: value
|
|
17
|
+
});
|
|
18
|
+
}, [eventBus, row, record, value]);
|
|
19
|
+
return /*#__PURE__*/_jsxs("span", {
|
|
20
|
+
style: {
|
|
21
|
+
display: 'flex',
|
|
22
|
+
justifyContent: 'space-between',
|
|
23
|
+
color: 'green'
|
|
24
|
+
},
|
|
25
|
+
children: [/*#__PURE__*/_jsx("span", {
|
|
26
|
+
children: value
|
|
27
|
+
}), /*#__PURE__*/_jsx(EditFilled, {
|
|
28
|
+
onClick: handleClick
|
|
29
|
+
})]
|
|
30
|
+
});
|
|
31
|
+
};
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useSheetEvent } from "../../../hooks";
|
|
2
|
+
import { Switch } from 'antd';
|
|
3
|
+
import { useCallback } from 'react';
|
|
4
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
5
|
+
export var SwitchViewer = function SwitchViewer(props) {
|
|
6
|
+
var value = props.value,
|
|
7
|
+
row = props.row,
|
|
8
|
+
record = props.record;
|
|
9
|
+
var eventBus = useSheetEvent();
|
|
10
|
+
var handleChange = useCallback(function () {
|
|
11
|
+
if (!eventBus) return;
|
|
12
|
+
eventBus.emit('cell-switch', {
|
|
13
|
+
row: row,
|
|
14
|
+
record: record,
|
|
15
|
+
value: value
|
|
16
|
+
});
|
|
17
|
+
}, [eventBus, row, record, value]);
|
|
18
|
+
return /*#__PURE__*/_jsx(Switch, {
|
|
19
|
+
checked: value,
|
|
20
|
+
onChange: handleChange
|
|
21
|
+
});
|
|
22
|
+
};
|
|
@@ -0,0 +1,216 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
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; }
|
|
3
|
+
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; }
|
|
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(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
|
|
6
|
+
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); }
|
|
7
|
+
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
|
|
8
|
+
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
+
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
|
|
10
|
+
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
|
|
11
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
12
|
+
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."); }
|
|
13
|
+
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); }
|
|
14
|
+
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; }
|
|
15
|
+
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
16
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
17
|
+
import { Modal } from 'antd';
|
|
18
|
+
import React, { useState } from 'react';
|
|
19
|
+
import { DateEditor, getCascaderEditor, getNumberEditor, getSelectEditor } from "../core/editor";
|
|
20
|
+
import Table from "../core/table";
|
|
21
|
+
import { BtnViewer } from "../core/viewer/btnViewer";
|
|
22
|
+
import { EditViewer } from "../core/viewer/editViewer";
|
|
23
|
+
import { SwitchViewer } from "../core/viewer/switchViewer";
|
|
24
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
25
|
+
var Precision2MoneyEditor = getNumberEditor({
|
|
26
|
+
max: 1000,
|
|
27
|
+
min: 0,
|
|
28
|
+
precision: 2,
|
|
29
|
+
addonAfter: '元'
|
|
30
|
+
});
|
|
31
|
+
var Precision2Number = getNumberEditor({
|
|
32
|
+
max: 1000,
|
|
33
|
+
min: 0,
|
|
34
|
+
precision: 2
|
|
35
|
+
});
|
|
36
|
+
var TypeSelector = getSelectEditor([{
|
|
37
|
+
value: '1',
|
|
38
|
+
label: '111111'
|
|
39
|
+
}, {
|
|
40
|
+
value: '2',
|
|
41
|
+
label: '222222'
|
|
42
|
+
}, {
|
|
43
|
+
value: '3',
|
|
44
|
+
label: '333333'
|
|
45
|
+
}]);
|
|
46
|
+
var CascaderSelector = getCascaderEditor([{
|
|
47
|
+
value: 'zhejiang',
|
|
48
|
+
label: 'Zhejiang',
|
|
49
|
+
children: [{
|
|
50
|
+
value: 'hangzhou',
|
|
51
|
+
label: 'Hangzhou',
|
|
52
|
+
children: [{
|
|
53
|
+
value: 'xihu',
|
|
54
|
+
label: 'West Lake'
|
|
55
|
+
}]
|
|
56
|
+
}]
|
|
57
|
+
}, {
|
|
58
|
+
value: 'jiangsu',
|
|
59
|
+
label: 'Jiangsu',
|
|
60
|
+
children: [{
|
|
61
|
+
value: 'nanjing',
|
|
62
|
+
label: 'Nanjing',
|
|
63
|
+
children: [{
|
|
64
|
+
value: 'zhonghuamen',
|
|
65
|
+
label: 'Zhong Hua Men'
|
|
66
|
+
}]
|
|
67
|
+
}]
|
|
68
|
+
}]);
|
|
69
|
+
var columns = [{
|
|
70
|
+
title: 'Full Name',
|
|
71
|
+
width: 100,
|
|
72
|
+
dataIndex: 'open',
|
|
73
|
+
key: 'open',
|
|
74
|
+
fixed: 'left',
|
|
75
|
+
render: SwitchViewer
|
|
76
|
+
}, {
|
|
77
|
+
title: 'Age',
|
|
78
|
+
width: 100,
|
|
79
|
+
dataIndex: 'age',
|
|
80
|
+
key: 'age',
|
|
81
|
+
editor: Precision2Number,
|
|
82
|
+
readonly: function readonly(value, record, row) {
|
|
83
|
+
return row === 1;
|
|
84
|
+
}
|
|
85
|
+
// fixed: 'left',
|
|
86
|
+
}, {
|
|
87
|
+
title: 'price',
|
|
88
|
+
width: 100,
|
|
89
|
+
dataIndex: 'price',
|
|
90
|
+
key: 'price',
|
|
91
|
+
editor: Precision2MoneyEditor,
|
|
92
|
+
readonly: function readonly(value, record, row) {
|
|
93
|
+
return row === 1;
|
|
94
|
+
}
|
|
95
|
+
// fixed: 'left',
|
|
96
|
+
}, {
|
|
97
|
+
title: 'date',
|
|
98
|
+
width: 150,
|
|
99
|
+
dataIndex: 'date',
|
|
100
|
+
key: 'date',
|
|
101
|
+
editor: DateEditor
|
|
102
|
+
// fixed: 'left',
|
|
103
|
+
}, {
|
|
104
|
+
title: 'select',
|
|
105
|
+
width: 200,
|
|
106
|
+
dataIndex: 'select',
|
|
107
|
+
editor: TypeSelector
|
|
108
|
+
}, {
|
|
109
|
+
title: 'Column 2',
|
|
110
|
+
width: 200,
|
|
111
|
+
dataIndex: 'address1',
|
|
112
|
+
key: '2',
|
|
113
|
+
editor: CascaderSelector
|
|
114
|
+
}, {
|
|
115
|
+
title: 'Column 3',
|
|
116
|
+
width: 200,
|
|
117
|
+
dataIndex: 'address2',
|
|
118
|
+
key: '3',
|
|
119
|
+
editable: false,
|
|
120
|
+
render: EditViewer
|
|
121
|
+
}, {
|
|
122
|
+
title: 'Column 4',
|
|
123
|
+
width: 200,
|
|
124
|
+
dataIndex: 'address3',
|
|
125
|
+
key: '4'
|
|
126
|
+
}, {
|
|
127
|
+
title: 'Column 5',
|
|
128
|
+
width: 200,
|
|
129
|
+
dataIndex: 'address4',
|
|
130
|
+
key: '5'
|
|
131
|
+
}, {
|
|
132
|
+
title: 'Column 6',
|
|
133
|
+
width: 200,
|
|
134
|
+
dataIndex: 'address5',
|
|
135
|
+
key: '6'
|
|
136
|
+
}, {
|
|
137
|
+
title: 'Column 7',
|
|
138
|
+
width: 200,
|
|
139
|
+
dataIndex: 'address6',
|
|
140
|
+
key: '7'
|
|
141
|
+
}, {
|
|
142
|
+
title: 'Column 8',
|
|
143
|
+
width: 200,
|
|
144
|
+
dataIndex: 'address7',
|
|
145
|
+
key: '8'
|
|
146
|
+
}, {
|
|
147
|
+
title: 'Action',
|
|
148
|
+
align: 'center',
|
|
149
|
+
key: 'operation',
|
|
150
|
+
fixed: 'right',
|
|
151
|
+
width: 150,
|
|
152
|
+
render: BtnViewer
|
|
153
|
+
}];
|
|
154
|
+
var data = [{
|
|
155
|
+
key: '1',
|
|
156
|
+
name: 'John Brown',
|
|
157
|
+
date: '2020-01-01',
|
|
158
|
+
open: true,
|
|
159
|
+
age: 32,
|
|
160
|
+
address1: 'West Lake',
|
|
161
|
+
address2: '打开对话框1',
|
|
162
|
+
select: '111111',
|
|
163
|
+
address: 'New York Park'
|
|
164
|
+
}, {
|
|
165
|
+
key: '2',
|
|
166
|
+
name: 'Jim Green',
|
|
167
|
+
open: false,
|
|
168
|
+
date: '1990-01-01',
|
|
169
|
+
address2: '打开对话框2',
|
|
170
|
+
age: 40,
|
|
171
|
+
select: '222222',
|
|
172
|
+
address: 'London Park'
|
|
173
|
+
}];
|
|
174
|
+
var App = function App() {
|
|
175
|
+
var _useState = useState(data),
|
|
176
|
+
_useState2 = _slicedToArray(_useState, 2),
|
|
177
|
+
state = _useState2[0],
|
|
178
|
+
setState = _useState2[1];
|
|
179
|
+
return /*#__PURE__*/_jsx(Table, {
|
|
180
|
+
columns: columns,
|
|
181
|
+
dataSource: state,
|
|
182
|
+
scroll: {
|
|
183
|
+
x: '100%'
|
|
184
|
+
},
|
|
185
|
+
onChange: function onChange() {},
|
|
186
|
+
eventHandler: {
|
|
187
|
+
'cell-edit': function cellEdit(value) {
|
|
188
|
+
var _ref = value,
|
|
189
|
+
row = _ref.row,
|
|
190
|
+
cellValue = _ref.value;
|
|
191
|
+
Modal.confirm({
|
|
192
|
+
title: "".concat(row, " - ").concat(cellValue, "\u7F16\u8F91\u70B9\u4EC0\u4E48")
|
|
193
|
+
});
|
|
194
|
+
},
|
|
195
|
+
'btn-click': function btnClick(value) {
|
|
196
|
+
var _ref2 = value,
|
|
197
|
+
row = _ref2.row,
|
|
198
|
+
type = _ref2.type;
|
|
199
|
+
Modal.confirm({
|
|
200
|
+
title: "".concat(row, " - ").concat(type, "\u63D0\u793A\u70B9\u4EC0\u4E48")
|
|
201
|
+
});
|
|
202
|
+
},
|
|
203
|
+
'cell-switch': function cellSwitch(value) {
|
|
204
|
+
var _ref3 = value,
|
|
205
|
+
row = _ref3.row,
|
|
206
|
+
cellValue = _ref3.value;
|
|
207
|
+
var newState = _toConsumableArray(state);
|
|
208
|
+
newState[row] = _objectSpread(_objectSpread({}, newState[row]), {}, {
|
|
209
|
+
open: !cellValue
|
|
210
|
+
});
|
|
211
|
+
setState(newState);
|
|
212
|
+
}
|
|
213
|
+
}
|
|
214
|
+
});
|
|
215
|
+
};
|
|
216
|
+
export default App;
|
package/dist/type/sheet.d.ts
CHANGED
|
@@ -2,6 +2,11 @@
|
|
|
2
2
|
/// <reference types="node" />
|
|
3
3
|
import type { EventEmitter } from 'events';
|
|
4
4
|
import { SheetTableType } from '.';
|
|
5
|
+
export declare enum CellAlign {
|
|
6
|
+
left = "left",
|
|
7
|
+
center = "center",
|
|
8
|
+
right = "right"
|
|
9
|
+
}
|
|
5
10
|
export declare type Cell = {
|
|
6
11
|
id: string;
|
|
7
12
|
key?: string;
|
|
@@ -16,23 +21,23 @@ export declare type Cell = {
|
|
|
16
21
|
dataEditor?: CellEditor;
|
|
17
22
|
valueViewer?: CellViewer;
|
|
18
23
|
className?: string;
|
|
19
|
-
align?:
|
|
20
|
-
fixed?:
|
|
24
|
+
align?: CellAlign;
|
|
25
|
+
fixed?: Omit<CellAlign, 'center'>;
|
|
21
26
|
value?: string | number | null;
|
|
22
27
|
};
|
|
23
|
-
export declare type CellEditorProps = {
|
|
24
|
-
value: unknown;
|
|
25
|
-
cell?: Cell;
|
|
26
|
-
onChange: (value: unknown) => void;
|
|
27
|
-
onConfirm: (value: unknown) => void;
|
|
28
|
-
};
|
|
29
28
|
export declare type CellViewerProps = {
|
|
30
29
|
value: unknown;
|
|
31
30
|
record?: Record<string, unknown>;
|
|
32
|
-
row
|
|
33
|
-
col
|
|
31
|
+
row?: number;
|
|
32
|
+
col?: number;
|
|
34
33
|
cell?: Cell;
|
|
35
34
|
};
|
|
35
|
+
export declare type CellEditorProps = {
|
|
36
|
+
value: unknown;
|
|
37
|
+
cell?: Cell;
|
|
38
|
+
onChange: (value: unknown) => void;
|
|
39
|
+
onConfirm: (value: unknown) => void;
|
|
40
|
+
} & CellViewerProps;
|
|
36
41
|
export declare type CellEditor = React.FC<CellEditorProps> & {
|
|
37
42
|
checker?: (value: unknown) => boolean;
|
|
38
43
|
formatter?: (value: unknown) => unknown;
|
|
@@ -166,15 +171,13 @@ export declare type UpdateStateType = {
|
|
|
166
171
|
cellChangeHandler: (cells: CellData[], additions?: CellData[]) => void;
|
|
167
172
|
};
|
|
168
173
|
export declare type UpdateFocus = (start: CellPosition, end: CellPosition) => void;
|
|
169
|
-
export declare type Options<T> = {
|
|
174
|
+
export declare type Options<T = any> = {
|
|
170
175
|
value: string;
|
|
171
176
|
label: string;
|
|
172
177
|
} & T;
|
|
173
178
|
export declare type OptionsType = Options<{
|
|
174
179
|
disabled?: boolean;
|
|
175
|
-
children?:
|
|
176
|
-
children?: Options<Record<string, unknown>>;
|
|
177
|
-
}>;
|
|
180
|
+
children?: OptionsType[];
|
|
178
181
|
}>;
|
|
179
182
|
export declare type OperateHistory = {
|
|
180
183
|
changes: Partial<CellData>[];
|
package/dist/type/sheet.js
CHANGED
|
@@ -30,6 +30,7 @@ export declare type TableGroupConfig = {
|
|
|
30
30
|
defaultOpen: boolean;
|
|
31
31
|
};
|
|
32
32
|
export declare type TableProps = {
|
|
33
|
+
className?: string;
|
|
33
34
|
columns: ColumnProps[];
|
|
34
35
|
virtualized?: boolean;
|
|
35
36
|
dataSource: Record<string, unknown>[];
|
|
@@ -50,4 +51,5 @@ export declare type TableProps = {
|
|
|
50
51
|
onChange: (value: TableGroupConfig) => void;
|
|
51
52
|
};
|
|
52
53
|
onChange: (changes: TableChange[]) => void;
|
|
54
|
+
eventHandler?: Record<'btn-click' | 'cell-edit' | 'cell-switch' | string, undefined | ((value: unknown) => void)>;
|
|
53
55
|
};
|