@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.
Files changed (147) hide show
  1. package/FormulaInput.d.ts +9 -0
  2. package/LICENSE.md +1 -1
  3. package/List.d.ts +9 -0
  4. package/NameBox.d.ts +9 -0
  5. package/SheetsBar.d.ts +8 -0
  6. package/{dist/npm/Spreadsheet.d.ts → Spreadsheet.d.ts} +4 -0
  7. package/{dist/npm/SpreadsheetProps.d.ts → SpreadsheetProps.d.ts} +5 -2
  8. package/dist/cdn/js/kendo-react-spreadsheet.js +5 -1
  9. package/index.d.ts +8 -0
  10. package/index.js +5 -0
  11. package/index.mjs +1357 -0
  12. package/{dist/npm/messages.d.ts → messages.d.ts} +4 -0
  13. package/package-metadata.d.ts +9 -0
  14. package/package.json +43 -57
  15. package/{dist/npm/tools → tools}/adjustDecimals.d.ts +4 -0
  16. package/{dist/npm/tools → tools}/align.d.ts +4 -0
  17. package/tools/backgroundColor.d.ts +14 -0
  18. package/tools/bold.d.ts +14 -0
  19. package/tools/cleanFormat.d.ts +15 -0
  20. package/tools/defaultTools.d.ts +9 -0
  21. package/tools/export.d.ts +15 -0
  22. package/tools/fontFamily.d.ts +15 -0
  23. package/{dist/es/tools → tools}/fontSize.d.ts +4 -0
  24. package/tools/format.d.ts +15 -0
  25. package/{dist/es/tools → tools}/gridLines.d.ts +4 -0
  26. package/{dist/es/tools → tools}/index.d.ts +5 -1
  27. package/tools/italic.d.ts +14 -0
  28. package/tools/open.d.ts +15 -0
  29. package/tools/redo.d.ts +14 -0
  30. package/{dist/npm/tools → tools}/tableTools.d.ts +4 -0
  31. package/tools/textColor.d.ts +14 -0
  32. package/{dist/es/tools → tools}/textWrap.d.ts +4 -0
  33. package/tools/underline.d.ts +14 -0
  34. package/tools/undo.d.ts +14 -0
  35. package/{dist/npm/tools → tools}/utils.d.ts +4 -0
  36. package/about.md +0 -3
  37. package/dist/es/FormulaInput.d.ts +0 -5
  38. package/dist/es/FormulaInput.js +0 -116
  39. package/dist/es/List.d.ts +0 -5
  40. package/dist/es/List.js +0 -22
  41. package/dist/es/NameBox.d.ts +0 -5
  42. package/dist/es/NameBox.js +0 -91
  43. package/dist/es/SheetsBar.d.ts +0 -5
  44. package/dist/es/SheetsBar.js +0 -246
  45. package/dist/es/Spreadsheet.d.ts +0 -47
  46. package/dist/es/Spreadsheet.js +0 -286
  47. package/dist/es/SpreadsheetProps.d.ts +0 -189
  48. package/dist/es/SpreadsheetProps.js +0 -2
  49. package/dist/es/main.d.ts +0 -4
  50. package/dist/es/main.js +0 -4
  51. package/dist/es/messages.d.ts +0 -110
  52. package/dist/es/messages.js +0 -310
  53. package/dist/es/package-metadata.d.ts +0 -5
  54. package/dist/es/package-metadata.js +0 -11
  55. package/dist/es/tools/adjustDecimals.d.ts +0 -20
  56. package/dist/es/tools/adjustDecimals.js +0 -39
  57. package/dist/es/tools/align.d.ts +0 -44
  58. package/dist/es/tools/align.js +0 -96
  59. package/dist/es/tools/backgroundColor.d.ts +0 -11
  60. package/dist/es/tools/backgroundColor.js +0 -15
  61. package/dist/es/tools/bold.d.ts +0 -11
  62. package/dist/es/tools/bold.js +0 -9
  63. package/dist/es/tools/cleanFormat.d.ts +0 -11
  64. package/dist/es/tools/cleanFormat.js +0 -17
  65. package/dist/es/tools/defaultTools.d.ts +0 -5
  66. package/dist/es/tools/defaultTools.js +0 -66
  67. package/dist/es/tools/export.d.ts +0 -11
  68. package/dist/es/tools/export.js +0 -19
  69. package/dist/es/tools/fontFamily.d.ts +0 -11
  70. package/dist/es/tools/fontFamily.js +0 -21
  71. package/dist/es/tools/fontSize.js +0 -82
  72. package/dist/es/tools/format.d.ts +0 -11
  73. package/dist/es/tools/format.js +0 -26
  74. package/dist/es/tools/gridLines.js +0 -25
  75. package/dist/es/tools/index.js +0 -18
  76. package/dist/es/tools/italic.d.ts +0 -11
  77. package/dist/es/tools/italic.js +0 -9
  78. package/dist/es/tools/open.d.ts +0 -11
  79. package/dist/es/tools/open.js +0 -36
  80. package/dist/es/tools/redo.d.ts +0 -11
  81. package/dist/es/tools/redo.js +0 -9
  82. package/dist/es/tools/tableTools.d.ts +0 -64
  83. package/dist/es/tools/tableTools.js +0 -102
  84. package/dist/es/tools/textColor.d.ts +0 -11
  85. package/dist/es/tools/textColor.js +0 -15
  86. package/dist/es/tools/textWrap.js +0 -26
  87. package/dist/es/tools/underline.d.ts +0 -11
  88. package/dist/es/tools/underline.js +0 -9
  89. package/dist/es/tools/undo.d.ts +0 -11
  90. package/dist/es/tools/undo.js +0 -9
  91. package/dist/es/tools/utils.d.ts +0 -91
  92. package/dist/es/tools/utils.js +0 -102
  93. package/dist/npm/FormulaInput.d.ts +0 -5
  94. package/dist/npm/FormulaInput.js +0 -119
  95. package/dist/npm/List.d.ts +0 -5
  96. package/dist/npm/List.js +0 -25
  97. package/dist/npm/NameBox.d.ts +0 -5
  98. package/dist/npm/NameBox.js +0 -94
  99. package/dist/npm/SheetsBar.d.ts +0 -5
  100. package/dist/npm/SheetsBar.js +0 -250
  101. package/dist/npm/Spreadsheet.js +0 -289
  102. package/dist/npm/SpreadsheetProps.js +0 -9
  103. package/dist/npm/main.d.ts +0 -4
  104. package/dist/npm/main.js +0 -39
  105. package/dist/npm/messages.js +0 -313
  106. package/dist/npm/package-metadata.d.ts +0 -5
  107. package/dist/npm/package-metadata.js +0 -14
  108. package/dist/npm/tools/adjustDecimals.js +0 -42
  109. package/dist/npm/tools/align.js +0 -100
  110. package/dist/npm/tools/backgroundColor.d.ts +0 -11
  111. package/dist/npm/tools/backgroundColor.js +0 -18
  112. package/dist/npm/tools/bold.d.ts +0 -11
  113. package/dist/npm/tools/bold.js +0 -12
  114. package/dist/npm/tools/cleanFormat.d.ts +0 -11
  115. package/dist/npm/tools/cleanFormat.js +0 -21
  116. package/dist/npm/tools/defaultTools.d.ts +0 -5
  117. package/dist/npm/tools/defaultTools.js +0 -69
  118. package/dist/npm/tools/export.d.ts +0 -11
  119. package/dist/npm/tools/export.js +0 -23
  120. package/dist/npm/tools/fontFamily.d.ts +0 -11
  121. package/dist/npm/tools/fontFamily.js +0 -25
  122. package/dist/npm/tools/fontSize.d.ts +0 -39
  123. package/dist/npm/tools/fontSize.js +0 -86
  124. package/dist/npm/tools/format.d.ts +0 -11
  125. package/dist/npm/tools/format.js +0 -30
  126. package/dist/npm/tools/gridLines.d.ts +0 -15
  127. package/dist/npm/tools/gridLines.js +0 -29
  128. package/dist/npm/tools/index.d.ts +0 -19
  129. package/dist/npm/tools/index.js +0 -34
  130. package/dist/npm/tools/italic.d.ts +0 -11
  131. package/dist/npm/tools/italic.js +0 -12
  132. package/dist/npm/tools/open.d.ts +0 -11
  133. package/dist/npm/tools/open.js +0 -40
  134. package/dist/npm/tools/redo.d.ts +0 -11
  135. package/dist/npm/tools/redo.js +0 -12
  136. package/dist/npm/tools/tableTools.js +0 -105
  137. package/dist/npm/tools/textColor.d.ts +0 -11
  138. package/dist/npm/tools/textColor.js +0 -18
  139. package/dist/npm/tools/textWrap.d.ts +0 -15
  140. package/dist/npm/tools/textWrap.js +0 -30
  141. package/dist/npm/tools/underline.d.ts +0 -11
  142. package/dist/npm/tools/underline.js +0 -12
  143. package/dist/npm/tools/undo.d.ts +0 -11
  144. package/dist/npm/tools/undo.js +0 -12
  145. package/dist/npm/tools/utils.js +0 -108
  146. package/dist/systemjs/kendo-react-spreadsheet.js +0 -1
  147. package/e2e-next/basic.tests.ts +0 -24
@@ -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 = {};
@@ -1,5 +0,0 @@
1
- /// <reference types="react" />
2
- /**
3
- * @hidden
4
- */
5
- export declare const SheetsBar: (props: any) => JSX.Element;
@@ -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;
@@ -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; } });
@@ -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';