zent/es/timeline/Timeline.js

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

import { __assign, __extends, __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Children, cloneElement, PureComponent } from 'react';
import cx from 'classnames';
import { isElement } from 'react-is';
import { TimelineItem } from './Item';
import { TimelineLegend } from './Dot';
function normalize(timeline, size) {
    return timeline.map(function (item, index) {
        if (typeof item === 'string') {
            return {
                key: item,
                label: item,
            };
        }
        var id = item.id, percent = item.percent, others = __rest(item, ["id", "percent"]);
        return __assign({ key: id || index, size: percent && percent * size }, others);
    });
}
var Timeline = (function (_super) {
    __extends(Timeline, _super);
    function Timeline() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Timeline.prototype.renderChildren = function () {
        var _a = this.props, children = _a.children, timeline = _a.timeline, type = _a.type, size = _a.size;
        if (timeline && timeline.length) {
            return normalize(timeline, size).reduce(function (ret, item) {
                ret.push(_jsx(TimelineItem, __assign({}, item, { type: type }), void 0));
                return ret;
            }, []);
        }
        return Children.map(children, function (child) {
            if (!isElement(child)) {
                return null;
            }
            return cloneElement(child, {
                type: type,
            });
        });
    };
    Timeline.prototype.render = function () {
        var _a;
        var _b = this.props, size = _b.size, type = _b.type, className = _b.className;
        var key = type === 'horizontal' ? 'width' : 'height';
        var style = __assign(__assign({}, this.props.style), (_a = {}, _a[key] = size, _a));
        return (_jsx("ul", __assign({ className: cx('zent-timeline', "zent-timeline-" + type, {
                'zent-timeline-dynamic': Boolean(size),
            }, className), style: style, "data-zv": '10.0.18' }, { children: this.renderChildren() }), void 0));
    };
    Timeline.defaultProps = {
        type: 'horizontal',
        size: '100%',
        style: {},
    };
    Timeline.Item = TimelineItem;
    Timeline.Legend = TimelineLegend;
    return Timeline;
}(PureComponent));
export { Timeline };
export default Timeline;