chore: reworked contexts js files into ts

.babelrc.json

@@ -9,12 +9,7 @@
         }
       }
     ],
-    [
-      "@babel/preset-typescript",
-      {
-        "allowDeclareFields": true
-      }
-    ],
+    "@babel/preset-typescript",
     "@babel/preset-react"
   ],
   "plugins": []

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<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
+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<DashKitDefaultProps> {}

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 = {

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';

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';

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';
 

src/components/MobileLayout/MobileLayout.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {DashKitContext} from '../../context/DashKitContext';
+import {DashKitContext} from '../../context';
 import {cn} from '../../utils/cn';
 import Item from '../Item/Item';
 
@@ -13,7 +13,6 @@ const b = cn('dashkit-mobile-layout');
 type MobileLayoutProps = {};
 
 type MobileLayoutState = {
-    activeTabId: string | null;
     indexesOfItemsWithActiveAutoheight: Record<string, boolean>;
 };
 
@@ -24,7 +23,7 @@ export default class MobileLayout extends React.PureComponent<
     MobileLayoutState
 > {
     static contextType = DashKitContext;
-    declare context: React.ContextType<typeof DashKitContext>;
+    context!: React.ContextType<typeof DashKitContext>;
 
     pluginsRefs: PlugibRefObject[] = [];
     sortedLayoutItems: ReturnType<typeof getSortedConfigItems> | null = null;
@@ -34,19 +33,9 @@ export default class MobileLayout extends React.PureComponent<
     _memoAdjustWidgetLayout: Array<(props: {needSetDefault: boolean}) => void> = [];
 
     state: MobileLayoutState = {
-        activeTabId: null,
         indexesOfItemsWithActiveAutoheight: {},
     };
 
-    componentDidUpdate(_prevProps: MobileLayoutProps, prevState: MobileLayoutState) {
-        if (prevState.activeTabId !== this.context.config.id) {
-            this.setState({
-                activeTabId: this.context.config.id,
-                indexesOfItemsWithActiveAutoheight: {},
-            });
-        }
-    }
-
     render() {
         const {config, layout} = this.context;
 

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<C extends object = {}> = PreparedCopyItemOpt
     copyContext?: C;
 };
 
-export interface OverlayControlsCtxShape {
-    overlayControls?: Record<string, OverlayControlItem[]>;
-    context: Record<string, any>;
-    menu: MenuItem[];
-    itemsStateAndParams: ItemsStateAndParamsBase;
-    itemsParams: Record<string, StringParams>;
-    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<OverlayControlsCtxShape>;
 
 const DEFAULT_DROPDOWN_MENU = [MenuItems.Copy, MenuItems.Delete];
@@ -266,13 +251,13 @@ class OverlayControls extends React.Component<OverlayControlsProps> {
     }
     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<OverlayControlsProps> {
         this.props.onItemClick?.();
     };
     private onEditItem = () => {
-        this.context.editItem(this.props.configItem);
+        this.context.editItem?.(this.props.configItem);
         this.props.onItemClick?.();
     };
     private onRemoveItem = () => {

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<any>;
+
+    layout: ConfigLayout[];
+    temporaryLayout: ConfigLayout[] | null;
+    memorizeOriginalLayout: (
+        widgetId: string,
+        preAutoHeightLayout: ConfigLayout,
+        postAutoHeightLayout: ConfigLayout,
+    ) => void;
+    revertToOriginalLayout: (widgetId: string) => void;
+
+    itemsState?: Record<string, ItemState>;
+    itemsParams: Record<string, ItemParams>;
+    onItemStateAndParamsChange: (
+        id: string,
+        stateAndParams: ItemStateAndParams,
+        options: ItemStateAndParamsChangeOptions,
+    ) => void;
+
+    getItemsMeta: (pluginsRefs: Array<React.RefObject<any>>) => Array<Promise<any>>;
+    reloadItems: (
+        pluginsRefs: Array<React.RefObject<any>>,
+        data: {silentLoading: boolean; noVeil: boolean},
+    ) => void;
+
+    onDrop: (newLayout: ConfigLayout, item: ConfigItem) => void;
+    onDropDragOver: (
+        e: DragEvent | MouseEvent,
+        group: string | void,
+        gridProps: Partial<ReactGridLayout.ReactGridLayoutProps>,
+        groupLayout: ConfigLayout[],
+        sharedItem: (Partial<ConfigLayout> & {type: PluginType}) | void,
+    ) => void | boolean;
+    outerDnDEnable: boolean;
+    dragOverPlugin: null | PluginType;
+};
+
+const DashKitContext = React.createContext<DashKitCtxShape>({} as DashKitCtxShape);
+
+export {DashKitContext};

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<Element>, itemDragProps: ItemDragProps) => void;
+    onDragEnd: (e: React.DragEvent<Element>) => void;
+    onDropDragOver?: (
+        draggedItem: DraggedOverItem,
+        sharedItem: DraggedOverItem | null,
+    ) => void | boolean;
+};
+
+export const DashKitDnDContext = React.createContext<DashKitDnDCtxShape | void>(undefined);

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<string, ItemState>;
+    itemsParams: Record<string, ItemParams>;
+
+    editItem: DashKitProps['onItemEdit'];
+    removeItem: (id: string) => void;
+    getLayoutItem: (id: string) => ConfigLayout | void;
+};
+
+export const DashkitOvelayControlsContext = React.createContext<OverlayControlsCtxShape | void>(
+    undefined,
+);

src/context/index.ts

@@ -0,0 +1,3 @@
+export * from './DashKitContext';
+export * from './DashkitOverlayControlsContext';
+export * from './DashKitDnDContext';

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 {