From b780e4d8685d40e946a1176b631e3f1f568a2eff Mon Sep 17 00:00:00 2001
From: noyobo <nongyoubao@alibaba-inc.com>
Date: Fri, 10 Nov 2017 16:45:59 +0800
Subject: [PATCH] fix: Hex input check after enter or blur. Close #52

---
 assets/index/Board.less  |  4 ++--
 assets/index/Layout.less | 12 +++++-----
 assets/index/Params.less |  4 ++--
 src/Params.jsx           | 49 +++++++++++++++++++++++++++++++---------
 4 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/assets/index/Board.less b/assets/index/Board.less
index e21b2f5..622c1e2 100644
--- a/assets/index/Board.less
+++ b/assets/index/Board.less
@@ -4,7 +4,7 @@
   position: relative;
   font-size: 0;
   user-select: none;
-
+  margin: 8px 8px 0px;
   span {
     position: absolute;
     border-radius: 10px;
@@ -45,7 +45,7 @@
     .background-image(linear-gradient(to right, #ffffff 0%, transparent 100%));
   }
   &-handler {
-      box-shadow: 0 0 2px #808080 inset;
+    box-shadow: 0 0 2px #808080 inset;
     border-radius: 2px;
     cursor: crosshair;
     user-select: none;
diff --git a/assets/index/Layout.less b/assets/index/Layout.less
index 47e95aa..0736a8b 100644
--- a/assets/index/Layout.less
+++ b/assets/index/Layout.less
@@ -5,7 +5,7 @@
   border-radius: 4px;
   box-shadow: 0 1px 5px #ccc;
   border: 1px solid #ccc;
-  padding: 8px;
+  padding-bottom: 8px;
 }
 
 .@{prefixClassName}-wrap{
@@ -15,19 +15,19 @@
   position: relative;
   &-preview{
     position: absolute;
-    right: 0px;
+    right: 8px;
   }
   &-ribbon{
     position: absolute;
-    left: 0px;
+    left: 8px;
     top: 0;
-    right: 35px;
+    right: 43px;
     height: 30px;
   }
   &-alpha{
     position: absolute;
-    left: 0px;
-    right: 35px;
+    left: 8px;
+    right: 43px;
     bottom: 0;
     height: (30px - 5px) / 2;
   }
diff --git a/assets/index/Params.less b/assets/index/Params.less
index bb7c1a7..6b6bdab 100644
--- a/assets/index/Params.less
+++ b/assets/index/Params.less
@@ -2,7 +2,7 @@
   font-size: 12px;
   &-input{
     overflow: hidden;
-    padding: 2px 0;
+    padding: 2px 8px;
   }
   input{
     user-select: text;
@@ -26,7 +26,7 @@
   }
 
   &-lable{
-    padding: 2px 0;
+    padding: 2px 8px;
     height: 22px;
     line-height: 18px;
     user-select: none;
diff --git a/src/Params.jsx b/src/Params.jsx
index 8e9fa17..74fc761 100644
--- a/src/Params.jsx
+++ b/src/Params.jsx
@@ -48,8 +48,9 @@ export default class Params extends React.Component {
     return `${this.props.rootPrefixCls}-params`;
   };
 
-  handleHexHandler = event => {
-    const hex = event.target.value;
+  handleHexBlur = () => {
+    const hex = this.state.hex;
+
     let color = null;
 
     if (Color.isValidHex(hex)) {
@@ -62,13 +63,36 @@ export default class Params extends React.Component {
         hex,
       });
       this.props.onChange(color, false);
-    } else {
-      this.setState({
-        hex,
-      });
     }
   };
 
+  handleHexPress = event => {
+    const hex = this.state.hex;
+    if (event.nativeEvent.which === 13) {
+      let color = null;
+
+      if (Color.isValidHex(hex)) {
+        color = new Color(hex);
+      }
+
+      if (color !== null) {
+        this.setState({
+          color,
+          hex,
+        });
+        this.props.onChange(color, false);
+      }
+    }
+  };
+
+  handleHexChange = event => {
+    const hex = event.target.value;
+
+    this.setState({
+      hex,
+    });
+  };
+
   handleModeChange = () => {
     let mode = this.state.mode;
 
@@ -132,7 +156,7 @@ export default class Params extends React.Component {
       },
       () => {
         this.props.onChange(color, false);
-      },
+      }
     );
   };
 
@@ -161,8 +185,10 @@ export default class Params extends React.Component {
             className={`${prefixCls}-hex`}
             type="text"
             maxLength="6"
-            onChange={this.handleHexHandler}
-            value={this.state.hex.toUpperCase()}
+            onKeyPress={this.handleHexPress}
+            onBlur={this.handleHexBlur}
+            onChange={this.handleHexChange}
+            value={this.state.hex.toLowerCase()}
           />
           <input
             type="number"
@@ -182,12 +208,13 @@ export default class Params extends React.Component {
             value={colorChannel[2]}
             onChange={this.handleColorChannelChange.bind(null, 2)}
           />
-          {enableAlpha &&
+          {enableAlpha && (
             <input
               type="number"
               value={Math.round(this.props.alpha)}
               onChange={this.handleAlphaHandler}
-            />}
+            />
+          )}
         </div>
         <div className={`${prefixCls}-lable`}>
           <label className={`${prefixCls}-lable-hex`}>Hex</label>