chore(html): wip add spreadsheet helpers

packages/html/src/index.ts

@@ -99,7 +99,7 @@ export * from './tilelayout/index';
 // Data management
 export * from './grid/index';
 export * from './listview/index';
-// export * from './spreadsheet/index';
+export * from './spreadsheet/index';
 // export * from './pivotgrid/index';
 export * from './treelist/index';
 export * from './filter/index';

packages/html/src/spreadsheet/index.ts

@@ -0,0 +1,8 @@
+export * from './spreadsheet-toolbar';
+export * from './spreadsheet-menu';
+export * from './spreadsheet-header';
+export * from './spreadsheet-action-bar';
+export * from './spreadsheet-tabstrip';
+export * from './spreadsheet-sheets-bar';
+export * from './spreadsheet-view';
+export * from './spreadsheet.spec';

packages/html/src/spreadsheet/spreadsheet-action-bar.tsx

@@ -0,0 +1,69 @@
+import { Button, Combobox } from '..';
+import { classNames } from '../misc';
+
+export const SPREADSHEETACTIONBAR_CLASSNAME = `k-spreadsheet-action-bar`;
+
+const states = [];
+
+const options = {};
+
+export type KendoSpreadsheetActionBarProps = {
+    formula?: React.JSX.Element | string;
+    cellName?: string;
+};
+
+const defaultFormula = (
+    <>
+        <span className="k-syntax-startexp">=</span>
+        <span className="k-syntax-ref k-series-a">B6</span>
+        <span className="k-syntax-op">+</span>
+        <span className="k-syntax-ref k-series-b">C6</span>
+        <span className="k-syntax-op">+</span>
+        <span className="k-syntax-ref k-series-c">C3</span>
+    </>
+);
+
+const defaultProps = {
+    formula: defaultFormula,
+    cellName: "B6"
+};
+
+export const SpreadsheetActionBar = (
+    props: KendoSpreadsheetActionBarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        formula = defaultProps.formula,
+        cellName = defaultProps.cellName,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                SPREADSHEETACTIONBAR_CLASSNAME,
+                props.className
+            )}>
+            <div className="k-spreadsheet-name-editor">
+                <Combobox placeholder={cellName} fillMode="flat" />
+            </div>
+            <div className="k-spreadsheet-formula-bar">
+                <span className="k-separator k-separator-vertical"></span>
+                <Button icon="formula-fx" fillMode="flat" />
+                <span className="k-separator k-separator-vertical"></span>
+
+                <div className="k-spreadsheet-formula-input k-textbox k-input k-input-md k-input-flat k-rounded-md">
+                    {formula}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+SpreadsheetActionBar.states = states;
+SpreadsheetActionBar.options = options;
+SpreadsheetActionBar.className = SPREADSHEETACTIONBAR_CLASSNAME;
+SpreadsheetActionBar.defaultProps = defaultProps;
+
+export default SpreadsheetActionBar;

packages/html/src/spreadsheet/spreadsheet-header.tsx

@@ -0,0 +1,114 @@
+import { classNames } from '../misc';
+import { Button, ButtonGroup, ColorPicker, DropdownList, MenuButton, SpreadsheetMenu, SpreadsheetToolbar, ToolbarItem, ToolbarSeparator } from '..';
+
+export const SPREADSHEETHEADER_CLASSNAME = `k-spreadsheet-header`;
+
+const states = [];
+
+const options = {};
+
+export type KendoSpreadsheetHeaderProps = {
+    toolbarItems?: React.JSX.Element;
+    menuItems?: React.JSX.Element;
+};
+
+const defaultToolbarItems = (
+    <>
+        <Button icon="arrow-rotate-ccw" fillMode="flat"></Button>
+        <Button icon="arrow-rotate-cw" fillMode="flat"></Button>
+        <ToolbarSeparator></ToolbarSeparator>
+        <Button icon="cut" fillMode="flat"></Button>
+        <Button icon="copy" fillMode="flat"></Button>
+        <Button icon="clipboard" fillMode="flat"></Button>
+        <ToolbarSeparator></ToolbarSeparator>
+        <DropdownList value="Font Name" fillMode="flat" />
+        <DropdownList value="Font Size" fillMode="flat" />
+        <ToolbarSeparator></ToolbarSeparator>
+        <ButtonGroup fillMode="flat">
+            <Button icon="font-grow" fillMode="flat"></Button>
+            <Button icon="font-shrink" fillMode="flat"></Button>
+        </ButtonGroup>
+        <ToolbarSeparator></ToolbarSeparator>
+        <ButtonGroup fillMode="flat">
+            <Button icon="bold" fillMode="flat"></Button>
+            <Button icon="italic" fillMode="flat"></Button>
+            <Button icon="underline" fillMode="flat"></Button>
+            <Button icon="strikethrough" fillMode="flat"></Button>
+        </ButtonGroup>
+        <ToolbarItem>
+            <ColorPicker value="red" valueIconName="foreground-color" fillMode="flat" />
+        </ToolbarItem>
+        <ToolbarSeparator></ToolbarSeparator>
+        <ToolbarItem>
+            <ColorPicker value="fuchsia" valueIconName="droplet" fillMode="flat" />
+        </ToolbarItem>
+        <ToolbarSeparator></ToolbarSeparator>
+        <MenuButton fillMode="flat" icon="borders-all" showArrow></MenuButton>
+        <ToolbarSeparator></ToolbarSeparator>
+        <MenuButton fillMode="flat" icon="align-left" showArrow></MenuButton>
+        <MenuButton fillMode="flat" icon="align-middle" showArrow></MenuButton>
+        <ToolbarSeparator></ToolbarSeparator>
+        <Button fillMode="flat" icon="text-wrap"></Button>
+    </>
+);
+
+const defaultMenuItems = (
+    <>
+        <li className="k-item k-menu-item k-first">
+            <span className="k-link k-menu-link">File</span>
+        </li>
+        <li className="k-item k-menu-item k-active">
+            <span className="k-link k-menu-link">Home</span>
+        </li>
+        <li className="k-item k-menu-item">
+            <span className="k-link k-menu-link">Insert</span>
+        </li>
+        <li className="k-item k-menu-item">
+            <span className="k-link k-menu-link">Format</span>
+        </li>
+        <li className="k-item k-menu-item">
+            <span className="k-link k-menu-link">Formulas</span>
+        </li>
+        <li className="k-item k-menu-item">
+            <span className="k-link k-menu-link">Data</span>
+        </li>
+        <li className="k-item k-menu-item k-last">
+            <span className="k-link k-menu-link">View</span>
+        </li>
+    </>
+);
+
+const defaultProps = {
+    toolbarItems: defaultToolbarItems,
+    menuItems: defaultMenuItems,
+};
+
+export const SpreadsheetHeader = (
+    props: KendoSpreadsheetHeaderProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        toolbarItems = defaultProps.toolbarItems,
+        menuItems = defaultProps.menuItems,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                SPREADSHEETHEADER_CLASSNAME,
+                props.className
+            )}>
+            <SpreadsheetMenu>{menuItems}</SpreadsheetMenu>
+            <SpreadsheetToolbar>{toolbarItems}</SpreadsheetToolbar>
+        </div>
+    );
+};
+
+SpreadsheetHeader.states = states;
+SpreadsheetHeader.options = options;
+SpreadsheetHeader.className = SPREADSHEETHEADER_CLASSNAME;
+SpreadsheetHeader.defaultProps = defaultProps;
+
+export default SpreadsheetHeader;

packages/html/src/spreadsheet/spreadsheet-menu.tsx

@@ -0,0 +1,39 @@
+import { KendoMenuProps, Menu } from '../menu';
+import { classNames } from '../misc';
+
+export const SPREADSHEETMENU_CLASSNAME = `k-spreadsheet-menu`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const SpreadsheetMenu = (
+    props: KendoMenuProps &
+        React.HTMLAttributes<HTMLUListElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <Menu
+            {...other}
+            className={classNames(
+                props.className,
+                SPREADSHEETMENU_CLASSNAME,
+            )}
+        >
+            {children}
+        </Menu>
+    );
+};
+
+SpreadsheetMenu.states = states;
+SpreadsheetMenu.options = options;
+SpreadsheetMenu.className = SPREADSHEETMENU_CLASSNAME;
+SpreadsheetMenu.defaultProps = defaultProps;
+
+export default SpreadsheetMenu;

packages/html/src/spreadsheet/spreadsheet-sheets-bar.tsx

@@ -0,0 +1,78 @@
+import { Button, MenuButton, SpreadsheetTabStrip, TabStripItem, TabStripItems, TabStripItemsWrapper } from '..';
+import { classNames } from '../misc';
+
+export const SPREADSHEETSHEETSBAR_CLASSNAME = `k-spreadsheet-sheets-bar`;
+
+const states = [];
+
+const options = {};
+
+export type KendoSpreadsheetSheetsBarProps = {
+    tabStripItems?: JSX.Element;
+};
+
+const defaultTabStripItems = (
+    <>
+        <TabStripItem first value="Sheet 1">
+            <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
+        </TabStripItem>
+        <TabStripItem value="Sheet 2">
+            <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
+        </TabStripItem>
+        <TabStripItem value="Sheet 3">
+            <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
+        </TabStripItem>
+        <TabStripItem value="Sheet 4">
+            <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
+        </TabStripItem>
+        <TabStripItem value="Sheet 5">
+            <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
+        </TabStripItem>
+        <TabStripItem last value="Sheet 6">
+            <MenuButton size="medium" showArrow={false} icon="caret-alt-down" fillMode="flat" />
+        </TabStripItem>
+    </>
+);
+
+const defaultProps = {
+    tabStripItems: defaultTabStripItems
+};
+
+export const SpreadsheetSheetsBar = (
+    props: KendoSpreadsheetSheetsBarProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        tabStripItems,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                SPREADSHEETSHEETSBAR_CLASSNAME,
+                props.className
+            )}>
+            <Button className="k-spreadsheet-sheet-add" fillMode="flat" icon="plus" />
+            <Button className="k-spreadsheet-sheets-menu" fillMode="flat" icon="menu" />
+
+            <SpreadsheetTabStrip>
+                <TabStripItemsWrapper orientation="vertical">
+                    <TabStripItems>
+                        {tabStripItems}
+                    </TabStripItems>
+                    <Button className="k-tabstrip-prev" fillMode="flat" icon="caret-alt-left" rounded={null} size={null} />
+                    <Button className="k-tabstrip-next" fillMode="flat" icon="caret-alt-right" rounded={null} size={null} />
+                </TabStripItemsWrapper>
+            </SpreadsheetTabStrip>
+        </div>
+    );
+};
+
+SpreadsheetSheetsBar.states = states;
+SpreadsheetSheetsBar.options = options;
+SpreadsheetSheetsBar.className = SPREADSHEETSHEETSBAR_CLASSNAME;
+SpreadsheetSheetsBar.defaultProps = defaultProps;
+
+export default SpreadsheetSheetsBar;

packages/html/src/spreadsheet/spreadsheet-tabstrip.tsx

@@ -0,0 +1,41 @@
+import { classNames } from '../misc';
+import { KendoTabStripProps, TabStrip } from '../tabstrip';
+
+export const SPREADSHEETTABSTRIP_CLASSNAME = `k-spreadsheet-sheets`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const SpreadsheetTabStrip = (
+    props: KendoTabStripProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <TabStrip
+            {...other}
+            scrollable
+            position="bottom"
+            className={classNames(
+                props.className,
+                SPREADSHEETTABSTRIP_CLASSNAME,
+            )}
+        >
+            {children}
+        </TabStrip>
+    );
+};
+
+SpreadsheetTabStrip.states = states;
+SpreadsheetTabStrip.options = options;
+SpreadsheetTabStrip.className = SPREADSHEETTABSTRIP_CLASSNAME;
+SpreadsheetTabStrip.defaultProps = defaultProps;
+
+export default SpreadsheetTabStrip;