@progress/kendo-react-spreadsheet 5.14.0-dev.202305151331

package/dist/es/tools/backgroundColor.js

@@ -0,0 +1,12 @@
+import { keys } from '../messages';
+import { ColorTool } from './utils';
+import { dropletIcon } from '@progress/kendo-svg-icons';
+export const BackgroundColor = ColorTool({
+    icon: 'droplet',
+    svgIcon: dropletIcon,
+    view: 'palette',
+    property: 'background',
+    titleKey: keys.background,
+    ariaLabel: 'Background'
+});
+BackgroundColor.displayName = 'BackgroundColor';

package/dist/es/tools/bold.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PropertyChangeToolProps } from './utils';
+export interface BoldProps extends PropertyChangeToolProps {
+}
+export declare const Bold: import("react").FunctionComponent<BoldProps>;

package/dist/es/tools/bold.js

@@ -0,0 +1,5 @@
+import { boldIcon } from '@progress/kendo-svg-icons';
+import { PropertyChangeTool } from './utils';
+import { keys } from '../messages';
+export const Bold = PropertyChangeTool({ property: 'bold', icon: 'bold', svgIcon: boldIcon, titleKey: keys.bold });
+Bold.displayName = 'Bold';

package/dist/es/tools/defaultTools.d.ts

@@ -0,0 +1,2 @@
+import { Tab } from '../SpreadsheetProps';
+export declare const defaultTabs: Tab[];

package/dist/es/tools/defaultTools.js

@@ -0,0 +1,42 @@
+import { ToolbarSeparator } from '@progress/kendo-react-buttons';
+import { ExcelExport } from './export';
+import { Open } from './open';
+import { Bold } from './bold';
+import { Italic } from './italic';
+import { Underline } from './underline';
+import { FontFamily } from './fontFamily';
+import { FontSize } from './fontSize';
+import { TextColor } from './textColor';
+import { BackgroundColor } from './backgroundColor';
+import { Alignment } from './align';
+import { TextWrap } from './textWrap';
+import { GridLines } from './gridLines';
+import { Format } from './format';
+import { AddColumnLeft, AddColumnRight, AddRowAbove, AddRowBelow, DeleteColumn, DeleteRow } from './tableTools';
+import { keys } from '../messages';
+export const defaultTabs = [
+    {
+        textKey: keys.home,
+        tools: [
+            Open,
+            ExcelExport,
+            ToolbarSeparator,
+            [Bold, Italic, Underline],
+            FontFamily,
+            FontSize,
+            TextColor,
+            BackgroundColor,
+            Alignment,
+            TextWrap,
+            GridLines,
+            Format
+        ]
+    }, {
+        textKey: keys.insert,
+        tools: [
+            [AddColumnLeft, AddColumnRight, AddRowBelow, AddRowAbove],
+            ToolbarSeparator,
+            [DeleteColumn, DeleteRow]
+        ]
+    }
+];

package/dist/es/tools/export.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface ExcelExportProps extends BaseToolProps {
+}
+export declare const ExcelExport: React.FunctionComponent<ExcelExportProps>;

package/dist/es/tools/export.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { saveAs } from '@progress/kendo-file-saver';
+import { Workbook } from '@progress/kendo-ooxml';
+import { downloadIcon } from '@progress/kendo-svg-icons';
+export const ExcelExport = props => {
+    const { spreadsheetRef } = props;
+    const onDownload = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            spreadsheetRef.current.saveAsExcel(Object.assign(Object.assign({}, spreadsheetRef.current.options.excel), { saveAs,
+                Workbook }));
+        }
+    }, []);
+    return (React.createElement(Button, { className: 'k-toolbar-button', title: 'Export...', icon: 'download', svgIcon: downloadIcon, onClick: onDownload }));
+};
+ExcelExport.displayName = 'ExcelExport';

package/dist/es/tools/fontFamily.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { DropDownToolProps } from './utils';
+export interface FontFamilyProps extends DropDownToolProps {
+}
+export declare const FontFamily: React.FunctionComponent<FontFamilyProps>;

package/dist/es/tools/fontFamily.js

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { DropDownList } from '@progress/kendo-react-dropdowns';
+import { DEFAULT_FONT_FAMILY, FONT_FAMILIES } from './utils';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { keys, messages } from '../messages';
+export const FontFamily = props => {
+    const { spreadsheetRef, value } = props;
+    const onChange = React.useCallback((event) => {
+        if (spreadsheetRef.current) {
+            const options = {
+                command: 'PropertyChangeCommand', options: { property: 'fontFamily', value: event.value || null }
+            };
+            spreadsheetRef.current.executeCommand(options);
+        }
+    }, []);
+    return (React.createElement(DropDownList, { onChange: onChange, value: value, data: FONT_FAMILIES, defaultValue: DEFAULT_FONT_FAMILY, title: useLocalization().toLanguageString(keys.fontName, messages[keys.fontName]), leftRightKeysNavigation: false }));
+};
+FontFamily.displayName = 'FontFamily';

package/dist/es/tools/fontSize.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { DropDownToolProps } from './utils';
+export interface FontSizeProps extends DropDownToolProps {
+}
+export declare const FontSize: React.FunctionComponent<FontSizeProps>;

package/dist/es/tools/fontSize.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { ComboBox } from '@progress/kendo-react-dropdowns';
+import { DEFAULT_FONT_SIZE, FONT_SIZES } from './utils';
+import { keys, messages } from '../messages';
+import { useLocalization } from '@progress/kendo-react-intl';
+export const FontSize = (props) => {
+    const { spreadsheetRef, value } = props;
+    const onChange = React.useCallback((event) => {
+        if (spreadsheetRef.current) {
+            const options = {
+                command: 'PropertyChangeCommand', options: { property: 'fontSize', value: event.value || null }
+            };
+            setTimeout(() => {
+                spreadsheetRef.current.executeCommand(options);
+            }, 0);
+        }
+    }, []);
+    return (React.createElement(ComboBox, { onChange: onChange, value: value, data: FONT_SIZES, defaultValue: DEFAULT_FONT_SIZE, allowCustom: true, title: useLocalization().toLanguageString(keys.fontSize, messages[keys.fontSize]), tabIndex: -1 }));
+};
+FontSize.displayName = 'FontSize';

package/dist/es/tools/format.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface FormatProps extends BaseToolProps {
+}
+export declare const Format: React.FunctionComponent<FormatProps>;

package/dist/es/tools/format.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { DropDownButton } from '@progress/kendo-react-buttons';
+import { customFormatIcon } from '@progress/kendo-svg-icons';
+import { FORMATS } from './utils';
+import { IconWrap } from '@progress/kendo-react-common';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { keys, messages } from '../messages';
+export const Format = props => {
+    const { spreadsheetRef } = props;
+    const onChange = React.useCallback((event) => {
+        const value = event.item.value || null;
+        setTimeout(() => {
+            if (spreadsheetRef.current) {
+                const options = {
+                    command: 'PropertyChangeCommand', options: { property: 'format', value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }, 0);
+    }, []);
+    return (React.createElement(DropDownButton, { icon: 'custom-format', svgIcon: customFormatIcon, onItemClick: onChange, items: FORMATS, title: useLocalization().toLanguageString(keys.format, messages[keys.format]), text: React.createElement(IconWrap, { name: "caret-alt-down" }) }));
+};
+Format.displayName = 'Format';

package/dist/es/tools/gridLines.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface GridLinesProps extends BaseToolProps {
+    value?: boolean;
+}
+export declare const GridLines: React.FunctionComponent<GridLinesProps>;

package/dist/es/tools/gridLines.js

@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { bordersNoneIcon } from '@progress/kendo-svg-icons';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { keys, messages } from '../messages';
+export const GridLines = props => {
+    const { value: selected, spreadsheetRef } = props;
+    const onClick = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            const sheet = spreadsheetRef.current.activeSheet();
+            if (sheet) {
+                const value = !sheet.showGridLines();
+                const options = {
+                    command: 'GridLinesChangeCommand', options: { property: 'gridLines', value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }
+    }, []);
+    return (React.createElement(Button, { type: 'button', togglable: true, icon: 'borders-none', svgIcon: bordersNoneIcon, title: useLocalization().toLanguageString(keys.gridLines, messages[keys.gridLines]), onClick: onClick, selected: selected }));
+};
+GridLines.displayName = 'GridLines';

package/dist/es/tools/index.d.ts

@@ -0,0 +1,17 @@
+export * from './align';
+export * from './backgroundColor';
+export * from './bold';
+export * from './defaultTools';
+export * from './export';
+export * from './fontFamily';
+export * from './fontSize';
+export * from './format';
+export * from './gridLines';
+export * from './italic';
+export * from './open';
+export * from './redo';
+export * from './tableTools';
+export * from './textColor';
+export * from './textWrap';
+export * from './underline';
+export * from './undo';

package/dist/es/tools/index.js

@@ -0,0 +1,17 @@
+export * from './align';
+export * from './backgroundColor';
+export * from './bold';
+export * from './defaultTools';
+export * from './export';
+export * from './fontFamily';
+export * from './fontSize';
+export * from './format';
+export * from './gridLines';
+export * from './italic';
+export * from './open';
+export * from './redo';
+export * from './tableTools';
+export * from './textColor';
+export * from './textWrap';
+export * from './underline';
+export * from './undo';

package/dist/es/tools/italic.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PropertyChangeToolProps } from './utils';
+export interface ItalicProps extends PropertyChangeToolProps {
+}
+export declare const Italic: import("react").FunctionComponent<ItalicProps>;

package/dist/es/tools/italic.js

@@ -0,0 +1,5 @@
+import { italicIcon } from '@progress/kendo-svg-icons';
+import { PropertyChangeTool } from './utils';
+import { keys } from '../messages';
+export const Italic = PropertyChangeTool({ property: 'italic', icon: 'italic', svgIcon: italicIcon, titleKey: keys.italic });
+Italic.displayName = 'Italic';

package/dist/es/tools/open.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface OpenProps extends BaseToolProps {
+}
+export declare const Open: React.FunctionComponent<OpenProps>;

package/dist/es/tools/open.js

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { Upload } from '@progress/kendo-react-upload';
+import { folderOpenIcon } from '@progress/kendo-svg-icons';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { keys, messages } from '../messages';
+export const Open = props => {
+    const { spreadsheetRef } = props;
+    const onFileOpen = React.useCallback((event) => {
+        const targetEl = event.target;
+        if (targetEl instanceof HTMLElement && targetEl.parentNode) {
+            const toolbarEl = targetEl.closest('.k-toolbar');
+            const input = toolbarEl && toolbarEl.querySelector('.k-upload input');
+            if (input) {
+                input.click();
+            }
+        }
+    }, []);
+    const onAdd = React.useCallback((event) => {
+        const fileInfo = event.newState;
+        if (fileInfo[0] && fileInfo[0].getRawFile) {
+            const file = fileInfo[0].getRawFile();
+            if (spreadsheetRef.current) {
+                spreadsheetRef.current.fromFile(file);
+            }
+        }
+    }, []);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Button, { className: 'k-toolbar-button', title: useLocalization().toLanguageString(keys.open, messages[keys.open]), icon: 'folder-open', svgIcon: folderOpenIcon, onClick: onFileOpen }),
+        React.createElement("div", { style: { display: 'none' } },
+            React.createElement(Upload, { restrictions: { allowedExtensions: ['.xlsx'] }, onAdd: onAdd, autoUpload: false, defaultFiles: [], multiple: false, accept: ".xlsx,.XLSX", withCredentials: false }))));
+};
+Open.displayName = 'Open';

package/dist/es/tools/redo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BaseToolProps } from './utils';
+export interface RedoProps extends BaseToolProps {
+}
+export declare const Redo: import("react").FunctionComponent<RedoProps>;

package/dist/es/tools/redo.js

@@ -0,0 +1,5 @@
+import { redoIcon } from '@progress/kendo-svg-icons';
+import { UndoRedo } from './utils';
+import { keys } from '../messages';
+export const Redo = UndoRedo({ action: 'redo', icon: 'redo', svgIcon: redoIcon, titleKey: keys.redo });
+Redo.displayName = 'Redo';

package/dist/es/tools/tableTools.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface AddColumnLeftProps extends BaseToolProps {
+}
+export interface AddColumnRightProps extends BaseToolProps {
+}
+export interface AddRowBelowProps extends BaseToolProps {
+}
+export interface AddRowAboveProps extends BaseToolProps {
+}
+export interface DeleteColumnProps extends BaseToolProps {
+}
+export interface DeleteRowProps extends BaseToolProps {
+}
+export declare const AddColumnLeft: React.FunctionComponent<AddColumnLeftProps>;
+export declare const AddColumnRight: React.FunctionComponent<AddColumnRightProps>;
+export declare const AddRowBelow: React.FunctionComponent<AddRowBelowProps>;
+export declare const AddRowAbove: React.FunctionComponent<AddRowAboveProps>;
+export declare const DeleteColumn: React.FunctionComponent<DeleteColumnProps>;
+export declare const DeleteRow: React.FunctionComponent<DeleteRowProps>;

package/dist/es/tools/tableTools.js

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { tableColumnInsertLeftIcon, tableColumnInsertRightIcon, tableRowInsertBelowIcon, tableRowInsertAboveIcon, tableColumnDeleteIcon, tableRowDeleteIcon } from '@progress/kendo-svg-icons';
+import { keys, messages } from '../messages';
+import { useLocalization } from '@progress/kendo-react-intl';
+const TableDataTool = (settings) => {
+    const tool = props => {
+        const { spreadsheetRef } = props;
+        const onClick = React.useCallback(() => {
+            if (spreadsheetRef.current) {
+                const options = {
+                    command: settings.command, options: { value: settings.value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }, []);
+        return (React.createElement(Button, { type: "button", icon: settings.icon, svgIcon: settings.svgIcon, title: useLocalization().toLanguageString(settings.titleKey, messages[settings.titleKey]), onClick: onClick }));
+    };
+    return tool;
+};
+const addColumnLeft = {
+    command: 'AddColumnCommand',
+    value: 'left',
+    icon: 'table-column-insert-left',
+    svgIcon: tableColumnInsertLeftIcon,
+    titleKey: keys.addColumnLeft
+};
+const addColumnRight = {
+    command: 'AddColumnCommand',
+    value: 'right',
+    icon: 'table-column-insert-right',
+    svgIcon: tableColumnInsertRightIcon,
+    titleKey: keys.addColumnRight
+};
+const addRowBelow = {
+    command: 'AddRowCommand',
+    value: 'below',
+    icon: 'table-row-insert-below',
+    svgIcon: tableRowInsertBelowIcon,
+    titleKey: keys.addRowBelow
+};
+const addRowAbove = {
+    command: 'AddRowCommand',
+    value: 'above',
+    icon: 'table-row-insert-above',
+    svgIcon: tableRowInsertAboveIcon,
+    titleKey: keys.addRowAbove
+};
+const deleteColumn = {
+    command: 'DeleteColumnCommand',
+    icon: 'table-column-delete',
+    svgIcon: tableColumnDeleteIcon,
+    titleKey: keys.deleteColumn
+};
+const deleteRow = {
+    command: 'DeleteRowCommand',
+    icon: 'table-row-delete',
+    svgIcon: tableRowDeleteIcon,
+    titleKey: keys.deleteRow
+};
+export const AddColumnLeft = TableDataTool(addColumnLeft);
+export const AddColumnRight = TableDataTool(addColumnRight);
+export const AddRowBelow = TableDataTool(addRowBelow);
+export const AddRowAbove = TableDataTool(addRowAbove);
+export const DeleteColumn = TableDataTool(deleteColumn);
+export const DeleteRow = TableDataTool(deleteRow);
+AddColumnLeft.displayName = 'AddColumnLeft';
+AddColumnRight.displayName = 'AddColumnRight';
+AddRowBelow.displayName = 'AddRowBelow';
+AddRowAbove.displayName = 'AddRowAbove';
+DeleteColumn.displayName = 'DeleteColumn';
+DeleteRow.displayName = 'DeleteRow';

package/dist/es/tools/textColor.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ColorToolProps } from './utils';
+export interface TextColorProps extends ColorToolProps {
+}
+export declare const TextColor: import("react").FunctionComponent<TextColorProps>;

package/dist/es/tools/textColor.js

@@ -0,0 +1,12 @@
+import { keys } from '../messages';
+import { ColorTool } from './utils';
+import { foregroundColorIcon } from '@progress/kendo-svg-icons';
+export const TextColor = ColorTool({
+    icon: 'foreground-color',
+    svgIcon: foregroundColorIcon,
+    view: 'palette',
+    property: 'color',
+    titleKey: keys.textColor,
+    ariaLabel: 'Text Color'
+});
+TextColor.displayName = 'TextColor';

package/dist/es/tools/textWrap.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { BaseToolProps } from './utils';
+export interface TextWrapProps extends BaseToolProps {
+    value?: boolean;
+}
+export declare const TextWrap: React.FunctionComponent<TextWrapProps>;

package/dist/es/tools/textWrap.js

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import { Button } from '@progress/kendo-react-buttons';
+import { textWrapIcon } from '@progress/kendo-svg-icons';
+import { useLocalization } from '@progress/kendo-react-intl';
+import { keys, messages } from '../messages';
+export const TextWrap = props => {
+    const { value: selected, spreadsheetRef } = props;
+    const onClick = React.useCallback(() => {
+        if (spreadsheetRef.current) {
+            const sheet = spreadsheetRef.current.activeSheet();
+            if (sheet) {
+                const range = sheet.range(sheet.activeCell());
+                const value = !range.wrap();
+                const options = {
+                    command: 'TextWrapCommand', options: { property: 'wrap', value }
+                };
+                spreadsheetRef.current.executeCommand(options);
+            }
+        }
+    }, []);
+    return (React.createElement(Button, { type: 'button', togglable: true, icon: 'text-wrap', svgIcon: textWrapIcon, title: useLocalization().toLanguageString(keys.textWrap, messages[keys.textWrap]), onClick: onClick, selected: selected }));
+};
+TextWrap.displayName = 'TextWrap';

package/dist/es/tools/underline.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { PropertyChangeToolProps } from './utils';
+export interface UnderlineProps extends PropertyChangeToolProps {
+}
+export declare const Underline: import("react").FunctionComponent<UnderlineProps>;

package/dist/es/tools/underline.js

@@ -0,0 +1,5 @@
+import { underlineIcon } from '@progress/kendo-svg-icons';
+import { PropertyChangeTool } from './utils';
+import { keys } from '../messages';
+export const Underline = PropertyChangeTool({ property: 'underline', icon: 'underline', svgIcon: underlineIcon, titleKey: keys.underline });
+Underline.displayName = 'Underline';

package/dist/es/tools/undo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { BaseToolProps } from './utils';
+export interface UndoProps extends BaseToolProps {
+}
+export declare const Undo: import("react").FunctionComponent<UndoProps>;

package/dist/es/tools/undo.js

@@ -0,0 +1,5 @@
+import { undoIcon } from '@progress/kendo-svg-icons';
+import { UndoRedo } from './utils';
+import { keys } from '../messages';
+export const Undo = UndoRedo({ action: 'undo', icon: 'undo', svgIcon: undoIcon, titleKey: keys.undo });
+Undo.displayName = 'Undo';

package/dist/es/tools/utils.d.ts

@@ -0,0 +1,79 @@
+import * as React from 'react';
+import { Spreadsheet as SpreadsheetInstance } from '@progress/kendo-spreadsheet-common';
+import { ColorPickerProps } from '@progress/kendo-react-inputs';
+import { SVGIcon } from '@progress/kendo-react-common';
+/**
+ * @hidden
+ */
+export declare const FONT_FAMILIES: string[];
+/**
+ * @hidden
+ */
+export declare const DEFAULT_FONT_FAMILY = "Arial";
+/**
+ * @hidden
+ */
+export declare const FONT_SIZES: number[];
+/**
+ * @hidden
+ */
+export declare const DEFAULT_FONT_SIZE = 12;
+/**
+ * @hidden
+ */
+export declare const FORMATS: ({
+    text: string;
+    value: null;
+} | {
+    text: string;
+    value: string;
+})[];
+/**
+ * @hidden
+ */
+export interface BaseToolProps {
+    spreadsheetRef: React.RefObject<SpreadsheetInstance>;
+}
+/**
+ * @hidden
+ */
+export interface PropertyChangeToolProps extends BaseToolProps {
+    value?: boolean;
+}
+/**
+ * @hidden
+ */
+export interface DropDownToolProps extends BaseToolProps {
+    value?: any;
+}
+/**
+ * @hidden
+ */
+export declare const PropertyChangeTool: <Props extends PropertyChangeToolProps>(settings: {
+    property: string;
+    icon: string;
+    svgIcon: SVGIcon;
+    titleKey: string;
+}) => React.FunctionComponent<Props>;
+/**
+ * @hidden
+ */
+export interface ColorToolProps extends BaseToolProps {
+    value?: string;
+}
+/**
+ * @hidden
+ */
+export declare const ColorTool: <Props extends ColorToolProps>(settings: ColorPickerProps & {
+    property: string;
+    titleKey: string;
+}) => React.FunctionComponent<Props>;
+/**
+ * @hidden
+ */
+export declare const UndoRedo: <Props extends BaseToolProps>(settings: {
+    action: string;
+    icon: string;
+    svgIcon: SVGIcon;
+    titleKey: string;
+}) => React.FunctionComponent<Props>;