feat(html): enhance column-menu spec

- add support for sort and filter indicators
- add support for item actions
- add support for draggable items

Author: epetrow

packages/html/src/column-menu/column-menu-expander.spec.tsx

@@ -10,7 +10,9 @@ const options = {};
 
 export type KendoColumnMenuExpanderProps = {
     itemText?: string;
-    itemIcon?: string;
+    itemStartIcon?: string;
+    itemEndIcon?: string;
+    itemSortIndex?: number;
     expanderIcon?: string;
     itemContent?: React.JSX.Element;
     expanded?: boolean;
@@ -24,7 +26,9 @@ export const ColumnMenuExpander = (
 ) => {
     const {
         itemText,
-        itemIcon,
+        itemStartIcon,
+        itemEndIcon,
+        itemSortIndex,
         expanded,
         itemContent,
         expanderIcon,
@@ -46,7 +50,7 @@ export const ColumnMenuExpander = (
                 props.className,
                 COLUMNMENUEXPANDER_CLASSNAME
             )}>
-            <ColumnMenuItem text={itemText} icon={itemIcon}>
+            <ColumnMenuItem text={itemText} startIcon={itemStartIcon} endIcon={itemEndIcon} sortIndex={itemSortIndex}>
                 <span className="k-spacer"></span>
                 <span className="k-expander-indicator">
                     {icon}

packages/html/src/column-menu/column-menu-item-action.tsx

@@ -0,0 +1,49 @@
+import { Icon } from '../icon';
+import { classNames } from '../misc';
+
+export const COLUMNMENUITEM_ACTION_CLASSNAME = `k-columnmenu-item-action`;
+
+export enum columnMenuItemActionType {
+    REMOVE = 'remove',
+    ADD = 'add'
+};
+
+export type KendoColumnMenuItemActionProps = {
+    type?: columnMenuItemActionType | string;
+};
+
+export const ColumnMenuItemAction = (
+    props: KendoColumnMenuItemActionProps &
+        React.HTMLAttributes<HTMLSpanElement>
+) => {
+    const {
+        type,
+        ...other
+    } = props;
+
+    let icon;
+
+    switch (type) {
+        case columnMenuItemActionType.REMOVE:
+            icon = <Icon icon="x-circle" size="medium" />;
+            break;
+        case columnMenuItemActionType.ADD:
+            icon = <Icon themeColor="primary" icon="plus-circle" size="medium" />;
+            break;
+        default:
+            return <Icon icon={type} size="medium" />;
+    }
+
+    return (
+        <span
+            {...other}
+            className={classNames(
+                props.className,
+                COLUMNMENUITEM_ACTION_CLASSNAME,
+                `k-columnmenu-item-${type}-action`
+            )}
+        >
+            {icon}
+        </span>
+    );
+};

packages/html/src/column-menu/column-menu-item.spec.tsx

@@ -12,7 +12,11 @@ const options = {};
 
 export type KendoColumnMenuItemProps = {
     text?: string;
-    icon?: string;
+    startIcon?: string;
+    endIcon?: string;
+    sortIndex?: number;
+    actions?: React.JSX.Element | string;
+    draggable?: boolean;
 };
 
 const defaultOptions = {};
@@ -27,7 +31,11 @@ export const ColumnMenuItem = (
         focus,
         selected,
         text,
-        icon,
+        startIcon,
+        endIcon,
+        sortIndex,
+        actions,
+        draggable,
         ...other
     } = props;
 
@@ -42,8 +50,26 @@ export const ColumnMenuItem = (
                     selected,
                 })
             )}>
-            <Icon icon={icon} />{text}
+            {draggable &&
+                <span className="k-columnmenu-drag-handle" >
+                    <Icon icon="handle-drag"/>
+                </span>
+            }
+            {startIcon && <Icon icon={startIcon} />}
+            {text}
+            {endIcon &&
+                <span className="k-columnmenu-indicators">
+                    <Icon icon={endIcon} />
+                    {sortIndex && <span className="k-sort-index">{sortIndex}</span>}
+                </span>
+            }
             {props.children}
+            {actions &&
+                <>
+                    <span className="k-spacer"></span>
+                    <span className="k-columnmenu-item-actions">{actions}</span>
+                </>
+            }
         </div>
     );
 };

packages/html/src/column-menu/column-menu.spec.tsx

@@ -1,17 +1,24 @@
-import { classNames } from '../misc';
+import { classNames, optionClassNames, Size } from '../misc';
 
 export const COLUMNMENU_CLASSNAME = `k-column-menu`;
 
 const states = [];
 
-const options = {};
+const options = {
+    size: [ Size.small, Size.medium, Size.large ]
+};
+
+export type KendoColumnMenuOptions = {
+    size?: (typeof options.size)[number] | null;
+}
 
-export type KendoColumnMenuProps = {
+export type KendoColumnMenuProps = KendoColumnMenuOptions & {
     view?: 'list' | 'tabbed';
 };
 
 const defaultOptions = {
     view: 'list',
+    size: Size.medium
 };
 
 export const ColumnMenu = (
@@ -20,6 +27,7 @@ export const ColumnMenu = (
 ) => {
     const {
         view = defaultOptions.view,
+        size = defaultOptions.size,
         ...other
     } = props;
 
@@ -29,6 +37,9 @@ export const ColumnMenu = (
             className={classNames(
                 props.className,
                 COLUMNMENU_CLASSNAME,
+                optionClassNames(COLUMNMENU_CLASSNAME, {
+                    size,
+                }),
                 {
                     'k-column-menu-tabbed': view === 'tabbed'
                 },

packages/html/src/column-menu/index.ts

@@ -6,7 +6,8 @@ export * from './filter-menu.spec';
 export * from './column-menu-multicheck-wrap';
 export * from './column-menu-multicheck-item';
 export * from './column-menu-expander.spec';
+export * from './column-menu-item-action';
 export * from './templates/column-menu-normal';
 export * from './templates/column-menu-tabbed';
 export * from './templates/filter-menu-normal';
-export * from './templates/filter-menu-multi-check';
+export * from './templates/filter-menu-multi-check';