@onesy/ui-react
Version:
UI for React
207 lines (206 loc) • 7.93 kB
JavaScript
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
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) { _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 { is, unique } from '@onesy/utils';
import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
import IconMaterialClose from '@onesy/icons-material-rounded-react/IconMaterialCloseW100';
import IconMaterialWidgets from '@onesy/icons-material-rounded-react/IconMaterialWidgetsW100';
import SpeedDialElement from '../SpeedDial';
import SpeedDialItemElement from '../SpeedDialItem';
import TransitionElement from '../Transition';
import IconButtonElement from '../IconButton';
import MoveElement from '../Move';
import WidgetsContext from './Context';
import { staticClassName } from '../utils';
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
const useStyle = styleMethod(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?.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_ => {
const theme = useOnesyTheme();
const l = theme.l;
const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyWidgets?.props?.default), props_);
const SpeedDial = theme?.elements?.SpeedDial || SpeedDialElement;
const SpeedDialItem = theme?.elements?.SpeedDialItem || SpeedDialItemElement;
const Transition = theme?.elements?.Transition || TransitionElement;
const IconButton = theme?.elements?.IconButton || IconButtonElement;
const Move = theme?.elements?.Move || MoveElement;
const {
widgets,
position = 'bottom',
move = true,
fixed = true,
onOpen,
onOpenAll,
onClose,
onCloseAll,
SpeedDialProps,
MoveProps,
Icon: Icon_ = IconMaterialWidgets,
IconCloseItem = IconMaterialClose,
className,
children
} = props,
other = _objectWithoutProperties(props, _excluded);
const {
classes
} = useStyle();
const [openItems, setOpenItems] = React.useState([]);
const refs = {
value: React.useRef({}),
props: React.useRef(undefined)
};
refs.props.current = props;
const open = value => {
setOpenItems(items => unique([...items, value]));
if (is('function', onOpen)) onOpen(value);
};
const openAll = () => {
setOpenItems(() => unique((widgets || []).map(item => {
const valueItem = item.value !== undefined ? item.value : item.label;
return valueItem;
})));
if (is('function', onOpenAll)) onOpenAll();
};
const close = value_0 => {
setOpenItems(items_0 => unique(items_0.filter(item_0 => item_0 !== value_0)));
if (is('function', onClose)) onClose(value_0);
};
const closeAll = () => {
setOpenItems([]);
if (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__*/_jsxs(WidgetsContext.Provider, {
value: refs.value.current,
children: [widgets?.length && /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_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__*/_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__*/_jsx(Transition, {
in: openItems.includes(valueItem_1),
removeOnExited: true,
children: status => /*#__PURE__*/_jsxs(WidgetWrapper, _objectSpread(_objectSpread({
className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-item`], classes.item, status])
}, WidgetWrapperProps), {}, {
children: [/*#__PURE__*/_jsx(IconButton, {
onClick: () => close(valueItem_1),
color: "default",
version: "filled",
size: "small",
elevation: false,
className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-icon-button`], classes.iconButton]),
children: /*#__PURE__*/_jsx(IconCloseItem, {})
}), /*#__PURE__*/React.cloneElement(item_2.element, _objectSpread({
className: classNames([staticClassName('Widgets', theme) && [`onesy-Widgets-widget`], classes.widget])
}, ['onesy-Weather', 'onesy-Watch'].includes(item_2.element.type?.displayName) ? {
shadow: true,
style: {
boxShadow: 'none'
}
} : undefined))]
}))
}, index_0);
})]
}), children]
});
};
Widgets.displayName = 'onesy-Widgets';
export default Widgets;