@onesy/ui-react
Version:
UI for React
218 lines (216 loc) • 10.4 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 _IconMaterialCloseW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialCloseW100"));
var _IconMaterialWidgetsW = _interopRequireDefault(require("@onesy/icons-material-rounded-react/IconMaterialWidgetsW100"));
var _SpeedDial = _interopRequireDefault(require("../SpeedDial"));
var _SpeedDialItem = _interopRequireDefault(require("../SpeedDialItem"));
var _Transition = _interopRequireDefault(require("../Transition"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Move = _interopRequireDefault(require("../Move"));
var _Context = _interopRequireDefault(require("./Context"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["widgets", "position", "move", "fixed", "onOpen", "onOpenAll", "onClose", "onCloseAll", "SpeedDialProps", "MoveProps", "Icon", "IconCloseItem", "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: {
width: '100%',
padding: `0 ${theme.methods.space.value(13, 'px')}`,
pointerEvents: 'none',
zIndex: theme.z_index.modal - 1
},
line: {
pointerEvents: 'auto'
},
fixed: {
position: 'fixed'
},
position_top: {
top: '24px'
},
position_bottom: {
bottom: '24px'
},
widget: {
userSelect: 'none',
boxShadow: theme.shadows.values.default[6]
},
item: {
position: 'fixed',
top: '40px',
left: '40px',
opacity: '0',
transform: 'translateY(100%)',
transition: theme === null || theme === void 0 ? void 0 : theme.methods.transitions.make(['opacity', 'transform'], {
duration: 'rg',
timing_function: 'standard'
}),
zIndex: theme.z_index.modal - 1,
'&.enter': {
opacity: '0',
transform: 'translateY(100%)'
},
'&.entering': {
opacity: '1',
transform: 'translateY(0%)'
},
'&.entered': {
opacity: '1',
transform: 'translateY(0%)'
},
'&.exit': {
opacity: '1',
transform: 'translateY(0%)'
},
'&.exiting': {
opacity: '0',
transform: 'translateY(100%)'
},
'&.exited': {
opacity: '0',
transform: 'translateY(100%)'
}
},
iconButton: {
top: '8px',
insetInlineEnd: '-8px',
transform: `translateX(${theme.direction === 'ltr' ? '' : '-'}100%)`,
zIndex: '1',
'&.onesy-IconButton-root': {
position: 'absolute'
}
}
}), {
name: 'onesy-Widgets'
});
const Widgets = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
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.onesyWidgets) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
const SpeedDial = (theme === null || theme === void 0 || (_theme$elements = theme.elements) === null || _theme$elements === void 0 ? void 0 : _theme$elements.SpeedDial) || _SpeedDial.default;
const SpeedDialItem = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.SpeedDialItem) || _SpeedDialItem.default;
const Transition = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Transition) || _Transition.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.IconButton) || _IconButton.default;
const Move = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Move) || _Move.default;
const {
widgets,
position = 'bottom',
move = true,
fixed = true,
onOpen,
onOpenAll,
onClose,
onCloseAll,
SpeedDialProps,
MoveProps,
Icon: Icon_ = _IconMaterialWidgetsW.default,
IconCloseItem = _IconMaterialCloseW.default,
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const [openItems, setOpenItems] = _react.default.useState([]);
const refs = {
value: _react.default.useRef({}),
props: _react.default.useRef(undefined)
};
refs.props.current = props;
const open = value => {
setOpenItems(items => (0, _utils.unique)([...items, value]));
if ((0, _utils.is)('function', onOpen)) onOpen(value);
};
const openAll = () => {
setOpenItems(() => (0, _utils.unique)((widgets || []).map(item => {
const valueItem = item.value !== undefined ? item.value : item.label;
return valueItem;
})));
if ((0, _utils.is)('function', onOpenAll)) onOpenAll();
};
const close = value_0 => {
setOpenItems(items_0 => (0, _utils.unique)(items_0.filter(item_0 => item_0 !== value_0)));
if ((0, _utils.is)('function', onClose)) onClose(value_0);
};
const closeAll = () => {
setOpenItems([]);
if ((0, _utils.is)('function', onCloseAll)) onCloseAll();
};
// Add to the value
refs.value.current.open = open;
refs.value.current.openAll = openAll;
refs.value.current.close = close;
refs.value.current.closeAll = closeAll;
const widgetsToUse = [...(widgets || [])].reverse();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Context.default.Provider, {
value: refs.value.current,
children: [(widgets === null || widgets === void 0 ? void 0 : widgets.length) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDial, _objectSpread(_objectSpread(_objectSpread({
direction: "top",
position: "bottom",
alignment: "start",
Icon: Icon_,
noRotate: true
}, SpeedDialProps), other), {}, {
children: widgets.map((item_1, index) => {
const valueItem_0 = item_1.value !== undefined ? item_1.value : item_1.label;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(SpeedDialItem, {
onClick: () => !openItems.includes(valueItem_0) ? open(valueItem_0) : close(valueItem_0),
label: !openItems.includes(valueItem_0) ? item_1.label : `${l('Close')} ${item_1.label}`,
Icon: item_1.Icon
}, index);
})
})), widgetsToUse.map((item_2, index_0) => {
const valueItem_1 = item_2.value !== undefined ? item_2.value : item_2.label;
const WidgetWrapper = Move;
const WidgetWrapperProps = _objectSpread({
version: 'fixed',
manage: true,
manageLevel: 1,
disabled: !(move && item_2.move !== false)
}, MoveProps);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(Transition, {
in: openItems.includes(valueItem_1),
removeOnExited: true,
children: status => {
var _item_2$element$type;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(WidgetWrapper, _objectSpread(_objectSpread({
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-item`], classes.item, status])
}, WidgetWrapperProps), {}, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, {
onClick: () => close(valueItem_1),
color: "default",
version: "filled",
size: "small",
elevation: false,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-icon-button`], classes.iconButton]),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconCloseItem, {})
}), /*#__PURE__*/_react.default.cloneElement(item_2.element, _objectSpread({
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Widgets', theme) && [`onesy-Widgets-widget`], classes.widget])
}, ['onesy-Weather', 'onesy-Watch'].includes((_item_2$element$type = item_2.element.type) === null || _item_2$element$type === void 0 ? void 0 : _item_2$element$type.displayName) ? {
shadow: true,
style: {
boxShadow: 'none'
}
} : undefined))]
}));
}
}, index_0);
})]
}), children]
});
};
Widgets.displayName = 'onesy-Widgets';
var _default = exports.default = Widgets;