From 6750c0b82b556dc24e55b8a74cc657e32b146114 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 4 Jan 2017 15:13:55 +0800
Subject: [PATCH] Make color value can be selectable

---
 docs/spec/colors.md           | 25 ++++++++++++++++++++++
 site/theme/static/colors.less | 39 +++++++++++++++++------------------
 2 files changed, 44 insertions(+), 20 deletions(-)

diff --git a/docs/spec/colors.md b/docs/spec/colors.md
index 6e584daf4f..2755f06299 100644
--- a/docs/spec/colors.md
+++ b/docs/spec/colors.md
@@ -19,14 +19,38 @@ Ant Design 的色板由 8 种基本色彩组成，通过一套[精心设计的
 > 我们结合了色彩加白、加黑、加深，贝塞尔曲线，以及针对冷暖色的不同旋转角度，调教出一套色彩算法。使用者只需指定主色，便可导出一条完整的渐变色板。
 
 `````__react
+const rgbToHex = (rgbString) => {
+  const hexChars = '0123456789ABCDEF';
+  const rgb = rgbString.match(/\d+/g);
+  let r = parseInt(rgb[0]).toString(16);
+  let g = parseInt(rgb[1]).toString(16);
+  let b = parseInt(rgb[2]).toString(16);
+  r = r.length === 1 ? `0${r}` : r;
+  g = g.length === 1 ? `0${g}` : g;
+  b =  b.length === 1 ? `0${ b}` : b;
+  return '#' + r + g + b;
+};
 const Palette = React.createClass({
+  getInitialState() {
+    return { hexColors: null };
+  },
+  componentDidMount() {
+    const hexColors = {};
+    Object.keys(this.colorNodes).forEach(key => {
+      hexColors[key] = rgbToHex(getComputedStyle(this.colorNodes[key])['background-color'])
+    });
+    this.setState({ hexColors });
+  },
   render() {
+    this.colorNodes = this.colorNodes || {};
     const { name, description, color } = this.props.color;
+    const { hexColors } = this.state;
     const colors = [];
     for (let i = 1; i <= 10; i++) {
       colors.push(
         <div
           key={i}
+          ref={node => { this.colorNodes[`${name}-${i}`] = node; } }
           className={`main-color-item palatte-${name}-${i}`}
           style={{
             color: i > 5 ? '#fff' : 'unset',
@@ -34,6 +58,7 @@ const Palette = React.createClass({
           }}
         >
           {name}-{i}
+          {hexColors ? <span className="main-color-value">{hexColors[`${name}-${i}`]}</span> : null}
         </div>
       );
     }
diff --git a/site/theme/static/colors.less b/site/theme/static/colors.less
index b409547d5d..94ccebfc8d 100644
--- a/site/theme/static/colors.less
+++ b/site/theme/static/colors.less
@@ -6,19 +6,21 @@
   overflow: hidden;
 }
 
-.main-color .main-color-item {
-  width: 80px;
-  height: 60px;
-  border-radius: 4px;
-  float: left;
-  margin: 0 5px 5px 0;
-  transition: all .2s;
-  position: relative;
-  text-align: center;
-  padding-top: 20px;
-  font-family: Consolas;
-  font-size: 12px;
-  &:after {
+.main-color {
+  &-item {
+    width: 80px;
+    height: 60px;
+    border-radius: 4px;
+    float: left;
+    margin: 0 5px 5px 0;
+    transition: all .2s;
+    position: relative;
+    text-align: center;
+    padding-top: 20px;
+    font-family: Consolas;
+    font-size: 12px;
+  }
+  &-item &-value {
     font-size: 12px;
     position: absolute;
     bottom: -4px;
@@ -49,10 +51,10 @@
 .main-color:hover {
   .main-color-item {
     padding-top: 4px;
-    &:after {
-      opacity: 0.7;
-      bottom: 3px;
-    }
+  }
+  .main-color-value {
+    opacity: 0.7;
+    bottom: 3px;
   }
 }
 
@@ -92,9 +94,6 @@
   .palatte-@{color}-@{index} {
     @background: "@{color}-@{index}";
     background: @@background;
-    &:after {
-      content: "@{@{background}}";
-    }
   }
   .make-palatte(@color, (@index + 1));    // next iteration
 }