@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.
- package/build/cjs/components/DashKit/DashKit.d.ts +12 -14
- package/build/cjs/components/DashKit/DashKit.js +2 -2
- package/build/cjs/components/DashKitDnDWrapper/DashKitDnDWrapper.js +2 -2
- package/build/cjs/components/DashKitView/DashKitView.js +2 -2
- package/build/cjs/components/GridItem/GridItem.js +2 -2
- package/build/cjs/components/GridLayout/GridLayout.d.ts +1 -1
- package/build/cjs/components/GridLayout/GridLayout.js +2 -3
- package/build/cjs/components/Item/Item.d.ts +1 -2
- package/build/cjs/components/MobileLayout/MobileLayout.d.ts +21 -28
- package/build/cjs/components/MobileLayout/MobileLayout.js +47 -60
- package/build/cjs/components/OverlayControls/OverlayControls.d.ts +16 -4
- package/build/cjs/components/OverlayControls/OverlayControls.js +9 -8
- package/build/cjs/context/DashKitContext.d.ts +3 -30
- package/build/cjs/context/DashKitContext.js +6 -2
- package/build/cjs/hocs/prepareItem.d.ts +1 -2
- package/build/cjs/hocs/prepareItem.js +2 -2
- package/build/cjs/hocs/withContext.js +20 -23
- package/build/cjs/hooks/useDnDItemProps.js +2 -2
- package/build/cjs/shared/modules/helpers.d.ts +1 -1
- package/build/cjs/shared/modules/helpers.js +1 -1
- package/build/cjs/shared/types/state-and-params.d.ts +1 -2
- package/build/cjs/typings/config.d.ts +0 -1
- package/build/esm/components/DashKit/DashKit.d.ts +12 -14
- package/build/esm/components/DashKit/DashKit.js +1 -1
- package/build/esm/components/DashKitDnDWrapper/DashKitDnDWrapper.js +1 -1
- package/build/esm/components/DashKitView/DashKitView.js +1 -1
- package/build/esm/components/GridItem/GridItem.js +1 -1
- package/build/esm/components/GridLayout/GridLayout.d.ts +1 -1
- package/build/esm/components/GridLayout/GridLayout.js +1 -2
- package/build/esm/components/Item/Item.d.ts +1 -2
- package/build/esm/components/MobileLayout/MobileLayout.d.ts +21 -29
- package/build/esm/components/MobileLayout/MobileLayout.js +46 -59
- package/build/esm/components/OverlayControls/OverlayControls.d.ts +16 -4
- package/build/esm/components/OverlayControls/OverlayControls.js +8 -7
- package/build/esm/context/DashKitContext.d.ts +3 -30
- package/build/esm/context/DashKitContext.js +4 -2
- package/build/esm/hocs/prepareItem.d.ts +1 -2
- package/build/esm/hocs/prepareItem.js +1 -1
- package/build/esm/hocs/withContext.js +17 -20
- package/build/esm/hooks/useDnDItemProps.js +1 -1
- package/build/esm/shared/modules/helpers.d.ts +1 -1
- package/build/esm/shared/modules/helpers.js +1 -1
- package/build/esm/shared/types/state-and-params.d.ts +1 -2
- package/build/esm/typings/config.d.ts +0 -1
- package/package.json +1 -1
- package/build/cjs/context/DashKitDnDContext.d.ts +0 -10
- package/build/cjs/context/DashKitDnDContext.js +0 -6
- package/build/cjs/context/DashkitOverlayControlsContext.d.ts +0 -13
- package/build/cjs/context/DashkitOverlayControlsContext.js +0 -6
- package/build/cjs/context/index.d.ts +0 -3
- package/build/cjs/context/index.js +0 -6
- package/build/esm/context/DashKitDnDContext.d.ts +0 -10
- package/build/esm/context/DashKitDnDContext.js +0 -2
- package/build/esm/context/DashkitOverlayControlsContext.d.ts +0 -13
- package/build/esm/context/DashkitOverlayControlsContext.js +0 -2
- package/build/esm/context/index.d.ts +0 -3
- 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
|
|
6
|
+
const DashKitContext_1 = require("../context/DashKitContext");
|
|
7
7
|
const useDnDItemProps = (item) => {
|
|
8
|
-
const dragContext = react_1.default.useContext(
|
|
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
|
|
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
|
|
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?:
|
|
19
|
+
params?: StringParams | Record<string, StringParams>;
|
|
21
20
|
state?: ItemState;
|
|
22
21
|
};
|
|
23
22
|
export type ItemStateAndParamsChangeOptions = {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import type { Config, ConfigItem, ConfigLayout, GlobalParams, ItemDropProps, ItemsStateAndParams } from '../../shared';
|
|
3
|
-
import
|
|
3
|
+
import { AddNewItemOptions, ContextProps, DashKitGroup, ItemManipulationCallback, MenuItem, Plugin, SetConfigItem, Settings, SettingsProps } from '../../typings';
|
|
4
4
|
import GridLayout from '../GridLayout/GridLayout';
|
|
5
|
-
import
|
|
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<
|
|
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<
|
|
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<
|
|
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
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
needSetDefault:
|
|
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
|
-
|
|
23
|
+
import React from 'react';
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import
|
|
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
|
-
|
|
16
|
+
activeTabId: null,
|
|
17
|
+
indexesOfItemsWithActiveAutoheight: {},
|
|
20
18
|
};
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
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
|
-
|
|
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 =
|
|
60
|
+
this.sortedLayoutItems = getSortedConfigItems(this.context.config, hasOrderId);
|
|
56
61
|
return this.sortedLayoutItems;
|
|
57
62
|
}
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
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 {
|
|
4
|
-
import {
|
|
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:
|
|
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<
|
|
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
|
|
123
|
-
|
|
124
|
-
(
|
|
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,
|
|
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 = (
|
|
200
|
-
const menu = contextMenu
|
|
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
|
-
|
|
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
|
-
|
|
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<
|
|
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
|
|
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
|
|
21
|
+
itemsStateAndParams: ItemsStateAndParams;
|
|
22
22
|
}): string;
|
|
23
23
|
export declare function getMapItemsIgnores({ items, ignores, itemsStateAndParams, isFirstVersion, }: {
|
|
24
24
|
items: (ConfigItem | ConfigItemGroup)[];
|