@gravity-ui/dashkit 8.8.1 → 8.9.1-beta.0

package/build/esm/components/Item/Item.js

@@ -5,9 +5,18 @@ import { cn } from '../../utils/cn';
 import './Item.css';
 const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef, onMountChange, }) => {
     var _a, _b;
-    if (!registerManager.check(type)) {
+    const isRegisteredType = registerManager.check(type);
+    React.useLayoutEffect(() => {
+        if (isRegisteredType && !isPlaceholder) {
+            onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(true);
+            return () => {
+                onMountChange === null || onMountChange === void 0 ? void 0 : onMountChange(false);
+            };
+        }
+    }, []);
+    if (!isRegisteredType) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
@@ -23,5 +32,7 @@ Item.propTypes = {
     registerManager: PropTypes.object,
     type: PropTypes.string,
     isPlaceholder: PropTypes.bool,
+    onMountChange: PropTypes.func,
+    onBeforeLoad: PropTypes.func,
 };
 export default prepareItem(Item);

package/build/esm/hocs/prepareItem.d.ts

@@ -61,7 +61,9 @@ export function prepareItem(Component: any): {
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
         isPlaceholder: PropTypes.Requireable<boolean>;
+        onBeforeLoad: PropTypes.Requireable<(...args: any[]) => any>;
         forwardedPluginRef: PropTypes.Requireable<any>;
+        onMountChange: PropTypes.Requireable<(...args: any[]) => any>;
     };
     contextType: React.Context<any>;
 };

package/build/esm/hocs/prepareItem.js

@@ -11,7 +11,7 @@ export function prepareItem(Component) {
                 };
                 this._currentRenderProps = {};
                 this.getRenderProps = () => {
-                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
+                    const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder, onBeforeLoad, } = this.props;
                     const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                     const { data, defaults, namespace } = item;
                     const rendererProps = {
@@ -20,6 +20,7 @@ export function prepareItem(Component) {
                         params: itemsParams[id],
                         state: itemsState[id],
                         onStateAndParamsChange: this._onStateAndParamsChange,
+                        onBeforeLoad,
                         width,
                         height,
                         id,
@@ -51,10 +52,10 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { item, isPlaceholder } = this.props;
+                const { item, isPlaceholder, forwardedPluginRef, onMountChange } = this.props;
                 const { registerManager } = this.context;
                 const { type } = item;
-                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
+                return (React.createElement(Component, { forwardedPluginRef: forwardedPluginRef, rendererProps: this.getRenderProps(), registerManager: registerManager, type: type, isPlaceholder: isPlaceholder, onMountChange: onMountChange }));
             }
         },
         _a.propTypes = {
@@ -67,7 +68,9 @@ export function prepareItem(Component) {
             height: PropTypes.number,
             transform: PropTypes.string,
             isPlaceholder: PropTypes.bool,
+            onBeforeLoad: PropTypes.func,
             forwardedPluginRef: PropTypes.any,
+            onMountChange: PropTypes.func,
         },
         _a.contextType = DashKitContext,
         _a;

package/build/esm/hocs/withContext.js

@@ -29,7 +29,7 @@ function useMemoStateContext(props) {
             isEqual(groups, props.groups))) {
             props.onChange({ config, itemsStateAndParams, groups });
         }
-    }, [props.config, props.itemsStateAndParams, props.onChange]);
+    }, [props.config, props.groups, props.itemsStateAndParams, props.onChange]);
     // каллбэк вызывающийся при изменение лэйаута сетки, первым аргументом приходит актуальный конфиг лэйаута,
     // т.е. если на текущей сетке есть виджеты, с активированной опцией автовысоты, их параметр "h" будет
     // "подстроенный"; чтобы, для сохранения в сторе "ушли" значения без учёта подстройки (как если бы у этих
@@ -37,7 +37,17 @@ function useMemoStateContext(props) {
     const onLayoutChange = React.useCallback((layout) => {
         const currentInnerLayout = layout.map((item) => {
             if (item.i in originalLayouts.current) {
-                return Object.assign(Object.assign({}, originalLayouts.current[item.i]), { w: item.w, x: item.x, y: item.y });
+                // eslint-disable-next-line no-unused-vars
+                const _a = originalLayouts.current[item.i], { parent } = _a, originalCopy = __rest(_a, ["parent"]);
+                // Updating original if parent has changed and saving copy as original
+                // or leaving default
+                if (item.parent) {
+                    originalCopy.parent = item.parent;
+                }
+                originalCopy.w = item.w;
+                originalCopy.x = item.x;
+                originalCopy.y = item.y;
+                return originalCopy;
             }
             else {
                 return Object.assign({}, item);
@@ -234,16 +244,24 @@ function useMemoStateContext(props) {
             return null;
         }
     }, [dragProps, props.registerManager]);
-    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout) => {
+    const onDropDragOver = React.useCallback((_e, gridProps, groupLayout, sharedItem) => {
         if (temporaryLayout) {
             resetTemporaryLayout();
             return false;
         }
-        if (!dragOverPlugin) {
+        let defaultLayout;
+        if (sharedItem) {
+            const { type, h, w } = sharedItem;
+            const _defaults = props.registerManager.getItem(type);
+            defaultLayout = _defaults ? Object.assign(Object.assign({}, _defaults.defaultLayout), { h, w }) : { h, w };
+        }
+        else if (dragOverPlugin) {
+            defaultLayout = dragOverPlugin.defaultLayout;
+        }
+        else {
             return false;
         }
         let maxW = gridProps.cols;
-        const { defaultLayout } = dragOverPlugin;
         const maxH = Math.min(gridProps.maxRows || Infinity, defaultLayout.maxH || Infinity);
         if (gridProps.compactType === COMPACT_TYPE_HORIZONTAL_NOWRAP) {
             maxW = groupLayout.reduce((memo, item) => memo - item.w, gridProps.cols);
@@ -254,7 +272,7 @@ function useMemoStateContext(props) {
             maxH < defaultLayout.minH) {
             return false;
         }
-        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = dragProps.layout || {};
+        const { h = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.h) || DEFAULT_WIDGET_HEIGHT, w = (defaultLayout === null || defaultLayout === void 0 ? void 0 : defaultLayout.w) || DEFAULT_WIDGET_WIDTH, } = (dragProps === null || dragProps === void 0 ? void 0 : dragProps.layout) || {};
         return {
             h: maxH ? Math.min(h, maxH) : h,
             w: maxW ? Math.min(w, maxW) : w,
@@ -299,6 +317,8 @@ function useMemoStateContext(props) {
         onItemStateAndParamsChange,
         onDrop,
         onDropDragOver,
+        onItemMountChange: props.onItemMountChange,
+        onItemRender: props.onItemRender,
         layoutChange: onLayoutChange,
         getItemsMeta,
         reloadItems,
@@ -326,6 +346,8 @@ function useMemoStateContext(props) {
         onDrop,
         onDropDragOver,
         onLayoutChange,
+        props.onItemMountChange,
+        props.onItemRender,
         getItemsMeta,
         reloadItems,
         memorizeOriginalLayout,

package/build/esm/plugins/Text/Text.d.ts

@@ -16,6 +16,7 @@ export interface PluginTextProps extends PluginWidgetProps {
     data: {
         text: string;
     } & PluginWidgetProps['data'];
+    onBeforeRender: () => () => void;
 }
 interface PluginTextState {
     htmlText: string;

package/build/esm/plugins/Text/Text.js

@@ -77,6 +77,7 @@ export class PluginText extends React.PureComponent {
             return;
         }
         this.setState({ status: LoadStatus.Pending });
+        const onLoadComplete = this.props.onBeforeLoad();
         try {
             let htmlText = '';
             if (this.state.text && this.state.text.trim()) {
@@ -97,6 +98,7 @@ export class PluginText extends React.PureComponent {
             }
             this.setState({ status: LoadStatus.Fail });
         }
+        onLoadComplete();
     }
     get withMarkdown() {
         return typeof this.props.apiHandler === 'function';

package/build/esm/typings/plugin.d.ts

@@ -8,6 +8,7 @@ export interface PluginWidgetProps<T = StringParams> {
     params: T;
     state: ItemState;
     onStateAndParamsChange: (stateAndParams: ItemStateAndParams, options?: ItemStateAndParamsChangeOptions) => void;
+    onBeforeLoad: () => () => void;
     width: number;
     height: number;
     data: ConfigItem['data'];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gravity-ui/dashkit",
-  "version": "8.8.1",
+  "version": "8.9.1-beta.0",
   "description": "Library for rendering dashboard grid layout",
   "license": "MIT",
   "repository": {