3322 lines
102 KiB
JavaScript
3322 lines
102 KiB
JavaScript
import React, { Component } from 'react';
|
|
import require$$1 from 'prop-types';
|
|
import reactDom from 'react-dom';
|
|
|
|
var classCallCheck = function (instance, Constructor) {
|
|
if (!(instance instanceof Constructor)) {
|
|
throw new TypeError("Cannot call a class as a function");
|
|
}
|
|
};
|
|
|
|
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 inherits = function (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;
|
|
};
|
|
|
|
var possibleConstructorReturn = function (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;
|
|
};
|
|
|
|
var FormContext = React.createContext({ data: null });
|
|
|
|
var FormConsumer = function (_Component) {
|
|
inherits(FormConsumer, _Component);
|
|
|
|
function FormConsumer() {
|
|
classCallCheck(this, FormConsumer);
|
|
return possibleConstructorReturn(this, (FormConsumer.__proto__ || Object.getPrototypeOf(FormConsumer)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(FormConsumer, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
FormContext.Consumer,
|
|
null,
|
|
function (props) {
|
|
return _this2.props.children(props);
|
|
}
|
|
);
|
|
}
|
|
}]);
|
|
return FormConsumer;
|
|
}(Component);
|
|
|
|
var FormItemError = function (_Component) {
|
|
inherits(FormItemError, _Component);
|
|
|
|
function FormItemError() {
|
|
classCallCheck(this, FormItemError);
|
|
return possibleConstructorReturn(this, (FormItemError.__proto__ || Object.getPrototypeOf(FormItemError)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(FormItemError, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
var data = this.props.data;
|
|
|
|
if (!data || !data.errors || !data.errors[this.props.name]) return null;
|
|
|
|
return React.createElement(
|
|
FormTranslationConsumer,
|
|
null,
|
|
function (translator) {
|
|
return _this2.renderError(data, translator);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderError",
|
|
value: function renderError(data, translator) {
|
|
return React.createElement(
|
|
"p",
|
|
{ className: "text-danger" },
|
|
translator.handleText(data.errors[this.props.name].error)
|
|
);
|
|
}
|
|
}]);
|
|
return FormItemError;
|
|
}(Component);
|
|
|
|
var CheckBox = function (_Component) {
|
|
inherits(CheckBox, _Component);
|
|
|
|
function CheckBox() {
|
|
classCallCheck(this, CheckBox);
|
|
return possibleConstructorReturn(this, (CheckBox.__proto__ || Object.getPrototypeOf(CheckBox)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(CheckBox, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
FormConsumer,
|
|
null,
|
|
function (data) {
|
|
return _this2.renderCheckBox(data);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderCheckBox",
|
|
value: function renderCheckBox(data) {
|
|
var _this3 = this;
|
|
|
|
var props = _extends({}, this.props);
|
|
if (props.children) delete props.children;
|
|
if (props.onChangeValue) delete props.onChangeValue;
|
|
return React.createElement(
|
|
"div",
|
|
{ className: "form-check" },
|
|
React.createElement("input", _extends({
|
|
type: "checkbox",
|
|
checked: this.props.value,
|
|
onChange: function onChange(e) {
|
|
return _this3.props.onChangeValue(e.target.checked);
|
|
}
|
|
}, props)),
|
|
this.renderLabel(data),
|
|
React.createElement(FormItemError, { name: this.props.name, data: data })
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel(data) {
|
|
if (this.props.children.length) {
|
|
return React.createElement(
|
|
"label",
|
|
{ className: "form-check-label", htmlFor: this.props.id },
|
|
this.props.children
|
|
);
|
|
}
|
|
}
|
|
}]);
|
|
return CheckBox;
|
|
}(Component);
|
|
|
|
|
|
CheckBox.defaultProps = {
|
|
name: 'checkbox',
|
|
id: 'checkbox',
|
|
className: 'form-check-input',
|
|
onChangeValue: function onChangeValue(checked) {}
|
|
};
|
|
|
|
function unwrapExports (x) {
|
|
return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x.default : x;
|
|
}
|
|
|
|
function createCommonjsModule(fn, module) {
|
|
return module = { exports: {} }, fn(module, module.exports), module.exports;
|
|
}
|
|
|
|
var classnames = createCommonjsModule(function (module) {
|
|
/*!
|
|
Copyright (c) 2017 Jed Watson.
|
|
Licensed under the MIT License (MIT), see
|
|
http://jedwatson.github.io/classnames
|
|
*/
|
|
/* global define */
|
|
|
|
(function () {
|
|
|
|
var hasOwn = {}.hasOwnProperty;
|
|
|
|
function classNames () {
|
|
var classes = [];
|
|
|
|
for (var i = 0; i < arguments.length; i++) {
|
|
var arg = arguments[i];
|
|
if (!arg) continue;
|
|
|
|
var argType = typeof arg;
|
|
|
|
if (argType === 'string' || argType === 'number') {
|
|
classes.push(arg);
|
|
} else if (Array.isArray(arg) && arg.length) {
|
|
var inner = classNames.apply(null, arg);
|
|
if (inner) {
|
|
classes.push(inner);
|
|
}
|
|
} else if (argType === 'object') {
|
|
for (var key in arg) {
|
|
if (hasOwn.call(arg, key) && arg[key]) {
|
|
classes.push(key);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
return classes.join(' ');
|
|
}
|
|
|
|
if (module.exports) {
|
|
classNames.default = classNames;
|
|
module.exports = classNames;
|
|
} else {
|
|
window.classNames = classNames;
|
|
}
|
|
}());
|
|
});
|
|
|
|
/**
|
|
* Copyright (c) 2013-present, Facebook, Inc.
|
|
*
|
|
* This source code is licensed under the MIT license found in the
|
|
* LICENSE file in the root directory of this source tree.
|
|
*/
|
|
|
|
function componentWillMount() {
|
|
// Call this.constructor.gDSFP to support sub-classes.
|
|
var state = this.constructor.getDerivedStateFromProps(this.props, this.state);
|
|
if (state !== null && state !== undefined) {
|
|
this.setState(state);
|
|
}
|
|
}
|
|
|
|
function componentWillReceiveProps(nextProps) {
|
|
// Call this.constructor.gDSFP to support sub-classes.
|
|
// Use the setState() updater to ensure state isn't stale in certain edge cases.
|
|
function updater(prevState) {
|
|
var state = this.constructor.getDerivedStateFromProps(nextProps, prevState);
|
|
return state !== null && state !== undefined ? state : null;
|
|
}
|
|
// Binding "this" is important for shallow renderer support.
|
|
this.setState(updater.bind(this));
|
|
}
|
|
|
|
function componentWillUpdate(nextProps, nextState) {
|
|
try {
|
|
var prevProps = this.props;
|
|
var prevState = this.state;
|
|
this.props = nextProps;
|
|
this.state = nextState;
|
|
this.__reactInternalSnapshotFlag = true;
|
|
this.__reactInternalSnapshot = this.getSnapshotBeforeUpdate(
|
|
prevProps,
|
|
prevState
|
|
);
|
|
} finally {
|
|
this.props = prevProps;
|
|
this.state = prevState;
|
|
}
|
|
}
|
|
|
|
// React may warn about cWM/cWRP/cWU methods being deprecated.
|
|
// Add a flag to suppress these warnings for this special case.
|
|
componentWillMount.__suppressDeprecationWarning = true;
|
|
componentWillReceiveProps.__suppressDeprecationWarning = true;
|
|
componentWillUpdate.__suppressDeprecationWarning = true;
|
|
|
|
function polyfill(Component$$1) {
|
|
var prototype = Component$$1.prototype;
|
|
|
|
if (!prototype || !prototype.isReactComponent) {
|
|
throw new Error('Can only polyfill class components');
|
|
}
|
|
|
|
if (
|
|
typeof Component$$1.getDerivedStateFromProps !== 'function' &&
|
|
typeof prototype.getSnapshotBeforeUpdate !== 'function'
|
|
) {
|
|
return Component$$1;
|
|
}
|
|
|
|
// If new component APIs are defined, "unsafe" lifecycles won't be called.
|
|
// Error if any of these lifecycles are present,
|
|
// Because they would work differently between older and newer (16.3+) versions of React.
|
|
var foundWillMountName = null;
|
|
var foundWillReceivePropsName = null;
|
|
var foundWillUpdateName = null;
|
|
if (typeof prototype.componentWillMount === 'function') {
|
|
foundWillMountName = 'componentWillMount';
|
|
} else if (typeof prototype.UNSAFE_componentWillMount === 'function') {
|
|
foundWillMountName = 'UNSAFE_componentWillMount';
|
|
}
|
|
if (typeof prototype.componentWillReceiveProps === 'function') {
|
|
foundWillReceivePropsName = 'componentWillReceiveProps';
|
|
} else if (typeof prototype.UNSAFE_componentWillReceiveProps === 'function') {
|
|
foundWillReceivePropsName = 'UNSAFE_componentWillReceiveProps';
|
|
}
|
|
if (typeof prototype.componentWillUpdate === 'function') {
|
|
foundWillUpdateName = 'componentWillUpdate';
|
|
} else if (typeof prototype.UNSAFE_componentWillUpdate === 'function') {
|
|
foundWillUpdateName = 'UNSAFE_componentWillUpdate';
|
|
}
|
|
if (
|
|
foundWillMountName !== null ||
|
|
foundWillReceivePropsName !== null ||
|
|
foundWillUpdateName !== null
|
|
) {
|
|
var componentName = Component$$1.displayName || Component$$1.name;
|
|
var newApiName =
|
|
typeof Component$$1.getDerivedStateFromProps === 'function'
|
|
? 'getDerivedStateFromProps()'
|
|
: 'getSnapshotBeforeUpdate()';
|
|
|
|
throw Error(
|
|
'Unsafe legacy lifecycles will not be called for components using new component APIs.\n\n' +
|
|
componentName +
|
|
' uses ' +
|
|
newApiName +
|
|
' but also contains the following legacy lifecycles:' +
|
|
(foundWillMountName !== null ? '\n ' + foundWillMountName : '') +
|
|
(foundWillReceivePropsName !== null
|
|
? '\n ' + foundWillReceivePropsName
|
|
: '') +
|
|
(foundWillUpdateName !== null ? '\n ' + foundWillUpdateName : '') +
|
|
'\n\nThe above lifecycles should be removed. Learn more about this warning here:\n' +
|
|
'https://fb.me/react-async-component-lifecycle-hooks'
|
|
);
|
|
}
|
|
|
|
// React <= 16.2 does not support static getDerivedStateFromProps.
|
|
// As a workaround, use cWM and cWRP to invoke the new static lifecycle.
|
|
// Newer versions of React will ignore these lifecycles if gDSFP exists.
|
|
if (typeof Component$$1.getDerivedStateFromProps === 'function') {
|
|
prototype.componentWillMount = componentWillMount;
|
|
prototype.componentWillReceiveProps = componentWillReceiveProps;
|
|
}
|
|
|
|
// React <= 16.2 does not support getSnapshotBeforeUpdate.
|
|
// As a workaround, use cWU to invoke the new lifecycle.
|
|
// Newer versions of React will ignore that lifecycle if gSBU exists.
|
|
if (typeof prototype.getSnapshotBeforeUpdate === 'function') {
|
|
if (typeof prototype.componentDidUpdate !== 'function') {
|
|
throw new Error(
|
|
'Cannot polyfill getSnapshotBeforeUpdate() for components that do not define componentDidUpdate() on the prototype'
|
|
);
|
|
}
|
|
|
|
prototype.componentWillUpdate = componentWillUpdate;
|
|
|
|
var componentDidUpdate = prototype.componentDidUpdate;
|
|
|
|
prototype.componentDidUpdate = function componentDidUpdatePolyfill(
|
|
prevProps,
|
|
prevState,
|
|
maybeSnapshot
|
|
) {
|
|
// 16.3+ will not execute our will-update method;
|
|
// It will pass a snapshot value to did-update though.
|
|
// Older versions will require our polyfilled will-update value.
|
|
// We need to handle both cases, but can't just check for the presence of "maybeSnapshot",
|
|
// Because for <= 15.x versions this might be a "prevContext" object.
|
|
// We also can't just check "__reactInternalSnapshot",
|
|
// Because get-snapshot might return a falsy value.
|
|
// So check for the explicit __reactInternalSnapshotFlag flag to determine behavior.
|
|
var snapshot = this.__reactInternalSnapshotFlag
|
|
? this.__reactInternalSnapshot
|
|
: maybeSnapshot;
|
|
|
|
componentDidUpdate.call(this, prevProps, prevState, snapshot);
|
|
};
|
|
}
|
|
|
|
return Component$$1;
|
|
}
|
|
|
|
var reactLifecyclesCompat_es = /*#__PURE__*/Object.freeze({
|
|
polyfill: polyfill
|
|
});
|
|
|
|
var ChildMapping = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.getChildMapping = getChildMapping;
|
|
exports.mergeChildMappings = mergeChildMappings;
|
|
exports.getInitialChildMapping = getInitialChildMapping;
|
|
exports.getNextChildMapping = getNextChildMapping;
|
|
|
|
|
|
|
|
/**
|
|
* Given `this.props.children`, return an object mapping key to child.
|
|
*
|
|
* @param {*} children `this.props.children`
|
|
* @return {object} Mapping of key to child
|
|
*/
|
|
function getChildMapping(children, mapFn) {
|
|
var mapper = function mapper(child) {
|
|
return mapFn && (0, React.isValidElement)(child) ? mapFn(child) : child;
|
|
};
|
|
|
|
var result = Object.create(null);
|
|
if (children) React.Children.map(children, function (c) {
|
|
return c;
|
|
}).forEach(function (child) {
|
|
// run the map function here instead so that the key is the computed one
|
|
result[child.key] = mapper(child);
|
|
});
|
|
return result;
|
|
}
|
|
/**
|
|
* When you're adding or removing children some may be added or removed in the
|
|
* same render pass. We want to show *both* since we want to simultaneously
|
|
* animate elements in and out. This function takes a previous set of keys
|
|
* and a new set of keys and merges them with its best guess of the correct
|
|
* ordering. In the future we may expose some of the utilities in
|
|
* ReactMultiChild to make this easy, but for now React itself does not
|
|
* directly have this concept of the union of prevChildren and nextChildren
|
|
* so we implement it here.
|
|
*
|
|
* @param {object} prev prev children as returned from
|
|
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
* @param {object} next next children as returned from
|
|
* `ReactTransitionChildMapping.getChildMapping()`.
|
|
* @return {object} a key set that contains all keys in `prev` and all keys
|
|
* in `next` in a reasonable order.
|
|
*/
|
|
|
|
|
|
function mergeChildMappings(prev, next) {
|
|
prev = prev || {};
|
|
next = next || {};
|
|
|
|
function getValueForKey(key) {
|
|
return key in next ? next[key] : prev[key];
|
|
} // For each key of `next`, the list of keys to insert before that key in
|
|
// the combined list
|
|
|
|
|
|
var nextKeysPending = Object.create(null);
|
|
var pendingKeys = [];
|
|
|
|
for (var prevKey in prev) {
|
|
if (prevKey in next) {
|
|
if (pendingKeys.length) {
|
|
nextKeysPending[prevKey] = pendingKeys;
|
|
pendingKeys = [];
|
|
}
|
|
} else {
|
|
pendingKeys.push(prevKey);
|
|
}
|
|
}
|
|
|
|
var i;
|
|
var childMapping = {};
|
|
|
|
for (var nextKey in next) {
|
|
if (nextKeysPending[nextKey]) {
|
|
for (i = 0; i < nextKeysPending[nextKey].length; i++) {
|
|
var pendingNextKey = nextKeysPending[nextKey][i];
|
|
childMapping[nextKeysPending[nextKey][i]] = getValueForKey(pendingNextKey);
|
|
}
|
|
}
|
|
|
|
childMapping[nextKey] = getValueForKey(nextKey);
|
|
} // Finally, add the keys which didn't appear before any key in `next`
|
|
|
|
|
|
for (i = 0; i < pendingKeys.length; i++) {
|
|
childMapping[pendingKeys[i]] = getValueForKey(pendingKeys[i]);
|
|
}
|
|
|
|
return childMapping;
|
|
}
|
|
|
|
function getProp(child, prop, props) {
|
|
return props[prop] != null ? props[prop] : child.props[prop];
|
|
}
|
|
|
|
function getInitialChildMapping(props, onExited) {
|
|
return getChildMapping(props.children, function (child) {
|
|
return (0, React.cloneElement)(child, {
|
|
onExited: onExited.bind(null, child),
|
|
in: true,
|
|
appear: getProp(child, 'appear', props),
|
|
enter: getProp(child, 'enter', props),
|
|
exit: getProp(child, 'exit', props)
|
|
});
|
|
});
|
|
}
|
|
|
|
function getNextChildMapping(nextProps, prevChildMapping, onExited) {
|
|
var nextChildMapping = getChildMapping(nextProps.children);
|
|
var children = mergeChildMappings(prevChildMapping, nextChildMapping);
|
|
Object.keys(children).forEach(function (key) {
|
|
var child = children[key];
|
|
if (!(0, React.isValidElement)(child)) return;
|
|
var hasPrev = key in prevChildMapping;
|
|
var hasNext = key in nextChildMapping;
|
|
var prevChild = prevChildMapping[key];
|
|
var isLeaving = (0, React.isValidElement)(prevChild) && !prevChild.props.in; // item is new (entering)
|
|
|
|
if (hasNext && (!hasPrev || isLeaving)) {
|
|
// console.log('entering', key)
|
|
children[key] = (0, React.cloneElement)(child, {
|
|
onExited: onExited.bind(null, child),
|
|
in: true,
|
|
exit: getProp(child, 'exit', nextProps),
|
|
enter: getProp(child, 'enter', nextProps)
|
|
});
|
|
} else if (!hasNext && hasPrev && !isLeaving) {
|
|
// item is old (exiting)
|
|
// console.log('leaving', key)
|
|
children[key] = (0, React.cloneElement)(child, {
|
|
in: false
|
|
});
|
|
} else if (hasNext && hasPrev && (0, React.isValidElement)(prevChild)) {
|
|
// item hasn't changed transition states
|
|
// copy over the last transition props;
|
|
// console.log('unchanged', key)
|
|
children[key] = (0, React.cloneElement)(child, {
|
|
onExited: onExited.bind(null, child),
|
|
in: prevChild.props.in,
|
|
exit: getProp(child, 'exit', nextProps),
|
|
enter: getProp(child, 'enter', nextProps)
|
|
});
|
|
}
|
|
});
|
|
return children;
|
|
}
|
|
});
|
|
|
|
unwrapExports(ChildMapping);
|
|
var ChildMapping_1 = ChildMapping.getChildMapping;
|
|
var ChildMapping_2 = ChildMapping.mergeChildMappings;
|
|
var ChildMapping_3 = ChildMapping.getInitialChildMapping;
|
|
var ChildMapping_4 = ChildMapping.getNextChildMapping;
|
|
|
|
var TransitionGroup_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _propTypes = _interopRequireDefault(require$$1);
|
|
|
|
var _react = _interopRequireDefault(React);
|
|
|
|
|
|
|
|
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
|
|
function _extends() { _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; }; return _extends.apply(this, arguments); }
|
|
|
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
|
|
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
|
|
|
|
var values = Object.values || function (obj) {
|
|
return Object.keys(obj).map(function (k) {
|
|
return obj[k];
|
|
});
|
|
};
|
|
|
|
var defaultProps = {
|
|
component: 'div',
|
|
childFactory: function childFactory(child) {
|
|
return child;
|
|
}
|
|
/**
|
|
* The `<TransitionGroup>` component manages a set of transition components
|
|
* (`<Transition>` and `<CSSTransition>`) in a list. Like with the transition
|
|
* components, `<TransitionGroup>` is a state machine for managing the mounting
|
|
* and unmounting of components over time.
|
|
*
|
|
* Consider the example below. As items are removed or added to the TodoList the
|
|
* `in` prop is toggled automatically by the `<TransitionGroup>`.
|
|
*
|
|
* Note that `<TransitionGroup>` does not define any animation behavior!
|
|
* Exactly _how_ a list item animates is up to the individual transition
|
|
* component. This means you can mix and match animations across different list
|
|
* items.
|
|
*/
|
|
|
|
};
|
|
|
|
var TransitionGroup =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
_inheritsLoose(TransitionGroup, _React$Component);
|
|
|
|
function TransitionGroup(props, context) {
|
|
var _this;
|
|
|
|
_this = _React$Component.call(this, props, context) || this;
|
|
|
|
var handleExited = _this.handleExited.bind(_assertThisInitialized(_assertThisInitialized(_this))); // Initial children should all be entering, dependent on appear
|
|
|
|
|
|
_this.state = {
|
|
handleExited: handleExited,
|
|
firstRender: true
|
|
};
|
|
return _this;
|
|
}
|
|
|
|
var _proto = TransitionGroup.prototype;
|
|
|
|
_proto.getChildContext = function getChildContext() {
|
|
return {
|
|
transitionGroup: {
|
|
isMounting: !this.appeared
|
|
}
|
|
};
|
|
};
|
|
|
|
_proto.componentDidMount = function componentDidMount() {
|
|
this.appeared = true;
|
|
this.mounted = true;
|
|
};
|
|
|
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
this.mounted = false;
|
|
};
|
|
|
|
TransitionGroup.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, _ref) {
|
|
var prevChildMapping = _ref.children,
|
|
handleExited = _ref.handleExited,
|
|
firstRender = _ref.firstRender;
|
|
return {
|
|
children: firstRender ? (0, ChildMapping.getInitialChildMapping)(nextProps, handleExited) : (0, ChildMapping.getNextChildMapping)(nextProps, prevChildMapping, handleExited),
|
|
firstRender: false
|
|
};
|
|
};
|
|
|
|
_proto.handleExited = function handleExited(child, node) {
|
|
var currentChildMapping = (0, ChildMapping.getChildMapping)(this.props.children);
|
|
if (child.key in currentChildMapping) return;
|
|
|
|
if (child.props.onExited) {
|
|
child.props.onExited(node);
|
|
}
|
|
|
|
if (this.mounted) {
|
|
this.setState(function (state) {
|
|
var children = _extends({}, state.children);
|
|
|
|
delete children[child.key];
|
|
return {
|
|
children: children
|
|
};
|
|
});
|
|
}
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _this$props = this.props,
|
|
Component$$1 = _this$props.component,
|
|
childFactory = _this$props.childFactory,
|
|
props = _objectWithoutPropertiesLoose(_this$props, ["component", "childFactory"]);
|
|
|
|
var children = values(this.state.children).map(childFactory);
|
|
delete props.appear;
|
|
delete props.enter;
|
|
delete props.exit;
|
|
|
|
if (Component$$1 === null) {
|
|
return children;
|
|
}
|
|
|
|
return _react.default.createElement(Component$$1, props, children);
|
|
};
|
|
|
|
return TransitionGroup;
|
|
}(_react.default.Component);
|
|
|
|
TransitionGroup.childContextTypes = {
|
|
transitionGroup: _propTypes.default.object.isRequired
|
|
};
|
|
TransitionGroup.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
/**
|
|
* `<TransitionGroup>` renders a `<div>` by default. You can change this
|
|
* behavior by providing a `component` prop.
|
|
* If you use React v16+ and would like to avoid a wrapping `<div>` element
|
|
* you can pass in `component={null}`. This is useful if the wrapping div
|
|
* borks your css styles.
|
|
*/
|
|
component: _propTypes.default.any,
|
|
|
|
/**
|
|
* A set of `<Transition>` components, that are toggled `in` and out as they
|
|
* leave. the `<TransitionGroup>` will inject specific transition props, so
|
|
* remember to spread them through if you are wrapping the `<Transition>` as
|
|
* with our `<Fade>` example.
|
|
*/
|
|
children: _propTypes.default.node,
|
|
|
|
/**
|
|
* A convenience prop that enables or disables appear animations
|
|
* for all children. Note that specifying this will override any defaults set
|
|
* on individual children Transitions.
|
|
*/
|
|
appear: _propTypes.default.bool,
|
|
|
|
/**
|
|
* A convenience prop that enables or disables enter animations
|
|
* for all children. Note that specifying this will override any defaults set
|
|
* on individual children Transitions.
|
|
*/
|
|
enter: _propTypes.default.bool,
|
|
|
|
/**
|
|
* A convenience prop that enables or disables exit animations
|
|
* for all children. Note that specifying this will override any defaults set
|
|
* on individual children Transitions.
|
|
*/
|
|
exit: _propTypes.default.bool,
|
|
|
|
/**
|
|
* You may need to apply reactive updates to a child as it is exiting.
|
|
* This is generally done by using `cloneElement` however in the case of an exiting
|
|
* child the element has already been removed and not accessible to the consumer.
|
|
*
|
|
* If you do need to update a child as it leaves you can provide a `childFactory`
|
|
* to wrap every child, even the ones that are leaving.
|
|
*
|
|
* @type Function(child: ReactElement) -> ReactElement
|
|
*/
|
|
childFactory: _propTypes.default.func
|
|
} : {};
|
|
TransitionGroup.defaultProps = defaultProps;
|
|
|
|
var _default = (0, reactLifecyclesCompat_es.polyfill)(TransitionGroup);
|
|
|
|
exports.default = _default;
|
|
module.exports = exports["default"];
|
|
});
|
|
|
|
unwrapExports(TransitionGroup_1);
|
|
|
|
var constant = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.ACTION = exports.TYPE = exports.POSITION = void 0;
|
|
var 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'
|
|
};
|
|
exports.POSITION = POSITION;
|
|
var TYPE = {
|
|
INFO: 'info',
|
|
SUCCESS: 'success',
|
|
WARNING: 'warning',
|
|
ERROR: 'error',
|
|
DEFAULT: 'default'
|
|
};
|
|
exports.TYPE = TYPE;
|
|
var ACTION = {
|
|
SHOW: 0,
|
|
CLEAR: 1,
|
|
DID_MOUNT: 2,
|
|
WILL_UNMOUNT: 3,
|
|
ON_CHANGE: 4
|
|
};
|
|
exports.ACTION = ACTION;
|
|
});
|
|
|
|
unwrapExports(constant);
|
|
var constant_1 = constant.ACTION;
|
|
var constant_2 = constant.TYPE;
|
|
var constant_3 = constant.POSITION;
|
|
|
|
var propValidator = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.isValidDelay = isValidDelay;
|
|
exports.objectValues = objectValues;
|
|
exports.falseOrElement = exports.falseOrDelay = void 0;
|
|
|
|
|
|
|
|
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 = 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;
|
|
});
|
|
exports.falseOrDelay = falseOrDelay;
|
|
var 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;
|
|
});
|
|
exports.falseOrElement = falseOrElement;
|
|
});
|
|
|
|
unwrapExports(propValidator);
|
|
var propValidator_1 = propValidator.isValidDelay;
|
|
var propValidator_2 = propValidator.objectValues;
|
|
var propValidator_3 = propValidator.falseOrElement;
|
|
var propValidator_4 = propValidator.falseOrDelay;
|
|
|
|
var ProgressBar_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _react = _interopRequireDefault(React);
|
|
|
|
var _propTypes = _interopRequireDefault(require$$1);
|
|
|
|
var _classnames = _interopRequireDefault(classnames);
|
|
|
|
|
|
|
|
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _extends() { _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; }; return _extends.apply(this, arguments); }
|
|
|
|
function ProgressBar(_ref) {
|
|
var _animationEvent;
|
|
|
|
var delay = _ref.delay,
|
|
isRunning = _ref.isRunning,
|
|
closeToast = _ref.closeToast,
|
|
type = _ref.type,
|
|
hide = _ref.hide,
|
|
className = _ref.className,
|
|
userStyle = _ref.style,
|
|
controlledProgress = _ref.controlledProgress,
|
|
progress = _ref.progress,
|
|
isProgressDone = _ref.isProgressDone,
|
|
rtl = _ref.rtl;
|
|
|
|
var style = _extends({}, userStyle, {
|
|
animationDuration: delay + "ms",
|
|
animationPlayState: isRunning ? 'running' : 'paused',
|
|
opacity: hide ? 0 : 1,
|
|
transform: controlledProgress ? "scaleX(" + progress + ")" : null
|
|
});
|
|
|
|
var classNames = (0, _classnames.default)('Toastify__progress-bar', controlledProgress ? 'Toastify__progress-bar--controlled' : 'Toastify__progress-bar--animated', "Toastify__progress-bar--" + type, {
|
|
'Toastify__progress-bar--rtl': rtl
|
|
}, className);
|
|
var animationEvent = (_animationEvent = {}, _animationEvent[controlledProgress && isProgressDone ? 'onTransitionEnd' : 'onAnimationEnd'] = controlledProgress && !isProgressDone ? null : closeToast, _animationEvent);
|
|
return _react.default.createElement("div", _extends({
|
|
className: classNames,
|
|
style: style
|
|
}, animationEvent));
|
|
}
|
|
|
|
ProgressBar.propTypes = {
|
|
/**
|
|
* The animation delay which determine when to close the toast
|
|
*/
|
|
delay: propValidator.falseOrDelay.isRequired,
|
|
|
|
/**
|
|
* Whether or not the animation is running or paused
|
|
*/
|
|
isRunning: _propTypes.default.bool.isRequired,
|
|
|
|
/**
|
|
* Func to close the current toast
|
|
*/
|
|
closeToast: _propTypes.default.func.isRequired,
|
|
|
|
/**
|
|
* Support rtl content
|
|
*/
|
|
rtl: _propTypes.default.bool.isRequired,
|
|
|
|
/**
|
|
* Optional type : info, success ...
|
|
*/
|
|
type: _propTypes.default.string,
|
|
|
|
/**
|
|
* Hide or not the progress bar
|
|
*/
|
|
hide: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Optionnal className
|
|
*/
|
|
className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
|
|
/**
|
|
* Controlled progress value
|
|
*/
|
|
progress: _propTypes.default.number,
|
|
|
|
/**
|
|
* Tell wether or not controlled progress bar is used
|
|
*/
|
|
controlledProgress: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Helper to close the toast when using controlled progress value
|
|
*/
|
|
isProgressDone: _propTypes.default.bool
|
|
};
|
|
ProgressBar.defaultProps = {
|
|
type: constant.TYPE.DEFAULT,
|
|
hide: false
|
|
};
|
|
var _default = ProgressBar;
|
|
exports.default = _default;
|
|
});
|
|
|
|
unwrapExports(ProgressBar_1);
|
|
|
|
var Toast_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _react = _interopRequireWildcard(React);
|
|
|
|
var _propTypes = _interopRequireDefault(require$$1);
|
|
|
|
var _classnames = _interopRequireDefault(classnames);
|
|
|
|
var _ProgressBar = _interopRequireDefault(ProgressBar_1);
|
|
|
|
|
|
|
|
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
|
|
function _extends() { _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; }; return _extends.apply(this, arguments); }
|
|
|
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
|
|
function getX(e) {
|
|
return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientX : e.clientX;
|
|
}
|
|
|
|
function getY(e) {
|
|
return e.targetTouches && e.targetTouches.length >= 1 ? e.targetTouches[0].clientY : e.clientY;
|
|
}
|
|
|
|
var noop = function noop() {};
|
|
|
|
var Toast =
|
|
/*#__PURE__*/
|
|
function (_Component) {
|
|
_inheritsLoose(Toast, _Component);
|
|
|
|
function Toast() {
|
|
var _this;
|
|
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
_this.state = {
|
|
isRunning: true,
|
|
preventExitTransition: false
|
|
};
|
|
_this.flag = {
|
|
canCloseOnClick: true,
|
|
canDrag: false
|
|
};
|
|
_this.drag = {
|
|
start: 0,
|
|
x: 0,
|
|
y: 0,
|
|
deltaX: 0,
|
|
removalDistance: 0
|
|
};
|
|
_this.ref = null;
|
|
|
|
_this.pauseToast = function () {
|
|
if (_this.props.autoClose) {
|
|
_this.setState({
|
|
isRunning: false
|
|
});
|
|
}
|
|
};
|
|
|
|
_this.playToast = function () {
|
|
if (_this.props.autoClose) {
|
|
_this.setState({
|
|
isRunning: true
|
|
});
|
|
}
|
|
};
|
|
|
|
_this.onDragStart = function (e) {
|
|
_this.flag.canCloseOnClick = true;
|
|
_this.flag.canDrag = true;
|
|
_this.ref.style.transition = '';
|
|
_this.drag.start = _this.drag.x = getX(e.nativeEvent);
|
|
_this.drag.removalDistance = _this.ref.offsetWidth * (_this.props.draggablePercent / 100);
|
|
};
|
|
|
|
_this.onDragMove = function (e) {
|
|
if (_this.flag.canDrag) {
|
|
if (_this.state.isRunning) {
|
|
_this.pauseToast();
|
|
}
|
|
|
|
_this.drag.x = getX(e);
|
|
_this.drag.deltaX = _this.drag.x - _this.drag.start; // prevent false positif during a toast click
|
|
|
|
_this.drag.start !== _this.drag.x && (_this.flag.canCloseOnClick = false);
|
|
_this.ref.style.transform = "translateX(" + _this.drag.deltaX + "px)";
|
|
_this.ref.style.opacity = 1 - Math.abs(_this.drag.deltaX / _this.drag.removalDistance);
|
|
}
|
|
};
|
|
|
|
_this.onDragEnd = function (e) {
|
|
if (_this.flag.canDrag) {
|
|
_this.flag.canDrag = false;
|
|
|
|
if (Math.abs(_this.drag.deltaX) > _this.drag.removalDistance) {
|
|
_this.setState({
|
|
preventExitTransition: true
|
|
}, _this.props.closeToast);
|
|
|
|
return;
|
|
}
|
|
|
|
_this.drag.y = getY(e);
|
|
_this.ref.style.transition = 'transform 0.2s, opacity 0.2s';
|
|
_this.ref.style.transform = 'translateX(0)';
|
|
_this.ref.style.opacity = 1;
|
|
}
|
|
};
|
|
|
|
_this.onDragTransitionEnd = function () {
|
|
var _this$ref$getBounding = _this.ref.getBoundingClientRect(),
|
|
top = _this$ref$getBounding.top,
|
|
bottom = _this$ref$getBounding.bottom,
|
|
left = _this$ref$getBounding.left,
|
|
right = _this$ref$getBounding.right;
|
|
|
|
if (_this.props.pauseOnHover && _this.drag.x >= left && _this.drag.x <= right && _this.drag.y >= top && _this.drag.y <= bottom) {
|
|
_this.pauseToast();
|
|
} else {
|
|
_this.playToast();
|
|
}
|
|
};
|
|
|
|
return _this;
|
|
}
|
|
|
|
var _proto = Toast.prototype;
|
|
|
|
_proto.componentDidMount = function componentDidMount() {
|
|
this.props.onOpen(this.props.children.props);
|
|
|
|
if (this.props.draggable) {
|
|
this.bindDragEvents();
|
|
} // Maybe I could bind the event in the ToastContainer and rely on delegation
|
|
|
|
|
|
if (this.props.pauseOnFocusLoss) {
|
|
this.bindFocusEvents();
|
|
}
|
|
};
|
|
|
|
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
if (prevProps.draggable !== this.props.draggable) {
|
|
if (this.props.draggable) {
|
|
this.bindDragEvents();
|
|
} else {
|
|
this.unbindDragEvents();
|
|
}
|
|
}
|
|
|
|
if (prevProps.pauseOnFocusLoss !== this.props.pauseOnFocusLoss) {
|
|
if (this.props.pauseOnFocusLoss) {
|
|
this.bindFocusEvents();
|
|
} else {
|
|
this.unbindFocusEvents();
|
|
}
|
|
}
|
|
};
|
|
|
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
this.props.onClose(this.props.children.props);
|
|
|
|
if (this.props.draggable) {
|
|
this.unbindDragEvents();
|
|
}
|
|
|
|
if (this.props.pauseOnFocusLoss) {
|
|
this.unbindFocusEvents();
|
|
}
|
|
};
|
|
|
|
_proto.bindFocusEvents = function bindFocusEvents() {
|
|
window.addEventListener('focus', this.playToast);
|
|
window.addEventListener('blur', this.pauseToast);
|
|
};
|
|
|
|
_proto.unbindFocusEvents = function unbindFocusEvents() {
|
|
window.removeEventListener('focus', this.playToast);
|
|
window.removeEventListener('blur', this.pauseToast);
|
|
};
|
|
|
|
_proto.bindDragEvents = function bindDragEvents() {
|
|
document.addEventListener('mousemove', this.onDragMove);
|
|
document.addEventListener('mouseup', this.onDragEnd);
|
|
document.addEventListener('touchmove', this.onDragMove);
|
|
document.addEventListener('touchend', this.onDragEnd);
|
|
};
|
|
|
|
_proto.unbindDragEvents = function unbindDragEvents() {
|
|
document.removeEventListener('mousemove', this.onDragMove);
|
|
document.removeEventListener('mouseup', this.onDragEnd);
|
|
document.removeEventListener('touchmove', this.onDragMove);
|
|
document.removeEventListener('touchend', this.onDragEnd);
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var _this2 = this;
|
|
|
|
var _this$props = this.props,
|
|
closeButton = _this$props.closeButton,
|
|
children = _this$props.children,
|
|
autoClose = _this$props.autoClose,
|
|
pauseOnHover = _this$props.pauseOnHover,
|
|
closeOnClick = _this$props.closeOnClick,
|
|
type = _this$props.type,
|
|
hideProgressBar = _this$props.hideProgressBar,
|
|
closeToast = _this$props.closeToast,
|
|
Transition = _this$props.transition,
|
|
position = _this$props.position,
|
|
onExited = _this$props.onExited,
|
|
className = _this$props.className,
|
|
bodyClassName = _this$props.bodyClassName,
|
|
progressClassName = _this$props.progressClassName,
|
|
progressStyle = _this$props.progressStyle,
|
|
updateId = _this$props.updateId,
|
|
role = _this$props.role,
|
|
progress = _this$props.progress,
|
|
isProgressDone = _this$props.isProgressDone,
|
|
rtl = _this$props.rtl;
|
|
var toastProps = {
|
|
className: (0, _classnames.default)('Toastify__toast', "Toastify__toast--" + type, {
|
|
'Toastify__toast--rtl': rtl
|
|
}, className)
|
|
};
|
|
|
|
if (autoClose && pauseOnHover) {
|
|
toastProps.onMouseEnter = this.pauseToast;
|
|
toastProps.onMouseLeave = this.playToast;
|
|
} // prevent toast from closing when user drags the toast
|
|
|
|
|
|
if (closeOnClick) {
|
|
toastProps.onClick = function () {
|
|
return _this2.flag.canCloseOnClick && closeToast();
|
|
};
|
|
}
|
|
|
|
var controlledProgress = parseFloat(progress) === progress;
|
|
return _react.default.createElement(Transition, {
|
|
in: this.props.in,
|
|
appear: true,
|
|
unmountOnExit: true,
|
|
onExited: onExited,
|
|
position: position,
|
|
preventExitTransition: this.state.preventExitTransition
|
|
}, _react.default.createElement("div", _extends({}, toastProps, {
|
|
ref: function ref(_ref) {
|
|
return _this2.ref = _ref;
|
|
},
|
|
onMouseDown: this.onDragStart,
|
|
onTouchStart: this.onDragStart,
|
|
onTransitionEnd: this.onDragTransitionEnd
|
|
}), _react.default.createElement("div", _extends({}, this.props.in && {
|
|
role: role
|
|
}, {
|
|
className: (0, _classnames.default)('Toastify__toast-body', bodyClassName)
|
|
}), children), closeButton && closeButton, (autoClose || controlledProgress) && _react.default.createElement(_ProgressBar.default, _extends({}, updateId && !controlledProgress ? {
|
|
key: "pb-" + updateId
|
|
} : {}, {
|
|
rtl: rtl,
|
|
delay: autoClose,
|
|
isRunning: this.state.isRunning,
|
|
closeToast: closeToast,
|
|
hide: hideProgressBar,
|
|
type: type,
|
|
style: progressStyle,
|
|
className: progressClassName,
|
|
controlledProgress: controlledProgress,
|
|
isProgressDone: isProgressDone,
|
|
progress: progress
|
|
}))));
|
|
};
|
|
|
|
return Toast;
|
|
}(_react.Component);
|
|
|
|
Toast.propTypes = {
|
|
closeButton: propValidator.falseOrElement.isRequired,
|
|
autoClose: propValidator.falseOrDelay.isRequired,
|
|
children: _propTypes.default.node.isRequired,
|
|
closeToast: _propTypes.default.func.isRequired,
|
|
position: _propTypes.default.oneOf((0, propValidator.objectValues)(constant.POSITION)).isRequired,
|
|
pauseOnHover: _propTypes.default.bool.isRequired,
|
|
pauseOnFocusLoss: _propTypes.default.bool.isRequired,
|
|
closeOnClick: _propTypes.default.bool.isRequired,
|
|
transition: _propTypes.default.func.isRequired,
|
|
rtl: _propTypes.default.bool.isRequired,
|
|
hideProgressBar: _propTypes.default.bool.isRequired,
|
|
draggable: _propTypes.default.bool.isRequired,
|
|
draggablePercent: _propTypes.default.number.isRequired,
|
|
in: _propTypes.default.bool,
|
|
onExited: _propTypes.default.func,
|
|
onOpen: _propTypes.default.func,
|
|
onClose: _propTypes.default.func,
|
|
type: _propTypes.default.oneOf((0, propValidator.objectValues)(constant.TYPE)),
|
|
className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
bodyClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
progressClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
progressStyle: _propTypes.default.object,
|
|
progress: _propTypes.default.number,
|
|
isProgressDone: _propTypes.default.bool,
|
|
updateId: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
|
|
ariaLabel: _propTypes.default.string
|
|
};
|
|
Toast.defaultProps = {
|
|
type: constant.TYPE.DEFAULT,
|
|
in: true,
|
|
onOpen: noop,
|
|
onClose: noop,
|
|
className: null,
|
|
bodyClassName: null,
|
|
progressClassName: null,
|
|
updateId: null,
|
|
role: 'alert'
|
|
};
|
|
var _default = Toast;
|
|
exports.default = _default;
|
|
});
|
|
|
|
unwrapExports(Toast_1);
|
|
|
|
var CloseButton_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _react = _interopRequireDefault(React);
|
|
|
|
var _propTypes = _interopRequireDefault(require$$1);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function CloseButton(_ref) {
|
|
var closeToast = _ref.closeToast,
|
|
type = _ref.type,
|
|
ariaLabel = _ref.ariaLabel;
|
|
return _react.default.createElement("button", {
|
|
className: "Toastify__close-button Toastify__close-button--" + type,
|
|
type: "button",
|
|
onClick: closeToast,
|
|
"aria-label": ariaLabel
|
|
}, "\u2716");
|
|
}
|
|
|
|
CloseButton.propTypes = {
|
|
closeToast: _propTypes.default.func,
|
|
arialLabel: _propTypes.default.string
|
|
};
|
|
CloseButton.defaultProps = {
|
|
ariaLabel: 'close'
|
|
};
|
|
var _default = CloseButton;
|
|
exports.default = _default;
|
|
});
|
|
|
|
unwrapExports(CloseButton_1);
|
|
|
|
var PropTypes = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.classNamesShape = exports.timeoutsShape = void 0;
|
|
|
|
var _propTypes = _interopRequireDefault(require$$1);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
var timeoutsShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
|
|
enter: _propTypes.default.number,
|
|
exit: _propTypes.default.number,
|
|
appear: _propTypes.default.number
|
|
}).isRequired]) : null;
|
|
exports.timeoutsShape = timeoutsShape;
|
|
var classNamesShape = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.shape({
|
|
enter: _propTypes.default.string,
|
|
exit: _propTypes.default.string,
|
|
active: _propTypes.default.string
|
|
}), _propTypes.default.shape({
|
|
enter: _propTypes.default.string,
|
|
enterDone: _propTypes.default.string,
|
|
enterActive: _propTypes.default.string,
|
|
exit: _propTypes.default.string,
|
|
exitDone: _propTypes.default.string,
|
|
exitActive: _propTypes.default.string
|
|
})]) : null;
|
|
exports.classNamesShape = classNamesShape;
|
|
});
|
|
|
|
unwrapExports(PropTypes);
|
|
var PropTypes_1 = PropTypes.classNamesShape;
|
|
var PropTypes_2 = PropTypes.timeoutsShape;
|
|
|
|
var Transition_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = exports.EXITING = exports.ENTERED = exports.ENTERING = exports.EXITED = exports.UNMOUNTED = void 0;
|
|
|
|
var PropTypes$$1 = _interopRequireWildcard(require$$1);
|
|
|
|
var _react = _interopRequireDefault(React);
|
|
|
|
var _reactDom = _interopRequireDefault(reactDom);
|
|
|
|
|
|
|
|
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
|
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
|
|
var UNMOUNTED = 'unmounted';
|
|
exports.UNMOUNTED = UNMOUNTED;
|
|
var EXITED = 'exited';
|
|
exports.EXITED = EXITED;
|
|
var ENTERING = 'entering';
|
|
exports.ENTERING = ENTERING;
|
|
var ENTERED = 'entered';
|
|
exports.ENTERED = ENTERED;
|
|
var EXITING = 'exiting';
|
|
/**
|
|
* The Transition component lets you describe a transition from one component
|
|
* state to another _over time_ with a simple declarative API. Most commonly
|
|
* it's used to animate the mounting and unmounting of a component, but can also
|
|
* be used to describe in-place transition states as well.
|
|
*
|
|
* By default the `Transition` component does not alter the behavior of the
|
|
* component it renders, it only tracks "enter" and "exit" states for the components.
|
|
* It's up to you to give meaning and effect to those states. For example we can
|
|
* add styles to a component when it enters or exits:
|
|
*
|
|
* ```jsx
|
|
* import Transition from 'react-transition-group/Transition';
|
|
*
|
|
* const duration = 300;
|
|
*
|
|
* const defaultStyle = {
|
|
* transition: `opacity ${duration}ms ease-in-out`,
|
|
* opacity: 0,
|
|
* }
|
|
*
|
|
* const transitionStyles = {
|
|
* entering: { opacity: 0 },
|
|
* entered: { opacity: 1 },
|
|
* };
|
|
*
|
|
* const Fade = ({ in: inProp }) => (
|
|
* <Transition in={inProp} timeout={duration}>
|
|
* {(state) => (
|
|
* <div style={{
|
|
* ...defaultStyle,
|
|
* ...transitionStyles[state]
|
|
* }}>
|
|
* I'm a fade Transition!
|
|
* </div>
|
|
* )}
|
|
* </Transition>
|
|
* );
|
|
* ```
|
|
*
|
|
* As noted the `Transition` component doesn't _do_ anything by itself to its child component.
|
|
* What it does do is track transition states over time so you can update the
|
|
* component (such as by adding styles or classes) when it changes states.
|
|
*
|
|
* There are 4 main states a Transition can be in:
|
|
* - `'entering'`
|
|
* - `'entered'`
|
|
* - `'exiting'`
|
|
* - `'exited'`
|
|
*
|
|
* Transition state is toggled via the `in` prop. When `true` the component begins the
|
|
* "Enter" stage. During this stage, the component will shift from its current transition state,
|
|
* to `'entering'` for the duration of the transition and then to the `'entered'` stage once
|
|
* it's complete. Let's take the following example:
|
|
*
|
|
* ```jsx
|
|
* state = { in: false };
|
|
*
|
|
* toggleEnterState = () => {
|
|
* this.setState({ in: true });
|
|
* }
|
|
*
|
|
* render() {
|
|
* return (
|
|
* <div>
|
|
* <Transition in={this.state.in} timeout={500} />
|
|
* <button onClick={this.toggleEnterState}>Click to Enter</button>
|
|
* </div>
|
|
* );
|
|
* }
|
|
* ```
|
|
*
|
|
* When the button is clicked the component will shift to the `'entering'` state and
|
|
* stay there for 500ms (the value of `timeout`) before it finally switches to `'entered'`.
|
|
*
|
|
* When `in` is `false` the same thing happens except the state moves from `'exiting'` to `'exited'`.
|
|
*
|
|
* ## Timing
|
|
*
|
|
* Timing is often the trickiest part of animation, mistakes can result in slight delays
|
|
* that are hard to pin down. A common example is when you want to add an exit transition,
|
|
* you should set the desired final styles when the state is `'exiting'`. That's when the
|
|
* transition to those styles will start and, if you matched the `timeout` prop with the
|
|
* CSS Transition duration, it will end exactly when the state changes to `'exited'`.
|
|
*
|
|
* > **Note**: For simpler transitions the `Transition` component might be enough, but
|
|
* > take into account that it's platform-agnostic, while the `CSSTransition` component
|
|
* > [forces reflows](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)
|
|
* > in order to make more complex transitions more predictable. For example, even though
|
|
* > classes `example-enter` and `example-enter-active` are applied immediately one after
|
|
* > another, you can still transition from one to the other because of the forced reflow
|
|
* > (read [this issue](https://github.com/reactjs/react-transition-group/issues/159#issuecomment-322761171)
|
|
* > for more info). Take this into account when choosing between `Transition` and
|
|
* > `CSSTransition`.
|
|
*/
|
|
|
|
exports.EXITING = EXITING;
|
|
|
|
var Transition =
|
|
/*#__PURE__*/
|
|
function (_React$Component) {
|
|
_inheritsLoose(Transition, _React$Component);
|
|
|
|
function Transition(props, context) {
|
|
var _this;
|
|
|
|
_this = _React$Component.call(this, props, context) || this;
|
|
var parentGroup = context.transitionGroup; // In the context of a TransitionGroup all enters are really appears
|
|
|
|
var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;
|
|
var initialStatus;
|
|
_this.appearStatus = null;
|
|
|
|
if (props.in) {
|
|
if (appear) {
|
|
initialStatus = EXITED;
|
|
_this.appearStatus = ENTERING;
|
|
} else {
|
|
initialStatus = ENTERED;
|
|
}
|
|
} else {
|
|
if (props.unmountOnExit || props.mountOnEnter) {
|
|
initialStatus = UNMOUNTED;
|
|
} else {
|
|
initialStatus = EXITED;
|
|
}
|
|
}
|
|
|
|
_this.state = {
|
|
status: initialStatus
|
|
};
|
|
_this.nextCallback = null;
|
|
return _this;
|
|
}
|
|
|
|
var _proto = Transition.prototype;
|
|
|
|
_proto.getChildContext = function getChildContext() {
|
|
return {
|
|
transitionGroup: null // allows for nested Transitions
|
|
|
|
};
|
|
};
|
|
|
|
Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {
|
|
var nextIn = _ref.in;
|
|
|
|
if (nextIn && prevState.status === UNMOUNTED) {
|
|
return {
|
|
status: EXITED
|
|
};
|
|
}
|
|
|
|
return null;
|
|
}; // getSnapshotBeforeUpdate(prevProps) {
|
|
// let nextStatus = null
|
|
// if (prevProps !== this.props) {
|
|
// const { status } = this.state
|
|
// if (this.props.in) {
|
|
// if (status !== ENTERING && status !== ENTERED) {
|
|
// nextStatus = ENTERING
|
|
// }
|
|
// } else {
|
|
// if (status === ENTERING || status === ENTERED) {
|
|
// nextStatus = EXITING
|
|
// }
|
|
// }
|
|
// }
|
|
// return { nextStatus }
|
|
// }
|
|
|
|
|
|
_proto.componentDidMount = function componentDidMount() {
|
|
this.updateStatus(true, this.appearStatus);
|
|
};
|
|
|
|
_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
|
|
var nextStatus = null;
|
|
|
|
if (prevProps !== this.props) {
|
|
var status = this.state.status;
|
|
|
|
if (this.props.in) {
|
|
if (status !== ENTERING && status !== ENTERED) {
|
|
nextStatus = ENTERING;
|
|
}
|
|
} else {
|
|
if (status === ENTERING || status === ENTERED) {
|
|
nextStatus = EXITING;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.updateStatus(false, nextStatus);
|
|
};
|
|
|
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
this.cancelNextCallback();
|
|
};
|
|
|
|
_proto.getTimeouts = function getTimeouts() {
|
|
var timeout = this.props.timeout;
|
|
var exit, enter, appear;
|
|
exit = enter = appear = timeout;
|
|
|
|
if (timeout != null && typeof timeout !== 'number') {
|
|
exit = timeout.exit;
|
|
enter = timeout.enter; // TODO: remove fallback for next major
|
|
|
|
appear = timeout.appear !== undefined ? timeout.appear : enter;
|
|
}
|
|
|
|
return {
|
|
exit: exit,
|
|
enter: enter,
|
|
appear: appear
|
|
};
|
|
};
|
|
|
|
_proto.updateStatus = function updateStatus(mounting, nextStatus) {
|
|
if (mounting === void 0) {
|
|
mounting = false;
|
|
}
|
|
|
|
if (nextStatus !== null) {
|
|
// nextStatus will always be ENTERING or EXITING.
|
|
this.cancelNextCallback();
|
|
|
|
var node = _reactDom.default.findDOMNode(this);
|
|
|
|
if (nextStatus === ENTERING) {
|
|
this.performEnter(node, mounting);
|
|
} else {
|
|
this.performExit(node);
|
|
}
|
|
} else if (this.props.unmountOnExit && this.state.status === EXITED) {
|
|
this.setState({
|
|
status: UNMOUNTED
|
|
});
|
|
}
|
|
};
|
|
|
|
_proto.performEnter = function performEnter(node, mounting) {
|
|
var _this2 = this;
|
|
|
|
var enter = this.props.enter;
|
|
var appearing = this.context.transitionGroup ? this.context.transitionGroup.isMounting : mounting;
|
|
var timeouts = this.getTimeouts();
|
|
var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED
|
|
// if we are mounting and running this it means appear _must_ be set
|
|
|
|
if (!mounting && !enter) {
|
|
this.safeSetState({
|
|
status: ENTERED
|
|
}, function () {
|
|
_this2.props.onEntered(node);
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.props.onEnter(node, appearing);
|
|
this.safeSetState({
|
|
status: ENTERING
|
|
}, function () {
|
|
_this2.props.onEntering(node, appearing);
|
|
|
|
_this2.onTransitionEnd(node, enterTimeout, function () {
|
|
_this2.safeSetState({
|
|
status: ENTERED
|
|
}, function () {
|
|
_this2.props.onEntered(node, appearing);
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
_proto.performExit = function performExit(node) {
|
|
var _this3 = this;
|
|
|
|
var exit = this.props.exit;
|
|
var timeouts = this.getTimeouts(); // no exit animation skip right to EXITED
|
|
|
|
if (!exit) {
|
|
this.safeSetState({
|
|
status: EXITED
|
|
}, function () {
|
|
_this3.props.onExited(node);
|
|
});
|
|
return;
|
|
}
|
|
|
|
this.props.onExit(node);
|
|
this.safeSetState({
|
|
status: EXITING
|
|
}, function () {
|
|
_this3.props.onExiting(node);
|
|
|
|
_this3.onTransitionEnd(node, timeouts.exit, function () {
|
|
_this3.safeSetState({
|
|
status: EXITED
|
|
}, function () {
|
|
_this3.props.onExited(node);
|
|
});
|
|
});
|
|
});
|
|
};
|
|
|
|
_proto.cancelNextCallback = function cancelNextCallback() {
|
|
if (this.nextCallback !== null) {
|
|
this.nextCallback.cancel();
|
|
this.nextCallback = null;
|
|
}
|
|
};
|
|
|
|
_proto.safeSetState = function safeSetState(nextState, callback) {
|
|
// This shouldn't be necessary, but there are weird race conditions with
|
|
// setState callbacks and unmounting in testing, so always make sure that
|
|
// we can cancel any pending setState callbacks after we unmount.
|
|
callback = this.setNextCallback(callback);
|
|
this.setState(nextState, callback);
|
|
};
|
|
|
|
_proto.setNextCallback = function setNextCallback(callback) {
|
|
var _this4 = this;
|
|
|
|
var active = true;
|
|
|
|
this.nextCallback = function (event) {
|
|
if (active) {
|
|
active = false;
|
|
_this4.nextCallback = null;
|
|
callback(event);
|
|
}
|
|
};
|
|
|
|
this.nextCallback.cancel = function () {
|
|
active = false;
|
|
};
|
|
|
|
return this.nextCallback;
|
|
};
|
|
|
|
_proto.onTransitionEnd = function onTransitionEnd(node, timeout, handler) {
|
|
this.setNextCallback(handler);
|
|
|
|
if (node) {
|
|
if (this.props.addEndListener) {
|
|
this.props.addEndListener(node, this.nextCallback);
|
|
}
|
|
|
|
if (timeout != null) {
|
|
setTimeout(this.nextCallback, timeout);
|
|
}
|
|
} else {
|
|
setTimeout(this.nextCallback, 0);
|
|
}
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
var status = this.state.status;
|
|
|
|
if (status === UNMOUNTED) {
|
|
return null;
|
|
}
|
|
|
|
var _this$props = this.props,
|
|
children = _this$props.children,
|
|
childProps = _objectWithoutPropertiesLoose(_this$props, ["children"]); // filter props for Transtition
|
|
|
|
|
|
delete childProps.in;
|
|
delete childProps.mountOnEnter;
|
|
delete childProps.unmountOnExit;
|
|
delete childProps.appear;
|
|
delete childProps.enter;
|
|
delete childProps.exit;
|
|
delete childProps.timeout;
|
|
delete childProps.addEndListener;
|
|
delete childProps.onEnter;
|
|
delete childProps.onEntering;
|
|
delete childProps.onEntered;
|
|
delete childProps.onExit;
|
|
delete childProps.onExiting;
|
|
delete childProps.onExited;
|
|
|
|
if (typeof children === 'function') {
|
|
return children(status, childProps);
|
|
}
|
|
|
|
var child = _react.default.Children.only(children);
|
|
|
|
return _react.default.cloneElement(child, childProps);
|
|
};
|
|
|
|
return Transition;
|
|
}(_react.default.Component);
|
|
|
|
Transition.contextTypes = {
|
|
transitionGroup: PropTypes$$1.object
|
|
};
|
|
Transition.childContextTypes = {
|
|
transitionGroup: function transitionGroup() {}
|
|
};
|
|
Transition.propTypes = process.env.NODE_ENV !== "production" ? {
|
|
/**
|
|
* A `function` child can be used instead of a React element.
|
|
* This function is called with the current transition status
|
|
* ('entering', 'entered', 'exiting', 'exited', 'unmounted'), which can be used
|
|
* to apply context specific props to a component.
|
|
*
|
|
* ```jsx
|
|
* <Transition timeout={150}>
|
|
* {(status) => (
|
|
* <MyComponent className={`fade fade-${status}`} />
|
|
* )}
|
|
* </Transition>
|
|
* ```
|
|
*/
|
|
children: PropTypes$$1.oneOfType([PropTypes$$1.func.isRequired, PropTypes$$1.element.isRequired]).isRequired,
|
|
|
|
/**
|
|
* Show the component; triggers the enter or exit states
|
|
*/
|
|
in: PropTypes$$1.bool,
|
|
|
|
/**
|
|
* By default the child component is mounted immediately along with
|
|
* the parent `Transition` component. If you want to "lazy mount" the component on the
|
|
* first `in={true}` you can set `mountOnEnter`. After the first enter transition the component will stay
|
|
* mounted, even on "exited", unless you also specify `unmountOnExit`.
|
|
*/
|
|
mountOnEnter: PropTypes$$1.bool,
|
|
|
|
/**
|
|
* By default the child component stays mounted after it reaches the `'exited'` state.
|
|
* Set `unmountOnExit` if you'd prefer to unmount the component after it finishes exiting.
|
|
*/
|
|
unmountOnExit: PropTypes$$1.bool,
|
|
|
|
/**
|
|
* Normally a component is not transitioned if it is shown when the `<Transition>` component mounts.
|
|
* If you want to transition on the first mount set `appear` to `true`, and the
|
|
* component will transition in as soon as the `<Transition>` mounts.
|
|
*
|
|
* > Note: there are no specific "appear" states. `appear` only adds an additional `enter` transition.
|
|
*/
|
|
appear: PropTypes$$1.bool,
|
|
|
|
/**
|
|
* Enable or disable enter transitions.
|
|
*/
|
|
enter: PropTypes$$1.bool,
|
|
|
|
/**
|
|
* Enable or disable exit transitions.
|
|
*/
|
|
exit: PropTypes$$1.bool,
|
|
|
|
/**
|
|
* The duration of the transition, in milliseconds.
|
|
* Required unless `addEndListener` is provided
|
|
*
|
|
* You may specify a single timeout for all transitions like: `timeout={500}`,
|
|
* or individually like:
|
|
*
|
|
* ```jsx
|
|
* timeout={{
|
|
* enter: 300,
|
|
* exit: 500,
|
|
* appear: 500,
|
|
* }}
|
|
* ```
|
|
*
|
|
* If the value of appear is not set, then the value from enter is taken.
|
|
*
|
|
* @type {number | { enter?: number, exit?: number }}
|
|
*/
|
|
timeout: function timeout(props) {
|
|
var pt = process.env.NODE_ENV !== "production" ? PropTypes.timeoutsShape : {}; if (!props.addEndListener) pt = pt.isRequired;
|
|
|
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
args[_key - 1] = arguments[_key];
|
|
}
|
|
|
|
return pt.apply(void 0, [props].concat(args));
|
|
},
|
|
|
|
/**
|
|
* Add a custom transition end trigger. Called with the transitioning
|
|
* DOM node and a `done` callback. Allows for more fine grained transition end
|
|
* logic. **Note:** Timeouts are still used as a fallback if provided.
|
|
*
|
|
* ```jsx
|
|
* addEndListener={(node, done) => {
|
|
* // use the css transitionend event to mark the finish of a transition
|
|
* node.addEventListener('transitionend', done, false);
|
|
* }}
|
|
* ```
|
|
*/
|
|
addEndListener: PropTypes$$1.func,
|
|
|
|
/**
|
|
* Callback fired before the "entering" status is applied. An extra parameter
|
|
* `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool) -> void
|
|
*/
|
|
onEnter: PropTypes$$1.func,
|
|
|
|
/**
|
|
* Callback fired after the "entering" status is applied. An extra parameter
|
|
* `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool)
|
|
*/
|
|
onEntering: PropTypes$$1.func,
|
|
|
|
/**
|
|
* Callback fired after the "entered" status is applied. An extra parameter
|
|
* `isAppearing` is supplied to indicate if the enter stage is occurring on the initial mount
|
|
*
|
|
* @type Function(node: HtmlElement, isAppearing: bool) -> void
|
|
*/
|
|
onEntered: PropTypes$$1.func,
|
|
|
|
/**
|
|
* Callback fired before the "exiting" status is applied.
|
|
*
|
|
* @type Function(node: HtmlElement) -> void
|
|
*/
|
|
onExit: PropTypes$$1.func,
|
|
|
|
/**
|
|
* Callback fired after the "exiting" status is applied.
|
|
*
|
|
* @type Function(node: HtmlElement) -> void
|
|
*/
|
|
onExiting: PropTypes$$1.func,
|
|
|
|
/**
|
|
* Callback fired after the "exited" status is applied.
|
|
*
|
|
* @type Function(node: HtmlElement) -> void
|
|
*/
|
|
onExited: PropTypes$$1.func // Name the function so it is clearer in the documentation
|
|
|
|
} : {};
|
|
|
|
function noop() {}
|
|
|
|
Transition.defaultProps = {
|
|
in: false,
|
|
mountOnEnter: false,
|
|
unmountOnExit: false,
|
|
appear: false,
|
|
enter: true,
|
|
exit: true,
|
|
onEnter: noop,
|
|
onEntering: noop,
|
|
onEntered: noop,
|
|
onExit: noop,
|
|
onExiting: noop,
|
|
onExited: noop
|
|
};
|
|
Transition.UNMOUNTED = 0;
|
|
Transition.EXITED = 1;
|
|
Transition.ENTERING = 2;
|
|
Transition.ENTERED = 3;
|
|
Transition.EXITING = 4;
|
|
|
|
var _default = (0, reactLifecyclesCompat_es.polyfill)(Transition);
|
|
|
|
exports.default = _default;
|
|
});
|
|
|
|
unwrapExports(Transition_1);
|
|
var Transition_2 = Transition_1.EXITING;
|
|
var Transition_3 = Transition_1.ENTERED;
|
|
var Transition_4 = Transition_1.ENTERING;
|
|
var Transition_5 = Transition_1.EXITED;
|
|
var Transition_6 = Transition_1.UNMOUNTED;
|
|
|
|
var cssTransition = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = _default;
|
|
|
|
var _react = _interopRequireDefault(React);
|
|
|
|
var _Transition = _interopRequireDefault(Transition_1);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _extends() { _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; }; return _extends.apply(this, arguments); }
|
|
|
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
|
|
var noop = function noop() {};
|
|
|
|
function _default(_ref) {
|
|
var enter = _ref.enter,
|
|
exit = _ref.exit,
|
|
_ref$duration = _ref.duration,
|
|
duration = _ref$duration === void 0 ? 750 : _ref$duration,
|
|
_ref$appendPosition = _ref.appendPosition,
|
|
appendPosition = _ref$appendPosition === void 0 ? false : _ref$appendPosition;
|
|
return function Animation(_ref2) {
|
|
var children = _ref2.children,
|
|
position = _ref2.position,
|
|
preventExitTransition = _ref2.preventExitTransition,
|
|
props = _objectWithoutPropertiesLoose(_ref2, ["children", "position", "preventExitTransition"]);
|
|
|
|
var enterClassName = appendPosition ? enter + "--" + position : enter;
|
|
var exitClassName = appendPosition ? exit + "--" + position : exit;
|
|
var enterDuration, exitDuration;
|
|
|
|
if (Array.isArray(duration) && duration.length === 2) {
|
|
enterDuration = duration[0];
|
|
exitDuration = duration[1];
|
|
} else {
|
|
enterDuration = exitDuration = duration;
|
|
}
|
|
|
|
var onEnter = function onEnter(node) {
|
|
node.classList.add(enterClassName);
|
|
node.style.animationFillMode = 'forwards';
|
|
node.style.animationDuration = enterDuration * 0.001 + "s";
|
|
};
|
|
|
|
var onEntered = function onEntered(node) {
|
|
node.classList.remove(enterClassName);
|
|
node.style.cssText = '';
|
|
};
|
|
|
|
var onExit = function onExit(node) {
|
|
node.classList.add(exitClassName);
|
|
node.style.animationFillMode = 'forwards';
|
|
node.style.animationDuration = exitDuration * 0.001 + "s";
|
|
};
|
|
|
|
return _react.default.createElement(_Transition.default, _extends({}, props, {
|
|
timeout: preventExitTransition ? 0 : {
|
|
enter: enterDuration,
|
|
exit: exitDuration
|
|
},
|
|
onEnter: onEnter,
|
|
onEntered: onEntered,
|
|
onExit: preventExitTransition ? noop : onExit
|
|
}), children);
|
|
};
|
|
}
|
|
});
|
|
|
|
unwrapExports(cssTransition);
|
|
|
|
var Transitions = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.Flip = exports.Zoom = exports.Slide = exports.Bounce = void 0;
|
|
|
|
var _cssTransition = _interopRequireDefault(cssTransition);
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
var Bounce = (0, _cssTransition.default)({
|
|
enter: 'Toastify__bounce-enter',
|
|
exit: 'Toastify__bounce-exit',
|
|
appendPosition: true
|
|
});
|
|
exports.Bounce = Bounce;
|
|
var Slide = (0, _cssTransition.default)({
|
|
enter: 'Toastify__slide-enter',
|
|
exit: 'Toastify__slide-exit',
|
|
duration: [450, 750],
|
|
appendPosition: true
|
|
});
|
|
exports.Slide = Slide;
|
|
var Zoom = (0, _cssTransition.default)({
|
|
enter: 'Toastify__zoom-enter',
|
|
exit: 'Toastify__zoom-exit'
|
|
});
|
|
exports.Zoom = Zoom;
|
|
var Flip = (0, _cssTransition.default)({
|
|
enter: 'Toastify__flip-enter',
|
|
exit: 'Toastify__flip-exit'
|
|
});
|
|
exports.Flip = Flip;
|
|
});
|
|
|
|
unwrapExports(Transitions);
|
|
var Transitions_1 = Transitions.Flip;
|
|
var Transitions_2 = Transitions.Zoom;
|
|
var Transitions_3 = Transitions.Slide;
|
|
var Transitions_4 = Transitions.Bounce;
|
|
|
|
var eventManager_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
var eventManager = {
|
|
list: new Map(),
|
|
on: function on(event, callback) {
|
|
this.list.has(event) || this.list.set(event, []);
|
|
this.list.get(event).push(callback);
|
|
return this;
|
|
},
|
|
off: function off(event) {
|
|
this.list.delete(event);
|
|
return this;
|
|
},
|
|
emit: function emit(event) {
|
|
for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
|
|
args[_key - 1] = arguments[_key];
|
|
}
|
|
|
|
if (!this.list.has(event)) {
|
|
return false;
|
|
}
|
|
|
|
this.list.get(event).forEach(function (callback) {
|
|
return setTimeout(function () {
|
|
return callback.call.apply(callback, [null].concat(args));
|
|
}, 0);
|
|
});
|
|
return true;
|
|
}
|
|
};
|
|
var _default = eventManager;
|
|
exports.default = _default;
|
|
});
|
|
|
|
unwrapExports(eventManager_1);
|
|
|
|
var ToastContainer_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _react = _interopRequireWildcard(React);
|
|
|
|
var _propTypes = _interopRequireDefault(require$$1);
|
|
|
|
var _classnames = _interopRequireDefault(classnames);
|
|
|
|
var _TransitionGroup = _interopRequireDefault(TransitionGroup_1);
|
|
|
|
var _Toast = _interopRequireDefault(Toast_1);
|
|
|
|
var _CloseButton = _interopRequireDefault(CloseButton_1);
|
|
|
|
|
|
|
|
|
|
|
|
var _eventManager = _interopRequireDefault(eventManager_1);
|
|
|
|
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
|
|
|
|
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }
|
|
|
|
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance"); }
|
|
|
|
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
|
|
|
|
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }
|
|
|
|
function _extends() { _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; }; return _extends.apply(this, arguments); }
|
|
|
|
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
|
|
|
|
var ToastContainer =
|
|
/*#__PURE__*/
|
|
function (_Component) {
|
|
_inheritsLoose(ToastContainer, _Component);
|
|
|
|
function ToastContainer() {
|
|
var _this;
|
|
|
|
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
_this = _Component.call.apply(_Component, [this].concat(args)) || this;
|
|
_this.state = {
|
|
toast: []
|
|
};
|
|
_this.toastKey = 1;
|
|
_this.collection = {};
|
|
|
|
_this.isToastActive = function (id) {
|
|
return _this.state.toast.indexOf(id) !== -1;
|
|
};
|
|
|
|
return _this;
|
|
}
|
|
|
|
var _proto = ToastContainer.prototype;
|
|
|
|
_proto.componentDidMount = function componentDidMount() {
|
|
var _this2 = this;
|
|
|
|
_eventManager.default.on(constant.ACTION.SHOW, function (content, options) {
|
|
return _this2.show(content, options);
|
|
}).on(constant.ACTION.CLEAR, function (id) {
|
|
return !id ? _this2.clear() : _this2.removeToast(id);
|
|
}).emit(constant.ACTION.DID_MOUNT, this);
|
|
};
|
|
|
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
_eventManager.default.off(constant.ACTION.SHOW).off(constant.ACTION.CLEAR).emit(constant.ACTION.WILL_UNMOUNT);
|
|
};
|
|
|
|
_proto.removeToast = function removeToast(id) {
|
|
this.setState({
|
|
toast: this.state.toast.filter(function (v) {
|
|
return v !== id;
|
|
})
|
|
}, this.dispatchChange);
|
|
};
|
|
|
|
_proto.dispatchChange = function dispatchChange() {
|
|
_eventManager.default.emit(constant.ACTION.ON_CHANGE, this.state.toast.length);
|
|
};
|
|
|
|
_proto.makeCloseButton = 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
|
|
});
|
|
};
|
|
|
|
_proto.getAutoCloseDelay = function getAutoCloseDelay(toastAutoClose) {
|
|
return toastAutoClose === false || (0, propValidator.isValidDelay)(toastAutoClose) ? toastAutoClose : this.props.autoClose;
|
|
};
|
|
|
|
_proto.canBeRendered = function canBeRendered(content) {
|
|
return (0, _react.isValidElement)(content) || typeof content === 'string' || typeof content === 'number' || typeof content === 'function';
|
|
};
|
|
|
|
_proto.parseClassName = function parseClassName(prop) {
|
|
if (typeof prop === 'string') {
|
|
return prop;
|
|
} else if (prop !== null && typeof prop === 'object' && 'toString' in prop) {
|
|
return prop.toString();
|
|
}
|
|
|
|
return null;
|
|
};
|
|
|
|
_proto.show = function show(content, options) {
|
|
var _this4 = this,
|
|
_extends2;
|
|
|
|
if (!this.canBeRendered(content)) {
|
|
throw new Error("The element you provided cannot be rendered. You provided an element of type " + typeof content);
|
|
}
|
|
|
|
var toastId = options.toastId;
|
|
|
|
var closeToast = function closeToast() {
|
|
return _this4.removeToast(toastId);
|
|
};
|
|
|
|
var toastOptions = {
|
|
id: toastId,
|
|
// ⚠️ if no options.key, this.toastKey - 1 is assigned
|
|
key: options.key || this.toastKey++,
|
|
type: options.type,
|
|
closeToast: closeToast,
|
|
updateId: options.updateId,
|
|
rtl: this.props.rtl,
|
|
position: options.position || this.props.position,
|
|
transition: options.transition || this.props.transition,
|
|
className: this.parseClassName(options.className || this.props.toastClassName),
|
|
bodyClassName: this.parseClassName(options.bodyClassName || this.props.bodyClassName),
|
|
closeButton: this.makeCloseButton(options.closeButton, toastId, options.type),
|
|
pauseOnHover: typeof options.pauseOnHover === 'boolean' ? options.pauseOnHover : this.props.pauseOnHover,
|
|
pauseOnFocusLoss: typeof options.pauseOnFocusLoss === 'boolean' ? options.pauseOnFocusLoss : this.props.pauseOnFocusLoss,
|
|
draggable: typeof options.draggable === 'boolean' ? options.draggable : this.props.draggable,
|
|
draggablePercent: typeof options.draggablePercent === 'number' && !isNaN(options.draggablePercent) ? options.draggablePercent : this.props.draggablePercent,
|
|
closeOnClick: typeof options.closeOnClick === 'boolean' ? options.closeOnClick : this.props.closeOnClick,
|
|
progressClassName: this.parseClassName(options.progressClassName || this.props.progressClassName),
|
|
progressStyle: this.props.progressStyle,
|
|
autoClose: this.getAutoCloseDelay(options.autoClose),
|
|
hideProgressBar: typeof options.hideProgressBar === 'boolean' ? options.hideProgressBar : this.props.hideProgressBar,
|
|
progress: parseFloat(options.progress),
|
|
isProgressDone: options.isProgressDone
|
|
};
|
|
typeof options.onOpen === 'function' && (toastOptions.onOpen = options.onOpen);
|
|
typeof options.onClose === 'function' && (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 (typeof content === 'function') {
|
|
content = content({
|
|
closeToast: closeToast
|
|
});
|
|
}
|
|
|
|
this.collection = _extends({}, this.collection, (_extends2 = {}, _extends2[toastId] = {
|
|
position: toastOptions.position,
|
|
options: toastOptions,
|
|
content: content
|
|
}, _extends2));
|
|
this.setState({
|
|
toast: (toastOptions.updateId ? _toConsumableArray(this.state.toast) : _toConsumableArray(this.state.toast).concat([toastId])).filter(function (id) {
|
|
return id !== options.staleToastId;
|
|
})
|
|
}, this.dispatchChange);
|
|
};
|
|
|
|
_proto.makeToast = function makeToast(content, options) {
|
|
return _react.default.createElement(_Toast.default, _extends({}, options, {
|
|
isDocumentHidden: this.state.isDocumentHidden,
|
|
key: "toast-" + options.key
|
|
}), content);
|
|
};
|
|
|
|
_proto.clear = function clear() {
|
|
this.setState({
|
|
toast: []
|
|
});
|
|
};
|
|
|
|
_proto.renderToast = function renderToast() {
|
|
var _this5 = this;
|
|
|
|
var toastToRender = {};
|
|
var _this$props = this.props,
|
|
className = _this$props.className,
|
|
style = _this$props.style,
|
|
newestOnTop = _this$props.newestOnTop;
|
|
var collection = newestOnTop ? Object.keys(this.collection).reverse() : Object.keys(this.collection); // group toast by position
|
|
|
|
collection.forEach(function (toastId) {
|
|
var _this5$collection$toa = _this5.collection[toastId],
|
|
position = _this5$collection$toa.position,
|
|
options = _this5$collection$toa.options,
|
|
content = _this5$collection$toa.content;
|
|
toastToRender[position] || (toastToRender[position] = []);
|
|
|
|
if (_this5.state.toast.indexOf(options.id) !== -1) {
|
|
toastToRender[position].push(_this5.makeToast(content, options));
|
|
} else {
|
|
toastToRender[position].push(null);
|
|
delete _this5.collection[toastId];
|
|
}
|
|
});
|
|
return Object.keys(toastToRender).map(function (position) {
|
|
var disablePointer = toastToRender[position].length === 1 && toastToRender[position][0] === null;
|
|
var props = {
|
|
className: (0, _classnames.default)('Toastify__toast-container', "Toastify__toast-container--" + position, {
|
|
'Toastify__toast-container--rtl': _this5.props.rtl
|
|
}, _this5.parseClassName(className)),
|
|
style: disablePointer ? _extends({}, style, {
|
|
pointerEvents: 'none'
|
|
}) : _extends({}, style)
|
|
};
|
|
return _react.default.createElement(_TransitionGroup.default, _extends({}, props, {
|
|
key: "container-" + position
|
|
}), toastToRender[position]);
|
|
});
|
|
};
|
|
|
|
_proto.render = function render() {
|
|
return _react.default.createElement("div", {
|
|
className: "Toastify"
|
|
}, this.renderToast());
|
|
};
|
|
|
|
return ToastContainer;
|
|
}(_react.Component);
|
|
|
|
ToastContainer.propTypes = {
|
|
/**
|
|
* Set toast position
|
|
*/
|
|
position: _propTypes.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: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Pause toast duration on hover
|
|
*/
|
|
pauseOnHover: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Dismiss toast on click
|
|
*/
|
|
closeOnClick: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Newest on top
|
|
*/
|
|
newestOnTop: _propTypes.default.bool,
|
|
|
|
/**
|
|
* An optional className
|
|
*/
|
|
className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
|
|
/**
|
|
* An optional style
|
|
*/
|
|
style: _propTypes.default.object,
|
|
|
|
/**
|
|
* An optional className for the toast
|
|
*/
|
|
toastClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
|
|
/**
|
|
* An optional className for the toast body
|
|
*/
|
|
bodyClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
|
|
/**
|
|
* An optional className for the toast progress bar
|
|
*/
|
|
progressClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.object]),
|
|
|
|
/**
|
|
* An optional style for the toast progress bar
|
|
*/
|
|
progressStyle: _propTypes.default.object,
|
|
|
|
/**
|
|
* Define enter and exit transition using react-transition-group
|
|
*/
|
|
transition: _propTypes.default.func,
|
|
|
|
/**
|
|
* Support rtl display
|
|
*/
|
|
rtl: _propTypes.default.bool,
|
|
|
|
/**
|
|
* Allow toast to be draggable
|
|
*/
|
|
draggable: _propTypes.default.bool,
|
|
|
|
/**
|
|
* The percentage of the toast's width it takes for a drag to dismiss a toast
|
|
*/
|
|
draggablePercent: _propTypes.default.number,
|
|
|
|
/**
|
|
* Pause the toast on focus loss
|
|
*/
|
|
pauseOnFocusLoss: _propTypes.default.bool
|
|
};
|
|
ToastContainer.defaultProps = {
|
|
position: constant.POSITION.TOP_RIGHT,
|
|
transition: Transitions.Bounce,
|
|
rtl: false,
|
|
autoClose: 5000,
|
|
hideProgressBar: false,
|
|
closeButton: _react.default.createElement(_CloseButton.default, null),
|
|
pauseOnHover: true,
|
|
pauseOnFocusLoss: true,
|
|
closeOnClick: true,
|
|
newestOnTop: false,
|
|
draggable: true,
|
|
draggablePercent: 80,
|
|
className: null,
|
|
style: null,
|
|
toastClassName: null,
|
|
bodyClassName: null,
|
|
progressClassName: null,
|
|
progressStyle: null
|
|
};
|
|
var _default = ToastContainer;
|
|
exports.default = _default;
|
|
});
|
|
|
|
unwrapExports(ToastContainer_1);
|
|
|
|
var toast_1 = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
exports.default = void 0;
|
|
|
|
var _eventManager = _interopRequireDefault(eventManager_1);
|
|
|
|
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
|
|
function _extends() { _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; }; return _extends.apply(this, arguments); }
|
|
|
|
var container = null;
|
|
var queue = [];
|
|
|
|
var noop = function noop() {
|
|
return false;
|
|
};
|
|
/**
|
|
* Merge provided options with the defaults settings and generate the toastId
|
|
*/
|
|
|
|
|
|
function mergeOptions(options, type) {
|
|
return _extends({}, options, {
|
|
type: type,
|
|
toastId: getToastId(options)
|
|
});
|
|
}
|
|
/**
|
|
* Generate a random toastId
|
|
*/
|
|
|
|
|
|
function generateToastId() {
|
|
return (Math.random().toString(36) + Date.now().toString(36)).substr(2, 10);
|
|
}
|
|
/**
|
|
* Generate the toastId either automatically or by provided toastId
|
|
*/
|
|
|
|
|
|
function getToastId(options) {
|
|
if (options && (typeof options.toastId === 'string' || typeof options.toastId === 'number' && !isNaN(options.toastId))) {
|
|
return options.toastId;
|
|
}
|
|
|
|
return generateToastId();
|
|
}
|
|
/**
|
|
* Dispatch toast. If the container is not mounted, the toast is enqueued
|
|
*/
|
|
|
|
|
|
function emitEvent(content, options) {
|
|
if (container !== null) {
|
|
_eventManager.default.emit(constant.ACTION.SHOW, content, options);
|
|
} else {
|
|
queue.push({
|
|
action: constant.ACTION.SHOW,
|
|
content: content,
|
|
options: options
|
|
});
|
|
}
|
|
|
|
return options.toastId;
|
|
}
|
|
|
|
var toast = _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(id) {
|
|
if (id === void 0) {
|
|
id = null;
|
|
}
|
|
|
|
return container && _eventManager.default.emit(constant.ACTION.CLEAR, id);
|
|
},
|
|
isActive: noop,
|
|
update: function update(toastId, options) {
|
|
setTimeout(function () {
|
|
if (container && typeof container.collection[toastId] !== 'undefined') {
|
|
var _container$collection = container.collection[toastId],
|
|
oldOptions = _container$collection.options,
|
|
oldContent = _container$collection.content;
|
|
|
|
var nextOptions = _extends({}, oldOptions, options, {
|
|
toastId: options.toastId || toastId
|
|
});
|
|
|
|
if (!options.toastId || options.toastId === toastId) {
|
|
nextOptions.updateId = generateToastId();
|
|
} else {
|
|
nextOptions.staleToastId = toastId;
|
|
}
|
|
|
|
var content = typeof nextOptions.render !== 'undefined' ? nextOptions.render : oldContent;
|
|
delete nextOptions.render;
|
|
emitEvent(content, nextOptions);
|
|
}
|
|
}, 0);
|
|
},
|
|
done: function done(id, progress) {
|
|
if (progress === void 0) {
|
|
progress = 1;
|
|
}
|
|
|
|
toast.update(id, {
|
|
progress: progress,
|
|
isProgressDone: true
|
|
});
|
|
},
|
|
onChange: function onChange(callback) {
|
|
if (typeof callback === 'function') {
|
|
_eventManager.default.on(constant.ACTION.ON_CHANGE, callback);
|
|
}
|
|
},
|
|
POSITION: constant.POSITION,
|
|
TYPE: constant.TYPE
|
|
});
|
|
/**
|
|
* Wait until the ToastContainer is mounted to dispatch the toast
|
|
* and attach isActive method
|
|
*/
|
|
|
|
|
|
_eventManager.default.on(constant.ACTION.DID_MOUNT, function (containerInstance) {
|
|
container = containerInstance;
|
|
|
|
toast.isActive = function (id) {
|
|
return container.isToastActive(id);
|
|
};
|
|
|
|
queue.forEach(function (item) {
|
|
_eventManager.default.emit(item.action, item.content, item.options);
|
|
});
|
|
queue = [];
|
|
}).on(constant.ACTION.WILL_UNMOUNT, function () {
|
|
container = null;
|
|
toast.isActive = noop;
|
|
});
|
|
|
|
var _default = toast;
|
|
exports.default = _default;
|
|
});
|
|
|
|
unwrapExports(toast_1);
|
|
|
|
var lib = createCommonjsModule(function (module, exports) {
|
|
|
|
exports.__esModule = true;
|
|
|
|
var _ToastContainer = _interopRequireDefault(ToastContainer_1);
|
|
|
|
exports.ToastContainer = _ToastContainer.default;
|
|
|
|
|
|
|
|
exports.Bounce = Transitions.Bounce;
|
|
exports.Slide = Transitions.Slide;
|
|
exports.Zoom = Transitions.Zoom;
|
|
exports.Flip = Transitions.Flip;
|
|
|
|
|
|
|
|
exports.ToastPosition = constant.POSITION;
|
|
exports.ToastType = constant.TYPE;
|
|
|
|
var _toast = _interopRequireDefault(toast_1);
|
|
|
|
exports.toast = _toast.default;
|
|
|
|
var _cssTransition = _interopRequireDefault(cssTransition);
|
|
|
|
exports.cssTransition = _cssTransition.default;
|
|
|
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
});
|
|
|
|
unwrapExports(lib);
|
|
var lib_1 = lib.ToastContainer;
|
|
var lib_2 = lib.Bounce;
|
|
var lib_3 = lib.Slide;
|
|
var lib_4 = lib.Zoom;
|
|
var lib_5 = lib.Flip;
|
|
var lib_6 = lib.ToastPosition;
|
|
var lib_7 = lib.ToastType;
|
|
var lib_8 = lib.toast;
|
|
var lib_9 = lib.cssTransition;
|
|
|
|
var Form = function (_Component) {
|
|
inherits(Form, _Component);
|
|
|
|
function Form(props) {
|
|
classCallCheck(this, Form);
|
|
|
|
var _this = possibleConstructorReturn(this, (Form.__proto__ || Object.getPrototypeOf(Form)).call(this, props));
|
|
|
|
_this._onSubmit = function (e) {
|
|
e.preventDefault();
|
|
_this.props.onSubmit();
|
|
_this.displayError = true;
|
|
return false;
|
|
};
|
|
|
|
_this.state = {
|
|
data: props.data
|
|
};
|
|
|
|
_this.displayError = true;
|
|
_this.handleError(props);
|
|
return _this;
|
|
}
|
|
|
|
createClass(Form, [{
|
|
key: 'componentWillReceiveProps',
|
|
value: function componentWillReceiveProps(props) {
|
|
this.handleError(props);
|
|
this.setState({
|
|
data: props.data
|
|
});
|
|
}
|
|
}, {
|
|
key: 'handleError',
|
|
value: function handleError(props) {
|
|
if (props.data && props.data.error && props.toast && this.displayError == true) {
|
|
lib_8.error(props.data.error);
|
|
this.displayError = false;
|
|
}
|
|
}
|
|
}, {
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(
|
|
FormContext.Provider,
|
|
{ value: this.state.data },
|
|
React.createElement(
|
|
'form',
|
|
{ onSubmit: this._onSubmit },
|
|
this.renderError(),
|
|
this.props.children
|
|
),
|
|
React.createElement(lib_1, null)
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderError',
|
|
value: function renderError() {
|
|
if (this.state.data && this.state.data.error && !this.props.toast) {
|
|
return React.createElement(
|
|
'p',
|
|
{ className: 'alert alert-danger' },
|
|
this.state.data.error
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|
|
}]);
|
|
return Form;
|
|
}(Component);
|
|
|
|
|
|
Form.defaultProps = {
|
|
data: null,
|
|
toast: false,
|
|
onSubmit: function onSubmit() {
|
|
console.log('[Form] submitted');
|
|
}
|
|
};
|
|
|
|
var Input = function (_Component) {
|
|
inherits(Input, _Component);
|
|
|
|
function Input() {
|
|
classCallCheck(this, Input);
|
|
return possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Input, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
FormConsumer,
|
|
null,
|
|
function (data) {
|
|
return _this2.renderInput(data);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderInput",
|
|
value: function renderInput(data) {
|
|
var _this3 = this;
|
|
|
|
var props = _extends({}, this.props);
|
|
if (props.children) delete props.children;
|
|
if (props.onChangeValue) delete props.onChangeValue;
|
|
return React.createElement(
|
|
"div",
|
|
{ className: "form-group" },
|
|
this.renderLabel(data),
|
|
React.createElement("input", _extends({ onChange: function onChange(e) {
|
|
return _this3.props.onChangeValue(e.target.value);
|
|
} }, props)),
|
|
React.createElement(FormItemError, { name: this.props.name, data: data })
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel(data) {
|
|
if (this.props.label) {
|
|
return React.createElement(
|
|
"label",
|
|
{ htmlFor: this.props.id },
|
|
this.props.label
|
|
);
|
|
}
|
|
}
|
|
}]);
|
|
return Input;
|
|
}(Component);
|
|
|
|
|
|
Input.defaultProps = {
|
|
name: 'input',
|
|
id: 'input',
|
|
className: 'form-control',
|
|
type: 'text',
|
|
onChangeValue: function onChangeValue(text) {}
|
|
};
|
|
|
|
var OptionGroupContext = React.createContext({});
|
|
|
|
var OptionGroupConsumer = function (_Component) {
|
|
inherits(OptionGroupConsumer, _Component);
|
|
|
|
function OptionGroupConsumer() {
|
|
classCallCheck(this, OptionGroupConsumer);
|
|
return possibleConstructorReturn(this, (OptionGroupConsumer.__proto__ || Object.getPrototypeOf(OptionGroupConsumer)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(OptionGroupConsumer, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
OptionGroupContext.Consumer,
|
|
null,
|
|
function (props) {
|
|
return _this2.props.children(props);
|
|
}
|
|
);
|
|
}
|
|
}]);
|
|
return OptionGroupConsumer;
|
|
}(Component);
|
|
|
|
var OptionGroup = function (_Component2) {
|
|
inherits(OptionGroup, _Component2);
|
|
|
|
function OptionGroup() {
|
|
var _ref;
|
|
|
|
var _temp, _this3, _ret;
|
|
|
|
classCallCheck(this, OptionGroup);
|
|
|
|
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
|
|
args[_key] = arguments[_key];
|
|
}
|
|
|
|
return _ret = (_temp = (_this3 = possibleConstructorReturn(this, (_ref = OptionGroup.__proto__ || Object.getPrototypeOf(OptionGroup)).call.apply(_ref, [this].concat(args))), _this3), _this3._onChange = function (e) {
|
|
if (_this3.props.multiple) {
|
|
var value = [];
|
|
var options = e.target.options;
|
|
for (var i = 0, l = options.length; i < l; i++) {
|
|
if (options[i].selected) {
|
|
value.push(options[i].value);
|
|
}
|
|
}
|
|
_this3.props.onChangeValue(value);
|
|
} else {
|
|
_this3.props.onChangeValue(e.target.value);
|
|
}
|
|
}, _temp), possibleConstructorReturn(_this3, _ret);
|
|
}
|
|
|
|
createClass(OptionGroup, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
return React.createElement(
|
|
FormConsumer,
|
|
null,
|
|
function (data) {
|
|
return _this4.renderOptionGroup(data);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderOptionGroup',
|
|
value: function renderOptionGroup(data) {
|
|
var _this5 = this;
|
|
|
|
var props = _extends({}, this.props);
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'form-group' },
|
|
this.renderLabel(),
|
|
React.createElement(
|
|
'select',
|
|
_extends({}, this.props.data, props, { onChange: function onChange(e) {
|
|
return _this5._onChange(e);
|
|
} }),
|
|
this.renderChildren()
|
|
),
|
|
React.createElement(FormItemError, { name: this.props.name, data: data })
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderLabel',
|
|
value: function renderLabel() {
|
|
if (!this.props.label) return null;
|
|
|
|
return React.createElement(
|
|
'label',
|
|
{ htmlFor: this.props.id },
|
|
this.props.label
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderChildren',
|
|
value: function renderChildren() {
|
|
return React.createElement(
|
|
OptionGroupContext.Provider,
|
|
{ value: {} },
|
|
this.props.children
|
|
);
|
|
}
|
|
}]);
|
|
return OptionGroup;
|
|
}(Component);
|
|
|
|
|
|
OptionGroup.defaultProps = {
|
|
name: 'select',
|
|
className: 'form-control',
|
|
onChangeValue: function onChangeValue(value) {}
|
|
};
|
|
|
|
var Option = function (_Component) {
|
|
inherits(Option, _Component);
|
|
|
|
function Option() {
|
|
classCallCheck(this, Option);
|
|
return possibleConstructorReturn(this, (Option.__proto__ || Object.getPrototypeOf(Option)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Option, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
OptionGroupConsumer,
|
|
null,
|
|
function (data) {
|
|
return _this2.renderOption(data);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderOption',
|
|
value: function renderOption(data) {
|
|
var props = _extends({}, this.props);
|
|
|
|
return React.createElement(
|
|
'option',
|
|
props,
|
|
this.props.children
|
|
);
|
|
}
|
|
}]);
|
|
return Option;
|
|
}(Component);
|
|
|
|
|
|
Option.defaultProps = {
|
|
value: 'option'
|
|
};
|
|
|
|
var RadioGroupContext = React.createContext({});
|
|
|
|
var RadioGroupConsumer = function (_Component) {
|
|
inherits(RadioGroupConsumer, _Component);
|
|
|
|
function RadioGroupConsumer() {
|
|
classCallCheck(this, RadioGroupConsumer);
|
|
return possibleConstructorReturn(this, (RadioGroupConsumer.__proto__ || Object.getPrototypeOf(RadioGroupConsumer)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(RadioGroupConsumer, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
RadioGroupContext.Consumer,
|
|
null,
|
|
function (props) {
|
|
return _this2.props.children(props);
|
|
}
|
|
);
|
|
}
|
|
}]);
|
|
return RadioGroupConsumer;
|
|
}(Component);
|
|
|
|
var RadioGroup = function (_Component2) {
|
|
inherits(RadioGroup, _Component2);
|
|
|
|
function RadioGroup() {
|
|
classCallCheck(this, RadioGroup);
|
|
return possibleConstructorReturn(this, (RadioGroup.__proto__ || Object.getPrototypeOf(RadioGroup)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(RadioGroup, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this4 = this;
|
|
|
|
return React.createElement(
|
|
FormConsumer,
|
|
null,
|
|
function (data) {
|
|
return _this4.renderRadioGroup(data);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderRadioGroup',
|
|
value: function renderRadioGroup(data) {
|
|
return React.createElement(
|
|
'div',
|
|
{ className: 'form-options mb-3' },
|
|
this.renderLabel(),
|
|
this.renderChildren(),
|
|
React.createElement(FormItemError, { name: this.props.name, data: data })
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderLabel',
|
|
value: function renderLabel() {
|
|
if (!this.props.label) return null;
|
|
|
|
return React.createElement(
|
|
'p',
|
|
{ className: 'mb-0 mt-2' },
|
|
this.props.label
|
|
);
|
|
}
|
|
}, {
|
|
key: 'renderChildren',
|
|
value: function renderChildren() {
|
|
var _this5 = this;
|
|
|
|
return React.createElement(
|
|
RadioGroupContext.Provider,
|
|
{ value: {
|
|
onChangeValue: function onChangeValue(value) {
|
|
return _this5.props.onChangeValue(value);
|
|
},
|
|
value: this.props.value
|
|
} },
|
|
this.props.children
|
|
);
|
|
}
|
|
}]);
|
|
return RadioGroup;
|
|
}(Component);
|
|
|
|
|
|
RadioGroup.defaultProps = {
|
|
name: 'radio',
|
|
onChangeValue: function onChangeValue(value) {}
|
|
};
|
|
|
|
var Radio = function (_Component) {
|
|
inherits(Radio, _Component);
|
|
|
|
function Radio() {
|
|
classCallCheck(this, Radio);
|
|
return possibleConstructorReturn(this, (Radio.__proto__ || Object.getPrototypeOf(Radio)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Radio, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
RadioGroupConsumer,
|
|
null,
|
|
function (data) {
|
|
return _this2.renderRadio(data);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderRadio",
|
|
value: function renderRadio(data) {
|
|
var _this3 = this;
|
|
|
|
var props = _extends({}, this.props);
|
|
if (props.children) delete props.children;
|
|
|
|
return React.createElement(
|
|
"div",
|
|
{ className: "form-check" },
|
|
React.createElement("input", _extends({
|
|
type: "radio",
|
|
checked: data.value === this.props.value,
|
|
onChange: function onChange(e) {
|
|
if (e.target.checked) data.onChangeValue(_this3.props.value);
|
|
}
|
|
}, props)),
|
|
this.renderLabel(data)
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel(data) {
|
|
if (this.props.children.length) {
|
|
return React.createElement(
|
|
"label",
|
|
{ className: "form-check-label", htmlFor: this.props.id },
|
|
this.props.children
|
|
);
|
|
}
|
|
}
|
|
}]);
|
|
return Radio;
|
|
}(Component);
|
|
|
|
|
|
Radio.defaultProps = {
|
|
value: 'option',
|
|
className: 'form-check-input'
|
|
};
|
|
|
|
var Submit = function (_Component) {
|
|
inherits(Submit, _Component);
|
|
|
|
function Submit() {
|
|
classCallCheck(this, Submit);
|
|
return possibleConstructorReturn(this, (Submit.__proto__ || Object.getPrototypeOf(Submit)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(Submit, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
return React.createElement(
|
|
'button',
|
|
_extends({ type: 'submit' }, this.props),
|
|
this.props.children
|
|
);
|
|
}
|
|
}]);
|
|
return Submit;
|
|
}(Component);
|
|
|
|
|
|
Submit.defaultProps = {
|
|
className: 'btn btn-primary'
|
|
};
|
|
|
|
var TextArea = function (_Component) {
|
|
inherits(TextArea, _Component);
|
|
|
|
function TextArea() {
|
|
classCallCheck(this, TextArea);
|
|
return possibleConstructorReturn(this, (TextArea.__proto__ || Object.getPrototypeOf(TextArea)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(TextArea, [{
|
|
key: "render",
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
FormConsumer,
|
|
null,
|
|
function (data) {
|
|
return _this2.renderTextArea(data);
|
|
}
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderTextArea",
|
|
value: function renderTextArea(data) {
|
|
var _this3 = this;
|
|
|
|
var props = _extends({}, this.props);
|
|
if (props.onChangeValue) delete props.onChangeValue;
|
|
return React.createElement(
|
|
"div",
|
|
{ className: "form-group" },
|
|
this.renderLabel(data),
|
|
React.createElement("textarea", _extends({ onChange: function onChange(e) {
|
|
return _this3.props.onChangeValue(e.target.value);
|
|
} }, props)),
|
|
React.createElement(FormItemError, { name: this.props.name, data: data })
|
|
);
|
|
}
|
|
}, {
|
|
key: "renderLabel",
|
|
value: function renderLabel(data) {
|
|
if (this.props.label) {
|
|
return React.createElement(
|
|
"label",
|
|
{ htmlFor: this.props.id },
|
|
this.props.label
|
|
);
|
|
}
|
|
}
|
|
}]);
|
|
return TextArea;
|
|
}(Component);
|
|
|
|
|
|
TextArea.defaultProps = {
|
|
name: 'textarea',
|
|
id: 'textarea',
|
|
className: 'form-control',
|
|
onChangeValue: function onChangeValue(text) {}
|
|
};
|
|
|
|
var FormTranslationContext = React.createContext({
|
|
renderText: function renderText(text) {
|
|
return text;
|
|
}
|
|
});
|
|
|
|
var FormTranslationConsumer$1 = function (_Component) {
|
|
inherits(FormTranslationConsumer, _Component);
|
|
|
|
function FormTranslationConsumer() {
|
|
classCallCheck(this, FormTranslationConsumer);
|
|
return possibleConstructorReturn(this, (FormTranslationConsumer.__proto__ || Object.getPrototypeOf(FormTranslationConsumer)).apply(this, arguments));
|
|
}
|
|
|
|
createClass(FormTranslationConsumer, [{
|
|
key: 'render',
|
|
value: function render() {
|
|
var _this2 = this;
|
|
|
|
return React.createElement(
|
|
FormTranslationContext.Consumer,
|
|
null,
|
|
function (props) {
|
|
return _this2.props.children(props);
|
|
}
|
|
);
|
|
}
|
|
}]);
|
|
return FormTranslationConsumer;
|
|
}(Component);
|
|
|
|
export { CheckBox, Form, Input, Option, OptionGroup, RadioGroup, Radio, Submit, TextArea, FormTranslationContext };
|
|
//# sourceMappingURL=index.es.js.map
|