blockstack-ui
Version:
Blockstack UI components built with css-in-js and styled-system.
336 lines (284 loc) • 10.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.default = exports.initialState = exports.actions = exports.NotificationContext = exports.Notify = void 0;
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
require("regenerator-runtime/runtime");
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
require("core-js/modules/es6.array.find-index");
require("core-js/modules/es6.object.assign");
require("core-js/modules/web.dom.iterable");
require("core-js/modules/es6.array.iterator");
require("core-js/modules/es6.string.iterator");
require("core-js/modules/es6.weak-map");
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _immer = _interopRequireDefault(require("immer"));
var _shortid = _interopRequireDefault(require("shortid"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styles = require("./styles.js");
var _messages = require("./messages");
/**
* Action Types
*/
var NOTIFICATION_ADD = 'notifications/NOTIFICATION_ADD';
var NOTIFICATION_REMOVE = 'notifications/NOTIFICATION_REMOVE';
var NOTIFICATION_LEAVE = 'notifications/NOTIFICATION_LEAVE';
var actions = {
NOTIFICATION_ADD: NOTIFICATION_ADD,
NOTIFICATION_REMOVE: NOTIFICATION_REMOVE,
NOTIFICATION_LEAVE: NOTIFICATION_LEAVE // Initial state
};
exports.actions = actions;
var initialState = {
items: [],
leaving: []
/**
* Notification Types
*/
};
exports.initialState = initialState;
var NOTIFICATION_TYPES = {
ALERT: 'notification/ALERT',
DEFAULT: 'notification/DEFAULT',
WARNING: 'notification/WARNING',
SUCCESS: 'notification/SUCCESS'
/**
* Context
*/
};
var NotificationContext = _react.default.createContext();
/**
* Our Hub
*/
exports.NotificationContext = NotificationContext;
var NotificationsHub =
/*#__PURE__*/
function (_React$Component) {
(0, _inheritsLoose2.default)(NotificationsHub, _React$Component);
function NotificationsHub() {
var _this;
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
_this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", initialState);
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "cancelMap", new WeakMap());
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "dispatch", function (_ref) {
var type = _ref.type,
payload = _ref.payload;
return _this.props.dispatch ? _this.props.dispatch({
type: type,
payload: payload
}) : _this.setState((0, _immer.default)(function (draft) {
switch (type) {
case actions.NOTIFICATION_ADD:
draft.items.push(Object.assign({
key: _shortid.default.generate()
}, payload));
break;
case actions.NOTIFICATION_REMOVE:
draft.items.splice(draft.items.findIndex(function (i) {
return i.key === payload.key;
}), 1);
break;
case actions.NOTIFICATION_LEAVE:
draft.leaving.splice(draft.leaving.findIndex(function (i) {
return i.key === payload.key;
}), 1);
break;
}
}));
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doNotify", function (notif, type) {
if (type === void 0) {
type = NOTIFICATION_TYPES.DEFAULT;
}
var isString = typeof notif === 'string';
var notification = isString ? {
message: notif
} : notif;
_this.dispatch({
type: NOTIFICATION_ADD,
payload: Object.assign({}, notification, {
type: type
})
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doNotifyAlert", function (notif) {
return _this.doNotify(notif, NOTIFICATION_TYPES.ALERT);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doNotifyWarning", function (notif) {
return _this.doNotify(notif, NOTIFICATION_TYPES.WARNING);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doNotifySuccess", function (notif) {
return _this.doNotify(notif, NOTIFICATION_TYPES.SUCCESS);
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doRemove", function (item) {
return _this.dispatch({
type: NOTIFICATION_REMOVE,
payload: item
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doCancel", function (item, secondPass) {
if (secondPass === void 0) {
secondPass = false;
}
if (_this.cancelMap.has(item)) {
var fn = _this.cancelMap.get(item);
fn();
if (secondPass) fn();
}
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "config", function (item, state) {
var _this$props = _this.props,
config = _this$props.config,
timeout = _this$props.timeout;
return state === 'leave' ? [{
duration: timeout
}, config, config] : config;
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "doLeaveNotification", function (item) {
return _this.dispatch({
type: NOTIFICATION_LEAVE,
payload: item
});
});
(0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "leave", function (item) {
return (
/*#__PURE__*/
function () {
var _ref2 = (0, _asyncToGenerator2.default)(
/*#__PURE__*/
_regenerator.default.mark(function _callee(next, cancel) {
return _regenerator.default.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_this.cancelMap.set(item, cancel);
_context.next = 3;
return next({
to: {
life: 0
}
});
case 3:
_context.next = 5;
return next({
to: {
opacity: 0
}
});
case 5:
_context.next = 7;
return next({
to: {
height: 0
}
}, true);
case 7:
// use either the connected redux action, or the local one
_this.props.doLeaveNotification ? _this.props.doLeaveNotification(item) : _this.doLeaveNotification(item);
case 8:
case "end":
return _context.stop();
}
}
}, _callee);
}));
return function (_x, _x2) {
return _ref2.apply(this, arguments);
};
}()
);
});
return _this;
}
var _proto = NotificationsHub.prototype;
_proto.render = function render() {
var _this$props2 = this.props,
showIndicator = _this$props2.showIndicator,
canClose = _this$props2.canClose,
position = _this$props2.position,
top = _this$props2.top,
children = _this$props2.children;
return _react.default.createElement(NotificationContext.Provider, {
value: {
items: this.props.items || this.state.items,
leaving: this.props.leaving || this.state.leaving,
remove: this.props.doRemove || this.doRemove,
leave: this.leave,
config: this.config,
doNotify: this.props.doNotify || this.doNotify,
doNotifyAlert: this.props.doNotifyAlert || this.doNotifyAlert,
doNotifyWarning: this.props.doNotifyWarning || this.doNotifyWarning,
doNotifySuccess: this.props.doNotifySuccess || this.doNotifySuccess,
cancel: this.doCancel,
showIndicator: showIndicator,
canClose: canClose,
position: position,
top: top
}
}, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_styles.Container, {
position: position,
top: top
}, _react.default.createElement(_messages.Messages, null)), children));
};
return NotificationsHub;
}(_react.default.Component);
/**
* Notify
* This is a render props component that can allow you to wrap something with
* our actions to display notifications
*/
(0, _defineProperty2.default)(NotificationsHub, "defaultProps", {
config: {
tension: 125,
friction: 20,
precision: 0.1
},
// react-spring config
timeout: 2400,
// lifetime of the notification in ms
canClose: true,
// shows an X button to dismiss
threshold: Infinity,
// limit of notifications on screen
position: 'end',
// start | center | end
top: true // top || bottom
});
var Notify = function Notify(_ref3) {
var notification = _ref3.notification,
type = _ref3.type,
children = _ref3.children,
rest = (0, _objectWithoutPropertiesLoose2.default)(_ref3, ["notification", "type", "children"]);
return _react.default.createElement(NotificationContext.Consumer, null, function (_ref4) {
var doNotify = _ref4.doNotify,
doNotifyAlert = _ref4.doNotifyAlert,
doNotifyWarning = _ref4.doNotifyWarning,
doNotifySuccess = _ref4.doNotifySuccess;
return children({
bind: {
onClick: function onClick() {
return doNotify(notification, type);
}
},
doNotify: doNotify,
doNotifyAlert: doNotifyAlert,
doNotifyWarning: doNotifyWarning,
doNotifySuccess: doNotifySuccess
});
});
};
exports.Notify = Notify;
Notify.propTypes = {
notification: _propTypes.default.any,
children: _propTypes.default.func,
type: _propTypes.default.oneOf(['default', 'alert', 'warning', 'success'])
};
var _default = NotificationsHub;
exports.default = _default;