Merge pull request #426 from catchonme/master

增加自定义颜色选择

docs/renderers/Form/Color.md

@@ -6,12 +6,21 @@
 -   `format` 请选择 `hex`、`hls`、`rgb`或者`rgba`。默认为 `hex`。
 -   `presetColors` 选择器底部的默认颜色
     - 默认为`['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']`，数组内为空则不显示默认颜色
+-   `allowCustomColor` 是否允许自定义颜色，默认为`true`，为`false`时只能选择颜色，使用 `presetColors` 设定颜色选择范围
 -   `clearable` 是否显示清除按钮。
+-   `resetValue` 默认为 `""`, 删除后设置此配置项给定的值。
 
 ```schema:height="400" scope="form-item"
 {
   "type": "color",
   "name": "color",
   "label": "颜色"
+},
+
+{
+  "type": "color",
+  "name": "customColor",
+  "label": "自定义颜色",
+  "allowCustomColor": false
 }
 ```

src/components/ColorPicker.tsx

@@ -7,7 +7,7 @@
 import React from 'react';
 import cx from 'classnames';
 import {findDOMNode} from 'react-dom';
-import {SketchPicker, ColorResult} from 'react-color';
+import {SketchPicker, GithubPicker, ColorResult} from 'react-color';
 import {Icon} from './icons';
 import Overlay from './Overlay';
 import uncontrollable = require('uncontrollable');
@@ -29,6 +29,7 @@ export interface ColorProps {
   onChange: (value: any) => void;
   presetColors?: string[];
   resetValue?: string;
+  allowCustomColor?: boolean;
 }
 
 export interface ColorControlState {
@@ -40,11 +41,12 @@ export interface ColorControlState {
 export class ColorControl extends React.PureComponent<
   ColorProps,
   ColorControlState
-> {
+  > {
   static defaultProps = {
     format: 'hex',
     clearable: true,
-    placeholder: '请选择颜色'
+    placeholder: '请选择颜色',
+    allowCustomColor: true
     // closeOnSelect: true
   };
   state = {
@@ -187,7 +189,8 @@ export class ColorControl extends React.PureComponent<
       clearable,
       placement,
       classnames: cx,
-      presetColors
+      presetColors,
+      allowCustomColor
     } = this.props;
 
     const isOpened = this.state.isOpened;
@@ -250,12 +253,20 @@ export class ColorControl extends React.PureComponent<
               onHide={this.close}
               overlay
             >
-              <SketchPicker
-                disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
-                color={value}
-                presetColors={presetColors}
-                onChangeComplete={this.handleChange}
-              />
+              {allowCustomColor ? (
+                <SketchPicker
+                  disableAlpha={!!~['rgb', 'hex'].indexOf(format as string)}
+                  color={value}
+                  presetColors={presetColors}
+                  onChangeComplete={this.handleChange}
+                />
+                ) : (
+                <GithubPicker
+                  color={value}
+                  colors={presetColors}
+                  onChangeComplete={this.handleChange}
+                />
+              )}
             </PopOver>
           </Overlay>
         ) : null}

src/renderers/Form/Color.tsx

@@ -10,6 +10,7 @@ export interface ColorProps extends FormControlProps {
   closeOnSelect?: boolean;
   presetColors?: string[];
   resetValue?: string;
+  allowCustomColor?: boolean;
 }
 
 export interface ColorControlState {