@gravity-ui/dashkit 3.0.1

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

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
+const DashKitContext_1 = require("../../context/DashKitContext");
+const OverlayControls_1 = tslib_1.__importDefault(require("../OverlayControls/OverlayControls"));
+const b = (0, bem_cn_lite_1.default)('dashkit-grid-item');
+class GridItem extends react_1.default.PureComponent {
+    renderOverlay() {
+        const { editMode, overlayControls } = this.context;
+        if (!editMode || this.props.item.data._editActive) {
+            return null;
+        }
+        const { item } = this.props;
+        const controls = overlayControls && overlayControls[item.type];
+        return (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: b('overlay') }),
+            react_1.default.createElement(OverlayControls_1.default, { configItem: item, items: controls })));
+    }
+    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, withCustomHandle, } = this.props;
+        const { editMode } = this.context;
+        const width = Number.parseInt(style.width, 10);
+        const height = Number.parseInt(style.height, 10);
+        const transform = style.transform;
+        const preparedClassName = editMode
+            ? className
+            : className.replace('react-resizable', '').replace('react-draggable', '');
+        const preparedChildren = editMode ? children : null;
+        const reactGridLayoutProps = editMode
+            ? { onMouseDown, onMouseUp, onTouchEnd, onTouchStart }
+            : {};
+        const { _editActive } = this.props.item.data;
+        return (react_1.default.createElement("div", Object.assign({ className: b({
+                'is-dragging': isDragging,
+                'with-custom-handle': withCustomHandle,
+            }, preparedClassName), "data-qa": "dashkit-grid-item", style: style }, reactGridLayoutProps),
+            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 })),
+            !noOverlay && this.renderOverlay(),
+            preparedChildren));
+    }
+}
+GridItem.propTypes = {
+    adjustWidgetLayout: prop_types_1.default.func.isRequired,
+    id: prop_types_1.default.string,
+    item: prop_types_1.default.object,
+    isDragging: prop_types_1.default.bool,
+    layout: prop_types_1.default.array,
+    forwardedPluginRef: prop_types_1.default.any,
+    // from react-grid-layout:
+    children: prop_types_1.default.node,
+    className: prop_types_1.default.string,
+    style: prop_types_1.default.object,
+    noOverlay: prop_types_1.default.bool,
+    withCustomHandle: prop_types_1.default.bool,
+    onMouseDown: prop_types_1.default.func,
+    onMouseUp: prop_types_1.default.func,
+    onTouchEnd: prop_types_1.default.func,
+    onTouchStart: prop_types_1.default.func,
+};
+GridItem.contextType = DashKitContext_1.DashKitContext;
+exports.default = react_1.default.forwardRef((props, ref) => {
+    return react_1.default.createElement(GridItem, Object.assign({}, props, { forwardedPluginRef: ref }));
+});

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

@@ -0,0 +1,25 @@
+export default class GridLayout extends React.PureComponent<any, any, any> {
+    static contextType: React.Context<any>;
+    constructor(props: any, context: any);
+    pluginsRefs: any[];
+    state: {
+        isDragging: boolean;
+        isPageHidden: boolean;
+    };
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    componentWillUnmount(): void;
+    _timeout: any;
+    onVisibilityChange: () => void;
+    adjustWidgetLayout: ({ widgetId, needSetDefault, adjustedWidgetLayout }: {
+        widgetId: any;
+        needSetDefault: any;
+        adjustedWidgetLayout: any;
+    }) => void;
+    getItemsMeta: () => any;
+    reloadItems(): void;
+    _onStart: () => void;
+    _onStop: (newLayout: any) => void;
+    render(): JSX.Element;
+}
+import React from "react";

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

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_grid_layout_1 = tslib_1.__importStar(require("react-grid-layout"));
+const GridItem_1 = tslib_1.__importDefault(require("../GridItem/GridItem"));
+const DashKitContext_1 = require("../../context/DashKitContext");
+const Layout = (0, react_grid_layout_1.WidthProvider)(react_grid_layout_1.default); // eslint-disable-line new-cap
+class GridLayout extends react_1.default.PureComponent {
+    constructor(props, context) {
+        super(props, context);
+        this.onVisibilityChange = () => {
+            this.setState({
+                isPageHidden: document.hidden,
+            });
+        };
+        this.adjustWidgetLayout = ({ widgetId, needSetDefault, adjustedWidgetLayout }) => {
+            const { getLayout, memorizeOriginalLayout, revertToOriginalLayout } = this.context;
+            if (needSetDefault) {
+                revertToOriginalLayout(widgetId);
+                return;
+            }
+            if (!adjustedWidgetLayout) {
+                return;
+            }
+            const layout = getLayout();
+            const correspondedLayoutItemIndex = layout.findIndex((layoutItem) => layoutItem.i === widgetId);
+            memorizeOriginalLayout(widgetId, Object.assign({}, layout[correspondedLayoutItemIndex]), adjustedWidgetLayout);
+        };
+        this.getItemsMeta = () => {
+            const { getItemsMeta } = this.context;
+            return getItemsMeta(this.pluginsRefs);
+        };
+        this._onStart = () => {
+            this.setState({ isDragging: true });
+        };
+        this._onStop = (newLayout) => {
+            const { layoutChange } = this.context;
+            layoutChange(newLayout);
+            this.setState({ isDragging: false });
+        };
+        this.pluginsRefs = [];
+        this.state = {
+            isDragging: false,
+            isPageHidden: false,
+        };
+    }
+    componentDidMount() {
+        this.reloadItems();
+        document.addEventListener('visibilitychange', this.onVisibilityChange);
+    }
+    componentDidUpdate() {
+        clearTimeout(this._timeout);
+        this.reloadItems();
+    }
+    componentWillUnmount() {
+        clearTimeout(this._timeout);
+        document.removeEventListener('visibilitychange', this.onVisibilityChange);
+    }
+    reloadItems() {
+        const { editMode, settings: { autoupdateInterval, silentLoading } = {}, reloadItems, } = this.context;
+        const { isPageHidden } = this.state;
+        const autoupdateIntervalNumber = Number(autoupdateInterval);
+        if (autoupdateIntervalNumber) {
+            this._timeout = setTimeout(() => {
+                if (!isPageHidden) {
+                    if (!editMode) {
+                        reloadItems(this.pluginsRefs, { silentLoading, noVeil: true });
+                    }
+                    this.reloadItems();
+                }
+            }, autoupdateIntervalNumber * 1000);
+        }
+    }
+    render() {
+        const { getLayout, config, registerManager, editMode, noOverlay, draggableHandleClassName } = this.context;
+        this.pluginsRefs.length = config.items.length;
+        const layout = getLayout();
+        return (react_1.default.createElement(Layout, Object.assign({}, registerManager.gridLayout, { layout: layout, isDraggable: editMode, isResizable: editMode, onDragStart: this._onStart, onDragStop: this._onStop, onResizeStart: this._onStart, onResizeStop: this._onStop }, (draggableHandleClassName
+            ? { draggableHandle: `.${draggableHandleClassName}` }
+            : null)), config.items.map((item, i) => {
+            return (react_1.default.createElement(GridItem_1.default, { ref: (pluginRef) => {
+                    this.pluginsRefs[i] = pluginRef;
+                }, key: item.id, id: item.id, item: item, layout: layout, adjustWidgetLayout: this.adjustWidgetLayout, isDragging: this.state.isDragging, noOverlay: noOverlay, withCustomHandle: Boolean(draggableHandleClassName) }));
+        })));
+    }
+}
+exports.default = GridLayout;
+GridLayout.contextType = DashKitContext_1.DashKitContext;

package/build/cjs/components/Item/Item.css

@@ -0,0 +1,19 @@
+.dashkit-item__renderer {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.dashkit-item__loader {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: dashed 1px rgba(0, 0, 0, 0.1);
+  z-index: 3;
+}

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

@@ -0,0 +1,67 @@
+declare const _default: {
+    new (props: any): {
+        shouldComponentUpdate(nextProps: any): boolean;
+        _onStateAndParamsChange: (stateAndParams: any) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    new (props: any, context: any): {
+        shouldComponentUpdate(nextProps: any): boolean;
+        _onStateAndParamsChange: (stateAndParams: any) => void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends string | number | symbol>(state: any, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<any> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<any>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<any>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<any>, nextContext: any): void;
+    };
+    propTypes: {
+        adjustWidgetLayout: PropTypes.Validator<(...args: any[]) => any>;
+        layout: PropTypes.Requireable<any[]>;
+        id: PropTypes.Requireable<string>;
+        item: PropTypes.Requireable<object>;
+        shouldItemUpdate: PropTypes.Requireable<boolean>;
+        width: PropTypes.Requireable<number>;
+        height: PropTypes.Requireable<number>;
+        transform: PropTypes.Requireable<string>;
+        forwardedPluginRef: PropTypes.Requireable<any>;
+    };
+    contextType: React.Context<any>;
+};
+export default _default;

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

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+const prepareItem_1 = require("../../hocs/prepareItem");
+const b = (0, bem_cn_lite_1.default)('dashkit-item');
+// TODO: getDerivedStateFromError и заглушка с ошибкой
+const Item = ({ registerManager, rendererProps, type, forwardedPluginRef }) => {
+    if (!registerManager.check(type)) {
+        console.warn(`type [${type}] не зарегистрирован`);
+        return null;
+    }
+    return (react_1.default.createElement("div", { className: b('renderer') }, registerManager.getItem(type).renderer(rendererProps, forwardedPluginRef)));
+};
+Item.propTypes = {
+    forwardedPluginRef: prop_types_1.default.any,
+    rendererProps: prop_types_1.default.object,
+    registerManager: prop_types_1.default.object,
+    type: prop_types_1.default.string,
+};
+exports.default = (0, prepareItem_1.prepareItem)(Item);

package/build/cjs/components/MobileLayout/MobileLayout.css

@@ -0,0 +1,10 @@
+.dashkit-mobile-layout__item {
+  margin-bottom: 20px;
+  position: relative;
+}
+.dashkit-mobile-layout .dashkit-item__renderer {
+  overflow-y: auto;
+  border-radius: 3px;
+  position: static;
+  user-select: none;
+}

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

@@ -0,0 +1,16 @@
+export default class MobileLayout extends React.PureComponent<any, any, any> {
+    static contextType: React.Context<any>;
+    constructor(props: any);
+    constructor(props: any, context: any);
+    pluginsRefs: any[];
+    state: {
+        activeTabId: null;
+        indexesOfItemsWithActiveAutoheight: {};
+    };
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    adjustWidgetLayout: (index: any, { needSetDefault }: {
+        needSetDefault: any;
+    }) => void;
+    render(): JSX.Element;
+}
+import React from "react";

package/build/cjs/components/MobileLayout/MobileLayout.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
+const Item_1 = tslib_1.__importDefault(require("../Item/Item"));
+const DashKitContext_1 = require("../../context/DashKitContext");
+const helpers_1 = require("./helpers");
+const b = (0, bem_cn_lite_1.default)('dashkit-mobile-layout');
+class MobileLayout extends react_1.default.PureComponent {
+    constructor() {
+        super(...arguments);
+        this.pluginsRefs = [];
+        this.state = {
+            activeTabId: null,
+            indexesOfItemsWithActiveAutoheight: {},
+        };
+        this.adjustWidgetLayout = (index, { needSetDefault }) => {
+            if (needSetDefault) {
+                const indexesOfItemsWithActiveAutoheight = Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight);
+                delete indexesOfItemsWithActiveAutoheight[index];
+                this.setState({ indexesOfItemsWithActiveAutoheight });
+            }
+            else {
+                this.setState({
+                    indexesOfItemsWithActiveAutoheight: Object.assign({}, this.state.indexesOfItemsWithActiveAutoheight, { [index]: true }),
+                });
+            }
+        };
+    }
+    componentDidUpdate(prevProps, prevState) {
+        if (prevState.activeTabId !== this.context.config.id) {
+            this.setState({
+                activeTabId: this.context.config.id,
+                indexesOfItemsWithActiveAutoheight: {},
+            });
+        }
+    }
+    render() {
+        const { config, getLayout } = this.context;
+        this.pluginsRefs.length = config.items.length;
+        const hasOrderId = Boolean(config.items.find((item) => item.orderId));
+        const sortedItems = (0, helpers_1.getSortedConfigItems)(config, hasOrderId);
+        return (react_1.default.createElement("div", { className: b() }, sortedItems.map((item, index) => {
+            const isItemWithActiveAutoheight = index in this.state.indexesOfItemsWithActiveAutoheight;
+            return (react_1.default.createElement("div", { className: b('item', { autoheight: isItemWithActiveAutoheight }), key: item.id },
+                react_1.default.createElement(Item_1.default, { id: item.id, item: item, layout: getLayout(), shouldItemUpdate: false, adjustWidgetLayout: this.adjustWidgetLayout.bind(this, index), forwardedPluginRef: (pluginRef) => {
+                        this.pluginsRefs[index] = pluginRef;
+                    } })));
+        })));
+    }
+}
+exports.default = MobileLayout;
+MobileLayout.contextType = DashKitContext_1.DashKitContext;

package/build/cjs/components/MobileLayout/helpers.d.ts

@@ -0,0 +1,3 @@
+import { ConfigItem, ConfigLayout } from '../../shared';
+import { DashKitProps } from '../DashKit';
+export declare const getSortedConfigItems: (config: DashKitProps['config'], hasOrderId: boolean) => (ConfigItem & ConfigLayout)[];

package/build/cjs/components/MobileLayout/helpers.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSortedConfigItems = void 0;
+const sortByOrderComparator = (prev, next, fieldName) => {
+    const prevOrderId = prev[fieldName];
+    const nextOrderId = next[fieldName];
+    if (prevOrderId === undefined) {
+        return 1;
+    }
+    if (nextOrderId === undefined) {
+        return -1;
+    }
+    if (prevOrderId > nextOrderId) {
+        return 1;
+    }
+    else if (prevOrderId < nextOrderId) {
+        return -1;
+    }
+    return 0;
+};
+const getWidgetsSortComparator = (hasOrderId) => {
+    return hasOrderId
+        ? (prev, next) => sortByOrderComparator(prev, next, 'orderId')
+        : (prev, next) => prev.y === next.y ? prev.x - next.x : prev.y - next.y;
+};
+const getSortedConfigItems = (config, hasOrderId) => {
+    const sortComparator = getWidgetsSortComparator(hasOrderId);
+    return config.items
+        .map((item, index) => Object.assign({}, item, config.layout[index]))
+        .sort(sortComparator);
+};
+exports.getSortedConfigItems = getSortedConfigItems;

package/build/cjs/components/OverlayControls/OverlayControls.css

@@ -0,0 +1,28 @@
+.dashkit-overlay-controls {
+  position: absolute;
+  display: flex;
+}
+.dashkit-overlay-controls__default-controls {
+  display: flex;
+  background: var(--yc-color-base-generic-ultralight);
+  border-radius: var(--yc-border-radius-m);
+}
+.dashkit-overlay-controls_position_top_right {
+  top: 7px;
+  right: 7px;
+}
+.dashkit-overlay-controls_position_top_left {
+  top: 7px;
+  left: 7px;
+}
+.dashkit-overlay-controls_position_bottom_right {
+  bottom: 7px;
+  right: 7px;
+}
+.dashkit-overlay-controls_position_bottom_left {
+  bottom: 7px;
+  left: 7px;
+}
+.dashkit-overlay-controls__item_danger {
+  color: var(--yc-color-text-danger);
+}

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { ButtonView, ButtonSize, IconProps, MenuItemProps } from '@gravity-ui/uikit';
+import { ConfigItem, PluginBase } from '../../shared';
+export declare enum OverlayControlsPosition {
+    TopRight = "top_right",
+    TopLeft = "top_left",
+    BottomRight = "bottom_right",
+    BottomLeft = "bottom_left"
+}
+export interface OverlayControlItem {
+    title?: string;
+    icon?: IconProps['data'];
+    iconSize?: number | string;
+    handler?: (item: ConfigItem) => void;
+    allWidgetsControls?: boolean;
+    excludeWidgetsTypes?: Array<PluginBase['type']>;
+    id?: string;
+}
+export interface OverlayCustomControlItem {
+    id: string;
+    title?: string;
+    icon?: MenuItemProps['icon'];
+    iconSize?: number | string;
+    handler?: (item: ConfigItem) => void;
+    visible?: (item: ConfigItem) => boolean;
+    className?: string;
+}
+interface OverlayControlsDefaultProps {
+    position: OverlayControlsPosition;
+    view: ButtonView;
+    size: ButtonSize;
+}
+interface OverlayControlsProps extends OverlayControlsDefaultProps {
+    configItem: ConfigItem;
+    items?: OverlayControlItem[];
+}
+declare class OverlayControls extends React.Component<OverlayControlsProps> {
+    static contextType: React.Context<any>;
+    static defaultProps: OverlayControlsDefaultProps;
+    render(): JSX.Element;
+    private renderControlsItem;
+    private getDropDownMenuItemConfig;
+    private renderControls;
+    private renderMenu;
+    private isDefaultMenu;
+    private renderDropdownMenu;
+    private getCustomLeftOverlayControls;
+    private onCopyItem;
+    private onEditItem;
+    private onRemoveItem;
+    private getControlItemPinStyle;
+    private getCustomControlsWithWidgets;
+}
+export default OverlayControls;