/**
 * amis-ui v6.11.0-beta.7
 * Copyright 2018-2025 fex
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib = require('tslib');
var React = require('react');
var amisCore = require('amis-core');
var icons = require('./icons.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

var __react_jsx__ = require('react');
var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
(__react_jsx__["default"] || __react_jsx__).Fragment;
function TimelineItem(props) {
    var _a;
    var time = props.time, title = props.title, detail = props.detail, detailCollapsedText = props.detailCollapsedText, detailExpandedText = props.detailExpandedText, color = props.color, icon = props.icon, iconClassName = props.iconClassName, timeClassName = props.timeClassName, titleClassName = props.titleClassName, detailClassName = props.detailClassName, cx = props.classnames, __ = props.translate, classPrefix = props.classPrefix, key = props.key;
    var _b = tslib.__read(React.useState(false), 2), detailVisible = _b[0], setDetailVisible = _b[1];
    var renderDetail = function (detail, detailCollapsedText, detailExpandedText) {
        if (detailCollapsedText === void 0) { detailCollapsedText = __('Timeline.collapseText'); }
        if (detailExpandedText === void 0) { detailExpandedText = __('Timeline.expandText'); }
        return (_J$X_(React__default["default"].Fragment, null,
            _J$X_("div", { className: cx('TimelineItem-detail-button'), onClick: function () { return setDetailVisible(!detailVisible); } },
                detailVisible ? detailCollapsedText : detailExpandedText,
                _J$X_("div", { className: cx('TimelineItem-detail-arrow', "".concat(detailVisible && 'TimelineItem-detail-arrow-top')) },
                    _J$X_(icons.Icon, { icon: "down-arrow-bold" }))),
            _J$X_("div", { className: cx("".concat(detailVisible
                    ? 'TimelineItem-detail-visible'
                    : 'TimelineItem-detail-invisible'), detailClassName) }, detail)));
    };
    // 判断是否为颜色值
    var isColorVal = color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
    // 取level级颜色
    var levelColor = !isColorVal && color;
    return (_J$X_("div", { className: cx('TimelineItem'), key: key },
        _J$X_("div", { className: cx('TimelineItem-axle') },
            _J$X_("div", { className: cx('TimelineItem-line') }),
            icon ? (_J$X_("div", { className: cx('TimelineItem-icon', iconClassName) },
                _J$X_(icons.Icon, { cx: cx, icon: icon, className: "icon", classPrefix: classPrefix }))) : (_J$X_("div", { className: cx('TimelineItem-round', iconClassName, (_a = {},
                    _a["TimelineItem-round--".concat(levelColor)] = !!levelColor,
                    _a)), style: isColorVal ? { backgroundColor: color } : undefined }))),
        _J$X_("div", { className: cx('TimelineItem-content') },
            _J$X_("div", { className: cx('TimelineItem-time', timeClassName) }, time),
            _J$X_("div", { className: cx('TimelineItem-title', titleClassName) }, title),
            detail && (_J$X_("div", { className: cx('TimelineItem-detail') }, renderDetail(detail, detailCollapsedText, detailExpandedText))))));
}
var TimelineItem$1 = amisCore.themeable(amisCore.localeable(TimelineItem));

exports.TimelineItem = TimelineItem;
exports["default"] = TimelineItem$1;
