Skip to content

Commit 09411c2

Browse files
ykornilovYury Kornilov
ykornilov
and
Yury Kornilov
committed
Typings refactoring (#293)
* refactor: use PluginWidgetProps type for adjustWidgetLayout * refactor: deduplicate types using DashKitProps references * refactor: extract type from item prop instead of passing separately * refactor: make width and height optional in PluginWidgetProps * refactor: consolidate grid layout types in common --------- Co-authored-by: Yury Kornilov <kornilovyv@yandex-team.ru>
1 parent 907babb commit 09411c2

13 files changed

Lines changed: 87 additions & 148 deletions

File tree

‎src/components/DashKit/DashKit.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ interface DashKitDefaultProps {
5858
groups?: DashKitGroup[];
5959
}) => void;
6060

61-
onDrop?: (dropProps: ItemDropProps) => void;
61+
onDrop: (dropProps: ItemDropProps) => void;
6262

6363
onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void;
6464
onItemRender?: (item: ConfigItem) => void;

‎src/components/GridItem/GridItem.tsx‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import React from 'react';
33
import {FOCUSED_CLASS_NAME} from '../../constants';
44
import {DashKitContext} from '../../context';
55
import type {ConfigItem, ConfigLayout} from '../../shared';
6-
import type {PluginRef, ReactGridLayoutProps} from '../../typings';
6+
import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from '../../typings';
77
import {cn} from '../../utils/cn';
8+
import type {DashKitProps} from '../DashKit';
89
import Item from '../Item/Item';
910
import OverlayControls from '../OverlayControls/OverlayControls';
1011

@@ -46,11 +47,7 @@ class WindowFocusObserver {
4647
const windowFocusObserver = new WindowFocusObserver();
4748

4849
type GridItemProps = {
49-
adjustWidgetLayout: (data: {
50-
widgetId: string;
51-
needSetDefault?: boolean;
52-
adjustedWidgetLayout?: ConfigLayout;
53-
}) => void;
50+
adjustWidgetLayout: PluginWidgetProps['adjustWidgetLayout'];
5451
gridLayout?: ReactGridLayoutProps;
5552
id: string;
5653
item: ConfigItem;
@@ -62,8 +59,8 @@ type GridItemProps = {
6259
forwardedPluginRef?: (pluginRef: PluginRef) => void;
6360
isPlaceholder?: boolean;
6461

65-
onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void;
66-
onItemRender?: (item: ConfigItem) => void;
62+
onItemMountChange?: DashKitProps['onItemMountChange'];
63+
onItemRender?: DashKitProps['onItemRender'];
6764

6865
// from react-grid-layout:
6966
children?: React.ReactNode;
@@ -76,8 +73,8 @@ type GridItemProps = {
7673
onMouseUp?: (e: React.MouseEvent<HTMLDivElement>) => void;
7774
onTouchEnd?: (e: React.TouchEvent<HTMLDivElement>) => void;
7875
onTouchStart?: (e: React.TouchEvent<HTMLDivElement>) => void;
79-
onItemFocus?: (item: ConfigItem) => void;
80-
onItemBlur?: (item: ConfigItem) => void;
76+
onItemFocus?: DashKitProps['onItemFocus'];
77+
onItemBlur?: DashKitProps['onItemBlur'];
8178
};
8279

8380
type GridItemState = {

‎src/components/GridLayout/GridLayout.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22

33
import type {DragOverEvent} from 'react-grid-layout';
44

5-
import type {PluginRef, ReactGridLayoutProps} from 'src/typings';
5+
import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from 'src/typings';
66

77
import {
88
COMPACT_TYPE_HORIZONTAL_NOWRAP,
@@ -18,7 +18,6 @@ import GridItem from '../GridItem/GridItem';
1818

1919
import {Layout} from './ReactGridLayout';
2020
import type {
21-
AdjustWidgetLayoutParams,
2221
CurrentDraggingElement,
2322
GridLayoutProps,
2423
GridLayoutState,
@@ -93,11 +92,11 @@ export default class GridLayout extends React.PureComponent<GridLayoutProps, Gri
9392
});
9493
};
9594

96-
adjustWidgetLayout = ({
95+
adjustWidgetLayout: PluginWidgetProps['adjustWidgetLayout'] = ({
9796
widgetId,
9897
needSetDefault,
9998
adjustedWidgetLayout,
100-
}: AdjustWidgetLayoutParams) => {
99+
}) => {
101100
const {layout, memorizeOriginalLayout, revertToOriginalLayout} = this.context;
102101

103102
if (needSetDefault) {

‎src/components/GridLayout/types.ts‎

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -67,12 +67,6 @@ export type GroupCallbacks = {
6767
onDragTargetRestore: (group?: string) => void;
6868
};
6969

70-
export type AdjustWidgetLayoutParams = {
71-
widgetId: string;
72-
needSetDefault?: boolean;
73-
adjustedWidgetLayout?: ConfigLayout;
74-
};
75-
7670
export type LayoutAndPropsByGroup = {
7771
properties: Partial<ReactGridLayoutProps>;
7872
layout: ConfigLayout[];

‎src/components/Item/Item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ const b = cn('dashkit-item');
1313
const Item: React.FC<ItemProps> = ({
1414
registerManager,
1515
rendererProps,
16-
type,
1716
isPlaceholder,
1817
forwardedPluginRef,
1918
onItemRender,
@@ -27,6 +26,7 @@ const Item: React.FC<ItemProps> = ({
2726
const onItemMountChangeRef = React.useRef(onItemMountChange);
2827

2928
itemRef.current = item;
29+
const {type} = item;
3030
onItemRenderRef.current = onItemRender;
3131
onItemMountChangeRef.current = onItemMountChange;
3232

‎src/components/Item/types.ts‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
import type {ConfigItem, ItemParams} from '../../shared/types';
22
import type {PluginRef, PluginWidgetProps} from '../../typings';
33
import type {RegisterManager} from '../../utils/register-manager';
4+
import type {DashKitProps} from '../DashKit';
45

5-
export type RendererProps = Omit<
6-
PluginWidgetProps<ItemParams>,
7-
'onBeforeLoad' | 'width' | 'height'
8-
> & {
9-
width?: number;
10-
height?: number;
11-
};
6+
export type RendererProps = Omit<PluginWidgetProps<ItemParams>, 'onBeforeLoad'>;
127

138
export type ItemProps = {
149
forwardedPluginRef?: (ref: PluginRef) => void;
1510
isPlaceholder?: boolean;
1611
item: ConfigItem;
1712
registerManager: RegisterManager;
1813
rendererProps: RendererProps;
19-
type: string;
20-
onItemRender?: (item: ConfigItem) => void;
21-
onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void;
14+
onItemRender?: DashKitProps['onItemRender'];
15+
onItemMountChange?: DashKitProps['onItemMountChange'];
2216
};

‎src/context/DashKitContext.ts‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import type {
88
ConfigItem,
99
ConfigLayout,
1010
DraggedOverItem,
11+
GlobalParams,
1112
ItemDragProps,
1213
ItemParams,
1314
ItemState,
@@ -16,18 +17,17 @@ import type {
1617
} from '../shared';
1718
import type {ContextProps, PluginRef, ReactGridLayoutProps, SettingsProps} from '../typings';
1819

19-
type DashkitPropsPassedToCtx = Pick<
20+
export type DashkitPropsPassedToCtx = Pick<
2021
DashKitProps,
2122
| 'config'
2223
| 'groups'
23-
| 'context'
2424
| 'noOverlay'
2525
| 'focusable'
26-
| 'globalParams'
2726
| 'editMode'
28-
| 'settings'
2927
| 'onItemMountChange'
3028
| 'onItemRender'
29+
| 'onItemFocus'
30+
| 'onItemBlur'
3131
| 'draggableHandleClassName'
3232
// default handlers bypass
3333
| 'onDragStart'
@@ -43,9 +43,10 @@ export type TemporaryLayout = {
4343
dragProps: ItemDragProps;
4444
};
4545

46-
export type DashKitCtxShape = Omit<DashkitPropsPassedToCtx, 'context' | 'settings'> & {
46+
export type DashKitCtxShape = DashkitPropsPassedToCtx & {
4747
context: ContextProps;
4848
settings: SettingsProps;
49+
globalParams: GlobalParams;
4950

5051
registerManager: RegisterManager;
5152
forwardedMetaRef: React.ForwardedRef<any>;
@@ -83,8 +84,6 @@ export type DashKitCtxShape = Omit<DashkitPropsPassedToCtx, 'context' | 'setting
8384
groupLayout: ConfigLayout[],
8485
sharedItem?: DraggedOverItem,
8586
) => {w?: number; h?: number} | false | undefined;
86-
onItemBlur?: (item: ConfigItem) => void;
87-
onItemFocus?: (item: ConfigItem) => void;
8887
outerDnDEnable: boolean;
8988
dragOverPlugin: null | RegisterManagerPlugin;
9089
};

‎src/hocs/prepareItem.tsx‎

Lines changed: 6 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,10 @@ import React from 'react';
22

33
import isEqual from 'lodash/isEqual';
44

5+
import type {DashKitProps} from '../components/DashKit';
56
import type {ItemProps, RendererProps} from '../components/Item/types';
67
import {DashKitContext} from '../context';
78
import type {ConfigItem, ConfigLayout} from '../shared';
8-
import type {
9-
ItemStateAndParams,
10-
ItemStateAndParamsChangeOptions,
11-
} from '../shared/types/state-and-params';
129
import type {PluginRef, PluginWidgetProps, ReactGridLayoutProps} from '../typings';
1310

1411
type PrepareItemProps = {
@@ -23,8 +20,8 @@ type PrepareItemProps = {
2320
transform?: string;
2421
isPlaceholder?: boolean;
2522

26-
onItemRender?: (item: ConfigItem) => void;
27-
onItemMountChange?: (item: ConfigItem, meta: {isAsync: boolean; isMounted: boolean}) => void;
23+
onItemRender?: DashKitProps['onItemRender'];
24+
onItemMountChange?: DashKitProps['onItemMountChange'];
2825

2926
forwardedPluginRef?: (ref: PluginRef) => void;
3027
};
@@ -50,9 +47,9 @@ export function prepareItem(
5047
);
5148
}
5249

53-
_onStateAndParamsChange = (
54-
stateAndParams: ItemStateAndParams,
55-
options?: ItemStateAndParamsChangeOptions,
50+
_onStateAndParamsChange: PluginWidgetProps['onStateAndParamsChange'] = (
51+
stateAndParams,
52+
options,
5653
) => {
5754
this.context.onItemStateAndParamsChange(this.props.id, stateAndParams, options);
5855
};
@@ -101,14 +98,12 @@ export function prepareItem(
10198
const {item, isPlaceholder, forwardedPluginRef, onItemMountChange, onItemRender} =
10299
this.props;
103100
const {registerManager} = this.context;
104-
const {type} = item;
105101

106102
return (
107103
<WrappedComponent
108104
forwardedPluginRef={forwardedPluginRef}
109105
rendererProps={this.getRenderProps()}
110106
registerManager={registerManager}
111-
type={type}
112107
isPlaceholder={isPlaceholder}
113108
onItemMountChange={onItemMountChange}
114109
onItemRender={onItemRender}

‎src/hocs/withContext.tsx‎

Lines changed: 31 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,7 @@ import React from 'react';
33
import isEqual from 'lodash/isEqual';
44
import pick from 'lodash/pick';
55

6-
import type {
7-
OverlayControlItem,
8-
PreparedCopyItemOptions,
9-
} from '../components/OverlayControls/OverlayControls';
6+
import type {DashKitProps} from '../components/DashKit';
107
import {
118
COMPACT_TYPE_HORIZONTAL_NOWRAP,
129
DEFAULT_GROUP,
@@ -15,67 +12,43 @@ import {
1512
TEMPORARY_ITEM_ID,
1613
} from '../constants/common';
1714
import {DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext} from '../context';
18-
import type {DashKitCtxShape, OverlayControlsCtxShape, TemporaryLayout} from '../context';
19-
import {useDeepEqualMemo} from '../hooks/useDeepEqualMemo';
2015
import type {
21-
Config,
22-
ConfigItem,
23-
ConfigLayout,
24-
GlobalParams,
25-
ItemDropProps,
26-
ItemsStateAndParams,
27-
} from '../shared';
16+
DashKitCtxShape,
17+
DashkitPropsPassedToCtx,
18+
OverlayControlsCtxShape,
19+
TemporaryLayout,
20+
} from '../context';
21+
import {useDeepEqualMemo} from '../hooks/useDeepEqualMemo';
22+
import type {ConfigLayout} from '../shared';
2823
import {getAllConfigItems, getItemsParams, getItemsState} from '../shared';
29-
import type {
30-
ContextProps,
31-
DashKitGroup,
32-
ItemManipulationCallback,
33-
MenuItem,
34-
PluginRef,
35-
SettingsProps,
36-
} from '../typings';
24+
import type {PluginRef} from '../typings';
3725
import type {RegisterManager, RegisterManagerPlugin} from '../utils';
3826
import {UpdateManager, resolveLayoutGroup} from '../utils';
3927

4028
const ITEM_PROPS = ['i', 'h', 'w', 'x', 'y', 'parent'] as const;
4129

42-
export type DashKitWithContextProps = {
43-
config: Config;
44-
itemsStateAndParams: ItemsStateAndParams;
45-
groups?: DashKitGroup[];
46-
onChange: (data: {
47-
config: Config;
48-
itemsStateAndParams: ItemsStateAndParams;
49-
groups?: DashKitGroup[];
50-
}) => void;
51-
layout: ConfigLayout[];
52-
registerManager: RegisterManager;
53-
defaultGlobalParams: GlobalParams;
54-
globalParams: GlobalParams;
55-
onItemEdit: (item: ConfigItem) => void;
56-
context: ContextProps;
57-
noOverlay: boolean;
58-
focusable?: boolean;
59-
settings: SettingsProps;
60-
onItemMountChange?: (item: ConfigItem, state: {isAsync: boolean; isMounted: boolean}) => void;
61-
onItemRender?: (item: ConfigItem) => void;
62-
forwardedMetaRef: React.ForwardedRef<any>;
63-
draggableHandleClassName?: string;
64-
onDrop?: (dropProps: ItemDropProps) => void;
65-
overlayControls?: Record<string, OverlayControlItem[]> | null;
66-
overlayMenuItems?: MenuItem[] | null;
67-
getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
68-
onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
69-
editMode: boolean;
70-
onItemFocus?: (item: ConfigItem) => void;
71-
onItemBlur?: (item: ConfigItem) => void;
72-
onDragStart?: ItemManipulationCallback;
73-
onDrag?: ItemManipulationCallback;
74-
onDragStop?: ItemManipulationCallback;
75-
onResizeStart?: ItemManipulationCallback;
76-
onResize?: ItemManipulationCallback;
77-
onResizeStop?: ItemManipulationCallback;
78-
};
30+
export type DashKitWithContextProps = DashkitPropsPassedToCtx &
31+
Pick<
32+
DashKitProps,
33+
'overlayControls' | 'overlayMenuItems' | 'getPreparedCopyItemOptions' | 'onCopyFulfill'
34+
> &
35+
Required<
36+
Pick<
37+
DashKitProps,
38+
| 'itemsStateAndParams'
39+
| 'defaultGlobalParams'
40+
| 'globalParams'
41+
| 'context'
42+
| 'settings'
43+
| 'onItemEdit'
44+
| 'onChange'
45+
| 'onDrop'
46+
>
47+
> & {
48+
layout: ConfigLayout[];
49+
registerManager: RegisterManager;
50+
forwardedMetaRef: React.ForwardedRef<any>;
51+
};
7952

8053
type OriginalLayouts = Record<string, ConfigLayout>;
8154

‎src/typings/common.ts‎

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,31 @@ import type {OverlayCustomControlItem} from '../components/OverlayControls/Overl
44
import {MenuItems} from '../constants';
55
import {AdditionalWidgetLayout} from '../shared';
66

7-
export type GridLayoutSettings = ReactGridLayout.ReactGridLayoutProps & {
7+
export type CompactType = ReactGridLayout.ReactGridLayoutProps['compactType'] | 'horizontal-nowrap';
8+
9+
export type ReactGridLayoutProps = Omit<
10+
ReactGridLayout.ReactGridLayoutProps,
11+
| 'children'
12+
| 'compactType'
13+
| 'innerRef'
14+
| 'key'
15+
| 'layout'
16+
| 'onDragStart'
17+
| 'onDragStop'
18+
| 'onResizeStart'
19+
| 'onResizeStop'
20+
| 'draggableHandle'
21+
| 'isDroppable'
22+
| 'onDropDragOver'
23+
| 'onDrop'
24+
| 'draggableCancel'
25+
> & {
26+
compactType?: CompactType;
827
noOverlay?: boolean;
928
};
1029

1130
export interface Settings {
12-
gridLayout?: GridLayoutSettings;
31+
gridLayout?: ReactGridLayoutProps;
1332
theme?: string;
1433
isMobile?: boolean;
1534
// @deprecated as it's possibly mutable property use Dashkit overlayMenuItems property instead

0 commit comments

Comments
 (0)