@wix/design-system
Version:
@wix/design-system
365 lines (364 loc) • 12.6 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.STICKY_NOTIFICATION = exports.LOCAL_NOTIFICATION = exports.GLOBAL_NOTIFICATION = exports.DEFAULT_TIMEOUT = exports.DEFAULT_AUTO_HIDE_TIMEOUT = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _CloseButton = _interopRequireDefault(require("../CloseButton"));
var _TextLabel = _interopRequireDefault(require("./TextLabel"));
var _ActionButton = _interopRequireDefault(require("./ActionButton"));
var _NotificationSt = require("./Notification.st.css.js");
var _wixUiIconsCommon = require("@wix/wix-ui-icons-common");
var _constants = require("./constants");
var _constants2 = require("../Transition/constants");
var _deprecationLog = _interopRequireDefault(require("../utils/deprecationLog"));
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Notification/Notification.js";
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
var LOCAL_NOTIFICATION = exports.LOCAL_NOTIFICATION = 'local';
var GLOBAL_NOTIFICATION = exports.GLOBAL_NOTIFICATION = 'global';
var STICKY_NOTIFICATION = exports.STICKY_NOTIFICATION = 'sticky';
var DEFAULT_AUTO_HIDE_TIMEOUT = exports.DEFAULT_AUTO_HIDE_TIMEOUT = 6000;
var DEFAULT_TIMEOUT = exports.DEFAULT_TIMEOUT = DEFAULT_AUTO_HIDE_TIMEOUT;
var animationsTimeouts = {
enter: 300,
exit: 300
};
var skinIcon = {
error: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusAlert, {
className: _NotificationSt.classes.iconStyling,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 28,
columnNumber: 10
}
}),
success: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusComplete, {
className: _NotificationSt.classes.iconStyling,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 29,
columnNumber: 12
}
}),
warning: /*#__PURE__*/_react.default.createElement(_wixUiIconsCommon.StatusWarning, {
className: _NotificationSt.classes.iconStyling,
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 30,
columnNumber: 12
}
})
};
function mapChildren(children) {
var childrenArray = _react.Children.toArray(children);
return childrenArray.reduce((childrenAsMap, child) => {
switch (child.type.displayName) {
case 'Notification.TextLabel':
childrenAsMap.label = child;
break;
case 'Notification.ActionButton':
childrenAsMap.ctaButton = child;
break;
case 'Notification.CloseButton':
childrenAsMap.closeButton = /*#__PURE__*/_react.default.cloneElement(child, {
size: 'small'
});
break;
default:
break;
}
return childrenAsMap;
}, {});
}
class Notification extends _react.default.PureComponent {
constructor() {
super(...arguments);
this.closeTimeout = void 0;
this.transitionTimeout = void 0;
this.ref = /*#__PURE__*/_react.default.createRef();
this.childRef = /*#__PURE__*/_react.default.createRef();
this.state = {
hideByCloseClick: false,
hideByTimer: false,
height: 0,
showChildren: false
};
this._hideNotificationOnCloseClick = () => {
this.setState({
hideByCloseClick: true
});
setTimeout(() => this.props.onClose && this.props.onClose('hide-by-close-click'), animationsTimeouts.exit + 100);
};
this._hideNotificationOnTimeout = () => {
this.setState({
hideByTimer: true
});
setTimeout(() => this.props.onClose && this.props.onClose('hide-by-timer'), animationsTimeouts.exit + 100);
};
}
UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.show) {
this._setChildrenVisibility(nextProps);
this._bypassCloseFlags();
this._clearCloseTimeout();
this._startCloseTimer(nextProps);
}
}
componentDidMount() {
this._setChildrenVisibility(this.props);
this._startCloseTimer(this.props);
}
componentWillUnmount() {
this._clearCloseTimeout();
this._clearTransitionTimeout();
}
componentDidUpdate(prevProps, prevState) {
var {
showChildren,
height,
hideByCloseClick,
hideByTimer
} = this.state;
if (prevProps.show !== this.props.show || prevState.showChildren !== this.state.showChildren) {
var show = this._shouldShowNotification(this.props.show);
if (show) {
if (showChildren && this.ref.current && height === 0) {
this.setState({
height: this._setHeightToChild(this.ref.current)
});
}
} else {
if (showChildren && height !== 0) {
this.setState({
height: 0
});
}
}
}
if (prevProps.hideByCloseClick !== hideByCloseClick || prevProps.hideByTimer !== hideByTimer) {
this._setChildrenVisibility(this.props);
}
}
_setChildrenVisibility(_ref) {
var {
show
} = _ref;
if (this._shouldShowNotification(show)) {
this.setState({
showChildren: true
});
} else {
this.setState({
height: 0
});
this.transitionTimeout = setTimeout(() => {
this.transitionTimeout && this.setState({
showChildren: false
});
}, _constants2.timingMap['medium01']);
}
}
_clearTransitionTimeout() {
if (this.transitionTimeout) {
clearTimeout(this.transitionTimeout);
this.transitionTimeout = null;
}
}
_startCloseTimer(_ref2) {
var {
autoHideTimeout
} = _ref2;
if (autoHideTimeout) {
this.closeTimeout = setTimeout(() => this._hideNotificationOnTimeout(), autoHideTimeout || DEFAULT_AUTO_HIDE_TIMEOUT);
}
}
_clearCloseTimeout() {
if (this.closeTimeout) {
clearTimeout(this.closeTimeout);
this.closeTimeout = null;
}
}
_bypassCloseFlags() {
this.setState({
hideByCloseClick: false,
hideByTimer: false
});
}
_shouldShowNotification(show) {
return show && !this.state.hideByCloseClick && !this.state.hideByTimer;
}
_setHeightToChild(node) {
var height = this.childRef && this.childRef.current ? this.childRef.current.offsetHeight : 0;
if (node && node.firstChild) {
node.firstChild.style.height = "".concat(height, "px");
}
return height;
}
_getChildren() {
if (!this.state.showChildren) {
return null;
}
var {
theme,
children
} = this.props;
var skin = this.props.skin || theme;
var childrenComponents = mapChildren(children);
return /*#__PURE__*/_react.default.createElement("div", {
className: _NotificationSt.classes.wrapper,
style: {
overflow: 'hidden',
transition: "height ".concat(_constants2.timingMap['medium01'], "ms"),
height: this.state.height
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 199,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.notificationContent,
className: _NotificationSt.classes.notification,
role: "alert",
"aria-labelledby": "notification-label",
"aria-live": "polite",
ref: this.childRef,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 207,
columnNumber: 9
}
}, skinIcon[skin] && /*#__PURE__*/_react.default.createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 215,
columnNumber: 30
}
}, skinIcon[skin]), /*#__PURE__*/_react.default.createElement("div", {
className: _NotificationSt.classes.labelWrapper,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 217,
columnNumber: 11
}
}, childrenComponents.label, childrenComponents.ctaButton), childrenComponents.closeButton && /*#__PURE__*/_react.default.createElement("div", {
"data-hook": _constants.dataHooks.notificationCloseButton,
className: _NotificationSt.classes.closeButton,
onClick: this._hideNotificationOnCloseClick,
children: childrenComponents.closeButton,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 223,
columnNumber: 13
}
})));
}
render() {
var {
dataHook,
theme,
type,
zIndex
} = this.props;
var skin = this.props.skin || theme;
if (theme) {
(0, _deprecationLog.default)('<Notification/> - theme prop is deprecated and will be removed in next major version, please use skin instead');
}
return /*#__PURE__*/_react.default.createElement("div", {
className: (0, _NotificationSt.st)(_NotificationSt.classes.root, {
skin,
type
}),
style: {
zIndex
},
"data-hook": dataHook,
"data-skin": skin,
"data-type": type,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 246,
columnNumber: 7
}
}, /*#__PURE__*/_react.default.createElement("div", {
className: _NotificationSt.classes.animator,
style: {
overflow: 'hidden',
transition: "height ".concat(_constants2.timingMap['medium01'], "ms"),
height: this.state.height
},
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 253,
columnNumber: 9
}
}, /*#__PURE__*/_react.default.createElement("div", {
ref: this.ref,
className: _NotificationSt.classes.animatorContent,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 261,
columnNumber: 11
}
}, this._getChildren())));
}
}
var Close = props => /*#__PURE__*/_react.default.createElement(_CloseButton.default, (0, _extends2.default)({
skin: "lightFilled"
}, props, {
__self: void 0,
__source: {
fileName: _jsxFileName,
lineNumber: 270,
columnNumber: 24
}
}));
Close.displayName = 'Notification.CloseButton';
Notification.displayName = 'Notification';
Notification.propTypes = {
/** when set to `true`, notification is shown */
show: _propTypes.default.bool,
/** Notification skin */
skin: _propTypes.default.oneOf(['standard', 'error', 'success', 'warning', 'premium']),
/** @deprecated use `skin` instead */
theme: _propTypes.default.oneOf(['standard', 'error', 'success', 'warning', 'premium']),
/** Sets how <Notification/> should be displayed:
* - `type="global"` will take up space and push the content down.
* - `type="local"` will not take up space and will be displayed on top of content
* - `type="sticky"` will not take up space and will be displayed at the top of whole page and on top of content (position: fixed;)
* */
type: _propTypes.default.oneOf([GLOBAL_NOTIFICATION, LOCAL_NOTIFICATION, STICKY_NOTIFICATION]),
/** When provided, then the Notification will be hidden after the specified timeout. */
autoHideTimeout: _propTypes.default.number,
/** Notification z-index */
zIndex: _propTypes.default.number,
onClose: _propTypes.default.func,
/** Can be either:
* - `<Notification.TextLabel/>` (required)
* - `<Notification.CloseButton/>`
* - `<Notification.ActionButton/>` */
children: _propTypes.default.node
};
Notification.defaultProps = {
theme: 'standard',
// TODO: add default value for skin once theme is removed
type: GLOBAL_NOTIFICATION,
onClose: null
};
Notification.CloseButton = Close;
Notification.TextLabel = _TextLabel.default;
Notification.ActionButton = _ActionButton.default;
var _default = exports.default = Notification;
//# sourceMappingURL=Notification.js.map