@gravity-ui/dashkit 8.22.1-beta.0 → 8.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/build/cjs/components/DashKit/DashKit.d.ts +12 -14
  2. package/build/cjs/components/DashKit/DashKit.js +2 -2
  3. package/build/cjs/components/DashKitDnDWrapper/DashKitDnDWrapper.js +2 -2
  4. package/build/cjs/components/DashKitView/DashKitView.js +2 -2
  5. package/build/cjs/components/GridItem/GridItem.js +2 -2
  6. package/build/cjs/components/GridLayout/GridLayout.d.ts +1 -1
  7. package/build/cjs/components/GridLayout/GridLayout.js +2 -3
  8. package/build/cjs/components/Item/Item.d.ts +1 -2
  9. package/build/cjs/components/MobileLayout/MobileLayout.d.ts +21 -28
  10. package/build/cjs/components/MobileLayout/MobileLayout.js +47 -60
  11. package/build/cjs/components/OverlayControls/OverlayControls.d.ts +16 -4
  12. package/build/cjs/components/OverlayControls/OverlayControls.js +9 -8
  13. package/build/cjs/context/DashKitContext.d.ts +3 -30
  14. package/build/cjs/context/DashKitContext.js +6 -2
  15. package/build/cjs/hocs/prepareItem.d.ts +1 -2
  16. package/build/cjs/hocs/prepareItem.js +2 -2
  17. package/build/cjs/hocs/withContext.js +20 -23
  18. package/build/cjs/hooks/useDnDItemProps.js +2 -2
  19. package/build/cjs/shared/modules/helpers.d.ts +1 -1
  20. package/build/cjs/shared/modules/helpers.js +1 -1
  21. package/build/cjs/shared/types/state-and-params.d.ts +1 -2
  22. package/build/cjs/typings/config.d.ts +0 -1
  23. package/build/esm/components/DashKit/DashKit.d.ts +12 -14
  24. package/build/esm/components/DashKit/DashKit.js +1 -1
  25. package/build/esm/components/DashKitDnDWrapper/DashKitDnDWrapper.js +1 -1
  26. package/build/esm/components/DashKitView/DashKitView.js +1 -1
  27. package/build/esm/components/GridItem/GridItem.js +1 -1
  28. package/build/esm/components/GridLayout/GridLayout.d.ts +1 -1
  29. package/build/esm/components/GridLayout/GridLayout.js +1 -2
  30. package/build/esm/components/Item/Item.d.ts +1 -2
  31. package/build/esm/components/MobileLayout/MobileLayout.d.ts +21 -29
  32. package/build/esm/components/MobileLayout/MobileLayout.js +46 -59
  33. package/build/esm/components/OverlayControls/OverlayControls.d.ts +16 -4
  34. package/build/esm/components/OverlayControls/OverlayControls.js +8 -7
  35. package/build/esm/context/DashKitContext.d.ts +3 -30
  36. package/build/esm/context/DashKitContext.js +4 -2
  37. package/build/esm/hocs/prepareItem.d.ts +1 -2
  38. package/build/esm/hocs/prepareItem.js +1 -1
  39. package/build/esm/hocs/withContext.js +17 -20
  40. package/build/esm/hooks/useDnDItemProps.js +1 -1
  41. package/build/esm/shared/modules/helpers.d.ts +1 -1
  42. package/build/esm/shared/modules/helpers.js +1 -1
  43. package/build/esm/shared/types/state-and-params.d.ts +1 -2
  44. package/build/esm/typings/config.d.ts +0 -1
  45. package/package.json +1 -1
  46. package/build/cjs/context/DashKitDnDContext.d.ts +0 -10
  47. package/build/cjs/context/DashKitDnDContext.js +0 -6
  48. package/build/cjs/context/DashkitOverlayControlsContext.d.ts +0 -13
  49. package/build/cjs/context/DashkitOverlayControlsContext.js +0 -6
  50. package/build/cjs/context/index.d.ts +0 -3
  51. package/build/cjs/context/index.js +0 -6
  52. package/build/esm/context/DashKitDnDContext.d.ts +0 -10
  53. package/build/esm/context/DashKitDnDContext.js +0 -2
  54. package/build/esm/context/DashkitOverlayControlsContext.d.ts +0 -13
  55. package/build/esm/context/DashkitOverlayControlsContext.js +0 -2
  56. package/build/esm/context/index.d.ts +0 -3
  57. package/build/esm/context/index.js +0 -3
@@ -3,9 +3,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useDnDItemProps = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const react_1 = tslib_1.__importDefault(require("react"));
6
- const context_1 = require("../context");
6
+ const DashKitContext_1 = require("../context/DashKitContext");
7
7
  const useDnDItemProps = (item) => {
8
- const dragContext = react_1.default.useContext(context_1.DashKitDnDContext);
8
+ const dragContext = react_1.default.useContext(DashKitContext_1.DashKitDnDContext);
9
9
  const onDragStart = react_1.default.useCallback((e) => {
10
10
  if (dragContext && item.dragProps) {
11
11
  dragContext.onDragStart(e, item.dragProps);
@@ -18,7 +18,7 @@ export declare function formQueueData({ items, itemsStateAndParams, }: {
18
18
  }): FormedQueueData[];
19
19
  export declare function resolveItemInnerId({ item, itemsStateAndParams, }: {
20
20
  item: Pick<ConfigItemWithTabs, 'data' | 'id'>;
21
- itemsStateAndParams?: ItemsStateAndParams;
21
+ itemsStateAndParams: ItemsStateAndParams;
22
22
  }): string;
23
23
  export declare function getMapItemsIgnores({ items, ignores, itemsStateAndParams, isFirstVersion, }: {
24
24
  items: (ConfigItem | ConfigItemGroup)[];
@@ -118,7 +118,7 @@ exports.formQueueData = formQueueData;
118
118
  function resolveItemInnerId({ item, itemsStateAndParams, }) {
119
119
  var _a, _b;
120
120
  const { id } = item;
121
- const stateTabId = (_b = (_a = itemsStateAndParams === null || itemsStateAndParams === void 0 ? void 0 : itemsStateAndParams[id]) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.tabId;
121
+ const stateTabId = (_b = (_a = itemsStateAndParams[id]) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.tabId;
122
122
  const { tabs } = item.data;
123
123
  if (stateTabId && tabs.some((tab) => tab.id === stateTabId)) {
124
124
  return stateTabId;
@@ -3,7 +3,6 @@ import { StringParams } from './common';
3
3
  export interface ItemState {
4
4
  [key: string]: any;
5
5
  }
6
- export type ItemParams = StringParams | Record<string, StringParams>;
7
6
  export interface QueueItem {
8
7
  id: string;
9
8
  tabId?: string;
@@ -17,7 +16,7 @@ export type StateAndParamsMeta = {
17
16
  [META_KEY]: StateAndParamsMetaData;
18
17
  };
19
18
  export type ItemStateAndParams = {
20
- params?: ItemParams;
19
+ params?: StringParams | Record<string, StringParams>;
21
20
  state?: ItemState;
22
21
  };
23
22
  export type ItemStateAndParamsChangeOptions = {
@@ -28,7 +28,6 @@ export type AddNewItemOptions = SetItemOptions & {
28
28
  export interface DashkitGroupRenderProps {
29
29
  config: Config;
30
30
  editMode: boolean;
31
- isMobile: boolean;
32
31
  items: ConfigItem[];
33
32
  layout: ConfigLayout[];
34
33
  context: any;
@@ -1,9 +1,9 @@
1
1
  import React from 'react';
2
2
  import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
3
- import type { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
3
+ import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
4
4
  import GridLayout from '../GridLayout/GridLayout';
5
- import type { OverlayControlItem, PreparedCopyItemOptions } from '../OverlayControls/OverlayControls';
6
- interface DashKitGeneralProps {
5
+ import { OverlayControlItem, OverlayControlsCtxShape } from '../OverlayControls/OverlayControls';
6
+ interface DashKitGeneralProps extends Pick<OverlayControlsCtxShape, 'getPreparedCopyItemOptions' | 'onCopyFulfill'> {
7
7
  config: Config;
8
8
  editMode: boolean;
9
9
  draggableHandleClassName?: string;
@@ -11,14 +11,6 @@ interface DashKitGeneralProps {
11
11
  overlayMenuItems?: MenuItem[] | null;
12
12
  }
13
13
  interface DashKitDefaultProps {
14
- defaultGlobalParams: GlobalParams;
15
- globalParams: GlobalParams;
16
- itemsStateAndParams: ItemsStateAndParams;
17
- settings: SettingsProps;
18
- context: ContextProps;
19
- noOverlay: boolean;
20
- focusable?: boolean;
21
- groups?: DashKitGroup[];
22
14
  onItemEdit: (item: ConfigItem) => void;
23
15
  onChange: (data: {
24
16
  config: Config;
@@ -31,21 +23,27 @@ interface DashKitDefaultProps {
31
23
  isMounted: boolean;
32
24
  }) => void;
33
25
  onItemRender?: (item: ConfigItem) => void;
34
- getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
35
- onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
36
26
  onDragStart?: ItemManipulationCallback;
37
27
  onDrag?: ItemManipulationCallback;
38
28
  onDragStop?: ItemManipulationCallback;
39
29
  onResizeStart?: ItemManipulationCallback;
40
30
  onResize?: ItemManipulationCallback;
41
31
  onResizeStop?: ItemManipulationCallback;
32
+ defaultGlobalParams: GlobalParams;
33
+ globalParams: GlobalParams;
34
+ itemsStateAndParams: ItemsStateAndParams;
35
+ settings: SettingsProps;
36
+ context: ContextProps;
37
+ noOverlay: boolean;
38
+ focusable?: boolean;
39
+ groups?: DashKitGroup[];
42
40
  }
43
41
  export interface DashKitProps extends DashKitGeneralProps, Partial<DashKitDefaultProps> {
44
42
  }
45
43
  type DashKitInnerProps = DashKitGeneralProps & DashKitDefaultProps;
46
44
  export declare class DashKit extends React.PureComponent<DashKitInnerProps> {
47
45
  static defaultProps: DashKitDefaultProps;
48
- static contextType: React.Context<void | import("../../context").DashKitDnDCtxShape>;
46
+ static contextType: React.Context<any>;
49
47
  static registerPlugins(...plugins: Plugin[]): void;
50
48
  static reloadPlugins(...plugins: Plugin[]): void;
51
49
  static setSettings(settings: Settings): void;
@@ -2,7 +2,7 @@ import React from 'react';
2
2
  import noop from 'lodash/noop';
3
3
  import pick from 'lodash/pick';
4
4
  import { DEFAULT_GROUP, DEFAULT_NAMESPACE } from '../../constants';
5
- import { DashKitDnDContext } from '../../context';
5
+ import { DashKitDnDContext } from '../../context/DashKitContext';
6
6
  import { RegisterManager, UpdateManager, reflowLayout } from '../../utils';
7
7
  import { DashKitDnDWrapper } from '../DashKitDnDWrapper/DashKitDnDWrapper';
8
8
  import DashKitView from '../DashKitView/DashKitView';
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { DashKitDnDContext } from '../../context';
2
+ import { DashKitDnDContext } from '../../context/DashKitContext';
3
3
  const defaultImageSrc = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=';
4
4
  export const DashKitDnDWrapper = (props) => {
5
5
  const [dragProps, setDragProps] = React.useState(null);
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { DashKitContext } from '../../context';
2
+ import { DashKitContext } from '../../context/DashKitContext';
3
3
  import { withContext } from '../../hocs/withContext';
4
4
  import { useCalcPropsLayout } from '../../hooks/useCalcLayout';
5
5
  import { cn } from '../../utils/cn';
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import PropTypes from 'prop-types';
3
3
  import { FOCUSED_CLASS_NAME } from '../../constants';
4
- import { DashKitContext } from '../../context';
4
+ import { DashKitContext } from '../../context/DashKitContext';
5
5
  import { cn } from '../../utils/cn';
6
6
  import Item from '../Item/Item';
7
7
  import OverlayControls from '../OverlayControls/OverlayControls';
@@ -1,5 +1,5 @@
1
1
  export default class GridLayout extends React.PureComponent<any, any, any> {
2
- static contextType: React.Context<import("../../context").DashKitCtxShape>;
2
+ static contextType: React.Context<any>;
3
3
  constructor(props: any, context: any);
4
4
  pluginsRefs: any[];
5
5
  state: {
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DRAGGABLE_CANCEL_CLASS_NAME, TEMPORARY_ITEM_ID, } from '../../constants';
3
- import { DashKitContext } from '../../context';
3
+ import { DashKitContext } from '../../context/DashKitContext';
4
4
  import { resolveLayoutGroup } from '../../utils';
5
5
  import GridItem from '../GridItem/GridItem';
6
6
  import { Layout } from './ReactGridLayout';
@@ -498,7 +498,6 @@ class GridLayout extends React.PureComponent {
498
498
  offset += items.length;
499
499
  if (group.render) {
500
500
  const groupContext = {
501
- isMobile: false,
502
501
  config,
503
502
  editMode,
504
503
  items,
@@ -66,8 +66,7 @@ declare const _default: {
66
66
  onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
67
67
  forwardedPluginRef: PropTypes.Requireable<any>;
68
68
  };
69
- contextType: React.Context<import("../../context").DashKitCtxShape>;
69
+ contextType: React.Context<any>;
70
70
  };
71
71
  export default _default;
72
72
  import React from 'react';
73
- import PropTypes from 'prop-types';
@@ -1,31 +1,23 @@
1
- import React from 'react';
2
- import { DashKitContext } from '../../context';
3
- import { getSortedConfigItems } from './helpers';
4
- import './MobileLayout.css';
5
- type MobileLayoutProps = {};
6
- type MobileLayoutState = {
7
- itemsWithActiveAutoheight: Record<string, boolean>;
8
- };
9
- type PlugibRefObject = React.RefObject<any>;
10
- export default class MobileLayout extends React.PureComponent<MobileLayoutProps, MobileLayoutState> {
11
- static contextType: React.Context<import("../../context").DashKitCtxShape>;
12
- context: React.ContextType<typeof DashKitContext>;
13
- pluginsRefs: PlugibRefObject[];
14
- sortedLayoutItems: Record<string, ReturnType<typeof getSortedConfigItems>> | null;
15
- _memoLayout: import("../..").ConfigLayout[];
16
- _memoForwardedPluginRef: Array<(refObject: PlugibRefObject) => void>;
17
- _memoAdjustWidgetLayout: Record<string, (props: {
18
- needSetDefault: boolean;
19
- }) => void>;
20
- state: MobileLayoutState;
21
- render(): JSX.Element;
22
- getSortedLayoutItems(): Record<string, (import("../..").ConfigItem & import("../..").ConfigLayout)[]>;
23
- getMemoForwardRefCallback(refIndex: number): (refObject: PlugibRefObject) => void;
24
- adjustWidgetLayout(id: string, { needSetDefault }: {
25
- needSetDefault: boolean;
26
- }): void;
27
- getMemoAdjustWidgetLayout(id: string): (props: {
28
- needSetDefault: boolean;
1
+ export default class MobileLayout extends React.PureComponent<any, any, any> {
2
+ static contextType: React.Context<any>;
3
+ constructor(props: any);
4
+ constructor(props: any, context: any);
5
+ pluginsRefs: any[];
6
+ sortedLayoutItems: any;
7
+ _memoLayout: any;
8
+ _memoForwardedPluginRef: any[];
9
+ _memoAdjustWidgetLayout: any[];
10
+ state: {
11
+ activeTabId: null;
12
+ indexesOfItemsWithActiveAutoheight: {};
13
+ };
14
+ componentDidUpdate(prevProps: any, prevState: any): void;
15
+ getSortedLayoutItems(): any;
16
+ getMemoForwardRefCallback: (refIndex: any) => any;
17
+ adjustWidgetLayout: (index: any, { needSetDefault }: {
18
+ needSetDefault: any;
29
19
  }) => void;
20
+ getMemoAdjustWidgetLayout: (index: any) => any;
21
+ render(): JSX.Element;
30
22
  }
31
- export {};
23
+ import React from 'react';
@@ -1,7 +1,5 @@
1
1
  import React from 'react';
2
- import groupBy from 'lodash/groupBy';
3
- import { DEFAULT_GROUP } from '../../constants';
4
- import { DashKitContext } from '../../context';
2
+ import { DashKitContext } from '../../context/DashKitContext';
5
3
  import { cn } from '../../utils/cn';
6
4
  import Item from '../Item/Item';
7
5
  import { getSortedConfigItems } from './helpers';
@@ -11,40 +9,47 @@ class MobileLayout extends React.PureComponent {
11
9
  constructor() {
12
10
  super(...arguments);
13
11
  this.pluginsRefs = [];
14
- this.sortedLayoutItems = null;
15
12
  this._memoLayout = this.context.layout;
16
13
  this._memoForwardedPluginRef = [];
17
- this._memoAdjustWidgetLayout = {};
14
+ this._memoAdjustWidgetLayout = [];
18
15
  this.state = {
19
- itemsWithActiveAutoheight: {},
16
+ activeTabId: null,
17
+ indexesOfItemsWithActiveAutoheight: {},
20
18
  };
21
- }
22
- render() {
23
- const { config, layout, groups = [{ id: DEFAULT_GROUP }], context, editMode } = this.context;
24
- this.pluginsRefs.length = config.items.length;
25
- const sortedItems = this.getSortedLayoutItems();
26
- let indexOffset = 0;
27
- return (React.createElement("div", { className: b() }, groups.map((group) => {
28
- const groupId = group.id || DEFAULT_GROUP;
29
- const items = sortedItems[groupId];
30
- const children = (items || []).map((item, index) => {
31
- const isItemWithActiveAutoheight = item.id in this.state.itemsWithActiveAutoheight;
32
- return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
33
- React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(item.id), forwardedPluginRef: this.getMemoForwardRefCallback(indexOffset + index), onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
34
- });
35
- indexOffset += items.length;
36
- if (group.render) {
37
- return group.render(groupId, children, {
38
- isMobile: true,
39
- config,
40
- context,
41
- editMode,
42
- items,
43
- layout,
19
+ this.getMemoForwardRefCallback = (refIndex) => {
20
+ if (!this._memoForwardedPluginRef[refIndex]) {
21
+ this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
22
+ this.pluginsRefs[refIndex] = pluginRef;
23
+ };
24
+ }
25
+ return this._memoForwardedPluginRef[refIndex];
26
+ };
27
+ this.adjustWidgetLayout = (index, { needSetDefault }) => {
28
+ if (needSetDefault) {
29
+ const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
30
+ delete indexesOfItemsWithActiveAutoheight[index];
31
+ this.setState({ indexesOfItemsWithActiveAutoheight });
32
+ }
33
+ else {
34
+ this.setState({
35
+ indexesOfItemsWithActiveAutoheight: Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight, { [index]: true }),
44
36
  });
45
37
  }
46
- return children;
47
- })));
38
+ };
39
+ this.getMemoAdjustWidgetLayout = (index) => {
40
+ if (!this._memoAdjustWidgetLayout[index]) {
41
+ this._memoAdjustWidgetLayout[index] = this.adjustWidgetLayout.bind(this, index);
42
+ }
43
+ return this._memoAdjustWidgetLayout[index];
44
+ };
45
+ }
46
+ componentDidUpdate(prevProps, prevState) {
47
+ if (prevState.activeTabId !== this.context.config.id) {
48
+ this.setState({
49
+ activeTabId: this.context.config.id,
50
+ indexesOfItemsWithActiveAutoheight: {},
51
+ });
52
+ }
48
53
  }
49
54
  getSortedLayoutItems() {
50
55
  if (this.sortedLayoutItems && this.context.layout === this._memoLayout) {
@@ -52,36 +57,18 @@ class MobileLayout extends React.PureComponent {
52
57
  }
53
58
  this._memoLayout = this.context.layout;
54
59
  const hasOrderId = Boolean(this.context.config.items.find((item) => item.orderId));
55
- this.sortedLayoutItems = groupBy(getSortedConfigItems(this.context.config, hasOrderId), (item) => item.parent || DEFAULT_GROUP);
60
+ this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
56
61
  return this.sortedLayoutItems;
57
62
  }
58
- getMemoForwardRefCallback(refIndex) {
59
- if (!this._memoForwardedPluginRef[refIndex]) {
60
- this._memoForwardedPluginRef[refIndex] = (pluginRef) => {
61
- this.pluginsRefs[refIndex] = pluginRef;
62
- };
63
- }
64
- return this._memoForwardedPluginRef[refIndex];
65
- }
66
- adjustWidgetLayout(id, { needSetDefault }) {
67
- if (needSetDefault) {
68
- const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.itemsWithActiveAutoheight);
69
- delete indexesOfItemsWithActiveAutoheight[id];
70
- this.setState({ itemsWithActiveAutoheight: indexesOfItemsWithActiveAutoheight });
71
- }
72
- else {
73
- this.setState({
74
- itemsWithActiveAutoheight: Object.assign({}, this.state.itemsWithActiveAutoheight, {
75
- [id]: true,
76
- }),
77
- });
78
- }
79
- }
80
- getMemoAdjustWidgetLayout(id) {
81
- if (!this._memoAdjustWidgetLayout[id]) {
82
- this._memoAdjustWidgetLayout[id] = this.adjustWidgetLayout.bind(this, id);
83
- }
84
- return this._memoAdjustWidgetLayout[id];
63
+ render() {
64
+ const { config, layout } = this.context;
65
+ this.pluginsRefs.length = config.items.length;
66
+ const sortedItems = this.getSortedLayoutItems();
67
+ return (React.createElement("div", { className: b() }, sortedItems.map((item, index) => {
68
+ const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
69
+ return (React.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
70
+ React.createElement(Item, { id: item.id, item: item, layout: layout, shouldItemUpdate: false, adjustWidgetLayout: this.getMemoAdjustWidgetLayout(index), forwardedPluginRef: this.getMemoForwardRefCallback(index), onMountChange: this.onMountChange, onItemMountChange: this.context.onItemMountChange, onItemRender: this.context.onItemRender })));
71
+ })));
85
72
  }
86
73
  }
87
74
  MobileLayout.contextType = DashKitContext;
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import { ButtonSize, ButtonView, IconProps, MenuItemProps } from '@gravity-ui/uikit';
3
- import { OverlayControlsCtxShape } from '../../context';
4
- import { type ConfigItem, type ItemParams, type ItemState, type PluginBase } from '../../shared';
3
+ import { type ConfigItem, type ConfigLayout, type ItemState, type ItemsStateAndParamsBase, type PluginBase, type StringParams } from '../../shared';
4
+ import { MenuItem } from '../../typings';
5
5
  import './OverlayControls.css';
6
6
  export declare enum OverlayControlsPosition {
7
7
  TopRight = "top_right",
@@ -25,7 +25,7 @@ export interface OverlayCustomControlItem {
25
25
  title?: string;
26
26
  icon?: MenuItemProps['icon'];
27
27
  iconSize?: number | string;
28
- handler?: (item: ConfigItem, params: ItemParams, state: ItemState) => void;
28
+ handler?: (item: ConfigItem, params: StringParams, state: ItemState) => void;
29
29
  visible?: (item: ConfigItem) => boolean;
30
30
  className?: string;
31
31
  qa?: string;
@@ -51,9 +51,21 @@ type PreparedCopyItemOptionsArg = Pick<ConfigItem, 'data' | 'type' | 'defaults'
51
51
  export type PreparedCopyItemOptions<C extends object = {}> = PreparedCopyItemOptionsArg & {
52
52
  copyContext?: C;
53
53
  };
54
+ export interface OverlayControlsCtxShape {
55
+ overlayControls?: Record<string, OverlayControlItem[]>;
56
+ context: Record<string, any>;
57
+ menu: MenuItem[];
58
+ itemsStateAndParams: ItemsStateAndParamsBase;
59
+ itemsParams: Record<string, StringParams>;
60
+ editItem: (item: ConfigItem) => void;
61
+ removeItem: (id: string) => void;
62
+ getLayoutItem: (id: string) => ConfigLayout | void;
63
+ getPreparedCopyItemOptions?: (options: PreparedCopyItemOptions) => PreparedCopyItemOptions;
64
+ onCopyFulfill?: (error: null | Error, data?: PreparedCopyItemOptions) => void;
65
+ }
54
66
  type OverlayControlsCtx = React.Context<OverlayControlsCtxShape>;
55
67
  declare class OverlayControls extends React.Component<OverlayControlsProps> {
56
- static contextType: React.Context<void | OverlayControlsCtxShape>;
68
+ static contextType: React.Context<any>;
57
69
  static defaultProps: OverlayControlsDefaultProps;
58
70
  context: React.ContextType<OverlayControlsCtx>;
59
71
  render(): JSX.Element;
@@ -3,7 +3,7 @@ import { Ellipsis, Gear, Xmark } from '@gravity-ui/icons';
3
3
  import { Button, DropdownMenu, Icon, } from '@gravity-ui/uikit';
4
4
  import noop from 'lodash/noop';
5
5
  import { COPIED_WIDGET_STORE_KEY, DRAGGABLE_CANCEL_CLASS_NAME, MenuItems, OVERLAY_CONTROLS_CLASS_NAME, OVERLAY_ICON_SIZE, } from '../../constants';
6
- import { DashkitOvelayControlsContext } from '../../context';
6
+ import { DashkitOvelayControlsContext } from '../../context/DashKitContext';
7
7
  import { i18n } from '../../i18n';
8
8
  import { isItemWithTabs, resolveItemInnerId, } from '../../shared';
9
9
  import { cn } from '../../utils/cn';
@@ -119,9 +119,9 @@ class OverlayControls extends React.Component {
119
119
  (_l = (_k = this.props).onItemClick) === null || _l === void 0 ? void 0 : _l.call(_k);
120
120
  };
121
121
  this.onEditItem = () => {
122
- var _a, _b, _c, _d;
123
- (_b = (_a = this.context).editItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.props.configItem);
124
- (_d = (_c = this.props).onItemClick) === null || _d === void 0 ? void 0 : _d.call(_c);
122
+ var _a, _b;
123
+ this.context.editItem(this.props.configItem);
124
+ (_b = (_a = this.props).onItemClick) === null || _b === void 0 ? void 0 : _b.call(_a);
125
125
  };
126
126
  this.onRemoveItem = () => {
127
127
  var _a, _b;
@@ -192,12 +192,13 @@ class OverlayControls extends React.Component {
192
192
  return menu === null || menu === void 0 ? void 0 : menu.every((item) => Object.values(MenuItems).includes(String(item)));
193
193
  }
194
194
  renderDropdownMenu(isOnlyOneItem) {
195
+ var _a;
195
196
  const { view, size, onItemClick } = this.props;
196
- const { menu: contextMenu, itemsParams, itemsState } = this.context;
197
+ const { menu: contextMenu, itemsParams, itemsStateAndParams } = this.context;
197
198
  const configItem = this.props.configItem;
198
199
  const itemParams = itemsParams[configItem.id];
199
- const itemState = (itemsState === null || itemsState === void 0 ? void 0 : itemsState[configItem.id]) || {};
200
- const menu = contextMenu && contextMenu.length > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
200
+ const itemState = ((_a = itemsStateAndParams[configItem.id]) === null || _a === void 0 ? void 0 : _a.state) || {};
201
+ const menu = (contextMenu === null || contextMenu === void 0 ? void 0 : contextMenu.length) > 0 ? contextMenu : DEFAULT_DROPDOWN_MENU;
201
202
  const isDefaultMenu = this.isDefaultMenu(menu);
202
203
  const items = isDefaultMenu
203
204
  ? (menu || []).reduce((memo, name) => {
@@ -1,31 +1,4 @@
1
- /// <reference types="react-grid-layout" />
1
+ export const DashKitContext: React.Context<any>;
2
+ export const DashkitOvelayControlsContext: React.Context<any>;
3
+ export const DashKitDnDContext: React.Context<any>;
2
4
  import React from 'react';
3
- import type { RegisterManager } from '..//utils';
4
- import type { DashKitProps } from '../components/DashKit';
5
- import type { ConfigItem, ConfigLayout, ItemParams, ItemState, ItemStateAndParams, ItemStateAndParamsChangeOptions } from '../shared';
6
- type DashkitPropsPassedToCtx = Pick<DashKitProps, 'config' | 'groups' | 'context' | 'noOverlay' | 'focusable' | 'globalParams' | 'editMode' | 'settings' | 'onItemMountChange' | 'onItemRender' | 'draggableHandleClassName' | 'onDragStart' | 'onDrag' | 'onDragStop' | 'onResizeStart' | 'onResize' | 'onResizeStop'>;
7
- type PluginType = string;
8
- export type DashKitCtxShape = DashkitPropsPassedToCtx & {
9
- registerManager: RegisterManager;
10
- forwardedMetaRef: React.ForwardedRef<any>;
11
- layout: ConfigLayout[];
12
- temporaryLayout: ConfigLayout[] | null;
13
- memorizeOriginalLayout: (widgetId: string, preAutoHeightLayout: ConfigLayout, postAutoHeightLayout: ConfigLayout) => void;
14
- revertToOriginalLayout: (widgetId: string) => void;
15
- itemsState?: Record<string, ItemState>;
16
- itemsParams: Record<string, ItemParams>;
17
- onItemStateAndParamsChange: (id: string, stateAndParams: ItemStateAndParams, options: ItemStateAndParamsChangeOptions) => void;
18
- getItemsMeta: (pluginsRefs: Array<React.RefObject<any>>) => Array<Promise<any>>;
19
- reloadItems: (pluginsRefs: Array<React.RefObject<any>>, data: {
20
- silentLoading: boolean;
21
- noVeil: boolean;
22
- }) => void;
23
- onDrop: (newLayout: ConfigLayout, item: ConfigItem) => void;
24
- onDropDragOver: (e: DragEvent | MouseEvent, group: string | void, gridProps: Partial<ReactGridLayout.ReactGridLayoutProps>, groupLayout: ConfigLayout[], sharedItem: (Partial<ConfigLayout> & {
25
- type: PluginType;
26
- }) | void) => void | boolean;
27
- outerDnDEnable: boolean;
28
- dragOverPlugin: null | PluginType;
29
- };
30
- declare const DashKitContext: React.Context<DashKitCtxShape>;
31
- export { DashKitContext };
@@ -1,3 +1,5 @@
1
1
  import React from 'react';
2
- const DashKitContext = React.createContext({});
3
- export { DashKitContext };
2
+ const DashKitContext = React.createContext();
3
+ const DashkitOvelayControlsContext = React.createContext();
4
+ const DashKitDnDContext = React.createContext();
5
+ export { DashKitContext, DashkitOvelayControlsContext, DashKitDnDContext };
@@ -66,7 +66,6 @@ export function prepareItem(Component: any): {
66
66
  onItemMountChange: PropTypes.Requireable<(...args: any[]) => any>;
67
67
  forwardedPluginRef: PropTypes.Requireable<any>;
68
68
  };
69
- contextType: React.Context<import("../context").DashKitCtxShape>;
69
+ contextType: React.Context<any>;
70
70
  };
71
71
  import React from 'react';
72
- import PropTypes from 'prop-types';
@@ -1,7 +1,7 @@
1
1
  import React from 'react';
2
2
  import isEqual from 'lodash/isEqual';
3
3
  import PropTypes from 'prop-types';
4
- import { DashKitContext } from '../context';
4
+ import { DashKitContext } from '../context/DashKitContext';
5
5
  export function prepareItem(Component) {
6
6
  var _a;
7
7
  return _a = class PrepareItem extends React.Component {
@@ -3,7 +3,7 @@ import React from 'react';
3
3
  import isEqual from 'lodash/isEqual';
4
4
  import pick from 'lodash/pick';
5
5
  import { COMPACT_TYPE_HORIZONTAL_NOWRAP, DEFAULT_GROUP, DEFAULT_WIDGET_HEIGHT, DEFAULT_WIDGET_WIDTH, TEMPORARY_ITEM_ID, } from '../constants/common';
6
- import { DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext } from '../context';
6
+ import { DashKitContext, DashKitDnDContext, DashkitOvelayControlsContext, } from '../context/DashKitContext';
7
7
  import { useDeepEqualMemo } from '../hooks/useDeepEqualMemo';
8
8
  import { getItemsParams, getItemsState } from '../shared';
9
9
  import { UpdateManager, resolveLayoutGroup } from '../utils';
@@ -283,7 +283,6 @@ function useMemoStateContext(props) {
283
283
  }
284
284
  return itemLayout;
285
285
  }, [
286
- props.registerManager,
287
286
  resetTemporaryLayout,
288
287
  temporaryLayout,
289
288
  dragOverPlugin,
@@ -312,6 +311,8 @@ function useMemoStateContext(props) {
312
311
  });
313
312
  }, [dragPropsContext, onDropProp, setTemporaryLayout, resetTemporaryLayout]);
314
313
  const dashkitContextValue = React.useMemo(() => ({
314
+ layout: resultLayout,
315
+ temporaryLayout,
315
316
  config: props.config,
316
317
  groups: props.groups,
317
318
  context: props.context,
@@ -321,26 +322,24 @@ function useMemoStateContext(props) {
321
322
  globalParams: props.globalParams,
322
323
  editMode: props.editMode,
323
324
  settings: props.settings,
324
- onItemMountChange: props.onItemMountChange,
325
- onItemRender: props.onItemRender,
326
- draggableHandleClassName: props.draggableHandleClassName,
327
- registerManager: props.registerManager,
328
- forwardedMetaRef: props.forwardedMetaRef,
329
- layout: resultLayout,
330
- temporaryLayout,
331
- layoutChange: onLayoutChange,
332
- memorizeOriginalLayout,
333
- revertToOriginalLayout,
334
325
  itemsState,
335
326
  itemsParams,
327
+ registerManager: props.registerManager,
336
328
  onItemStateAndParamsChange,
337
- getItemsMeta,
338
- reloadItems,
339
329
  onDrop,
340
330
  onDropDragOver,
331
+ onItemMountChange: props.onItemMountChange,
332
+ onItemRender: props.onItemRender,
333
+ layoutChange: onLayoutChange,
334
+ getItemsMeta,
335
+ reloadItems,
336
+ memorizeOriginalLayout,
337
+ revertToOriginalLayout,
338
+ forwardedMetaRef: props.forwardedMetaRef,
339
+ draggableHandleClassName: props.draggableHandleClassName,
341
340
  outerDnDEnable,
342
341
  dragOverPlugin,
343
- /* default handlers bypass */
342
+ /* default bypassing handlers */
344
343
  onDragStart: props.onDragStart,
345
344
  onDrag: props.onDrag,
346
345
  onDragStop: props.onDragStop,
@@ -386,15 +385,14 @@ function useMemoStateContext(props) {
386
385
  const controlsContextValue = React.useMemo(() => ({
387
386
  overlayControls: props.overlayControls,
388
387
  context: props.context,
388
+ menu: overlayMenuItems,
389
389
  itemsStateAndParams: props.itemsStateAndParams,
390
- itemsState,
391
390
  itemsParams,
392
- getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
393
- onCopyFulfill: props.onCopyFulfill,
394
- menu: overlayMenuItems,
395
391
  editItem: props.onItemEdit,
396
392
  removeItem: onItemRemove,
397
393
  getLayoutItem: getLayoutItem,
394
+ getPreparedCopyItemOptions: props.getPreparedCopyItemOptions,
395
+ onCopyFulfill: props.onCopyFulfill,
398
396
  }), [
399
397
  props.overlayControls,
400
398
  props.context,
@@ -403,7 +401,6 @@ function useMemoStateContext(props) {
403
401
  props.getPreparedCopyItemOptions,
404
402
  props.onCopyFulfill,
405
403
  overlayMenuItems,
406
- itemsState,
407
404
  itemsParams,
408
405
  onItemRemove,
409
406
  getLayoutItem,
@@ -1,5 +1,5 @@
1
1
  import React from 'react';
2
- import { DashKitDnDContext } from '../context';
2
+ import { DashKitDnDContext } from '../context/DashKitContext';
3
3
  export const useDnDItemProps = (item) => {
4
4
  const dragContext = React.useContext(DashKitDnDContext);
5
5
  const onDragStart = React.useCallback((e) => {
@@ -18,7 +18,7 @@ export declare function formQueueData({ items, itemsStateAndParams, }: {
18
18
  }): FormedQueueData[];
19
19
  export declare function resolveItemInnerId({ item, itemsStateAndParams, }: {
20
20
  item: Pick<ConfigItemWithTabs, 'data' | 'id'>;
21
- itemsStateAndParams?: ItemsStateAndParams;
21
+ itemsStateAndParams: ItemsStateAndParams;
22
22
  }): string;
23
23
  export declare function getMapItemsIgnores({ items, ignores, itemsStateAndParams, isFirstVersion, }: {
24
24
  items: (ConfigItem | ConfigItemGroup)[];