chore: add pivotgrid spec

packages/html/src/pivotgrid/calculated-field.tsx

@@ -0,0 +1,79 @@
+import { DropdownList, Icon } from '..';
+import { Button } from '../button';
+import { classNames } from '../misc';
+
+export const CALCULATEDFIELD_CLASSNAME = `k-calculated-field`;
+
+const states = [];
+
+const options = {};
+
+export type KendoCalculatedFieldProps = {
+    headerContent?: JSX.Element | JSX.Element[];
+    headerActions?: JSX.Element | JSX.Element[];
+    fieldActions?: JSX.Element | JSX.Element[];
+};
+
+const defaultFieldActions = (
+    <>
+        <Icon icon="sum" />
+        <DropdownList value="SUM" />
+        <span className="k-spacer"></span>
+        <Icon icon="eye" />
+        <DropdownList value="Default" />
+    </>
+);
+
+const defaultProps = {
+    headerContent: <div className="k-calculated-field-header-text">Date.Calendar</div>,
+    headerActions: <Button fillMode="flat" icon="x"></Button>,
+    fieldActions: defaultFieldActions
+};
+
+export const CalculatedField = (
+    props: KendoCalculatedFieldProps &
+        React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        headerContent = defaultProps.headerContent,
+        headerActions = defaultProps.headerActions,
+        fieldActions = defaultProps.fieldActions,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                CALCULATEDFIELD_CLASSNAME
+            )}>
+
+            <div className="k-calculated-field-header">
+                {headerContent}
+                {headerActions &&
+                    <>
+                        <span className="k-spacer"></span>
+                        <div className="k-calculated-field-header-actions">
+                            {headerActions}
+                        </div>
+                    </>
+                }
+            </div>
+            {children &&
+                <div className="k-calculated-field-content">{children}</div>
+            }
+            <div className="k-calculated-field-actions">
+                {fieldActions}
+            </div>
+        </div>
+    );
+};
+
+CalculatedField.states = states;
+CalculatedField.options = options;
+CalculatedField.className = CALCULATEDFIELD_CLASSNAME;
+CalculatedField.defaultProps = defaultProps;
+
+export default CalculatedField;

packages/html/src/pivotgrid/index.ts

@@ -0,0 +1,9 @@
+export * from './pivotgrid.spec';
+export * from './pivotgrid-table';
+export * from './pivotgrid-tbody';
+export * from './pivotgrid-row';
+export * from './pivotgrid-cell';
+export * from './pivotgrid-configurator';
+export * from './pivotgrid-configurator-button';
+export * from './calculated-field';
+export * from './templates/pivotgrid-normal';

packages/html/src/pivotgrid/pivotgrid-cell.tsx

@@ -0,0 +1,87 @@
+import { Icon } from '../icon';
+import { States, classNames, stateClassNames } from '../misc';
+
+export const PIVOTGRIDCELL_CLASSNAME = `k-pivotgrid-cell`;
+
+const states = [
+    States.focus,
+    States.selected,
+];
+
+const options = {};
+
+export type KendoPivotGridCellProps = {
+    as?: "th" | "td";
+    colSpan?: number;
+    rowSpan?: number;
+    toggle?: "up" | "down";
+    headerTitle?: string;
+    content?: string;
+
+    headerRootCell?: boolean;
+    totalCell?: boolean;
+    headerTotalCell?: boolean;
+    rowTotalCell?: boolean;
+};
+
+export type KendoPivotGridCellState = { [K in (typeof states)[number]]?: boolean };
+
+const defaultProps = {};
+
+export const PivotGridCell = (
+    props: KendoPivotGridCellProps &
+        KendoPivotGridCellState &
+        React.HTMLAttributes<HTMLTableCellElement>
+) => {
+    const {
+        as: Component = "td",
+        toggle,
+        headerTitle,
+        content,
+        headerRootCell,
+        totalCell,
+        headerTotalCell,
+        rowTotalCell,
+        focus,
+        selected,
+        ...other
+    } = props;
+
+    const iconMap = {
+        up: "up",
+        down: "down"
+    };
+
+    return (
+        <Component
+            {...other}
+            className={classNames(
+                props.className,
+                PIVOTGRIDCELL_CLASSNAME,
+                {
+                    ["k-pivotgrid-expanded"]: toggle === "up",
+                    ["k-pivotgrid-header-root"]: headerRootCell,
+                    ["k-pivotgrid-total"]: totalCell,
+                    ["k-pivotgrid-header-total"]: headerTotalCell,
+                    ["k-pivotgrid-row-total"]: rowTotalCell
+                },
+                stateClassNames(PIVOTGRIDCELL_CLASSNAME, {
+                    focus,
+                    selected,
+                })
+            )}>
+            {toggle &&
+                <Icon className="k-pivotgrid-toggle" icon={`chevron-${iconMap[toggle]}`} />
+            }
+            {headerTitle && <span className="k-pivotgrid-header-title">{headerTitle}</span>}
+            {(content || content === "") && <span className="k-pivotgrid-content">{content}</span>}
+        </Component>
+    );
+};
+
+PivotGridCell.states = states;
+PivotGridCell.options = options;
+PivotGridCell.className = PIVOTGRIDCELL_CLASSNAME;
+PivotGridCell.defaultProps = defaultProps;
+
+export default PivotGridCell;

packages/html/src/pivotgrid/pivotgrid-configurator-button.tsx

@@ -0,0 +1,39 @@
+import { Icon } from '../icon';
+import { classNames } from '../misc';
+
+export const PIVOTGRIDCONFIGURATORBUTTON_CLASSNAME = `k-pivotgrid-configurator-button`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const PivotGridConfiguratorButton = (
+    props: React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                PIVOTGRIDCONFIGURATORBUTTON_CLASSNAME,
+            )}>
+            <span>
+                Change settings
+                <Icon icon="gear" />
+            </span>
+        </div>
+    );
+};
+
+PivotGridConfiguratorButton.states = states;
+PivotGridConfiguratorButton.options = options;
+PivotGridConfiguratorButton.className = PIVOTGRIDCONFIGURATORBUTTON_CLASSNAME;
+PivotGridConfiguratorButton.defaultProps = defaultProps;
+
+export default PivotGridConfiguratorButton;

packages/html/src/pivotgrid/pivotgrid-configurator.tsx

@@ -0,0 +1,78 @@
+import { ActionButtons } from '../action-buttons';
+import { Button } from '../button';
+import { classNames } from '../misc';
+
+export const PIVOTGRIDCONFIGURATOR_CLASSNAME = `k-pivotgrid-configurator`;
+
+const states = [];
+
+const options = {};
+
+export type KendoPivotGridConfiguratorProps = {
+    actionButtons?: JSX.Element;
+    orientation?: "horizontal" | "vertical";
+    mode?: "overlay" | "push";
+    header?: string;
+};
+
+const defaultActionButtons = (
+    <>
+        <Button>Cancel</Button>
+        <Button themeColor="primary">Apply</Button>
+    </>
+);
+
+const defaultProps = {
+    orientation: "vertical",
+    mode: "push",
+    actionButtons: defaultActionButtons,
+    header: "Settings"
+};
+
+export const PivotGridConfigurator = (
+    props: KendoPivotGridConfiguratorProps &
+    React.HTMLAttributes<HTMLDivElement>
+) => {
+    const {
+        orientation = defaultProps.orientation,
+        mode = defaultProps.mode,
+        actionButtons = defaultProps.actionButtons,
+        header = defaultProps.header,
+        children,
+        ...other
+    } = props;
+
+    return (
+        <div
+            {...other}
+            className={classNames(
+                props.className,
+                PIVOTGRIDCONFIGURATOR_CLASSNAME
+            )}>
+            <div className={classNames(
+                "k-pivotgrid-configurator-panel",
+                {
+                    [`${PIVOTGRIDCONFIGURATOR_CLASSNAME}-${orientation}`]: orientation,
+                    [`${PIVOTGRIDCONFIGURATOR_CLASSNAME}-${mode}`]: mode
+                }
+            )}>
+                <div className="k-pivotgrid-configurator-header">
+                    <div className="k-pivotgrid-configurator-header-text">{header}</div>
+                </div>
+                <div className="k-pivotgrid-configurator-content">
+                    {children}
+                </div>
+                <ActionButtons alignment="end" className="k-pivotgrid-configurator-actions">
+                    {actionButtons}
+                </ActionButtons>
+            </div>
+        </div>
+    );
+};
+
+PivotGridConfigurator.states = states;
+PivotGridConfigurator.options = options;
+PivotGridConfigurator.className = PIVOTGRIDCONFIGURATOR_CLASSNAME;
+PivotGridConfigurator.defaultProps = defaultProps;
+
+export default PivotGridConfigurator;

packages/html/src/pivotgrid/pivotgrid-row.tsx

@@ -0,0 +1,57 @@
+import { States, classNames, stateClassNames } from '../misc';
+
+export const PIVOTGRIDROW_CLASSNAME = `k-pivotgrid-row`;
+
+const states = [
+    States.hover,
+    States.selected,
+];
+
+const options = {};
+
+export type KendoPivotGridRowProps = {
+    columnTotal?: boolean;
+};
+
+const defaultProps = {};
+
+export type KendoPivotGridRowState = { [K in (typeof states)[number]]?: boolean };
+
+export const PivotGridRow = (
+    props: KendoPivotGridRowProps &
+        KendoPivotGridRowState &
+        React.HTMLAttributes<HTMLTableRowElement>
+) => {
+    const {
+        columnTotal,
+        children,
+        hover,
+        selected,
+        ...other
+    } = props;
+
+    return (
+        <tr
+            {...other}
+            className={classNames(
+                props.className,
+                PIVOTGRIDROW_CLASSNAME,
+                {
+                    ["k-pivotgrid-column-total"]: columnTotal
+                },
+                stateClassNames(PIVOTGRIDROW_CLASSNAME, {
+                    hover,
+                    selected,
+                })
+            )}>
+            {children}
+        </tr>
+    );
+};
+
+PivotGridRow.states = states;
+PivotGridRow.options = options;
+PivotGridRow.className = PIVOTGRIDROW_CLASSNAME;
+PivotGridRow.defaultProps = defaultProps;
+
+export default PivotGridRow;

packages/html/src/pivotgrid/pivotgrid-table.tsx

@@ -0,0 +1,36 @@
+import { classNames } from '../misc';
+
+export const PIVOTGRIDTABLE_CLASSNAME = `k-pivotgrid-table`;
+
+const states = [];
+
+const options = {};
+
+const defaultProps = {};
+
+export const PivotGridTable = (
+    props: React.HTMLAttributes<HTMLTableElement>
+) => {
+    const {
+        children,
+        ...other
+    } = props;
+
+    return (
+        <table
+            {...other}
+            className={classNames(
+                props.className,
+                PIVOTGRIDTABLE_CLASSNAME,
+            )}>
+            {children}
+        </table>
+    );
+};
+
+PivotGridTable.states = states;
+PivotGridTable.options = options;
+PivotGridTable.className = PIVOTGRIDTABLE_CLASSNAME;
+PivotGridTable.defaultProps = defaultProps;
+
+export default PivotGridTable;