@progress/kendo-react-spreadsheet 6.1.1 → 7.0.0-develop.2

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,44 +0,0 @@
1
- import * as React from 'react';
2
- import { SpreadsheetToolProps } from './utils';
3
- /**
4
- * The props of the Alignment tool component.
5
- */
6
- export interface AlignmentProps extends SpreadsheetToolProps {
7
- /**
8
- * The value of the tool.
9
- */
10
- value: {
11
- textAlign?: string;
12
- verticalAlign?: string;
13
- };
14
- }
15
- /**
16
- * The Alignment tool component.
17
- */
18
- export declare const Alignment: React.FunctionComponent<AlignmentProps>;
19
- /**
20
- * The props of the AlignHorizontally tool component.
21
- */
22
- export interface AlignHorizontallyProps extends SpreadsheetToolProps {
23
- /**
24
- * The value of the tool.
25
- */
26
- value: string;
27
- }
28
- /**
29
- * The props of the AlignVertically tool component.
30
- */
31
- export interface AlignVerticallyProps extends SpreadsheetToolProps {
32
- /**
33
- * The value of the tool.
34
- */
35
- value: string;
36
- }
37
- /**
38
- * The AlignHorizontally tool component.
39
- */
40
- export declare const AlignHorizontally: React.FunctionComponent<AlignHorizontallyProps>;
41
- /**
42
- * The AlignVertically tool component.
43
- */
44
- export declare const AlignVertically: React.FunctionComponent<AlignVerticallyProps>;
@@ -1,96 +0,0 @@
1
- import * as React from 'react';
2
- import { DropDownButton } from '@progress/kendo-react-buttons';
3
- import { IconWrap } from '@progress/kendo-react-common';
4
- import { alignLeftIcon, alignCenterIcon, alignRightIcon, alignJustifyIcon, alignTopIcon, alignMiddleIcon, alignBottomIcon, caretAltDownIcon } from '@progress/kendo-svg-icons';
5
- import { useLocalization } from '@progress/kendo-react-intl';
6
- import { keys, messages } from '../messages';
7
- const alignItems = [
8
- { icon: 'align-left', svgIcon: alignLeftIcon, textKey: keys.alignLeft, commandName: 'textAlign', value: 'left', selected: false },
9
- { icon: 'align-center', svgIcon: alignCenterIcon, textKey: keys.alignCenter, commandName: 'textAlign', value: 'center', selected: false },
10
- { icon: 'align-right', svgIcon: alignRightIcon, textKey: keys.alignRight, commandName: 'textAlign', value: 'right', selected: false },
11
- { icon: 'align-justify', svgIcon: alignJustifyIcon, textKey: keys.alignJustify, commandName: 'textAlign', value: 'justify', selected: false },
12
- { icon: 'align-top', svgIcon: alignTopIcon, textKey: keys.alignTop, commandName: 'verticalAlign', value: 'top', selected: false },
13
- { icon: 'align-middle', svgIcon: alignMiddleIcon, textKey: keys.alignMiddle, commandName: 'verticalAlign', value: 'center', selected: false },
14
- { icon: 'align-bottom', svgIcon: alignBottomIcon, textKey: keys.alignBottom, commandName: 'verticalAlign', value: 'bottom', selected: false }
15
- ];
16
- const alignHorizontalItems = [
17
- alignItems[0],
18
- Object.assign(Object.assign({}, alignItems[1]), { textKey: keys.center }),
19
- alignItems[2],
20
- Object.assign(Object.assign({}, alignItems[3]), { textKey: keys.justify })
21
- ];
22
- const alignVerticalItems = alignItems.filter(i => i.commandName === 'verticalAlign');
23
- /**
24
- * The Alignment tool component.
25
- */
26
- export const Alignment = props => {
27
- const { value, spreadsheetRef } = props;
28
- const { textAlign, verticalAlign } = value || {};
29
- const loc = useLocalization();
30
- const onItemClick = React.useCallback((event) => {
31
- if (spreadsheetRef.current) {
32
- const item = event.item;
33
- const options = {
34
- command: 'PropertyChangeCommand', options: { property: item.commandName, value: item.value || null }
35
- };
36
- spreadsheetRef.current.executeCommand(options);
37
- }
38
- }, []);
39
- let items = alignItems.slice();
40
- items = items.map(i => (Object.assign(Object.assign({}, i), { text: loc.toLanguageString(i.textKey, messages[i.textKey]) })));
41
- if (textAlign) {
42
- items = items.map(i => i.commandName === 'textAlign' ? Object.assign(Object.assign({}, i), { selected: i.value === textAlign }) : i);
43
- }
44
- if (verticalAlign) {
45
- items = items.map(i => i.commandName === 'verticalAlign' ? Object.assign(Object.assign({}, i), { selected: i.value === verticalAlign }) : i);
46
- }
47
- return (React.createElement(DropDownButton, { icon: "align-left", svgIcon: alignLeftIcon, items: items, fillMode: "flat", onItemClick: onItemClick, title: loc.toLanguageString(keys.align, messages[keys.align]), text: React.createElement(IconWrap, { name: "caret-alt-down", icon: caretAltDownIcon }) }));
48
- };
49
- Alignment.displayName = 'Alignment';
50
- const alignHorizontal = {
51
- items: alignHorizontalItems,
52
- icon: { icon: 'align-left', svgIcon: alignLeftIcon },
53
- displayName: 'AlignHorizontally',
54
- titleKey: keys.alignHorizontally
55
- };
56
- const alignVertical = {
57
- items: alignVerticalItems,
58
- icon: { icon: 'align-bottom', svgIcon: alignBottomIcon },
59
- displayName: 'AlignVertically',
60
- titleKey: keys.alignVertically
61
- };
62
- const createAlignTool = (settings) => {
63
- const Tool = props => {
64
- const { value, spreadsheetRef } = props;
65
- const loc = useLocalization();
66
- const onItemClick = React.useCallback((event) => {
67
- if (spreadsheetRef.current) {
68
- const item = event.item;
69
- const options = {
70
- command: 'PropertyChangeCommand', options: { property: item.commandName, value: item.value || null }
71
- };
72
- spreadsheetRef.current.executeCommand(options);
73
- }
74
- }, []);
75
- let items = settings.items.slice();
76
- items = items.map(i => (Object.assign(Object.assign({}, i), { text: loc.toLanguageString(i.textKey, messages[i.textKey]) })));
77
- items = items.map(i => (Object.assign(Object.assign({}, i), { selected: i.value === value })));
78
- const icons = Object.assign({}, settings.icon);
79
- const selected = items.find(i => i.selected);
80
- if (selected) {
81
- icons.icon = selected.icon;
82
- icons.svgIcon = selected.svgIcon;
83
- }
84
- return (React.createElement(DropDownButton, Object.assign({}, icons, { items: items, fillMode: "flat", onItemClick: onItemClick, title: loc.toLanguageString(settings.titleKey, messages[settings.titleKey]), text: React.createElement(IconWrap, { name: "caret-alt-down", icon: caretAltDownIcon }) })));
85
- };
86
- Tool.displayName = settings.displayName;
87
- return Tool;
88
- };
89
- /**
90
- * The AlignHorizontally tool component.
91
- */
92
- export const AlignHorizontally = createAlignTool(alignHorizontal);
93
- /**
94
- * The AlignVertically tool component.
95
- */
96
- export const AlignVertically = createAlignTool(alignVertical);
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { ColorToolProps } from './utils';
3
- /**
4
- * The props of the BackgroundColor tool component.
5
- */
6
- export interface BackgroundColorProps extends ColorToolProps {
7
- }
8
- /**
9
- * The BackgroundColor tool component.
10
- */
11
- export declare const BackgroundColor: React.FunctionComponent<BackgroundColorProps>;
@@ -1,15 +0,0 @@
1
- import { keys } from '../messages';
2
- import { ColorTool } from './utils';
3
- import { dropletIcon } from '@progress/kendo-svg-icons';
4
- /**
5
- * The BackgroundColor tool component.
6
- */
7
- export const BackgroundColor = ColorTool({
8
- icon: 'droplet',
9
- svgIcon: dropletIcon,
10
- view: 'palette',
11
- property: 'background',
12
- titleKey: keys.background,
13
- ariaLabel: 'Background'
14
- });
15
- BackgroundColor.displayName = 'BackgroundColor';
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { PropertyChangeToolProps } from './utils';
3
- /**
4
- * The props of the Bold tool component.
5
- */
6
- export interface BoldProps extends PropertyChangeToolProps {
7
- }
8
- /**
9
- * The Bold tool component.
10
- */
11
- export declare const Bold: React.FunctionComponent<BoldProps>;
@@ -1,9 +0,0 @@
1
- import { boldIcon } from '@progress/kendo-svg-icons';
2
- import { PropertyChangeTool } from './utils';
3
- import { keys } from '../messages';
4
- const boldSettings = { property: 'bold', icon: 'bold', svgIcon: boldIcon, titleKey: keys.bold };
5
- /**
6
- * The Bold tool component.
7
- */
8
- export const Bold = PropertyChangeTool(boldSettings);
9
- Bold.displayName = 'Bold';
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import { PropertyChangeToolProps } from './utils';
3
- /**
4
- * @hidden
5
- */
6
- export interface CleanFormattingProps extends PropertyChangeToolProps {
7
- }
8
- /**
9
- * @hidden
10
- */
11
- export declare const CleanFormatting: React.FunctionComponent<CleanFormattingProps>;
@@ -1,17 +0,0 @@
1
- import * as React from 'react';
2
- import { clearCssIcon } from '@progress/kendo-svg-icons';
3
- import { Button } from '@progress/kendo-react-buttons';
4
- import { useLocalization } from '@progress/kendo-react-intl';
5
- import { messages, keys } from '../messages';
6
- /**
7
- * @hidden
8
- */
9
- export const CleanFormatting = props => {
10
- const { spreadsheetRef } = props;
11
- const onClick = React.useCallback(() => {
12
- if (spreadsheetRef.current) {
13
- spreadsheetRef.current.executeCommand({ command: 'PropertyCleanCommand' });
14
- }
15
- }, []);
16
- return (React.createElement(Button, { type: "button", icon: 'clean-css', svgIcon: clearCssIcon, fillMode: "flat", onClick: onClick, title: useLocalization().toLanguageString(keys.cleanFormatting, messages[keys.cleanFormatting]) }));
17
- };
@@ -1,5 +0,0 @@
1
- import { SpreadsheetTab } from '../SpreadsheetProps';
2
- /**
3
- * The default toolbar configuration.
4
- */
5
- export declare const defaultTabs: SpreadsheetTab[];
@@ -1,66 +0,0 @@
1
- import { ToolbarSeparator } from '@progress/kendo-react-buttons';
2
- import { ExcelExport } from './export';
3
- import { Open } from './open';
4
- import { Bold } from './bold';
5
- import { Italic } from './italic';
6
- import { Underline } from './underline';
7
- import { FontFamily } from './fontFamily';
8
- import { DecreaseFontSize, FontSize, IncreaseFontSize } from './fontSize';
9
- import { TextColor } from './textColor';
10
- import { BackgroundColor } from './backgroundColor';
11
- import { AlignHorizontally, AlignVertically } from './align';
12
- import { TextWrap } from './textWrap';
13
- import { GridLines } from './gridLines';
14
- import { Format } from './format';
15
- import { AddColumnLeft, AddColumnRight, AddRowAbove, AddRowBelow, DeleteColumn, DeleteRow } from './tableTools';
16
- import { keys } from '../messages';
17
- import { Undo } from './undo';
18
- import { Redo } from './redo';
19
- import { DecreaseDecimal, IncreaseDecimal } from './adjustDecimals';
20
- /**
21
- * The default toolbar configuration.
22
- */
23
- export const defaultTabs = [
24
- {
25
- textKey: keys.file,
26
- tools: [
27
- Open,
28
- ExcelExport
29
- ]
30
- }, {
31
- textKey: keys.home,
32
- selected: true,
33
- tools: [
34
- [Undo, Redo],
35
- ToolbarSeparator,
36
- FontFamily,
37
- FontSize,
38
- IncreaseFontSize,
39
- DecreaseFontSize,
40
- ToolbarSeparator,
41
- [Bold, Italic, Underline],
42
- TextColor,
43
- ToolbarSeparator,
44
- BackgroundColor,
45
- ToolbarSeparator,
46
- AlignHorizontally,
47
- AlignVertically,
48
- TextWrap,
49
- ToolbarSeparator,
50
- GridLines
51
- ]
52
- }, {
53
- textKey: keys.insert,
54
- tools: [
55
- [AddColumnLeft, AddColumnRight, AddRowBelow, AddRowAbove],
56
- ToolbarSeparator,
57
- [DeleteColumn, DeleteRow]
58
- ]
59
- }, {
60
- textKey: keys.formatTab,
61
- tools: [
62
- Format,
63
- [DecreaseDecimal, IncreaseDecimal]
64
- ]
65
- }
66
- ];
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import { SpreadsheetToolProps } from './utils';
3
- /**
4
- * The props of the ExcelExport tool component.
5
- */
6
- export interface ExcelExportProps extends SpreadsheetToolProps {
7
- }
8
- /**
9
- * The ExcelExport tool component.
10
- */
11
- export declare const ExcelExport: React.FunctionComponent<ExcelExportProps>;
@@ -1,19 +0,0 @@
1
- import * as React from 'react';
2
- import { Button } from '@progress/kendo-react-buttons';
3
- import { saveAs } from '@progress/kendo-file-saver';
4
- import { Workbook } from '@progress/kendo-ooxml';
5
- import { downloadIcon } from '@progress/kendo-svg-icons';
6
- /**
7
- * The ExcelExport tool component.
8
- */
9
- export const ExcelExport = props => {
10
- const { spreadsheetRef } = props;
11
- const onDownload = React.useCallback(() => {
12
- if (spreadsheetRef.current) {
13
- spreadsheetRef.current.saveAsExcel(Object.assign(Object.assign({}, spreadsheetRef.current.options.excel), { saveAs,
14
- Workbook }));
15
- }
16
- }, []);
17
- return (React.createElement(Button, { className: 'k-toolbar-button', title: 'Export...', icon: 'download', fillMode: "flat", svgIcon: downloadIcon, onClick: onDownload }));
18
- };
19
- ExcelExport.displayName = 'ExcelExport';
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import { DropDownToolProps } from './utils';
3
- /**
4
- * The props of the FontFamily tool component.
5
- */
6
- export interface FontFamilyProps extends DropDownToolProps {
7
- }
8
- /**
9
- * The FontFamily tool component.
10
- */
11
- export declare const FontFamily: React.FunctionComponent<FontFamilyProps>;
@@ -1,21 +0,0 @@
1
- import * as React from 'react';
2
- import { DropDownList } from '@progress/kendo-react-dropdowns';
3
- import { DEFAULT_FONT_FAMILY, FONT_FAMILIES } from './utils';
4
- import { useLocalization } from '@progress/kendo-react-intl';
5
- import { keys, messages } from '../messages';
6
- /**
7
- * The FontFamily tool component.
8
- */
9
- export const FontFamily = props => {
10
- const { spreadsheetRef, value } = props;
11
- const onChange = React.useCallback((event) => {
12
- if (spreadsheetRef.current) {
13
- const options = {
14
- command: 'PropertyChangeCommand', options: { property: 'fontFamily', value: event.value || null }
15
- };
16
- spreadsheetRef.current.executeCommand(options);
17
- }
18
- }, []);
19
- return (React.createElement(DropDownList, { onChange: onChange, value: value, data: FONT_FAMILIES, defaultValue: DEFAULT_FONT_FAMILY, fillMode: "flat", title: useLocalization().toLanguageString(keys.fontName, messages[keys.fontName]), leftRightKeysNavigation: false }));
20
- };
21
- FontFamily.displayName = 'FontFamily';
@@ -1,82 +0,0 @@
1
- import * as React from 'react';
2
- import { ComboBox } from '@progress/kendo-react-dropdowns';
3
- import { DEFAULT_FONT_SIZE, FONT_SIZES } from './utils';
4
- import { keys, messages } from '../messages';
5
- import { useLocalization } from '@progress/kendo-react-intl';
6
- import { Button } from '@progress/kendo-react-buttons';
7
- import { fontGrowIcon, fontShrinkIcon } from '@progress/kendo-svg-icons';
8
- const minFontSize = 1;
9
- const maxFontSize = 409;
10
- const toNumber = (value) => {
11
- return typeof value === 'string' ? parseFloat(value) : value;
12
- };
13
- /**
14
- * The FontSize tool component.
15
- */
16
- export const FontSize = props => {
17
- const { spreadsheetRef } = props;
18
- const value = toNumber(props.value);
19
- const onChange = React.useCallback((event) => {
20
- var _a;
21
- let nextValue = event.value ? toNumber(event.value) : value;
22
- nextValue = isNaN(nextValue) ? value : nextValue;
23
- nextValue = Math.min(maxFontSize, Math.max(minFontSize, nextValue));
24
- const options = {
25
- command: 'PropertyChangeCommand', options: { property: 'fontSize', value: nextValue }
26
- };
27
- if (event.nativeEvent.type === 'keydown' || event.nativeEvent.type === 'focusout') {
28
- (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(options);
29
- }
30
- else {
31
- setTimeout(() => {
32
- var _a;
33
- (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(options);
34
- }, 0);
35
- }
36
- }, [value]);
37
- return (React.createElement(ComboBox, { onChange: onChange, value: value, data: FONT_SIZES, defaultValue: DEFAULT_FONT_SIZE, allowCustom: true, fillMode: "flat", title: useLocalization().toLanguageString(keys.fontSize, messages[keys.fontSize]), tabIndex: -1, clearButton: false }));
38
- };
39
- FontSize.displayName = 'FontSize';
40
- /**
41
- * @hidden
42
- */
43
- const fontSizeChangeTool = (settings) => {
44
- const tool = props => {
45
- const { property, icon, svgIcon, titleKey, step } = settings;
46
- const { spreadsheetRef } = props;
47
- const value = toNumber(props.value);
48
- const onClick = React.useCallback(() => {
49
- var _a;
50
- const options = {
51
- command: 'PropertyChangeCommand',
52
- options: { property, value: Math.min(maxFontSize, Math.max(minFontSize, value + step)) }
53
- };
54
- (_a = spreadsheetRef.current) === null || _a === void 0 ? void 0 : _a.executeCommand(options);
55
- }, [value]);
56
- return (React.createElement(Button, { type: "button", icon: icon, svgIcon: svgIcon, fillMode: "flat", onClick: onClick, disabled: value + step < minFontSize || value + step > maxFontSize, title: useLocalization().toLanguageString(titleKey, messages[titleKey]) }));
57
- };
58
- tool.displayName = settings.displayName;
59
- return tool;
60
- };
61
- /**
62
- * The IncreaseFontSize tool component.
63
- */
64
- export const IncreaseFontSize = fontSizeChangeTool({
65
- property: 'fontSize',
66
- icon: 'font-grow',
67
- svgIcon: fontGrowIcon,
68
- titleKey: keys.fontSizeIncrease,
69
- displayName: 'IncreaseFontSize',
70
- step: 1
71
- });
72
- /**
73
- * The DecreaseFontSize tool component.
74
- */
75
- export const DecreaseFontSize = fontSizeChangeTool({
76
- property: 'fontSize',
77
- icon: 'font-shrink',
78
- svgIcon: fontShrinkIcon,
79
- titleKey: keys.fontSizeDecrease,
80
- displayName: 'DecreaseFontSize',
81
- step: -1
82
- });
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import { SpreadsheetToolProps } from './utils';
3
- /**
4
- * The props of the Format tool component.
5
- */
6
- export interface FormatProps extends SpreadsheetToolProps {
7
- }
8
- /**
9
- * The Format tool component.
10
- */
11
- export declare const Format: React.FunctionComponent<FormatProps>;
@@ -1,26 +0,0 @@
1
- import * as React from 'react';
2
- import { DropDownButton } from '@progress/kendo-react-buttons';
3
- import { customFormatIcon } from '@progress/kendo-svg-icons';
4
- import { FORMATS } from './utils';
5
- import { IconWrap } from '@progress/kendo-react-common';
6
- import { useLocalization } from '@progress/kendo-react-intl';
7
- import { keys, messages } from '../messages';
8
- /**
9
- * The Format tool component.
10
- */
11
- export const Format = props => {
12
- const { spreadsheetRef } = props;
13
- const onChange = React.useCallback((event) => {
14
- const value = event.item.value || null;
15
- setTimeout(() => {
16
- if (spreadsheetRef.current) {
17
- const options = {
18
- command: 'PropertyChangeCommand', options: { property: 'format', value }
19
- };
20
- spreadsheetRef.current.executeCommand(options);
21
- }
22
- }, 0);
23
- }, []);
24
- return (React.createElement(DropDownButton, { icon: 'custom-format', svgIcon: customFormatIcon, fillMode: "flat", onItemClick: onChange, items: FORMATS, title: useLocalization().toLanguageString(keys.format, messages[keys.format]), text: React.createElement(IconWrap, { name: "caret-alt-down" }) }));
25
- };
26
- Format.displayName = 'Format';
@@ -1,25 +0,0 @@
1
- import * as React from 'react';
2
- import { Button } from '@progress/kendo-react-buttons';
3
- import { bordersNoneIcon } from '@progress/kendo-svg-icons';
4
- import { useLocalization } from '@progress/kendo-react-intl';
5
- import { keys, messages } from '../messages';
6
- /**
7
- * The GridLines tool component.
8
- */
9
- export const GridLines = props => {
10
- const { value: selected, spreadsheetRef } = props;
11
- const onClick = React.useCallback(() => {
12
- if (spreadsheetRef.current) {
13
- const sheet = spreadsheetRef.current.activeSheet();
14
- if (sheet) {
15
- const value = !sheet.showGridLines();
16
- const options = {
17
- command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
18
- };
19
- spreadsheetRef.current.executeCommand(options);
20
- }
21
- }
22
- }, []);
23
- return (React.createElement(Button, { type: 'button', togglable: true, icon: 'borders-none', svgIcon: bordersNoneIcon, fillMode: "flat", title: useLocalization().toLanguageString(keys.gridLines, messages[keys.gridLines]), onClick: onClick, selected: selected }));
24
- };
25
- GridLines.displayName = 'GridLines';
@@ -1,18 +0,0 @@
1
- export * from './align';
2
- export * from './backgroundColor';
3
- export * from './bold';
4
- export * from './defaultTools';
5
- export * from './export';
6
- export * from './fontFamily';
7
- export * from './fontSize';
8
- export * from './cleanFormat';
9
- export * from './format';
10
- export * from './gridLines';
11
- export * from './italic';
12
- export * from './open';
13
- export * from './redo';
14
- export * from './tableTools';
15
- export * from './textColor';
16
- export * from './textWrap';
17
- export * from './underline';
18
- export * from './undo';
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { PropertyChangeToolProps } from './utils';
3
- /**
4
- * The props of the Italic tool component.
5
- */
6
- export interface ItalicProps extends PropertyChangeToolProps {
7
- }
8
- /**
9
- * The Italic tool component.
10
- */
11
- export declare const Italic: React.FunctionComponent<ItalicProps>;
@@ -1,9 +0,0 @@
1
- import { italicIcon } from '@progress/kendo-svg-icons';
2
- import { PropertyChangeTool } from './utils';
3
- import { keys } from '../messages';
4
- const italicSettings = { property: 'italic', icon: 'italic', svgIcon: italicIcon, titleKey: keys.italic };
5
- /**
6
- * The Italic tool component.
7
- */
8
- export const Italic = PropertyChangeTool(italicSettings);
9
- Italic.displayName = 'Italic';
@@ -1,11 +0,0 @@
1
- import * as React from 'react';
2
- import { SpreadsheetToolProps } from './utils';
3
- /**
4
- * The props of the Open tool component.
5
- */
6
- export interface OpenProps extends SpreadsheetToolProps {
7
- }
8
- /**
9
- * The Open tool component.
10
- */
11
- export declare const Open: React.FunctionComponent<OpenProps>;
@@ -1,36 +0,0 @@
1
- import * as React from 'react';
2
- import { Button } from '@progress/kendo-react-buttons';
3
- import { Upload } from '@progress/kendo-react-upload';
4
- import { folderOpenIcon } from '@progress/kendo-svg-icons';
5
- import { useLocalization } from '@progress/kendo-react-intl';
6
- import { keys, messages } from '../messages';
7
- /**
8
- * The Open tool component.
9
- */
10
- export const Open = props => {
11
- const { spreadsheetRef } = props;
12
- const onFileOpen = React.useCallback((event) => {
13
- const targetEl = event.target;
14
- if (targetEl instanceof Element && targetEl.parentNode) {
15
- const toolbarEl = targetEl.closest('.k-toolbar');
16
- const input = toolbarEl && toolbarEl.querySelector('.k-upload input');
17
- if (input) {
18
- input.click();
19
- }
20
- }
21
- }, []);
22
- const onAdd = React.useCallback((event) => {
23
- const fileInfo = event.newState;
24
- if (fileInfo[0] && fileInfo[0].getRawFile) {
25
- const file = fileInfo[0].getRawFile();
26
- if (spreadsheetRef.current) {
27
- spreadsheetRef.current.executeCommand({ command: 'OpenCommand', options: { file } });
28
- }
29
- }
30
- }, []);
31
- return (React.createElement(React.Fragment, null,
32
- React.createElement(Button, { className: 'k-toolbar-button', title: useLocalization().toLanguageString(keys.open, messages[keys.open]), icon: 'folder-open', svgIcon: folderOpenIcon, fillMode: "flat", onClick: onFileOpen }),
33
- React.createElement("div", { style: { display: 'none' } },
34
- React.createElement(Upload, { restrictions: { allowedExtensions: ['.xlsx'] }, onAdd: onAdd, autoUpload: false, defaultFiles: [], multiple: false, accept: ".xlsx,.XLSX", withCredentials: false }))));
35
- };
36
- Open.displayName = 'Open';
@@ -1,11 +0,0 @@
1
- /// <reference types="react" />
2
- import { SpreadsheetToolProps } from './utils';
3
- /**
4
- * The props of the Redo tool component.
5
- */
6
- export interface RedoProps extends SpreadsheetToolProps {
7
- }
8
- /**
9
- * The Redo tool component.
10
- */
11
- export declare const Redo: React.FunctionComponent<RedoProps>;
@@ -1,9 +0,0 @@
1
- import { arrowRotateCwIcon } from '@progress/kendo-svg-icons';
2
- import { UndoRedo } from './utils';
3
- import { keys } from '../messages';
4
- const redoSettings = { action: 'redo', icon: 'reload', svgIcon: arrowRotateCwIcon, titleKey: keys.redo };
5
- /**
6
- * The Redo tool component.
7
- */
8
- export const Redo = UndoRedo(redoSettings);
9
- Redo.displayName = 'Redo';