diff --git a/src/components/DashKit/DashKit.tsx b/src/components/DashKit/DashKit.tsx index d3a7121..af418f2 100644 --- a/src/components/DashKit/DashKit.tsx +++ b/src/components/DashKit/DashKit.tsx @@ -29,9 +29,10 @@ import { import {RegisterManager, UpdateManager, reflowLayout} from '../../utils'; import DashKitView from '../DashKitView/DashKitView'; import GridLayout from '../GridLayout/GridLayout'; -import {OverlayControlItem} from '../OverlayControls/OverlayControls'; +import {OverlayControlItem, OverlayControlsCtxShape} from '../OverlayControls/OverlayControls'; -interface DashKitGeneralProps { +interface DashKitGeneralProps + extends Pick { config: Config; editMode: boolean; draggableHandleClassName?: string; diff --git a/src/components/DashKit/__stories__/DashKitShowcase.tsx b/src/components/DashKit/__stories__/DashKitShowcase.tsx index 2726e2d..f7b6d94 100644 --- a/src/components/DashKit/__stories__/DashKitShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitShowcase.tsx @@ -18,7 +18,7 @@ import {Button, Icon} from '@gravity-ui/uikit'; import {ActionPanel, DashKit, DashKitProps} from '../../..'; import {MenuItems} from '../../../helpers'; import {i18n} from '../../../i18n'; -import type {ConfigItem, OverlayControlItem, PreparedCopyItemOptions} from '../../../index'; +import type {ConfigItem, OverlayControlItem} from '../../../index'; import {cn} from '../../../utils/cn'; import {Demo, DemoRow} from './Demo'; @@ -236,10 +236,9 @@ export class DashKitShowcase extends React.Component<{}, DashKitDemoState> { overlayControls={this.state.enableOverlayControls ? this.controls : null} overlayMenuItems={this.state.overlayMenuItems} focusable={true} - context={{ - onCopySuccess: (data: PreparedCopyItemOptions) => - console.info('Copied: ' + JSON.stringify(data)), - }} + onCopyFulfill={(_error, data) => + console.info('Copied: ' + JSON.stringify(data)) + } /> diff --git a/src/components/OverlayControls/OverlayControls.tsx b/src/components/OverlayControls/OverlayControls.tsx index 6bad15c..d7ed7e1 100644 --- a/src/components/OverlayControls/OverlayControls.tsx +++ b/src/components/OverlayControls/OverlayControls.tsx @@ -75,7 +75,7 @@ interface OverlayControlsDefaultProps { size: ButtonSize; } -interface OverlayControlsProps extends OverlayControlsDefaultProps { +export interface OverlayControlsProps extends OverlayControlsDefaultProps { configItem: ConfigItem; onItemClick?: () => void | null; } @@ -94,7 +94,7 @@ export type PreparedCopyItemOptions = PreparedCopyItemOpt copyContext?: C; }; -type DashKitCtx = React.Context<{ +export interface OverlayControlsCtxShape { overlayControls?: Record; context: Record; menu: MenuItem[]; @@ -103,7 +103,11 @@ type DashKitCtx = React.Context<{ editItem: (item: ConfigItem) => void; removeItem: (id: string) => void; getLayoutItem: (id: string) => ConfigLayout | void; -}>; + getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions; + onCopyFulfill?: (error: null | unknown, data?: PreparedCopyItemOptions) => void; +} + +type OverlayControlsCtx = React.Context; const DEFAULT_DROPDOWN_MENU = [MenuItems.Copy, MenuItems.Delete]; @@ -114,7 +118,7 @@ class OverlayControls extends React.Component { view: 'flat', size: 'm', }; - context!: React.ContextType; + context!: React.ContextType; render() { const {position} = this.props; const items = this.getItems(); @@ -405,18 +409,20 @@ class OverlayControls extends React.Component { targetInnerId, }; - if (typeof this.context.context?.getPreparedCopyItemOptions === 'function') { + const getPreparedCopyItemOptions = + this.context?.getPreparedCopyItemOptions ?? + this.context.context?.getPreparedCopyItemOptions; + + if (typeof getPreparedCopyItemOptions === 'function') { options = this.context.context.getPreparedCopyItemOptions(options); } try { localStorage.setItem(COPIED_WIDGET_STORE_KEY, JSON.stringify(options)); - if (typeof this.context.context?.onCopySuccess === 'function') { - this.context.context.onCopySuccess(options); - } + this.context.onCopyFulfill?.(null, options); } catch (e) { if (typeof this.context.context?.onCopyError === 'function') { - this.context.context.onCopyError(e); + this.context.onCopyFulfill?.(e); } } // https://stackoverflow.com/questions/35865481/storage-event-not-firing diff --git a/src/hocs/withContext.js b/src/hocs/withContext.js index 227183e..833e226 100644 --- a/src/hocs/withContext.js +++ b/src/hocs/withContext.js @@ -520,12 +520,16 @@ function useMemoStateContext(props) { editItem: props.onItemEdit, removeItem: onItemRemove, getLayoutItem: getLayoutItem, + getPreparedCopyItemOptions: props.getPreparedCopyItemOptions, + onCopyFulfill: props.onCopyFulfill, }), [ props.overlayControls, props.context, props.itemsStateAndParams, props.onItemEdit, + props.getPreparedCopyItemOptions, + props.onCopyFulfill, overlayMenuItems, itemsParams, onItemRemove,