amis-ui 2.0.2 → 2.2.0

package/lib/components/CodeMirror.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.2
+ * amis-ui v2.2.0
  * Copyright 2018-2022 fex
  */
 

package/lib/components/Collapse.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.2
+ * amis-ui v2.2.0
  * Copyright 2018-2022 fex
  */
 

package/lib/components/CollapseGroup.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.2
+ * amis-ui v2.2.0
  * Copyright 2018-2022 fex
  */
 

package/lib/components/ColorPicker.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.2
+ * amis-ui v2.2.0
  * Copyright 2018-2022 fex
  */
 
@@ -7,9 +7,205 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var ColorPicker = require('./ColorPicker2.js');
+var tslib = require('tslib');
+var React = require('react');
+var reactDom = require('react-dom');
+var reactColor = require('react-color');
+var icons = require('./icons.js');
+var amisCore = require('amis-core');
+var PopUp = require('./PopUp.js');
 
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-exports.ColorControl = ColorPicker.ColorControl;
-exports["default"] = ColorPicker["default"];
+/**
+ * @file ColorPicker
+ * @description 颜色选择器组件
+ * @author fex
+ */
+var ColorControl = /** @class */ (function (_super) {
+    tslib.__extends(ColorControl, _super);
+    function ColorControl(props) {
+        var _this = _super.call(this, props) || this;
+        _this.state = {
+            isOpened: false,
+            isFocused: false,
+            inputValue: _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.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["default"].createRef();
+        _this.input = React__default["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 === '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.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 mobileUI = useMobileUI && amisCore.isMobile();
+        return (React__default["default"].createElement("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)
+                        ? presetColors
+                            .filter(function (item) { return typeof item === 'string' || amisCore.isObject(item); })
+                            .map(function (item) {
+                            return typeof item === 'string'
+                                ? item
+                                : amisCore.isObject(item)
+                                    ? item === null || item === void 0 ? void 0 : item.color
+                                    : 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)
+                    ? presetColors
+                        .filter(function (item) { return typeof item === 'string' || amisCore.isObject(item); })
+                        .map(function (item) {
+                        return typeof item === 'string'
+                            ? item
+                            : amisCore.isObject(item)
+                                ? item === null || item === void 0 ? void 0 : item.color
+                                : item;
+                    })
+                    : undefined, onChangeComplete: this.handleChange }))))));
+    };
+    ColorControl.defaultProps = {
+        format: 'hex',
+        clearable: true,
+        placeholder: 'ColorPicker.placeholder',
+        allowCustomColor: true
+        // closeOnSelect: true
+    };
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], ColorControl.prototype, "validateColor", null);
+    return ColorControl;
+}(React__default["default"].PureComponent));
+var ColorPicker = amisCore.themeable(amisCore.localeable(amisCore.uncontrollable(ColorControl, {
+    value: 'onChange'
+})));
+
+exports.ColorControl = ColorControl;
+exports["default"] = ColorPicker;

package/lib/components/ContextMenu.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.0.2
+ * amis-ui v2.2.0
  * Copyright 2018-2022 fex
  */