@onesy/ui-react
Version:
UI for React
211 lines (207 loc) • 10.3 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _utils = require("@onesy/utils");
var _styleReact = require("@onesy/style-react");
var _IconMaterialSmartphoneW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialSmartphoneW100"));
var _IconMaterialTabletMacW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialTabletMacW100"));
var _IconMaterialComputerW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialComputerW100"));
var _IconMaterialDesktopWindowsW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialDesktopWindowsW100"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Line = _interopRequireDefault(require("../Line"));
var _Tooltip = _interopRequireDefault(require("../Tooltip"));
var _IFrame = _interopRequireDefault(require("../IFrame"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
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) { (0, _defineProperty2.default)(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; }
const useStyle = (0, _styleReact.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 = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4;
const theme = (0, _styleReact.useOnesyTheme)();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyFrame) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const Line = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.Line) || _Line.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.IconButton) || _IconButton.default;
const Tooltip = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Tooltip) || _Tooltip.default;
const IFrameElement = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IFrame) || _IFrame.default;
const {
url,
src,
value,
startOptions,
endOptions,
IconMobile = _IconMaterialSmartphoneW.default,
IconTablet = _IconMaterialTabletMacW.default,
IconLaptop = _IconMaterialComputerW.default,
IconDesktop = _IconMaterialDesktopWindowsW.default,
iframeProps,
IFrameProps,
OptionProps,
OptionsProps,
OptionsWrapperProps,
WrapperProps,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [responsive, setResponsive] = _react.default.useState();
const onResponsive = value_ => {
setResponsive(previous => {
if (previous === value_) return '';
return value_;
});
};
const responsiveOptions = [{
name: l('Mobile'),
icon: IconMobile,
disabled: (0, _utils.isEnvironment)('browser') && window.innerWidth < 375
}, {
name: l('Tablet'),
icon: IconTablet,
disabled: (0, _utils.isEnvironment)('browser') && window.innerWidth < 768
}, {
name: l('Laptop'),
icon: IconLaptop,
disabled: (0, _utils.isEnvironment)('browser') && window.innerWidth < 1440
}, {
name: l('Desktop'),
icon: IconDesktop,
disabled: (0, _utils.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.default.useMemo(() => {
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [children, value && !children && /*#__PURE__*/(0, _jsxRuntime.jsx)(IFrameElement, {
className: (0, _styleReact.classNames)([classes.IFrame]),
WrapperProps: {
align: 'center',
justify: 'center'
},
children: value || children
}), (url || src) && !(value || children) && /*#__PURE__*/(0, _jsxRuntime.jsx)("iframe", _objectSpread(_objectSpread({
title: "frame",
src: url || src
}, iframeProps), {}, {
className: (0, _styleReact.classNames)([iframeProps === null || iframeProps === void 0 ? void 0 : iframeProps.className, classes.iframe])
}))]
});
}, [url, src, value, children]);
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 0,
align: "center",
flex: true,
fullWidth: true,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Frame', theme) && ['onesy-Frame-root'], className, classes.root])
}, other), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
gap: 0.5,
direction: "row",
align: "center",
justify: {
default: 'flex-end',
700: 'flex-start'
},
fullWidth: true
}, OptionsWrapperProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Frame', theme) && ['onesy-Frame-options-wrapper'], OptionsWrapperProps === null || OptionsWrapperProps === void 0 ? void 0 : OptionsWrapperProps.className]),
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
gap: 0.4,
direction: "row",
align: "center",
justify: "flex-end"
}, OptionsProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Frame', theme) && ['onesy-Frame-options'], OptionsProps === null || OptionsProps === void 0 ? void 0 : OptionsProps.className, classes.options]),
children: [startOptions, responsiveOptions.map((item, index) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Tooltip, {
name: item.name,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
size: "small",
selected: item.name === responsive,
onClick: () => onResponsive(item.name),
disabled: item.disabled
}, OptionProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Frame', theme) && ['onesy-Frame-option'], OptionProps === null || OptionProps === void 0 ? void 0 : OptionProps.className]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(item.icon, {})
}))
}, index)), endOptions]
}))
})), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
gap: 0,
align: "center",
flex: true,
fullWidth: true
}, WrapperProps), {}, {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Frame', theme) && ['onesy-Frame-wrapper'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper]),
style: _objectSpread(_objectSpread({}, WrapperStyle), WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.style),
children: main
}))]
}));
};
Frame.displayName = 'onesy-Frame';
var _default = exports.default = Frame;