@douyinfe/semi-ui
Version:
A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.
299 lines (298 loc) • 10.4 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.ToastFactory = void 0;
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _toastListFoundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/toast/toastListFoundation"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/toast/constants");
var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
var _toast = _interopRequireDefault(require("./toast"));
require("@douyinfe/semi-foundation/lib/cjs/toast/toast.css");
var _uuid = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/uuid"));
var _useToast = _interopRequireDefault(require("./useToast"));
var _cssAnimation = _interopRequireDefault(require("../_cssAnimation"));
var _classnames = _interopRequireDefault(require("classnames"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const createBaseToast = () => {
var _a;
return _a = class ToastList extends _baseComponent.default {
constructor(props) {
super(props);
this.stack = false;
this.innerWrapperRef = /*#__PURE__*/_react.default.createRef();
this.handleMouseEnter = e => {
if (this.stack) {
this.foundation.handleMouseInSideChange(true);
}
};
this.handleMouseLeave = e => {
var _a;
if (this.stack) {
const height = (_a = this.foundation.getInputWrapperRect()) === null || _a === void 0 ? void 0 : _a.height;
if (height) {
this.foundation.handleMouseInSideChange(false);
}
}
};
this.state = {
list: [],
removedItems: [],
updatedItems: [],
mouseInSide: false
};
this.foundation = new _toastListFoundation.default(this.adapter);
}
get adapter() {
return Object.assign(Object.assign({}, super.adapter), {
updateToast: (list, removedItems, updatedItems) => {
this.setState({
list,
removedItems,
updatedItems
});
},
handleMouseInSideChange: mouseInSide => {
this.setState({
mouseInSide
});
},
getInputWrapperRect: () => {
var _a;
return (_a = this.innerWrapperRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
}
});
}
static create(opts) {
var _a;
const id = (_a = opts.id) !== null && _a !== void 0 ? _a : (0, _uuid.default)('toast');
// this.id = id;
if (!ToastList.ref) {
const div = document.createElement('div');
if (!this.wrapperId) {
this.wrapperId = (0, _uuid.default)('toast-wrapper').slice(0, 26);
}
div.className = _constants.cssClasses.WRAPPER;
div.id = this.wrapperId;
div.style.zIndex = String(typeof opts.zIndex === 'number' ? opts.zIndex : ToastList.defaultOpts.zIndex);
['top', 'left', 'bottom', 'right'].map(pos => {
if (pos in ToastList.defaultOpts || pos in opts) {
const val = opts[pos] ? opts[pos] : ToastList.defaultOpts[pos];
div.style[pos] = typeof val === 'number' ? `${val}px` : val;
}
});
// document.body.appendChild(div);
if (ToastList.defaultOpts.getPopupContainer) {
const container = ToastList.defaultOpts.getPopupContainer();
container.appendChild(div);
} else {
document.body.appendChild(div);
}
_reactDom.default.render(/*#__PURE__*/_react.default.createElement(ToastList, {
ref: instance => ToastList.ref = instance
}), div, () => {
ToastList.ref.add(Object.assign(Object.assign({}, opts), {
id
}));
ToastList.ref.stack = Boolean(opts.stack);
});
} else {
const node = document.querySelector(`#${this.wrapperId}`);
['top', 'left', 'bottom', 'right'].map(pos => {
if (pos in opts) {
node.style[pos] = typeof opts[pos] === 'number' ? `${opts[pos]}px` : opts[pos];
}
});
if (Boolean(opts.stack) !== ToastList.ref.stack) {
ToastList.ref.stack = Boolean(opts.stack);
}
if (ToastList.ref.has(id)) {
ToastList.ref.update(id, Object.assign(Object.assign({}, opts), {
id
}));
} else {
ToastList.ref.add(Object.assign(Object.assign({}, opts), {
id
}));
}
}
return id;
}
static close(id) {
if (ToastList.ref) {
ToastList.ref.remove(id);
}
}
static destroyAll() {
if (ToastList.ref) {
ToastList.ref.destroyAll();
const wrapper = document.querySelector(`#${this.wrapperId}`);
_reactDom.default.unmountComponentAtNode(wrapper);
wrapper && wrapper.parentNode.removeChild(wrapper);
ToastList.ref = null;
this.wrapperId = null;
}
}
static getWrapperId() {
return this.wrapperId;
}
static info(opts) {
if (typeof opts === 'string') {
opts = {
content: opts
};
}
return this.create(Object.assign(Object.assign(Object.assign({}, ToastList.defaultOpts), opts), {
type: 'info'
}));
}
static warning(opts) {
if (typeof opts === 'string') {
opts = {
content: opts
};
}
return this.create(Object.assign(Object.assign(Object.assign({}, ToastList.defaultOpts), opts), {
type: 'warning'
}));
}
static error(opts) {
if (typeof opts === 'string') {
opts = {
content: opts
};
}
return this.create(Object.assign(Object.assign(Object.assign({}, ToastList.defaultOpts), opts), {
type: 'error'
}));
}
static success(opts) {
if (typeof opts === 'string') {
opts = {
content: opts
};
}
return this.create(Object.assign(Object.assign(Object.assign({}, ToastList.defaultOpts), opts), {
type: 'success'
}));
}
static config(opts) {
['top', 'left', 'bottom', 'right'].forEach(pos => {
if (pos in opts) {
ToastList.defaultOpts[pos] = opts[pos];
}
});
if (typeof opts.theme === 'string' && _constants.strings.themes.includes(opts.theme)) {
ToastList.defaultOpts.theme = opts.theme;
}
if (typeof opts.zIndex === 'number') {
ToastList.defaultOpts.zIndex = opts.zIndex;
}
if (typeof opts.duration === 'number') {
ToastList.defaultOpts.duration = opts.duration;
}
if (typeof opts.getPopupContainer === 'function') {
ToastList.defaultOpts.getPopupContainer = opts.getPopupContainer;
}
}
has(id) {
return this.foundation.hasToast(id);
}
add(opts) {
return this.foundation.addToast(opts);
}
update(id, opts) {
return this.foundation.updateToast(id, opts);
}
remove(id) {
return this.foundation.removeToast(id);
}
destroyAll() {
return this.foundation.destroyAll();
}
render() {
let {
list
} = this.state;
const {
removedItems,
updatedItems
} = this.state;
list = Array.from(new Set([...list, ...removedItems]));
const updatedIds = updatedItems.map(_ref => {
let {
id
} = _ref;
return id;
});
const refFn = toast => {
var _a;
if (((_a = toast === null || toast === void 0 ? void 0 : toast.foundation) === null || _a === void 0 ? void 0 : _a._id) && updatedIds.includes(toast.foundation._id)) {
toast.foundation.restartCloseTimer();
}
};
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: (0, _classnames.default)({
[`${_constants.cssClasses.PREFIX}-innerWrapper`]: true,
[`${_constants.cssClasses.PREFIX}-innerWrapper-hover`]: this.state.mouseInSide
}),
ref: this.innerWrapperRef,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
}, list.map((item, index) => {
const isRemoved = removedItems.find(removedItem => removedItem.id === item.id) !== undefined;
return /*#__PURE__*/_react.default.createElement(_cssAnimation.default, {
key: item.id,
motion: item.motion,
animationState: isRemoved ? "leave" : "enter",
startClassName: isRemoved ? `${_constants.cssClasses.PREFIX}-animation-hide` : `${_constants.cssClasses.PREFIX}-animation-show`
}, _ref2 => {
let {
animationClassName,
animationEventsNeedBind,
isAnimating
} = _ref2;
return isRemoved && !isAnimating ? null : /*#__PURE__*/_react.default.createElement(_toast.default, Object.assign({}, item, {
stack: this.stack,
stackExpanded: this.state.mouseInSide,
positionInList: {
length: list.length,
index
},
className: (0, _classnames.default)({
[item.className]: Boolean(item.className),
[animationClassName]: true
})
}, animationEventsNeedBind, {
style: Object.assign({}, item.style),
close: id => this.remove(id),
ref: refFn
}));
});
})));
}
}, _a.defaultOpts = {
motion: true,
zIndex: 1010,
content: ''
}, _a.propTypes = {
content: _propTypes.default.node,
duration: _propTypes.default.number,
onClose: _propTypes.default.func,
icon: _propTypes.default.node,
direction: _propTypes.default.oneOf(_constants.strings.directions),
stack: _propTypes.default.bool
}, _a.defaultProps = {}, _a;
};
class ToastFactory {
static create(config) {
const newToast = createBaseToast();
newToast.useToast = _useToast.default;
config && newToast.config(config);
return newToast;
}
}
exports.ToastFactory = ToastFactory;
var _default = exports.default = ToastFactory.create();