@onesy/ui-react
Version:
UI for React
226 lines (225 loc) • 10.8 kB
JavaScript
;
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 _Grow = _interopRequireDefault(require("../Grow"));
var _Type = _interopRequireDefault(require("../Type"));
var _Surface = _interopRequireDefault(require("../Surface"));
var _IconButton = _interopRequireDefault(require("../IconButton"));
var _Line = _interopRequireDefault(require("../Line"));
var _utils2 = require("../utils");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["ref", "id", "tonal", "color", "size", "elevation", "open", "primary", "end", "position", "alignment", "autoHide", "autoHideDuration", "fixed", "resumeFromStart", "closeButton", "onMouseEnter", "onMouseLeave", "onClose", "IconClose", "TransitionComponent", "IconProps", "IconButtonProps", "TransitionComponentProps", "Component", "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: {
minWidth: '340px',
minHeight: '50px',
borderRadius: `${theme.shape.radius.unit}px`,
boxShadow: 'rgb(0 0 0 / 1%) 0px 4px 5px 0px, rgb(0 0 0 / 1%) 0px 1px 10px 0px, rgb(0 0 0 / 1%) 0px 2px 4px -1px'
},
end: {
marginInlineStart: 'auto'
},
size_small: {
padding: `${theme.methods.space.value(0.5, 'px')} ${theme.methods.space.value(2, 'px')}`
},
size_regular: {
padding: `${theme.methods.space.value(1, 'px')} ${theme.methods.space.value(2.5, 'px')}`
},
size_large: {
padding: `${theme.methods.space.value(1.5, 'px')} ${theme.methods.space.value(3, 'px')}`
},
fixed: {
position: 'fixed',
zIndex: theme.z_index.modal
},
position_top: {
top: '24px'
},
position_bottom: {
bottom: '24px'
},
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: 'onesy-Snackbar'
});
const timeouts = {};
const Snackbar = props_ => {
var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5;
const theme = (0, _styleReact.useOnesyTheme)();
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.onesySnackbar) === 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 Grow = (theme === null || theme === void 0 || (_theme$elements2 = theme.elements) === null || _theme$elements2 === void 0 ? void 0 : _theme$elements2.Grow) || _Grow.default;
const Type = (theme === null || theme === void 0 || (_theme$elements3 = theme.elements) === null || _theme$elements3 === void 0 ? void 0 : _theme$elements3.Type) || _Type.default;
const Surface = (theme === null || theme === void 0 || (_theme$elements4 = theme.elements) === null || _theme$elements4 === void 0 ? void 0 : _theme$elements4.Surface) || _Surface.default;
const IconButton = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.IconButton) || _IconButton.default;
const {
ref,
id = (0, _utils.getID)(),
tonal = true,
color = 'primary',
size = 'regular',
elevation = 0,
open = true,
primary,
end: end_,
position = 'bottom',
alignment = 'start',
autoHide = true,
autoHideDuration = 4000,
fixed = props.open !== undefined,
resumeFromStart = true,
closeButton = true,
onMouseEnter: onMouseEnter_,
onMouseLeave: onMouseLeave_,
onClose: onClose_,
IconClose = _IconMaterialCloseW.default,
TransitionComponent = Grow,
IconProps,
IconButtonProps,
TransitionComponentProps,
Component = 'div',
className,
children
} = props,
other = (0, _objectWithoutProperties2.default)(props, _excluded);
const {
classes
} = useStyle();
const refs = {
root: _react.default.useRef(undefined),
timeoutStart: _react.default.useRef(undefined),
timeoutLeftOver: _react.default.useRef(undefined),
autoHideDuration: _react.default.useRef(undefined)
};
refs.autoHideDuration.current = autoHideDuration;
const end = _react.default.Children.toArray(end_);
const onClose = () => {
if ((0, _utils.is)('function', onClose_)) onClose_();
};
const addTimeout = (value = autoHideDuration) => {
clearTimeout(timeouts[id]);
timeouts[id] = setTimeout(() => onClose(), value);
refs.timeoutStart.current = new Date().getTime();
};
const removeTimeout = () => {
clearTimeout(timeouts[id]);
const start = resumeFromStart ? refs.autoHideDuration.current : refs.timeoutLeftOver.current !== undefined ? refs.timeoutLeftOver.current : refs.autoHideDuration.current;
refs.timeoutLeftOver.current = start - (new Date().getTime() - refs.timeoutStart.current);
};
const onMouseEnter = event => {
if (timeouts[id] !== undefined) removeTimeout();
if ((0, _utils.is)('function', onMouseEnter_)) onMouseEnter_(event);
};
const onMouseLeave = event_0 => {
if (refs.timeoutLeftOver.current !== undefined) addTimeout(refs.timeoutLeftOver.current);
if ((0, _utils.is)('function', onMouseLeave_)) onMouseLeave_(event_0);
};
_react.default.useEffect(() => {
var _refs$root$current;
const onTabFocus = () => {
if (refs.timeoutLeftOver.current !== undefined) addTimeout(refs.timeoutLeftOver.current);
};
const onTabBlur = () => {
if (timeouts[id] !== undefined) removeTimeout();
};
const rootDocument = (0, _utils.isEnvironment)('browser') ? ((_refs$root$current = refs.root.current) === null || _refs$root$current === void 0 ? void 0 : _refs$root$current.ownerDocument) || window.document : undefined;
rootDocument.addEventListener('focus', onTabFocus);
rootDocument.addEventListener('blur', onTabBlur);
return () => {
rootDocument.removeEventListener('focus', onTabFocus);
rootDocument.removeEventListener('blur', onTabBlur);
};
}, []);
_react.default.useEffect(() => {
if (open) {
if (autoHide && props.open !== undefined) addTimeout();
} else {
clearTimeout(timeouts[id]);
timeouts[id] = refs.timeoutStart.current = refs.timeoutLeftOver.current = undefined;
}
}, [open, autoHide]);
if (props.open !== undefined) {
if (closeButton) {
end.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(IconButton, _objectSpread(_objectSpread({
version: "text",
color: "inherit",
onClick: onClose
}, IconButtonProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(IconClose, _objectSpread({}, IconProps))
})));
}
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionComponent, _objectSpread(_objectSpread({
in: open
}, TransitionComponentProps), {}, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
ref: item => {
if (ref) {
if ((0, _utils.is)('function', ref)) ref(item);else ref.current = item;
}
refs.root.current = item;
},
tonal: tonal,
color: color,
elevation: elevation,
gap: 2,
wrap: "wrap",
direction: "row",
align: "center",
justify: "space-between",
onMouseEnter: onMouseEnter,
onMouseLeave: onMouseLeave,
Component: Line,
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Snackbar', theme) && [`onesy-Snackbar-root`, `onesy-Snackbar-size-${size}`], className, classes.root, classes[`size_${size}`], fixed && [classes.fixed, classes[`position_${position}`], classes[`alignment_${alignment}`]]])
}, other), {}, {
children: [(children !== undefined || primary !== undefined) && /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Snackbar', theme) && [`onesy-Snackbar-primary`], classes.primary]),
children: [(0, _utils.is)('string', primary) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
version: "b2",
children: primary
}) : primary, children]
}), !!end.length && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
gap: 0,
direction: "row",
wrap: "wrap",
align: "center",
justify: "flex-end",
className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Snackbar', theme) && [`onesy-Snackbar-end`], classes.end]),
children: end
})]
}))
}));
};
Snackbar.displayName = 'onesy-Snackbar';
var _default = exports.default = Snackbar;