amis-ui 3.1.1 → 3.3.0

package/lib/components/ColorPicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -19,11 +19,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * @file ColorPicker
- * @description 颜色选择器组件
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var ColorControl = /** @class */ (function (_super) {
     tslib.__extends(ColorControl, _super);
     function ColorControl(props) {
@@ -31,13 +29,16 @@ var ColorControl = /** @class */ (function (_super) {
         _this.state = {
             isOpened: false,
             isFocused: false,
-            inputValue: _this.props.value || ''
+            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);
@@ -145,27 +146,51 @@ var ColorControl = /** @class */ (function (_super) {
         }
         // 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 === '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();
+    };
     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, format = _a.format, clearable = _a.clearable, placement = _a.placement, cx = _a.classnames, presetColors = _a.presetColors, allowCustomColor = _a.allowCustomColor, useMobileUI = _a.useMobileUI;
         var __ = this.props.translate;
         var isOpened = this.state.isOpened;
         var isFocused = this.state.isFocused;
+        var tempValue = this.state.tempValue;
         var mobileUI = useMobileUI && amisCore.isMobile();
-        return (React__default["default"].createElement("div", { className: cx("ColorPicker", {
+        return (_J$X_("div", { className: cx("ColorPicker", {
                 'is-disabled': disabled,
                 'is-focused': isFocused,
                 'is-opened': isOpened
             }, className) },
-            React__default["default"].createElement("span", { onClick: this.handleClick, className: cx('ColorPicker-preview') },
-                React__default["default"].createElement("i", { ref: this.preview, className: "".concat(ns, "ColorPicker-previewIcon"), style: { background: this.state.inputValue || '#ccc' } })),
-            React__default["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["default"].createElement("a", { onClick: this.clearValue, className: cx('ColorPicker-clear') },
-                React__default["default"].createElement(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
-            React__default["default"].createElement("span", { className: cx('ColorPicker-arrow') },
-                React__default["default"].createElement(icons.Icon, { icon: "caret", className: "icon", onClick: this.handleClick })),
-            !mobileUI && isOpened ? (React__default["default"].createElement(amisCore.Overlay, { placement: placement || 'auto', target: function () { return ReactDOM.findDOMNode(_this); }, onHide: this.close, container: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), rootClose: false, show: true },
-                React__default["default"].createElement(amisCore.PopOver, { classPrefix: ns, className: cx('ColorPicker-popover', popoverClassName), onHide: this.close, overlay: true }, allowCustomColor ? (React__default["default"].createElement(reactColor.SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (React__default["default"].createElement(reactColor.GithubPicker, { color: value, colors: Array.isArray(presetColors)
+            _J$X_("span", { onClick: this.handleClick, className: cx('ColorPicker-preview') },
+                _J$X_("i", { ref: this.preview, className: "".concat(ns, "ColorPicker-previewIcon"), style: { background: this.state.inputValue || '#ccc' } })),
+            _J$X_("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 ? (_J$X_("a", { onClick: this.clearValue, className: cx('ColorPicker-clear') },
+                _J$X_(icons.Icon, { icon: "input-clear", className: "icon" }))) : null,
+            _J$X_("span", { className: cx('ColorPicker-arrow') },
+                _J$X_(icons.Icon, { icon: "right-arrow-bold", className: "icon", onClick: this.handleClick })),
+            !mobileUI && isOpened ? (_J$X_(amisCore.Overlay, { placement: placement || 'auto', target: function () { return ReactDOM.findDOMNode(_this); }, onHide: this.close, container: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), rootClose: false, show: true },
+                _J$X_(amisCore.PopOver, { classPrefix: ns, className: cx('ColorPicker-popover', popoverClassName), onHide: this.close, overlay: true }, allowCustomColor ? (_J$X_(reactColor.SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (_J$X_(reactColor.GithubPicker, { color: value, colors: Array.isArray(presetColors)
                         ? presetColors
                             .filter(function (item) { return typeof item === 'string' || amisCore.isObject(item); })
                             .map(function (item) {
@@ -176,7 +201,7 @@ var ColorControl = /** @class */ (function (_super) {
                                     : item;
                         })
                         : undefined, onChangeComplete: this.handleChange }))))) : null,
-            mobileUI && (React__default["default"].createElement(PopUp["default"], { className: cx("".concat(ns, "ColorPicker-popup")), container: popOverContainer, isShow: isOpened, onHide: this.handleClick }, allowCustomColor ? (React__default["default"].createElement(reactColor.SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: value, presetColors: presetColors, onChangeComplete: this.handleChange })) : (React__default["default"].createElement(reactColor.GithubPicker, { color: value, colors: Array.isArray(presetColors)
+            mobileUI && (_J$X_(PopUp["default"], { className: cx("".concat(ns, "ColorPicker-popup")), container: popOverContainer, isShow: isOpened, onHide: this.handleClick, showConfirm: true, onConfirm: this.handleConfirm }, allowCustomColor ? (_J$X_(reactColor.SketchPicker, { styles: {}, disableAlpha: !!~['rgb', 'hex'].indexOf(format), color: tempValue, presetColors: presetColors, onChangeComplete: this.handleTempChange })) : (_J$X_(reactColor.GithubPicker, { color: tempValue, colors: Array.isArray(presetColors)
                     ? presetColors
                         .filter(function (item) { return typeof item === 'string' || amisCore.isObject(item); })
                         .map(function (item) {
@@ -186,7 +211,7 @@ var ColorControl = /** @class */ (function (_super) {
                                 ? item === null || item === void 0 ? void 0 : item.color
                                 : item;
                     })
-                    : undefined, onChangeComplete: this.handleChange }))))));
+                    : undefined, onChangeComplete: this.handleTempChange }))))));
     };
     ColorControl.defaultProps = {
         format: 'hex',

package/lib/components/Combo.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -20,66 +20,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-/**
- * 纯组件版本的 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>
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 function Combo(_a) {
     var _this = this;
     var _b, _c;
@@ -171,23 +114,23 @@ function Combo(_a) {
         control._subjects.watch.next({});
     }, [control]);
     function renderBody() {
-        return (React__default["default"].createElement("div", { className: cx("Combo Combo--multi", className, multiLine ? "Combo--ver" : "Combo--hor") },
-            React__default["default"].createElement("div", { className: cx("Combo-items", itemsWrapperClassName) }, fields.map(function (field, index) { return (React__default["default"].createElement("div", { key: field.id, className: cx("Combo-item", itemClassName) },
-                React__default["default"].createElement(ComboItem, { control: control, update: lightUpdate, index: index, value: field, itemRender: itemRender, translate: __, classnames: cx, formRef: subFormRef }),
-                React__default["default"].createElement("a", { onClick: function () { return remove(index); }, key: "delete", className: cx("Combo-delBtn ".concat(removable === false ||
+        return (_J$X_("div", { className: cx("Combo Combo--multi", className, multiLine ? "Combo--ver" : "Combo--hor") },
+            _J$X_("div", { className: cx("Combo-items", itemsWrapperClassName) }, fields.map(function (field, index) { return (_J$X_("div", { key: field.id, className: cx("Combo-item", itemClassName) },
+                _J$X_(ComboItem, { control: control, update: lightUpdate, index: index, value: field, itemRender: itemRender, translate: __, classnames: cx, formRef: subFormRef }),
+                _J$X_("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["default"].createElement(icons.Icon, { icon: "status-close", className: "icon" })))); })),
-            addable !== false && (!maxLength || fields.length < maxLength) ? (React__default["default"].createElement("div", { className: cx("Combo-toolbar") },
-                React__default["default"].createElement(Button["default"], { className: cx("Combo-addBtn", addButtonClassName), onClick: function () { return append(tslib.__assign({}, scaffold)); } },
-                    React__default["default"].createElement(icons.Icon, { icon: "plus", className: "icon" }),
-                    React__default["default"].createElement("span", null, __(addButtonText || 'add'))))) : null));
+                    _J$X_(icons.Icon, { icon: "status-close", className: "icon" })))); })),
+            addable !== false && (!maxLength || fields.length < maxLength) ? (_J$X_("div", { className: cx("Combo-toolbar") },
+                _J$X_(Button["default"], { className: cx("Combo-addBtn", addButtonClassName), onClick: function () { return append(tslib.__assign({}, scaffold)); } },
+                    _J$X_(icons.Icon, { icon: "plus", className: "icon" }),
+                    _J$X_("span", null, __(addButtonText || 'add'))))) : null));
     }
     var errors = reactHookForm.useFormState({
         control: control
     }).errors;
-    return wrap === false ? (renderBody()) : (React__default["default"].createElement(FormField["default"], { 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()));
+    return wrap === false ? (renderBody()) : (_J$X_(FormField["default"], { 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;
@@ -209,9 +152,9 @@ function ComboItem(_a) {
         child = child.props.children;
     }
     if (Array.isArray(child)) {
-        child = (React__default["default"].createElement("div", { className: cx('Form-row') }, child.map(function (child, index) { return (React__default["default"].createElement("div", { className: cx('Form-col'), key: child.key || index }, child)); })));
+        child = (_J$X_("div", { className: cx('Form-row') }, child.map(function (child, index) { return (_J$X_("div", { className: cx('Form-col'), key: child.key || index }, child)); })));
     }
-    return React__default["default"].createElement("div", { className: cx('Combo-itemInner') }, child);
+    return _J$X_("div", { className: cx('Combo-itemInner') }, child);
 }
 var Combo$1 = amisCore.themeable(amisCore.localeable(Combo));