@amaui/ui-react
Version:
UI for React
155 lines (154 loc) • 10.3 kB
JavaScript
"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("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const IconMaterialSmartphoneW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialSmartphoneW100"));
const IconMaterialTabletMacW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialTabletMacW100"));
const IconMaterialComputerW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialComputerW100"));
const IconMaterialDesktopWindowsW100_1 = __importDefault(require("@amaui/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',
'&.amaui-Line-root': {
width: 'calc(100% - 8px)'
}
},
IFrame: {
position: 'relative'
},
iframe: {
width: '100%',
height: '100%'
}
}), { name: 'amaui-Frame' });
const Frame = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
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.amauiFrame) === 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: 'Mobile', icon: IconMobile, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 375 },
{ name: 'Tablet', icon: IconTablet, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 768 },
{ name: 'Laptop', icon: IconLaptop, disabled: (0, utils_1.isEnvironment)('browser') && window.innerWidth < 1440 },
{ name: '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) && [
'amaui-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) && [
'amaui-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) && [
'amaui-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({ label: 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) && [
'amaui-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) && [
'amaui-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 = 'amaui-Frame';
exports.default = Frame;