zent/es/notice/Wrap.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { createContext, createRef, Component } from 'react';
import { CSSTransition } from 'react-transition-group';
import { isElement } from 'react-is';
import { runInNextFrame } from '../utils/nextFrame';
import { instanceMap } from './Container';
export var NoticeContext = createContext(null);
NoticeContext.displayName = 'ZentNoticeContext';
var classNames = {
    appear: 'zent-notice-animation-enter',
    appearActive: 'zent-notice-animation-enter-active',
    appearDone: 'zent-notice-animation-enter-done',
    enter: 'zent-notice-animation-enter',
    enterActive: 'zent-notice-animation-enter-active',
    enterDone: 'zent-notice-animation-enter-done',
    exit: 'zent-notice-animation-exit',
    exitActive: 'zent-notice-animation-exit-active',
    exitDone: 'zent-notice-animation-exit-done',
};
var NoticeWrap = (function (_super) {
    __extends(NoticeWrap, _super);
    function NoticeWrap() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.elementRef = createRef();
        _this.state = {
            entered: false,
            show: false,
        };
        _this.timer = 0;
        _this.ctx = {
            onClose: function () {
                _this.leave();
            },
        };
        _this.onEntered = function () {
            _this.setState({
                entered: true,
            });
        };
        _this.onExited = function () {
            var el = _this.elementRef.current;
            el.style.height = el.clientHeight + "px";
            runInNextFrame(function () { return (el.style.height = '0'); });
            setTimeout(function () {
                var _a = _this.props, onExited = _a.onExited, id = _a.id;
                onExited(id);
            }, 200);
        };
        return _this;
    }
    NoticeWrap.prototype.leave = function () {
        if (this.timer) {
            clearTimeout(this.timer);
        }
        this.setState({
            show: false,
        });
    };
    NoticeWrap.prototype.componentDidMount = function () {
        var _this = this;
        this.setState({
            show: true,
        });
        var children = this.props.children;
        if (isElement(children) && children.props) {
            var _a = children.props, _b = _a.autoClose, autoClose = _b === void 0 ? true : _b, _c = _a.closable, closable = _c === void 0 ? true : _c, _d = _a.timeout, timeout = _d === void 0 ? 4500 : _d;
            if (closable && autoClose) {
                this.timer = setTimeout(function () { return _this.leave(); }, timeout);
            }
        }
    };
    NoticeWrap.prototype.componentWillUnmount = function () {
        var id = this.props.id;
        instanceMap.delete(id);
    };
    NoticeWrap.prototype.render = function () {
        var children = this.props.children;
        var _a = this.state, entered = _a.entered, show = _a.show;
        return (_jsx(NoticeContext.Provider, __assign({ value: this.ctx }, { children: _jsx(CSSTransition, __assign({ in: show, timeout: entered ? 160 : 100, onEntered: this.onEntered, onExited: this.onExited, classNames: classNames }, { children: _jsx("div", __assign({ ref: this.elementRef, className: "zent-notice-animation", "data-zv": '10.0.17' }, { children: children }), void 0) }), void 0) }), void 0));
    };
    return NoticeWrap;
}(Component));
export default NoticeWrap;