Refactor timepicker and utils organization

components/calendar/day.cjsx

@@ -1,5 +1,5 @@
 css = require './style'
-dateTime  = require '../utils/date-time'
+time  = require '../utils/time'
 
 module.exports = React.createClass
   displayName: 'Day',
@@ -11,7 +11,7 @@ module.exports = React.createClass
     viewDate     : React.PropTypes.object
 
   _dayStyle: ->
-    marginLeft: "#{dateTime.getFirstWeekDay(@props.viewDate) * 100/7}%"
+    marginLeft: "#{time.getFirstWeekDay(@props.viewDate) * 100/7}%"
 
   _isSelected: () ->
     isSameYear  = @props.viewDate.getFullYear() == @props.selectedDate.getFullYear()

components/calendar/index.cjsx

@@ -1,6 +1,6 @@
 CTG       = React.addons.CSSTransitionGroup
 css       = require './style'
-dateTime  = require '../utils/date-time'
+time      = require '../utils/time'
 FontIcon  = require '../font_icon'
 Month     = require './month'
 
@@ -31,10 +31,10 @@ module.exports = React.createClass
   # -- Events
   onDayClick: (event) ->
     @setState
-      selectedDate: dateTime.setDay(@state.viewDate, parseInt(event.target.textContent))
+      selectedDate: time.setDay(@state.viewDate, parseInt(event.target.textContent))
 
   onYearClick: (event) ->
-    newDate = dateTime.setYear(@state.selectedDate, parseInt(event.target.textContent))
+    newDate = time.setYear(@state.selectedDate, parseInt(event.target.textContent))
     @setState
       selectedDate: newDate
       viewDate: newDate
@@ -53,12 +53,12 @@ module.exports = React.createClass
   incrementViewMonth: ->
     @setState
       direction: 'right'
-      viewDate:  dateTime.addMonths(@state.viewDate, 1)
+      viewDate:  time.addMonths(@state.viewDate, 1)
 
   decrementViewMonth: ->
     @setState
       direction: 'left'
-      viewDate: dateTime.addMonths(@state.viewDate, -1)
+      viewDate: time.addMonths(@state.viewDate, -1)
 
   # -- Render
   renderYear: (year) ->

components/calendar/month.cjsx

@@ -1,6 +1,6 @@
 css  = require './style'
 Day  = require './day'
-dateTime = require '../utils/date-time'
+time = require '../utils/time'
 
 module.exports = React.createClass
   displayName: 'Month',
@@ -13,13 +13,13 @@ module.exports = React.createClass
   render: ->
     <div>
       <span className={css.title}>
-        { dateTime.getFullMonth(@props.viewDate)} {@props.viewDate.getFullYear() }
+        { time.getFullMonth(@props.viewDate)} {@props.viewDate.getFullYear() }
       </span>
       <div className={css.week}>
-        { <span key={"dw#{i}"}>{ dateTime.getFullDayOfWeek(i).charAt(0) }</span> for i in [0..6] }
+        { <span key={"dw#{i}"}>{ time.getFullDayOfWeek(i).charAt(0) }</span> for i in [0..6] }
       </div>
       <div className={css.days}>
-        { for i in [1..dateTime.getDaysInMonth(@props.viewDate)]
+        { for i in [1..time.getDaysInMonth(@props.viewDate)]
             <Day key={"d#{i}"}
               day={i}
               onClick={@props.onDayClick}

components/clock/face.jsx

@@ -1,5 +1,4 @@
 const React = window.React;
-
 const css = require('./style');
 
 module.exports = React.createClass({
@@ -9,7 +8,8 @@ module.exports = React.createClass({
     return {
       active: null,
       numbers: [],
-      radius: 0
+      radius: 0,
+      twoDigits: false
     };
   },
 
@@ -38,10 +38,10 @@ module.exports = React.createClass({
         {
           this.props.numbers.map((i, k) => {
             return (
-              <span className={css.number + (parseInt(i) === this.props.active ? ' active' : '')}
+              <span className={css.number + (i === this.props.active ? ' active' : '')}
                     style={this._numberStyle(this.props.radius - this.props.spacing, k + 1)}
                     key={i}>
-                {i}
+                { this.props.twoDigits ? ('0' + i).slice(-2) : i }
               </span>
             );
           })

components/clock/hand.jsx

@@ -1,8 +1,6 @@
 const React = window.React;
-
 const css = require('./style');
-const prefixer = require('../utils/prefixer');
-const helper = require('../utils/helper');
+const utils = require('../utils');
 
 module.exports = React.createClass({
   displayName: 'Hand',
@@ -57,11 +55,11 @@ module.exports = React.createClass({
   },
 
   onMouseMove (event) {
-    this._move(helper.getMousePosition(event));
+    this._move(utils.events.getMousePosition(event));
   },
 
   onTouchMove (event) {
-    this._move(helper.getTouchPosition(event));
+    this._move(utils.events.getTouchPosition(event));
   },
 
   onMouseUp () {
@@ -73,14 +71,14 @@ module.exports = React.createClass({
   },
 
   mouseStart (event) {
-    helper.addEventsToDocument(this._getMouseEventMap());
-    this._move(helper.getMousePosition(event));
+    utils.events.addEventsToDocument(this._getMouseEventMap());
+    this._move(utils.events.getMousePosition(event));
   },
 
   touchStart (event) {
-    helper.addEventsToDocument(this._getTouchEventMap());
-    this._move(helper.getTouchPosition(event));
-    helper.pauseEvent(event);
+    utils.events.addEventsToDocument(this._getTouchEventMap());
+    this._move(utils.events.getTouchPosition(event));
+    utils.events.pauseEvent(event);
   },
 
   _getPositionRadius (position) {
@@ -94,23 +92,23 @@ module.exports = React.createClass({
   },
 
   _positionToAngle (position) {
-    return helper.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
+    return utils.angle360FromPositions(this.props.origin.x, this.props.origin.y, position.x, position.y);
   },
 
   _end (events) {
     if (this.props.onHandMoved) this.props.onHandMoved();
-    helper.removeEventsFromDocument(events);
+    utils.events.removeEventsFromDocument(events);
   },
 
   _move (position) {
     let degrees = this._trimAngleToValue(this._positionToAngle(position));
     degrees = degrees === 360 ? 0 : degrees;
     if (this.state.angle !== degrees) this.setState({angle: degrees});
-    if (this.props.onHandMouseMove) this.props.onHandMouseMove(this._getPositionRadius(position));
+    if (this.props.onHandMove) this.props.onHandMove(this._getPositionRadius(position));
   },
 
   render () {
-    let style = prefixer({
+    let style = utils.prefixer({
       height: this.props.length - this.state.knobWidth / 2,
       transform: `rotate(${this.state.angle}deg)`
     });

components/clock/hours.jsx

@@ -1,12 +1,11 @@
 const React = window.React;
+const utils = require('../utils');
 
 const Face = require('./face');
 const Hand = require('./hand');
 
-const { range } = require('../utils/helper');
-
-const innerNumbers = [12, ...range(1, 12)];
-const outerNumbers = ['00', ...range(13, 24)];
+const outerNumbers = [0, ...utils.range(13, 24)];
+const innerNumbers = [12, ...utils.range(1, 12)];
 const step = 360 / 12;
 
 module.exports = React.createClass({
@@ -25,7 +24,7 @@ module.exports = React.createClass({
     };
   },
 
-  _onHandMouseMove (radius) {
+  _onHandMove (radius) {
     let currentInner = radius < this.props.radius - this.props.spacing * 2;
     if (this.props.format === '24hr' && this.state.inner !== currentInner) {
       this.setState({inner: currentInner});
@@ -46,47 +45,48 @@ module.exports = React.createClass({
 
   _valueFromDegrees (degrees) {
     if (this.props.format === 'ampm' || this.props.format === '24hr' && this.state.inner) {
-      return parseInt(innerNumbers[degrees / step]);
+      return innerNumbers[degrees / step];
     } else {
-      return parseInt(outerNumbers[degrees / step]);
+      return outerNumbers[degrees / step];
     }
   },
 
   renderInnerFace (innerRadius) {
-    return (
-      <Face
-        onTouchStart={this._onTouchStart}
-        onMouseDown={this._onMouseDown}
-        numbers={innerNumbers}
-        spacing={this.props.spacing}
-        radius={innerRadius}
-        active={this.props.selected} />
-    );
+    if (this.props.format === '24hr') {
+      return (
+        <Face
+          onTouchStart={this._onTouchStart}
+          onMouseDown={this._onMouseDown}
+          numbers={innerNumbers}
+          spacing={this.props.spacing}
+          radius={innerRadius}
+          active={this.props.selected} />
+      );
+    }
   },
 
   render () {
-    let innerRadius = this.props.radius - this.props.spacing * 2;
-    let handRadius = this.state.inner ? innerRadius : this.props.radius;
-    let handLength = handRadius - this.props.spacing;
-    let ampmActive = this.props.format === '24hr' ? this.props.selected : (this.props.selected % 12 || 12);
+    const { format, selected, radius, spacing, center, onHandMoved } = this.props;
+    const is24hr = format === '24hr';
 
     return (
       <div>
           <Face
             onTouchStart={this._onTouchStart}
             onMouseDown={this._onMouseDown}
-            numbers={this.props.format === '24hr' ? outerNumbers : innerNumbers}
-            spacing={this.props.spacing}
-            radius={this.props.radius}
-            active={ampmActive} />
-          { this.props.format === '24hr' ? this.renderInnerFace(innerRadius) : '' }
+            numbers={is24hr ? outerNumbers : innerNumbers}
+            spacing={spacing}
+            radius={radius}
+            twoDigits={is24hr}
+            active={is24hr ? selected : (selected % 12 || 12)} />
+          { this.renderInnerFace(radius - spacing * 2) }
           <Hand ref='hand'
-            initialAngle={this.props.selected * step}
-            length={handLength}
-            onHandMouseMove={this._onHandMouseMove}
-            onHandMoved={this.props.onHandMoved}
+            initialAngle={selected * step}
+            length={(this.state.inner ? radius - spacing * 2 : radius) - spacing}
+            onHandMove={this._onHandMove}
+            onHandMoved={onHandMoved}
             onHandChange={this._onHandChange}
-            origin={this.props.center}
+            origin={center}
             step={step} />
       </div>
     );

components/clock/index.jsx

@@ -1,9 +1,9 @@
 const React = window.React;
-
 const css = require('./style');
+const time = require('../utils/time');
+
 const Hours = require('./hours');
 const Minutes = require('./minutes');
-const utils = require('../utils/date-time');
 
 module.exports = React.createClass({
   displayName: 'Clock',
@@ -19,7 +19,7 @@ module.exports = React.createClass({
   getDefaultProps () {
     return {
       className: '',
-      display: 'hours',
+      display: 'minutes',
       format: '24hr',
       initialTime: new Date()
     };
@@ -50,19 +50,19 @@ module.exports = React.createClass({
 
   onHourChange (hours) {
     if (this.state.time.getHours() !== hours) {
-      this.setState({time: utils.setHours(this.state.time, this._adaptHourToFormat(hours))});
+      this.setState({time: time.setHours(this.state.time, this._adaptHourToFormat(hours))});
     }
   },
 
   onMinuteChange (minutes) {
     if (this.state.time.getMinutes() !== minutes) {
-      this.setState({time: utils.setMinutes(this.state.time, minutes)});
+      this.setState({time: time.setMinutes(this.state.time, minutes)});
     }
   },
 
   _adaptHourToFormat (hour) {
     if (this.props.format === 'ampm') {
-      if (utils.getTimeMode(this.state.time) === 'pm') {
+      if (time.getTimeMode(this.state.time) === 'pm') {
         return hour < 12 ? hour + 12 : hour;
       } else {
         return hour === 12 ? 0 : hour;
@@ -81,7 +81,7 @@ module.exports = React.createClass({
   },
 
   toggleTimeMode () {
-    this.setState({time: utils.toggleTimeMode(this.state.time)});
+    this.setState({time: time.toggleTimeMode(this.state.time)});
   },
 
   renderHours () {

components/clock/minutes.jsx

@@ -1,12 +1,10 @@
 const React = window.React;
+const utils = require('../utils');
 
 const Face = require('./face');
 const Hand = require('./hand');
 
-const { range } = require('../utils/helper');
-const { twoDigits } = require('./../utils/date-time');
-
-const minutes = range(0, 60, 5).map(i => { return twoDigits(i); });
+const minutes = utils.range(0, 60, 5);
 const step = 360 / 60;
 
 module.exports = React.createClass({
@@ -19,7 +17,7 @@ module.exports = React.createClass({
 
   getDefaultProps () {
     return {
-      select: 0,
+      selected: 0,
       onChange: null
     };
   },
@@ -45,9 +43,10 @@ module.exports = React.createClass({
           numbers={minutes}
           spacing={this.props.spacing}
           radius={this.props.radius}
+          twoDigits={true}
           active={this.props.selected} />
         <Hand ref='hand'
-          className={minutes.indexOf(twoDigits(this.props.selected)) === -1 ? 'smallKnob' : ''}
+          className={minutes.indexOf(this.props.selected) === -1 ? 'smallKnob' : ''}
           initialAngle={this.props.selected * step}
           length={this.props.radius - this.props.spacing}
           onHandChange={this._onHandChange}

components/date_picker/dialog.cjsx

@@ -1,7 +1,7 @@
 css       = require './style'
 Calendar  = require '../calendar'
 Dialog    = require '../dialog'
-utils     = require '../utils/date-time'
+time      = require '../utils/time'
 
 module.exports = React.createClass
   displayName: 'CalendarDialog'
@@ -25,7 +25,7 @@ module.exports = React.createClass
   # -- Events
   onCalendarChange: (calendar) ->
     @setState
-      date: utils.clone(calendar.getValue())
+      date: time.clone(calendar.getValue())
       display: 'months'
 
   onDateCancel: (ref, method) ->
@@ -50,9 +50,9 @@ module.exports = React.createClass
     className = "display-#{@state.display}"
     <Dialog ref="dialog" type={css.dialog} className={className} actions={@state.actions}>
       <header className={css.header}>
-        <span className={css.headerWeekday}>{utils.getFullDayOfWeek(@state.date.getDay())}</span>
+        <span className={css.headerWeekday}>{time.getFullDayOfWeek(@state.date.getDay())}</span>
         <div onClick={@displayMonths}>
-          <span className={css.headerMonth}>{utils.getShortMonth(@state.date)}</span>
+          <span className={css.headerMonth}>{time.getShortMonth(@state.date)}</span>
           <span className={css.headerDay}>{@state.date.getDate()}</span>
         </div>
         <span className={css.headerYear} onClick={@displayYears}>

components/date_picker/index.cjsx

@@ -1,7 +1,7 @@
 css            = require './style'
 CalendarDialog = require './dialog'
 Input          = require '../input'
-utils          = require '../utils/date-time'
+time           = require '../utils/time'
 
 module.exports = React.createClass
   displayName  : 'DatePicker'
@@ -27,7 +27,7 @@ module.exports = React.createClass
   # -- Private methods
   formatDate: (date) ->
     day = date.getDate()
-    month = utils.getFullMonth(date)
+    month = time.getFullMonth(date)
     year = date.getFullYear()
     "#{day} #{month} #{year}"
 

components/time_picker/dialog.jsx

@@ -1,9 +1,9 @@
 const React = window.React;
-
 const css = require('./style');
+const time = require('../utils/time');
+
 const Clock = require('../clock');
 const Dialog = require('../dialog');
-const utils = require('../utils/date-time');
 
 module.exports = React.createClass({
   displayName: 'TimePickerDialog',
@@ -83,17 +83,17 @@ module.exports = React.createClass({
 
   render () {
     let className = ` display-${this.state.display}`;
-    className += ` format-${utils.getTimeMode(this.state.time)}`;
+    className += ` format-${time.getTimeMode(this.state.time)}`;
 
     return (
       <Dialog ref="dialog" className={className} type={css.dialog} actions={this.state.actions}>
         <header className={css.header}>
           <span className={css.hours} onClick={this.displayHours}>
-            { utils.twoDigits(this._formatHours()) }
+            { ('0' + this._formatHours()).slice(-2) }
           </span>
           <span className={css.separator}>:</span>
           <span className={css.minutes} onClick={this.displayMinutes}>
-            { utils.twoDigits(this.state.time.getMinutes()) }
+            { ('0' + this.state.time.getMinutes()).slice(-2) }
           </span>
           { this.renderAMPMLabels() }
         </header>

components/time_picker/index.jsx

@@ -1,8 +1,8 @@
 const React = window.React;
+const time = require('../utils/time');
 
 const Input = require('../input');
 const TimeDialog = require('./dialog');
-const utils = require('../utils/date-time');
 
 module.exports = React.createClass({
   displayName: 'TimePicker',
@@ -25,7 +25,7 @@ module.exports = React.createClass({
   },
 
   onTimeSelected (time) {
-    this.refs.input.setValue(utils.formatTime(time, this.props.format));
+    this.refs.input.setValue(time.formatTime(time, this.props.format));
     this.setState({value: time});
   },
 
@@ -35,7 +35,7 @@ module.exports = React.createClass({
 
   formatTime () {
     if (this.state.value) {
-      return utils.formatTime(this.state.value, this.props.format);
+      return time.formatTime(this.state.value, this.props.format);
     }
   },
 

components/utils/events.js

@@ -1,17 +1,5 @@
 module.exports = {
 
-  range (start = 0, stop = null, step = 1) {
-    let [_start, _stop] = (stop !== null) ? [start, stop] : [0, start];
-    let length = Math.max(Math.ceil((_stop - _start) / step), 0);
-    let range = Array(length);
-
-    for (let idx = 0; idx < length; idx++, _start += step) {
-      range[idx] = _start;
-    }
-
-    return range;
-  },
-
   getMousePosition (event) {
     return {
       x: event.pageX,
@@ -43,15 +31,6 @@ module.exports = {
     for (let key in eventMap) {
       document.removeEventListener(key, eventMap[key], false);
     }
-  },
-
-  angleFromPositions (cx, cy, ex, ey) {
-    let theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
-    return theta * 180 / Math.PI;
-  },
-
-  angle360FromPositions (cx, cy, ex, ey) {
-    let angle = this.angleFromPositions(cx, cy, ex, ey);
-    return angle < 0 ? 360 + angle : angle;
   }
+
 };

components/utils/index.js

@@ -1,5 +1,28 @@
 module.exports = {
-  dateTime: require('./date-time'),
-  helper: require('./helper'),
-  prefixer: require('./prefixer')
+
+  angleFromPositions (cx, cy, ex, ey) {
+    let theta = Math.atan2(ey - cy, ex - cx) + Math.PI / 2;
+    return theta * 180 / Math.PI;
+  },
+
+  angle360FromPositions (cx, cy, ex, ey) {
+    let angle = this.angleFromPositions(cx, cy, ex, ey);
+    return angle < 0 ? 360 + angle : angle;
+  },
+
+  range (start = 0, stop = null, step = 1) {
+    let [_start, _stop] = (stop !== null) ? [start, stop] : [0, start];
+    let length = Math.max(Math.ceil((_stop - _start) / step), 0);
+    let range = Array(length);
+
+    for (let idx = 0; idx < length; idx++, _start += step) {
+      range[idx] = _start;
+    }
+
+    return range;
+  },
+
+  events: require('./events'),
+  prefixer: require('./prefixer'),
+  testing: require('./testing')
 };

components/utils/time.js

@@ -172,10 +172,6 @@ module.exports = {
     if (hours.length < 2) hours = '0' + hours;
     if (mins.length < 2) mins = '0' + mins;
     return hours + ':' + mins;
-  },
-
-  twoDigits (number) {
-    return ('0' + number).slice(-2);
   }
 
 };

spec/index.cjsx

@@ -15,7 +15,7 @@ Slider        = require './components/slider'
 Switch        = require './components/switch'
 Calendar      = require './components/calendar'
 Pickers       = require './components/pickers'
-Clock         = require './components/clock'
+Clock         = require '../components/clock'
 Tabs          = require './components/tabs'
 
 Test = React.createClass
@@ -26,19 +26,9 @@ Test = React.createClass
     <app data-toolbox={true}>
       <h1>React-Toolbox <small>New way for create</small></h1>
 
-      <Aside />
-      <Autocomplete />
-      <Button />
-      <Card />
-      <Dialog />
-      <Dropdown />
-      <FontIcon />
-      <Form />
-      <Progress />
-      <Slider />
-      <Switch />
-      <Tabs />
-      <Pickers />
+      <div style={width: '320px'}>
+        <Pickers display="minutes"/>
+      </div>
     </app>
 
 React.render <Test/>, document.body