feat: moved overlay controls into separated context (#157)

* feat: moved overlay controls into context * feat: separated context for overlays * feat: clean up code and added README * feat: added hide left controls to example * fix: add menu to custom overlay controls
gravity-ui · Jul 18, 2024 · 29fca8c · 29fca8c
1 parent 16a3808
commit 29fca8c
Show file tree

Hide file tree

Showing 13 changed files with 239 additions and 211 deletions.
diff --git a/README.md b/README.md
@@ -35,7 +35,8 @@ interface DashKitProps {
   itemsStateAndParams: ItemsStateAndParams;
   settings: SettingsProps;
   context: ContextProps;
-  overlayControls?: Record<string, OverlayControlItem[]>;
+  overlayControls?: Record<string, OverlayControlItem[]> | null;
+  overlayMenuItems?: MenuItems[] | null;
   noOverlay?: boolean;
   focusable?: boolean;
   draggableHandleClassName?: string;
@@ -51,7 +52,8 @@ interface DashKitProps {
 - **itemsStateAndParams**: [itemsStateAndParams](#temsStateAndParams).
 - **settings**: DashKit settings.
 - **context**: Object that will be propped up on all widgets.
-- **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed.
+- **overlayControls**: Object that overrides widget controls at the time of editing. If not transmitted, basic controls will be displayed. If `null` passed only close button or custom menu will be displayed.
+- **overlayMenuItems**: Custom dropdown menu items
 - **noOverlay**: If `true`, overlay and controls are not displayed while editing.
 - **focusable**: If `true`, grid items will be focusable.
 - **draggableHandleClassName** : СSS class name of the element that makes the widget draggable.
@@ -343,6 +345,10 @@ type MenuItem = {
 };
 
 // use array of menu items in settings
+<Dashkit overlayMenuItems={[] as Array<MenuItem> | null} />
+
+[deprecated]
+// overlayMenuItems property has greater priority over setSettings menu
 DashKit.setSettings({menu: [] as Array<MenuItem>});
 ```
 
@@ -386,7 +392,7 @@ type ItemDropProps = {
 #### Example:
 
 ```jsx
-const menuItems = [
+const overlayMenuItems = [
   {
     id: 'chart',
     icon: <Icon data={ChartColumn} />,
@@ -405,7 +411,7 @@ const onDrop = (dropProps: ItemDropProps) => {
 
 <DashKitDnDWrapper>
   <DashKit editMode={true} config={config} onChange={onChange} onDrop={onDrop} />
-  <ActionPanel items={menuItems} />
+  <ActionPanel items={overlayMenuItems} />
 </DashKitDnDWrapper>
 ```
 

diff --git a/src/components/DashKit/DashKit.tsx b/src/components/DashKit/DashKit.tsx
@@ -14,6 +14,7 @@ import {
     AddConfigItem,
     ContextProps,
     DashKitGroup,
+    MenuItem,
     Plugin,
     SetConfigItem,
     SetNewItemOptions,
@@ -29,7 +30,8 @@ interface DashKitGeneralProps {
     config: Config;
     editMode: boolean;
     draggableHandleClassName?: string;
-    overlayControls?: Record<string, OverlayControlItem[]>;
+    overlayControls?: Record<string, OverlayControlItem[]> | null;
+    overlayMenuItems?: MenuItem[] | null;
 }
 
 interface DashKitDefaultProps {

diff --git a/src/components/DashKit/__stories__/CssApiShowcase.tsx b/src/components/DashKit/__stories__/CssApiShowcase.tsx
@@ -11,39 +11,11 @@ import {
 import {Icon} from '@gravity-ui/uikit';
 
 import {ActionPanel, DashKit} from '../../..';
-import {MenuItems} from '../../../helpers';
-import {i18n} from '../../../i18n';
-import {CogIcon} from '../../../icons/CogIcon';
-import {CopyIcon} from '../../../icons/CopyIcon';
-import {DeleteIcon} from '../../../icons/DeleteIcon';
 
 import {Demo, DemoRow} from './Demo';
 import {getConfig} from './utils';
 
 export const CssApiShowcase: React.FC = () => {
-    React.useEffect(() => {
-        DashKit.setSettings({
-            menu: [
-                {
-                    id: 'settings',
-                    title: 'Menu setting text',
-                    icon: <Icon data={CogIcon} size={16} />,
-                },
-                {
-                    id: MenuItems.Copy,
-                    title: 'Menu setting copy',
-                    icon: <Icon data={CopyIcon} size={16} />,
-                },
-                {
-                    id: MenuItems.Delete,
-                    title: i18n('label_delete'), // for language change check
-                    icon: <Icon data={DeleteIcon} size={16} />,
-                    className: 'dashkit-overlay-controls__item_danger',
-                },
-            ],
-        });
-    }, []);
-
     const items = React.useMemo(
         () => [
             {

diff --git a/src/components/DashKit/__stories__/DashKitDnDShowcase.tsx b/src/components/DashKit/__stories__/DashKitDnDShowcase.tsx
@@ -4,39 +4,11 @@ import {ChartColumn, Copy, Heading, Sliders, TextAlignLeft} from '@gravity-ui/ic
 import {Icon} from '@gravity-ui/uikit';
 
 import {ActionPanel, DashKit, DashKitDnDWrapper, DashKitProps} from '../../..';
-import {MenuItems} from '../../../helpers';
-import {i18n} from '../../../i18n';
-import {CogIcon} from '../../../icons/CogIcon';
-import {CopyIcon} from '../../../icons/CopyIcon';
-import {DeleteIcon} from '../../../icons/DeleteIcon';
 
 import {Demo, DemoRow} from './Demo';
 import {getConfig} from './utils';
 
 export const DashKitDnDShowcase: React.FC = () => {
-    React.useEffect(() => {
-        DashKit.setSettings({
-            menu: [
-                {
-                    id: 'settings',
-                    title: 'Menu setting text',
-                    icon: <Icon data={CogIcon} size={16} />,
-                },
-                {
-                    id: MenuItems.Copy,
-                    title: 'Menu setting copy',
-                    icon: <Icon data={CopyIcon} size={16} />,
-                },
-                {
-                    id: MenuItems.Delete,
-                    title: i18n('label_delete'), // for language change check
-                    icon: <Icon data={DeleteIcon} size={16} />,
-                    className: 'dashkit-overlay-controls__item_danger',
-                },
-            ],
-        });
-    }, []);
-
     const onClick = () => {
         console.log('click');
     };
@@ -156,7 +128,13 @@ export const DashKitDnDShowcase: React.FC = () => {
         >
             <Demo title="Drag'n'Drop example">
                 <DemoRow title="Component view">
-                    <DashKit editMode={true} config={config} onChange={onChange} onDrop={onDrop} />
+                    <DashKit
+                        editMode={true}
+                        config={config}
+                        overlayControls={null}
+                        onChange={onChange}
+                        onDrop={onDrop}
+                    />
                     <ActionPanel items={items} />
                 </DemoRow>
             </Demo>

diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx
@@ -24,27 +24,25 @@ import {fixedGroup, getConfig} from './utils';
 export const DashKitGroupsShowcase: React.FC = () => {
     const [editMode, setEditMode] = React.useState(true);
 
-    React.useEffect(() => {
-        DashKit.setSettings({
-            menu: [
-                {
-                    id: 'settings',
-                    title: 'Menu setting text',
-                    icon: <Icon data={CogIcon} size={16} />,
-                },
-                {
-                    id: MenuItems.Copy,
-                    title: 'Menu setting copy',
-                    icon: <Icon data={CopyIcon} size={16} />,
-                },
-                {
-                    id: MenuItems.Delete,
-                    title: i18n('label_delete'), // for language change check
-                    icon: <Icon data={DeleteIcon} size={16} />,
-                    className: 'dashkit-overlay-controls__item_danger',
-                },
-            ],
-        });
+    const overlayMenuItems = React.useMemo(() => {
+        return [
+            {
+                id: 'settings',
+                title: 'Menu setting text',
+                icon: <Icon data={CogIcon} size={16} />,
+            },
+            {
+                id: MenuItems.Copy,
+                title: 'Menu setting copy',
+                icon: <Icon data={CopyIcon} size={16} />,
+            },
+            {
+                id: MenuItems.Delete,
+                title: i18n('label_delete'), // for language change check
+                icon: <Icon data={DeleteIcon} size={16} />,
+                className: 'dashkit-overlay-controls__item_danger',
+            },
+        ];
     }, []);
 
     const onClick = () => {
@@ -220,6 +218,7 @@ export const DashKitGroupsShowcase: React.FC = () => {
                         config={config}
                         onChange={onChange}
                         onDrop={onDrop}
+                        overlayMenuItems={overlayMenuItems}
                     />
                     <ActionPanel items={items} />
                 </DemoRow>

diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx
@@ -18,7 +18,7 @@ import {CopyIcon} from '../../../icons/CopyIcon';
 import {DeleteIcon} from '../../../icons/DeleteIcon';
 import {TickIcon} from '../../../icons/TickIcon';
 import {WarningIcon} from '../../../icons/WarningIcon';
-import type {ConfigItem} from '../../../index';
+import type {ConfigItem, OverlayControlItem} from '../../../index';
 import {cn} from '../../../utils/cn';
 
 import {Demo, DemoRow} from './Demo';
@@ -38,9 +38,10 @@ type DashKitDemoState = {
 
     lastAction: string;
     customControlsActionData: number;
-    showCustomMenu: boolean;
     enableActionPanel: boolean;
     enableAnimations: boolean;
+    enableOverlayControls: boolean;
+    overlayMenuItems: DashKitProps['overlayMenuItems'];
 };
 
 export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
@@ -57,21 +58,20 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
 
         lastAction: 'Nothing',
         customControlsActionData: 0,
-        showCustomMenu: true,
         enableActionPanel: false,
         enableAnimations: true,
+        enableOverlayControls: true,
+        overlayMenuItems: null,
     };
 
+    private controls: Record<string, OverlayControlItem[]>;
+
     private dashKitRef = React.createRef<DashKit>();
 
-    componentDidMount() {
-        this.toggleCustomMenu(true);
-    }
+    constructor(props: {}) {
+        super(props);
 
-    render() {
-        console.log('customControlsActionData', this.state.customControlsActionData);
-        const {editMode} = this.state;
-        const controls = {
+        this.controls = {
             custom: [
                 {
                     title: 'Edit custom widget',
@@ -87,21 +87,29 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                     icon: TickIcon,
                     handler: () => console.log('overlayControls::custom click'),
                     iconSize: 16,
+                    visible: (item) => item.type !== 'text',
                 },
                 {
                     allWidgetsControls: true,
                     excludeWidgetsTypes: ['title'],
                     id: MenuItems.Settings,
                     title: 'Settings default',
                     icon: WarningIcon,
+                    visible: (item) => item.type !== 'text',
                 },
                 {
                     allWidgetsControls: true,
                     title: 'Icon tooltip 2',
                     handler: () => console.log('overlayControls::custom click'),
+                    visible: (item) => item.type !== 'text',
                 },
             ],
         };
+    }
+
+    render() {
+        console.log('customControlsActionData', this.state.customControlsActionData);
+        const {editMode} = this.state;
 
         return (
             <Demo title="DashKit">
@@ -128,11 +136,22 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                         <Button
                             view="normal"
                             size="m"
-                            onClick={() => this.toggleCustomMenu(false)}
+                            onClick={this.toggleOverlayControls}
                             className={b('btn-contol')}
                             disabled={!editMode}
                         >
-                            {this.state.showCustomMenu
+                            {this.state.enableOverlayControls
+                                ? 'Hide left controls'
+                                : 'Show left controls'}
+                        </Button>
+                        <Button
+                            view="normal"
+                            size="m"
+                            onClick={this.toggleCustomMenu}
+                            className={b('btn-contol')}
+                            disabled={!editMode}
+                        >
+                            {this.state.overlayMenuItems
                                 ? 'Disable custom menu'
                                 : 'Enable custom menu'}
                         </Button>
@@ -207,7 +226,8 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
                         onChange={this.onChange}
                         settings={this.state.settings}
                         ref={this.dashKitRef}
-                        overlayControls={controls}
+                        overlayControls={this.state.enableOverlayControls ? this.controls : null}
+                        overlayMenuItems={this.state.overlayMenuItems}
                         focusable={!editMode}
                     />
                 </DemoRow>
@@ -346,41 +366,41 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> {
         return Boolean(this.state.config.items.find((item) => item.id === titleId));
     }
 
-    private toggleCustomMenu = (init = false) => {
-        const {showCustomMenu} = this.state;
-        if (showCustomMenu) {
-            DashKit.setSettings({menu: []});
+    private toggleOverlayControls = () => {
+        this.setState({enableOverlayControls: !this.state.enableOverlayControls});
+    };
+
+    private toggleCustomMenu = () => {
+        if (this.state.overlayMenuItems) {
+            this.setState({overlayMenuItems: null});
         } else {
-            DashKit.setSettings({
-                menu: [
+            this.setState({
+                overlayMenuItems: [
                     {
                         id: 'settings',
                         title: 'Menu setting text',
                         icon: <Icon data={CogIcon} size={16} />,
                         handler: () => {
                             console.log('menu::settings::click');
                         },
+                        visible: (item) => item.type !== 'custom',
                     },
                     {
                         id: MenuItems.Copy,
                         title: 'Menu setting copy',
                         icon: <Icon data={CopyIcon} size={16} />,
+                        visible: (item) => item.type !== 'custom',
                     },
                     {
                         id: MenuItems.Delete,
                         title: i18n('label_delete'), // for language change check
                         icon: <Icon data={DeleteIcon} size={16} />,
                         className: 'dashkit-overlay-controls__item_danger',
+                        visible: (item) => item.type !== 'custom',
                     },
                 ],
             });
         }
-        this.setState({
-            showCustomMenu: !showCustomMenu,
-            lastAction: init
-                ? this.state.lastAction
-                : `[DashKit.setSettings] toggle show custom widget menu: ${new Date().toISOString()}`,
-        });
     };
 
     private toggleActionPanel() {