@chaoswise/ui 2.3.13 → 2.3.14

package/config/theme/default.less

@@ -23,7 +23,7 @@
 @btn-warn-new: @red-6;
 @btn-warn-hover-new: @red-5;
 @btn-warn-focus-new: @red-7;
-@btn-disabled-primary-color: #97CDFF; // 主要按钮禁用背景色
+@btn-disabled-primary-color: @primary-1; // #97CDFF; // 主要按钮禁用背景色
 @btn-disabled-group-primary-color: rgba(255, 255, 255, 0.45); // 主要按钮中组合按钮禁用状态下分割线色
 
 // Tag
@@ -139,4 +139,6 @@
 // 配合portal定制主题 -- develop分支需要
 @portal-header-search-border-color: #d8d8d8;
 @portal-header-search-bg: #173066;
-@portal-header-logo:#fff;
+@portal-header-logo:#fff;
+
+@form-back-font: #FFFFFF;

package/lib/Ace/ace.js

@@ -11,11 +11,11 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-import PropTypes from "prop-types";
-import React from "react";
-import { isEqual } from "lodash-es";
+import PropTypes from 'prop-types';
+import React from 'react';
+import { isEqual } from 'lodash-es';
 import { Range } from '@chaoswise/ace';
-import { getAceInstance, editorEvents, debounce, editorOptions } from "./editorOptions";
+import { getAceInstance, editorEvents, debounce, editorOptions } from './editorOptions';
 var ace = getAceInstance();
 var ReactAce = /*#__PURE__*/function (_React$Component) {
   _inherits(ReactAce, _React$Component);
@@ -35,7 +35,7 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
     value: function isInShadow(node) {
       var parent = node && node.parentNode;
       while (parent) {
-        if (parent.toString() === "[object ShadowRoot]") {
+        if (parent.toString() === '[object ShadowRoot]') {
           return true;
         }
         parent = parent.parentNode;
@@ -82,36 +82,36 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
       if (this.isInShadow(this.refEditor)) {
         this.editor.renderer.attachToShadowRoot();
       }
-      this.editor.getSession().setMode("ace/mode/".concat(mode));
-      this.editor.setTheme("ace/theme/".concat(theme));
-      this.editor.setFontSize(typeof fontSize === "number" ? "".concat(fontSize, "px") : fontSize);
-      this.editor.getSession().setValue(!defaultValue ? value || "" : defaultValue);
+      this.editor.getSession().setMode(typeof mode === 'string' ? "ace/mode/".concat(mode) : mode);
+      if (theme && theme !== '') this.editor.setTheme("ace/theme/".concat(theme));
+      this.editor.setFontSize(typeof fontSize === 'number' ? "".concat(fontSize, "px") : fontSize);
+      this.editor.getSession().setValue(!defaultValue ? value || '' : defaultValue);
       if (this.props.navigateToFileEnd) {
         this.editor.navigateFileEnd();
       }
       this.editor.renderer.setShowGutter(showGutter);
       this.editor.getSession().setUseWrapMode(wrapEnabled);
       this.editor.setShowPrintMargin(showPrintMargin);
-      this.editor.on("focus", this.onFocus);
-      this.editor.on("blur", this.onBlur);
-      this.editor.on("copy", this.onCopy);
-      this.editor.on("paste", this.onPaste);
-      this.editor.on("change", this.onChange);
-      this.editor.on("input", this.onInput);
+      this.editor.on('focus', this.onFocus);
+      this.editor.on('blur', this.onBlur);
+      this.editor.on('copy', this.onCopy);
+      this.editor.on('paste', this.onPaste);
+      this.editor.on('change', this.onChange);
+      this.editor.on('input', this.onInput);
       if (placeholder) {
         this.updatePlaceholder();
       }
-      this.editor.getSession().selection.on("changeSelection", this.onSelectionChange);
-      this.editor.getSession().selection.on("changeCursor", this.onCursorChange);
+      this.editor.getSession().selection.on('changeSelection', this.onSelectionChange);
+      this.editor.getSession().selection.on('changeCursor', this.onCursorChange);
       if (onValidate) {
         // @ts-ignore types don't include
-        this.editor.getSession().on("changeAnnotation", function () {
+        this.editor.getSession().on('changeAnnotation', function () {
           // tslint:disable-next-line:no-shadowed-variable
           var annotations = _this2.editor.getSession().getAnnotations();
           _this2.props.onValidate(annotations);
         });
       }
-      this.editor.session.on("changeScrollTop", this.onScroll);
+      this.editor.session.on('changeScrollTop', this.onScroll);
       this.editor.getSession().setAnnotations(annotations || []);
       if (markers && markers.length > 0) {
         this.handleMarkers(markers);
@@ -129,7 +129,7 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
       this.handleOptions(this.props);
       if (Array.isArray(commands)) {
         commands.forEach(function (command) {
-          if (typeof command.exec === "string") {
+          if (typeof command.exec === 'string') {
             _this2.editor.commands.bindKey(command.bindKey, command.exec);
           } else {
             _this2.editor.commands.addCommand(command);
@@ -137,10 +137,10 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
         });
       }
       if (keyboardHandler) {
-        this.editor.setKeyboardHandler("ace/keyboard/" + keyboardHandler);
+        this.editor.setKeyboardHandler('ace/keyboard/' + keyboardHandler);
       }
       if (className) {
-        this.refEditor.className += " " + className;
+        this.refEditor.className += ' ' + className;
       }
       if (onLoad) {
         onLoad(this.editor);
@@ -164,16 +164,17 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
       }
       if (nextProps.className !== oldProps.className) {
         var appliedClasses = this.refEditor.className;
-        var appliedClassesArray = appliedClasses.trim().split(" ");
-        var oldClassesArray = oldProps.className.trim().split(" ");
+        var appliedClassesArray = appliedClasses.trim().split(' ');
+        var oldClassesArray = oldProps.className.trim().split(' ');
         oldClassesArray.forEach(function (oldClass) {
           var index = appliedClassesArray.indexOf(oldClass);
           appliedClassesArray.splice(index, 1);
         });
-        this.refEditor.className = " " + nextProps.className + " " + appliedClassesArray.join(" ");
+        this.refEditor.className = ' ' + nextProps.className + ' ' + appliedClassesArray.join(' ');
       }
       // First process editor value, as it may create a new session (see issue #300)
-      if (this.editor && nextProps.value != null && this.editor.getValue() !== nextProps.value) {
+      var valueChanged = this.editor && nextProps.value != null && this.editor.getValue() !== nextProps.value;
+      if (valueChanged) {
         // editor.setValue is a synchronous function call, change event is emitted before setValue return.
         this.silent = true;
         var pos = this.editor.session.selection.toJSON();
@@ -185,20 +186,20 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
         this.updatePlaceholder();
       }
       if (nextProps.mode !== oldProps.mode) {
-        this.editor.getSession().setMode("ace/mode/" + nextProps.mode);
+        this.editor.getSession().setMode(typeof nextProps.mode === 'string' ? "ace/mode/".concat(nextProps.mode) : nextProps.mode);
       }
       if (nextProps.theme !== oldProps.theme) {
-        this.editor.setTheme("ace/theme/" + nextProps.theme);
+        this.editor.setTheme('ace/theme/' + nextProps.theme);
       }
       if (nextProps.keyboardHandler !== oldProps.keyboardHandler) {
         if (nextProps.keyboardHandler) {
-          this.editor.setKeyboardHandler("ace/keyboard/" + nextProps.keyboardHandler);
+          this.editor.setKeyboardHandler('ace/keyboard/' + nextProps.keyboardHandler);
         } else {
           this.editor.setKeyboardHandler(null);
         }
       }
       if (nextProps.fontSize !== oldProps.fontSize) {
-        this.editor.setFontSize(typeof nextProps.fontSize === "number" ? "".concat(nextProps.fontSize, "px") : nextProps.fontSize);
+        this.editor.setFontSize(typeof nextProps.fontSize === 'number' ? "".concat(nextProps.fontSize, "px") : nextProps.fontSize);
       }
       if (nextProps.wrapEnabled !== oldProps.wrapEnabled) {
         this.editor.getSession().setUseWrapMode(nextProps.wrapEnabled);
@@ -212,7 +213,9 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
       if (!isEqual(nextProps.setOptions, oldProps.setOptions)) {
         this.handleOptions(nextProps);
       }
-      if (!isEqual(nextProps.annotations, oldProps.annotations)) {
+      // if the value or annotations changed, set the annotations
+      // changing the value may create a new session which will require annotations to be re-set
+      if (valueChanged || !isEqual(nextProps.annotations, oldProps.annotations)) {
         this.editor.getSession().setAnnotations(nextProps.annotations || []);
       }
       if (!isEqual(nextProps.markers, oldProps.markers) && Array.isArray(nextProps.markers)) {
@@ -238,8 +241,10 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this.editor.destroy();
-      this.editor = null;
+      if (this.editor) {
+        this.editor.destroy();
+        this.editor = null;
+      }
     }
   }, {
     key: "onChange",
@@ -335,7 +340,7 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
       // remove background markers except active line marker and selected word marker
       currentMarkers = this.editor.getSession().getMarkers(false);
       for (var _i in currentMarkers) {
-        if (currentMarkers.hasOwnProperty(_i) && currentMarkers[_i].clazz !== "ace_active-line" && currentMarkers[_i].clazz !== "ace_selected-word") {
+        if (currentMarkers.hasOwnProperty(_i) && currentMarkers[_i].clazz !== 'ace_active-line' && currentMarkers[_i].clazz !== 'ace_selected-word') {
           this.editor.getSession().removeMarker(currentMarkers[_i].id);
         }
       }
@@ -365,12 +370,12 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
         editor.renderer.scroller.removeChild(editor.renderer.placeholderNode);
         editor.renderer.placeholderNode = null;
       } else if (showPlaceholder && !node) {
-        node = editor.renderer.placeholderNode = document.createElement("div");
-        node.textContent = placeholder || "";
-        node.className = "ace_comment ace_placeholder";
-        node.style.padding = "0 9px";
-        node.style.position = "absolute";
-        node.style.zIndex = "3";
+        node = editor.renderer.placeholderNode = document.createElement('div');
+        node.textContent = placeholder || '';
+        node.className = 'ace_comment ace_placeholder';
+        node.style.padding = '0 9px';
+        node.style.position = 'absolute';
+        node.style.zIndex = '3';
         editor.renderer.scroller.appendChild(node);
       } else if (showPlaceholder && node) {
         node.textContent = placeholder;
@@ -393,7 +398,7 @@ var ReactAce = /*#__PURE__*/function (_React$Component) {
         width: width,
         height: height
       }, style);
-      return /*#__PURE__*/React.createElement("div", {
+      return /*#__PURE__*/React.createElement('div', {
         ref: this.updateRef,
         id: name,
         style: divStyle
@@ -426,7 +431,7 @@ ReactAce.propTypes = {
   /**
    * 主题
    * 亮色可选：chrome | clouds | crimson_editor | dawn | dreamweaver | eclipse | github | iplastic | solarized_light | textmate | tomorrow | xcode | kuroir | katzenmilch | sqlserver
-   * <br>暗色可选：ambiance | chaos | clouds_midnight | dracula | cobalt | gruvbox | gob | idle_fingers | kr_theme | merbivore 
+   * <br>暗色可选：ambiance | chaos | clouds_midnight | dracula | cobalt | gruvbox | gob | idle_fingers | kr_theme | merbivore
    * | merbivore_soft | mono_industrial | monokai | nord_dark | pastel_on_dark | solarized_dark | terminal | tomorrow_night | tomorrow_night_blue | tomorrow_night_bright | tomorrow_night_eighties | twilight | vibrant_ink
    */
   theme: PropTypes.string,
@@ -564,12 +569,12 @@ ReactAce.propTypes = {
   placeholder: PropTypes.string
 };
 ReactAce.defaultProps = {
-  name: "ace-editor",
+  name: 'ace-editor',
   focus: false,
-  mode: "",
-  theme: "",
-  height: "500px",
-  width: "500px",
+  mode: '',
+  theme: '',
+  height: '500px',
+  width: '500px',
   fontSize: 12,
   enableSnippets: false,
   showGutter: true,

package/lib/Button/index.less

@@ -149,8 +149,8 @@
 
         &[disabled] {
             color: @btn-primary-color;
-            background-color: @btn-disabled-primary-color;
-            border-color: @btn-disabled-primary-color;
+            background-color: @primary-3;
+            border-color: @primary-3;
         }
     }
 

package/lib/Cascader/index.less

@@ -1,14 +1,15 @@
 @cascader-prefix-cls: ~'@{ant-prefix}-cascader';
-
-.@{cascader-prefix-cls}-menus {
-    position: static !important;
-
-    .@{cascader-prefix-cls}-menu {
-        .@{cascader-prefix-cls}-menu-item {
-
-            .@{cascader-prefix-cls}-menu-item-expand-icon,
-            .@{cascader-prefix-cls}-menu-item-loading-icon {
-                position: static;
+.@{cascader-prefix-cls}-dropdown{
+    .@{cascader-prefix-cls}-menus {
+        position: static !important;
+    
+        .@{cascader-prefix-cls}-menu {
+            .@{cascader-prefix-cls}-menu-item {
+    
+                .@{cascader-prefix-cls}-menu-item-expand-icon,
+                .@{cascader-prefix-cls}-menu-item-loading-icon {
+                    position: static;
+                }
             }
         }
     }
@@ -26,6 +27,9 @@
         }
     }
 }
+.@{cascader-prefix-cls}-menus.@{cascader-prefix-cls}-menus-hidden{
+    display: none;
+}
 // antd4 ：点击空白处浮层不消失问题
 .@{cascader-prefix-cls}-dropdown.@{ant-prefix}-select-dropdown.@{ant-prefix}-slide-up-leave{
     display: none !important;

package/lib/ColorPicker/index.js

@@ -0,0 +1,300 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+import _Dropdown from "@chaoswise/ui/lib/Antd/Dropdown";
+import "@chaoswise/ui/lib/Button/index.less";
+import _Button from "@chaoswise/ui/lib/Button";
+import _Space from "@chaoswise/ui/lib/Space";
+import _Icon from "@chaoswise/ui/lib/Antd/Icon";
+import "@chaoswise/ui/lib/Input/index.less";
+import _Input from "@chaoswise/ui/lib/Input";
+import _ConfigProvider from "@chaoswise/ui/lib/ConfigProvider";
+import "@chaoswise/ui/lib/Tabs/index.less";
+import _Tabs from "@chaoswise/ui/lib/Tabs";
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import React, { useEffect, useState } from "react";
+import { SketchPicker } from "react-color";
+import classnames from "classnames";
+import { formatRgbaObj, hexToRgba } from "./utils";
+import { getLocale } from "./locale";
+import PropTypes from "prop-types";
+import "./index.less";
+var TabPane = _Tabs.TabPane;
+var ColorPicker = function ColorPicker(_ref) {
+  var value = _ref.value,
+    _ref$onChange = _ref.onChange,
+    onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
+    showGradient = _ref.showGradient,
+    defaultValue = _ref.defaultValue,
+    colorRender = _ref.colorRender;
+  var _useState = useState("single"),
+    _useState2 = _slicedToArray(_useState, 2),
+    colorType = _useState2[0],
+    setColorType = _useState2[1]; //单色渐变选中key 单色single  渐变gradient
+
+  var _useState3 = useState({
+      color: "rgba(255,255,255,1)",
+      //组件单色值rgb格式
+      hexColor: "#ffffff",
+      //组件单色输入框值
+      gradientColorStart: "rgba(255,255,255,1)",
+      //渐变色左侧rgb颜色值
+      gradientColorEnd: "rgba(255,255,255,1)",
+      //渐变色右侧rgb颜色值
+      gradientHexColorStart: "#ffffff",
+      //渐变色左端点输入框16进制值
+      gradientHexColorEnd: "#ffffff" //渐变色右端点输入框16进制值
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    colorInfo = _useState4[0],
+    setColorInfo = _useState4[1];
+  var _useState5 = useState("l"),
+    _useState6 = _slicedToArray(_useState5, 2),
+    activeColor = _useState6[0],
+    setActiveColor = _useState6[1]; //当前设置的颜色是左侧颜色值还是右侧颜色值
+
+  var _useState7 = useState(""),
+    _useState8 = _slicedToArray(_useState7, 2),
+    gradientColorValue = _useState8[0],
+    setGradientColorValue = _useState8[1]; //组件渐变色值
+
+  var _ConfigProvider$useLo = _ConfigProvider.useLocale(),
+    _ConfigProvider$useLo2 = _ConfigProvider$useLo.locale,
+    locale = _ConfigProvider$useLo2 === void 0 ? "zh" : _ConfigProvider$useLo2;
+  var localeObj = getLocale(locale);
+  var _value = value || defaultValue;
+  useEffect(function () {
+    if (_value) {
+      var _value$colorType = _value.colorType,
+        _colorType = _value$colorType === void 0 ? "single" : _value$colorType,
+        _value$color = _value.color,
+        color = _value$color === void 0 ? "" : _value$color,
+        _value$gradientColorS = _value.gradientColorStart,
+        gradientColorStart = _value$gradientColorS === void 0 ? "" : _value$gradientColorS,
+        _value$gradientColorE = _value.gradientColorEnd,
+        gradientColorEnd = _value$gradientColorE === void 0 ? "" : _value$gradientColorE,
+        _value$hexColor = _value.hexColor,
+        hexColor = _value$hexColor === void 0 ? "" : _value$hexColor,
+        _value$gradientHexCol = _value.gradientHexColorStart,
+        gradientHexColorStart = _value$gradientHexCol === void 0 ? "" : _value$gradientHexCol,
+        _value$gradientHexCol2 = _value.gradientHexColorEnd,
+        gradientHexColorEnd = _value$gradientHexCol2 === void 0 ? "" : _value$gradientHexCol2;
+      setColorType(_colorType);
+      setColorInfo({
+        color: color,
+        gradientColorStart: gradientColorStart,
+        gradientColorEnd: gradientColorEnd,
+        hexColor: hexColor,
+        gradientHexColorStart: gradientHexColorStart,
+        gradientHexColorEnd: gradientHexColorEnd
+      });
+    }
+  }, [_value]);
+
+  //颜色变化触发值改变
+  var onChangeColor = function onChangeColor(colorObj) {
+    console.log(colorObj, "colorObj");
+    var rgbColor = typeof colorObj.rgb == "string" ? colorObj.rgb : formatRgbaObj(colorObj.rgb);
+    if (colorType === "single") {
+      setColorInfo(_objectSpread(_objectSpread({}, colorInfo), {}, {
+        color: rgbColor,
+        hexColor: colorObj.hex
+      }));
+      onChange(_objectSpread(_objectSpread({}, colorInfo), {}, {
+        color: rgbColor,
+        colorType: colorType,
+        hexColor: colorObj.hex
+      }));
+    } else {
+      if (activeColor === "l") {
+        setColorInfo(_objectSpread(_objectSpread({}, colorInfo), {}, {
+          gradientColorStart: rgbColor,
+          gradientHexColorStart: colorObj.hex
+        }));
+        onChange(_objectSpread(_objectSpread({}, colorInfo), {}, {
+          gradientColorStart: rgbColor,
+          colorType: colorType,
+          gradientHexColorStart: colorObj.hex
+        }));
+      } else {
+        setColorInfo(_objectSpread(_objectSpread({}, colorInfo), {}, {
+          gradientColorEnd: rgbColor,
+          gradientHexColorEnd: colorObj.hex
+        }));
+        onChange(_objectSpread(_objectSpread({}, colorInfo), {}, {
+          gradientColorEnd: rgbColor,
+          colorType: colorType,
+          gradientHexColorEnd: colorObj.hex
+        }));
+      }
+    }
+  };
+
+  //切换单色渐变tab
+  var changeTab = function changeTab(colorType) {
+    setColorType(colorType);
+    onChange(_objectSpread(_objectSpread({}, colorInfo), {}, {
+      colorType: colorType
+    }));
+  };
+
+  //颜色输入框
+  var onChangeInputColor = function onChangeInputColor(e) {
+    //十六进制颜色校验
+    var reg = /^#([0-9a-f]{6}){1,2}$/i;
+    if (colorType === "single") {
+      setColorInfo(_objectSpread(_objectSpread({}, colorInfo), {}, {
+        hexColor: e.target.value
+      }));
+    } else {
+      activeColor === "l" ? setColorInfo(_objectSpread(_objectSpread({}, colorInfo), {}, {
+        gradientHexColorStart: e.target.value
+      })) : setColorInfo(_objectSpread(_objectSpread({}, colorInfo), {}, {
+        gradientHexColorEnd: e.target.value
+      }));
+    }
+    if (reg.test(e.target.value)) {
+      e.preventDefault();
+      onChangeColor({
+        rgb: hexToRgba(e.target.value),
+        hex: e.target.value
+      });
+    }
+  };
+
+  //最终渐变色
+  useEffect(function () {
+    colorInfo && setGradientColorValue("linear-gradient(to right,".concat(colorInfo.gradientColorStart, ",").concat(colorInfo.gradientColorEnd, ")"));
+  }, [colorInfo]);
+  var menu = /*#__PURE__*/React.createElement("div", {
+    className: "color-picker-select-dropdown"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-picker-dropdown",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(_Tabs, {
+    activeKey: colorType,
+    onChange: changeTab
+  }, /*#__PURE__*/React.createElement(TabPane, {
+    key: "single",
+    tab: localeObj["color-picker-single"]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-picker"
+  }, /*#__PURE__*/React.createElement(_Input, {
+    value: colorInfo.hexColor,
+    onChange: onChangeInputColor,
+    className: "color-picker-input"
+  }), /*#__PURE__*/React.createElement(SketchPicker, {
+    color: colorInfo.color,
+    onChange: onChangeColor
+  }))), showGradient && /*#__PURE__*/React.createElement(TabPane, {
+    key: "gradient",
+    tab: localeObj["color-picker-gradient"]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "color-picker"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "gradient",
+    style: {
+      background: gradientColorValue
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames("gradient-l", {
+      "gradient-active": activeColor === "l"
+    }),
+    onClick: function onClick() {
+      setActiveColor("l");
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "gradient-btn",
+    style: {
+      background: colorInfo.gradientColorStart
+    }
+  })), /*#__PURE__*/React.createElement("div", {
+    className: classnames("gradient-r", {
+      "gradient-active": activeColor === "r"
+    }),
+    onClick: function onClick() {
+      setActiveColor("r");
+    }
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "gradient-btn",
+    style: {
+      background: colorInfo.gradientColorEnd
+    }
+  }))), /*#__PURE__*/React.createElement(_Input, {
+    value: activeColor === "l" ? colorInfo.gradientHexColorStart : colorInfo.gradientHexColorEnd,
+    onChange: onChangeInputColor,
+    className: "color-picker-input"
+  }), /*#__PURE__*/React.createElement(SketchPicker, {
+    color: activeColor === "l" ? colorInfo.gradientColorStart : colorInfo.gradientColorEnd,
+    onChange: onChangeColor
+  }))))));
+  return /*#__PURE__*/React.createElement("div", {
+    className: "color-picker-select",
+    onClick: function onClick(e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(_Dropdown, {
+    trigger: ["click"],
+    overlay: menu
+  }, colorRender ? colorRender() : /*#__PURE__*/React.createElement(_Button, null, /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement("div", {
+    className: "color-picker-select-value",
+    style: {
+      background: colorType === "single" ? colorInfo.color : gradientColorValue
+    }
+  }), /*#__PURE__*/React.createElement(_Icon, {
+    type: "down"
+  })))));
+};
+ColorPicker.defaultProps = {
+  showGradient: false // 是否显示渐变tab
+};
+
+ColorPicker.propTypes = {
+  defaultValue: PropTypes.shape({
+    color: PropTypes.string,
+    colorType: PropTypes.string,
+    gradientColorStart: PropTypes.string,
+    gradientColorEnd: PropTypes.string,
+    gradientHexColorStart: PropTypes.string,
+    gradientHexColorEnd: PropTypes.string,
+    hexColor: PropTypes.string
+  }),
+  value: PropTypes.shape({
+    color: PropTypes.string,
+    colorType: PropTypes.string,
+    gradientColorStart: PropTypes.string,
+    gradientColorEnd: PropTypes.string,
+    gradientHexColorStart: PropTypes.string,
+    gradientHexColorEnd: PropTypes.string,
+    hexColor: PropTypes.string
+  }),
+  /**
+   * 自定义Dropdown按钮内容
+   */
+  iconSelectRender: PropTypes.func,
+  /**
+   * 是否显示渐变tab
+   */
+  showGradient: PropTypes.bool,
+  /**
+   * 颜色变化、Tab切换时的回调, (value)={}
+   */
+  onChange: PropTypes.func,
+  /**
+   * 自定义Dropdown按钮内容
+   */
+  colorRender: PropTypes.func
+};
+export default ColorPicker;