bee-colorpicker - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7-alpha.0

build/ColorPicker.js

@@ -7,2 +7,4 @@ 'use strict';
 
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
 var _defaultProps;
@@ -52,2 +54,6 @@
 
+var _beeInputGroup = require('bee-input-group');
+
+var _beeInputGroup2 = _interopRequireDefault(_beeInputGroup);
+
 var _colors = require('./colors');
@@ -103,3 +109,4 @@
 
-        _this.handleClick = function () {
+        _this.handleClick = function (e) {
+            e.stopPropagation();
             _this.setState({ displayColorPicker: !_this.state.displayColorPicker });
@@ -109,3 +116,19 @@ };
         _this.handleClose = function () {
-            _this.setState({ displayColorPicker: false });
+            var _this$cache = _this.cache,
+                selectedColor = _this$cache.selectedColor,
+                selectedScale = _this$cache.selectedScale,
+                selectedRgbValue = _this$cache.selectedRgbValue,
+                selectedHexValue = _this$cache.selectedHexValue,
+                formValue = _this$cache.formValue,
+                alpha = _this$cache.alpha;
+
+            _this.setState({
+                displayColorPicker: false,
+                selectedColor: selectedColor,
+                selectedScale: selectedScale,
+                selectedRgbValue: selectedRgbValue,
+                selectedHexValue: selectedHexValue,
+                formValue: formValue,
+                alpha: alpha
+            });
         };
@@ -120,5 +143,6 @@
                 selectedScale = _this$state.selectedScale,
-                selectedHexValue = _this$state.selectedHexValue;
+                selectedHexValue = _this$state.selectedHexValue,
+                alpha = _this$state.alpha;
 
-            var tempRgb = _this.colorHexToRgb(selectedHexValue);
+            var tempRgb = _this.colorHexToRgb(selectedHexValue, alpha);
             var obj = {
@@ -133,2 +157,10 @@ "class": selectedColor + '-' + selectedScale,
             });
+            _this.cache = _extends(_this.cache, {
+                selectedColor: selectedColor,
+                selectedScale: selectedScale,
+                selectedRgbValue: tempRgb,
+                selectedHexValue: selectedHexValue,
+                formValue: selectedHexValue,
+                alpha: alpha
+            });
             if (autoCalculate) {
@@ -177,3 +209,3 @@ var result = _this.calcHoverAndActive(selectedColor, selectedScale);
                 selectedHexValue: selectedHex,
-                alpha: 255
+                alpha: 100
             });
@@ -298,5 +330,13 @@ };
             formValue: initValue,
-            alpha: 255
+            alpha: 100
         };
         _this.input = {};
+        _this.cache = {
+            selectedColor: "red",
+            selectedScale: "600",
+            selectedRgbValue: initRgb,
+            selectedHexValue: initHex,
+            formValue: initValue,
+            alpha: 100
+        };
         return _this;
@@ -316,3 +356,3 @@ }
 
-    // 关闭色板
+    // 关闭色板/点击弹框取消按钮
 
@@ -343,5 +383,3 @@
     // 把16进制颜色转换为RGB颜色
-    ColorPicker.prototype.colorHexToRgb = function colorHexToRgb(color) {
-        var alpha = this.state.alpha;
-
+    ColorPicker.prototype.colorHexToRgb = function colorHexToRgb(color, alpha) {
         var sColor = color;
@@ -509,3 +547,3 @@ sColor = sColor.toLowerCase();
                         null,
-                        'MD\u8272\u677F'
+                        '\u53D6\u8272\u677F'
                     )
@@ -527,3 +565,3 @@ ),
                             {
-                                defaultValue: 'red',
+                                defaultValue: selectedColor,
                                 style: { width: 200 },
@@ -556,4 +594,8 @@ onChange: this.handleSelectChange
                                     { className: clsPrefix + '-panel-color-info' },
-                                    _react2["default"].createElement('div', { className: 'selected-color bg-' + selectedColor + '-' + selectedScale }),
                                     _react2["default"].createElement(
+                                        'div',
+                                        { className: 'transparent-bg' },
+                                        _react2["default"].createElement('div', { className: 'selected-color bg-' + selectedColor + '-' + selectedScale, style: { opacity: alpha / 100 } })
+                                    ),
+                                    _react2["default"].createElement(
                                         'ul',
@@ -602,3 +644,12 @@ null,
                                                 ),
-                                                _react2["default"].createElement(_beeFormControl2["default"], { size: 'sm', value: alpha, onChange: this.handleAlphaChange })
+                                                _react2["default"].createElement(
+                                                    _beeInputGroup2["default"],
+                                                    null,
+                                                    _react2["default"].createElement(_beeFormControl2["default"], { size: 'sm', value: alpha, onChange: this.handleAlphaChange }),
+                                                    _react2["default"].createElement(
+                                                        _beeInputGroup2["default"].Addon,
+                                                        null,
+                                                        '%'
+                                                    )
+                                                )
                                             )
@@ -605,0 +656,0 @@ )

demo/demolist/Demo1.js

 /**
 *
-* @title 拾色器
-* @description 提供预制色板的拾色器组件
+* @title 取色板
+* @description 提供预制色板的取色板组件
 *
@@ -6,0 +6,0 @@ */

demo/index.js

@@ -11,3 +11,3 @@ import React, { Component } from 'react';
 
-var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" 拾色器","code":"/**\n*\n* @title 拾色器\n* @description 提供预制色板的拾色器组件\n*\n*/\nimport React, { Component } from 'react';\nimport { ColorPicker } from 'tinper-bee';\n\nclass Demo1 extends Component {\n    state = {\n        value : \"#E14C46\"\n    }\n\n    handleChange = (v) => {\n        console.log(\"选择的色彩信息 ：\" , v);\n        this.setState({\n            value: v.hex || ''\n        })\n    }\n    render () {\n        return (\n            <ColorPicker \n                label=\"颜色\"\n                placeholder=\"请输入十六进制色值\"\n                value={this.state.value} \n                onChange={this.handleChange}\n            />\n        )\n    }\n}\n","desc":" 提供预制色板的拾色器组件"},{"example":<Demo2 />,"title":" 设置必输项","code":"/**\r\n*\r\n* @title 设置必输项\r\n* @description `required`参数设置是否必填\r\n*\r\n*/\r\nimport React, { Component } from 'react';\r\nimport { ColorPicker } from 'tinper-bee';\r\n\r\nclass Demo2 extends Component {\r\n    state = {\r\n        value : \"#E14C46\"\r\n    }\r\n\r\n    handleChange = (v) => {\r\n        console.log(\"选择的色彩信息 ：\" , v);\r\n        this.setState({\r\n            value: v.hex || ''\r\n        })\r\n    }\r\n    render () {\r\n        return (\r\n            <ColorPicker \r\n                className=\"demo2\"\r\n                placeholder=\"请输入十六进制色值\"\r\n                value={this.state.value} \r\n                onChange={this.handleChange}\r\n                label=\"颜色\"\r\n                required={true}\r\n            />\r\n        )\r\n    }\r\n}\r\n","desc":" `required`参数设置是否必填"},{"example":<Demo3 />,"title":" 自动计算色值","code":"/**\r\n*\r\n* @title 自动计算色值\r\n* @description 根据选中的颜色自动计算比其 浅一色度/深一色度 的色值，可应用于选择主色后，自动计算hover和active状态的色值\r\n*\r\n*/\r\nimport React, { Component } from 'react';\r\nimport { ColorPicker } from 'tinper-bee';\r\n\r\nclass Demo3 extends Component {\r\n    autoCalculate = (obj) => {\r\n        console.log(\"自动计算的色值对象 ：\",obj);\r\n    }\r\n\r\n    handleChange = (v) => {\r\n        console.log(\"选择的色彩信息 ：\" , v);\r\n    }\r\n    render () {\r\n        return (\r\n            <ColorPicker\r\n                className=\"demo2\"\r\n                label=\"颜色\"\r\n                placeholder=\"请输入十六进制色值\" \r\n                autoCalculate={this.autoCalculate}\r\n                onChange={this.handleChange}\r\n            />\r\n        )\r\n    }\r\n}\r\n","desc":" 根据选中的颜色自动计算比其 浅一色度/深一色度 的色值，可应用于选择主色后，自动计算hover和active状态的色值"}]
+var Demo1 = require("./demolist/Demo1");var Demo2 = require("./demolist/Demo2");var Demo3 = require("./demolist/Demo3");var DemoArray = [{"example":<Demo1 />,"title":" 取色板","code":"/**\n*\n* @title 取色板\n* @description 提供预制色板的取色板组件\n*\n*/\nimport React, { Component } from 'react';\nimport { ColorPicker } from 'tinper-bee';\n\nclass Demo1 extends Component {\n    state = {\n        value : \"#E14C46\"\n    }\n\n    handleChange = (v) => {\n        console.log(\"选择的色彩信息 ：\" , v);\n        this.setState({\n            value: v.hex || ''\n        })\n    }\n    render () {\n        return (\n            <ColorPicker \n                label=\"颜色\"\n                placeholder=\"请输入十六进制色值\"\n                value={this.state.value} \n                onChange={this.handleChange}\n            />\n        )\n    }\n}\n","desc":" 提供预制色板的取色板组件"},{"example":<Demo2 />,"title":" 设置必输项","code":"/**\r\n*\r\n* @title 设置必输项\r\n* @description `required`参数设置是否必填\r\n*\r\n*/\r\nimport React, { Component } from 'react';\r\nimport { ColorPicker } from 'tinper-bee';\r\n\r\nclass Demo2 extends Component {\r\n    state = {\r\n        value : \"#E14C46\"\r\n    }\r\n\r\n    handleChange = (v) => {\r\n        console.log(\"选择的色彩信息 ：\" , v);\r\n        this.setState({\r\n            value: v.hex || ''\r\n        })\r\n    }\r\n    render () {\r\n        return (\r\n            <ColorPicker \r\n                className=\"demo2\"\r\n                placeholder=\"请输入十六进制色值\"\r\n                value={this.state.value} \r\n                onChange={this.handleChange}\r\n                label=\"颜色\"\r\n                required={true}\r\n            />\r\n        )\r\n    }\r\n}\r\n","desc":" `required`参数设置是否必填"},{"example":<Demo3 />,"title":" 自动计算色值","code":"/**\r\n*\r\n* @title 自动计算色值\r\n* @description 根据选中的颜色自动计算比其 浅一色度/深一色度 的色值，可应用于选择主色后，自动计算hover和active状态的色值\r\n*\r\n*/\r\nimport React, { Component } from 'react';\r\nimport { ColorPicker } from 'tinper-bee';\r\n\r\nclass Demo3 extends Component {\r\n    autoCalculate = (obj) => {\r\n        console.log(\"自动计算的色值对象 ：\",obj);\r\n    }\r\n\r\n    handleChange = (v) => {\r\n        console.log(\"选择的色彩信息 ：\" , v);\r\n    }\r\n    render () {\r\n        return (\r\n            <ColorPicker\r\n                className=\"demo2\"\r\n                label=\"颜色\"\r\n                placeholder=\"请输入十六进制色值\" \r\n                autoCalculate={this.autoCalculate}\r\n                onChange={this.handleChange}\r\n            />\r\n        )\r\n    }\r\n}\r\n","desc":" 根据选中的颜色自动计算比其 浅一色度/深一色度 的色值，可应用于选择主色后，自动计算hover和active状态的色值"}]
 
@@ -14,0 +14,0 @@

docs/api.md

@@ -1,6 +0,6 @@
-# 拾色器 ColorPicker
+# 取色板 ColorPicker
 
 ## 何时使用
 
-提供预制色板的拾色器  
+提供预制色块的取色板  
 [色板链接](http://tinper.org/dist/neoui/global/color.html#)
@@ -7,0 +7,0 @@

package.json

 {
  "name": "bee-colorpicker",
- "version": "0.0.6",
+ "version": "0.0.7-alpha.0",
  "description": "ColorPicker ui component for react",
@@ -44,2 +44,3 @@ "keywords": [
   "bee-icon": "latest",
+  "bee-input-group": "^2.0.2",
   "bee-label": "latest",
@@ -46,0 +47,0 @@ "bee-modal": "latest",

README.md

@@ -14,3 +14,3 @@ # colorpicker
 
-可定制的拾色器组件
+可定制的取色板组件
 
@@ -17,0 +17,0 @@ ## 使用

src/ColorPicker.js

@@ -12,2 +12,3 @@ import React, { Component } from 'react';
 import { Col, Row } from 'bee-layout';
+import InputGroup from "bee-input-group";
 import colors from './colors';
@@ -55,5 +56,13 @@ const FormItem = Form.FormItem;
             formValue: initValue,
-            alpha: 255
+            alpha: 100,
         };
         this.input = {};
+        this.cache = {
+            selectedColor: "red",
+            selectedScale: "600",
+            selectedRgbValue: initRgb,
+            selectedHexValue: initHex,
+            formValue: initValue,
+            alpha: 100
+        };
     }
@@ -70,9 +79,19 @@
     // 打开色板
-    handleClick = () => {
+    handleClick = (e) => {
+        e.stopPropagation();
         this.setState({ displayColorPicker: !this.state.displayColorPicker })
     };
 
-    // 关闭色板
+    // 关闭色板/点击弹框取消按钮
     handleClose = () => {
-        this.setState({ displayColorPicker: false })
+        let { selectedColor,selectedScale,selectedRgbValue,selectedHexValue,formValue,alpha } = this.cache;
+        this.setState({
+            displayColorPicker: false,
+            selectedColor,
+            selectedScale,
+            selectedRgbValue,
+            selectedHexValue,
+            formValue,
+            alpha,
+        });
     };
@@ -83,4 +102,4 @@
         let { autoCalculate, onChange } = this.props;
-        let { selectedColor,selectedScale,selectedHexValue } = this.state;
-        let tempRgb = this.colorHexToRgb(selectedHexValue);
+        let { selectedColor,selectedScale,selectedHexValue,alpha } = this.state;
+        let tempRgb = this.colorHexToRgb(selectedHexValue,alpha);
         let obj = {
@@ -95,2 +114,10 @@ class: `${selectedColor}-${selectedScale}`,
         })
+        this.cache = Object.assign(this.cache,{
+            selectedColor,
+            selectedScale,
+            selectedRgbValue:tempRgb,
+            selectedHexValue,
+            formValue: selectedHexValue,
+            alpha
+        });
         if (autoCalculate) {
@@ -144,3 +171,3 @@ let result = this.calcHoverAndActive(selectedColor, selectedScale);
             selectedHexValue: selectedHex,
-            alpha: 255
+            alpha: 100
         })
@@ -197,4 +224,3 @@ };
     // 把16进制颜色转换为RGB颜色
-    colorHexToRgb(color){
-        let { alpha } = this.state;
+    colorHexToRgb(color,alpha){
         let sColor = color;
@@ -380,3 +406,3 @@ sColor = sColor.toLowerCase();
                     <Modal.Header closeButton>
-                        <Modal.Title>MD色板</Modal.Title>
+                        <Modal.Title>取色板</Modal.Title>
                     </Modal.Header>
@@ -390,3 +416,3 @@
                             <Select
-                                defaultValue="red"
+                                defaultValue={selectedColor}
                                 style={{ width: 200 }}
@@ -407,3 +433,5 @@ onChange={this.handleSelectChange}
                                     <div className={`${clsPrefix}-panel-color-info`}>
-                                        <div className={`selected-color bg-${selectedColor}-${selectedScale}`}></div>
+                                        <div className="transparent-bg">
+                                            <div className={`selected-color bg-${selectedColor}-${selectedScale}`} style={{opacity:alpha/100}}></div>
+                                        </div>
                                         <ul>
@@ -416,3 +444,6 @@ <li><Label>Class：</Label>{`${selectedColor}-${selectedScale}`}</li>
                                                     <Label>Alpha</Label>
-                                                    <FormControl size="sm" value={alpha} onChange={this.handleAlphaChange}/>
+                                                    <InputGroup>
+                                                        <FormControl size="sm" value={alpha} onChange={this.handleAlphaChange}/>
+                                                        <InputGroup.Addon>%</InputGroup.Addon>
+                                                    </InputGroup>
                                                 </FormItem>
@@ -419,0 +450,0 @@ </li>

No alert changes

Improved metrics

Total package byte prevSize

3107821

1.22%

Lines of code

36870

0.94%

Worsened metrics

Dependency count

13

8.33%

Dependency changes

• + Added

  bee-input-group@^2.0.2

• + Added

  bee-input-group@2.0.4
  (transitive)

• + Added

  bee-input-group-addon@2.0.1
  (transitive)