diff --git a/.storybook/decorators/withMobile.tsx b/.storybook/decorators/withMobile.tsx index c2e7ba2..9c460cc 100644 --- a/.storybook/decorators/withMobile.tsx +++ b/.storybook/decorators/withMobile.tsx @@ -1,13 +1,13 @@ import React from 'react'; import type {Decorator} from '@storybook/react'; -import {MobileProvider} from '@gravity-ui/uikit'; +import {DashKit} from '../../src/components/DashKit/DashKit'; export const withMobile: Decorator = (Story, context) => { const platform = context.globals.platform; - return ( - - - - ); + DashKit.setSettings({ + isMobile: platform === 'mobile', + }); + + return ; }; diff --git a/src/components/DashKit/DashKit.tsx b/src/components/DashKit/DashKit.tsx index e063078..82e288d 100644 --- a/src/components/DashKit/DashKit.tsx +++ b/src/components/DashKit/DashKit.tsx @@ -4,7 +4,7 @@ import noop from 'lodash/noop'; import pick from 'lodash/pick'; import {DEFAULT_GROUP, DEFAULT_NAMESPACE} from '../../constants'; -import {DashKitDnDContext} from '../../context/DashKitContext'; +import {DashKitDnDContext} from '../../context'; import type { Config, ConfigItem, @@ -13,7 +13,7 @@ import type { ItemDropProps, ItemsStateAndParams, } from '../../shared'; -import { +import type { AddConfigItem, AddNewItemOptions, ContextProps, @@ -31,10 +31,9 @@ import {RegisterManager, UpdateManager, reflowLayout} from '../../utils'; import {DashKitDnDWrapper} from '../DashKitDnDWrapper/DashKitDnDWrapper'; import DashKitView from '../DashKitView/DashKitView'; import GridLayout from '../GridLayout/GridLayout'; -import {OverlayControlItem, OverlayControlsCtxShape} from '../OverlayControls/OverlayControls'; +import type {OverlayControlItem, PreparedCopyItemOptions} from '../OverlayControls/OverlayControls'; -interface DashKitGeneralProps - extends Pick { +interface DashKitGeneralProps { config: Config; editMode: boolean; draggableHandleClassName?: string; @@ -43,32 +42,36 @@ interface DashKitGeneralProps } interface DashKitDefaultProps { + defaultGlobalParams: GlobalParams; + globalParams: GlobalParams; + itemsStateAndParams: ItemsStateAndParams; + settings: SettingsProps; + context: ContextProps; + noOverlay: boolean; + focusable?: boolean; + groups?: DashKitGroup[]; + onItemEdit: (item: ConfigItem) => void; onChange: (data: { config: Config; itemsStateAndParams: ItemsStateAndParams; groups?: DashKitGroup[]; }) => void; + onDrop?: (dropProps: ItemDropProps) => void; onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void; onItemRender?: (item: ConfigItem) => void; + getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions; + onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void; + onDragStart?: ItemManipulationCallback; onDrag?: ItemManipulationCallback; onDragStop?: ItemManipulationCallback; onResizeStart?: ItemManipulationCallback; onResize?: ItemManipulationCallback; onResizeStop?: ItemManipulationCallback; - - defaultGlobalParams: GlobalParams; - globalParams: GlobalParams; - itemsStateAndParams: ItemsStateAndParams; - settings: SettingsProps; - context: ContextProps; - noOverlay: boolean; - focusable?: boolean; - groups?: DashKitGroup[]; } export interface DashKitProps extends DashKitGeneralProps, Partial {} diff --git a/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx b/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx index 742339c..626c1d9 100644 --- a/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx +++ b/src/components/DashKitDnDWrapper/DashKitDnDWrapper.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {DashKitDnDContext} from '../../context/DashKitContext'; +import {DashKitDnDContext} from '../../context'; import type {DraggedOverItem, ItemDragProps} from '../../shared'; type DashKitDnDWrapperProps = { diff --git a/src/components/DashKitView/DashKitView.tsx b/src/components/DashKitView/DashKitView.tsx index a79c457..f915055 100644 --- a/src/components/DashKitView/DashKitView.tsx +++ b/src/components/DashKitView/DashKitView.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import {DashKitContext} from '../../context/DashKitContext'; +import {DashKitContext} from '../../context'; import {withContext} from '../../hocs/withContext'; import {useCalcPropsLayout} from '../../hooks/useCalcLayout'; import type {RegisterManager} from '../../utils'; diff --git a/src/components/GridItem/GridItem.js b/src/components/GridItem/GridItem.js index be69810..aea6109 100644 --- a/src/components/GridItem/GridItem.js +++ b/src/components/GridItem/GridItem.js @@ -3,7 +3,7 @@ import React from 'react'; import PropTypes from 'prop-types'; import {FOCUSED_CLASS_NAME} from '../../constants'; -import {DashKitContext} from '../../context/DashKitContext'; +import {DashKitContext} from '../../context'; import {cn} from '../../utils/cn'; import Item from '../Item/Item'; import OverlayControls from '../OverlayControls/OverlayControls'; diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index 1802f0d..8aebbdb 100644 --- a/src/components/GridLayout/GridLayout.js +++ b/src/components/GridLayout/GridLayout.js @@ -6,7 +6,7 @@ import { DRAGGABLE_CANCEL_CLASS_NAME, TEMPORARY_ITEM_ID, } from '../../constants'; -import {DashKitContext} from '../../context/DashKitContext'; +import {DashKitContext} from '../../context'; import {resolveLayoutGroup} from '../../utils'; import GridItem from '../GridItem/GridItem'; @@ -742,6 +742,7 @@ export default class GridLayout extends React.PureComponent { if (group.render) { const groupContext = { + isMobile: false, config, editMode, items, diff --git a/src/components/MobileLayout/MobileLayout.js b/src/components/MobileLayout/MobileLayout.js deleted file mode 100644 index 29c29a8..0000000 --- a/src/components/MobileLayout/MobileLayout.js +++ /dev/null @@ -1,123 +0,0 @@ -import React from 'react'; - -import {DashKitContext} from '../../context/DashKitContext'; -import {cn} from '../../utils/cn'; -import Item from '../Item/Item'; - -import {getSortedConfigItems} from './helpers'; - -import './MobileLayout.scss'; - -const b = cn('dashkit-mobile-layout'); - -export default class MobileLayout extends React.PureComponent { - static contextType = DashKitContext; - - pluginsRefs = []; - sortedLayoutItems; - - _memoLayout = this.context.layout; - _memoForwardedPluginRef = []; - _memoAdjustWidgetLayout = []; - - state = { - activeTabId: null, - indexesOfItemsWithActiveAutoheight: {}, - }; - - componentDidUpdate(prevProps, prevState) { - if (prevState.activeTabId !== this.context.config.id) { - this.setState({ - activeTabId: this.context.config.id, - indexesOfItemsWithActiveAutoheight: {}, - }); - } - } - - getSortedLayoutItems() { - if (this.sortedLayoutItems && this.context.layout === this._memoLayout) { - return this.sortedLayoutItems; - } - - this._memoLayout = this.context.layout; - - const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId)); - - this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId); - - return this.sortedLayoutItems; - } - - getMemoForwardRefCallback = (refIndex) => { - if (!this._memoForwardedPluginRef[refIndex]) { - this._memoForwardedPluginRef[refIndex] = (pluginRef) => { - this.pluginsRefs[refIndex] = pluginRef; - }; - } - - return this._memoForwardedPluginRef[refIndex]; - }; - - adjustWidgetLayout = (index, {needSetDefault}) => { - if (needSetDefault) { - const indexesOfItemsWithActiveAutoheight = { - ...this.state.indexesOfItemsWithActiveAutoheight, - }; - delete indexesOfItemsWithActiveAutoheight[index]; - - this.setState({indexesOfItemsWithActiveAutoheight}); - } else { - this.setState({ - indexesOfItemsWithActiveAutoheight: Object.assign( - {}, - this.state.indexesOfItemsWithActiveAutoheight, - {[index]: true}, - ), - }); - } - }; - - getMemoAdjustWidgetLayout = (index) => { - if (!this._memoAdjustWidgetLayout[index]) { - this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index); - } - - return this._memoAdjustWidgetLayout[index]; - }; - - render() { - const {config, layout} = this.context; - - this.pluginsRefs.length = config.items.length; - - const sortedItems = this.getSortedLayoutItems(); - - return ( -
- {sortedItems.map((item, index) => { - const isItemWithActiveAutoheight = - index in this.state.indexesOfItemsWithActiveAutoheight; - - return ( -
- -
- ); - })} -
- ); - } -} diff --git a/src/components/MobileLayout/MobileLayout.tsx b/src/components/MobileLayout/MobileLayout.tsx new file mode 100644 index 0000000..12b75a5 --- /dev/null +++ b/src/components/MobileLayout/MobileLayout.tsx @@ -0,0 +1,152 @@ +import React from 'react'; + +import groupBy from 'lodash/groupBy'; + +import {DEFAULT_GROUP} from '../../constants'; +import {DashKitContext} from '../../context'; +import {cn} from '../../utils/cn'; +import Item from '../Item/Item'; + +import {getSortedConfigItems} from './helpers'; + +import './MobileLayout.scss'; + +const b = cn('dashkit-mobile-layout'); + +type MobileLayoutProps = {}; + +type MobileLayoutState = { + itemsWithActiveAutoheight: Record; +}; + +type PlugibRefObject = React.RefObject; + +export default class MobileLayout extends React.PureComponent< + MobileLayoutProps, + MobileLayoutState +> { + static contextType = DashKitContext; + context!: React.ContextType; + + pluginsRefs: PlugibRefObject[] = []; + sortedLayoutItems: Record> | null = null; + + _memoLayout = this.context.layout; + _memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void> = []; + _memoAdjustWidgetLayout: Record void> = {}; + + state: MobileLayoutState = { + itemsWithActiveAutoheight: {}, + }; + + render() { + const {config, layout, groups = [{id: DEFAULT_GROUP}], context, editMode} = this.context; + + this.pluginsRefs.length = config.items.length; + + const sortedItems = this.getSortedLayoutItems(); + let indexOffset = 0; + + return ( +
+ {groups.map((group) => { + const groupId = group.id || DEFAULT_GROUP; + const items = sortedItems[groupId] || []; + + const children = items.map((item, index) => { + const isItemWithActiveAutoheight = + item.id in this.state.itemsWithActiveAutoheight; + + return ( +
+ +
+ ); + }); + + indexOffset += items.length; + + if (group.render) { + return group.render(groupId, children, { + isMobile: true, + config, + context, + editMode, + items, + layout, + }); + } + + return children; + })} +
+ ); + } + + getSortedLayoutItems() { + if (this.sortedLayoutItems && this.context.layout === this._memoLayout) { + return this.sortedLayoutItems; + } + + this._memoLayout = this.context.layout; + + const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId)); + + this.sortedLayoutItems = groupBy( + getSortedConfigItems(this.context.config, hasOrderId), + (item) => item.parent || DEFAULT_GROUP, + ); + + return this.sortedLayoutItems; + } + + getMemoForwardRefCallback(refIndex: number) { + if (!this._memoForwardedPluginRef[refIndex]) { + this._memoForwardedPluginRef[refIndex] = (pluginRef: PlugibRefObject) => { + this.pluginsRefs[refIndex] = pluginRef; + }; + } + + return this._memoForwardedPluginRef[refIndex]; + } + + adjustWidgetLayout(id: string, {needSetDefault}: {needSetDefault: boolean}) { + if (needSetDefault) { + const indexesOfItemsWithActiveAutoheight = { + ...this.state.itemsWithActiveAutoheight, + }; + + delete indexesOfItemsWithActiveAutoheight[id]; + + this.setState({itemsWithActiveAutoheight: indexesOfItemsWithActiveAutoheight}); + } else { + this.setState({ + itemsWithActiveAutoheight: Object.assign({}, this.state.itemsWithActiveAutoheight, { + [id]: true, + }), + }); + } + } + + getMemoAdjustWidgetLayout(id: string) { + if (!this._memoAdjustWidgetLayout[id]) { + this._memoAdjustWidgetLayout[id] = this.adjustWidgetLayout.bind(this, id); + } + + return this._memoAdjustWidgetLayout[id]; + } +} diff --git a/src/components/OverlayControls/OverlayControls.tsx b/src/components/OverlayControls/OverlayControls.tsx index 86c26b6..a82955a 100644 --- a/src/components/OverlayControls/OverlayControls.tsx +++ b/src/components/OverlayControls/OverlayControls.tsx @@ -20,15 +20,13 @@ import { OVERLAY_CONTROLS_CLASS_NAME, OVERLAY_ICON_SIZE, } from '../../constants'; -import {DashkitOvelayControlsContext} from '../../context/DashKitContext'; +import {DashkitOvelayControlsContext, OverlayControlsCtxShape} from '../../context'; import {i18n} from '../../i18n'; import { type ConfigItem, - type ConfigLayout, + type ItemParams, type ItemState, - type ItemsStateAndParamsBase, type PluginBase, - type StringParams, isItemWithTabs, resolveItemInnerId, } from '../../shared'; @@ -63,7 +61,7 @@ export interface OverlayCustomControlItem { title?: string; icon?: MenuItemProps['icon']; iconSize?: number | string; - handler?: (item: ConfigItem, params: StringParams, state: ItemState) => void; + handler?: (item: ConfigItem, params: ItemParams, state: ItemState) => void; visible?: (item: ConfigItem) => boolean; className?: string; qa?: string; @@ -94,19 +92,6 @@ export type PreparedCopyItemOptions = PreparedCopyItemOpt copyContext?: C; }; -export interface OverlayControlsCtxShape { - overlayControls?: Record; - context: Record; - menu: MenuItem[]; - itemsStateAndParams: ItemsStateAndParamsBase; - itemsParams: Record; - editItem: (item: ConfigItem) => void; - removeItem: (id: string) => void; - getLayoutItem: (id: string) => ConfigLayout | void; - getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions; - onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void; -} - type OverlayControlsCtx = React.Context; const DEFAULT_DROPDOWN_MENU = [MenuItems.Copy, MenuItems.Delete]; @@ -266,13 +251,13 @@ class OverlayControls extends React.Component { } private renderDropdownMenu(isOnlyOneItem: boolean) { const {view, size, onItemClick} = this.props; - const {menu: contextMenu, itemsParams, itemsStateAndParams} = this.context; + const {menu: contextMenu, itemsParams, itemsState} = this.context; const configItem = this.props.configItem; const itemParams = itemsParams[configItem.id]; - const itemState = itemsStateAndParams[configItem.id]?.state || {}; + const itemState = itemsState?.[configItem.id] || {}; - const menu = contextMenu?.length > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU; + const menu = contextMenu && contextMenu.length > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU; const isDefaultMenu = this.isDefaultMenu(menu); @@ -435,7 +420,7 @@ class OverlayControls extends React.Component { this.props.onItemClick?.(); }; private onEditItem = () => { - this.context.editItem(this.props.configItem); + this.context.editItem?.(this.props.configItem); this.props.onItemClick?.(); }; private onRemoveItem = () => { diff --git a/src/context/DashKitContext.js b/src/context/DashKitContext.js deleted file mode 100644 index 817fc6f..0000000 --- a/src/context/DashKitContext.js +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -const DashKitContext = React.createContext(); - -const DashkitOvelayControlsContext = React.createContext(); - -const DashKitDnDContext = React.createContext(); - -export {DashKitContext, DashkitOvelayControlsContext, DashKitDnDContext}; diff --git a/src/context/DashKitContext.ts b/src/context/DashKitContext.ts new file mode 100644 index 0000000..172322e --- /dev/null +++ b/src/context/DashKitContext.ts @@ -0,0 +1,79 @@ +import React from 'react'; + +import type {RegisterManager} from '..//utils'; +import type {DashKitProps} from '../components/DashKit'; +import type { + ConfigItem, + ConfigLayout, + ItemParams, + ItemState, + ItemStateAndParams, + ItemStateAndParamsChangeOptions, +} from '../shared'; + +type DashkitPropsPassedToCtx = Pick< + DashKitProps, + | 'config' + | 'groups' + | 'context' + | 'noOverlay' + | 'focusable' + | 'globalParams' + | 'editMode' + | 'settings' + | 'onItemMountChange' + | 'onItemRender' + | 'draggableHandleClassName' + // default handlers bypass + | 'onDragStart' + | 'onDrag' + | 'onDragStop' + | 'onResizeStart' + | 'onResize' + | 'onResizeStop' +>; + +type PluginType = string; + +export type DashKitCtxShape = DashkitPropsPassedToCtx & { + registerManager: RegisterManager; + forwardedMetaRef: React.ForwardedRef; + + layout: ConfigLayout[]; + temporaryLayout: ConfigLayout[] | null; + memorizeOriginalLayout: ( + widgetId: string, + preAutoHeightLayout: ConfigLayout, + postAutoHeightLayout: ConfigLayout, + ) => void; + revertToOriginalLayout: (widgetId: string) => void; + + itemsState?: Record; + itemsParams: Record; + onItemStateAndParamsChange: ( + id: string, + stateAndParams: ItemStateAndParams, + options: ItemStateAndParamsChangeOptions, + ) => void; + + getItemsMeta: (pluginsRefs: Array>) => Array>; + reloadItems: ( + pluginsRefs: Array>, + data: {silentLoading: boolean; noVeil: boolean}, + ) => void; + + onDrop: (newLayout: ConfigLayout, item: ConfigItem) => void; + onDropDragOver: ( + e: DragEvent | MouseEvent, + group: string | void, + gridProps: Partial, + groupLayout: ConfigLayout[], + sharedItem: (Partial & {type: PluginType}) | void, + ) => void | boolean; + outerDnDEnable: boolean; + dragOverPlugin: null | PluginType; +}; + +const DashKitContext = React.createContext({} as DashKitCtxShape); + +export {DashKitContext}; diff --git a/src/context/DashKitDnDContext.ts b/src/context/DashKitDnDContext.ts new file mode 100644 index 0000000..3c21923 --- /dev/null +++ b/src/context/DashKitDnDContext.ts @@ -0,0 +1,16 @@ +import React from 'react'; + +import type {DraggedOverItem, ItemDragProps} from '../shared/types'; + +export type DashKitDnDCtxShape = { + dragProps: ItemDragProps | null; + dragImagePreview: HTMLImageElement; + onDragStart: (e: React.DragEvent, itemDragProps: ItemDragProps) => void; + onDragEnd: (e: React.DragEvent) => void; + onDropDragOver?: ( + draggedItem: DraggedOverItem, + sharedItem: DraggedOverItem | null, + ) => void | boolean; +}; + +export const DashKitDnDContext = React.createContext(undefined); diff --git a/src/context/DashkitOverlayControlsContext.ts b/src/context/DashkitOverlayControlsContext.ts new file mode 100644 index 0000000..55760d2 --- /dev/null +++ b/src/context/DashkitOverlayControlsContext.ts @@ -0,0 +1,26 @@ +import React from 'react'; + +import type {DashKitProps} from '../components'; +import type {ConfigLayout, ItemParams, ItemState} from '../shared'; +import type {MenuItem} from '../typings'; + +export type OverlayControlsCtxShape = Pick< + DashKitProps, + | 'context' + | 'overlayControls' + | 'itemsStateAndParams' + | 'getPreparedCopyItemOptions' + | 'onCopyFulfill' +> & { + menu: DashKitProps['overlayMenuItems'] | MenuItem[]; + itemsState?: Record; + itemsParams: Record; + + editItem: DashKitProps['onItemEdit']; + removeItem: (id: string) => void; + getLayoutItem: (id: string) => ConfigLayout | void; +}; + +export const DashkitOvelayControlsContext = React.createContext( + undefined, +); diff --git a/src/context/index.ts b/src/context/index.ts new file mode 100644 index 0000000..c2b52fb --- /dev/null +++ b/src/context/index.ts @@ -0,0 +1,3 @@ +export * from './DashKitContext'; +export * from './DashkitOverlayControlsContext'; +export * from './DashKitDnDContext'; diff --git a/src/hocs/prepareItem.js b/src/hocs/prepareItem.js index 98e60d8..bc7183a 100644 --- a/src/hocs/prepareItem.js +++ b/src/hocs/prepareItem.js @@ -3,7 +3,7 @@ import React from 'react'; import isEqual from 'lodash/isEqual'; import PropTypes from 'prop-types'; -import {DashKitContext} from '../context/DashKitContext'; +import {DashKitContext} from '../context'; export function prepareItem(Component) { return class PrepareItem extends React.Component { diff --git a/src/hocs/withContext.js b/src/hocs/withContext.js index 2e903ce..dde2d5c 100644 --- a/src/hocs/withContext.js +++ b/src/hocs/withContext.js @@ -10,11 +10,7 @@ import { DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID, } from '../constants/common'; -import { - DashKitContext, - DashKitDnDContext, - DashkitOvelayControlsContext, -} from '../context/DashKitContext'; +import {DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext} from '../context'; import {useDeepEqualMemo} from '../hooks/useDeepEqualMemo'; import {getItemsParams, getItemsState} from '../shared'; import {UpdateManager, resolveLayoutGroup} from '../utils'; @@ -397,6 +393,7 @@ function useMemoStateContext(props) { return itemLayout; }, [ + props.registerManager, resetTemporaryLayout, temporaryLayout, dragOverPlugin, @@ -435,8 +432,6 @@ function useMemoStateContext(props) { const dashkitContextValue = React.useMemo( () => ({ - layout: resultLayout, - temporaryLayout, config: props.config, groups: props.groups, context: props.context, @@ -446,25 +441,32 @@ function useMemoStateContext(props) { globalParams: props.globalParams, editMode: props.editMode, settings: props.settings, - itemsState, - itemsParams, - registerManager: props.registerManager, - onItemStateAndParamsChange, - onDrop, - onDropDragOver, onItemMountChange: props.onItemMountChange, onItemRender: props.onItemRender, + draggableHandleClassName: props.draggableHandleClassName, + + registerManager: props.registerManager, + forwardedMetaRef: props.forwardedMetaRef, + + layout: resultLayout, + temporaryLayout, layoutChange: onLayoutChange, - getItemsMeta, - reloadItems, memorizeOriginalLayout, revertToOriginalLayout, - forwardedMetaRef: props.forwardedMetaRef, - draggableHandleClassName: props.draggableHandleClassName, + + itemsState, + itemsParams, + onItemStateAndParamsChange, + + getItemsMeta, + reloadItems, + + onDrop, + onDropDragOver, outerDnDEnable, dragOverPlugin, - /* default bypassing handlers */ + /* default handlers bypass */ onDragStart: props.onDragStart, onDrag: props.onDrag, onDragStop: props.onDragStop, @@ -515,14 +517,19 @@ function useMemoStateContext(props) { () => ({ overlayControls: props.overlayControls, context: props.context, - menu: overlayMenuItems, + itemsStateAndParams: props.itemsStateAndParams, + itemsState, itemsParams, + + getPreparedCopyItemOptions: props.getPreparedCopyItemOptions, + onCopyFulfill: props.onCopyFulfill, + + menu: overlayMenuItems, + editItem: props.onItemEdit, removeItem: onItemRemove, getLayoutItem: getLayoutItem, - getPreparedCopyItemOptions: props.getPreparedCopyItemOptions, - onCopyFulfill: props.onCopyFulfill, }), [ props.overlayControls, @@ -532,6 +539,7 @@ function useMemoStateContext(props) { props.getPreparedCopyItemOptions, props.onCopyFulfill, overlayMenuItems, + itemsState, itemsParams, onItemRemove, getLayoutItem, diff --git a/src/hooks/useDnDItemProps.ts b/src/hooks/useDnDItemProps.ts index b86d429..9fd5956 100644 --- a/src/hooks/useDnDItemProps.ts +++ b/src/hooks/useDnDItemProps.ts @@ -1,7 +1,7 @@ import React from 'react'; import {ActionPanelItem} from '../components'; -import {DashKitDnDContext} from '../context/DashKitContext'; +import {DashKitDnDContext} from '../context'; type DndProps = null | { draggable: true; diff --git a/src/shared/modules/helpers.ts b/src/shared/modules/helpers.ts index aad764d..a35c3fc 100644 --- a/src/shared/modules/helpers.ts +++ b/src/shared/modules/helpers.ts @@ -179,10 +179,10 @@ export function resolveItemInnerId({ itemsStateAndParams, }: { item: Pick; - itemsStateAndParams: ItemsStateAndParams; + itemsStateAndParams?: ItemsStateAndParams; }): string { const {id} = item; - const stateTabId: string | undefined = (itemsStateAndParams as ItemsStateAndParamsBase)[id] + const stateTabId: string | undefined = (itemsStateAndParams as ItemsStateAndParamsBase)?.[id] ?.state?.tabId; const {tabs} = (item as ConfigItemWithTabs).data; diff --git a/src/shared/types/state-and-params.ts b/src/shared/types/state-and-params.ts index a62172d..51f3320 100644 --- a/src/shared/types/state-and-params.ts +++ b/src/shared/types/state-and-params.ts @@ -6,6 +6,8 @@ export interface ItemState { [key: string]: any; } +export type ItemParams = StringParams | Record; + export interface QueueItem { id: string; tabId?: string; @@ -22,7 +24,7 @@ export type StateAndParamsMeta = { }; export type ItemStateAndParams = { - params?: StringParams | Record; + params?: ItemParams; state?: ItemState; }; diff --git a/src/typings/config.ts b/src/typings/config.ts index 3b0dcb2..6a0719f 100644 --- a/src/typings/config.ts +++ b/src/typings/config.ts @@ -36,6 +36,7 @@ export type AddNewItemOptions = SetItemOptions & { export interface DashkitGroupRenderProps { config: Config; editMode: boolean; + isMobile: boolean; items: ConfigItem[]; layout: ConfigLayout[]; context: any;