@onesy/ui-react
Version:
UI for React
195 lines (192 loc) • 7.69 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
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';
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 = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useOnesyTheme();
const l = theme.l;
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyFrame?.props?.default), props_), [props_]);
const Line = React.useMemo(() => theme?.elements?.Line || LineElement, [theme]);
const IconButton = React.useMemo(() => theme?.elements?.IconButton || IconButtonElement, [theme]);
const Tooltip = React.useMemo(() => theme?.elements?.Tooltip || TooltipElement, [theme]);
const IFrameElement = React.useMemo(() => theme?.elements?.IFrame || IFrameElement_, [theme]);
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 = React.useCallback(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__*/React.createElement(React.Fragment, null, children, value && !children && /*#__PURE__*/React.createElement(IFrameElement, {
className: classNames([classes.IFrame]),
WrapperProps: {
align: 'center',
justify: 'center'
}
}, value || children), (url || src) && !(value || children) && /*#__PURE__*/React.createElement("iframe", _extends({
title: "frame",
src: url || src
}, iframeProps, {
className: classNames([iframeProps?.className, classes.iframe])
})));
}, [url, src, value, children]);
return /*#__PURE__*/React.createElement(Line, _extends({
ref: ref,
gap: 0,
align: "center",
flex: true,
fullWidth: true,
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-root'], className, classes.root])
}, other), /*#__PURE__*/React.createElement(Line, _extends({
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])
}), /*#__PURE__*/React.createElement(Line, _extends({
gap: 0.4,
direction: "row",
align: "center",
justify: "flex-end"
}, OptionsProps, {
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-options'], OptionsProps?.className, classes.options])
}), startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/React.createElement(Tooltip, {
key: index,
name: item.name
}, /*#__PURE__*/React.createElement(IconButton, _extends({
size: "small",
selected: item.name === responsive,
onClick: () => onResponsive(item.name),
disabled: item.disabled
}, OptionProps, {
className: classNames([staticClassName('Frame', theme) && ['onesy-Frame-option'], OptionProps?.className])
}), /*#__PURE__*/React.createElement(item.icon, null)))), endOptions)), /*#__PURE__*/React.createElement(Line, _extends({
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)
}), main));
});
Frame.displayName = 'onesy-Frame';
export default Frame;