Refactor hours and minutes

components/clock/hand.cjsx

@@ -1,12 +1,12 @@
-prefixer = require "../prefixer"
 css      = require './style'
+prefixer = require "../prefixer"
 
 module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    initialAngle : React.PropTypes.number
     className    : React.PropTypes.string
+    initialAngle : React.PropTypes.number
     onHandChange : React.PropTypes.func
     onHandMoved  : React.PropTypes.func
 

components/clock/hours.cjsx

@@ -5,64 +5,53 @@ module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    initialValue : React.PropTypes.number
     format       : React.PropTypes.oneOf(['24hr', 'ampm'])
     onChange     : React.PropTypes.func
     onHandMoved  : React.PropTypes.func
-
-  getDefaultProps: ->
-    initialValue : null
-    format       : '24hr'
-    onChange     : null
+    selected     : React.PropTypes.number
 
   getInitialState: ->
-    inner        : @props.format == '24hr' && 0 < @props.initialValue <= 12
-    value        : @props.initialValue || if @props.format == '24hr' then 0 else 12
-
-  # -- Lifecycle
-  componentWillUpdate: (nextProps, nextState) ->
-    @props.onChange(nextState.value) if nextState.value != @state.value && @props.onChange
+    innerNumber  : @props.format == '24hr' && 0 < @props.selected <= 12
 
   # -- Events
   _onHandMouseMove: (radius) ->
     if @props.format == '24hr'
       currentInner = radius < @props.radius - @props.spacing * 2
-      @setState inner: currentInner if @state.inner != currentInner
+      @setState innerNumber: currentInner if @state.innerNumber != currentInner
 
   _onHandChange: (degrees) ->
-    newValue = @_valueFromDegrees(degrees)
-    @setState value: newValue if @state.value != newValue
+    @props.onChange(@_valueFromDegrees(degrees))
 
   # -- Internal Methods
   _valueFromDegrees: (degrees) ->
-    if @props.format == 'ampm' || @props.format == '24hr' && @state.inner
+    if @props.format == 'ampm' || @props.format == '24hr' && @state.innerNumber
       parseInt(INNER_NUMBERS[degrees/STEP])
     else
       parseInt(OUTER_NUMBERS[degrees/STEP])
 
   # -- Render
   render: ->
     innerRadius = @props.radius - @props.spacing * 2
-    handRadius  = if @state.inner then innerRadius else @props.radius
+    handRadius  = if @state.innerNumber then innerRadius else @props.radius
     handLength  = handRadius - @props.spacing
 
     <div>
         <Face
           numbers={if @props.format == '24hr' then OUTER_NUMBERS else INNER_NUMBERS}
           spacing={@props.spacing}
           radius={@props.radius}
-          activeNumber={@state.value} />
+          activeNumber={@props.selected} />
         {
           if @props.format == '24hr'
             <Face
               numbers={INNER_NUMBERS}
               spacing={@props.spacing}
               radius={innerRadius}
-              activeNumber={@state.value} />
+              activeNumber={@props.selected} />
         }
         <Hand
           degrees={@state.degrees}
-          initialAngle={@props.initialValue * STEP}
+          initialAngle={@props.selected * STEP}
           length={handLength}
           onHandMouseMove={@_onHandMouseMove}
           onHandMoved={@props.onHandMoved}

components/clock/index.cjsx

@@ -16,6 +16,8 @@ module.exports = React.createClass
     format    : '24hr'
 
   getInitialState: ->
+    hour      : if @props.format == '24hr' then 0 else 12
+    minute    : 0
     radius    : 0
 
   # -- Lifecycle
@@ -32,10 +34,10 @@ module.exports = React.createClass
 
   # -- Events handlers
   onHourChange: (hour) ->
-    console.log "Hour changed to #{hour}"
+    @setState hour: hour
 
   onMinuteChange: (minute) ->
-    console.log "Minute changed to #{minute}"
+    @setState minute: minute
 
   # -- Helper methods
   _getRadius: ->
@@ -63,13 +65,15 @@ module.exports = React.createClass
               center={@state.center}
               onChange={@onMinuteChange}
               radius={@state.radius}
+              selected={@state.minute}
               spacing={@state.radius * 0.16} />
           else if @props.display == 'hours'
             <Hours
               center={@state.center}
               format={@props.format}
               onChange={@onHourChange}
               radius={@state.radius}
+              selected={@state.hour}
               spacing={@state.radius * 0.16} />
         }
       </div>

components/clock/minutes.cjsx

@@ -1,42 +1,34 @@
-css  = require './style'
 Face = require './face'
 Hand = require './hand'
 
 module.exports = React.createClass
 
   # -- States & Properties
   propTypes:
-    initialValue : React.PropTypes.number
-    onChange     : React.PropTypes.func
+    selected : React.PropTypes.number
+    onChange : React.PropTypes.func
 
   getDefaultProps: ->
-    initialValue : 0
-    onChange     : null
-
-  getInitialState: ->
-    value        : @props.initialValue
+    selected : 0
+    onChange : null
 
   # -- Events
   _onHandChange: (degrees) ->
-    @setState value: parseInt(degrees/STEP)
-
-  # -- Internal methods
-  _valueIsExactMinute: ->
-    MINUTES.indexOf(('0' + @state.value).slice(-2)) != -1
+    @props.onChange(degrees/STEP)
 
   # -- Render
   render: ->
+    handClass = if MINUTES.indexOf(('0' + @props.selected).slice(-2)) == -1 then 'smallKnob' else ''
+
     <div>
       <Face
-        className={css.outerSphere}
         numbers={MINUTES}
         spacing={@props.spacing}
         radius={@props.radius}
-        activeNumber={@state.value} />
+        activeNumber={@props.selected} />
       <Hand
-        degrees={0}
-        className={'small-knob' unless @_valueIsExactMinute()}
-        initialAngle={@props.initialValue * STEP}
+        className={handClass}
+        initialAngle={@props.selected * STEP}
         length={@props.radius - @props.spacing}
         onHandChange={@_onHandChange}
         origin={@props.center}

components/clock/style.styl

@@ -59,7 +59,7 @@ SMALL_KNOB_SIZE = 14px
     position          : absolute
     width             : HAND_DOT_SIZE
 
-  &.small-knob :local(.knob)
+  &.smallKnob :local(.knob)
     top               : -(KNOB_SIZE/2)
     margin-top        : -(SMALL_KNOB_SIZE/2)
     margin-left       : -(SMALL_KNOB_SIZE/2)

spec/components/clock.cjsx

@@ -3,6 +3,5 @@ Clock = require '../../components/clock'
 module.exports = React.createClass
   render: ->
     <div>
-      <Clock startMode="hours" />
-      <Clock startMode="minutes" />
+      <Clock display="hours" />
     </div>