@amaui/ui-react
Version:
UI for React
177 lines (176 loc) • 10.8 kB
JavaScript
;
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importDefault(require("react"));
const utils_1 = require("@amaui/utils");
const style_react_1 = require("@amaui/style-react");
const IconMaterialCloseW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialCloseW100"));
const IconMaterialWidgetsW100_1 = __importDefault(require("@amaui/icons-material-rounded-react/IconMaterialWidgetsW100"));
const SpeedDial_1 = __importDefault(require("../SpeedDial"));
const SpeedDialItem_1 = __importDefault(require("../SpeedDialItem"));
const Transition_1 = __importDefault(require("../Transition"));
const IconButton_1 = __importDefault(require("../IconButton"));
const Move_1 = __importDefault(require("../Move"));
const Context_1 = __importDefault(require("./Context"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.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',
'&.amaui-IconButton-root': {
position: 'absolute'
}
}
}), { name: 'amaui-Widgets' });
const Widgets = react_1.default.forwardRef((props_, ref) => {
const theme = (0, style_react_1.useAmauiTheme)();
const props = react_1.default.useMemo(() => { var _a, _b, _c, _d, _e, _f, _g, _h; return (Object.assign(Object.assign(Object.assign({}, (_d = (_c = (_b = (_a = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _a === void 0 ? void 0 : _a.elements) === null || _b === void 0 ? void 0 : _b.all) === null || _c === void 0 ? void 0 : _c.props) === null || _d === void 0 ? void 0 : _d.default), (_h = (_g = (_f = (_e = theme === null || theme === void 0 ? void 0 : theme.ui) === null || _e === void 0 ? void 0 : _e.elements) === null || _f === void 0 ? void 0 : _f.amauiWidgets) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const SpeedDial = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDial) || SpeedDial_1.default; }, [theme]);
const SpeedDialItem = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.SpeedDialItem) || SpeedDialItem_1.default; }, [theme]);
const Transition = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Transition) || Transition_1.default; }, [theme]);
const IconButton = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.IconButton) || IconButton_1.default; }, [theme]);
const Move = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Move) || Move_1.default; }, [theme]);
const { widgets, position = 'bottom', move = true, fixed = true, onOpen, onOpenAll, onClose, onCloseAll, SpeedDialProps, MoveProps, Icon: Icon_ = IconMaterialWidgetsW100_1.default, IconCloseItem = IconMaterialCloseW100_1.default, className, children } = props, other = __rest(props, ["widgets", "position", "move", "fixed", "onOpen", "onOpenAll", "onClose", "onCloseAll", "SpeedDialProps", "MoveProps", "Icon", "IconCloseItem", "className", "children"]);
const { classes } = useStyle();
const [openItems, setOpenItems] = react_1.default.useState([]);
const refs = {
value: react_1.default.useRef({}),
props: react_1.default.useRef(undefined)
};
refs.props.current = props;
const open = react_1.default.useCallback((value) => {
setOpenItems(items => (0, utils_1.unique)([...items, value]));
if ((0, utils_1.is)('function', onOpen))
onOpen(value);
}, []);
const openAll = react_1.default.useCallback(() => {
setOpenItems(() => (0, utils_1.unique)((widgets || []).map((item) => {
const valueItem = item.value !== undefined ? item.value : item.label;
return valueItem;
})));
if ((0, utils_1.is)('function', onOpenAll))
onOpenAll();
}, []);
const close = react_1.default.useCallback((value) => {
setOpenItems(items => (0, utils_1.unique)(items.filter((item) => item !== value)));
if ((0, utils_1.is)('function', onClose))
onClose(value);
}, []);
const closeAll = react_1.default.useCallback(() => {
setOpenItems([]);
if ((0, utils_1.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 ((0, jsx_runtime_1.jsxs)(Context_1.default.Provider, Object.assign({ value: refs.value.current }, { children: [(widgets === null || widgets === void 0 ? void 0 : widgets.length) && (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(SpeedDial, Object.assign({ ref: ref, direction: 'top', position: 'bottom', alignment: 'start', Icon: Icon_, noRotate: true }, SpeedDialProps, { children: widgets.map((item, index) => {
const valueItem = item.value !== undefined ? item.value : item.label;
return ((0, jsx_runtime_1.jsx)(SpeedDialItem, { onClick: () => !openItems.includes(valueItem) ? open(valueItem) : close(valueItem), label: !openItems.includes(valueItem) ? item.label : `Close ${item.label}`, Icon: item.Icon }, index));
}) })), widgetsToUse.map((item, index) => {
const valueItem = item.value !== undefined ? item.value : item.label;
const WidgetWrapper = Move;
const WidgetWrapperProps = Object.assign({ version: 'fixed', manage: true, manageLevel: 1, disabled: !(move && item.move !== false) }, MoveProps);
return ((0, jsx_runtime_1.jsx)(Transition, Object.assign({ in: openItems.includes(valueItem), removeOnExited: true }, { children: (status) => {
var _a;
return ((0, jsx_runtime_1.jsxs)(WidgetWrapper, Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Widgets', theme) && [
`amaui-Widgets-item`
],
classes.item,
status
]) }, WidgetWrapperProps, { children: [(0, jsx_runtime_1.jsx)(IconButton, Object.assign({ onClick: () => close(valueItem), color: 'default', version: 'filled', size: 'small', elevation: false, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Widgets', theme) && [
`amaui-Widgets-icon-button`
],
classes.iconButton
]) }, { children: (0, jsx_runtime_1.jsx)(IconCloseItem, {}) })), react_1.default.cloneElement(item.element, Object.assign({ className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Widgets', theme) && [
`amaui-Widgets-widget`
],
classes.widget
]) }, (((['amaui-Weather', 'amaui-Watch'].includes((_a = item.element.type) === null || _a === void 0 ? void 0 : _a.displayName))) ? {
shadow: true,
style: {
boxShadow: 'none'
}
} : undefined)))] })));
} }), index));
})] }), children] })));
});
Widgets.displayName = 'amaui-Widgets';
exports.default = Widgets;