@onesy/ui-react
Version:
UI for React
203 lines (200 loc) • 7.79 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
const _excluded = ["url", "src", "value", "startOptions", "endOptions", "IconMobile", "IconTablet", "IconLaptop", "IconDesktop", "iframeProps", "IFrameProps", "OptionProps", "OptionsProps", "OptionsWrapperProps", "WrapperProps", "className", "children"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from 'react';
import { isEnvironment } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialSmartphone from '@onesy/icons-material-rounded-react/IconMaterialSmartphoneW100';
import IconMaterialTabletMac from '@onesy/icons-material-rounded-react/IconMaterialTabletMacW100';
import IconMaterialComputer from '@onesy/icons-material-rounded-react/IconMaterialComputerW100';
import IconMaterialDesktopWindows from '@onesy/icons-material-rounded-react/IconMaterialDesktopWindowsW100';
import IconButtonElement from '../IconButton';
import LineElement from '../Line';
import TooltipElement from '../Tooltip';
import IFrameElement_ from '../IFrame';
import { staticClassName } from '../utils';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const useStyle = styleMethod(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 = props_ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFrame?.props?.default), props_);
const Line = theme?.elements?.Line || LineElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const Tooltip = theme?.elements?.Tooltip || TooltipElement;
const IFrameElement = theme?.elements?.IFrame || IFrameElement_;
const {
url,
src,
value,
startOptions,
endOptions,
IconMobile = IconMaterialSmartphone,
IconTablet = IconMaterialTabletMac,
IconLaptop = IconMaterialComputer,
IconDesktop = IconMaterialDesktopWindows,
iframeProps,
IFrameProps,
OptionProps,
OptionsProps,
OptionsWrapperProps,
WrapperProps,
className,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [responsive, setResponsive] = React.useState();
const onResponsive = value_ => {
setResponsive(previous => {
if (previous === value_) return '';
return value_;
});
};
const responsiveOptions = [{
name: l('Mobile'),
icon: IconMobile,
disabled: isEnvironment('browser') && window.innerWidth < 375
}, {
name: l('Tablet'),
icon: IconTablet,
disabled: isEnvironment('browser') && window.innerWidth < 768
}, {
name: l('Laptop'),
icon: IconLaptop,
disabled: isEnvironment('browser') && window.innerWidth < 1440
}, {
name: l('Desktop'),
icon: IconDesktop,
disabled: 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.useMemo(() => {
return /*#__PURE__*/_jsxs(_Fragment, {
children: [children, value && !children && /*#__PURE__*/_jsx(IFrameElement, {
className: classNames([classes.IFrame]),
WrapperProps: {
align: 'center',
justify: 'center'
},
children: value || children
}), (url || src) && !(value || children) && /*#__PURE__*/_jsx("iframe", _objectSpread(_objectSpread({
title: "frame",
src: url || src
}, iframeProps), {}, {
className: classNames([iframeProps?.className, classes.iframe])
}))]
});
}, [url, src, value, children]);
return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
gap: 0,
align: "center",
flex: true,
fullWidth: true,
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-root'], className, classes.root])
}, other), {}, {
children: [/*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
gap: 0.5,
direction: "row",
align: "center",
justify: {
default: 'flex-end',
700: 'flex-start'
},
fullWidth: true
}, OptionsWrapperProps), {}, {
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options-wrapper'], OptionsWrapperProps?.className]),
children: /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
gap: 0.4,
direction: "row",
align: "center",
justify: "flex-end"
}, OptionsProps), {}, {
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options'], OptionsProps?.className, classes.options]),
children: [startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/_jsx(Tooltip, {
name: item.name,
children: /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
size: "small",
selected: item.name === responsive,
onClick: () => onResponsive(item.name),
disabled: item.disabled
}, OptionProps), {}, {
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-option'], OptionProps?.className]),
children: /*#__PURE__*/_jsx(item.icon, {})
}))
}, index)), endOptions]
}))
})), /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
gap: 0,
align: "center",
flex: true,
fullWidth: true
}, WrapperProps), {}, {
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-wrapper'], WrapperProps?.className, classes.wrapper]),
style: _objectSpread(_objectSpread({}, WrapperStyle), WrapperProps?.style),
children: main
}))]
}));
};
Frame.displayName = 'onesy-Frame';
export default Frame;