@gravity-ui/dashkit 8.1.0-beta.0 → 8.1.0-beta.1

package/build/cjs/components/ActionPanel/types.d.ts

@@ -6,6 +6,7 @@ export type ActionPanelItem = {
     onClick?: () => void;
     className?: string;
     qa?: string;
+    pluginType?: string;
 };
 export type ActionPanelProps = {
     items: ActionPanelItem[];

package/build/cjs/components/GridItem/GridItem.js

@@ -72,7 +72,7 @@ class GridItem extends react_1.default.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -97,7 +97,7 @@ class GridItem extends react_1.default.PureComponent {
             }
             : {})),
             react_1.default.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+                react_1.default.createElement(Item_1.default, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -111,6 +111,7 @@ GridItem.propTypes = {
     overlayControls: prop_types_1.default.object,
     forwardedRef: prop_types_1.default.any,
     forwardedPluginRef: prop_types_1.default.any,
+    isPlaceholder: prop_types_1.default.bool,
     // from react-grid-layout:
     children: prop_types_1.default.node,
     className: prop_types_1.default.string,

package/build/cjs/components/GridLayout/GridLayout.d.ts

@@ -23,6 +23,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onStop: (newLayout: any) => void;
     _onDropDragOver: (e: any) => any;
     _onDrop: (layout: any, item: any, e: any) => false | undefined;
+    renderTemporaryPlaceholder(): JSX.Element | null;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/cjs/components/GridLayout/GridLayout.js

@@ -134,6 +134,15 @@ class GridLayout extends react_1.default.PureComponent {
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
     }
+    renderTemporaryPlaceholder() {
+        const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
+        if (!temporaryLayout) {
+            return null;
+        }
+        const id = constants_1.TEMPORARY_ITEM_ID;
+        const type = dragOverPlugin.type;
+        return (react_1.default.createElement(GridItem_1.default, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+    }
     render() {
         const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
@@ -145,11 +154,13 @@ class GridLayout extends react_1.default.PureComponent {
                 onDropDragOver: this._onDropDragOver,
                 onDrop: this._onDrop,
             }
-            : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
-            return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
-                    this.pluginsRefs[i] = pluginRef;
-                }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
-        })));
+            : null), { draggableCancel: `.${constants_1.OVERLAY_CONTROLS_CLASS_NAME}` }),
+            config.items.map((item, i) => {
+                return (react_1.default.createElement(GridItem_1.default, { forwardedPluginRef: (pluginRef) => {
+                        this.pluginsRefs[i] = pluginRef;
+                    }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+            }),
+            this.renderTemporaryPlaceholder()));
     }
 }
 GridLayout.contextType = DashKitContext_1.DashKitContext;

package/build/cjs/components/Item/Item.d.ts

@@ -56,6 +56,7 @@ declare const _default: {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/cjs/components/Item/Item.js

@@ -7,11 +7,16 @@ const prepareItem_1 = require("../../hocs/prepareItem");
 const cn_1 = require("../../utils/cn");
 const b = (0, cn_1.cn)('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+    var _a, _b;
     if (!registerManager.check(type)) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
+    if (isPlaceholder) {
+        return (react_1.default.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+    }
     return (react_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
@@ -19,5 +24,6 @@ Item.propTypes = {
     rendererProps: prop_types_1.default.object,
     registerManager: prop_types_1.default.object,
     type: prop_types_1.default.string,
+    isPlaceholder: prop_types_1.default.bool,
 };
 exports.default = (0, prepareItem_1.prepareItem)(Item);

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

@@ -56,6 +56,7 @@ export function prepareItem(Component: any): {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/cjs/hocs/prepareItem.js

@@ -26,7 +26,7 @@ function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout } = this.props;
+                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                 const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                 const { type, data, defaults, namespace } = item;
                 const rendererProps = {
@@ -45,8 +45,9 @@ function prepareItem(Component) {
                     layout,
                     gridLayout: registerManager.gridLayout,
                     adjustWidgetLayout,
+                    isPlaceholder,
                 };
-                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type }));
+                return (react_1.default.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
             }
         },
         _a.propTypes = {
@@ -58,6 +59,7 @@ function prepareItem(Component) {
             width: prop_types_1.default.number,
             height: prop_types_1.default.number,
             transform: prop_types_1.default.string,
+            isPlaceholder: prop_types_1.default.bool,
             forwardedPluginRef: prop_types_1.default.any,
         },
         _a.contextType = DashKitContext_1.DashKitContext,

package/build/cjs/plugins/Text/Text.js

@@ -117,8 +117,5 @@ const plugin = {
     renderer(props, forwardedRef) {
         return react_1.default.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
     },
-    placeholderRenderer(_, forwardedRef) {
-        return react_1.default.createElement("div", { ref: forwardedRef }, "Text placeholder");
-    },
 };
 exports.default = plugin;

package/build/esm/components/ActionPanel/types.d.ts

@@ -6,6 +6,7 @@ export type ActionPanelItem = {
     onClick?: () => void;
     className?: string;
     qa?: string;
+    pluginType?: string;
 };
 export type ActionPanelProps = {
     items: ActionPanelItem[];

package/build/esm/components/GridItem/GridItem.js

@@ -70,7 +70,7 @@ class GridItem extends React.PureComponent {
     render() {
         // из-за бага, что Grid Items unmounts при изменении static, isDraggable, isResaizable
         // https://github.com/STRML/react-grid-layout/issues/721
-        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, } = this.props;
+        const { style, onMouseDown, onMouseUp, onTouchEnd, onTouchStart, children, className, isDragging, noOverlay, focusable, withCustomHandle, isPlaceholder, } = this.props;
         const { editMode } = this.context;
         const width = Number.parseInt(style.width, 10);
         const height = Number.parseInt(style.height, 10);
@@ -95,7 +95,7 @@ class GridItem extends React.PureComponent {
             }
             : {})),
             React.createElement("div", { className: b('item', { editMode: editMode && !_editActive && !noOverlay }) },
-                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
+                React.createElement(Item, { id: this.props.id, item: this.props.item, shouldItemUpdate: !isDragging, width: width, height: height, transform: transform, isPlaceholder: isPlaceholder, adjustWidgetLayout: this.props.adjustWidgetLayout, layout: this.props.layout, forwardedPluginRef: this.props.forwardedPluginRef })),
             !noOverlay && this.renderOverlay(),
             preparedChildren));
     }
@@ -109,6 +109,7 @@ GridItem.propTypes = {
     overlayControls: PropTypes.object,
     forwardedRef: PropTypes.any,
     forwardedPluginRef: PropTypes.any,
+    isPlaceholder: PropTypes.bool,
     // from react-grid-layout:
     children: PropTypes.node,
     className: PropTypes.string,

package/build/esm/components/GridLayout/GridLayout.d.ts

@@ -23,6 +23,7 @@ export default class GridLayout extends React.PureComponent<any, any, any> {
     _onStop: (newLayout: any) => void;
     _onDropDragOver: (e: any) => any;
     _onDrop: (layout: any, item: any, e: any) => false | undefined;
+    renderTemporaryPlaceholder(): JSX.Element | null;
     render(): JSX.Element;
 }
 import React from 'react';

package/build/esm/components/GridLayout/GridLayout.js

@@ -131,6 +131,15 @@ class GridLayout extends React.PureComponent {
             this._timeout = setTimeout(() => this.reloadItems(), reloadIntervalRemains <= 0 ? autoupdateIntervalMs : reloadIntervalRemains);
         }
     }
+    renderTemporaryPlaceholder() {
+        const { temporaryLayout, dragOverPlugin, noOverlay, draggableHandleClassName } = this.context;
+        if (!temporaryLayout) {
+            return null;
+        }
+        const id = TEMPORARY_ITEM_ID;
+        const type = dragOverPlugin.type;
+        return (React.createElement(GridItem, { key: id, id: id, item: { id, type, data: {} }, layout: temporaryLayout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, isPlaceholder: true, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+    }
     render() {
         const { layout, temporaryLayout, config, registerManager, editMode, noOverlay, focusable, draggableHandleClassName, outerDnDEnable, } = this.context;
         this.pluginsRefs.length = config.items.length;
@@ -142,11 +151,13 @@ class GridLayout extends React.PureComponent {
                 onDropDragOver: this._onDropDragOver,
                 onDrop: this._onDrop,
             }
-            : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }), config.items.map((item, i) => {
-            return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
-                    this.pluginsRefs[i] = pluginRef;
-                }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
-        })));
+            : null), { draggableCancel: `.${OVERLAY_CONTROLS_CLASS_NAME}` }),
+            config.items.map((item, i) => {
+                return (React.createElement(GridItem, { forwardedPluginRef: (pluginRef) => {
+                        this.pluginsRefs[i] = pluginRef;
+                    }, key: item.id, id: item.id, item: item, layout: temporaryLayout || layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, focusable: focusable, withCustomHandle: Boolean(draggableHandleClassName), overlayControls: this.props.overlayControls }));
+            }),
+            this.renderTemporaryPlaceholder()));
     }
 }
 GridLayout.contextType = DashKitContext;

package/build/esm/components/Item/Item.d.ts

@@ -56,6 +56,7 @@ declare const _default: {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

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

@@ -5,11 +5,16 @@ import { cn } from '../../utils/cn';
 import './Item.css';
 const b = cn('dashkit-item');
 // TODO: getDerivedStateFromError и заглушка с ошибкой
-const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
+const Item = ({ registerManager, rendererProps, type, isPlaceholder, forwardedPluginRef }) => {
+    var _a, _b;
     if (!registerManager.check(type)) {
         console.warn(`type [${type}] не зарегистрирован`);
         return null;
     }
+    if (isPlaceholder) {
+        return (React.createElement("div", { className: b('placeholder') }, ((_b = (_a = registerManager
+            .getItem(type)).placeholderRenderer) === null || _b === void 0 ? void 0 : _b.call(_a, rendererProps, forwardedPluginRef)) || null));
+    }
     return (React.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
 };
 Item.propTypes = {
@@ -17,5 +22,6 @@ Item.propTypes = {
     rendererProps: PropTypes.object,
     registerManager: PropTypes.object,
     type: PropTypes.string,
+    isPlaceholder: PropTypes.bool,
 };
 export default prepareItem(Item);

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

@@ -56,6 +56,7 @@ export function prepareItem(Component: any): {
         width: PropTypes.Requireable<number>;
         height: PropTypes.Requireable<number>;
         transform: PropTypes.Requireable<string>;
+        isPlaceholder: PropTypes.Requireable<boolean>;
         forwardedPluginRef: PropTypes.Requireable<any>;
     };
     contextType: React.Context<any>;

package/build/esm/hocs/prepareItem.js

@@ -22,7 +22,7 @@ export function prepareItem(Component) {
                 return true;
             }
             render() {
-                const { id, width, height, item, adjustWidgetLayout, layout } = this.props;
+                const { id, width, height, item, adjustWidgetLayout, layout, isPlaceholder } = this.props;
                 const { itemsState, itemsParams, registerManager, settings, context, editMode } = this.context;
                 const { type, data, defaults, namespace } = item;
                 const rendererProps = {
@@ -41,8 +41,9 @@ export function prepareItem(Component) {
                     layout,
                     gridLayout: registerManager.gridLayout,
                     adjustWidgetLayout,
+                    isPlaceholder,
                 };
-                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type }));
+                return (React.createElement(Component, { forwardedPluginRef: this.props.forwardedPluginRef, rendererProps: rendererProps, registerManager: registerManager, type: type, isPlaceholder: isPlaceholder }));
             }
         },
         _a.propTypes = {
@@ -54,6 +55,7 @@ export function prepareItem(Component) {
             width: PropTypes.number,
             height: PropTypes.number,
             transform: PropTypes.string,
+            isPlaceholder: PropTypes.bool,
             forwardedPluginRef: PropTypes.any,
         },
         _a.contextType = DashKitContext,

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

@@ -113,8 +113,5 @@ const plugin = {
     renderer(props, forwardedRef) {
         return React.createElement(PluginText, Object.assign({}, props, { apiHandler: plugin._apiHandler, ref: forwardedRef }));
     },
-    placeholderRenderer(_, forwardedRef) {
-        return React.createElement("div", { ref: forwardedRef }, "Text placeholder");
-    },
 };
 export default plugin;

package/package.json

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