@vimeo/iris
Version:
Vimeo Design System
121 lines (114 loc) • 6.22 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var components_Notification_Notification_style = require('./Notification.style.js');
var components_Notification_Notification_state = require('./Notification.state.js');
var utils_HOCs_withIris = require('../../utils/HOCs/withIris.js');
require('styled-components');
require('polished');
require('../../themes/index.js');
require('../../color/colors.js');
require('../../typography/Paragraph/Paragraph.js');
require('../../typography/Paragraph/Paragraph.style.js');
require('../../typography/Text/Text.js');
require('../../typography/Text/Text.style.js');
require('../../typography/typography.js');
require('../../tokens/core.js');
require('../../tokens/color/index.js');
require('../../tokens/color/background/background.js');
require('../../tokens/util/readToken.js');
require('../../tokens/util/clamp.js');
require('../../tokens/color/format/format.js');
require('../../tokens/color/format/primary.js');
require('../../tokens/color/format/secondary.js');
require('../../tokens/color/format/tertiary.js');
require('../../tokens/color/rainbow/rainbow.js');
require('../../tokens/color/rainbow/conic/index.js');
require('../../tokens/color/rainbow/conic/sm.js');
require('../../tokens/color/rainbow/conic/xl.js');
require('../../tokens/color/rainbow/linear/index.js');
require('../../tokens/color/rainbow/linear/sm.js');
require('../../tokens/color/rainbow/linear/xl.js');
require('../../tokens/color/livestream/livestream.js');
require('../../tokens/color/status/status.js');
require('../../tokens/color/status/caution.js');
require('../../tokens/color/status/negative.js');
require('../../tokens/color/status/positive.js');
require('../../tokens/color/stroke/stroke.js');
require('../../tokens/color/surface/surface.js');
require('../../tokens/color/text/text.js');
require('../../tokens/util/round.js');
require('../../tokens/color/upsell/upsell.js');
require('../../tokens/color/upsell/sm.js');
require('../../tokens/color/upsell/xl.js');
require('../../tokens/color/upsell/new.js');
require('../../tokens/edge/edge.js');
require('../../tokens/space/space.js');
require('../../tokens/typography/index.js');
require('../../tokens/typography/size/size.js');
require('../../typography/Text/EditableText.js');
require('../../utils/hooks/useLayoutStyles.js');
require('../../utils/DOM/geometry.js');
require('../../utils/css.js');
require('../../icons/ui/CircleInfo.js');
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var Notification = utils_HOCs_withIris.withIris(NotficationComponent);
function NotficationComponent(_a) {
var _b = _a.automatic, automatic = _b === void 0 ? false : _b, action = _a.action, actionLabel = _a.actionLabel, _c = _a.children, children = _c === void 0 ? null : _c, _d = _a.status, status = _d === void 0 ? 'negative' : _d, forwardRef = _a.forwardRef, _e = _a.duration, duration = _e === void 0 ? 4000 : _e, content = _a.content, onComplete = _a.onComplete, props = tslib_es6.__rest(_a, ["automatic", "action", "actionLabel", "children", "status", "forwardRef", "duration", "content", "onComplete"]);
var controlled = typeof props.showing !== 'undefined';
var initialState = {
active: automatic,
showing: automatic,
time: duration,
};
React.useEffect(function () {
if (controlled) {
dispatch(props.showing ? 'SHOW' : 'HIDE');
dispatch(props.showing ? 'RESUME' : 'PAUSE');
dispatch('RESET');
}
}, [controlled, props.showing]);
var _f = tslib_es6.__read(React.useReducer(components_Notification_Notification_state.reducer(duration), initialState), 2), _g = _f[0], showing = _g.showing, time = _g.time, active = _g.active, dispatch = _f[1];
var toggle = React.useCallback(function () {
if (active)
dispatch('PAUSE');
if (!active)
dispatch('RESUME');
if (showing)
dispatch('HIDE');
if (!showing)
dispatch('SHOW');
dispatch('RESET');
}, [active, showing]);
var pause = function () { return dispatch('PAUSE'); };
var resume = function () { return dispatch('RESUME'); };
var finish = React.useCallback(function () {
dispatch('PAUSE');
dispatch('HIDE');
onComplete && onComplete();
}, [onComplete]);
React.useEffect(function () {
var timer = setInterval(function () { return dispatch('TICK'); }, 100);
if (time <= 0)
finish();
if (!active)
clearInterval(timer);
return function () { return clearInterval(timer); };
}, [active, time, finish]);
var icon = status === 'negative' &&
typeof content === 'string' && (React__default["default"].createElement("span", null,
React__default["default"].createElement(components_Notification_Notification_style.Icon, null)));
return (React__default["default"].createElement(React__default["default"].Fragment, null,
children && React__default["default"].createElement("div", { onClick: toggle }, children),
(showing || props.showing) && (React__default["default"].createElement(components_Notification_Notification_style.Wrapper, null,
React__default["default"].createElement(components_Notification_Notification_style.Notification, tslib_es6.__assign({ icon: icon, status: status, duration: duration, actionLabel: actionLabel, onMouseEnter: pause, onMouseLeave: resume, ref: forwardRef }, props),
React__default["default"].createElement(components_Notification_Notification_style.Content, null,
icon,
content,
actionLabel && (React__default["default"].createElement("span", null,
"\u00A0",
React__default["default"].createElement(components_Notification_Notification_style.Action, { href: "#", onClick: action.onClick }, actionLabel)))))))));
}
exports.Notification = Notification;