@amaui/ui-react
Version:
UI for React
217 lines (216 loc) • 11.2 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 Snackbar_1 = __importDefault(require("../Snackbar"));
const Slide_1 = __importDefault(require("../Slide"));
const Expand_1 = __importDefault(require("../Expand"));
const Line_1 = __importDefault(require("../Line"));
const Context_1 = __importDefault(require("./Context"));
const utils_2 = require("../utils");
const useStyle = (0, style_react_1.style)(theme => ({
root: {
position: 'fixed',
zIndex: theme.z_index.modal + 114,
'& > *': {
width: 'auto !important'
}
},
position_top: {
top: '24px',
'& .amaui-Snackbar-root': {
marginBottom: '16px'
}
},
position_bottom: {
bottom: '24px',
'& .amaui-Snackbar-root': {
marginTop: '16px'
}
},
alignment_left: {
left: '24px',
right: 'auto'
},
alignment_start: {
insetInlineStart: '24px',
insetInlineEnd: 'auto'
},
alignment_center: {
left: '50%',
right: 'auto',
transform: 'translateX(-50%)'
},
alignment_right: {
right: '24px',
left: 'auto'
},
alignment_end: {
insetInlineEnd: '24px',
insetInlineStart: 'auto'
}
}), { name: 'amaui-Snackbars' });
const Snackbars = 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.amauiSnackbars) === null || _g === void 0 ? void 0 : _g.props) === null || _h === void 0 ? void 0 : _h.default), props_)); }, [props_]);
const Line = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Line) || Line_1.default; }, [theme]);
const Snackbar = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Snackbar) || Snackbar_1.default; }, [theme]);
const Slide = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Slide) || Slide_1.default; }, [theme]);
const Expand = react_1.default.useMemo(() => { var _a; return ((_a = theme === null || theme === void 0 ? void 0 : theme.elements) === null || _a === void 0 ? void 0 : _a.Expand) || Expand_1.default; }, [theme]);
const { max = 4, position = 'bottom', alignment = 'start', SnackbarProps, className, children } = props, other = __rest(props, ["max", "position", "alignment", "SnackbarProps", "className", "children"]);
const { classes } = useStyle();
const [preOpen, setPreOpen] = react_1.default.useState([]);
const [open, setOpen] = react_1.default.useState([]);
const refs = {
root: react_1.default.useRef(undefined),
value: react_1.default.useRef({}),
open: react_1.default.useRef(undefined),
preOpen: react_1.default.useRef(undefined)
};
refs.open.current = open;
refs.preOpen.current = preOpen;
const snackbarProps = Object.assign({ TransitionComponent: Slide, TransitionComponentProps: {
add: true,
direction: (props.position === 'top' && props.alignment === 'center') ? 'top' : (props.position === 'bottom' && props.alignment === 'center') ? 'bottom' : props.alignment === 'left' ? 'left' : 'right'
} }, SnackbarProps);
// Start and ltr change direction to left or right
if (alignment === 'start' && theme.direction === 'ltr')
snackbarProps.TransitionComponentProps.direction = 'left';
if (alignment === 'start' && theme.direction === 'rtl')
snackbarProps.TransitionComponentProps.direction = 'right';
// End and ltr change direction to right or left
if (alignment === 'end' && theme.direction === 'ltr')
snackbarProps.TransitionComponentProps.direction = 'right';
if (alignment === 'end' && theme.direction === 'rtl')
snackbarProps.TransitionComponentProps.direction = 'left';
// Add preOpen
react_1.default.useEffect(() => {
// Add from preOpen
const toAdd = max - open.length;
if (toAdd > 0 && !!refs.preOpen.current.length) {
const itemsToAdd = refs.preOpen.current.slice(0, toAdd);
setPreOpen(itemsPreOpen => (0, utils_1.unique)([...itemsPreOpen], 'id').slice(toAdd));
if (itemsToAdd.length)
setOpen(() => {
const itemsNew = [...refs.open.current];
if (position === 'top')
itemsNew.push(...itemsToAdd);
else if (position === 'bottom')
itemsNew.unshift(...itemsToAdd);
return (0, utils_1.unique)(itemsNew, 'id');
});
}
}, [open.length]);
const add = (value) => {
const value_ = {
id: new Date().getTime(),
in: true,
expand: true,
Snackbar: Object.assign({ color: 'default' }, value)
};
// Pre open
if ((0, utils_1.is)('number', max) && open.length >= max) {
setPreOpen(previous => (0, utils_1.unique)([...previous, value_], 'id'));
}
// Open
else {
setOpen(previous => {
const itemsNew = [...previous];
if (position === 'top')
itemsNew.push(value_);
else if (position === 'bottom')
itemsNew.unshift(value_);
return (0, utils_1.unique)(itemsNew, 'id');
});
}
return value_;
};
const remove = (id_) => {
var _a, _b;
let id = id_;
if (id_ === 'first')
id = (_a = open[open.length - 1]) === null || _a === void 0 ? void 0 : _a.id;
if (id_ === 'last')
id = (_b = open[0]) === null || _b === void 0 ? void 0 : _b.id;
onClose(id);
};
const onClose = (id) => {
setOpen(items => {
const itemsNew = (0, utils_1.unique)([...items], 'id');
const item = itemsNew.find(item_ => item_.id === id);
if (item)
item.in = false;
return (0, utils_1.unique)(itemsNew, 'id');
});
};
const onSnackbarExited = (id) => {
setOpen(items => {
const itemsNew = (0, utils_1.unique)([...items], 'id');
const item = itemsNew.find(item_ => item_.id === id);
if (item)
item.expand = false;
return (0, utils_1.unique)(itemsNew, 'id');
});
};
const onExpandExited = (id) => {
setOpen(items => {
const itemsNew = (0, utils_1.unique)([...items], 'id');
const index = itemsNew.findIndex(item_ => item_.id === id);
if (index > -1)
itemsNew.splice(index, 1);
return (0, utils_1.unique)(itemsNew, 'id');
});
};
refs.value.current.add = add;
refs.value.current.remove = remove;
let align = 'center';
if (['start', 'left'].includes(alignment))
align = 'flex-start';
if (['right', 'end'].includes(alignment))
align = 'flex-end';
return ((0, jsx_runtime_1.jsxs)(Context_1.default.Provider, Object.assign({ value: refs.value.current }, { children: [children, (0, jsx_runtime_1.jsx)(Line, Object.assign({ ref: item => {
if (ref) {
if ((0, utils_1.is)('function', ref))
ref(item);
else if (ref === null || ref === void 0 ? void 0 : ref.current)
ref.current = item;
}
refs.root.current = item;
}, align: align, gap: 0, className: (0, style_react_1.classNames)([
(0, utils_2.staticClassName)('Snackbars', theme) && [
`amaui-Snackbars-root`
],
className,
classes.root,
classes[`position_${position}`],
classes[`alignment_${alignment}`]
]) }, other, { children: open.map((item) => {
var _a;
return ((0, jsx_runtime_1.jsx)(Expand, Object.assign({ in: item.expand, parent: refs.root.current, onExited: () => onExpandExited(item.id) }, { children: (0, jsx_runtime_1.jsx)(Snackbar, Object.assign({ id: item.id, open: item.in }, snackbarProps, item.Snackbar, { TransitionComponentProps: Object.assign(Object.assign(Object.assign({}, snackbarProps === null || snackbarProps === void 0 ? void 0 : snackbarProps.TransitionComponentProps), (_a = item.Snackbar) === null || _a === void 0 ? void 0 : _a.TransitionComponentProps), { removeOnExited: false, onExited: (...args) => {
var _a, _b;
onSnackbarExited(item.id);
if ((0, utils_1.is)('function', (_a = snackbarProps === null || snackbarProps === void 0 ? void 0 : snackbarProps.TransitionComponentProps) === null || _a === void 0 ? void 0 : _a.onExited))
snackbarProps.TransitionComponentProps.onExited(...args);
if ((0, utils_1.is)('function', (_b = item.Snackbar) === null || _b === void 0 ? void 0 : _b.onExited))
item.Snackbar.onExited(...args);
} }), onClose: () => onClose(item.id), fixed: false }), item.id) }), item.id));
}) }))] })));
});
Snackbars.displayName = 'amaui-Snackbars';
exports.default = Snackbars;