amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/Textarea.js

@@ -0,0 +1,147 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __extends, __awaiter, __generator, __assign, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { findDOMNode } from 'react-dom';
+import BaseTextArea from 'react-textarea-autosize';
+import { ucFirst, autobind, themeable, localeable } from 'amis-core';
+import { Icon } from './icons.js';
+
+var Textarea = /** @class */ (function (_super) {
+    __extends(Textarea, _super);
+    function Textarea() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            focused: false
+        };
+        _this.inputRef = function (ref) {
+            _this.input = findDOMNode(ref);
+            if (_this.props.forwardRef) {
+                _this.props.forwardRef.current = _this.input;
+            }
+            return _this.input;
+        };
+        return _this;
+    }
+    Textarea.prototype.valueToString = function (value) {
+        return typeof value === 'undefined' || value === null
+            ? ''
+            : typeof value === 'string'
+                ? value
+                : JSON.stringify(value);
+    };
+    Textarea.prototype.focus = function () {
+        var _this = this;
+        if (!this.input) {
+            return;
+        }
+        this.setState({
+            focused: true
+        }, function () {
+            if (!_this.input) {
+                return;
+            }
+            _this.input.focus();
+            // 光标放到最后
+            var len = _this.input.value.length;
+            len && _this.input.setSelectionRange(len, len);
+        });
+    };
+    Textarea.prototype.handleChange = function (e) {
+        var onChange = this.props.onChange;
+        var value = e.currentTarget.value;
+        onChange === null || onChange === void 0 ? void 0 : onChange(value);
+    };
+    Textarea.prototype.handleFocus = function (e) {
+        var onFocus = this.props.onFocus;
+        this.setState({
+            focused: true
+        }, function () {
+            onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
+        });
+    };
+    Textarea.prototype.handleBlur = function (e) {
+        var _a = this.props, onBlur = _a.onBlur; _a.trimContents; _a.value; _a.onChange;
+        this.setState({
+            focused: false
+        }, function () {
+            // 和renderer的重复了，不知道这里干啥的，先注释了
+            // if (trimContents && value && typeof value === 'string') {
+            //   onChange?.(value.trim());
+            // }
+            onBlur && onBlur(e);
+        });
+    };
+    Textarea.prototype.handleClear = function () {
+        return __awaiter(this, void 0, void 0, function () {
+            var _a, onChange, resetValue;
+            return __generator(this, function (_b) {
+                _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
+                onChange === null || onChange === void 0 ? void 0 : onChange(resetValue);
+                this.focus();
+                return [2 /*return*/];
+            });
+        });
+    };
+    Textarea.prototype.render = function () {
+        var _a;
+        var _b = this.props, className = _b.className; _b.classPrefix; var value = _b.value, placeholder = _b.placeholder, disabled = _b.disabled, minRows = _b.minRows, maxRows = _b.maxRows, readOnly = _b.readOnly, name = _b.name, borderMode = _b.borderMode, cx = _b.classnames, maxLength = _b.maxLength, showCounter = _b.showCounter, clearable = _b.clearable, testIdBuilder = _b.testIdBuilder, style = _b.style;
+        var counter = showCounter ? this.valueToString(value).length : 0;
+        return (React__default.createElement("div", { className: cx("TextareaControl", (_a = {},
+                _a["TextareaControl--border".concat(ucFirst(borderMode))] = borderMode,
+                _a['is-focused'] = this.state.focused,
+                _a['is-disabled'] = disabled || readOnly,
+                _a), className), style: style },
+            React__default.createElement(BaseTextArea, __assign({ className: cx("TextareaControl-input", {
+                    'TextareaControl-input--counter': showCounter
+                }), autoComplete: "off", ref: this.inputRef, name: name, disabled: disabled, value: this.valueToString(value), placeholder: placeholder, autoCorrect: "off", spellCheck: "false", maxLength: maxLength, readOnly: readOnly, minRows: minRows || undefined, maxRows: maxRows || undefined, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId())),
+            clearable && !disabled && value ? (React__default.createElement("a", { onClick: this.handleClear, className: cx('TextareaControl-clear') },
+                React__default.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null,
+            showCounter ? (React__default.createElement("span", { className: cx('TextareaControl-counter', {
+                    'is-empty': counter === 0,
+                    'is-clearable': clearable && !disabled && value
+                }) },
+                React__default.createElement("span", null, counter),
+                typeof maxLength === 'number' && maxLength ? (React__default.createElement(React__default.Fragment, null,
+                    React__default.createElement("i", null, "/"),
+                    React__default.createElement("span", null, maxLength))) : null)) : null));
+    };
+    Textarea.defaultProps = {
+        minRows: 3,
+        maxRows: 20,
+        trimContents: true,
+        resetValue: '',
+        clearable: false
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Textarea.prototype, "handleChange", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Textarea.prototype, "handleFocus", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [Object]),
+        __metadata("design:returntype", void 0)
+    ], Textarea.prototype, "handleBlur", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", Promise)
+    ], Textarea.prototype, "handleClear", null);
+    return Textarea;
+}(React__default.Component));
+var Textarea$1 = themeable(localeable(Textarea));
+
+export { Textarea, Textarea$1 as default };

package/esm/components/Timeline.d.ts

@@ -0,0 +1,56 @@
+/// <reference types="hoist-non-react-statics" />
+import React from 'react';
+import { ThemeProps } from 'amis-core';
+import { TimelineItemProps } from './TimelineItem';
+export declare enum DirectionMode {
+    left = "left",
+    right = "right",
+    top = "top",
+    bottom = "bottom",
+    alternate = "alternate"
+}
+export interface TimelineProps extends ThemeProps {
+    items: Array<TimelineItemProps>;
+    direction?: 'vertical' | 'horizontal';
+    reverse?: boolean;
+    mode?: DirectionMode;
+    iconClassName?: string;
+    timeClassName?: string;
+    titleClassName?: string;
+    detailClassName?: string;
+}
+export declare function Timeline(props: TimelineProps): React.JSX.Element;
+declare const _default: {
+    new (props: Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps): {
+        ref: any;
+        childRef(ref: any): void;
+        getWrappedInstance(): any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<Omit<TimelineProps, keyof ThemeProps> & 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<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<Omit<TimelineProps, keyof ThemeProps> & import("packages/amis-core/lib/theme").ThemeOuterProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    displayName: string;
+    contextType: React.Context<string>;
+    ComposedComponent: React.ComponentType<typeof Timeline>;
+} & import("hoist-non-react-statics").NonReactStatics<typeof Timeline, {}> & {
+    ComposedComponent: typeof Timeline;
+};
+export default _default;

package/esm/components/Timeline.js

@@ -0,0 +1,60 @@
+/**
+ * amis-ui v6.13.0
+ * Copyright 2018-2025 fex
+ */
+
+import { __assign } from 'tslib';
+import React__default from 'react';
+import { themeable } from 'amis-core';
+import TimelineItem, { getAlignByDirection, TimelineTimeComponent, TimelineContentComponent, TimelineLineComponent } from './TimelineItem.js';
+
+var DirectionMode;
+(function (DirectionMode) {
+    DirectionMode["left"] = "left";
+    DirectionMode["right"] = "right";
+    DirectionMode["top"] = "top";
+    DirectionMode["bottom"] = "bottom";
+    DirectionMode["alternate"] = "alternate";
+})(DirectionMode || (DirectionMode = {}));
+function Timeline(props) {
+    var items = props.items, style = props.style, cx = props.classnames, className = props.className, iconClassName = props.iconClassName, timeClassName = props.timeClassName, titleClassName = props.titleClassName, detailClassName = props.detailClassName, _a = props.direction, direction = _a === void 0 ? 'vertical' : _a, _b = props.reverse, reverse = _b === void 0 ? false : _b;
+    var _c = props.mode, mode = _c === void 0 ? DirectionMode.right : _c;
+    var timelineDatasource = items === null || items === void 0 ? void 0 : items.slice();
+    reverse && (timelineDatasource === null || timelineDatasource === void 0 ? void 0 : timelineDatasource.reverse());
+    // 分成水平和垂直两种模式渲染
+    if (direction === 'horizontal') {
+        if ([DirectionMode.right, DirectionMode.left].includes(mode)) {
+            mode = DirectionMode.top;
+        }
+        // alternate模式下，交替生成时间和内容
+        var isReverseScenario_1 = function (index, isAlternate) {
+            return isAlternate ? index % 2 === 0 : false;
+        };
+        return (React__default.createElement("div", { className: cx('Timeline', "Timeline-".concat(direction), "Timeline-".concat(mode), className), style: style },
+            React__default.createElement("div", { className: cx('Timeline-first-line') }, timelineDatasource === null || timelineDatasource === void 0 ? void 0 : timelineDatasource.map(function (item, index) {
+                var _a;
+                // 内容区偏移
+                var align = getAlignByDirection(direction, item.align);
+                return (React__default.createElement("div", { className: cx('TimelineItem-content', (_a = {},
+                        _a["TimelineItem-content-align--".concat(align)] = !!align,
+                        _a)) }, isReverseScenario_1(index, mode === DirectionMode.alternate) ||
+                    mode === DirectionMode.top ? (React__default.createElement(TimelineTimeComponent, __assign({ key: "TimelineItem-".concat(index) }, item))) : (React__default.createElement("div", { className: cx('Timeline-inner-content-wrapper') },
+                    React__default.createElement(TimelineContentComponent, __assign({ key: "TimelineItem-".concat(index) }, item))))));
+            })),
+            React__default.createElement("div", { className: cx('Timeline-line') }, timelineDatasource === null || timelineDatasource === void 0 ? void 0 : timelineDatasource.map(function (item, index) { return (React__default.createElement(TimelineLineComponent, __assign({ key: "TimelineItem-".concat(index) }, item, { direction: direction }))); })),
+            React__default.createElement("div", { className: cx('Timeline-second-line') }, timelineDatasource === null || timelineDatasource === void 0 ? void 0 : timelineDatasource.map(function (item, index) {
+                var _a;
+                // 内容区偏移
+                var align = getAlignByDirection(direction, item.align);
+                return (React__default.createElement("div", { className: cx('TimelineItem-content', (_a = {},
+                        _a["TimelineItem-content-align--".concat(align)] = !!align,
+                        _a)) }, isReverseScenario_1(index, mode === DirectionMode.alternate) ||
+                    mode === DirectionMode.top ? (React__default.createElement("div", { className: cx('Timeline-inner-content-wrapper') },
+                    React__default.createElement(TimelineContentComponent, __assign({ key: "TimelineItem-".concat(index) }, item)))) : (React__default.createElement(TimelineTimeComponent, __assign({ key: "TimelineItem-".concat(index) }, item)))));
+            }))));
+    }
+    return (React__default.createElement("div", { className: cx('Timeline', "Timeline-".concat(direction), "Timeline-".concat(mode), className), style: style }, timelineDatasource === null || timelineDatasource === void 0 ? void 0 : timelineDatasource.map(function (item, index) { return (React__default.createElement(TimelineItem, __assign({}, item, { key: "TimelineItem-".concat(index), iconClassName: item.iconClassName || iconClassName, timeClassName: item.timeClassName || timeClassName, titleClassName: item.titleClassName || titleClassName, detailClassName: item.detailClassName || detailClassName, direction: direction }))); })));
+}
+var Timeline$1 = themeable(Timeline);
+
+export { DirectionMode, Timeline, Timeline$1 as default };