diff --git a/src/components/DashKit/DashKit.tsx b/src/components/DashKit/DashKit.tsx index 32ab3ad..bf80b6d 100644 --- a/src/components/DashKit/DashKit.tsx +++ b/src/components/DashKit/DashKit.tsx @@ -58,7 +58,7 @@ interface DashKitDefaultProps { groups?: DashKitGroup[]; }) => void; - onDrop?: (dropProps: ItemDropProps) => void; + onDrop: (dropProps: ItemDropProps) => void; onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void; onItemRender?: (item: ConfigItem) => void; diff --git a/src/components/GridItem/GridItem.tsx b/src/components/GridItem/GridItem.tsx index 30f4eff..1261603 100644 --- a/src/components/GridItem/GridItem.tsx +++ b/src/components/GridItem/GridItem.tsx @@ -3,8 +3,9 @@ import React from 'react'; import {FOCUSED_CLASS_NAME} from '../../constants'; import {DashKitContext} from '../../context'; import type {ConfigItem, ConfigLayout} from '../../shared'; -import type {PluginRef, ReactGridLayoutProps} from '../../typings'; +import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from '../../typings'; import {cn} from '../../utils/cn'; +import type {DashKitProps} from '../DashKit'; import Item from '../Item/Item'; import OverlayControls from '../OverlayControls/OverlayControls'; @@ -46,11 +47,7 @@ class WindowFocusObserver { const windowFocusObserver = new WindowFocusObserver(); type GridItemProps = { - adjustWidgetLayout: (data: { - widgetId: string; - needSetDefault?: boolean; - adjustedWidgetLayout?: ConfigLayout; - }) => void; + adjustWidgetLayout: PluginWidgetProps['adjustWidgetLayout']; gridLayout?: ReactGridLayoutProps; id: string; item: ConfigItem; @@ -62,8 +59,8 @@ type GridItemProps = { forwardedPluginRef?: (pluginRef: PluginRef) => void; isPlaceholder?: boolean; - onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void; - onItemRender?: (item: ConfigItem) => void; + onItemMountChange?: DashKitProps['onItemMountChange']; + onItemRender?: DashKitProps['onItemRender']; // from react-grid-layout: children?: React.ReactNode; @@ -76,8 +73,8 @@ type GridItemProps = { onMouseUp?: (e: React.MouseEvent) => void; onTouchEnd?: (e: React.TouchEvent) => void; onTouchStart?: (e: React.TouchEvent) => void; - onItemFocus?: (item: ConfigItem) => void; - onItemBlur?: (item: ConfigItem) => void; + onItemFocus?: DashKitProps['onItemFocus']; + onItemBlur?: DashKitProps['onItemBlur']; }; type GridItemState = { diff --git a/src/components/GridLayout/GridLayout.tsx b/src/components/GridLayout/GridLayout.tsx index 0bd7df2..5ae31ee 100644 --- a/src/components/GridLayout/GridLayout.tsx +++ b/src/components/GridLayout/GridLayout.tsx @@ -2,7 +2,7 @@ import React from 'react'; import type {DragOverEvent} from 'react-grid-layout'; -import type {PluginRef, ReactGridLayoutProps} from 'src/typings'; +import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from 'src/typings'; import { COMPACT_TYPE_HORIZONTAL_NOWRAP, @@ -18,7 +18,6 @@ import GridItem from '../GridItem/GridItem'; import {Layout} from './ReactGridLayout'; import type { - AdjustWidgetLayoutParams, CurrentDraggingElement, GridLayoutProps, GridLayoutState, @@ -93,11 +92,11 @@ export default class GridLayout extends React.PureComponent { + }) => { const {layout, memorizeOriginalLayout, revertToOriginalLayout} = this.context; if (needSetDefault) { diff --git a/src/components/GridLayout/types.ts b/src/components/GridLayout/types.ts index 14ec5ff..7e2fe4a 100644 --- a/src/components/GridLayout/types.ts +++ b/src/components/GridLayout/types.ts @@ -67,12 +67,6 @@ export type GroupCallbacks = { onDragTargetRestore: (group?: string) => void; }; -export type AdjustWidgetLayoutParams = { - widgetId: string; - needSetDefault?: boolean; - adjustedWidgetLayout?: ConfigLayout; -}; - export type LayoutAndPropsByGroup = { properties: Partial; layout: ConfigLayout[]; diff --git a/src/components/Item/Item.tsx b/src/components/Item/Item.tsx index 26474e7..352b6a2 100644 --- a/src/components/Item/Item.tsx +++ b/src/components/Item/Item.tsx @@ -13,7 +13,6 @@ const b = cn('dashkit-item'); const Item: React.FC = ({ registerManager, rendererProps, - type, isPlaceholder, forwardedPluginRef, onItemRender, @@ -27,6 +26,7 @@ const Item: React.FC = ({ const onItemMountChangeRef = React.useRef(onItemMountChange); itemRef.current = item; + const {type} = item; onItemRenderRef.current = onItemRender; onItemMountChangeRef.current = onItemMountChange; diff --git a/src/components/Item/types.ts b/src/components/Item/types.ts index dd733f8..42c5ed5 100644 --- a/src/components/Item/types.ts +++ b/src/components/Item/types.ts @@ -1,14 +1,9 @@ import type {ConfigItem, ItemParams} from '../../shared/types'; import type {PluginRef, PluginWidgetProps} from '../../typings'; import type {RegisterManager} from '../../utils/register-manager'; +import type {DashKitProps} from '../DashKit'; -export type RendererProps = Omit< - PluginWidgetProps, - 'onBeforeLoad' | 'width' | 'height' -> & { - width?: number; - height?: number; -}; +export type RendererProps = Omit, 'onBeforeLoad'>; export type ItemProps = { forwardedPluginRef?: (ref: PluginRef) => void; @@ -16,7 +11,6 @@ export type ItemProps = { item: ConfigItem; registerManager: RegisterManager; rendererProps: RendererProps; - type: string; - onItemRender?: (item: ConfigItem) => void; - onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void; + onItemRender?: DashKitProps['onItemRender']; + onItemMountChange?: DashKitProps['onItemMountChange']; }; diff --git a/src/context/DashKitContext.ts b/src/context/DashKitContext.ts index 5a7c3a5..32b4842 100644 --- a/src/context/DashKitContext.ts +++ b/src/context/DashKitContext.ts @@ -8,6 +8,7 @@ import type { ConfigItem, ConfigLayout, DraggedOverItem, + GlobalParams, ItemDragProps, ItemParams, ItemState, @@ -16,18 +17,17 @@ import type { } from '../shared'; import type {ContextProps, PluginRef, ReactGridLayoutProps, SettingsProps} from '../typings'; -type DashkitPropsPassedToCtx = Pick< +export type DashkitPropsPassedToCtx = Pick< DashKitProps, | 'config' | 'groups' - | 'context' | 'noOverlay' | 'focusable' - | 'globalParams' | 'editMode' - | 'settings' | 'onItemMountChange' | 'onItemRender' + | 'onItemFocus' + | 'onItemBlur' | 'draggableHandleClassName' // default handlers bypass | 'onDragStart' @@ -43,9 +43,10 @@ export type TemporaryLayout = { dragProps: ItemDragProps; }; -export type DashKitCtxShape = Omit & { +export type DashKitCtxShape = DashkitPropsPassedToCtx & { context: ContextProps; settings: SettingsProps; + globalParams: GlobalParams; registerManager: RegisterManager; forwardedMetaRef: React.ForwardedRef; @@ -83,8 +84,6 @@ export type DashKitCtxShape = Omit {w?: number; h?: number} | false | undefined; - onItemBlur?: (item: ConfigItem) => void; - onItemFocus?: (item: ConfigItem) => void; outerDnDEnable: boolean; dragOverPlugin: null | RegisterManagerPlugin; }; diff --git a/src/hocs/prepareItem.tsx b/src/hocs/prepareItem.tsx index 3846cde..65dd690 100644 --- a/src/hocs/prepareItem.tsx +++ b/src/hocs/prepareItem.tsx @@ -2,13 +2,10 @@ import React from 'react'; import isEqual from 'lodash/isEqual'; +import type {DashKitProps} from '../components/DashKit'; import type {ItemProps, RendererProps} from '../components/Item/types'; import {DashKitContext} from '../context'; import type {ConfigItem, ConfigLayout} from '../shared'; -import type { - ItemStateAndParams, - ItemStateAndParamsChangeOptions, -} from '../shared/types/state-and-params'; import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from '../typings'; type PrepareItemProps = { @@ -23,8 +20,8 @@ type PrepareItemProps = { transform?: string; isPlaceholder?: boolean; - onItemRender?: (item: ConfigItem) => void; - onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void; + onItemRender?: DashKitProps['onItemRender']; + onItemMountChange?: DashKitProps['onItemMountChange']; forwardedPluginRef?: (ref: PluginRef) => void; }; @@ -50,9 +47,9 @@ export function prepareItem( ); } - _onStateAndParamsChange = ( - stateAndParams: ItemStateAndParams, - options?: ItemStateAndParamsChangeOptions, + _onStateAndParamsChange: PluginWidgetProps['onStateAndParamsChange'] = ( + stateAndParams, + options, ) => { this.context.onItemStateAndParamsChange(this.props.id, stateAndParams, options); }; @@ -101,14 +98,12 @@ export function prepareItem( const {item, isPlaceholder, forwardedPluginRef, onItemMountChange, onItemRender} = this.props; const {registerManager} = this.context; - const {type} = item; return ( void; - layout: ConfigLayout[]; - registerManager: RegisterManager; - defaultGlobalParams: GlobalParams; - globalParams: GlobalParams; - onItemEdit: (item: ConfigItem) => void; - context: ContextProps; - noOverlay: boolean; - focusable?: boolean; - settings: SettingsProps; - onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void; - onItemRender?: (item: ConfigItem) => void; - forwardedMetaRef: React.ForwardedRef; - draggableHandleClassName?: string; - onDrop?: (dropProps: ItemDropProps) => void; - overlayControls?: Record | null; - overlayMenuItems?: MenuItem[] | null; - getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions; - onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void; - editMode: boolean; - onItemFocus?: (item: ConfigItem) => void; - onItemBlur?: (item: ConfigItem) => void; - onDragStart?: ItemManipulationCallback; - onDrag?: ItemManipulationCallback; - onDragStop?: ItemManipulationCallback; - onResizeStart?: ItemManipulationCallback; - onResize?: ItemManipulationCallback; - onResizeStop?: ItemManipulationCallback; -}; +export type DashKitWithContextProps = DashkitPropsPassedToCtx & + Pick< + DashKitProps, + 'overlayControls' | 'overlayMenuItems' | 'getPreparedCopyItemOptions' | 'onCopyFulfill' + > & + Required< + Pick< + DashKitProps, + | 'itemsStateAndParams' + | 'defaultGlobalParams' + | 'globalParams' + | 'context' + | 'settings' + | 'onItemEdit' + | 'onChange' + | 'onDrop' + > + > & { + layout: ConfigLayout[]; + registerManager: RegisterManager; + forwardedMetaRef: React.ForwardedRef; + }; type OriginalLayouts = Record; diff --git a/src/typings/common.ts b/src/typings/common.ts index e49d2bb..be76010 100644 --- a/src/typings/common.ts +++ b/src/typings/common.ts @@ -4,12 +4,31 @@ import type {OverlayCustomControlItem} from '../components/OverlayControls/Overl import {MenuItems} from '../constants'; import {AdditionalWidgetLayout} from '../shared'; -export type GridLayoutSettings = ReactGridLayout.ReactGridLayoutProps & { +export type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap'; + +export type ReactGridLayoutProps = Omit< + ReactGridLayout.ReactGridLayoutProps, + | 'children' + | 'compactType' + | 'innerRef' + | 'key' + | 'layout' + | 'onDragStart' + | 'onDragStop' + | 'onResizeStart' + | 'onResizeStop' + | 'draggableHandle' + | 'isDroppable' + | 'onDropDragOver' + | 'onDrop' + | 'draggableCancel' +> & { + compactType?: CompactType; noOverlay?: boolean; }; export interface Settings { - gridLayout?: GridLayoutSettings; + gridLayout?: ReactGridLayoutProps; theme?: string; isMobile?: boolean; // @deprecated as it's possibly mutable property use Dashkit overlayMenuItems property instead diff --git a/src/typings/config.ts b/src/typings/config.ts index 49dadab..9f606f4 100644 --- a/src/typings/config.ts +++ b/src/typings/config.ts @@ -2,7 +2,7 @@ import type {Layout} from 'react-grid-layout'; import type {Config, ConfigItem, ConfigLayout} from '../shared'; -import {GridLayoutSettings} from './common'; +import type {CompactType, ReactGridLayoutProps} from './common'; export interface AddConfigItem extends Omit { id?: null; @@ -22,8 +22,6 @@ export type GridReflowOptions = { compactType?: CompactType; }; -export type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap'; - export type ReflowLayoutOptions = { defaultProps: GridReflowOptions; groups?: Record; @@ -43,26 +41,6 @@ export interface DashkitGroupRenderProps { context: any; } -export type ReactGridLayoutProps = Omit< - GridLayoutSettings, - | 'children' - | 'compactType' - | 'innerRef' - | 'key' - | 'layout' - | 'onDragStart' - | 'onDragStop' - | 'onResizeStart' - | 'onResizeStop' - | 'draggableHandle' - | 'isDroppable' - | 'onDropDragOver' - | 'onDrop' - | 'draggableCancel' -> & { - compactType?: CompactType; -}; - export interface DashKitGroup { id?: string; render?: ( diff --git a/src/typings/plugin.ts b/src/typings/plugin.ts index 9543519..1623dfd 100644 --- a/src/typings/plugin.ts +++ b/src/typings/plugin.ts @@ -1,7 +1,5 @@ import React from 'react'; -import ReactGridLayout from 'react-grid-layout'; - import type { ConfigItem, ItemState, @@ -11,8 +9,7 @@ import type { StringParams, } from '../shared'; -import type {ContextProps, SettingsProps, WidgetLayout} from './common'; -import type {CompactType} from './config'; +import type {ContextProps, ReactGridLayoutProps, SettingsProps, WidgetLayout} from './common'; export interface PluginWidgetProps { id: string; @@ -24,17 +21,15 @@ export interface PluginWidgetProps { options?: ItemStateAndParamsChangeOptions, ) => void; onBeforeLoad: () => () => void; - width: number; - height: number; + width?: number; + height?: number; data: ConfigItem['data']; defaults: ConfigItem['defaults']; namespace: ConfigItem['namespace']; settings: SettingsProps; context: ContextProps; layout: WidgetLayout[]; - gridLayout: Omit & { - compactType?: CompactType; - }; + gridLayout: ReactGridLayoutProps; adjustWidgetLayout: (data: { widgetId: string; needSetDefault?: boolean; diff --git a/src/utils/register-manager.ts b/src/utils/register-manager.ts index 6b762fc..9c23000 100644 --- a/src/utils/register-manager.ts +++ b/src/utils/register-manager.ts @@ -1,6 +1,4 @@ -import ReactGridLayout from 'react-grid-layout'; - -import type {CompactType, Plugin, PluginDefaultLayout, Settings} from '../typings'; +import type {Plugin, PluginDefaultLayout, ReactGridLayoutProps, Settings} from '../typings'; interface RegisterManagerDefaultLayout { x: number; @@ -29,9 +27,7 @@ export class RegisterManager { minW: 4, minH: 2, }; - private _gridLayout: Omit & { - compactType?: CompactType; - } = { + private _gridLayout: ReactGridLayoutProps = { rowHeight: 18, cols: 36, margin: [2, 2],