@onesy/ui-react 1.0.59 → 1.0.63

package/build/Frame/Frame.js

@@ -0,0 +1,155 @@
+"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 IconMaterialSmartphoneW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialSmartphoneW100"));
+const IconMaterialTabletMacW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialTabletMacW100"));
+const IconMaterialComputerW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialComputerW100"));
+const IconMaterialDesktopWindowsW100_1 = __importDefault(require("@onesy/icons-material-rounded-react/IconMaterialDesktopWindowsW100"));
+const IconButton_1 = __importDefault(require("../IconButton"));
+const Line_1 = __importDefault(require("../Line"));
+const Tooltip_1 = __importDefault(require("../Tooltip"));
+const IFrame_1 = __importDefault(require("../IFrame"));
+const utils_2 = require("../utils");
+const useStyle = (0, style_react_1.style)(theme => ({
+    root: {
+        position: 'relative',
+        overflow: 'hidden'
+    },
+    options: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(3, 'px')}`,
+        '& > *': {
+            flex: '0 0 auto'
+        }
+    },
+    wrapper: {
+        margin: '0 4px 24px',
+        minHeight: '15vh',
+        height: 0,
+        border: `0.5px solid ${theme.palette.text.divider}`,
+        borderRadius: theme.methods.shape.radius.value(2),
+        boxShadow: theme.shadows.values.default[1],
+        overflow: 'hidden',
+        '&.onesy-Line-root': {
+            width: 'calc(100% - 8px)'
+        }
+    },
+    IFrame: {
+        position: 'relative'
+    },
+    iframe: {
+        width: '100%',
+        height: '100%'
+    }
+}), { name: 'onesy-Frame' });
+const Frame = react_1.default.forwardRef((props_, ref) => {
+    const theme = (0, style_react_1.useOnesyTheme)();
+    const l = theme.l;
+    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.onesyFrame) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
+    const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_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 Tooltip = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Tooltip) || Tooltip_1.default; }, [theme]);
+    const IFrameElement = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IFrame) || IFrame_1.default; }, [theme]);
+    const { url, src, value, startOptions, endOptions, IconMobile = IconMaterialSmartphoneW100_1.default, IconTablet = IconMaterialTabletMacW100_1.default, IconLaptop = IconMaterialComputerW100_1.default, IconDesktop = IconMaterialDesktopWindowsW100_1.default, iframeProps, IFrameProps, OptionProps, OptionsProps, OptionsWrapperProps, WrapperProps, className, children } = props, other = __rest(props, ["url", "src", "value", "startOptions", "endOptions", "IconMobile", "IconTablet", "IconLaptop", "IconDesktop", "iframeProps", "IFrameProps", "OptionProps", "OptionsProps", "OptionsWrapperProps", "WrapperProps", "className", "children"]);
+    const { classes } = useStyle();
+    const [responsive, setResponsive] = react_1.default.useState();
+    const onResponsive = react_1.default.useCallback((value_) => {
+        setResponsive((previous) => {
+            if (previous === value_)
+                return '';
+            return value_;
+        });
+    }, []);
+    const responsiveOptions = [
+        { name: l('Mobile'), icon: IconMobile, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 375 },
+        { name: l('Tablet'), icon: IconTablet, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 768 },
+        { name: l('Laptop'), icon: IconLaptop, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 1440 },
+        { name: l('Desktop'), icon: IconDesktop, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 1920 }
+    ];
+    const WrapperStyle = {};
+    if (responsive) {
+        // iphone SE
+        if (responsive === 'Mobile') {
+            WrapperStyle.maxWidth = 375;
+            WrapperStyle.maxHeight = 667;
+        }
+        // ipad mini
+        if (responsive === 'Tablet') {
+            WrapperStyle.maxWidth = 768;
+            WrapperStyle.maxHeight = 1024;
+        }
+        // laptop
+        if (responsive === 'Laptop') {
+            WrapperStyle.maxWidth = 1440;
+            WrapperStyle.maxHeight = 768;
+        }
+        // desktop
+        if (responsive === 'Desktop') {
+            WrapperStyle.maxWidth = 1920;
+            WrapperStyle.maxHeight = 1080;
+        }
+    }
+    const main = react_1.default.useMemo(() => {
+        return (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, value && !children && ((0, jsx_runtime_1.jsx)(IFrameElement, Object.assign({ className: (0, style_react_1.classNames)([
+                        classes.IFrame
+                    ]), WrapperProps: {
+                        align: 'center',
+                        justify: 'center'
+                    } }, { children: value || children }))), (url || src) && !(value || children) && ((0, jsx_runtime_1.jsx)("iframe", Object.assign({ title: 'frame', src: url || src }, iframeProps, { className: (0, style_react_1.classNames)([
+                        iframeProps === null || iframeProps === void 0 ? void 0 : iframeProps.className,
+                        classes.iframe
+                    ]) })))] });
+    }, [url, src, value, children]);
+    return ((0, jsx_runtime_1.jsxs)(Line, Object.assign({ ref: ref, gap: 0, align: 'center', flex: true, fullWidth: true, className: (0, style_react_1.classNames)([
+            (0, utils_2.staticClassName)('Frame', theme) && [
+                'onesy-Frame-root'
+            ],
+            className,
+            classes.root
+        ]) }, other, { children: [(0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0.5, direction: 'row', align: 'center', justify: {
+                    default: 'flex-end',
+                    700: 'flex-start'
+                }, fullWidth: true }, OptionsWrapperProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Frame', theme) && [
+                        'onesy-Frame-options-wrapper'
+                    ],
+                    OptionsWrapperProps === null || OptionsWrapperProps === void 0 ? void 0 : OptionsWrapperProps.className
+                ]) }, { children: (0, jsx_runtime_1.jsxs)(Line, Object.assign({ gap: 0.4, direction: 'row', align: 'center', justify: 'flex-end' }, OptionsProps, { className: (0, style_react_1.classNames)([
+                        (0, utils_2.staticClassName)('Frame', theme) && [
+                            'onesy-Frame-options'
+                        ],
+                        OptionsProps === null || OptionsProps === void 0 ? void 0 : OptionsProps.className,
+                        classes.options
+                    ]) }, { children: [startOptions, responsiveOptions.map((item, index) => ((0, jsx_runtime_1.jsx)(Tooltip, Object.assign({ name: item.name }, { children: (0, jsx_runtime_1.jsx)(IconButton, Object.assign({ size: 'small', selected: item.name === responsive, onClick: () => onResponsive(item.name), disabled: item.disabled }, OptionProps, { className: (0, style_react_1.classNames)([
+                                    (0, utils_2.staticClassName)('Frame', theme) && [
+                                        'onesy-Frame-option'
+                                    ],
+                                    OptionProps === null || OptionProps === void 0 ? void 0 : OptionProps.className
+                                ]) }, { children: (0, jsx_runtime_1.jsx)(item.icon, {}) })) }), index))), endOptions] })) })), (0, jsx_runtime_1.jsx)(Line, Object.assign({ gap: 0, align: 'center', flex: true, fullWidth: true }, WrapperProps, { className: (0, style_react_1.classNames)([
+                    (0, utils_2.staticClassName)('Frame', theme) && [
+                        'onesy-Frame-wrapper'
+                    ],
+                    WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className,
+                    classes.wrapper
+                ]), style: Object.assign(Object.assign({}, WrapperStyle), WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style) }, { children: main }))] })));
+});
+Frame.displayName = 'onesy-Frame';
+exports.default = Frame;