amis-rev-ui 6.13.0

package/esm/components/PopUp.js

@@ -0,0 +1,85 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __rest, __assign } from 'tslib';
+import React__default from 'react';
+import { themeable, localeable } from 'amis-rev-core';
+import Transition, { ENTERED, EXITING, EXITED, ENTERING } from 'react-transition-group/Transition';
+import Portal from 'react-overlays/Portal';
+import { Icon } from './icons.js';
+import Button from './Button.js';
+
+/**
+ * @file PopUp
+ * @description
+ * @author fex
+ */
+var _a;
+var fadeStyles = (_a = {},
+    _a[ENTERED] = '',
+    _a[EXITING] = 'out',
+    _a[EXITED] = '',
+    _a[ENTERING] = 'in',
+    _a);
+var PopUp = /** @class */ (function (_super) {
+    __extends(PopUp, _super);
+    function PopUp() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.scrollTop = 0;
+        return _this;
+    }
+    PopUp.prototype.componentDidUpdate = function () {
+        if (this.props.isShow) {
+            this.scrollTop =
+                document.body.scrollTop || document.documentElement.scrollTop;
+            document.body.style.overflow = 'hidden';
+        }
+        else {
+            document.body.style.overflow = 'auto';
+            document.body.scrollTop = this.scrollTop;
+        }
+    };
+    PopUp.prototype.componentWillUnmount = function () {
+        document.body.style.overflow = 'auto';
+        document.body.scrollTop = this.scrollTop;
+    };
+    PopUp.prototype.handleClick = function (e) {
+        e.stopPropagation();
+    };
+    PopUp.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, style = _a.style, title = _a.title, children = _a.children, overlay = _a.overlay, onHide = _a.onHide, onConfirm = _a.onConfirm, ns = _a.classPrefix, cx = _a.classnames, className = _a.className, isShow = _a.isShow, container = _a.container, showConfirm = _a.showConfirm, __ = _a.translate, showClose = _a.showClose, header = _a.header, _b = _a.placement, placement = _b === void 0 ? 'center' : _b, onEntered = _a.onEntered, onExited = _a.onExited, rest = __rest(_a, ["style", "title", "children", "overlay", "onHide", "onConfirm", "classPrefix", "classnames", "className", "isShow", "container", "showConfirm", "translate", "showClose", "header", "placement", "onEntered", "onExited"]);
+        var outerStyle = __assign({}, style);
+        delete outerStyle.top;
+        return (React__default.createElement(Portal, { container: container },
+            React__default.createElement(Transition, { onEntered: onEntered, onExit: onExited, mountOnEnter: true, unmountOnExit: true, in: isShow, timeout: 500, appear: true }, function (status) {
+                return (React__default.createElement("div", __assign({ className: cx("".concat(ns, "PopUp"), className, fadeStyles[status]), style: outerStyle }, rest, { onClick: _this.handleClick }),
+                    overlay && (React__default.createElement("div", { className: "".concat(ns, "PopUp-overlay"), onClick: onHide })),
+                    React__default.createElement("div", { className: cx("".concat(ns, "PopUp-inner")) },
+                        !showConfirm && showClose ? (React__default.createElement("div", { className: cx("".concat(ns, "PopUp-closeWrap")) },
+                            header,
+                            React__default.createElement("span", { className: cx("PopUp-closeBox"), onClick: onHide },
+                                React__default.createElement(Icon, { icon: "close", className: cx('icon', "".concat(ns, "PopUp-close")) })))) : null,
+                        showConfirm && (React__default.createElement("div", { className: cx("".concat(ns, "PopUp-toolbar")) },
+                            React__default.createElement(Button, { className: cx("".concat(ns, "PopUp-cancel")), level: "link", onClick: onHide }, __('cancel')),
+                            title && (React__default.createElement("span", { className: cx("".concat(ns, "PopUp-title")) }, title)),
+                            React__default.createElement(Button, { className: cx("".concat(ns, "PopUp-confirm")), level: "link", onClick: onConfirm }, __('confirm')))),
+                        React__default.createElement("div", { className: cx("".concat(ns, "PopUp-content"), "justify-".concat(placement)) }, isShow ? children : null),
+                        React__default.createElement("div", { className: cx("PopUp-safearea") }))));
+            })));
+    };
+    PopUp.defaultProps = {
+        className: '',
+        overlay: true,
+        isShow: false,
+        container: document.body,
+        showClose: true,
+        onConfirm: function () { }
+    };
+    return PopUp;
+}(React__default.PureComponent));
+var PopUp$1 = themeable(localeable(PopUp));
+
+export { PopUp, PopUp$1 as default };

package/esm/components/Progress.js

@@ -0,0 +1,136 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends } from 'tslib';
+import React__default from 'react';
+import { Circle } from 'rc-progress';
+import { themeable } from 'amis-rev-core';
+
+var Progress = /** @class */ (function (_super) {
+    __extends(Progress, _super);
+    function Progress() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Progress.prototype.getCurrentColor = function () {
+        var color = this.props.map;
+        if (!color || !color.length) {
+            return 'bg-primary';
+        }
+        if (typeof color === 'string') {
+            return color;
+        }
+        else {
+            return this.getLevelColor(color);
+        }
+    };
+    Progress.prototype.getLevelColor = function (color) {
+        var value = this.props.value;
+        var colorArray = this.getColorArray(color).sort(function (a, b) { return a.value - b.value; });
+        for (var i = 0; i < colorArray.length; i++) {
+            if (colorArray[i].value >= value) {
+                return colorArray[i].color;
+            }
+        }
+        return colorArray[colorArray.length - 1].color;
+    };
+    Progress.prototype.getColorArray = function (color) {
+        var span = 100 / color.length;
+        return color.map(function (item, index) {
+            if (typeof item === 'string') {
+                return {
+                    color: item,
+                    value: (index + 1) * span
+                };
+            }
+            return item;
+        });
+    };
+    Progress.prototype.getLabel = function (prefixCls) {
+        var _a = this.props, value = _a.value, format = _a.format, showLabel = _a.showLabel, cx = _a.classnames;
+        if (!showLabel) {
+            return null;
+        }
+        var textFormatter = format || (function (value) { return "".concat(value, "%"); });
+        var content = textFormatter(value);
+        return (React__default.createElement("span", { className: cx("".concat(prefixCls, "-text")), key: "value" }, content));
+    };
+    Progress.prototype.render = function () {
+        var _a, _b, _c, _d;
+        var _e = this.props, className = _e.className, style = _e.style, progressClassName = _e.progressClassName, type = _e.type, value = _e.value, placeholder = _e.placeholder, stripe = _e.stripe, animate = _e.animate, gapDegree = _e.gapDegree, gapPosition = _e.gapPosition, strokeWidth = _e.strokeWidth, cx = _e.classnames, threshold = _e.threshold, showThresholdText = _e.showThresholdText;
+        var isLineType = type === 'line';
+        var prefixCls = isLineType ? 'Progress-line' : 'Progress-circle';
+        var bgColor = this.getCurrentColor();
+        var isColorClass = /bg-/.test(bgColor);
+        var viewValue;
+        if (typeof value !== 'number') {
+            viewValue = React__default.createElement("span", { className: "text-muted" }, placeholder);
+        }
+        else if (type === 'line') {
+            var barStyle = {
+                width: "".concat(value, "%")
+            };
+            strokeWidth && (barStyle.height = strokeWidth);
+            !isColorClass && (barStyle.backgroundColor = bgColor);
+            var thresholdDom = null;
+            if (threshold) {
+                var temp_1 = function (text, color) { return (React__default.createElement("div", { style: {
+                        left: text,
+                        borderColor: color || 'var(--text-color)'
+                    }, className: cx("".concat(prefixCls, "-threshold")), key: text }, showThresholdText ? (React__default.createElement("span", { className: cx("".concat(prefixCls, "-threshold-text")) }, text)) : null)); };
+                if (Array.isArray(threshold)) {
+                    thresholdDom = threshold.map(function (item) {
+                        var text = parseFloat(item.value) + '%';
+                        return temp_1(text, item.color);
+                    });
+                }
+                else {
+                    var text = parseFloat(threshold.value) + '%';
+                    thresholdDom = temp_1(text, threshold.color);
+                }
+            }
+            viewValue = [
+                React__default.createElement("div", { key: "progress", className: cx(prefixCls, progressClassName) },
+                    thresholdDom,
+                    React__default.createElement("div", { className: cx("".concat(prefixCls, "-inter")) },
+                        React__default.createElement("div", { className: cx("".concat(prefixCls, "-bar"), (_a = {}, _a[bgColor] = isColorClass, _a), (_b = {}, _b["".concat(prefixCls, "-bar--stripe")] = stripe, _b), (_c = {}, _c["".concat(prefixCls, "-bar--animate")] = animate && !stripe, _c), (_d = {}, _d["".concat(prefixCls, "-bar--stripe-animate")] = animate && stripe, _d)), title: "".concat(value, "%"), style: barStyle }))),
+                this.getLabel(prefixCls)
+            ];
+        }
+        else if (type === 'circle' || type === 'dashboard') {
+            var circleWidth = strokeWidth || 8;
+            var circleStyle = {
+                width: circleWidth * 10 + 'px',
+                height: circleWidth * 10 + 'px'
+            };
+            var gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
+            var getGapDegree = function () {
+                if (gapDegree || gapDegree === 0) {
+                    return gapDegree;
+                }
+                if (type === 'dashboard') {
+                    return 75;
+                }
+                return undefined;
+            };
+            viewValue = [
+                React__default.createElement("div", { className: cx(prefixCls, progressClassName), key: "circle", style: circleStyle },
+                    React__default.createElement(Circle, { percent: value, strokeColor: !isColorClass ? bgColor : '', strokeWidth: circleWidth, trailWidth: circleWidth, prefixCls: isColorClass ? bgColor : '', gapDegree: getGapDegree(), gapPosition: gapPos, style: circleStyle }),
+                    this.getLabel(prefixCls))
+            ];
+        }
+        return (React__default.createElement("div", { className: cx('Progress', className), style: style }, viewValue));
+    };
+    Progress.defaultProps = {
+        type: 'line',
+        placeholder: '-',
+        progressClassName: '',
+        map: ['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'],
+        showLabel: true
+    };
+    return Progress;
+}(React__default.Component));
+var Progress$1 = themeable(Progress);
+
+export { Progress, Progress$1 as default };

package/esm/components/PullRefresh.js

@@ -0,0 +1,172 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __read, __assign } from 'tslib';
+import React__default, { forwardRef, useEffect } from 'react';
+import { themeable } from 'amis-rev-core';
+import useSetState from '../hooks/use-set-state.js';
+import useTouch from '../hooks/use-touch.js';
+import 'lodash/pick';
+import useOnScreen from '../hooks/use-on-screen.js';
+import { Spinner } from './Spinner.js';
+
+/**
+ * @file PullRefresh.tsx
+ * @description 下拉刷新
+ * @author hongyang03
+ */
+var defaultProps = {
+    successDuration: 0,
+    loadingDuration: 0,
+    direction: 'down',
+    showIcon: true,
+    showText: true,
+    iconType: 'loading-outline'
+};
+var defaultHeaderHeight = 28;
+var PullRefresh = forwardRef(function (props, ref) {
+    var _a, _b, _c, _d, _e, _f;
+    var cx = props.classnames, __ = props.translate, children = props.children, successDuration = props.successDuration, loadingDuration = props.loadingDuration, direction = props.direction, completed = props.completed, showIcon = props.showIcon, showText = props.showText, iconType = props.iconType, color = props.color, contentText = props.contentText;
+    var refreshText = {
+        normalText: (_a = contentText === null || contentText === void 0 ? void 0 : contentText.normalText) !== null && _a !== void 0 ? _a : __('pullRefresh.normalText'),
+        pullingText: (_b = contentText === null || contentText === void 0 ? void 0 : contentText.pullingText) !== null && _b !== void 0 ? _b : __('pullRefresh.pullingText'),
+        loosingText: (_c = contentText === null || contentText === void 0 ? void 0 : contentText.loosingText) !== null && _c !== void 0 ? _c : __('pullRefresh.loosingText'),
+        loadingText: (_d = contentText === null || contentText === void 0 ? void 0 : contentText.loadingText) !== null && _d !== void 0 ? _d : __('pullRefresh.loadingText'),
+        successText: (_e = contentText === null || contentText === void 0 ? void 0 : contentText.successText) !== null && _e !== void 0 ? _e : __('pullRefresh.successText'),
+        completedText: (_f = contentText === null || contentText === void 0 ? void 0 : contentText.completedText) !== null && _f !== void 0 ? _f : __('pullRefresh.completedText')
+    };
+    var touch = useTouch();
+    var loadingRef = React__default.useRef(null);
+    // 当占位文字在屏幕内时，需要刷新
+    var needRefresh = useOnScreen(loadingRef);
+    useEffect(function () {
+        if (props.loading === false) {
+            loadSuccess();
+        }
+    }, [props.loading]);
+    var _g = __read(useSetState({
+        status: 'normal',
+        offsetY: 0
+    }), 2), state = _g[0], updateState = _g[1];
+    var isTouchable = function () {
+        return (!completed &&
+            needRefresh &&
+            !props.disabled &&
+            state.status !== 'loading' &&
+            state.status !== 'success');
+    };
+    var ease = function (distance) {
+        var pullDistance = defaultHeaderHeight;
+        if (distance > pullDistance) {
+            if (distance < pullDistance * 2) {
+                distance = pullDistance + (distance - pullDistance) / 2;
+            }
+            else {
+                distance = pullDistance * 1.5 + (distance - pullDistance * 2) / 4;
+            }
+        }
+        return Math.round(distance);
+    };
+    var setStatus = function (distance, isLoading) {
+        var pullDistance = defaultHeaderHeight;
+        var status = 'normal';
+        if (isLoading) {
+            status = 'loading';
+        }
+        else if (distance === 0) {
+            status = 'normal';
+        }
+        else if (Math.abs(distance) < pullDistance) {
+            status = 'pulling';
+        }
+        else {
+            status = 'loosing';
+        }
+        updateState({ offsetY: distance, status: status });
+    };
+    var loadSuccess = function () {
+        if (!successDuration) {
+            setStatus(0);
+            return;
+        }
+        updateState({ status: 'success' });
+        setTimeout(function () {
+            setStatus(0);
+        }, successDuration);
+    };
+    var onTouchStart = function (event) {
+        event.stopPropagation();
+        if (isTouchable() && state.offsetY === 0) {
+            touch.start(event);
+            updateState({});
+        }
+    };
+    var onTouchMove = function (event) {
+        event.stopPropagation();
+        if (isTouchable()) {
+            touch.move(event);
+            updateState({});
+            if (touch.isVertical()) {
+                if (direction === 'down' && touch.deltaY > 0) {
+                    setStatus(ease(touch.deltaY));
+                }
+                else if (direction === 'up' && touch.deltaY < 0) {
+                    setStatus(-1 * ease(-1 * touch.deltaY));
+                }
+            }
+        }
+        return false;
+    };
+    var onTouchEnd = function (event) {
+        event.stopPropagation();
+        if (isTouchable() && state.offsetY !== 0) {
+            if (state.status === 'loosing') {
+                if (loadingDuration) {
+                    setStatus(defaultHeaderHeight, true);
+                }
+                else {
+                    setStatus(0);
+                }
+                props.onRefresh && props.onRefresh();
+            }
+            else {
+                setStatus(0);
+            }
+        }
+    };
+    var transformStyle = __assign({ transform: "translate3d(0, ".concat(state.offsetY, "px, 0)") }, (direction === 'down'
+        ? {
+            touchAction: 'none'
+        }
+        : {}));
+    var getStatusText = function (status) {
+        if (props.loading) {
+            return refreshText.loadingText;
+        }
+        if (completed) {
+            return refreshText.completedText;
+        }
+        return refreshText["".concat(status, "Text")];
+    };
+    var loadingDom = function (className) {
+        return (React__default.createElement("div", { className: className, ref: loadingRef, style: color
+                ? {
+                    '--Spinner-color': color,
+                    'color': color
+                }
+                : undefined },
+            showIcon && props.loading && (React__default.createElement(Spinner, { show: true, icon: iconType, size: "sm", className: "PullRefresh-spinner", classnames: cx, classPrefix: props.classPrefix })),
+            showText && getStatusText(state.status)));
+    };
+    return (React__default.createElement("div", { className: cx('PullRefresh'), onTouchStart: onTouchStart, onTouchMove: onTouchMove, onTouchEnd: onTouchEnd, onTouchCancel: onTouchEnd },
+        React__default.createElement("div", { className: cx('PullRefresh-wrap'), style: transformStyle },
+            direction === 'down' ? loadingDom(cx('PullRefresh-header')) : null,
+            children,
+            direction === 'up' ? loadingDom(cx('PullRefresh-footer')) : null)));
+});
+PullRefresh.defaultProps = defaultProps;
+var PullRefresh$1 = themeable(PullRefresh);
+
+export { PullRefresh$1 as default };

package/esm/components/Radios.js

@@ -0,0 +1,129 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends } from 'tslib';
+import React__default from 'react';
+import { columnsSplit, themeable, uncontrollable } from 'amis-rev-core';
+import Checkbox from './Checkbox.js';
+import { value2array } from './Select.js';
+import TooltipWrapper from './TooltipWrapper.js';
+import { Icon } from './icons.js';
+
+/**
+ * @file Radios
+ * @description
+ * @author fex
+ *
+ * @param 参数说明：
+ * options: [
+ *   {
+ *      label: '显示的名字',
+ *      value: '值',
+ *      disabled: false
+ *   }
+ * ]
+ *
+ */
+var defaultLabelRender = function (item, props) { return (React__default.createElement(React__default.Fragment, null, "".concat(item[props.labelField || 'label']))); };
+var Radios = /** @class */ (function (_super) {
+    __extends(Radios, _super);
+    function Radios() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Radios.prototype.toggleOption = function (option) {
+        var _a = this.props, value = _a.value, onChange = _a.onChange, valueField = _a.valueField, clearable = _a.clearable, delimiter = _a.delimiter, options = _a.options;
+        var valueArray = value2array(value, {
+            multiple: false,
+            delimiter: delimiter,
+            valueField: valueField,
+            options: options
+        });
+        var idx = valueArray.indexOf(option);
+        if (~idx) {
+            clearable && valueArray.splice(idx, 1);
+        }
+        else {
+            valueArray = [option];
+        }
+        var newValue = valueArray[0];
+        onChange && onChange(newValue);
+    };
+    Radios.prototype.renderGroup = function (option, index, valueArray) {
+        var _this = this;
+        var _a = this.props, cx = _a.classnames; _a.optionType; _a.classPrefix; var _b = _a.renderLabel, renderLabel = _b === void 0 ? defaultLabelRender : _b;
+        return (React__default.createElement("div", { key: index, className: cx('RadiosControl-group', option.className) },
+            React__default.createElement("label", { className: cx('RadiosControl-groupLabel', option.labelClassName) }, renderLabel(option, this.props)),
+            option.children && option.children.length
+                ? option.children.map(function (option, index) {
+                    return _this.renderItem(option, index, valueArray);
+                })
+                : null));
+    };
+    Radios.prototype.renderItem = function (option, index, valueArray) {
+        var _this = this;
+        var _a;
+        if ((_a = option.children) === null || _a === void 0 ? void 0 : _a.length) {
+            return this.renderGroup(option, index, valueArray);
+        }
+        var _b = this.props, disabled = _b.disabled, inline = _b.inline, itemClassName = _b.itemClassName, cx = _b.classnames, labelClassName = _b.labelClassName; _b.labelField; var optionType = _b.optionType; _b.level; _b.btnActiveLevel; _b.classPrefix; var testIdBuilder = _b.testIdBuilder, _c = _b.renderLabel, renderLabel = _c === void 0 ? defaultLabelRender : _c;
+        var itemTestIdBuilder = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild(option.value || index);
+        // if (optionType === 'button') {
+        //   const active = !!~valueArray.indexOf(option);
+        //   return (
+        //     <Button
+        //       key={index}
+        //       active={active}
+        //       onClick={() => this.toggleOption(option)}
+        //       className={cx(itemClassName, option.className)}
+        //       disabled={disabled || option.disabled}
+        //       level={(active ? btnActiveLevel : '') || level}
+        //     >
+        //       <span>{renderLabel(option, this.props)}</span>
+        //     </Button>
+        //   );
+        // }
+        var finalDisabled = disabled || option.disabled;
+        return (React__default.createElement(Checkbox, { type: "radio", key: index, onChange: function () { return _this.toggleOption(option); }, checked: !!~valueArray.indexOf(option), className: cx(itemClassName, option.className), disabled: finalDisabled, description: option.description, inline: inline, labelClassName: labelClassName, testIdBuilder: itemTestIdBuilder, optionType: optionType },
+            renderLabel(option, this.props),
+            option.disabledTip && finalDisabled ? (React__default.createElement(TooltipWrapper, { placement: "right", tooltip: option.disabledTip, trigger: "hover" },
+                React__default.createElement("a", { className: cx('Select-option-disabledTip') },
+                    React__default.createElement(Icon, { className: "icon", icon: "question2" })))) : null));
+    };
+    Radios.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, value = _a.value, options = _a.options, className = _a.className, style = _a.style, cx = _a.classnames, placeholder = _a.placeholder, columnsCount = _a.columnsCount; _a.joinValues; _a.extractValue; _a.disabled; var inline = _a.inline, delimiter = _a.delimiter, valueField = _a.valueField;
+        var valueArray = value2array(value, {
+            multiple: false,
+            delimiter: delimiter,
+            valueField: valueField,
+            options: options
+        });
+        var body = [];
+        if (options) {
+            body = options.map(function (option, key) {
+                return _this.renderItem(option, key, valueArray);
+            });
+        }
+        if (!inline) {
+            body = columnsSplit(body, cx, columnsCount);
+        }
+        return (React__default.createElement("div", { className: className, style: style }, body && body.length ? body : placeholder));
+    };
+    Radios.defaultProps = {
+        type: 'radio',
+        btnActiveLevel: 'primary',
+        resetValue: '',
+        inline: true,
+        joinValues: true,
+        clearable: false,
+        columnsCount: 1 // 一行显示一个
+    };
+    return Radios;
+}(React__default.Component));
+var Radios$1 = themeable(uncontrollable(Radios, {
+    value: 'onChange'
+}));
+
+export { Radios, Radios$1 as default };