@onesy/ui-react 1.0.59 → 1.0.63

package/Widgets/Widgets.js

@@ -1,176 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = __importDefault(require("react"));
-const utils_1 = require("@onesy/utils");
-const style_react_1 = require("@onesy/style-react");
-const IconMaterialCloseW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
-const IconMaterialWidgetsW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialWidgetsW100"));
-const SpeedDial_1 = __importDefault(require("../SpeedDial"));
-const SpeedDialItem_1 = __importDefault(require("../SpeedDialItem"));
-const Transition_1 = __importDefault(require("../Transition"));
-const IconButton_1 = __importDefault(require("../IconButton"));
-const Move_1 = __importDefault(require("../Move"));
-const Context_1 = __importDefault(require("./Context"));
-const utils_2 = require("../utils");
-const useStyle = (0, style_react_1.style)(theme => ({
-    root: {
-        width: '100%',
-        padding: `0 ${theme.methods.space.value(13, 'px')}`,
-        pointerEvents: 'none',
-        zIndex: theme.z_index.modal - 1
-    },
-    line: {
-        pointerEvents: 'auto'
-    },
-    fixed: {
-        position: 'fixed'
-    },
-    position_top: {
-        top: '24px'
-    },
-    position_bottom: {
-        bottom: '24px'
-    },
-    widget: {
-        userSelect: 'none',
-        boxShadow: theme.shadows.values.default[6]
-    },
-    item: {
-        position: 'fixed',
-        top: '40px',
-        left: '40px',
-        opacity: '0',
-        transform: 'translateY(100%)',
-        transition: theme === null || theme === void 0 ? void 0 : theme.methods.transitions.make(['opacity', 'transform'], { duration: 'rg', timing_function: 'standard' }),
-        zIndex: theme.z_index.modal - 1,
-        '&.enter': {
-            opacity: '0',
-            transform: 'translateY(100%)'
-        },
-        '&.entering': {
-            opacity: '1',
-            transform: 'translateY(0%)'
-        },
-        '&.entered': {
-            opacity: '1',
-            transform: 'translateY(0%)'
-        },
-        '&.exit': {
-            opacity: '1',
-            transform: 'translateY(0%)'
-        },
-        '&.exiting': {
-            opacity: '0',
-            transform: 'translateY(100%)'
-        },
-        '&.exited': {
-            opacity: '0',
-            transform: 'translateY(100%)'
-        }
-    },
-    iconButton: {
-        top: '8px',
-        insetInlineEnd: '-8px',
-        transform: `translateX(${theme.direction === 'ltr' ? '' : '-'}100%)`,
-        zIndex: '1',
-        '&.onesy-IconButton-root': {
-            position: 'absolute'
-        }
-    }
-}), { name: 'onesy-Widgets' });
-const Widgets = react_1.default.forwardRef((props_, ref) => {
-    const theme = (0, style_react_1.useOnesyTheme)();
-    const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.onesyWidgets) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
-    const SpeedDial = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDial) || SpeedDial_1.default; }, [theme]);
-    const SpeedDialItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDialItem) || SpeedDialItem_1.default; }, [theme]);
-    const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
-    const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
-    const Move = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Move) || Move_1.default; }, [theme]);
-    const { widgets, position = 'bottom', move = true, fixed = true, onOpen, onOpenAll, onClose, onCloseAll, SpeedDialProps, MoveProps, Icon: Icon_ = IconMaterialWidgetsW100_1.default, IconCloseItem = IconMaterialCloseW100_1.default, className, children } = props, other = __rest(props, ["widgets", "position", "move", "fixed", "onOpen", "onOpenAll", "onClose", "onCloseAll", "SpeedDialProps", "MoveProps", "Icon", "IconCloseItem", "className", "children"]);
-    const { classes } = useStyle();
-    const [openItems, setOpenItems] = react_1.default.useState([]);
-    const refs = {
-        value: react_1.default.useRef({}),
-        props: react_1.default.useRef(undefined)
-    };
-    refs.props.current = props;
-    const open = react_1.default.useCallback((value) => {
-        setOpenItems(items => (0, utils_1.unique)([...items, value]));
-        if ((0, utils_1.is)('function', onOpen))
-            onOpen(value);
-    }, []);
-    const openAll = react_1.default.useCallback(() => {
-        setOpenItems(() => (0, utils_1.unique)((widgets || []).map((item) => {
-            const valueItem = item.value !== undefined ? item.value : item.label;
-            return valueItem;
-        })));
-        if ((0, utils_1.is)('function', onOpenAll))
-            onOpenAll();
-    }, []);
-    const close = react_1.default.useCallback((value) => {
-        setOpenItems(items => (0, utils_1.unique)(items.filter((item) => item !== value)));
-        if ((0, utils_1.is)('function', onClose))
-            onClose(value);
-    }, []);
-    const closeAll = react_1.default.useCallback(() => {
-        setOpenItems([]);
-        if ((0, utils_1.is)('function', onCloseAll))
-            onCloseAll();
-    }, []);
-    // Add to the value
-    refs.value.current.open = open;
-    refs.value.current.openAll = openAll;
-    refs.value.current.close = close;
-    refs.value.current.closeAll = closeAll;
-    const widgetsToUse = [...(widgets || [])].reverse();
-    return ((0, jsx_runtime_1.jsxs)(Context_1.default.Provider, Object.assign({ value: refs.value.current }, { children: [(widgets === null || widgets === void 0 ? void 0 : widgets.length) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpeedDial, Object.assign({ ref: ref, direction: 'top', position: 'bottom', alignment: 'start', Icon: Icon_, noRotate: true }, SpeedDialProps, { children: widgets.map((item, index) => {
-                            const valueItem = item.value !== undefined ? item.value : item.label;
-                            return ((0, jsx_runtime_1.jsx)(SpeedDialItem, { onClick: () => !openItems.includes(valueItem) ? open(valueItem) : close(valueItem), label: !openItems.includes(valueItem) ? item.label : `Close ${item.label}`, Icon: item.Icon }, index));
-                        }) })), widgetsToUse.map((item, index) => {
-                        const valueItem = item.value !== undefined ? item.value : item.label;
-                        const WidgetWrapper = Move;
-                        const WidgetWrapperProps = Object.assign({ version: 'fixed', manage: true, manageLevel: 1, disabled: !(move && item.move !== false) }, MoveProps);
-                        return ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: openItems.includes(valueItem), removeOnExited: true }, { children: (status) => {
-                                var _a;
-                                return ((0, jsx_runtime_1.jsxs)(WidgetWrapper, Object.assign({ className: (0, style_react_1.classNames)([
-                                        (0, utils_2.staticClassName)('Widgets', theme) && [
-                                            `onesy-Widgets-item`
-                                        ],
-                                        classes.item,
-                                        status
-                                    ]) }, WidgetWrapperProps, { children: [(0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => close(valueItem), color: 'default', version: 'filled', size: 'small', elevation: false, className: (0, style_react_1.classNames)([
-                                                (0, utils_2.staticClassName)('Widgets', theme) && [
-                                                    `onesy-Widgets-icon-button`
-                                                ],
-                                                classes.iconButton
-                                            ]) }, { children: (0, jsx_runtime_1.jsx)(IconCloseItem, {}) })), react_1.default.cloneElement(item.element, Object.assign({ className: (0, style_react_1.classNames)([
-                                                (0, utils_2.staticClassName)('Widgets', theme) && [
-                                                    `onesy-Widgets-widget`
-                                                ],
-                                                classes.widget
-                                            ]) }, (((['onesy-Weather', 'onesy-Watch'].includes((_a = item.element.type) === null || _a === void 0 ? void 0 : _a.displayName))) ? {
-                                            shadow: true,
-                                            style: {
-                                                boxShadow: 'none'
-                                            }
-                                        } : undefined)))] })));
-                            } }), index));
-                    })] }), children] })));
-});
-Widgets.displayName = 'onesy-Widgets';
-exports.default = Widgets;