zent/es/alert/ScrollAlert.js

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

import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { createElement as _createElement } from "react";
import { Children, Component } from 'react';
import cx from 'classnames';
import AlertItem from './components/AlertItem';
import { AlertItem as AlertItemPub } from './AlertItem';
import kindOf from '../utils/kindOf';
import omit from '../utils/omit';
function cloneChildren(children) {
    var length = Children.count(children);
    var clonedChildren = new Array(length);
    Children.forEach(children, function (child, index) {
        clonedChildren[index] = child;
        if (index === 0) {
            clonedChildren[length] = child;
        }
    });
    return length > 1 ? clonedChildren : [children];
}
function getRenderChildrenFromProps(children) {
    var childArray = Children.toArray(children);
    var items = childArray.reduce(function (alertItemArray, child) {
        var type = child.type;
        if (kindOf(type, AlertItemPub)) {
            alertItemArray.push(child);
        }
        return alertItemArray;
    }, []);
    var renderItems = cloneChildren(items);
    return { items: items, preChildren: children, renderItems: renderItems };
}
var OmitDivAttr = ['loading', 'scrollInterval', 'onClose', 'closed'];
var DefaultState = {
    items: [],
    renderItems: [],
    preChildren: null,
    transitionDuration: 0,
    containerHeight: 0,
    activeIndex: 0,
};
var ScrollAlert = (function (_super) {
    __extends(ScrollAlert, _super);
    function ScrollAlert(props) {
        var _this = _super.call(this, props) || this;
        _this.firstChildHeight = 0;
        _this.scrollHandler = function () {
            var scrollInterval = _this.props.scrollInterval;
            _this.timeoutId = setTimeout(function () {
                var _a = _this.state, renderItems = _a.renderItems, activeIndex = _a.activeIndex;
                var length = renderItems.length;
                if (length <= 1)
                    return;
                var index = activeIndex + 1;
                _this.setState({
                    transitionDuration: 600,
                    activeIndex: index,
                });
                if (index === length - 1) {
                    setTimeout(_this.resetChildren, 600);
                }
                _this.scrollHandler();
            }, scrollInterval);
        };
        _this.stopScroll = function () {
            _this.clearTimer();
        };
        _this.continueScroll = function () {
            _this.scrollHandler();
        };
        _this.resetChildren = function () {
            _this.setState({
                transitionDuration: 0,
                activeIndex: 0,
            });
        };
        _this.clearTimer = function () {
            if (_this.timeoutId) {
                clearTimeout(_this.timeoutId);
                _this.timeoutId = null;
            }
        };
        _this.onCloseItemHandler = function (index) {
            var onClose = _this.props.onClose;
            var items = _this.state.items;
            if (index === items.length) {
                index = 0;
                _this.resetChildren();
            }
            var afterDeleteItems = items.filter(function (_, i) { return index !== i; });
            if (afterDeleteItems.length === 0) {
                onClose === null || onClose === void 0 ? void 0 : onClose();
            }
            else if (afterDeleteItems.length === 1 ||
                index === afterDeleteItems.length) {
                _this.resetChildren();
            }
            _this.setState({
                items: afterDeleteItems,
                renderItems: cloneChildren(afterDeleteItems),
            });
        };
        _this.onFirstChildRef = function (itemInstance) {
            _this.firstChildHeight = (itemInstance === null || itemInstance === void 0 ? void 0 : itemInstance.offsetHeight) || 0;
        };
        _this.state = __assign(__assign({}, DefaultState), getRenderChildrenFromProps(props.children));
        return _this;
    }
    ScrollAlert.prototype.componentDidMount = function () {
        this.setState({ containerHeight: this.firstChildHeight }, this.scrollHandler);
    };
    ScrollAlert.prototype.componentWillUnmount = function () {
        this.clearTimer();
    };
    Object.defineProperty(ScrollAlert.prototype, "renderItem", {
        get: function () {
            var _this = this;
            var _a = this.props, outline = _a.outline, children = _a.children, onClose = _a.onClose, className = _a.className, restItemProps = __rest(_a, ["outline", "children", "onClose", "className"]);
            var _b = this.state, renderItems = _b.renderItems, activeIndex = _b.activeIndex;
            var length = renderItems.length;
            return Children.map(renderItems, function (item, index) {
                var props = Object.assign({}, restItemProps, __assign({}, item.props));
                return (_createElement(AlertItem, __assign({ classItemName: cx({
                        'zent-alert-scroll-active-item': index === activeIndex,
                        'zent-alert-scroll-virtual-item': !index && activeIndex === length - 1,
                    }) }, props, { key: index, onAlertItemClose: function () { return _this.onCloseItemHandler(index); }, ref: !index ? _this.onFirstChildRef : undefined })));
            });
        },
        enumerable: false,
        configurable: true
    });
    ScrollAlert.prototype.render = function () {
        var _a;
        if (this.props.closed) {
            return null;
        }
        var _b = omit(this.props, OmitDivAttr), className = _b.className, outline = _b.outline, type = _b.type, bordered = _b.bordered, restDivAttrs = __rest(_b, ["className", "outline", "type", "bordered"]);
        var _c = this.state, transitionDuration = _c.transitionDuration, containerHeight = _c.containerHeight, activeIndex = _c.activeIndex;
        var renderItem = this.renderItem;
        var scrollCls = cx('zent-alert-scroll', "zent-alert-style-" + type, className, (_a = {},
            _a['zent-alert-scroll-outline'] = outline,
            _a['zent-alert-scroll--borderless'] = !bordered,
            _a));
        return renderItem.length > 0 ? (_jsx("div", __assign({ className: scrollCls }, restDivAttrs, { "data-zv": '10.0.17' }, { children: _jsx("div", __assign({ className: "zent-alert-scroll-container", style: {
                    height: containerHeight,
                    transform: "translateY(-" + containerHeight * activeIndex + "px)",
                    transitionDuration: transitionDuration + "ms",
                    transitionProperty: 'transform',
                }, onMouseEnter: this.stopScroll, onMouseLeave: this.continueScroll, "data-zv": '10.0.17' }, { children: renderItem }), void 0) }), void 0)) : null;
    };
    ScrollAlert.defaultProps = {
        type: 'info',
        loading: false,
        scrollInterval: 5000,
        bordered: false,
    };
    return ScrollAlert;
}(Component));
export { ScrollAlert };
export default ScrollAlert;