zent/es/utils/component/AnimateHeight.js

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

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import { runInNextFrame } from '../nextFrame';
function applyHeight(el, height) {
    if (typeof height === 'number') {
        el.style.height = height + "px";
    }
    else {
        el.style.height = height;
    }
}
var AnimateHeight = (function (_super) {
    __extends(AnimateHeight, _super);
    function AnimateHeight() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.ref = createRef();
        _this.timer = null;
        return _this;
    }
    AnimateHeight.prototype.componentDidMount = function () {
        var _this = this;
        var _a = this.props, appear = _a.appear, height = _a.height, duration = _a.duration;
        var el = this.ref.current;
        if (appear && height === 'auto') {
            var prevHeight_1 = el.offsetHeight;
            el.style.height = '0px';
            runInNextFrame(function () {
                if (_this.props.height === height) {
                    el.style.height = prevHeight_1 + "px";
                    _this.timer = setTimeout(function () {
                        _this.timer = null;
                        if (_this.props.height === height) {
                            el.style.height = 'auto';
                        }
                    }, duration);
                }
            });
        }
        else {
            applyHeight(el, height);
        }
    };
    AnimateHeight.prototype.componentDidUpdate = function (prevProps) {
        var _this = this;
        var _a = this.props, height = _a.height, duration = _a.duration;
        if (prevProps.height === height) {
            return;
        }
        if (this.timer !== null) {
            clearTimeout(this.timer);
            this.timer = null;
        }
        var el = this.ref.current;
        if (prevProps.height === 'auto') {
            el.style.height = el.offsetHeight + "px";
            runInNextFrame(function () {
                if (_this.props.height === height) {
                    applyHeight(el, height);
                }
            });
        }
        else if (height === 'auto') {
            var prevHeight = el.offsetHeight;
            el.style.height = 'auto';
            var newHeight_1 = el.offsetHeight;
            el.style.height = prevHeight + "px";
            runInNextFrame(function () {
                el.style.height = newHeight_1 + "px";
                _this.timer = setTimeout(function () {
                    _this.timer = null;
                    if (_this.props.height === height) {
                        el.style.height = height;
                    }
                }, duration);
            });
        }
        else {
            applyHeight(el, height);
        }
    };
    AnimateHeight.prototype.render = function () {
        var _a = this.props, duration = _a.duration, className = _a.className, style = _a.style, easing = _a.easing, overflow = _a.overflow, children = _a.children, transitionPrototype = _a.transitionPrototype;
        return (_jsx("div", __assign({ ref: this.ref, className: className, style: __assign(__assign({}, style), { transition: transitionPrototype + " " + duration + "ms " + easing, overflow: overflow }), "data-zv": '10.0.17' }, { children: children }), void 0));
    };
    AnimateHeight.defaultProps = {
        appear: false,
        duration: 200,
        easing: 'ease',
        overflow: 'hidden',
        transitionPrototype: 'height',
    };
    return AnimateHeight;
}(Component));
export { AnimateHeight };