amis-ui 6.11.0 → 6.12.0-beta.0

package/lib/components/TimelineItem.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-beta.0
  * Copyright 2018-2025 fex
  */
 
@@ -19,39 +19,100 @@ 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)));
-    };
+/**
+ * 判断颜色值是否合法
+ * @param color 颜色值
+ * @returns {boolean} 是否合法
+ */
+var isColor = function (color) {
+    return !!color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
+};
+/**
+ * 根据连线方向返回对齐方式
+ * @param direction 连线方向，'vertical'表示垂直方向，'horizontal'表示水平方向
+ * @param align 对齐方式，可选值有'left'、'center'、'right'、'top'、'bottom'
+ * @returns 返回对齐方式，默认根据方向设置，若方向和对齐方式不匹配则根据方向调整对齐方式
+ */
+var getAlignByDirection = function (direction, align) {
+    // 检查当前对齐方式和连线方向是否相同，并设置默认对齐方式
+    var alignVal = align ? align : direction === 'vertical' ? 'top' : 'center';
+    // 这里可以使用css做兼容不用JS检查，但是JS处理可以更清楚
+    if ((['left', 'right'].includes(alignVal) && direction === 'vertical') ||
+        (['top', 'bottom'].includes(alignVal) && direction === 'horizontal')) {
+        alignVal = direction === 'vertical' ? 'top' : 'center';
+    }
+    return alignVal;
+};
+/**
+ * TimelineTime 函数组件，用于展示时间线中的时间节点。
+ * @param props 组件的属性
+ * @param props.time 时间文本
+ * @param props.timeClassName 时间节点的自定义类名
+ * @param props.classnames 类名辅助函数，用于动态生成类名字符串
+ * @returns 返回包含时间文本的 div 元素
+ */
+function TimelineTime(props) {
+    var time = props.time, timeClassName = props.timeClassName, cx = props.classnames;
+    return _J$X_("div", { className: cx('TimelineItem-time', timeClassName) }, time);
+}
+/**
+ * TimelineContent 函数组件，用于展示时间线中的内容节点，包括标题和详情。
+ * @param props 组件的属性
+ */
+function TimelineContent(props) {
+    var title = props.title, detail = props.detail, titleClassName = props.titleClassName, cx = props.classnames, detailClassName = props.detailClassName; props.translate; var cardNode = props.cardNode;
+    return cardNode ? (cardNode) : (_J$X_(React__default["default"].Fragment, null,
+        _J$X_("div", { className: cx('TimelineItem-title', titleClassName) }, title),
+        detail && (_J$X_("div", { className: cx('TimelineItem-detail') },
+            _J$X_("div", { className: cx('TimelineItem-detail-visible', detailClassName) }, detail)))));
+}
+/**
+ * TImelineLine 函数组件，用于展示时间线中的连线部分。
+ * @param props 组件的属性
+ */
+function TimelineLine(props) {
+    var _a, _b, _c;
+    var color = props.color, icon = props.icon, iconClassName = props.iconClassName, cx = props.classnames; props.translate; var classPrefix = props.classPrefix, _d = props.dotSize, dotSize = _d === void 0 ? 'md' : _d, lineColor = props.lineColor, backgroundColor = props.backgroundColor, align = props.align, direction = props.direction;
     // 判断是否为颜色值
-    var isColorVal = color && /^#([0-9a-fA-F]{6}|[0-9a-fA-F]{3})$/.test(color);
+    var isColorVal = isColor(color);
+    // 判断是否为背景颜色值
+    var isBgColorVal = isColor(backgroundColor);
     // 取level级颜色
     var levelColor = !isColorVal && color;
+    var alignVal = getAlignByDirection(direction, align);
+    return (_J$X_("div", { className: cx('TimelineItem-axle', "TimelineItem-size-".concat(dotSize), (_a = {
+                'TimelineItem-hide-dot': !!props.hideDot
+            },
+            _a["TimelineItem-point-align--".concat(alignVal)] = !!alignVal,
+            _a)) },
+        _J$X_("div", { className: cx('TimelineItem-line'), style: isColor(lineColor) ? { backgroundColor: lineColor } : undefined }),
+        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-wrapper', iconClassName) },
+            _J$X_("div", { style: isBgColorVal ? { backgroundColor: backgroundColor } : undefined, className: cx('TimelineItem-round', (_b = {},
+                    _b["TimelineItem-round-background--".concat(levelColor)] = !!levelColor,
+                    _b)) }),
+            _J$X_("div", { style: isColorVal ? { backgroundColor: color } : undefined, className: cx('TimelineItem-dot', (_c = {},
+                    _c["TimelineItem-round--".concat(levelColor)] = !!levelColor,
+                    _c)) })))));
+}
+// 纵向时间轴组件。横向时间轴由于需要统一上半部的高度，不能封装到TimelineItem中，所以分别暴露出去调用
+function TimelineItem(props) {
+    var cx = props.classnames, key = props.key;
     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_(TimelineLine, tslib.__assign({}, props)),
         _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))))));
+            _J$X_(TimelineTime, tslib.__assign({}, props)),
+            _J$X_(TimelineContent, tslib.__assign({}, props)))));
 }
 var TimelineItem$1 = amisCore.themeable(amisCore.localeable(TimelineItem));
+var TimelineTimeComponent = amisCore.themeable(amisCore.localeable(TimelineTime));
+var TimelineLineComponent = amisCore.themeable(amisCore.localeable(TimelineLine));
+var TimelineContentComponent = amisCore.themeable(amisCore.localeable(TimelineContent));
 
+exports.TimelineContentComponent = TimelineContentComponent;
 exports.TimelineItem = TimelineItem;
+exports.TimelineLineComponent = TimelineLineComponent;
+exports.TimelineTimeComponent = TimelineTimeComponent;
 exports["default"] = TimelineItem$1;
+exports.getAlignByDirection = getAlignByDirection;
+exports.isColor = isColor;

package/lib/components/Tinymce.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-beta.0
  * Copyright 2018-2025 fex
  */
 

package/lib/components/TitleBar.d.ts

@@ -29,8 +29,8 @@ export declare class TitleBar extends React.PureComponent<TitleBarProps, any> {
 }
 declare const _default: {
     new (props: Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-        title?: React.ReactNode;
         right?: boolean | undefined;
+        title?: React.ReactNode;
         titleClassName?: string | undefined;
     } & {
         className?: string | undefined;
@@ -41,16 +41,16 @@ declare const _default: {
         render(): React.JSX.Element;
         context: unknown;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOuterProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
         forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
@@ -61,8 +61,8 @@ declare const _default: {
         };
         componentDidMount?(): void;
         shouldComponentUpdate?(nextProps: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
@@ -70,15 +70,15 @@ declare const _default: {
         componentWillUnmount?(): void;
         componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
         getSnapshotBeforeUpdate?(prevProps: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
         componentDidUpdate?(prevProps: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
@@ -86,29 +86,29 @@ declare const _default: {
         componentWillMount?(): void;
         UNSAFE_componentWillMount?(): void;
         componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
         UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
         componentWillUpdate?(nextProps: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;
         } & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
         UNSAFE_componentWillUpdate?(nextProps: Readonly<Pick<Omit<TitleBarProps, keyof import("amis-core").ThemeProps>, never> & {
-            title?: React.ReactNode;
             right?: boolean | undefined;
+            title?: React.ReactNode;
             titleClassName?: string | undefined;
         } & {
             className?: string | undefined;

package/lib/components/TitleBar.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v6.11.0
+ * amis-ui v6.12.0-beta.0
  * Copyright 2018-2025 fex
  */