feat: add public method for hiding overlayControl item by id

src/components/DashKit/DashKit.tsx

@@ -33,6 +33,7 @@
     settings: SettingsProps;
     context: ContextProps;
     noOverlay: boolean;
+    hideWidgetOverlayControl: (args: {id: string; controlId: string}) => void;
 }
 
 export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {}
@@ -45,6 +46,7 @@
     static defaultProps: DashKitDefaultProps = {
         onItemEdit: noop,
         onChange: noop,
+        hideWidgetOverlayControl: noop,
         defaultGlobalParams: {},
         globalParams: {},
         itemsStateAndParams: {},
@@ -125,4 +127,13 @@
     getItemsMeta() {
         return this.metaRef.current?.getItemsMeta();
     }
+
+    /**
+     * public method for hiding overlayControl item by id
+     * for ex. can be triggered after data render
+     * @param args
+     */
+    hideWidgetOverlayControl(args: {id: string; controlId: string}) {
+        return this.metaRef.current?.hideWidgetOverlayControl(args);
+    }
 }

src/components/DashKit/__stories__/DashKitShowcase.tsx

@@ -62,7 +62,7 @@
     }
 
     render() {
         console.log('customControlsActionData', this.state.customControlsActionData);
         const {editMode} = this.state;
         const controls = {
             custom: [
@@ -78,7 +78,7 @@
                     allWidgetsControls: true,
                     title: 'Icon tooltip 1',
                     icon: TickIcon,
                     handler: () => console.log('overlayControls::custom click'),
                     iconSize: 16,
                 },
                 {
@@ -91,7 +91,7 @@
                 {
                     allWidgetsControls: true,
                     title: 'Icon tooltip 2',
                     handler: () => console.log('overlayControls::custom click'),
                 },
             ],
         };
@@ -170,6 +170,17 @@
                                 ? 'Disable action panel'
                                 : 'Enable action panel'}
                         </Button>
+                        <Button
+                            view="normal"
+                            size="m"
+                            onClick={() =>
+                                this.hideWidgetOverlayControl({id: 'Ea', controlId: 'settings'})
+                            }
+                            className={b('btn-contol')}
+                            disabled={!editMode}
+                        >
+                            hide custom setting from widget item
+                        </Button>
                     </div>
                 </DemoRow>
                 <DemoRow title="Last action in DashKit">{this.state.lastAction}</DemoRow>
@@ -204,10 +215,10 @@
     };
 
     private onItemEdit = ({id, type, namespace, data}: ConfigItem) => {
         console.log('id', id);
         console.log('type', type);
         console.log('namespace', namespace);
         console.log('data', data);
         this.setState({
             lastAction: `[onItemEdit] Widget (id = '${id}') has been changed: ${new Date().toISOString()}`,
         });
@@ -220,8 +231,8 @@
         config: DashKitProps['config'];
         itemsStateAndParams: DashKitProps['itemsStateAndParams'];
     }) => {
         console.log('config', config);
         console.log('itemsStateAndParams', itemsStateAndParams);
 
         this.setState({
             lastAction: `[onChange] config or itemsStateAndParams has been changed: ${new Date().toISOString()}`,
@@ -366,6 +377,12 @@
         this.setState({enableActionPanel: !this.state.enableActionPanel});
     }
 
+    private hideWidgetOverlayControl(args: {id: string; controlId: string}) {
+        if (this.dashKitRef.current) {
+            this.dashKitRef.current.hideWidgetOverlayControl(args);
+        }
+    }
+
     private getActionPanelItems() {
         return [
             {

src/components/GridLayout/GridLayout.js

@@ -69,6 +69,12 @@ export default class GridLayout extends React.PureComponent {
         return getItemsMeta(this.pluginsRefs);
     };
 
+    hideWidgetOverlayControl = (args) => {
+        const {hideWidgetOverlayControl} = this.context;
+        const plugin = this.pluginsRefs.find((item) => item.props.id);
+        return hideWidgetOverlayControl({...args, plugin});
+    };
+
     reloadItems() {
         const {
             editMode,

src/hocs/withContext.js

@@ -14,6 +14,10 @@ function useMemoStateContext(props) {
     const originalLayouts = React.useRef({});
     const adjustedLayouts = React.useRef({});
 
+    const [filteredOverlayControls, setFilteredOverlayControls] = React.useState(
+        props.overlayControls || [],
+    );
+
     // TODO: need move originalLayouts, adjustedLayouts to state
     const [layoutUpdateCounter, forceUpdateLayout] = React.useState(0);
 
@@ -156,6 +160,19 @@ function useMemoStateContext(props) {
             .filter(Boolean);
     }, []);
 
+    const hideWidgetOverlayControl = React.useCallback(
+        (args) => {
+            const newOverlayControls = props.overlayControls.allWidgetsControls.filter(
+                (item) => item.id !== args.controlId,
+            );
+            setFilteredOverlayControls({
+                ...props.overlayControls,
+                allWidgetsControls: newOverlayControls,
+            });
+        },
+        [props.overlayControls],
+    );
+
     const resultLayout = React.useMemo(() => {
         return props.layout.map((item) => {
             if (item.i in adjustedLayouts.current) {
@@ -193,6 +210,8 @@ function useMemoStateContext(props) {
             editItem: props.onItemEdit,
             layoutChange: onLayoutChange,
             getItemsMeta,
+            hideWidgetOverlayControl,
+            filteredOverlayControls,
             reloadItems,
             memorizeOriginalLayout,
             revertToOriginalLayout,
@@ -215,6 +234,8 @@ function useMemoStateContext(props) {
             props.onItemEdit,
             onLayoutChange,
             getItemsMeta,
+            hideWidgetOverlayControl,
+            filteredOverlayControls,
             reloadItems,
             memorizeOriginalLayout,
             revertToOriginalLayout,
@@ -227,10 +248,11 @@ function useMemoStateContext(props) {
 export function withContext(Component) {
     const WithContext = (props) => {
         const contextValue = useMemoStateContext(props);
+        const overlayControls = contextValue.filteredOverlayControls;
 
         return (
             <DashKitContext.Provider value={contextValue}>
-                <Component overlayControls={props.overlayControls} />
+                <Component overlayControls={overlayControls} />
             </DashKitContext.Provider>
         );
     };