@salutejs/plasma-new-hope 0.338.0-canary.2280.18485554017.0 → 0.338.0-canary.2280.18496633776.0

package/emotion/es/components/_Resizable/Resizable.js

@@ -0,0 +1,69 @@
+import React, { useRef } from "react";
+import { Resizable as ReResizable } from "re-resizable";
+import { getHandleStyles, getRatioBasedOnPlacement, getResizeDirections } from "./utils";
+import { classes } from "./Resizable.tokens";
+import { IconResizeDiagonalStyled } from "./Resizable.styles";
+export var Resizable = function(param) {
+    var children = param.children, outerResizable = param.resizable, placement = param.placement, onResizeStart = param.onResizeStart, onResizeEnd = param.onResizeEnd;
+    var _resizable_hiddenIcons, _resizable_icons, _resizable_hiddenIcons1, _resizable_icons1, _resizable_hiddenIcons2, _resizable_icons2, _resizable_hiddenIcons3, _resizable_icons3;
+    var resizableContainer = useRef(null);
+    var resizable = typeof outerResizable === 'boolean' ? {
+        disabled: !outerResizable
+    } : outerResizable;
+    var handleResizeStart = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+            if (onResizeStart) {
+                onResizeStart(resizableContainer);
+            }
+        }
+    };
+    var handleResizeEnd = function() {
+        if ((resizableContainer === null || resizableContainer === void 0 ? void 0 : resizableContainer.current) && resizableContainer.current.resizable) {
+            resizableContainer.current.resizable.classList.toggle(classes.resizableContainerNoSelect);
+            if (onResizeEnd) {
+                onResizeEnd(resizableContainer);
+            }
+        }
+    };
+    if (!resizable || resizable.disabled) {
+        return /*#__PURE__*/ React.createElement(React.Fragment, null, children);
+    }
+    return /*#__PURE__*/ React.createElement(ReResizable, {
+        ref: resizableContainer,
+        enable: resizable && !resizable.disabled ? getResizeDirections(resizable.directions) : false,
+        resizeRatio: getRatioBasedOnPlacement(placement),
+        defaultSize: resizable === null || resizable === void 0 ? void 0 : resizable.defaultSize,
+        minWidth: resizable === null || resizable === void 0 ? void 0 : resizable.minWidth,
+        minHeight: resizable === null || resizable === void 0 ? void 0 : resizable.minHeight,
+        maxWidth: resizable === null || resizable === void 0 ? void 0 : resizable.maxWidth,
+        maxHeight: resizable === null || resizable === void 0 ? void 0 : resizable.maxHeight,
+        onResizeStart: handleResizeStart,
+        onResizeStop: handleResizeEnd,
+        handleComponent: {
+            topRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons = resizable.hiddenIcons) === null || _resizable_hiddenIcons === void 0 ? void 0 : _resizable_hiddenIcons.includes('top-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons = resizable.icons) === null || _resizable_icons === void 0 ? void 0 : _resizable_icons.topRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableTopRightIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            bottomRight: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons1 = resizable.hiddenIcons) === null || _resizable_hiddenIcons1 === void 0 ? void 0 : _resizable_hiddenIcons1.includes('bottom-right')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons1 = resizable.icons) === null || _resizable_icons1 === void 0 ? void 0 : _resizable_icons1.bottomRight) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableBottomRightIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            bottomLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons2 = resizable.hiddenIcons) === null || _resizable_hiddenIcons2 === void 0 ? void 0 : _resizable_hiddenIcons2.includes('bottom-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons2 = resizable.icons) === null || _resizable_icons2 === void 0 ? void 0 : _resizable_icons2.bottomLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableBottomLeftIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            })),
+            topLeft: (resizable === null || resizable === void 0 ? void 0 : (_resizable_hiddenIcons3 = resizable.hiddenIcons) === null || _resizable_hiddenIcons3 === void 0 ? void 0 : _resizable_hiddenIcons3.includes('top-left')) ? undefined : /*#__PURE__*/ React.createElement(React.Fragment, null, (resizable === null || resizable === void 0 ? void 0 : (_resizable_icons3 = resizable.icons) === null || _resizable_icons3 === void 0 ? void 0 : _resizable_icons3.topLeft) || /*#__PURE__*/ React.createElement(IconResizeDiagonalStyled, {
+                className: classes.resizableTopLeftIcon,
+                color: "inherit",
+                size: resizable === null || resizable === void 0 ? void 0 : resizable.iconSize
+            }))
+        },
+        className: classes.resizableContainer,
+        handleStyles: getHandleStyles(),
+        handleWrapperClass: classes.resizableHandleWrapper
+    }, children);
+};

package/emotion/es/components/_Resizable/Resizable.styles.js

@@ -0,0 +1,7 @@
+import styled from "@emotion/styled";
+import { IconResizeDiagonal } from "../_Icon";
+import { classes } from "./Resizable.tokens";
+export var IconResizeDiagonalStyled = /*#__PURE__*/ styled(IconResizeDiagonal, {
+    target: "e1q396sv0",
+    label: "IconResizeDiagonalStyled"
+})("color:var(--text-secondary);&:hover{color:var(--text-secondary-hover);}&:active{color:var(--text-secondary-active);}&.", classes.resizableTopRightIcon, "{transform:rotate(-90deg);}&.", classes.resizableBottomRightIcon, "{transform:rotate(0);}&.", classes.resizableBottomLeftIcon, "{transform:rotate(90deg);}&.", classes.resizableTopLeftIcon, "{transform:rotate(180deg);}", "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3JjLWVtb3Rpb24vY29tcG9uZW50cy9fUmVzaXphYmxlL1Jlc2l6YWJsZS5zdHlsZXMudHMiLCJzb3VyY2VzIjpbInNyYy1lbW90aW9uL2NvbXBvbmVudHMvX1Jlc2l6YWJsZS9SZXNpemFibGUuc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IEljb25SZXNpemVEaWFnb25hbCB9IGZyb20gJ3NyYy9jb21wb25lbnRzL19JY29uJztcblxuaW1wb3J0IHsgY2xhc3NlcyB9IGZyb20gJy4vUmVzaXphYmxlLnRva2Vucyc7XG5cbmV4cG9ydCBjb25zdCBJY29uUmVzaXplRGlhZ29uYWxTdHlsZWQgPSBzdHlsZWQoSWNvblJlc2l6ZURpYWdvbmFsKWBcbiAgICBjb2xvcjogdmFyKC0tdGV4dC1zZWNvbmRhcnkpO1xuXG4gICAgJjpob3ZlciB7XG4gICAgICAgIGNvbG9yOiB2YXIoLS10ZXh0LXNlY29uZGFyeS1ob3Zlcik7XG4gICAgfVxuXG4gICAgJjphY3RpdmUge1xuICAgICAgICBjb2xvcjogdmFyKC0tdGV4dC1zZWNvbmRhcnktYWN0aXZlKTtcbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy5yZXNpemFibGVUb3BSaWdodEljb259IHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoLTkwZGVnKTtcbiAgICB9XG5cbiAgICAmLiR7Y2xhc3Nlcy5yZXNpemFibGVCb3R0b21SaWdodEljb259IHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoMCk7XG4gICAgfVxuXG4gICAgJi4ke2NsYXNzZXMucmVzaXphYmxlQm90dG9tTGVmdEljb259IHtcbiAgICAgICAgdHJhbnNmb3JtOiByb3RhdGUoOTBkZWcpO1xuICAgIH1cblxuICAgICYuJHtjbGFzc2VzLnJlc2l6YWJsZVRvcExlZnRJY29ufSB7XG4gICAgICAgIHRyYW5zZm9ybTogcm90YXRlKDE4MGRlZyk7XG4gICAgfVxuYDtcbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFLd0MifQ== */");

package/emotion/es/components/_Resizable/Resizable.tokens.js

@@ -0,0 +1,9 @@
+export var classes = {
+    resizableContainer: 'resizable-container',
+    resizableTopRightIcon: 'resizable-top-right-icon',
+    resizableBottomRightIcon: 'resizable-bottom-right-icon',
+    resizableBottomLeftIcon: 'resizable-bottom-left-icon',
+    resizableTopLeftIcon: 'resizable-top-left-icon',
+    resizableHandleWrapper: 'resizable-handle-wrapper',
+    resizableContainerNoSelect: 'resizable-container-no-select'
+};

package/emotion/es/components/_Resizable/index.js

@@ -0,0 +1,2 @@
+export * from "./Resizable.types";
+export * from "./Resizable";

package/emotion/es/components/_Resizable/utils/getHandleStyles.js

@@ -0,0 +1,58 @@
+// Объект стилей для handler'а, в котором находится иконка ресайза.
+function _define_property(obj, key, value) {
+    if (key in obj) {
+        Object.defineProperty(obj, key, {
+            value: value,
+            enumerable: true,
+            configurable: true,
+            writable: true
+        });
+    } else {
+        obj[key] = value;
+    }
+    return obj;
+}
+function _object_spread(target) {
+    for(var i = 1; i < arguments.length; i++){
+        var source = arguments[i] != null ? arguments[i] : {};
+        var ownKeys = Object.keys(source);
+        if (typeof Object.getOwnPropertySymbols === "function") {
+            ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function(sym) {
+                return Object.getOwnPropertyDescriptor(source, sym).enumerable;
+            }));
+        }
+        ownKeys.forEach(function(key) {
+            _define_property(target, key, source[key]);
+        });
+    }
+    return target;
+}
+var base = {
+    width: 'auto',
+    height: 'auto',
+    lineHeight: '0'
+};
+export var getHandleStyles = function() {
+    return {
+        topRight: _object_spread({
+            top: '0',
+            right: '0',
+            transform: 'translate(50%, -50%)'
+        }, base),
+        bottomRight: _object_spread({
+            right: '0',
+            bottom: '0',
+            transform: 'translate(50%, 50%)'
+        }, base),
+        bottomLeft: _object_spread({
+            bottom: '0',
+            left: '0',
+            transform: 'translate(-50%, 50%)'
+        }, base),
+        topLeft: _object_spread({
+            top: '0',
+            left: '0',
+            transform: 'translate(-50%, -50%)'
+        }, base)
+    };
+};

package/emotion/es/components/_Resizable/utils/getRatioBasedOnPlacement.js

@@ -0,0 +1,44 @@
+export var getRatioBasedOnPlacement = function(placement) {
+    switch(placement){
+        case 'center':
+            {
+                return [
+                    2,
+                    2
+                ];
+            }
+        case 'top':
+        case 'bottom':
+            {
+                return [
+                    2,
+                    1
+                ];
+            }
+        case 'left':
+        case 'right':
+            {
+                return [
+                    1,
+                    2
+                ];
+            }
+        case 'top-left':
+        case 'top-right':
+        case 'bottom-left':
+        case 'bottom-right':
+            {
+                return [
+                    1,
+                    1
+                ];
+            }
+        default:
+            {
+                return [
+                    1,
+                    1
+                ];
+            }
+    }
+};

package/emotion/es/components/_Resizable/utils/getResizeDirections.js

@@ -0,0 +1,72 @@
+export var getResizeDirections = function(directions) {
+    if (!directions) {
+        return {
+            top: true,
+            right: true,
+            bottom: true,
+            left: true,
+            topRight: true,
+            bottomRight: true,
+            bottomLeft: true,
+            topLeft: true
+        };
+    }
+    var result = {
+        top: false,
+        right: false,
+        bottom: false,
+        left: false,
+        topRight: false,
+        bottomRight: false,
+        bottomLeft: false,
+        topLeft: false
+    };
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = undefined;
+    try {
+        for(var _iterator = directions[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true){
+            var dir = _step.value;
+            switch(dir){
+                case 'top':
+                    result.top = true;
+                    break;
+                case 'right':
+                    result.right = true;
+                    break;
+                case 'bottom':
+                    result.bottom = true;
+                    break;
+                case 'left':
+                    result.left = true;
+                    break;
+                case 'top-right':
+                    result.topRight = true;
+                    break;
+                case 'top-left':
+                    result.topLeft = true;
+                    break;
+                case 'bottom-right':
+                    result.bottomRight = true;
+                    break;
+                case 'bottom-left':
+                    result.bottomLeft = true;
+                    break;
+                default:
+                    break;
+            }
+        }
+    } catch (err) {
+        _didIteratorError = true;
+        _iteratorError = err;
+    } finally{
+        try {
+            if (!_iteratorNormalCompletion && _iterator.return != null) {
+                _iterator.return();
+            }
+        } finally{
+            if (_didIteratorError) {
+                throw _iteratorError;
+            }
+        }
+    }
+    return result;
+};

package/emotion/es/components/_Resizable/utils/index.js

@@ -0,0 +1,4 @@
+export * from "./getRatioBasedOnPlacement";
+export * from "./getResizeDirections";
+export * from "./getHandleStyles";
+export var DEFAULT_Z_INDEX = '9000';