Refactor timepicker and utils organization

react-toolbox · Sep 6, 2015 · 459aaef · 459aaef
1 parent 16ac6b2
commit 459aaef
Show file tree

Hide file tree

Showing 17 changed files with 114 additions and 129 deletions.
diff --git a/components/calendar/day.cjsx b/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()

diff --git a/components/calendar/index.cjsx b/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) ->

diff --git a/components/calendar/month.cjsx b/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}

diff --git a/components/clock/face.jsx b/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>
             );
           })

diff --git a/components/clock/hand.jsx b/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)`
     });

diff --git a/components/clock/hours.jsx b/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>
     );

diff --git a/components/clock/index.jsx b/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 () {

diff --git a/components/clock/minutes.jsx b/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}

diff --git a/components/date_picker/dialog.cjsx b/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}>