amis-rev-ui 6.13.0

package/esm/components/ColorPicker.js

@@ -0,0 +1,259 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __extends, __decorate, __metadata } from 'tslib';
+import React__default from 'react';
+import { Overlay, findDomCompat, PopOver, isObject, autobind, themeable, localeable, uncontrollable } from 'amis-rev-core';
+import { SketchPicker, GithubPicker } from 'react-color';
+import { Icon } from './icons.js';
+import PopUp from './PopUp.js';
+
+/**
+ * @file ColorPicker
+ * @description 颜色选择器组件
+ * @author fex
+ */
+var ColorControl = /** @class */ (function (_super) {
+    __extends(ColorControl, _super);
+    function ColorControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false,
+            isFocused: false,
+            inputValue: _this.props.value || '',
+            tempValue: _this.props.value || ''
+        };
+        _this.open = _this.open.bind(_this);
+        _this.close = _this.close.bind(_this);
+        _this.focus = _this.focus.bind(_this);
+        _this.blur = _this.blur.bind(_this);
+        _this.handleChange = _this.handleChange.bind(_this);
+        _this.handleTempChange = _this.handleTempChange.bind(_this);
+        _this.handleConfirm = _this.handleConfirm.bind(_this);
+        _this.handleFocus = _this.handleFocus.bind(_this);
+        _this.handleBlur = _this.handleBlur.bind(_this);
+        _this.clearValue = _this.clearValue.bind(_this);
+        _this.handleInputChange = _this.handleInputChange.bind(_this);
+        _this.handleClick = _this.handleClick.bind(_this);
+        _this.preview = React__default.createRef();
+        _this.input = React__default.createRef();
+        return _this;
+    }
+    ColorControl.prototype.componentDidUpdate = function (prevProps) {
+        var props = this.props;
+        if (prevProps.value !== props.value) {
+            this.setState({
+                inputValue: props.value || ''
+            });
+        }
+    };
+    ColorControl.prototype.handleFocus = function () {
+        this.setState({
+            isFocused: true
+        });
+    };
+    ColorControl.prototype.handleBlur = function () {
+        this.setState({
+            isFocused: false,
+            inputValue: this.props.value
+        });
+    };
+    ColorControl.prototype.focus = function () {
+        this.input.current && this.input.current.focus();
+    };
+    ColorControl.prototype.blur = function () {
+        this.input.current && this.input.current.blur();
+    };
+    ColorControl.prototype.open = function (fn) {
+        if (this.props.disabled) {
+            return;
+        }
+        this.setState({
+            isOpened: true
+        }, fn);
+    };
+    ColorControl.prototype.close = function () {
+        this.setState({
+            isOpened: false
+        });
+    };
+    ColorControl.prototype.clearValue = function () {
+        var _a = this.props, onChange = _a.onChange, resetValue = _a.resetValue;
+        onChange(resetValue || '');
+    };
+    ColorControl.prototype.handleClick = function () {
+        this.state.isOpened ? this.close() : this.open(this.focus);
+    };
+    ColorControl.prototype.handleInputChange = function (e) {
+        var _this = this;
+        if (!this.props.allowCustomColor) {
+            return;
+        }
+        var onChange = this.props.onChange;
+        this.setState({
+            inputValue: e.currentTarget.value
+        }, function () {
+            var isValidated = _this.validateColor(_this.state.inputValue);
+            if (isValidated) {
+                onChange(_this.state.inputValue);
+            }
+        });
+    };
+    ColorControl.prototype.validateColor = function (value) {
+        if (value === '') {
+            return false;
+        }
+        if (value === 'inherit') {
+            return false;
+        }
+        if (value === 'transparent') {
+            return false;
+        }
+        var image = document.createElement('img');
+        image.style.color = 'rgb(0, 0, 0)';
+        image.style.color = value;
+        if (image.style.color !== 'rgb(0, 0, 0)') {
+            return true;
+        }
+        image.style.color = 'rgb(255, 255, 255)';
+        image.style.color = value;
+        return image.style.color !== 'rgb(255, 255, 255)';
+    };
+    ColorControl.prototype.handleChange = function (color) {
+        var _a = this.props, onChange = _a.onChange, format = _a.format
+        // closeOnSelect
+        ;
+        if (format === 'rgba') {
+            onChange("rgba(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ", ").concat(color.rgb.a, ")"));
+        }
+        else if (format === 'rgb') {
+            onChange("rgb(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ")"));
+        }
+        else if (format === 'hexa') {
+            onChange(this.rgbaToHex(color.rgb.r, color.rgb.g, color.rgb.b, color.rgb.a));
+        }
+        else if (format === 'hsl') {
+            onChange("hsl(".concat(Math.round(color.hsl.h), ", ").concat(Math.round(color.hsl.s * 100), "%, ").concat(Math.round(color.hsl.l * 100), "%)"));
+        }
+        else {
+            onChange(color.hex);
+        }
+        // closeOnSelect && this.close();
+    };
+    ColorControl.prototype.handleTempChange = function (color) {
+        var tempValue = this.state.tempValue;
+        var format = this.props.format;
+        if (format === 'rgba') {
+            tempValue = "rgba(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ", ").concat(color.rgb.a, ")");
+        }
+        else if (format === 'rgb') {
+            tempValue = "rgb(".concat(color.rgb.r, ", ").concat(color.rgb.g, ", ").concat(color.rgb.b, ")");
+        }
+        else if (format === 'hexa') {
+            tempValue = this.rgbaToHex(color.rgb.r, color.rgb.g, color.rgb.b, color.rgb.a);
+        }
+        else if (format === 'hsl') {
+            tempValue = "hsl(".concat(Math.round(color.hsl.h), ", ").concat(Math.round(color.hsl.s * 100), "%, ").concat(Math.round(color.hsl.l * 100), "%)");
+        }
+        else {
+            tempValue = color.hex;
+        }
+        this.setState({ tempValue: tempValue });
+    };
+    ColorControl.prototype.handleConfirm = function () {
+        var onChange = this.props.onChange;
+        var tempValue = this.state.tempValue;
+        onChange(tempValue);
+        this.close();
+    };
+    /**
+     * Converts an RGBA color to an 8-digit hex color.
+     *
+     * @param r - Red component (0-255)
+     * @param g - Green component (0-255)
+     * @param b - Blue component (0-255)
+     * @param a - Alpha component (1-100)
+     * @returns The hex color string in the format #RRGGBBAA
+     */
+    ColorControl.prototype.rgbaToHex = function (r, g, b, a) {
+        if (r < 0 || r > 255 || g < 0 || g > 255 || b < 0 || b > 255) {
+            return "#00000000";
+        }
+        if (typeof a === 'undefined' || a > 1) {
+            a = 1;
+        }
+        if (a < 0.01) {
+            a = 0;
+        }
+        var toHex = function (n) { return n.toString(16).padStart(2, '0').toUpperCase(); };
+        var alphaHex = toHex(Math.round(a * 255));
+        var redHex = toHex(r);
+        var greenHex = toHex(g);
+        var blueHex = toHex(b);
+        return "#".concat(redHex).concat(greenHex).concat(blueHex).concat(alphaHex);
+    };
+    ColorControl.prototype.render = function () {
+        var _this = this;
+        var _a = this.props, ns = _a.classPrefix, className = _a.className, popoverClassName = _a.popoverClassName, value = _a.value, placeholder = _a.placeholder, disabled = _a.disabled, popOverContainer = _a.popOverContainer, popOverContainerSelector = _a.popOverContainerSelector, format = _a.format, clearable = _a.clearable, placement = _a.placement, cx = _a.classnames, presetColors = _a.presetColors, allowCustomColor = _a.allowCustomColor, mobileUI = _a.mobileUI;
+        var __ = this.props.translate;
+        var isOpened = this.state.isOpened;
+        var isFocused = this.state.isFocused;
+        var tempValue = this.state.tempValue;
+        return (React__default.createElement("div", { className: cx("ColorPicker", {
+                'is-disabled': disabled,
+                'is-focused': isFocused,
+                'is-opened': isOpened
+            }, className) },
+            React__default.createElement("span", { onClick: this.handleClick, className: cx('ColorPicker-preview') },
+                React__default.createElement("i", { ref: this.preview, className: "".concat(ns, "ColorPicker-previewIcon"), style: { background: this.state.inputValue || '#ccc' } })),
+            React__default.createElement("input", { ref: this.input, type: "text", autoComplete: "off", size: 10, className: cx('ColorPicker-input'), value: this.state.inputValue || '', placeholder: __(placeholder), disabled: disabled, onChange: this.handleInputChange, onFocus: this.handleFocus, onBlur: this.handleBlur, onClick: this.handleClick, readOnly: mobileUI }),
+            clearable && !disabled && value ? (React__default.createElement("a", { onClick: this.clearValue, className: cx('ColorPicker-clear') },
+                React__default.createElement(Icon, { icon: "input-clear", className: "icon" }))) : null,
+            React__default.createElement("span", { className: cx('ColorPicker-arrow') },
+                React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon", onClick: this.handleClick })),
+            !mobileUI && isOpened ? (React__default.createElement(Overlay, { placement: placement || 'auto', target: function () { return findDomCompat(_this); }, onHide: this.close, container: popOverContainer || (function () { return findDomCompat(_this); }), containerSelector: popOverContainerSelector, rootClose: false, show: true },
+                React__default.createElement(PopOver, { classPrefix: ns, className: cx('ColorPicker-popover', popoverClassName), onHide: this.close, overlay: true }, allowCustomColor ? (React__default.createElement(SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (React__default.createElement(GithubPicker, { color: value, colors: Array.isArray(presetColors)
+                        ? presetColors
+                            .filter(function (item) { return typeof item === 'string' || isObject(item); })
+                            .map(function (item) {
+                            return typeof item === 'string'
+                                ? item
+                                : isObject(item)
+                                    ? item === null || item === void 0 ? void 0 : item.color
+                                    : item;
+                        })
+                        : undefined, onChangeComplete: this.handleChange }))))) : null,
+            mobileUI && (React__default.createElement(PopUp, { className: cx("".concat(ns, "ColorPicker-popup")), container: popOverContainer, isShow: isOpened, onHide: this.handleClick, showConfirm: true, onConfirm: this.handleConfirm }, allowCustomColor ? (React__default.createElement(SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: tempValue, presetColors: presetColors, onChangeComplete: this.handleTempChange })) : (React__default.createElement(GithubPicker, { color: tempValue, colors: Array.isArray(presetColors)
+                    ? presetColors
+                        .filter(function (item) { return typeof item === 'string' || isObject(item); })
+                        .map(function (item) {
+                        return typeof item === 'string'
+                            ? item
+                            : isObject(item)
+                                ? item === null || item === void 0 ? void 0 : item.color
+                                : item;
+                    })
+                    : undefined, onChangeComplete: this.handleTempChange }))))));
+    };
+    ColorControl.defaultProps = {
+        format: 'hex',
+        clearable: true,
+        placeholder: 'ColorPicker.placeholder',
+        allowCustomColor: true
+        // closeOnSelect: true
+    };
+    __decorate([
+        autobind,
+        __metadata("design:type", Function),
+        __metadata("design:paramtypes", [String]),
+        __metadata("design:returntype", void 0)
+    ], ColorControl.prototype, "validateColor", null);
+    return ColorControl;
+}(React__default.PureComponent));
+var ColorPicker = themeable(localeable(uncontrollable(ColorControl, {
+    value: 'onChange'
+})));
+
+export { ColorControl, ColorPicker as default };

package/esm/components/Combo.js

@@ -0,0 +1,212 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __assign, __awaiter, __generator, __values } from 'tslib';
+import { themeable, localeable } from 'amis-rev-core';
+import React__default from 'react';
+import { useFieldArray, useFormContext, useFormState } from 'react-hook-form';
+import useSubForm from '../hooks/use-sub-form.js';
+import Button from './Button.js';
+import ThemedFormField from './FormField.js';
+import { Icon } from './icons.js';
+
+/**
+ * 纯组件版本的 combo 实现
+ *
+ * 只能用在 <Form> 里面。
+ *
+ * 示例:
+ *
+ * <Form
+ *   defaultValues={{a: 1, b: 2, arr: [{a: 1, b: 2}]}}
+ *   onSubmit={values => console.log(values)}
+ * >
+ *   {({control, getValues, setValue, handleSubmit}) => (
+ *     <>
+ *       <Combo
+ *         name="arr"
+ *         control={control}
+ *         label="Combo"
+ *         mode="horizontal"
+ *         itemRender={({
+ *           control,
+ *           getValues,
+ *           setValue,
+ *           handleSubmit
+ *         }) => (
+ *           <>
+ *             <Controller
+ *               name="a"
+ *               label="A"
+ *               mode="horizontal"
+ *               horizontal={{justify: true}}
+ *               control={control}
+ *               rules={{maxLength: 20}}
+ *               render={({field, fieldState}) => (
+ *                 <InputBox
+ *                   {...field}
+ *                   hasError={fieldState.error}
+ *                   disabled={false}
+ *                 />
+ *               )}
+ *             />
+ *
+ *             <Controller
+ *               name="b"
+ *               control={control}
+ *               rules={{maxLength: 20}}
+ *               render={({field, fieldState}) => (
+ *                 <InputBox
+ *                   {...field}
+ *                   hasError={fieldState.error}
+ *                   disabled={false}
+ *                 />
+ *               )}
+ *             />
+ *           </>
+ *         )}
+ *       />
+ *     </>
+ *   )}
+ * </Form>
+ */
+function Combo(_a) {
+    var _this = this;
+    var _b, _c;
+    var control = _a.control, name = _a.name, wrap = _a.wrap, mode = _a.mode, label = _a.label, labelAlign = _a.labelAlign, labelClassName = _a.labelClassName, description = _a.description, fieldClassName = _a.fieldClassName, className = _a.className, style = _a.style, multiLine = _a.multiLine, itemsWrapperClassName = _a.itemsWrapperClassName, itemClassName = _a.itemClassName, addButtonClassName = _a.addButtonClassName, addButtonLevel = _a.addButtonLevel, addButtonSize = _a.addButtonSize, itemRender = _a.itemRender, __ = _a.translate, cx = _a.classnames, addable = _a.addable, scaffold = _a.scaffold, addButtonText = _a.addButtonText, removable = _a.removable, rules = _a.rules, isRequired = _a.isRequired, minLength = _a.minLength, maxLength = _a.maxLength;
+    var subForms = React__default.useRef({});
+    var subFormRef = React__default.useCallback(function (subform, index) {
+        if (subform) {
+            subForms.current[index] = subform;
+        }
+        else {
+            delete subForms.current[index];
+        }
+    }, [subForms]);
+    var finalRules = __assign({}, rules);
+    if (isRequired) {
+        finalRules.required = true;
+    }
+    if (minLength) {
+        finalRules.minLength = minLength;
+    }
+    if (maxLength) {
+        finalRules.maxLength = maxLength;
+    }
+    finalRules.validate = React__default.useCallback(function (items) { return __awaiter(_this, void 0, void 0, function () {
+        var map, result, _a, _b, key, valid, e_1_1;
+        var e_1, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    map = subForms.current;
+                    if (!(typeof (rules === null || rules === void 0 ? void 0 : rules.validate) === 'function')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, rules.validate(items)];
+                case 1:
+                    result = _d.sent();
+                    if (result) {
+                        return [2 /*return*/, result];
+                    }
+                    _d.label = 2;
+                case 2:
+                    _d.trys.push([2, 7, 8, 9]);
+                    _a = __values(Object.keys(map)), _b = _a.next();
+                    _d.label = 3;
+                case 3:
+                    if (!!_b.done) return [3 /*break*/, 6];
+                    key = _b.value;
+                    return [4 /*yield*/, (function (methods) {
+                            return new Promise(function (resolve) {
+                                methods.handleSubmit(function () { return resolve(true); }, function () { return resolve(false); })();
+                            });
+                        })(map[key])];
+                case 4:
+                    valid = _d.sent();
+                    if (!valid) {
+                        return [2 /*return*/, __('validateFailed')];
+                    }
+                    _d.label = 5;
+                case 5:
+                    _b = _a.next();
+                    return [3 /*break*/, 3];
+                case 6: return [3 /*break*/, 9];
+                case 7:
+                    e_1_1 = _d.sent();
+                    e_1 = { error: e_1_1 };
+                    return [3 /*break*/, 9];
+                case 8:
+                    try {
+                        if (_b && !_b.done && (_c = _a.return)) _c.call(_a);
+                    }
+                    finally { if (e_1) throw e_1.error; }
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); }, [subForms]);
+    var _d = useFieldArray({
+        control: control,
+        name: name,
+        shouldUnregister: true,
+        rules: finalRules
+    }), fields = _d.fields, append = _d.append; _d.update; var remove = _d.remove;
+    var _e = useFormContext(); _e.trigger; var setValue = _e.setValue;
+    // useFieldArray 的 update 会更新行 id，导致重新渲染
+    // 正在编辑中的元素失去焦点，所以自己写一个
+    var lightUpdate = React__default.useCallback(function (index, value) {
+        // const arr = control._getFieldArray(name);
+        // arr[index] = {...value};
+        // control._updateFieldArray(name, arr);
+        // trigger(name);
+        // control._subjects.watch.next({});
+        setValue("".concat(name, ".").concat(index), value);
+    }, [control]);
+    function renderBody() {
+        var _a;
+        return (React__default.createElement("div", { className: cx("Combo Combo--multi", className, multiLine ? "Combo--ver" : "Combo--hor") },
+            React__default.createElement("div", { className: cx("Combo-items", itemsWrapperClassName) }, fields.map(function (field, index) { return (React__default.createElement("div", { key: field.id, className: cx("Combo-item", itemClassName) },
+                React__default.createElement(ComboItem, { control: control, update: lightUpdate, index: index, value: field, itemRender: itemRender, translate: __, classnames: cx, formRef: subFormRef }),
+                React__default.createElement("a", { onClick: function () { return remove(index); }, key: "delete", className: cx("Combo-delBtn ".concat(removable === false ||
+                        (minLength && fields.length <= minLength)
+                        ? 'is-disabled'
+                        : '')), "data-tooltip": __('delete'), "data-position": "bottom" },
+                    React__default.createElement(Icon, { icon: "status-close", className: "icon" })))); })),
+            addable !== false && (!maxLength || fields.length < maxLength) ? (React__default.createElement("div", { className: cx("Combo-toolbar") },
+                React__default.createElement(Button, { className: cx("Combo-addBtn", addButtonClassName), level: addButtonLevel !== null && addButtonLevel !== void 0 ? addButtonLevel : 'primary', onClick: function () { return append(__assign({}, scaffold)); }, size: (_a = addButtonSize) !== null && _a !== void 0 ? _a : 'sm' },
+                    React__default.createElement(Icon, { icon: "plus", className: "icon" }),
+                    React__default.createElement("span", null, __(addButtonText || 'add'))))) : null));
+    }
+    var errors = useFormState({
+        control: control
+    }).errors;
+    return wrap === false ? (renderBody()) : (React__default.createElement(ThemedFormField, { className: fieldClassName, style: style, label: label, labelAlign: labelAlign, labelClassName: labelClassName, description: description, mode: mode, isRequired: isRequired, hasError: !!((_b = errors[name]) === null || _b === void 0 ? void 0 : _b.message), errors: (_c = errors[name]) === null || _c === void 0 ? void 0 : _c.message }, renderBody()));
+}
+function ComboItem(_a) {
+    var value = _a.value, itemRender = _a.itemRender, index = _a.index, translate = _a.translate, update = _a.update, cx = _a.classnames, formRef = _a.formRef;
+    var indexRef = React__default.useRef(index);
+    React__default.useEffect(function () {
+        indexRef.current = index;
+    }, [index]);
+    var methods = useSubForm(value, translate, function (data) {
+        return update(indexRef.current, data);
+    });
+    React__default.useEffect(function () {
+        formRef === null || formRef === void 0 ? void 0 : formRef(methods, index);
+        return function () {
+            formRef === null || formRef === void 0 ? void 0 : formRef(null, index);
+        };
+    }, [methods]);
+    var child = itemRender(methods, index);
+    if ((child === null || child === void 0 ? void 0 : child.type) === React__default.Fragment) {
+        child = child.props.children;
+    }
+    if (Array.isArray(child)) {
+        child = (React__default.createElement("div", { className: cx('Form-row') }, child.map(function (child, index) { return (React__default.createElement("div", { className: cx('Form-col', child === null || child === void 0 ? void 0 : child.props.columnClassName), key: child.key || index }, child)); })));
+    }
+    return React__default.createElement("div", { className: cx('Combo-itemInner') }, child);
+}
+var Combo$1 = themeable(localeable(Combo));
+
+export { Combo, ComboItem, Combo$1 as default };

package/esm/components/ConditionBuilder.d.ts

@@ -0,0 +1,2 @@
+import ConditionBuilder from './condition-builder/index';
+export default ConditionBuilder;

package/esm/components/ConditionBuilder.js

@@ -0,0 +1,7 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import ConditionBuilder from './condition-builder/index.js';
+export { default } from './condition-builder/index.js';

package/esm/components/ConfirmBox.js

@@ -0,0 +1,128 @@
+/**
+ * amis-rev-ui v6.13.0
+ * Copyright 2018-2026 fex
+ */
+
+import { __read, __awaiter, __generator } from 'tslib';
+import React__default from 'react';
+import FinalModal from './Modal.js';
+import Button from './Button.js';
+import Drawer from './Drawer.js';
+import { localeable, themeable, findDomCompat } from 'amis-rev-core';
+import Spinner from './Spinner.js';
+import PopUp from './PopUp.js';
+
+function ConfirmBox(_a) {
+    var _this = this;
+    var type = _a.type, size = _a.size, closeOnEsc = _a.closeOnEsc, show = _a.show, onCancel = _a.onCancel, title = _a.title, showTitle = _a.showTitle, headerClassName = _a.headerClassName, __ = _a.translate, children = _a.children, showFooter = _a.showFooter, onConfirm = _a.onConfirm, beforeConfirm = _a.beforeConfirm, popOverContainer = _a.popOverContainer, position = _a.position, resizable = _a.resizable, cx = _a.classnames, className = _a.className, bodyClassName = _a.bodyClassName, footerClassName = _a.footerClassName, mobileUI = _a.mobileUI, disabled = _a.disabled, testIdBuilder = _a.testIdBuilder, onEntered = _a.onEntered, onExited = _a.onExited;
+    var _b = __read(React__default.useState(), 2), loading = _b[0], setLoading = _b[1];
+    var _c = __read(React__default.useState(), 2), error = _c[0], setError = _c[1];
+    var bodyRef = React__default.useRef();
+    var bodyDomRef = React__default.useRef();
+    var getPopOverContainer = React__default.useCallback(function () {
+        var dom = bodyDomRef.current && !bodyDomRef.current.nodeType
+            ? findDomCompat(bodyDomRef.current)
+            : null;
+        return dom === null || dom === void 0 ? void 0 : dom.parentElement;
+    }, []);
+    var handleConfirm = React__default.useCallback(function () { return __awaiter(_this, void 0, void 0, function () {
+        var ret, _a, e_1;
+        var _b, _c;
+        return __generator(this, function (_d) {
+            switch (_d.label) {
+                case 0:
+                    setError('');
+                    setLoading(true);
+                    _d.label = 1;
+                case 1:
+                    _d.trys.push([1, 7, 8, 9]);
+                    if (!beforeConfirm) return [3 /*break*/, 3];
+                    return [4 /*yield*/, (beforeConfirm === null || beforeConfirm === void 0 ? void 0 : beforeConfirm(bodyRef.current))];
+                case 2:
+                    _a = _d.sent();
+                    return [3 /*break*/, 5];
+                case 3: return [4 /*yield*/, ((_c = (_b = bodyRef.current) === null || _b === void 0 ? void 0 : _b.submit) === null || _c === void 0 ? void 0 : _c.call(_b))];
+                case 4:
+                    _a = _d.sent();
+                    _d.label = 5;
+                case 5:
+                    ret = _a;
+                    if (ret === false) {
+                        return [2 /*return*/];
+                    }
+                    else if (typeof ret === 'string') {
+                        setError(ret);
+                        return [2 /*return*/];
+                    }
+                    return [4 /*yield*/, (onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(ret))];
+                case 6:
+                    _d.sent();
+                    return [3 /*break*/, 9];
+                case 7:
+                    e_1 = _d.sent();
+                    setError(e_1.message);
+                    return [3 /*break*/, 9];
+                case 8:
+                    setLoading(false);
+                    setTimeout(function () { return setError(''); }, 5000);
+                    return [7 /*endfinally*/];
+                case 9: return [2 /*return*/];
+            }
+        });
+    }); }, [onConfirm, beforeConfirm]);
+    React__default.useEffect(function () {
+        show && setError('');
+    }, [show]);
+    function renderDialog() {
+        return mobileUI ? (React__default.createElement(PopUp, { isShow: show, showConfirm: true, onConfirm: handleConfirm, onHide: onCancel, container: popOverContainer, onEntered: onEntered, onExited: onExited }, typeof children === 'function'
+            ? children({
+                bodyRef: bodyRef,
+                loading: loading,
+                popOverContainer: getPopOverContainer,
+                onConfirm: handleConfirm
+            })
+            : children)) : (React__default.createElement(FinalModal, { size: size, closeOnEsc: closeOnEsc, show: show, onHide: onCancel, container: popOverContainer, className: className, onEntered: onEntered, onExited: onExited },
+            showTitle !== false && title ? (React__default.createElement(FinalModal.Header, { onClose: onCancel, className: headerClassName }, title)) : null,
+            React__default.createElement(FinalModal.Body, { ref: bodyDomRef, className: bodyClassName }, typeof children === 'function'
+                ? children({
+                    bodyRef: bodyRef,
+                    loading: loading,
+                    onConfirm: handleConfirm,
+                    popOverContainer: getPopOverContainer
+                })
+                : children),
+            (showFooter !== null && showFooter !== void 0 ? showFooter : true) ? (React__default.createElement(FinalModal.Footer, { className: footerClassName },
+                loading || error ? (React__default.createElement("div", { className: cx('Dialog-info') },
+                    React__default.createElement(Spinner, { size: "sm", key: "info", show: loading }),
+                    error ? (React__default.createElement("span", { className: cx('Dialog-error') }, error)) : null)) : null,
+                React__default.createElement(Button, { disabled: loading, onClick: onCancel, testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('cancel') }, __('cancel')),
+                React__default.createElement(Button, { disabled: loading || disabled, onClick: handleConfirm, level: "primary", testIdBuilder: testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('confirm') }, __('confirm')))) : null));
+    }
+    function renderDrawer() {
+        return (React__default.createElement(Drawer, { size: size, closeOnEsc: closeOnEsc, show: show, onHide: onCancel, container: popOverContainer, position: position, resizable: resizable, showCloseButton: false, className: className },
+            showTitle !== false && title ? (React__default.createElement("div", { className: cx('Drawer-header', headerClassName) },
+                React__default.createElement("div", { className: cx('Drawer-title') }, title))) : null,
+            React__default.createElement("div", { ref: bodyDomRef, className: cx('Drawer-body', bodyClassName) }, typeof children === 'function'
+                ? children({
+                    bodyRef: bodyRef,
+                    loading: loading,
+                    popOverContainer: getPopOverContainer,
+                    onConfirm: handleConfirm
+                })
+                : children),
+            (showFooter !== null && showFooter !== void 0 ? showFooter : true) ? (React__default.createElement("div", { className: cx('Drawer-footer', footerClassName) },
+                loading || error ? (React__default.createElement("div", { className: cx('Drawer-info') },
+                    React__default.createElement(Spinner, { size: "sm", key: "info", show: loading }),
+                    error ? (React__default.createElement("span", { className: cx('Drawer-error') }, error)) : null)) : null,
+                React__default.createElement(Button, { onClick: handleConfirm, level: "primary" }, __('confirm')),
+                React__default.createElement(Button, { onClick: onCancel }, __('cancel')))) : null));
+    }
+    return type === 'drawer' ? renderDrawer() : renderDialog();
+}
+ConfirmBox.defaultProps = {
+    type: 'dialog',
+    position: 'right'
+};
+var ConfirmBox$1 = localeable(themeable(ConfirmBox));
+
+export { ConfirmBox, ConfirmBox$1 as default };