From ef474c085bd17130ff249b10c8cf244759b8a8f6 Mon Sep 17 00:00:00 2001
From: Hengli Yin <hengliy@jumei.com>
Date: Tue, 10 Apr 2018 16:03:09 +0800
Subject: [PATCH 1/5] Add the clock scale

---
 src/Clock.jsx  | 32 +++++++++++++++++++++++---------
 src/Clock.less |  8 +++++++-
 src/Mark.jsx   | 14 ++++++++++++++
 src/entry.js   |  2 +-
 4 files changed, 45 insertions(+), 11 deletions(-)

diff --git a/src/Clock.jsx b/src/Clock.jsx
index eac9351..50cb167 100644
--- a/src/Clock.jsx
+++ b/src/Clock.jsx
@@ -56,15 +56,28 @@ export default class Clock extends Component {
 
     const hourMarks = [];
     for (let i = 1; i <= 12; i += 1) {
-      hourMarks.push(
-        <Mark
-          angle={i * 30}
-          key={`hour_${i}`}
-          length={hourMarksLength}
-          name="hour"
-          width={hourMarksWidth}
-        />,
-      );
+      if (this.props.showNumber) {
+        hourMarks.push(
+          <Mark
+            angle={i * 30}
+            key={`hour_${i}`}
+            number={i}
+            length={hourMarksLength}
+            name="hour"
+            width={hourMarksWidth}
+          />,
+        );
+      } else {
+        hourMarks.push(
+          <Mark
+            angle={i * 30}
+            key={`hour_${i}`}
+            length={hourMarksLength}
+            name="hour"
+            width={hourMarksWidth}
+          />,
+        );
+      }
     }
     return hourMarks;
   }
@@ -222,6 +235,7 @@ Clock.propTypes = {
   secondHandOppositeLength: isOppositeHandLength,
   secondHandWidth: isHandWidth,
   size: PropTypes.number,
+  showNumber: PropTypes.bool,
   value: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.instanceOf(Date),
diff --git a/src/Clock.less b/src/Clock.less
index 1c917dd..e6926b2 100644
--- a/src/Clock.less
+++ b/src/Clock.less
@@ -45,6 +45,12 @@
       background-color: black;
       transform: translateX(-50%);
     }
+    &__number {
+      position: absolute;
+      left: -40px;
+      width: 80px;
+      text-align: center;
+    }
   }
 
   &__second-hand {
@@ -52,4 +58,4 @@
       background-color: red;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/src/Mark.jsx b/src/Mark.jsx
index adced89..31d6396 100644
--- a/src/Mark.jsx
+++ b/src/Mark.jsx
@@ -8,6 +8,7 @@ const Mark = ({
   length,
   name,
   width,
+  number,
 }) => (
   <div
     className={`react-clock__mark react-clock__${name}-mark`}
@@ -23,6 +24,18 @@ const Mark = ({
         bottom: `${100 - (length / 2)}%`,
       }}
     />
+
+    {number ?
+      <div
+        className="react-clock__mark__number"
+        style={{
+      transform: `rotate(-${angle}deg)`,
+      top: `${length / 2}%`,
+      }}
+      >
+        {number}
+      </div> : ''}
+
   </div>
 );
 
@@ -37,6 +50,7 @@ Mark.propTypes = {
   length: isMarkLength,
   name: PropTypes.string.isRequired,
   width: isMarkWidth,
+  number: PropTypes.number,
 };
 
 export default Mark;
diff --git a/src/entry.js b/src/entry.js
index b0d24ce..e9cd8a0 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -1,6 +1,6 @@
 import Clock from './Clock';
 
-import './Clock.css';
+import './Clock.less';
 
 export default Clock;
 

From 55db38c5cf9a8eab5dcacfb651edce59ae96e495 Mon Sep 17 00:00:00 2001
From: yhlben <yinhengli@sina.com>
Date: Tue, 10 Apr 2018 17:17:21 +0800
Subject: [PATCH 2/5] Optimization code

---
 src/Clock.jsx | 32 ++++++++++----------------------
 src/Mark.jsx  |  5 +++--
 src/entry.js  |  3 ++-
 3 files changed, 15 insertions(+), 25 deletions(-)

diff --git a/src/Clock.jsx b/src/Clock.jsx
index 50cb167..d00c8c8 100644
--- a/src/Clock.jsx
+++ b/src/Clock.jsx
@@ -56,28 +56,16 @@ export default class Clock extends Component {
 
     const hourMarks = [];
     for (let i = 1; i <= 12; i += 1) {
-      if (this.props.showNumber) {
-        hourMarks.push(
-          <Mark
-            angle={i * 30}
-            key={`hour_${i}`}
-            number={i}
-            length={hourMarksLength}
-            name="hour"
-            width={hourMarksWidth}
-          />,
-        );
-      } else {
-        hourMarks.push(
-          <Mark
-            angle={i * 30}
-            key={`hour_${i}`}
-            length={hourMarksLength}
-            name="hour"
-            width={hourMarksWidth}
-          />,
-        );
-      }
+      hourMarks.push(
+        <Mark
+          angle={i * 30}
+          key={`hour_${i}`}
+          number={this.props.showNumber ? i : null}
+          length={hourMarksLength}
+          name="hour"
+          width={hourMarksWidth}
+        />,
+      );
     }
     return hourMarks;
   }
diff --git a/src/Mark.jsx b/src/Mark.jsx
index 31d6396..5587f85 100644
--- a/src/Mark.jsx
+++ b/src/Mark.jsx
@@ -25,7 +25,7 @@ const Mark = ({
       }}
     />
 
-    {number ?
+    {number &&
       <div
         className="react-clock__mark__number"
         style={{
@@ -34,7 +34,8 @@ const Mark = ({
       }}
       >
         {number}
-      </div> : ''}
+      </div>
+    }
 
   </div>
 );
diff --git a/src/entry.js b/src/entry.js
index e9cd8a0..caa3aef 100644
--- a/src/entry.js
+++ b/src/entry.js
@@ -1,6 +1,7 @@
 import Clock from './Clock';
 
-import './Clock.less';
+/* eslint-disable */
+import './Clock.css';
 
 export default Clock;
 

From f34a15c4ddfd4bc88e582f8833775d7f6d185cef Mon Sep 17 00:00:00 2001
From: yhlben <yinhengli@sina.com>
Date: Tue, 10 Apr 2018 17:22:29 +0800
Subject: [PATCH 3/5] Optimization code

---
 src/Clock.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/Clock.less b/src/Clock.less
index e6926b2..9b1fcfb 100644
--- a/src/Clock.less
+++ b/src/Clock.less
@@ -45,12 +45,14 @@
       background-color: black;
       transform: translateX(-50%);
     }
+    
     &__number {
       position: absolute;
       left: -40px;
       width: 80px;
       text-align: center;
     }
+
   }
 
   &__second-hand {

From 7a5d9150d83f9b4c3e712beeb02cc88eb419a145 Mon Sep 17 00:00:00 2001
From: yhlben <yinhengli@sina.com>
Date: Tue, 10 Apr 2018 17:23:50 +0800
Subject: [PATCH 4/5] Optimization code

---
 src/Clock.less | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/Clock.less b/src/Clock.less
index 9b1fcfb..9079234 100644
--- a/src/Clock.less
+++ b/src/Clock.less
@@ -45,7 +45,7 @@
       background-color: black;
       transform: translateX(-50%);
     }
-    
+
     &__number {
       position: absolute;
       left: -40px;
@@ -60,4 +60,5 @@
       background-color: red;
     }
   }
+  
 }

From 7c70e1e3cb52310746eb2abb2c1e2c90724d0dfe Mon Sep 17 00:00:00 2001
From: yhlben <yinhengli@sina.com>
Date: Tue, 10 Apr 2018 17:28:07 +0800
Subject: [PATCH 5/5] Optimization code

---
 src/Clock.less | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/Clock.less b/src/Clock.less
index 9079234..0df027f 100644
--- a/src/Clock.less
+++ b/src/Clock.less
@@ -45,14 +45,13 @@
       background-color: black;
       transform: translateX(-50%);
     }
-
+    
     &__number {
       position: absolute;
       left: -40px;
       width: 80px;
       text-align: center;
     }
-
   }
 
   &__second-hand {
@@ -60,5 +59,4 @@
       background-color: red;
     }
   }
-  
 }