the great purge

Author: jquense

_test-bootstrap.js

@@ -2,10 +2,10 @@
 /* global it, expect */
 'use strict';
 var React = require('react');
-var _ = require('./src/util/_')
+var widgetHelpers = require('./src/util/widgetHelpers')
 
 //disable this particular optimization
-sinon.stub(_, 'isFirstFocusedRender', ()=> true)
+sinon.stub(widgetHelpers, 'isFirstFocusedRender', ()=> true)
 
 var testsContext = require.context("./test", true, /\.browser\.(js$|jsx$)/);
 

src/Calendar.jsx

@@ -14,7 +14,8 @@ import SlideTransition from './SlideTransition';
 import dates from './util/dates';
 import constants from './util/constants';
 import _ from './util/_'; //values, omit
-import ifNotDisabled from './util/ifNotDisabled';
+import { instanceId, notify } from './util/widgetHelpers';
+import { widgetEditable, widgetEnabled } from './util/interaction';
 
 let dir    = constants.directions
   , values = obj => Object.keys(obj).map( k => obj[k] )
@@ -56,6 +57,9 @@ let format = (props, f) => props[f + 'Format'] || localizers.date.formats[f]
 
 let propTypes = {
 
+  disabled:       CustomPropTypes.disabled,
+  readOnly:       CustomPropTypes.readOnly,
+
   onChange:      React.PropTypes.func,
   value:         React.PropTypes.instanceOf(Date),
 
@@ -73,16 +77,6 @@ let propTypes = {
         prop. This creates a range that cannot be rendered.`.replace(/\n\t/g, ''))
   },
 
-  disabled:      React.PropTypes.oneOfType([
-                   React.PropTypes.bool,
-                   React.PropTypes.oneOf(['disabled'])
-                 ]),
-
-  readOnly:      React.PropTypes.oneOfType([
-                   React.PropTypes.bool,
-                   React.PropTypes.oneOf(['readOnly'])
-                 ]),
-
   culture:       React.PropTypes.string,
 
   footer:        React.PropTypes.bool,
@@ -109,7 +103,6 @@ var Calendar = React.createClass({
   displayName: 'Calendar',
 
   mixins: [
-    require('./mixins/WidgetMixin'),
     require('./mixins/TimeoutMixin'),
     require('./mixins/PureRenderMixin'),
     require('./mixins/RtlParentContextMixin'),
@@ -181,8 +174,8 @@ var Calendar = React.createClass({
 
     unit = unit === 'day' ? 'date' : unit
 
-    let viewID = this._id('_calendar')
-      , labelID = this._id('_calendar_label')
+    let viewID = instanceId(this, '_calendar')
+      , labelID = instanceId(this, '_calendar_label')
       , key = view + '_' + dates[view](currentDate);
 
     let elementProps = _.omit(this.props, Object.keys(propTypes))
@@ -250,7 +243,7 @@ var Calendar = React.createClass({
     )
   },
 
-  @ifNotDisabled
+  @widgetEditable
   navigate(direction, date){
     var view     =  this.state.view
       , slideDir = (direction === dir.LEFT || direction === dir.UP)
@@ -269,7 +262,7 @@ var Calendar = React.createClass({
       view = NEXT_VIEW[view] || view
 
     if ( this.isValidView(view) && dates.inRange(date, this.props.min, this.props.max, view)) {
-      this.notify('onNavigate', [date, slideDir, view])
+      notify(this.props.onNavigate, [date, slideDir, view])
       this.focus(true);
 
       this.setState({
@@ -287,38 +280,38 @@ var Calendar = React.createClass({
     //console.log(document.activeElement)
   },
 
-  @ifNotDisabled(true)
+  @widgetEnabled
   _focus(focused, e){
     if ( +this.props.tabIndex === -1)
       return
 
     this.setTimeout('focus', () => {
       if( focused !== this.state.focused){
-        this.notify(focused ? 'onFocus' : 'onBlur', e)
+        notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
         this.setState({ focused })
       }
     })
   },
 
-  @ifNotDisabled
+  @widgetEditable
   change(date){
     if (this.state.view === this.props.initialView){
-      this.notify('onChange', date)
+      notify(this.props.onChange, date)
       this.focus();
       return;
     }
 
     this.navigate(dir.DOWN, date)
   },
 
-  @ifNotDisabled
+  @widgetEditable
   select(date){
     var view = this.props.initialView
       , slideDir = view !== this.state.view || dates.gt(date, this.state.currentDate)
           ? 'left' // move down to a the view
           : 'right';
 
-    this.notify('onChange', date)
+    notify(this.props.onChange, date)
 
     if ( this.isValidView(view) && dates.inRange(date, this.props.min, this.props.max, view)) {
       this.focus();
@@ -329,7 +322,6 @@ var Calendar = React.createClass({
         view: view
       })
     }
-
   },
 
   nextDate(direction){
@@ -341,7 +333,7 @@ var Calendar = React.createClass({
     return dates[method](this.state.currentDate, 1 * multi, unit)
   },
 
-   @ifNotDisabled
+   @widgetEditable
   _keyDown(e){
     var ctrl = e.ctrlKey
       , key  = e.key
@@ -382,7 +374,7 @@ var Calendar = React.createClass({
       }
     }
 
-    this.notify('onKeyDown', [e])
+    notify(this.props.onKeyDown, [e])
   },
 
   _label() {

src/Century.jsx

@@ -3,6 +3,7 @@ import cn         from 'classnames';
 import dates      from './util/dates';
 import config from './util/configuration';import _          from './util/_';
 import CustomPropTypes from './util/propTypes';
+import { instanceId } from './util/widgetHelpers';
 
 let localizers   = config.locale;
 let format = props => props.decadeFormat || localizers.date.formats.decade
@@ -26,7 +27,6 @@ export default React.createClass({
   displayName: 'CenturyView',
 
   mixins: [
-    require('./mixins/WidgetMixin'),
     require('./mixins/PureRenderMixin'),
     require('./mixins/RtlChildContextMixin'),
     require('./mixins/AriaDescendantMixin')()
@@ -35,7 +35,7 @@ export default React.createClass({
   propTypes,
 
   componentDidUpdate() {
-    let activeId = optionId(this._id(), this.props.focused);
+    let activeId = optionId(instanceId(this), this.props.focused);
     this.ariaActiveDescendant(activeId)
   },
 
@@ -60,9 +60,9 @@ export default React.createClass({
 
   _row(row, rowIdx) {
     let {
-        focused, selected, disabled, onChange
+        focused, disabled, onChange
       , value, today, culture, min, max } = this.props
-      , id = this._id('_century');
+      , id = instanceId(this, '_century');
 
     return (
       <tr key={'row_' + rowIdx} role='row'>