Started adding frontend notifications, fixing firefox file upload bug

This commit is contained in:
2018-01-22 19:03:06 -05:00
parent f14e96c490
commit 5856052f82
1536 changed files with 109746 additions and 2658 deletions

View File

@@ -0,0 +1,56 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; /* eslint react/require-default-props: 0 */
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _glamor = require('glamor');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var rule = function rule(isDefault) {
return (0, _glamor.css)({
color: isDefault ? '#000' : '#fff',
fontWeight: 'bold',
fontSize: '14px',
background: 'transparent',
outline: 'none',
border: 'none',
padding: 0,
cursor: 'pointer',
opacity: isDefault ? '0.3' : '0.7',
transition: '.3s ease',
alignSelf: 'flex-start',
':hover, :focus': {
opacity: 1
}
});
};
function DefaultCloseButton(_ref) {
var closeToast = _ref.closeToast,
type = _ref.type;
return _react2.default.createElement(
'button',
_extends({}, rule(type === 'default'), { type: 'button', onClick: closeToast }),
'\u2716'
);
}
DefaultCloseButton.propTypes = {
closeToast: _propTypes2.default.func
};
exports.default = DefaultCloseButton;

View File

@@ -0,0 +1,77 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _Transition = require('react-transition-group/Transition');
var _Transition2 = _interopRequireDefault(_Transition);
var _glamor = require('glamor');
var _animation2 = require('./animation');
var _animation3 = _interopRequireDefault(_animation2);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var animate = {
animationDuration: '0.75s',
animationFillMode: 'both'
};
var animation = function animation(pos) {
var _getAnimation = (0, _animation3.default)(pos),
enter = _getAnimation.enter,
exit = _getAnimation.exit;
var enterAnimation = _glamor.css.keyframes('enter', _extends({
'from, 60%, 75%, 90%, to': {
animationTimingFunction: 'cubic-bezier(0.215, 0.610, 0.355, 1.000)'
}
}, enter));
var exitAnimation = _glamor.css.keyframes('exit', exit);
return {
enter: (0, _glamor.css)(_extends({}, animate, { animationName: enterAnimation })),
exit: (0, _glamor.css)(_extends({}, animate, { animationName: exitAnimation }))
};
};
function DefaultTransition(_ref) {
var children = _ref.children,
position = _ref.position,
props = _objectWithoutProperties(_ref, ['children', 'position']);
var _animation = animation(position),
enter = _animation.enter,
exit = _animation.exit;
return _react2.default.createElement(
_Transition2.default,
_extends({}, props, {
timeout: 750,
onEnter: function onEnter(node) {
return node.classList.add(enter);
},
onEntered: function onEntered(node) {
return node.classList.remove(enter);
},
onExit: function onExit(node) {
return node.classList.add(exit);
}
}),
children
);
}
exports.default = DefaultTransition;

View File

@@ -0,0 +1,99 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _glamor = require('glamor');
var _constant = require('./constant');
var _style = require('./style');
var _style2 = _interopRequireDefault(_style);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var trackProgress = _glamor.css.keyframes('track-progress', {
'0%': { width: '100%' },
'100%': { width: 0 }
});
var progress = function progress(type, isRunning, hide, delay) {
return (0, _glamor.css)(_extends({
position: 'absolute',
bottom: 0,
left: 0,
width: 0,
height: '5px',
zIndex: _style2.default.zIndex,
opacity: hide ? 0 : 0.7,
animation: trackProgress + ' linear 1',
animationPlayState: isRunning ? 'running' : 'paused',
animationDuration: delay + 'ms',
backgroundColor: 'rgba(255,255,255,.7)'
}, type === 'default' ? { background: _style2.default.colorProgressDefault } : {}));
};
function ProgressBar(_ref) {
var delay = _ref.delay,
isRunning = _ref.isRunning,
closeToast = _ref.closeToast,
type = _ref.type,
hide = _ref.hide,
className = _ref.className;
return _react2.default.createElement('div', _extends({}, typeof className !== 'string' ? (0, _glamor.css)(progress(type, isRunning, hide, delay), className) : progress(type, isRunning, hide, delay), typeof className === 'string' && { className: className }, {
onAnimationEnd: closeToast
}));
}
ProgressBar.propTypes = {
/**
* The animation delay which determine when to close the toast
*/
delay: _propTypes2.default.number.isRequired,
/**
* Whether or not the animation is running or paused
*/
isRunning: _propTypes2.default.bool.isRequired,
/**
* Func to close the current toast
*/
closeToast: _propTypes2.default.func.isRequired,
/**
* Optional type : info, success ...
*/
type: _propTypes2.default.string,
/**
* Hide or not the progress bar
*/
hide: _propTypes2.default.bool,
/**
* Optionnal className
*/
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object])
};
ProgressBar.defaultProps = {
type: _constant.TYPE.DEFAULT,
hide: false,
className: ''
};
exports.default = ProgressBar;

217
goTorrentWebUI/node_modules/react-toastify/lib/Toast.js generated vendored Normal file
View File

@@ -0,0 +1,217 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _glamor = require('glamor');
var _ProgressBar = require('./ProgressBar');
var _ProgressBar2 = _interopRequireDefault(_ProgressBar);
var _constant = require('./constant');
var _style = require('./style');
var _style2 = _interopRequireDefault(_style);
var _propValidator = require('./util/propValidator');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var toast = function toast(type) {
return (0, _glamor.css)(_extends({
position: 'relative',
minHeight: '48px',
marginBottom: '1rem',
padding: '8px',
borderRadius: '1px',
boxShadow: '0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05)',
display: 'flex',
justifyContent: 'space-between',
maxHeight: '800px',
overflow: 'hidden',
fontFamily: _style2.default.fontFamily,
cursor: 'pointer',
background: _style2.default['color' + type.charAt(0).toUpperCase() + type.slice(1)]
}, type === 'default' ? { color: '#aaa' } : {}, _defineProperty({}, '@media ' + _style2.default.mobile, {
marginBottom: 0
})));
};
var body = (0, _glamor.css)({
margin: 'auto 0',
flex: 1
});
var Toast = function (_Component) {
_inherits(Toast, _Component);
function Toast() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, Toast);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = Toast.__proto__ || Object.getPrototypeOf(Toast)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
isRunning: true
}, _this.pauseToast = function () {
_this.setState({ isRunning: false });
}, _this.playToast = function () {
_this.setState({ isRunning: true });
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(Toast, [{
key: 'componentDidMount',
value: function componentDidMount() {
this.props.onOpen !== null && this.props.onOpen(this.getChildrenProps());
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
if (this.props.isDocumentHidden !== nextProps.isDocumentHidden) {
this.setState({
isRunning: !nextProps.isDocumentHidden
});
}
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
this.props.onClose !== null && this.props.onClose(this.getChildrenProps());
}
}, {
key: 'getChildrenProps',
value: function getChildrenProps() {
return this.props.children.props;
}
}, {
key: 'getToastProps',
value: function getToastProps() {
var toastProps = {};
if (this.props.autoClose !== false && this.props.pauseOnHover === true) {
toastProps.onMouseEnter = this.pauseToast;
toastProps.onMouseLeave = this.playToast;
}
typeof this.props.className === 'string' && (toastProps.className = this.props.className);
this.props.closeOnClick && (toastProps.onClick = this.props.closeToast);
return toastProps;
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
closeButton = _props.closeButton,
children = _props.children,
autoClose = _props.autoClose,
type = _props.type,
hideProgressBar = _props.hideProgressBar,
closeToast = _props.closeToast,
Transition = _props.transition,
position = _props.position,
onExited = _props.onExited,
className = _props.className,
bodyClassName = _props.bodyClassName,
progressClassName = _props.progressClassName,
updateId = _props.updateId;
return _react2.default.createElement(
Transition,
{
'in': this.props.in,
appear: true,
unmountOnExit: true,
onExited: onExited,
position: position
},
_react2.default.createElement(
'div',
_extends({}, typeof className !== 'string' ? (0, _glamor.css)(toast(type), className) : toast(type), this.getToastProps()),
_react2.default.createElement(
'div',
_extends({}, typeof bodyClassName !== 'string' ? (0, _glamor.css)(body, bodyClassName) : body, typeof bodyClassName === 'string' && {
className: bodyClassName
}),
children
),
closeButton !== false && closeButton,
autoClose !== false && _react2.default.createElement(_ProgressBar2.default, {
key: 'pb-' + updateId,
delay: autoClose,
isRunning: this.state.isRunning,
closeToast: closeToast,
hide: hideProgressBar,
type: type,
className: progressClassName
})
)
);
}
}]);
return Toast;
}(_react.Component);
Toast.propTypes = {
closeButton: _propValidator.falseOrElement.isRequired,
autoClose: _propValidator.falseOrDelay.isRequired,
children: _propTypes2.default.node.isRequired,
closeToast: _propTypes2.default.func.isRequired,
position: _propTypes2.default.oneOf((0, _propValidator.objectValues)(_constant.POSITION)).isRequired,
pauseOnHover: _propTypes2.default.bool.isRequired,
closeOnClick: _propTypes2.default.bool.isRequired,
transition: _propTypes2.default.func.isRequired,
isDocumentHidden: _propTypes2.default.bool.isRequired,
in: _propTypes2.default.bool,
onExited: _propTypes2.default.func,
hideProgressBar: _propTypes2.default.bool,
onOpen: _propTypes2.default.func,
onClose: _propTypes2.default.func,
type: _propTypes2.default.oneOf((0, _propValidator.objectValues)(_constant.TYPE)),
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
bodyClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
progressClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
updateId: _propTypes2.default.number
};
Toast.defaultProps = {
type: _constant.TYPE.DEFAULT,
in: true,
hideProgressBar: false,
onOpen: null,
onClose: null,
className: '',
bodyClassName: '',
progressClassName: '',
updateId: null
};
exports.default = Toast;

View File

@@ -0,0 +1,399 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _glamor = require('glamor');
var _TransitionGroup = require('react-transition-group/TransitionGroup');
var _TransitionGroup2 = _interopRequireDefault(_TransitionGroup);
var _Toast = require('./Toast');
var _Toast2 = _interopRequireDefault(_Toast);
var _DefaultCloseButton = require('./DefaultCloseButton');
var _DefaultCloseButton2 = _interopRequireDefault(_DefaultCloseButton);
var _DefaultTransition = require('./DefaultTransition');
var _DefaultTransition2 = _interopRequireDefault(_DefaultTransition);
var _constant = require('./constant');
var _style = require('./style');
var _style2 = _interopRequireDefault(_style);
var _EventManager = require('./util/EventManager');
var _EventManager2 = _interopRequireDefault(_EventManager);
var _propValidator = require('./util/propValidator');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
var toastPosition = function toastPosition(pos) {
var positionKey = pos.toUpperCase().replace('-', '_');
var positionRule = typeof _constant.POSITION[positionKey] !== 'undefined' ? _style2.default[positionKey] : _style2.default.TOP_RIGHT;
/** define margin for center toast based on toast witdh */
if (positionKey.indexOf('CENTER') !== -1 && typeof positionRule.marginLeft === 'undefined') {
positionRule.marginLeft = '-' + parseInt(_style2.default.width, 10) / 2 + 'px';
}
return (0, _glamor.css)(positionRule, (0, _glamor.css)(_defineProperty({}, '@media ' + _style2.default.mobile, _extends({
left: 0,
margin: 0,
position: 'fixed'
}, pos.substring(0, 3) === 'top' ? { top: 0 } : { bottom: 0 }))));
};
var container = function container(disablePointer, position) {
return (0, _glamor.css)(_extends({
zIndex: _style2.default.zIndex,
position: 'fixed',
padding: '4px',
width: _style2.default.width,
boxSizing: 'border-box',
color: '#fff'
}, disablePointer ? { pointerEvents: 'none' } : {}, _defineProperty({}, '@media ' + _style2.default.mobile, {
width: '100vw',
padding: 0
})), toastPosition(position));
};
var ToastContainer = function (_Component) {
_inherits(ToastContainer, _Component);
function ToastContainer() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, ToastContainer);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ToastContainer.__proto__ || Object.getPrototypeOf(ToastContainer)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
toast: [],
isDocumentHidden: false
}, _this.collection = {}, _this.isDocumentHidden = function () {
return _this.setState({ isDocumentHidden: document.hidden });
}, _this.isToastActive = function (id) {
return _this.state.toast.indexOf(parseInt(id, 10)) !== -1;
}, _temp), _possibleConstructorReturn(_this, _ret);
}
/**
* Hold toast ids
*/
/**
* Hold toast's informations:
* - what to render
* - position
* - raw content
* - options
*/
_createClass(ToastContainer, [{
key: 'componentDidMount',
value: function componentDidMount() {
var _this2 = this;
var SHOW = _constant.ACTION.SHOW,
CLEAR = _constant.ACTION.CLEAR,
MOUNTED = _constant.ACTION.MOUNTED;
_EventManager2.default.on(SHOW, function (content, options) {
return _this2.show(content, options);
}).on(CLEAR, function (id) {
return id !== null ? _this2.removeToast(id) : _this2.clear();
}).emit(MOUNTED, this);
document.addEventListener('visibilitychange', this.isDocumentHidden);
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
_EventManager2.default.off(_constant.ACTION.SHOW);
_EventManager2.default.off(_constant.ACTION.CLEAR);
document.removeEventListener('visibilitychange', this.isDocumentHidden);
}
}, {
key: 'removeToast',
value: function removeToast(id) {
this.setState({
toast: this.state.toast.filter(function (v) {
return v !== parseInt(id, 10);
})
});
}
}, {
key: 'makeCloseButton',
value: function makeCloseButton(toastClose, toastId, type) {
var _this3 = this;
var closeButton = this.props.closeButton;
if ((0, _react.isValidElement)(toastClose) || toastClose === false) {
closeButton = toastClose;
}
return closeButton === false ? false : (0, _react.cloneElement)(closeButton, {
closeToast: function closeToast() {
return _this3.removeToast(toastId);
},
type: type
});
}
}, {
key: 'getAutoCloseDelay',
value: function getAutoCloseDelay(toastAutoClose) {
return toastAutoClose === false || (0, _propValidator.isValidDelay)(toastAutoClose) ? toastAutoClose : this.props.autoClose;
}
}, {
key: 'isFunction',
value: function isFunction(object) {
return !!(object && object.constructor && object.call && object.apply);
}
}, {
key: 'canBeRendered',
value: function canBeRendered(content) {
return (0, _react.isValidElement)(content) || typeof content === 'string' || typeof content === 'number' || this.isFunction(content);
}
}, {
key: 'show',
value: function show(content, options) {
var _this4 = this;
if (!this.canBeRendered(content)) {
throw new Error('The element you provided cannot be rendered. You provided an element of type ' + (typeof content === 'undefined' ? 'undefined' : _typeof(content)));
}
var toastId = options.toastId;
var closeToast = function closeToast() {
return _this4.removeToast(toastId);
};
var toastOptions = {
id: toastId,
type: options.type,
closeToast: closeToast,
updateId: options.updateId,
position: options.position || this.props.position,
transition: options.transition || this.props.transition,
className: options.className || this.props.toastClassName,
bodyClassName: options.bodyClassName || this.props.bodyClassName,
closeButton: this.makeCloseButton(options.closeButton, toastId, options.type),
pauseOnHover: options.pauseOnHover !== null ? options.pauseOnHover : this.props.pauseOnHover,
closeOnClick: options.closeOnClick !== null ? options.closeOnClick : this.props.closeOnClick,
progressClassName: options.progressClassName || this.props.progressClassName,
autoClose: this.getAutoCloseDelay(options.autoClose !== false ? parseInt(options.autoClose, 10) : options.autoClose),
hideProgressBar: typeof options.hideProgressBar === 'boolean' ? options.hideProgressBar : this.props.hideProgressBar
};
this.isFunction(options.onOpen) && (toastOptions.onOpen = options.onOpen);
this.isFunction(options.onClose) && (toastOptions.onClose = options.onClose);
/**
* add closeToast function to react component only
*/
if ((0, _react.isValidElement)(content) && typeof content.type !== 'string' && typeof content.type !== 'number') {
content = (0, _react.cloneElement)(content, {
closeToast: closeToast
});
} else if (this.isFunction(content)) {
content = content({ closeToast: closeToast });
}
this.collection = _extends({}, this.collection, _defineProperty({}, toastId, {
position: toastOptions.position,
options: toastOptions,
content: content
}));
this.setState({
toast: toastOptions.updateId !== null ? [].concat(_toConsumableArray(this.state.toast)) : [].concat(_toConsumableArray(this.state.toast), [toastId])
});
}
}, {
key: 'makeToast',
value: function makeToast(content, options) {
return _react2.default.createElement(
_Toast2.default,
_extends({}, options, {
isDocumentHidden: this.state.isDocumentHidden,
key: 'toast-' + options.id
}),
content
);
}
}, {
key: 'clear',
value: function clear() {
this.setState({ toast: [] });
}
}, {
key: 'renderToast',
value: function renderToast() {
var _this5 = this;
var toastToRender = {};
var _props = this.props,
className = _props.className,
style = _props.style,
newestOnTop = _props.newestOnTop;
var collection = newestOnTop ? Object.keys(this.collection).reverse() : Object.keys(this.collection);
collection.forEach(function (toastId) {
var item = _this5.collection[toastId];
toastToRender[item.position] || (toastToRender[item.position] = []);
if (_this5.state.toast.indexOf(parseInt(toastId, 10)) !== -1) {
toastToRender[item.position].push(_this5.makeToast(item.content, item.options));
} else {
toastToRender[item.position].push(null);
delete _this5.collection[toastId];
}
});
return Object.keys(toastToRender).map(function (position) {
var disablePointer = toastToRender[position].length === 1 && toastToRender[position][0] === null;
return _react2.default.createElement(
_TransitionGroup2.default,
_extends({}, typeof className !== 'string' ? (0, _glamor.css)(container(disablePointer, position), className) : container(disablePointer, position), typeof className === 'string' && { className: className }, style !== null && { style: style }, {
key: 'container-' + position
}),
toastToRender[position]
);
});
}
}, {
key: 'render',
value: function render() {
return _react2.default.createElement(
'div',
null,
this.renderToast()
);
}
}]);
return ToastContainer;
}(_react.Component);
ToastContainer.propTypes = {
/**
* Set toast position
*/
position: _propTypes2.default.oneOf((0, _propValidator.objectValues)(_constant.POSITION)),
/**
* Disable or set autoClose delay
*/
autoClose: _propValidator.falseOrDelay,
/**
* Disable or set a custom react element for the close button
*/
closeButton: _propValidator.falseOrElement,
/**
* Hide or not progress bar when autoClose is enabled
*/
hideProgressBar: _propTypes2.default.bool,
/**
* Pause toast duration on hover
*/
pauseOnHover: _propTypes2.default.bool,
/**
* Dismiss toast on click
*/
closeOnClick: _propTypes2.default.bool,
/**
* Newest on top
*/
newestOnTop: _propTypes2.default.bool,
/**
* An optional className
*/
className: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
/**
* An optional style
*/
style: _propTypes2.default.object,
/**
* An optional className for the toast
*/
toastClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
/**
* An optional className for the toast body
*/
bodyClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
/**
* An optional className for the toast progress bar
*/
progressClassName: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.object]),
/**
* Define enter and exit transition using react-transition-group
*/
transition: _propTypes2.default.func
};
ToastContainer.defaultProps = {
position: _constant.POSITION.TOP_RIGHT,
transition: _DefaultTransition2.default,
autoClose: 5000,
hideProgressBar: false,
closeButton: _react2.default.createElement(_DefaultCloseButton2.default, null),
pauseOnHover: true,
closeOnClick: true,
newestOnTop: false,
className: null,
style: null,
toastClassName: '',
bodyClassName: '',
progressClassName: ''
};
exports.default = ToastContainer;

View File

@@ -0,0 +1,150 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = getAnimation;
var _constant = require('./constant');
function getAnimation(pos) {
switch (pos) {
case _constant.POSITION.TOP_RIGHT:
case _constant.POSITION.BOTTOM_RIGHT:
default:
return {
enter: {
from: {
opacity: 0,
transform: 'translate3d(3000px, 0, 0)'
},
'60%': {
opacity: 1,
transform: 'translate3d(-25px, 0, 0)'
},
'75%': {
transform: 'translate3d(10px, 0, 0)'
},
'90%': {
transform: 'translate3d(-5px, 0, 0)'
},
to: {
transform: 'none'
}
},
exit: {
'20%': {
opacity: 1,
transform: 'translate3d(-20px, 0, 0)'
},
to: {
opacity: 0,
transform: 'translate3d(2000px, 0, 0)'
}
}
};
case _constant.POSITION.TOP_LEFT:
case _constant.POSITION.BOTTOM_LEFT:
return {
enter: {
'0%': {
opacity: 0,
transform: 'translate3d(-3000px, 0, 0)'
},
'60%': {
opacity: 1,
transform: 'translate3d(25px, 0, 0)'
},
'75%': {
transform: 'translate3d(-10px, 0, 0)'
},
'90%': {
transform: 'translate3d(5px, 0, 0)'
},
to: {
transform: 'none'
}
},
exit: {
'20%': {
opacity: 1,
transform: 'translate3d(20px, 0, 0)'
},
to: {
opacity: 0,
transform: 'translate3d(-2000px, 0, 0)'
}
}
};
case _constant.POSITION.BOTTOM_CENTER:
return {
enter: {
from: {
opacity: 0,
transform: 'translate3d(0, 3000px, 0)'
},
'60%': {
opacity: 1,
transform: 'translate3d(0, -20px, 0)'
},
'75%': {
transform: 'translate3d(0, 10px, 0)'
},
'90%': {
transform: 'translate3d(0, -5px, 0)'
},
to: {
transform: 'translate3d(0, 0, 0)'
}
},
exit: {
'20%': {
transform: 'translate3d(0, 10px, 0)'
},
'40%, 45%': {
opacity: 1,
transform: 'translate3d(0, -20px, 0)'
},
to: {
opacity: 0,
transform: 'translate3d(0, 2000px, 0)'
}
}
};
case _constant.POSITION.TOP_CENTER:
return {
enter: {
'0%': {
opacity: 0,
transform: 'translate3d(0, -3000px, 0)'
},
'60%': {
opacity: 1,
transform: 'translate3d(0, 25px, 0)'
},
'75%': {
transform: 'translate3d(0, -10px, 0)'
},
'90%': {
transform: 'translate3d(0, 5px, 0)'
},
to: {
transform: 'none'
}
},
exit: {
'20%': {
transform: 'translate3d(0, -10px, 0)'
},
'40%, 45%': {
opacity: 1,
transform: 'translate3d(0, 20px, 0)'
},
to: {
opacity: 0,
transform: 'translate3d(0, -2000px, 0)'
}
}
};
}
}

View File

@@ -0,0 +1,18 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = {
width: "320px",
background: "#ffffff",
fontColor: "#999",
fontSize: "13px",
colorDefault: "#fff",
colorInfo: "#3498db",
colorSuccess: "#07bc0c",
colorWarning: "#f1c40f",
colorError: "#e74c3c",
colorProgressDefault: "linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55)",
smartphonePortrait: "only screen and (max-width : 480px)"
};

View File

@@ -0,0 +1,26 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var POSITION = exports.POSITION = {
TOP_LEFT: 'top-left',
TOP_RIGHT: 'top-right',
TOP_CENTER: 'top-center',
BOTTOM_LEFT: 'bottom-left',
BOTTOM_RIGHT: 'bottom-right',
BOTTOM_CENTER: 'bottom-center'
};
var TYPE = exports.TYPE = {
INFO: 'info',
SUCCESS: 'success',
WARNING: 'warning',
ERROR: 'error',
DEFAULT: 'default'
};
var ACTION = exports.ACTION = {
SHOW: 'SHOW_TOAST',
CLEAR: 'CLEAR_TOAST',
MOUNTED: 'CONTAINER_MOUNTED'
};

View File

@@ -0,0 +1,22 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.style = exports.toast = exports.ToastContainer = undefined;
var _ToastContainer = require('./ToastContainer');
var _ToastContainer2 = _interopRequireDefault(_ToastContainer);
var _toaster = require('./toaster');
var _toaster2 = _interopRequireDefault(_toaster);
var _style = require('./style');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
exports.ToastContainer = _ToastContainer2.default;
exports.toast = _toaster2.default;
exports.style = _style.defineStyle;

View File

@@ -0,0 +1,50 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.defineStyle = defineStyle;
var style = {
width: '320px',
colorDefault: '#fff',
colorInfo: '#3498db',
colorSuccess: '#07bc0c',
colorWarning: '#f1c40f',
colorError: '#e74c3c',
colorProgressDefault: 'linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55)',
mobile: 'only screen and (max-width : 480px)',
fontFamily: 'sans-serif',
zIndex: 9999,
TOP_LEFT: {
top: '1em',
left: '1em'
},
TOP_CENTER: {
top: '1em',
left: '50%'
},
TOP_RIGHT: {
top: '1em',
right: '1em'
},
BOTTOM_LEFT: {
bottom: '1em',
left: '1em'
},
BOTTOM_CENTER: {
bottom: '1em',
left: '50%'
},
BOTTOM_RIGHT: {
bottom: '1em',
right: '1em'
}
};
function defineStyle(props) {
for (var prop in props) {
style[prop] = props[prop];
}
}
exports.default = style;

View File

@@ -0,0 +1,129 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _EventManager = require('./util/EventManager');
var _EventManager2 = _interopRequireDefault(_EventManager);
var _constant = require('./constant');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var defaultOptions = {
type: _constant.TYPE.DEFAULT,
autoClose: null,
closeButton: null,
hideProgressBar: null,
position: null,
pauseOnHover: null,
closeOnClick: null,
className: null,
bodyClassName: null,
progressClassName: null,
transition: null,
updateId: null
};
var container = null;
var queue = [];
var toastId = 0;
/**
* Merge provided options with the defaults settings and generate the toastId
* @param {*} options
*/
function mergeOptions(options, type) {
return _extends({}, defaultOptions, options, {
type: type,
toastId: ++toastId
});
}
/**
* Dispatch toast. If the container is not mounted, the toast is enqueued
* @param {*} content
* @param {*} options
*/
function emitEvent(content, options) {
if (container !== null) {
_EventManager2.default.emit(_constant.ACTION.SHOW, content, options);
} else {
queue.push({ action: _constant.ACTION.SHOW, content: content, options: options });
}
return options.toastId;
}
var toaster = _extends(function (content, options) {
return emitEvent(content, mergeOptions(options, options && options.type || _constant.TYPE.DEFAULT));
}, {
success: function success(content, options) {
return emitEvent(content, mergeOptions(options, _constant.TYPE.SUCCESS));
},
info: function info(content, options) {
return emitEvent(content, mergeOptions(options, _constant.TYPE.INFO));
},
warn: function warn(content, options) {
return emitEvent(content, mergeOptions(options, _constant.TYPE.WARNING));
},
warning: function warning(content, options) {
return emitEvent(content, mergeOptions(options, _constant.TYPE.WARNING));
},
error: function error(content, options) {
return emitEvent(content, mergeOptions(options, _constant.TYPE.ERROR));
},
dismiss: function dismiss() {
var id = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
return container && _EventManager2.default.emit(_constant.ACTION.CLEAR, id);
},
isActive: function isActive() {
return false;
},
update: function update(id, options) {
if (container && typeof container.collection[id] !== 'undefined') {
var _container$collection = container.collection[id],
oldOptions = _container$collection.options,
oldContent = _container$collection.content;
var updateId = oldOptions.updateId !== null ? oldOptions.updateId + 1 : 1;
var nextOptions = _extends({}, oldOptions, options, {
toastId: id,
updateId: updateId
});
var content = typeof nextOptions.render !== 'undefined' ? nextOptions.render : oldContent;
delete nextOptions.render;
return emitEvent(content, nextOptions);
}
return false;
}
}, {
POSITION: _constant.POSITION,
TYPE: _constant.TYPE
});
/**
* Wait until the ToastContainer is mounted to dispatch the toast
* and attach isActive method
*/
_EventManager2.default.on(_constant.ACTION.MOUNTED, function (containerInstance) {
container = containerInstance;
toaster.isActive = function (id) {
return container.isToastActive(id);
};
queue.forEach(function (item) {
_EventManager2.default.emit(item.action, item.content, item.options);
});
queue = [];
});
exports.default = toaster;

View File

@@ -0,0 +1,47 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
var eventManager = {
eventList: new Map(),
on: function on(event, callback) {
this.eventList.has(event) || this.eventList.set(event, []);
this.eventList.get(event).push(callback);
return this;
},
off: function off() {
var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
return this.eventList.delete(event);
},
emit: function emit(event) {
var _this = this;
for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
args[_key - 1] = arguments[_key];
}
if (!this.eventList.has(event)) {
/* eslint no-console: 0 */
console.warn("<" + event + "> Event is not registered. Did you forgot to bind the event ?");
return false;
}
this.eventList.get(event).forEach(function (callback) {
return setTimeout(function () {
return callback.call.apply(callback, [_this].concat(_toConsumableArray(args)));
}, 0);
});
return true;
}
};
exports.default = eventManager;

View File

@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = function (obj) {
return Object.keys(obj).map(function (key) {
return obj[key];
});
};

View File

@@ -0,0 +1,53 @@
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.falseOrElement = exports.falseOrDelay = undefined;
exports.isValidDelay = isValidDelay;
exports.objectValues = objectValues;
var _react = require('react');
function isValidDelay(val) {
return typeof val === 'number' && !isNaN(val) && val > 0;
}
function objectValues(obj) {
return Object.keys(obj).map(function (key) {
return obj[key];
});
}
function withRequired(fn) {
fn.isRequired = function (props, propName, componentName) {
var prop = props[propName];
if (typeof prop === 'undefined') {
return new Error('The prop ' + propName + ' is marked as required in \n ' + componentName + ', but its value is undefined.');
}
fn(props, propName, componentName);
};
return fn;
}
var falseOrDelay = exports.falseOrDelay = withRequired(function (props, propName, componentName) {
var prop = props[propName];
if (prop !== false && !isValidDelay(prop)) {
return new Error(componentName + ' expect ' + propName + ' \n to be a valid Number > 0 or equal to false. ' + prop + ' given.');
}
return null;
});
var falseOrElement = exports.falseOrElement = withRequired(function (props, propName, componentName) {
var prop = props[propName];
if (prop !== false && !(0, _react.isValidElement)(prop)) {
return new Error(componentName + ' expect ' + propName + ' \n to be a valid react element or equal to false. ' + prop + ' given.');
}
return null;
});