amis-rev-ui 6.13.0

package/esm/components/TitleBar.js

@@ -0,0 +1,48 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends } from 'tslib';
+import React__default from 'react';
+import { themeable } from 'amis-rev-core';
+
+/**
+ * @file TitleBar。
+ * @description
+ * @author fex
+ * @param 参数说明：
+ * title 标题内容
+ * titleClassName 标题类名，默认为 bg-light lter b-b
+ * right 可以传入右侧节点, 当有右侧时自动采用 hbox 来左右布局。
+ */
+var TitleBar = /** @class */ (function (_super) {
+    __extends(TitleBar, _super);
+    function TitleBar() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    TitleBar.prototype.render = function () {
+        var _a = this.props, className = _a.className, title = _a.title, titleClassName = _a.titleClassName, right = _a.right, cx = _a.classnames;
+        var left = title ? React__default.createElement("div", { className: titleClassName }, title) : null;
+        var body = left;
+        if (right) {
+            body = (React__default.createElement("div", { className: "hbox hbox-auto-xs h-auto" },
+                React__default.createElement("div", { className: "col bg-light b-b wrapper" }, left),
+                React__default.createElement("div", { className: "col v-middle padder-md text-right bg-light b-b wrapper-sm" }, right)));
+        }
+        else {
+            body = React__default.createElement("div", { className: "wrapper" }, left);
+        }
+        return React__default.createElement("div", { className: cx(className, 'TitleBar') }, body);
+    };
+    TitleBar.defaultProps = {
+        className: 'bg-light lter b-b',
+        title: '标题',
+        titleClassName: 'm-n font-thin h3',
+        right: false
+    };
+    return TitleBar;
+}(React__default.PureComponent));
+var TitleBar$1 = themeable(TitleBar);
+
+export { TitleBar, TitleBar$1 as default };

package/esm/components/Toast.js

@@ -0,0 +1,247 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __spreadArray, __read, __assign, __decorate, __metadata } from 'tslib';
+import Transition, { ENTERING, ENTERED, EXITING } from 'react-transition-group/Transition';
+import React__default from 'react';
+import Html from './Html.js';
+import { guid, autobind, themeable, localeable, noop } from 'amis-rev-core';
+import { Icon } from './icons.js';
+import groupBy from 'lodash/groupBy';
+
+/**
+ * @file Toast
+ * @description toast提示组件, 单例模式，App级别只需要一个ToastComponent，引入了多个会兼容，也只有第一个生效
+ * @author fex
+ */
+var _a;
+var fadeStyles = (_a = {},
+    _a[ENTERING] = 'in',
+    _a[ENTERED] = 'in',
+    _a[EXITING] = 'out',
+    _a);
+var toastRef = null;
+var show = function (content, conf, method) {
+    if (conf === void 0) { conf = {}; }
+    if (!toastRef || !toastRef[method]) {
+        return;
+    }
+    toastRef[method](content, __assign({}, conf));
+};
+var ToastComponent = /** @class */ (function (_super) {
+    __extends(ToastComponent, _super);
+    function ToastComponent() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        // 当前ToastComponent是否真正render了
+        _this.hasRendered = false;
+        _this.state = {
+            items: []
+        };
+        return _this;
+    }
+    ToastComponent.prototype.componentDidMount = function () {
+        this.hasRendered = true;
+        toastRef = this;
+    };
+    ToastComponent.prototype.componentWillUnmount = function () {
+        if (this.hasRendered) {
+            toastRef = null;
+        }
+    };
+    ToastComponent.prototype.notifiy = function (level, content, config) {
+        var mobileUI = config.mobileUI || this.props.mobileUI;
+        this.setState(function (state) {
+            var items = state.items.concat();
+            if (mobileUI) {
+                // 移动端只能存在一个
+                items = [];
+            }
+            items.push(__assign(__assign({ body: content, level: level }, config), { id: guid(), className: config.className || '', position: config.position || (mobileUI ? 'center' : config.position), timeout: config.timeout || (mobileUI ? 3000 : undefined) }));
+            return {
+                items: items,
+                mobileUI: mobileUI
+            };
+        });
+    };
+    ToastComponent.prototype.success = function (content, config) {
+        this.notifiy('success', content, config);
+    };
+    ToastComponent.prototype.error = function (content, config) {
+        this.notifiy('error', content, config);
+    };
+    ToastComponent.prototype.info = function (content, config) {
+        this.notifiy('info', content, config);
+    };
+    ToastComponent.prototype.warning = function (content, config) {
+        this.notifiy('warning', content, config);
+    };
+    ToastComponent.prototype.handleDismissed = function (index) {
+        var _a;
+        var items = this.state.items.concat();
+        var _b = __read(items.splice(index, 1), 1), item = _b[0];
+        (_a = item === null || item === void 0 ? void 0 : item.onDissmiss) === null || _a === void 0 ? void 0 : _a.call(item);
+        this.setState({
+            items: items
+        });
+    };
+    ToastComponent.prototype.render = function () {
+        var _this = this;
+        if (toastRef && !this.hasRendered) {
+            return null;
+        }
+        var _a = this.props, cx = _a.classnames, className = _a.className, timeout = _a.timeout, errorTimeout = _a.errorTimeout, position = _a.position, showIcon = _a.showIcon, translate = _a.translate, closeButton = _a.closeButton;
+        var items = this.state.items;
+        var mobileUI = this.state.mobileUI || this.props.mobileUI;
+        var groupedItems = groupBy(items, function (item) { return item.position || position; });
+        return Object.keys(groupedItems).map(function (position) {
+            var toasts = groupedItems[position];
+            return (React__default.createElement("div", { key: position, className: cx("Toast-wrap Toast-wrap--".concat(position.replace(/\-(\w)/g, function (_, l) {
+                    return l.toUpperCase();
+                })), {
+                    'Toast-mobile': mobileUI
+                }, className) }, toasts.map(function (item, index) {
+                var _a, _b, _c;
+                var level = item.level || 'info';
+                var toastTimeout = (_a = item.timeout) !== null && _a !== void 0 ? _a : (level === 'error' ? errorTimeout : timeout);
+                return (React__default.createElement(ToastMessage, { classnames: cx, key: item.id || index, title: item.title, body: item.body, level: level, className: item.className, timeout: toastTimeout, closeButton: !mobileUI && ((_b = item.closeButton) !== null && _b !== void 0 ? _b : closeButton), onDismiss: _this.handleDismissed.bind(_this, items.indexOf(item)), translate: translate, showIcon: (_c = item.showIcon) !== null && _c !== void 0 ? _c : showIcon, mobileUI: mobileUI }));
+            })));
+        });
+    };
+    ToastComponent.defaultProps = {
+        position: 'top-center',
+        closeButton: false,
+        timeout: 4000,
+        errorTimeout: 6000, // 错误的时候 time 调长
+        items: []
+    };
+    ToastComponent.themeKey = 'toast';
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Object]),
+        __metadata("design:returntype", void 0)
+    ], ToastComponent.prototype, "success", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Object]),
+        __metadata("design:returntype", void 0)
+    ], ToastComponent.prototype, "error", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Object]),
+        __metadata("design:returntype", void 0)
+    ], ToastComponent.prototype, "info", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String, Object]),
+        __metadata("design:returntype", void 0)
+    ], ToastComponent.prototype, "warning", null);
+    return ToastComponent;
+}(React__default.Component));
+var Toast = themeable(localeable(ToastComponent));
+var ToastMessage = /** @class */ (function (_super) {
+    __extends(ToastMessage, _super);
+    function ToastMessage() {
+        var _this = _super.apply(this, __spreadArray([], __read(arguments), false)) || this;
+        _this.state = {
+            visible: false
+        };
+        _this.mounted = false;
+        return _this;
+    }
+    ToastMessage.prototype.componentDidMount = function () {
+        this.mounted = true;
+        this.setState({
+            visible: true
+        });
+    };
+    ToastMessage.prototype.componentWillUnmount = function () {
+        clearTimeout(this.timer);
+        this.mounted = false;
+    };
+    ToastMessage.prototype.handleMouseEnter = function () {
+        clearTimeout(this.timer);
+    };
+    ToastMessage.prototype.handleMouseLeave = function () {
+        this.handleEntered();
+    };
+    ToastMessage.prototype.handleEntered = function () {
+        var timeout = this.props.timeout;
+        if (this.mounted && timeout) {
+            this.timer = setTimeout(this.close, timeout);
+        }
+    };
+    ToastMessage.prototype.close = function () {
+        clearTimeout(this.timer);
+        this.setState({
+            visible: false
+        });
+    };
+    ToastMessage.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, onDismiss = _a.onDismiss, cx = _a.classnames, closeButton = _a.closeButton, title = _a.title, body = _a.body, allowHtml = _a.allowHtml, level = _a.level, showIcon = _a.showIcon, mobileUI = _a.mobileUI; _a.translate; var className = _a.className;
+        var iconName = mobileUI ? '' : 'alert-';
+        return (React__default.createElement(Transition, { mountOnEnter: true, unmountOnExit: true, in: this.state.visible, timeout: 750, onEntered: this.handleEntered, onExited: onDismiss }, function (status) {
+            var _a, _b, _c, _d;
+            return (React__default.createElement("div", { className: cx("Toast Toast--".concat(level), className, fadeStyles[status], {
+                    'Toast-mobile--has-icon': mobileUI && showIcon !== false
+                }), onMouseEnter: _this.handleMouseEnter, onMouseLeave: _this.handleMouseLeave, onClick: closeButton ? noop : _this.close },
+                showIcon === false ? null : (React__default.createElement("div", { className: cx('Toast-icon') }, level === 'success' ? (React__default.createElement(Icon, { icon: iconName + 'success', className: "icon" })) : level == 'error' ? (React__default.createElement(Icon, { icon: iconName + 'fail', className: "icon" })) : level == 'info' ? (React__default.createElement(Icon, { icon: iconName + 'info', className: "icon" })) : level == 'warning' ? (React__default.createElement(Icon, { icon: iconName + 'warning', className: "icon" })) : null)),
+                React__default.createElement("div", { className: cx('Toast-content') },
+                    typeof title === 'string' ? (React__default.createElement("span", { className: cx("Toast-title") }, title)) : React__default.isValidElement(title) ? (React__default.cloneElement(title, {
+                        className: cx("Toast-title", (_b = (_a = title === null || title === void 0 ? void 0 : title.props) === null || _a === void 0 ? void 0 : _a.className) !== null && _b !== void 0 ? _b : '')
+                    })) : null,
+                    React__default.isValidElement(body) ? (React__default.cloneElement(body, {
+                        className: cx("Toast-body", (_d = (_c = body === null || body === void 0 ? void 0 : body.props) === null || _c === void 0 ? void 0 : _c.className) !== null && _d !== void 0 ? _d : '')
+                    })) : typeof body === 'string' || typeof body === 'object' ? (React__default.createElement("div", { className: cx('Toast-body') }, allowHtml ? (React__default.createElement(Html, { html: body === null || body === void 0 ? void 0 : body.toString() })) : (body === null || body === void 0 ? void 0 : body.toString()))) : null),
+                closeButton ? (React__default.createElement("a", { onClick: _this.close, className: cx("Toast-close") },
+                    React__default.createElement(Icon, { icon: "status-close", className: "icon" }))) : null));
+        }));
+    };
+    ToastMessage.defaultProps = {
+        timeout: 5000,
+        classPrefix: '',
+        position: 'top-center',
+        allowHtml: true,
+        level: 'info'
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ToastMessage.prototype, "handleMouseEnter", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ToastMessage.prototype, "handleMouseLeave", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ToastMessage.prototype, "handleEntered", null);
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", []),
+        __metadata("design:returntype", void 0)
+    ], ToastMessage.prototype, "close", null);
+    return ToastMessage;
+}(React__default.Component));
+var toast = {
+    container: toastRef,
+    success: function (content, conf) { return show(content, conf, 'success'); },
+    error: function (content, conf) { return show(content, conf, 'error'); },
+    info: function (content, conf) { return show(content, conf, 'info'); },
+    warning: function (content, conf) { return show(content, conf, 'warning'); }
+};
+
+export { ToastComponent, ToastMessage, Toast as default, toast };

package/esm/components/Tooltip.js

@@ -0,0 +1,36 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __rest, __assign } from 'tslib';
+import React__default from 'react';
+import { themeable } from 'amis-rev-core';
+
+/**
+ * @file Tooltip
+ * @description
+ * @author fex
+ */
+var Tooltip = /** @class */ (function (_super) {
+    __extends(Tooltip, _super);
+    function Tooltip() {
+        return _super !== null && _super.apply(this, arguments) || this;
+    }
+    Tooltip.prototype.render = function () {
+        var _a = this.props; _a.classPrefix; var className = _a.className, tooltipTheme = _a.tooltipTheme, title = _a.title, children = _a.children, arrowProps = _a.arrowProps, style = _a.style; _a.placement; _a.arrowOffsetLeft; _a.arrowOffsetTop; _a.positionLeft; _a.positionTop; var cx = _a.classnames, activePlacement = _a.activePlacement, showArrow = _a.showArrow, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, arrowClassName = _a.arrowClassName, bodyClassName = _a.bodyClassName; _a.componentId; var rest = __rest(_a, ["classPrefix", "className", "tooltipTheme", "title", "children", "arrowProps", "style", "placement", "arrowOffsetLeft", "arrowOffsetTop", "positionLeft", "positionTop", "classnames", "activePlacement", "showArrow", "onMouseEnter", "onMouseLeave", "arrowClassName", "bodyClassName", "componentId"]);
+        return (React__default.createElement("div", __assign({}, rest, { className: cx("Tooltip", activePlacement ? "Tooltip--".concat(activePlacement) : '', className, "Tooltip--".concat(tooltipTheme === 'dark' ? 'dark' : 'light')), style: style, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, role: "tooltip" }),
+            showArrow ? (React__default.createElement("div", __assign({ className: cx(arrowClassName, 'Tooltip-arrow') }, arrowProps))) : null,
+            title ? React__default.createElement("div", { className: cx('Tooltip-title') }, title) : null,
+            React__default.createElement("div", { className: cx(bodyClassName, 'Tooltip-body') }, children)));
+    };
+    Tooltip.defaultProps = {
+        className: '',
+        tooltipTheme: 'light',
+        showArrow: true
+    };
+    return Tooltip;
+}(React__default.Component));
+var Tooltip$1 = themeable(Tooltip);
+
+export { Tooltip, Tooltip$1 as default };

package/esm/components/TooltipWrapper.js

@@ -0,0 +1,180 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __assign } from 'tslib';
+import React__default from 'react';
+import Html from './Html.js';
+import { findDomCompat, isObject, Overlay, themeable, uncontrollable } from 'amis-rev-core';
+import Tooltip from './Tooltip.js';
+
+/**
+ * @file TooltipWrapper
+ * @description
+ * @author fex
+ */
+var waitToHide = null;
+var TooltipWrapper = /** @class */ (function (_super) {
+    __extends(TooltipWrapper, _super);
+    function TooltipWrapper(props) {
+        var _this = _super.call(this, props) || this;
+        _this.moutned = true;
+        _this.tooltipMouseEnter = function (e) {
+            var _a;
+            var tooltip = _this.props.tooltip;
+            var enterable = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enterable) !== null && _a !== void 0 ? _a : true;
+            enterable && clearTimeout(_this.timer);
+        };
+        _this.tooltipMouseLeave = function (e) {
+            var _a;
+            var tooltip = _this.props.tooltip;
+            var enterable = (_a = tooltip === null || tooltip === void 0 ? void 0 : tooltip.enterable) !== null && _a !== void 0 ? _a : true;
+            enterable && clearTimeout(_this.timer);
+            _this.hide();
+        };
+        _this.getTarget = _this.getTarget.bind(_this);
+        _this.show = _this.show.bind(_this);
+        _this.hide = _this.hide.bind(_this);
+        _this.handleShow = _this.handleShow.bind(_this);
+        _this.handleHide = _this.handleHide.bind(_this);
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.handleMouseOver = _this.handleMouseOver.bind(_this);
+        _this.handleMouseOut = _this.handleMouseOut.bind(_this);
+        _this.state = {
+            show: false
+        };
+        return _this;
+    }
+    TooltipWrapper.prototype.componentWillUnmount = function () {
+        clearTimeout(this.timer);
+        this.moutned = false;
+    };
+    TooltipWrapper.prototype.getTarget = function () {
+        return findDomCompat(this);
+    };
+    TooltipWrapper.prototype.show = function () {
+        var _this = this;
+        this.setState({
+            show: true
+        }, function () {
+            if (_this.props.onVisibleChange) {
+                _this.props.onVisibleChange(true);
+            }
+        });
+    };
+    TooltipWrapper.prototype.hide = function () {
+        var _this = this;
+        waitToHide = null;
+        this.moutned &&
+            this.setState({
+                show: false
+            }, function () {
+                if (_this.props.onVisibleChange) {
+                    _this.props.onVisibleChange(false);
+                }
+            });
+    };
+    TooltipWrapper.prototype.getChildProps = function () {
+        var child = React__default.Children.only(this.props.children);
+        return child && child.props;
+    };
+    TooltipWrapper.prototype.handleShow = function () {
+        this.timer && clearTimeout(this.timer);
+        waitToHide && waitToHide();
+        var tooltip = this.props.tooltip;
+        if (isObject(tooltip)) {
+            var _a = tooltip.mouseEnterDelay, mouseEnterDelay = _a === void 0 ? 0 : _a;
+            this.timer = setTimeout(this.show, mouseEnterDelay);
+        }
+        else {
+            this.timer = setTimeout(this.show, 0);
+        }
+    };
+    TooltipWrapper.prototype.handleHide = function () {
+        clearTimeout(this.timer);
+        var _a = this.props, delay = _a.delay, tooltip = _a.tooltip;
+        waitToHide = this.hide.bind(this);
+        if (isObject(tooltip)) {
+            var _b = tooltip.mouseLeaveDelay, mouseLeaveDelay = _b === void 0 ? 300 : _b;
+            this.timer = setTimeout(this.hide, mouseLeaveDelay);
+        }
+        else {
+            this.timer = setTimeout(this.hide, delay);
+        }
+    };
+    TooltipWrapper.prototype.handleFocus = function (e) {
+        var onFocus = this.getChildProps().onFocus;
+        this.handleShow();
+        onFocus && onFocus(e);
+    };
+    TooltipWrapper.prototype.handleBlur = function (e) {
+        var onBlur = this.getChildProps().onBlur;
+        this.handleHide();
+        onBlur && onBlur(e);
+    };
+    TooltipWrapper.prototype.handleMouseOver = function (e) {
+        this.handleMouseOverOut(this.handleShow, e, 'fromElement');
+    };
+    TooltipWrapper.prototype.handleMouseOut = function (e) {
+        this.handleMouseOverOut(this.handleHide, e, 'toElement');
+    };
+    TooltipWrapper.prototype.handleMouseOverOut = function (handler, e, relatedNative) {
+        var target = e.currentTarget;
+        var related = e.relatedTarget || e.nativeEvent[relatedNative];
+        if ((!related || related !== target) && !target.contains(related)) {
+            handler(e);
+        }
+    };
+    TooltipWrapper.prototype.handleClick = function (e) {
+        var onClick = this.getChildProps().onClick;
+        this.state.show ? this.hide() : this.show();
+        onClick && onClick(e);
+    };
+    TooltipWrapper.prototype.render = function () {
+        var props = this.props;
+        var child = React__default.Children.only(props.children);
+        if (!props.tooltip) {
+            return child;
+        }
+        // tooltip 对象内属性优先级更高
+        var tooltipObj = __assign({ placement: props.placement, container: props.container, trigger: props.trigger, rootClose: props.rootClose, tooltipClassName: props.tooltipClassName, style: props.style, mouseLeaveDelay: props.delay, tooltipTheme: props.tooltipTheme }, (typeof props.tooltip === 'string'
+            ? { content: props.tooltip }
+            : props.tooltip));
+        var title = tooltipObj.title, content = tooltipObj.content, placement = tooltipObj.placement, container = tooltipObj.container, trigger = tooltipObj.trigger, rootClose = tooltipObj.rootClose, tooltipClassName = tooltipObj.tooltipClassName, tooltipArrowClassName = tooltipObj.tooltipArrowClassName, tooltipBodyClassName = tooltipObj.tooltipBodyClassName, style = tooltipObj.style, _a = tooltipObj.disabled, disabled = _a === void 0 ? false : _a, offset = tooltipObj.offset, _b = tooltipObj.tooltipTheme, tooltipTheme = _b === void 0 ? 'light' : _b, _c = tooltipObj.showArrow, showArrow = _c === void 0 ? true : _c, children = tooltipObj.children;
+        var childProps = {
+            key: 'target'
+        };
+        var triggers = Array.isArray(trigger) ? trigger.concat() : [trigger];
+        if (~triggers.indexOf('click')) {
+            childProps.onClick = this.handleClick;
+        }
+        if (~triggers.indexOf('focus')) {
+            childProps.onFocus = this.handleShow;
+            childProps.onBlur = this.handleHide;
+        }
+        if (~triggers.indexOf('hover')) {
+            childProps.onMouseOver = this.handleMouseOver;
+            childProps.onMouseOut = this.handleMouseOut;
+        }
+        return [
+            child ? React__default.cloneElement(child, childProps) : null,
+            React__default.createElement(Overlay, { key: "overlay", target: this.getTarget, show: this.state.show && !disabled, onHide: this.handleHide, rootClose: rootClose, placement: placement, container: container, offset: Array.isArray(offset) ? offset : [0, 0] },
+                React__default.createElement(Tooltip, { title: typeof title === 'string' ? title : undefined, style: style, className: tooltipClassName, tooltipTheme: tooltipTheme, showArrow: showArrow, arrowClassName: tooltipArrowClassName, bodyClassName: tooltipBodyClassName, onMouseEnter: ~triggers.indexOf('hover') ? this.tooltipMouseEnter : function () { }, onMouseLeave: ~triggers.indexOf('hover') ? this.tooltipMouseLeave : function () { } }, children ? (React__default.createElement(React__default.Fragment, null, typeof children === 'function' ? children() : children)) : (React__default.createElement(Html, { html: typeof content === 'string' ? content : '' }))))
+        ];
+    };
+    TooltipWrapper.defaultProps = {
+        placement: 'top',
+        trigger: ['hover', 'focus'],
+        rootClose: false,
+        delay: 300
+    };
+    return TooltipWrapper;
+}(React__default.Component));
+var TooltipWrapper$1 = themeable(uncontrollable(TooltipWrapper, {
+    show: 'onVisibleChange'
+}));
+
+export { TooltipWrapper, TooltipWrapper$1 as default };