@amaui/ui-react
Version:
UI for React
194 lines (191 loc) • 7.82 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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
import React from 'react';
import { isEnvironment } from '@amaui/utils';
import { classNames, style as styleMethod, useAmauiTheme } from '@amaui/style-react';
import IconMaterialSmartphone from '@amaui/icons-material-rounded-react/IconMaterialSmartphoneW100';
import IconMaterialTabletMac from '@amaui/icons-material-rounded-react/IconMaterialTabletMacW100';
import IconMaterialComputer from '@amaui/icons-material-rounded-react/IconMaterialComputerW100';
import IconMaterialDesktopWindows from '@amaui/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',
'&.amaui-Line-root': {
width: 'calc(100% - 8px)'
}
},
IFrame: {
position: 'relative'
},
iframe: {
width: '100%',
height: '100%'
}
}), {
name: 'amaui-Frame'
});
const Frame = /*#__PURE__*/React.forwardRef((props_, ref) => {
const theme = useAmauiTheme();
const props = React.useMemo(() => _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.amauiFrame?.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: 'Mobile',
icon: IconMobile,
disabled: isEnvironment('browser') && window.innerWidth < 375
}, {
name: 'Tablet',
icon: IconTablet,
disabled: isEnvironment('browser') && window.innerWidth < 768
}, {
name: 'Laptop',
icon: IconLaptop,
disabled: isEnvironment('browser') && window.innerWidth < 1440
}, {
name: '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) && ['amaui-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) && ['amaui-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) && ['amaui-Frame-options'], OptionsProps?.className, classes.options])
}), startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/React.createElement(Tooltip, {
key: index,
label: 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) && ['amaui-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) && ['amaui-Frame-wrapper'], WrapperProps?.className, classes.wrapper]),
style: _objectSpread(_objectSpread({}, WrapperStyle), WrapperProps?.style)
}), main));
});
Frame.displayName = 'amaui-Frame';
export default Frame;