@progress/kendo-react-spreadsheet 6.1.1-dev.202311151536 → 7.0.0-develop.1
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/FormulaInput.d.ts +9 -0
- package/LICENSE.md +1 -1
- package/List.d.ts +9 -0
- package/NameBox.d.ts +9 -0
- package/SheetsBar.d.ts +8 -0
- package/{dist/npm/Spreadsheet.d.ts → Spreadsheet.d.ts} +4 -0
- package/{dist/npm/SpreadsheetProps.d.ts → SpreadsheetProps.d.ts} +5 -2
- package/dist/cdn/js/kendo-react-spreadsheet.js +5 -1
- package/index.d.ts +8 -0
- package/index.js +5 -0
- package/index.mjs +1357 -0
- package/{dist/npm/messages.d.ts → messages.d.ts} +4 -0
- package/package-metadata.d.ts +9 -0
- package/package.json +43 -57
- package/{dist/npm/tools → tools}/adjustDecimals.d.ts +4 -0
- package/{dist/npm/tools → tools}/align.d.ts +4 -0
- package/tools/backgroundColor.d.ts +14 -0
- package/tools/bold.d.ts +14 -0
- package/tools/cleanFormat.d.ts +15 -0
- package/tools/defaultTools.d.ts +9 -0
- package/tools/export.d.ts +15 -0
- package/tools/fontFamily.d.ts +15 -0
- package/{dist/es/tools → tools}/fontSize.d.ts +4 -0
- package/tools/format.d.ts +15 -0
- package/{dist/es/tools → tools}/gridLines.d.ts +4 -0
- package/{dist/es/tools → tools}/index.d.ts +5 -1
- package/tools/italic.d.ts +14 -0
- package/tools/open.d.ts +15 -0
- package/tools/redo.d.ts +14 -0
- package/{dist/npm/tools → tools}/tableTools.d.ts +4 -0
- package/tools/textColor.d.ts +14 -0
- package/{dist/es/tools → tools}/textWrap.d.ts +4 -0
- package/tools/underline.d.ts +14 -0
- package/tools/undo.d.ts +14 -0
- package/{dist/npm/tools → tools}/utils.d.ts +4 -0
- package/about.md +0 -3
- package/dist/es/FormulaInput.d.ts +0 -5
- package/dist/es/FormulaInput.js +0 -116
- package/dist/es/List.d.ts +0 -5
- package/dist/es/List.js +0 -22
- package/dist/es/NameBox.d.ts +0 -5
- package/dist/es/NameBox.js +0 -91
- package/dist/es/SheetsBar.d.ts +0 -5
- package/dist/es/SheetsBar.js +0 -246
- package/dist/es/Spreadsheet.d.ts +0 -47
- package/dist/es/Spreadsheet.js +0 -286
- package/dist/es/SpreadsheetProps.d.ts +0 -189
- package/dist/es/SpreadsheetProps.js +0 -2
- package/dist/es/main.d.ts +0 -4
- package/dist/es/main.js +0 -4
- package/dist/es/messages.d.ts +0 -110
- package/dist/es/messages.js +0 -310
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/tools/adjustDecimals.d.ts +0 -20
- package/dist/es/tools/adjustDecimals.js +0 -39
- package/dist/es/tools/align.d.ts +0 -44
- package/dist/es/tools/align.js +0 -96
- package/dist/es/tools/backgroundColor.d.ts +0 -11
- package/dist/es/tools/backgroundColor.js +0 -15
- package/dist/es/tools/bold.d.ts +0 -11
- package/dist/es/tools/bold.js +0 -9
- package/dist/es/tools/cleanFormat.d.ts +0 -11
- package/dist/es/tools/cleanFormat.js +0 -17
- package/dist/es/tools/defaultTools.d.ts +0 -5
- package/dist/es/tools/defaultTools.js +0 -66
- package/dist/es/tools/export.d.ts +0 -11
- package/dist/es/tools/export.js +0 -19
- package/dist/es/tools/fontFamily.d.ts +0 -11
- package/dist/es/tools/fontFamily.js +0 -21
- package/dist/es/tools/fontSize.js +0 -82
- package/dist/es/tools/format.d.ts +0 -11
- package/dist/es/tools/format.js +0 -26
- package/dist/es/tools/gridLines.js +0 -25
- package/dist/es/tools/index.js +0 -18
- package/dist/es/tools/italic.d.ts +0 -11
- package/dist/es/tools/italic.js +0 -9
- package/dist/es/tools/open.d.ts +0 -11
- package/dist/es/tools/open.js +0 -36
- package/dist/es/tools/redo.d.ts +0 -11
- package/dist/es/tools/redo.js +0 -9
- package/dist/es/tools/tableTools.d.ts +0 -64
- package/dist/es/tools/tableTools.js +0 -102
- package/dist/es/tools/textColor.d.ts +0 -11
- package/dist/es/tools/textColor.js +0 -15
- package/dist/es/tools/textWrap.js +0 -26
- package/dist/es/tools/underline.d.ts +0 -11
- package/dist/es/tools/underline.js +0 -9
- package/dist/es/tools/undo.d.ts +0 -11
- package/dist/es/tools/undo.js +0 -9
- package/dist/es/tools/utils.d.ts +0 -91
- package/dist/es/tools/utils.js +0 -102
- package/dist/npm/FormulaInput.d.ts +0 -5
- package/dist/npm/FormulaInput.js +0 -119
- package/dist/npm/List.d.ts +0 -5
- package/dist/npm/List.js +0 -25
- package/dist/npm/NameBox.d.ts +0 -5
- package/dist/npm/NameBox.js +0 -94
- package/dist/npm/SheetsBar.d.ts +0 -5
- package/dist/npm/SheetsBar.js +0 -250
- package/dist/npm/Spreadsheet.js +0 -289
- package/dist/npm/SpreadsheetProps.js +0 -9
- package/dist/npm/main.d.ts +0 -4
- package/dist/npm/main.js +0 -39
- package/dist/npm/messages.js +0 -313
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/tools/adjustDecimals.js +0 -42
- package/dist/npm/tools/align.js +0 -100
- package/dist/npm/tools/backgroundColor.d.ts +0 -11
- package/dist/npm/tools/backgroundColor.js +0 -18
- package/dist/npm/tools/bold.d.ts +0 -11
- package/dist/npm/tools/bold.js +0 -12
- package/dist/npm/tools/cleanFormat.d.ts +0 -11
- package/dist/npm/tools/cleanFormat.js +0 -21
- package/dist/npm/tools/defaultTools.d.ts +0 -5
- package/dist/npm/tools/defaultTools.js +0 -69
- package/dist/npm/tools/export.d.ts +0 -11
- package/dist/npm/tools/export.js +0 -23
- package/dist/npm/tools/fontFamily.d.ts +0 -11
- package/dist/npm/tools/fontFamily.js +0 -25
- package/dist/npm/tools/fontSize.d.ts +0 -39
- package/dist/npm/tools/fontSize.js +0 -86
- package/dist/npm/tools/format.d.ts +0 -11
- package/dist/npm/tools/format.js +0 -30
- package/dist/npm/tools/gridLines.d.ts +0 -15
- package/dist/npm/tools/gridLines.js +0 -29
- package/dist/npm/tools/index.d.ts +0 -19
- package/dist/npm/tools/index.js +0 -34
- package/dist/npm/tools/italic.d.ts +0 -11
- package/dist/npm/tools/italic.js +0 -12
- package/dist/npm/tools/open.d.ts +0 -11
- package/dist/npm/tools/open.js +0 -40
- package/dist/npm/tools/redo.d.ts +0 -11
- package/dist/npm/tools/redo.js +0 -12
- package/dist/npm/tools/tableTools.js +0 -105
- package/dist/npm/tools/textColor.d.ts +0 -11
- package/dist/npm/tools/textColor.js +0 -18
- package/dist/npm/tools/textWrap.d.ts +0 -15
- package/dist/npm/tools/textWrap.js +0 -30
- package/dist/npm/tools/underline.d.ts +0 -11
- package/dist/npm/tools/underline.js +0 -12
- package/dist/npm/tools/undo.d.ts +0 -11
- package/dist/npm/tools/undo.js +0 -12
- package/dist/npm/tools/utils.js +0 -108
- package/dist/systemjs/kendo-react-spreadsheet.js +0 -1
- package/e2e-next/basic.tests.ts +0 -24
package/dist/npm/NameBox.js
DELETED
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.NameBox = void 0;
|
|
4
|
-
const React = require("react");
|
|
5
|
-
const kendo_react_dropdowns_1 = require("@progress/kendo-react-dropdowns");
|
|
6
|
-
const kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
7
|
-
const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
|
|
8
|
-
const kendo_react_intl_1 = require("@progress/kendo-react-intl");
|
|
9
|
-
const messages_1 = require("./messages");
|
|
10
|
-
/**
|
|
11
|
-
* @hidden
|
|
12
|
-
*/
|
|
13
|
-
exports.NameBox = React.forwardRef((props, ref) => {
|
|
14
|
-
const target = React.useRef(null);
|
|
15
|
-
const comboboxRef = React.useRef(null);
|
|
16
|
-
const [data, setData] = React.useState([]);
|
|
17
|
-
const [open, setOpen] = React.useState(false);
|
|
18
|
-
const [value, setValue] = React.useState('');
|
|
19
|
-
const memo = React.useMemo(() => ({}), []);
|
|
20
|
-
memo.data = data;
|
|
21
|
-
React.useImperativeHandle(target, () => ({
|
|
22
|
-
value: (val) => {
|
|
23
|
-
if (val === undefined) {
|
|
24
|
-
const item = comboboxRef.current && comboboxRef.current.value;
|
|
25
|
-
return item ? (item.name || item) : item;
|
|
26
|
-
}
|
|
27
|
-
else {
|
|
28
|
-
setValue(val || '');
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
}), []);
|
|
32
|
-
React.useImperativeHandle(ref, () => target.current, []);
|
|
33
|
-
const onDelete = React.useCallback((name) => {
|
|
34
|
-
const editor = props.nameEditor();
|
|
35
|
-
if (editor) {
|
|
36
|
-
editor.trigger('delete', { name });
|
|
37
|
-
}
|
|
38
|
-
}, []);
|
|
39
|
-
const itemRender = React.useCallback((li, itemProps) => {
|
|
40
|
-
const itemChildren = (React.createElement(React.Fragment, null,
|
|
41
|
-
li.props.children,
|
|
42
|
-
React.createElement("span", { role: 'button', className: 'k-button-delete', onClick: () => onDelete(itemProps.dataItem[itemProps.textField]), onMouseDown: e => e.preventDefault(), onPointerDown: e => e.preventDefault(), "data-role": "delete" },
|
|
43
|
-
React.createElement(kendo_react_common_1.IconWrap, { name: 'x', icon: kendo_svg_icons_1.xIcon }))));
|
|
44
|
-
return React.cloneElement(li, li.props, itemChildren);
|
|
45
|
-
}, []);
|
|
46
|
-
const listNoDataRender = React.useCallback((el) => React.cloneElement(el, Object.assign({}, el.props), React.createElement("div", null)), []);
|
|
47
|
-
const onOpen = React.useCallback((event) => {
|
|
48
|
-
if (event.syntheticEvent && event.syntheticEvent.type === 'change') {
|
|
49
|
-
return;
|
|
50
|
-
}
|
|
51
|
-
const editor = props.nameEditor();
|
|
52
|
-
if (editor) {
|
|
53
|
-
setData(editor.readData());
|
|
54
|
-
setOpen(true);
|
|
55
|
-
}
|
|
56
|
-
}, []);
|
|
57
|
-
const onClose = React.useCallback(() => {
|
|
58
|
-
setOpen(false);
|
|
59
|
-
}, []);
|
|
60
|
-
const onChange = React.useCallback((event) => {
|
|
61
|
-
if (event.syntheticEvent.target.closest('[data-role]')) {
|
|
62
|
-
return;
|
|
63
|
-
}
|
|
64
|
-
const editor = props.nameEditor();
|
|
65
|
-
if (editor && event.value) {
|
|
66
|
-
const name = event.value.name;
|
|
67
|
-
if (name !== value) {
|
|
68
|
-
editor.trigger('select', { name });
|
|
69
|
-
setValue(name);
|
|
70
|
-
}
|
|
71
|
-
}
|
|
72
|
-
}, [value]);
|
|
73
|
-
const onKeyDown = React.useCallback((event) => {
|
|
74
|
-
const editor = props.nameEditor();
|
|
75
|
-
if (editor) {
|
|
76
|
-
if (event.key === 'Enter') {
|
|
77
|
-
const name = event.target.value;
|
|
78
|
-
editor.trigger('enter', { value: name });
|
|
79
|
-
setValue(name);
|
|
80
|
-
}
|
|
81
|
-
else if (event.key === 'Escape') {
|
|
82
|
-
editor.trigger('cancel');
|
|
83
|
-
setValue(memo.prevValue);
|
|
84
|
-
}
|
|
85
|
-
}
|
|
86
|
-
}, []);
|
|
87
|
-
const onFocus = React.useCallback((event) => {
|
|
88
|
-
memo.prevValue = event.value.name;
|
|
89
|
-
}, []);
|
|
90
|
-
return (React.createElement("div", { className: "k-spreadsheet-name-editor", onKeyDown: onKeyDown },
|
|
91
|
-
React.createElement(kendo_react_dropdowns_1.ComboBox, { ref: comboboxRef, title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.nameBox, messages_1.messages[messages_1.keys.nameBox]), popupSettings: { className: 'k-spreadsheet-names-popup' }, fillMode: "flat", clearButton: false, dataItemKey: "name", textField: "name", itemRender: itemRender, data: data, value: value ? (data.find((d) => d.name === name) || { name: value }) : null, onChange: onChange, opened: open, onOpen: onOpen, onClose: onClose, onFocus: onFocus, listNoDataRender: listNoDataRender, allowCustom: true })));
|
|
92
|
-
});
|
|
93
|
-
exports.NameBox.displayName = 'NameBox';
|
|
94
|
-
exports.NameBox.propTypes = {};
|
package/dist/npm/SheetsBar.d.ts
DELETED
package/dist/npm/SheetsBar.js
DELETED
|
@@ -1,250 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __rest = (this && this.__rest) || function (s, e) {
|
|
3
|
-
var t = {};
|
|
4
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
5
|
-
t[p] = s[p];
|
|
6
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
7
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
8
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
9
|
-
t[p[i]] = s[p[i]];
|
|
10
|
-
}
|
|
11
|
-
return t;
|
|
12
|
-
};
|
|
13
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
14
|
-
exports.SheetsBar = void 0;
|
|
15
|
-
const React = require("react");
|
|
16
|
-
const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
|
|
17
|
-
const kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
18
|
-
const kendo_react_sortable_1 = require("@progress/kendo-react-sortable");
|
|
19
|
-
const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
|
|
20
|
-
const kendo_react_intl_1 = require("@progress/kendo-react-intl");
|
|
21
|
-
const messages_1 = require("./messages");
|
|
22
|
-
const contextDefaultValue = {
|
|
23
|
-
onSelect: (() => { }),
|
|
24
|
-
onDelete: (() => { }),
|
|
25
|
-
onEnterEdit: (() => { }),
|
|
26
|
-
onCancelEdit: (() => { }),
|
|
27
|
-
onExitEdit: (() => { }),
|
|
28
|
-
onEdit: (() => { })
|
|
29
|
-
};
|
|
30
|
-
const ItemsContext = React.createContext(contextDefaultValue);
|
|
31
|
-
const TabItem = (props) => {
|
|
32
|
-
const dataItem = props.dataItem;
|
|
33
|
-
const { onSelect, onDelete, onEnterEdit, onExitEdit, onCancelEdit, onEdit } = React.useContext(ItemsContext);
|
|
34
|
-
const onClick = React.useCallback((e) => {
|
|
35
|
-
if (e.target instanceof HTMLElement && e.target.nodeName === 'INPUT') {
|
|
36
|
-
return;
|
|
37
|
-
}
|
|
38
|
-
onSelect.call(undefined, dataItem, e);
|
|
39
|
-
}, [dataItem, onSelect]);
|
|
40
|
-
const onClickDelete = React.useCallback((e) => {
|
|
41
|
-
onDelete.call(undefined, dataItem, e);
|
|
42
|
-
}, [dataItem, onDelete]);
|
|
43
|
-
const onDoubleClick = React.useCallback((e) => {
|
|
44
|
-
if (e.target instanceof HTMLElement && e.target.nodeName === 'INPUT') {
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
onEnterEdit.call(undefined, dataItem, e);
|
|
48
|
-
}, [dataItem, onEnterEdit]);
|
|
49
|
-
const onInputBlur = React.useCallback((e) => {
|
|
50
|
-
onExitEdit.call(undefined, dataItem, e);
|
|
51
|
-
}, [dataItem, onExitEdit]);
|
|
52
|
-
const onInputKeyDown = React.useCallback((e) => {
|
|
53
|
-
if (e.key === 'Enter') {
|
|
54
|
-
onExitEdit.call(undefined, dataItem, e);
|
|
55
|
-
}
|
|
56
|
-
else if (e.key === 'Escape') {
|
|
57
|
-
onCancelEdit.call(undefined, dataItem, e);
|
|
58
|
-
}
|
|
59
|
-
}, [dataItem, onExitEdit, onCancelEdit]);
|
|
60
|
-
const onInputChange = React.useCallback((e) => {
|
|
61
|
-
onEdit.call(undefined, Object.assign(Object.assign({}, dataItem), { text: e.target.value }), e);
|
|
62
|
-
}, [dataItem, onEdit]);
|
|
63
|
-
return (React.createElement("li", Object.assign({ style: props.style }, props.attributes, { ref: props.forwardRef, role: 'tab', className: (0, kendo_react_common_1.classNames)('k-item k-tabstrip-item', {
|
|
64
|
-
'k-disabled': props.isDisabled,
|
|
65
|
-
'k-active k-state-tab-on-top k-spreadsheet-sheets-bar-active': dataItem.active,
|
|
66
|
-
'k-spreadsheet-sheets-bar-inactive': !dataItem.active,
|
|
67
|
-
'k-first': dataItem.first,
|
|
68
|
-
'k-last': dataItem.last
|
|
69
|
-
}), onClick: onClick, onDoubleClick: onDoubleClick }), dataItem.inEdit ? (React.createElement("input", { type: 'text', className: 'k-textbox k-spreadsheet-sheets-editor', value: dataItem.text, onChange: onInputChange, maxLength: 50, autoFocus: true, onBlur: onInputBlur, onKeyDown: onInputKeyDown })) : (React.createElement(React.Fragment, null,
|
|
70
|
-
React.createElement("span", { className: 'k-link' }, dataItem.text),
|
|
71
|
-
(dataItem.first && dataItem.last) ? null :
|
|
72
|
-
React.createElement("span", { className: "k-link k-spreadsheet-sheets-remove", onClick: onClickDelete },
|
|
73
|
-
React.createElement(kendo_react_common_1.IconWrap, { name: "x", icon: kendo_svg_icons_1.xIcon }))))));
|
|
74
|
-
};
|
|
75
|
-
const TabsList = React.forwardRef((props, ref) => {
|
|
76
|
-
const { children, className } = props, restProps = __rest(props, ["children", "className"]);
|
|
77
|
-
return (React.createElement("ul", Object.assign({ className: (0, kendo_react_common_1.classNames)('k-tabstrip-items k-reset', className), role: 'tablist' }, restProps, { ref: ref }), children));
|
|
78
|
-
});
|
|
79
|
-
TabsList.displayName = 'TabsList';
|
|
80
|
-
const Tabs = (props) => {
|
|
81
|
-
const { sheets, setSheets, onSheetSelect, onSheetDelete, onSheetEdit, onSheetReorderEnd } = props;
|
|
82
|
-
const [inEditItem, setInEditItem] = React.useState(null);
|
|
83
|
-
const dragging = React.useRef(false);
|
|
84
|
-
const prevIndex = React.useRef(-1);
|
|
85
|
-
const updateData = React.useCallback((d) => {
|
|
86
|
-
setSheets(d.map((item, index, array) => (Object.assign(Object.assign({}, item), { first: index === 0, last: index === array.length - 1 }))));
|
|
87
|
-
}, []);
|
|
88
|
-
const onDragOver = React.useCallback((event) => {
|
|
89
|
-
updateData(event.newState);
|
|
90
|
-
// const { prevIndex, nextIndex } = event;
|
|
91
|
-
}, [updateData, onSheetReorderEnd]);
|
|
92
|
-
const onNavigate = React.useCallback((event) => {
|
|
93
|
-
onSheetReorderEnd.call(undefined, event);
|
|
94
|
-
}, [onSheetReorderEnd]);
|
|
95
|
-
const onDragStart = React.useCallback((e) => {
|
|
96
|
-
dragging.current = true;
|
|
97
|
-
prevIndex.current = e.prevIndex;
|
|
98
|
-
}, []);
|
|
99
|
-
const onDragEnd = React.useCallback((event) => {
|
|
100
|
-
setTimeout(() => {
|
|
101
|
-
dragging.current = false;
|
|
102
|
-
}, 50);
|
|
103
|
-
onSheetReorderEnd.call(undefined, Object.assign(Object.assign({}, event), { prevIndex: prevIndex.current }));
|
|
104
|
-
}, []);
|
|
105
|
-
const onSelect = React.useCallback((dataItem, e) => {
|
|
106
|
-
if (!dragging.current) {
|
|
107
|
-
onSheetSelect.call(undefined, dataItem, e);
|
|
108
|
-
}
|
|
109
|
-
}, [onSheetSelect]);
|
|
110
|
-
const onDelete = React.useCallback((dataItem, e) => {
|
|
111
|
-
e.stopPropagation();
|
|
112
|
-
onSheetDelete.call(undefined, dataItem);
|
|
113
|
-
}, [sheets, onSheetDelete]);
|
|
114
|
-
const onEnterEdit = React.useCallback((dataItem, e) => {
|
|
115
|
-
e.stopPropagation();
|
|
116
|
-
e.preventDefault();
|
|
117
|
-
const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { active: item.id === dataItem.id, inEdit: item.id === dataItem.id })));
|
|
118
|
-
setSheets(newData);
|
|
119
|
-
setInEditItem(Object.assign({}, dataItem));
|
|
120
|
-
}, [sheets]);
|
|
121
|
-
const onCancelEdit = React.useCallback((_dataItem, e) => {
|
|
122
|
-
e.stopPropagation();
|
|
123
|
-
e.preventDefault();
|
|
124
|
-
const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { inEdit: false, text: item.inEdit && inEditItem ? inEditItem.text : item.text })));
|
|
125
|
-
setSheets(newData);
|
|
126
|
-
setInEditItem(null);
|
|
127
|
-
}, [sheets, inEditItem]);
|
|
128
|
-
const onExitEdit = React.useCallback((dataItem, e) => {
|
|
129
|
-
e.stopPropagation();
|
|
130
|
-
e.preventDefault();
|
|
131
|
-
const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { inEdit: false })));
|
|
132
|
-
const index = sheets.findIndex((i) => i.id === dataItem.id);
|
|
133
|
-
setSheets(newData);
|
|
134
|
-
setInEditItem(null);
|
|
135
|
-
onSheetEdit.call(undefined, dataItem, index);
|
|
136
|
-
}, [sheets, onSheetEdit]);
|
|
137
|
-
const onEdit = React.useCallback((dataItem, e) => {
|
|
138
|
-
e.stopPropagation();
|
|
139
|
-
e.preventDefault();
|
|
140
|
-
const newData = sheets.map((item) => (Object.assign(Object.assign({}, item), { text: dataItem.id === item.id ? dataItem.text : item.text })));
|
|
141
|
-
setSheets(newData);
|
|
142
|
-
}, [sheets]);
|
|
143
|
-
return (React.createElement("div", { className: 'k-spreadsheet-sheets-items k-tabstrip k-floatwrap k-tabstrip-bottom' },
|
|
144
|
-
React.createElement("div", { className: 'k-tabstrip-items-wrapper k-hstack' },
|
|
145
|
-
React.createElement(ItemsContext.Provider, { value: { onSelect, onDelete, onEnterEdit, onCancelEdit, onExitEdit, onEdit } },
|
|
146
|
-
React.createElement(kendo_react_sortable_1.Sortable, { idField: 'id', data: sheets, itemUI: TabItem, itemsWrapUI: TabsList, onDragOver: onDragOver, onNavigate: onNavigate, onDragStart: onDragStart, onDragEnd: onDragEnd })))));
|
|
147
|
-
};
|
|
148
|
-
const mapSheets = (sheets, active) => sheets.map((sheet, i, arr) => ({
|
|
149
|
-
text: sheet.name(),
|
|
150
|
-
id: (0, kendo_react_common_1.guid)(),
|
|
151
|
-
first: i === 0,
|
|
152
|
-
last: i === arr.length - 1,
|
|
153
|
-
active: sheet.name() === active
|
|
154
|
-
}));
|
|
155
|
-
/**
|
|
156
|
-
* @hidden
|
|
157
|
-
*/
|
|
158
|
-
const SheetsBar = (props) => {
|
|
159
|
-
const { spreadsheetRef } = props;
|
|
160
|
-
const [sheets, setSheets] = React.useState([]);
|
|
161
|
-
const activeSheet = React.useRef((sheets.find((s) => s.active) || {}).text);
|
|
162
|
-
const selectActiveSheet = React.useCallback(() => {
|
|
163
|
-
if (spreadsheetRef.current) {
|
|
164
|
-
spreadsheetRef.current.view.sheetsbar.onSheetSelect(activeSheet.current);
|
|
165
|
-
setSheets(mapSheets(spreadsheetRef.current.sheets(), activeSheet.current));
|
|
166
|
-
}
|
|
167
|
-
}, []);
|
|
168
|
-
const onUpdate = React.useCallback(() => {
|
|
169
|
-
if (spreadsheetRef.current) {
|
|
170
|
-
const sh = spreadsheetRef.current.sheets();
|
|
171
|
-
if (!sh.find((s) => s.name() === activeSheet.current)) {
|
|
172
|
-
activeSheet.current = sh[sh.length - 1].name();
|
|
173
|
-
}
|
|
174
|
-
selectActiveSheet();
|
|
175
|
-
}
|
|
176
|
-
}, []);
|
|
177
|
-
React.useEffect(() => {
|
|
178
|
-
if (spreadsheetRef.current) {
|
|
179
|
-
if (spreadsheetRef.current.sheets().length) {
|
|
180
|
-
activeSheet.current = spreadsheetRef.current.sheets()[0].name();
|
|
181
|
-
selectActiveSheet();
|
|
182
|
-
}
|
|
183
|
-
spreadsheetRef.current.view.bind('update', onUpdate);
|
|
184
|
-
}
|
|
185
|
-
return () => {
|
|
186
|
-
if (spreadsheetRef.current) {
|
|
187
|
-
spreadsheetRef.current.view.unbind('update', onUpdate);
|
|
188
|
-
}
|
|
189
|
-
};
|
|
190
|
-
}, [spreadsheetRef.current]);
|
|
191
|
-
const onSelect = React.useCallback((dataItem) => {
|
|
192
|
-
if (activeSheet.current !== dataItem.text) {
|
|
193
|
-
activeSheet.current = dataItem.text;
|
|
194
|
-
selectActiveSheet();
|
|
195
|
-
}
|
|
196
|
-
}, []);
|
|
197
|
-
const onAddSheet = React.useCallback(() => {
|
|
198
|
-
if (spreadsheetRef.current) {
|
|
199
|
-
spreadsheetRef.current.view.sheetsbar.onAddSelect();
|
|
200
|
-
const spSheets = spreadsheetRef.current.sheets();
|
|
201
|
-
activeSheet.current = spSheets[spSheets.length - 1].name();
|
|
202
|
-
selectActiveSheet();
|
|
203
|
-
}
|
|
204
|
-
}, []);
|
|
205
|
-
const onSheetDelete = React.useCallback((dataItem) => {
|
|
206
|
-
if (spreadsheetRef.current) {
|
|
207
|
-
if (activeSheet.current === dataItem.text) {
|
|
208
|
-
const curSheets = spreadsheetRef.current.sheets();
|
|
209
|
-
const index = curSheets.findIndex((s) => s.name() === dataItem.text);
|
|
210
|
-
const active = curSheets[index + 1] || curSheets[index - 1];
|
|
211
|
-
activeSheet.current = active ? active.name() : '';
|
|
212
|
-
}
|
|
213
|
-
spreadsheetRef.current.view.sheetsbar.onSheetRemove(dataItem.text);
|
|
214
|
-
selectActiveSheet();
|
|
215
|
-
}
|
|
216
|
-
}, []);
|
|
217
|
-
const onSheetRename = React.useCallback((dataItem, index) => {
|
|
218
|
-
if (spreadsheetRef.current) {
|
|
219
|
-
let text = dataItem.text;
|
|
220
|
-
const curSheets = spreadsheetRef.current.sheets();
|
|
221
|
-
const active = curSheets[index];
|
|
222
|
-
if (!text) {
|
|
223
|
-
activeSheet.current = active.name();
|
|
224
|
-
selectActiveSheet();
|
|
225
|
-
return;
|
|
226
|
-
}
|
|
227
|
-
if (active && active.name() === text) {
|
|
228
|
-
return;
|
|
229
|
-
}
|
|
230
|
-
if (curSheets.find((s) => s.name() === text)) {
|
|
231
|
-
text = active.name();
|
|
232
|
-
}
|
|
233
|
-
spreadsheetRef.current.view.sheetsbar.onSheetRename(text, index);
|
|
234
|
-
activeSheet.current = text;
|
|
235
|
-
selectActiveSheet();
|
|
236
|
-
}
|
|
237
|
-
}, []);
|
|
238
|
-
const onSheetReorderEnd = React.useCallback((event) => {
|
|
239
|
-
if (spreadsheetRef.current) {
|
|
240
|
-
const { prevIndex, nextIndex } = event;
|
|
241
|
-
activeSheet.current = spreadsheetRef.current.sheets()[prevIndex].name();
|
|
242
|
-
spreadsheetRef.current.view.sheetsbar.onSheetReorderEnd({ oldIndex: prevIndex, newIndex: nextIndex });
|
|
243
|
-
selectActiveSheet();
|
|
244
|
-
}
|
|
245
|
-
}, []);
|
|
246
|
-
return (React.createElement("div", { className: "k-spreadsheet-sheets-bar k-header" },
|
|
247
|
-
React.createElement(kendo_react_buttons_1.Button, { fillMode: "flat", icon: "plus", className: "k-spreadsheet-sheets-bar-add", title: (0, kendo_react_intl_1.useLocalization)().toLanguageString(messages_1.keys.addNewSheet, messages_1.messages[messages_1.keys.addNewSheet]), svgIcon: kendo_svg_icons_1.plusIcon, onClick: onAddSheet }),
|
|
248
|
-
React.createElement(Tabs, { sheets: sheets, setSheets: setSheets, onSheetSelect: onSelect, onSheetDelete: onSheetDelete, onSheetEdit: onSheetRename, onSheetReorderEnd: onSheetReorderEnd })));
|
|
249
|
-
};
|
|
250
|
-
exports.SheetsBar = SheetsBar;
|
package/dist/npm/Spreadsheet.js
DELETED
|
@@ -1,289 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Spreadsheet = void 0;
|
|
4
|
-
const React = require("react");
|
|
5
|
-
const PropTypes = require("prop-types");
|
|
6
|
-
const kendo_react_buttons_1 = require("@progress/kendo-react-buttons");
|
|
7
|
-
const kendo_react_layout_1 = require("@progress/kendo-react-layout");
|
|
8
|
-
const kendo_react_dialogs_1 = require("@progress/kendo-react-dialogs");
|
|
9
|
-
const FormulaInput_1 = require("./FormulaInput");
|
|
10
|
-
const NameBox_1 = require("./NameBox");
|
|
11
|
-
const SheetsBar_1 = require("./SheetsBar");
|
|
12
|
-
const SpreadsheetProps_1 = require("./SpreadsheetProps");
|
|
13
|
-
const defaultTools_1 = require("./tools/defaultTools");
|
|
14
|
-
const kendo_react_common_1 = require("@progress/kendo-react-common");
|
|
15
|
-
const package_metadata_1 = require("./package-metadata");
|
|
16
|
-
const kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
|
|
17
|
-
const kendo_react_intl_1 = require("@progress/kendo-react-intl");
|
|
18
|
-
const kendo_file_saver_1 = require("@progress/kendo-file-saver");
|
|
19
|
-
const kendo_ooxml_1 = require("@progress/kendo-ooxml");
|
|
20
|
-
const messages_1 = require("./messages");
|
|
21
|
-
const toolsFunctions = ['bold', 'italic', 'underline', 'fontFamily', 'fontSize', 'color', 'background', 'textAlign', 'verticalAlign', 'wrap', 'gridLines'];
|
|
22
|
-
const toolsValueMap = {
|
|
23
|
-
Bold: (state) => state.bold,
|
|
24
|
-
Italic: (state) => state.italic,
|
|
25
|
-
Underline: (state) => state.underline,
|
|
26
|
-
FontFamily: (state) => state.fontFamily,
|
|
27
|
-
FontSize: (state) => state.fontSize,
|
|
28
|
-
IncreaseFontSize: (state) => state.fontSize,
|
|
29
|
-
DecreaseFontSize: (state) => state.fontSize,
|
|
30
|
-
TextColor: (state) => state.color,
|
|
31
|
-
BackgroundColor: (state) => state.background,
|
|
32
|
-
Alignment: (state) => ({ textAlign: state.textAlign, verticalAlign: state.verticalAlign }),
|
|
33
|
-
AlignHorizontally: (state) => state.textAlign,
|
|
34
|
-
AlignVertically: (state) => state.verticalAlign,
|
|
35
|
-
TextWrap: (state) => state.wrap,
|
|
36
|
-
GridLines: (state) => state.gridLines,
|
|
37
|
-
AddColumnLeft: (state) => state.selectedHeaders,
|
|
38
|
-
AddColumnRight: (state) => state.selectedHeaders,
|
|
39
|
-
AddRowBelow: (state) => state.selectedHeaders,
|
|
40
|
-
AddRowAbove: (state) => state.selectedHeaders,
|
|
41
|
-
DeleteColumn: (state) => state.selectedHeaders,
|
|
42
|
-
DeleteRow: (state) => state.selectedHeaders
|
|
43
|
-
};
|
|
44
|
-
const noInnerButton = ':not(.k-dropdownlist button)' +
|
|
45
|
-
':not(.k-combobox button)' +
|
|
46
|
-
':not(.k-upload-button)' +
|
|
47
|
-
':not(.k-colorpicker button)' +
|
|
48
|
-
':not(.k-split-button .k-split-button-arrow)';
|
|
49
|
-
const toolbarButtons = [
|
|
50
|
-
'button' + noInnerButton,
|
|
51
|
-
'.k-button-group > button' + noInnerButton,
|
|
52
|
-
'.k-dropdownlist',
|
|
53
|
-
'.k-combobox',
|
|
54
|
-
'.k-colorpicker'
|
|
55
|
-
];
|
|
56
|
-
/**
|
|
57
|
-
* Represents the [KendoReact Spreadsheet component]({% slug overview_spreadsheet %}).
|
|
58
|
-
*
|
|
59
|
-
* Accepts properties of type [SpreadsheetProps]({% slug api_spreadsheet_spreadsheetprops %}).
|
|
60
|
-
* Obtaining the ref will give you an object of type [SpreadsheetHandle]({% slug api_spreadsheet_spreadsheethandle %}).
|
|
61
|
-
*
|
|
62
|
-
* @example
|
|
63
|
-
* ```jsx
|
|
64
|
-
* const sheets = [
|
|
65
|
-
* {
|
|
66
|
-
* name: 'Food Order',
|
|
67
|
-
* rows: [
|
|
68
|
-
* {
|
|
69
|
-
* cells: [
|
|
70
|
-
* {
|
|
71
|
-
* value: 216321,
|
|
72
|
-
* textAlign: 'center',
|
|
73
|
-
* },
|
|
74
|
-
* ],
|
|
75
|
-
* },
|
|
76
|
-
* ],
|
|
77
|
-
* columns: [
|
|
78
|
-
* {
|
|
79
|
-
* width: 100,
|
|
80
|
-
* },
|
|
81
|
-
* ],
|
|
82
|
-
* },
|
|
83
|
-
* ];
|
|
84
|
-
* const App = () => {
|
|
85
|
-
* return (
|
|
86
|
-
* <Spreadsheet
|
|
87
|
-
* style={{
|
|
88
|
-
* width: "100%",
|
|
89
|
-
* height: 680,
|
|
90
|
-
* }}
|
|
91
|
-
* defaultProps={{
|
|
92
|
-
* sheets,
|
|
93
|
-
* }}
|
|
94
|
-
* />
|
|
95
|
-
* );
|
|
96
|
-
* };
|
|
97
|
-
* ReactDOM.render(<App />, document.querySelector("my-app"));
|
|
98
|
-
* ```
|
|
99
|
-
*/
|
|
100
|
-
exports.Spreadsheet = React.forwardRef((props, ref) => {
|
|
101
|
-
(0, kendo_react_common_1.validatePackage)(package_metadata_1.packageMetadata);
|
|
102
|
-
const showLicenseWatermark = (0, kendo_react_common_1.shouldShowValidationUI)(package_metadata_1.packageMetadata);
|
|
103
|
-
const { toolbar = defaultTools_1.defaultTabs } = props;
|
|
104
|
-
const toolbarTools = [];
|
|
105
|
-
if (typeof toolbar === 'boolean') {
|
|
106
|
-
toolbarTools.push(...(toolbar ? defaultTools_1.defaultTabs : []));
|
|
107
|
-
}
|
|
108
|
-
else {
|
|
109
|
-
toolbarTools.push(...toolbar);
|
|
110
|
-
}
|
|
111
|
-
const [dialog, setDialog] = React.useState(null);
|
|
112
|
-
const [tab, setTab] = React.useState(toolbarTools.findIndex(t => t.selected) || 0);
|
|
113
|
-
const [_init, setInit] = React.useState(false);
|
|
114
|
-
const elementRef = React.useRef(null);
|
|
115
|
-
const formulaBarInputRef = React.useRef(null);
|
|
116
|
-
const formulaCellInputRef = React.useRef(null);
|
|
117
|
-
const nameBoxRef = React.useRef(null);
|
|
118
|
-
const spreadsheetRef = React.useRef(null);
|
|
119
|
-
const [toolsState, setToolsState] = React.useState({});
|
|
120
|
-
const prevState = React.useRef({});
|
|
121
|
-
prevState.current = toolsState;
|
|
122
|
-
const propsRef = React.useRef({});
|
|
123
|
-
propsRef.current = props;
|
|
124
|
-
const loc = (0, kendo_react_intl_1.useLocalization)();
|
|
125
|
-
const onSelect = React.useCallback((event) => {
|
|
126
|
-
if (propsRef.current.onSelect) {
|
|
127
|
-
propsRef.current.onSelect.call(undefined, event);
|
|
128
|
-
}
|
|
129
|
-
}, []);
|
|
130
|
-
const onChange = React.useCallback((event) => {
|
|
131
|
-
if (propsRef.current.onChange) {
|
|
132
|
-
propsRef.current.onChange.call(undefined, event);
|
|
133
|
-
}
|
|
134
|
-
}, []);
|
|
135
|
-
const onChangeFormat = React.useCallback((event) => {
|
|
136
|
-
if (propsRef.current.onChangeFormat) {
|
|
137
|
-
propsRef.current.onChangeFormat.call(undefined, event);
|
|
138
|
-
}
|
|
139
|
-
}, []);
|
|
140
|
-
const onExcelImport = React.useCallback((event) => {
|
|
141
|
-
if (propsRef.current.onExcelImport) {
|
|
142
|
-
propsRef.current.onExcelImport.call(undefined, event);
|
|
143
|
-
}
|
|
144
|
-
}, []);
|
|
145
|
-
const onExcelExport = React.useCallback((event) => {
|
|
146
|
-
if (propsRef.current.onExcelExport) {
|
|
147
|
-
propsRef.current.onExcelExport.call(undefined, event);
|
|
148
|
-
}
|
|
149
|
-
}, []);
|
|
150
|
-
const target = React.useRef(null);
|
|
151
|
-
React.useImperativeHandle(target, () => ({
|
|
152
|
-
element: elementRef.current,
|
|
153
|
-
get instance() { return spreadsheetRef.current; },
|
|
154
|
-
props,
|
|
155
|
-
get view() { return spreadsheetRef.current.view; },
|
|
156
|
-
get workbook() { return spreadsheetRef.current.workbook; },
|
|
157
|
-
executeCommand(options) { var _a; (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(options); },
|
|
158
|
-
fromJSON(json) { var _a; return (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.fromJSON(json); },
|
|
159
|
-
toJSON() { return spreadsheetRef.current.toJSON(); },
|
|
160
|
-
saveJSON() { return spreadsheetRef.current.saveJSON(); },
|
|
161
|
-
fromFile(file) { return spreadsheetRef.current.fromFile(file); },
|
|
162
|
-
saveAsExcel(options) {
|
|
163
|
-
var _a;
|
|
164
|
-
(_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.saveAsExcel(Object.assign(Object.assign(Object.assign({}, spreadsheetRef.current.options.excel), { saveAs: kendo_file_saver_1.saveAs,
|
|
165
|
-
Workbook: kendo_ooxml_1.Workbook }), options));
|
|
166
|
-
},
|
|
167
|
-
activeSheet(sheet) { var _a; return (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.activeSheet(sheet); },
|
|
168
|
-
sheets() { return spreadsheetRef.current.sheets(); },
|
|
169
|
-
refresh() { var _a; return (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.refresh(); }
|
|
170
|
-
}), [props]);
|
|
171
|
-
React.useImperativeHandle(ref, () => target.current);
|
|
172
|
-
const nameEditor = React.useCallback(() => {
|
|
173
|
-
return spreadsheetRef.current && spreadsheetRef.current.view.nameEditor;
|
|
174
|
-
}, []);
|
|
175
|
-
const onUpdateTools = React.useCallback((e) => {
|
|
176
|
-
const state = {};
|
|
177
|
-
toolsFunctions.forEach(tool => {
|
|
178
|
-
if (typeof e.range[tool] === 'function') {
|
|
179
|
-
state[tool] = e.range[tool]();
|
|
180
|
-
}
|
|
181
|
-
else if (tool === 'gridLines') {
|
|
182
|
-
state[tool] = e.range.sheet().showGridLines();
|
|
183
|
-
}
|
|
184
|
-
});
|
|
185
|
-
state.selectedHeaders = e.range.sheet().selectedHeaders();
|
|
186
|
-
if (toolsFunctions.some(k => state[k] !== prevState.current[k]) ||
|
|
187
|
-
state.selectedHeaders.allCols !== prevState.current.selectedHeaders.allCols ||
|
|
188
|
-
state.selectedHeaders.allRows !== prevState.current.selectedHeaders.allRows) {
|
|
189
|
-
setToolsState(state);
|
|
190
|
-
}
|
|
191
|
-
}, []);
|
|
192
|
-
const onMessage = React.useCallback((e) => {
|
|
193
|
-
const name = e.name;
|
|
194
|
-
const key = messages_1.keys[name];
|
|
195
|
-
setDialog({
|
|
196
|
-
title: e.title === 'Error' ? loc.toLanguageString(messages_1.keys.error, messages_1.messages[messages_1.keys.error] || e.title) : e.title,
|
|
197
|
-
message: key ? loc.toLanguageString(key, messages_1.messages[key] || e.text) : e.text,
|
|
198
|
-
close: e.close
|
|
199
|
-
});
|
|
200
|
-
}, []);
|
|
201
|
-
const onDialogClose = React.useCallback(() => {
|
|
202
|
-
setDialog(null);
|
|
203
|
-
dialog === null || dialog === void 0 ? void 0 : dialog.close();
|
|
204
|
-
}, [dialog]);
|
|
205
|
-
const intl = (0, kendo_react_intl_1.useInternationalization)();
|
|
206
|
-
const localization = (0, kendo_react_intl_1.useLocalization)();
|
|
207
|
-
React.useEffect(() => {
|
|
208
|
-
var _a;
|
|
209
|
-
const options = Object.assign(Object.assign({}, props.defaultProps), { sheets: structuredClone((_a = props.defaultProps) === null || _a === void 0 ? void 0 : _a.sheets), messages: {
|
|
210
|
-
workbook: {
|
|
211
|
-
defaultSheetName: localization.toLanguageString(messages_1.keys.defaultSheetName, messages_1.messages[messages_1.keys.defaultSheetName])
|
|
212
|
-
}
|
|
213
|
-
}, intl: {
|
|
214
|
-
localeInfo: () => intl.localeInfo(),
|
|
215
|
-
parseDate: (value, fmt) => intl.parseDate(value, fmt),
|
|
216
|
-
toString: (value, fmt) => intl.toString(value, fmt),
|
|
217
|
-
format: (fmt, ...values) => intl.format(fmt, ...values)
|
|
218
|
-
}, formulaBarInputRef,
|
|
219
|
-
formulaCellInputRef,
|
|
220
|
-
nameBoxRef });
|
|
221
|
-
const spreadsheet = new SpreadsheetProps_1.SpreadsheetWidget(elementRef.current, options);
|
|
222
|
-
spreadsheetRef.current = spreadsheet;
|
|
223
|
-
spreadsheet.bind('select', onSelect);
|
|
224
|
-
spreadsheet.bind('change', onChange);
|
|
225
|
-
spreadsheet.bind('changeFormat', onChangeFormat);
|
|
226
|
-
spreadsheet.bind('excelImport', onExcelImport);
|
|
227
|
-
spreadsheet.bind('excelExport', onExcelExport);
|
|
228
|
-
spreadsheet.view.bind('update', onUpdateTools);
|
|
229
|
-
spreadsheet.view.bind('message', onMessage);
|
|
230
|
-
const sheet = spreadsheet.activeSheet();
|
|
231
|
-
if (sheet) {
|
|
232
|
-
onUpdateTools({ range: sheet.range(sheet.activeCell()) });
|
|
233
|
-
}
|
|
234
|
-
setInit(true);
|
|
235
|
-
return () => {
|
|
236
|
-
spreadsheet.destroy();
|
|
237
|
-
};
|
|
238
|
-
}, []);
|
|
239
|
-
const renderTool = React.useCallback((Tool, index) => {
|
|
240
|
-
const tool = (React.createElement(Tool, { spreadsheetRef: spreadsheetRef, value: toolsValueMap[Tool.displayName] ? toolsValueMap[Tool.displayName](toolsState) : undefined, key: index }));
|
|
241
|
-
return tool.type === kendo_react_buttons_1.ToolbarSeparator ? React.createElement(Tool, { key: index }) : tool;
|
|
242
|
-
}, [toolsState]);
|
|
243
|
-
let tabstrip = null;
|
|
244
|
-
if (toolbarTools.length) {
|
|
245
|
-
tabstrip = (React.createElement(kendo_react_layout_1.TabStrip, { selected: tab, animation: false, className: "k-floatwrap k-spreadsheet-tabstrip", style: { minHeight: 'auto' }, onSelect: e => setTab(e.selected) }, toolbarTools.map((tabData) => {
|
|
246
|
-
const title = tabData.textKey ? localization.toLanguageString(tabData.textKey, messages_1.messages[tabData.textKey]) : tabData.text;
|
|
247
|
-
return (React.createElement(kendo_react_layout_1.TabStripTab, { key: tabData.textKey || tabData.text, title: title },
|
|
248
|
-
React.createElement(kendo_react_buttons_1.Toolbar, { buttons: toolbarButtons, className: 'k-spreadsheet-toolbar' }, tabData.tools.map((tool, index) => {
|
|
249
|
-
if (Array.isArray(tool)) {
|
|
250
|
-
return (React.createElement(kendo_react_buttons_1.ButtonGroup, { key: index }, tool.map((t, i) => renderTool(t, i))));
|
|
251
|
-
}
|
|
252
|
-
else {
|
|
253
|
-
return renderTool(tool, index);
|
|
254
|
-
}
|
|
255
|
-
}))));
|
|
256
|
-
})));
|
|
257
|
-
}
|
|
258
|
-
return (React.createElement("div", { ref: elementRef, style: props.style, className: (0, kendo_react_common_1.classNames)('k-widget k-spreadsheet', props.className), role: "application" },
|
|
259
|
-
tabstrip,
|
|
260
|
-
React.createElement("div", { className: "k-spreadsheet-action-bar" },
|
|
261
|
-
React.createElement(NameBox_1.NameBox, { ref: nameBoxRef, nameEditor: nameEditor }),
|
|
262
|
-
React.createElement("div", { className: "k-spreadsheet-formula-bar" },
|
|
263
|
-
React.createElement(kendo_react_common_1.IconWrap, { name: "formula-fx", icon: kendo_svg_icons_1.formulaFxIcon }),
|
|
264
|
-
React.createElement(FormulaInput_1.FormulaInput, { ref: formulaBarInputRef }))),
|
|
265
|
-
React.createElement("div", { className: "k-spreadsheet-view" },
|
|
266
|
-
React.createElement("div", { className: "k-spreadsheet-fixed-container" }),
|
|
267
|
-
React.createElement("div", { className: "k-spreadsheet-scroller" },
|
|
268
|
-
React.createElement("div", { className: "k-spreadsheet-view-size" })),
|
|
269
|
-
React.createElement("div", { tabIndex: 0, className: "k-spreadsheet-clipboard", contentEditable: "true" }),
|
|
270
|
-
React.createElement(FormulaInput_1.FormulaInput, { ref: formulaCellInputRef, className: "k-spreadsheet-cell-editor" })),
|
|
271
|
-
React.createElement(SheetsBar_1.SheetsBar, { spreadsheetRef: spreadsheetRef }),
|
|
272
|
-
dialog && (React.createElement(kendo_react_dialogs_1.Dialog, { title: dialog.title, onClose: onDialogClose },
|
|
273
|
-
React.createElement("div", null, dialog.message),
|
|
274
|
-
React.createElement(kendo_react_dialogs_1.DialogActionsBar, { layout: 'start' },
|
|
275
|
-
React.createElement(kendo_react_buttons_1.Button, { themeColor: 'primary', onClick: onDialogClose, autoFocus: true }, loc.toLanguageString(messages_1.keys.ok, messages_1.messages[messages_1.keys.ok]))))),
|
|
276
|
-
showLicenseWatermark && React.createElement(kendo_react_common_1.WatermarkOverlay, null)));
|
|
277
|
-
});
|
|
278
|
-
exports.Spreadsheet.displayName = 'KendoReactSpreadsheet';
|
|
279
|
-
exports.Spreadsheet.propTypes = {
|
|
280
|
-
className: PropTypes.string,
|
|
281
|
-
defaultProps: PropTypes.any,
|
|
282
|
-
toolbar: PropTypes.oneOfType([PropTypes.bool, PropTypes.arrayOf(PropTypes.any)]),
|
|
283
|
-
style: PropTypes.object,
|
|
284
|
-
onSelect: PropTypes.func,
|
|
285
|
-
onChange: PropTypes.func,
|
|
286
|
-
onChangeFormat: PropTypes.func,
|
|
287
|
-
onExcelImport: PropTypes.func,
|
|
288
|
-
onExcelExport: PropTypes.func
|
|
289
|
-
};
|
|
@@ -1,9 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.Sheet = exports.Workbook = exports.View = exports.Range = exports.SpreadsheetWidget = void 0;
|
|
4
|
-
const kendo_spreadsheet_common_1 = require("@progress/kendo-spreadsheet-common");
|
|
5
|
-
Object.defineProperty(exports, "SpreadsheetWidget", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.SpreadsheetWidget; } });
|
|
6
|
-
Object.defineProperty(exports, "Range", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.Range; } });
|
|
7
|
-
Object.defineProperty(exports, "View", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.View; } });
|
|
8
|
-
Object.defineProperty(exports, "Sheet", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.Sheet; } });
|
|
9
|
-
Object.defineProperty(exports, "Workbook", { enumerable: true, get: function () { return kendo_spreadsheet_common_1.Workbook; } });
|
package/dist/npm/main.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
export { Spreadsheet } from './Spreadsheet';
|
|
2
|
-
export * from './SpreadsheetProps';
|
|
3
|
-
export * from './tools';
|
|
4
|
-
export { Context, Matrix, CalcError, packDate, unpackDate, packTime, unpackTime, serialToDate, dateToSerial, defineFunction, defineAlias, Ref, CellRef, NameRef, RangeRef, UnionRef, NULLREF } from '@progress/kendo-spreadsheet-common';
|