2.8.1

Author: jquense

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "react-widgets",
-  "version": "2.7.4",
+  "version": "2.8.0",
   "main": "dist/react-widgets.js",
   "description": "A set of input widgets for React",
   "homepage": "http://jquense.github.io/react-widgets/docs",

dist/react-widgets.js

@@ -72,6 +72,10 @@ var _util_2 = babelHelpers.interopRequireDefault(_util_);
 
 //values, omit
 
+var _utilWidgetHelpers = require('./util/widgetHelpers');
+
+var _utilInteraction = require('./util/interaction');
+
 var dir = _utilConstants2['default'].directions,
     values = function values(obj) {
   return Object.keys(obj).map(function (k) {
@@ -109,6 +113,9 @@ var format = function format(props, f) {
 
 var propTypes = {
 
+  disabled: _utilPropTypes2['default'].disabled,
+  readOnly: _utilPropTypes2['default'].readOnly,
+
   onChange: _react2['default'].PropTypes.func,
   value: _react2['default'].PropTypes.instanceOf(Date),
 
@@ -124,10 +131,6 @@ var propTypes = {
     if (VIEW_OPTIONS.indexOf(props[propname]) < VIEW_OPTIONS.indexOf(props.initialView)) return new Error(('The `' + propname + '` prop: `' + props[propname] + '` cannot be \'lower\' than the `initialView`\n        prop. This creates a range that cannot be rendered.').replace(/\n\t/g, ''));
   },
 
-  disabled: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.oneOf(['disabled'])]),
-
-  readOnly: _react2['default'].PropTypes.oneOfType([_react2['default'].PropTypes.bool, _react2['default'].PropTypes.oneOf(['readOnly'])]),
-
   culture: _react2['default'].PropTypes.string,
 
   footer: _react2['default'].PropTypes.bool,
@@ -149,25 +152,35 @@ var propTypes = {
   })
 };
 
-var Calendar = _react2['default'].createClass({
-
-  displayName: 'Calendar',
-
-  mixins: [require('./mixins/WidgetMixin'), require('./mixins/TimeoutMixin'), require('./mixins/PureRenderMixin'), require('./mixins/RtlParentContextMixin'), require('./mixins/AriaDescendantMixin')()],
-
-  propTypes: propTypes,
-
-  getInitialState: function getInitialState() {
+var Calendar = _react2['default'].createClass(babelHelpers.createDecoratedObject([{
+  key: 'displayName',
+  initializer: function initializer() {
+    return 'Calendar';
+  }
+}, {
+  key: 'mixins',
+  initializer: function initializer() {
+    return [require('./mixins/TimeoutMixin'), require('./mixins/PureRenderMixin'), require('./mixins/RtlParentContextMixin'), require('./mixins/AriaDescendantMixin')()];
+  }
+}, {
+  key: 'propTypes',
+  initializer: function initializer() {
+    return propTypes;
+  }
+}, {
+  key: 'getInitialState',
+  value: function getInitialState() {
     var value = this.inRangeValue(this.props.value);
 
     return {
       selectedIndex: 0,
       view: this.props.initialView || 'month',
       currentDate: value ? new Date(value) : this.inRangeValue(new Date())
     };
-  },
-
-  getDefaultProps: function getDefaultProps() {
+  }
+}, {
+  key: 'getDefaultProps',
+  value: function getDefaultProps() {
     return {
 
       value: null,
@@ -183,9 +196,10 @@ var Calendar = _react2['default'].createClass({
       ariaActiveDescendantKey: 'calendar',
       messages: msgs({})
     };
-  },
-
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
+  }
+}, {
+  key: 'componentWillReceiveProps',
+  value: function componentWillReceiveProps(nextProps) {
     var bottom = VIEW_OPTIONS.indexOf(nextProps.initialView),
         top = VIEW_OPTIONS.indexOf(nextProps.finalView),
         current = VIEW_OPTIONS.indexOf(this.state.view),
@@ -198,9 +212,10 @@ var Calendar = _react2['default'].createClass({
     if (!_utilDates2['default'].eq(val, dateOrNull(this.props.value), VIEW_UNIT[view])) this.setState({
       currentDate: val ? new Date(val) : new Date()
     });
-  },
-
-  render: function render() {
+  }
+}, {
+  key: 'render',
+  value: function render() {
     var _this = this;
 
     var _props = this.props;
@@ -229,8 +244,8 @@ var Calendar = _react2['default'].createClass({
 
     unit = unit === 'day' ? 'date' : unit;
 
-    var viewID = this._id('_calendar'),
-        labelID = this._id('_calendar_label'),
+    var viewID = _utilWidgetHelpers.instanceId(this, '_calendar'),
+        labelID = _utilWidgetHelpers.instanceId(this, '_calendar_label'),
         key = view + '_' + _utilDates2['default'][view](currentDate);
 
     var elementProps = _util_2['default'].omit(this.props, Object.keys(propTypes)),
@@ -247,7 +262,7 @@ var Calendar = _react2['default'].createClass({
         onKeyDown: this._keyDown,
         onFocus: this._focus.bind(null, true),
         onBlur: this._focus.bind(null, false),
-        className: (0, _classnames2['default'])(className, 'rw-calendar', 'rw-widget', {
+        className: _classnames2['default'](className, 'rw-calendar', 'rw-widget', {
           'rw-state-focus': focused,
           'rw-state-disabled': disabled,
           'rw-state-readonly': readOnly,
@@ -284,7 +299,7 @@ var Calendar = _react2['default'].createClass({
           today: todaysDate,
           value: value,
           focused: currentDate,
-          onChange: this._maybeHandle(this.change),
+          onChange: this.change,
           onKeyDown: this._keyDown,
           ariaActiveDescendantKey: 'calendarView'
         }))
@@ -295,12 +310,14 @@ var Calendar = _react2['default'].createClass({
         culture: culture,
         disabled: disabled || todayNotInRange,
         readOnly: readOnly,
-        onClick: this._maybeHandle(this.select)
+        onClick: this.select
       })
     );
-  },
-
-  navigate: _util_2['default'].ifNotDisabled(function (direction, date) {
+  }
+}, {
+  key: 'navigate',
+  decorators: [_utilInteraction.widgetEditable],
+  value: function navigate(direction, date) {
     var view = this.state.view,
         slideDir = direction === dir.LEFT || direction === dir.UP ? 'right' : 'left';
 
@@ -311,7 +328,7 @@ var Calendar = _react2['default'].createClass({
     if (direction === dir.UP) view = NEXT_VIEW[view] || view;
 
     if (this.isValidView(view) && _utilDates2['default'].inRange(date, this.props.min, this.props.max, view)) {
-      this.notify('onNavigate', [date, slideDir, view]);
+      _utilWidgetHelpers.notify(this.props.onNavigate, [date, slideDir, view]);
       this.focus(true);
 
       this.setState({
@@ -320,41 +337,50 @@ var Calendar = _react2['default'].createClass({
         view: view
       });
     }
-  }),
-
-  focus: function focus() {
+  }
+}, {
+  key: 'focus',
+  value: function focus() {
     if (+this.props.tabIndex > -1) _utilCompat2['default'].findDOMNode(this).focus();
-  },
 
-  _focus: _util_2['default'].ifNotDisabled(true, function (focused, e) {
+    //console.log(document.activeElement)
+  }
+}, {
+  key: '_focus',
+  decorators: [_utilInteraction.widgetEnabled],
+  value: function _focus(focused, e) {
     var _this2 = this;
 
     if (+this.props.tabIndex === -1) return;
 
     this.setTimeout('focus', function () {
       if (focused !== _this2.state.focused) {
-        _this2.notify(focused ? 'onFocus' : 'onBlur', e);
+        _utilWidgetHelpers.notify(_this2.props[focused ? 'onFocus' : 'onBlur'], e);
         _this2.setState({ focused: focused });
       }
     });
-  }),
-
-  change: function change(date) {
+  }
+}, {
+  key: 'change',
+  decorators: [_utilInteraction.widgetEditable],
+  value: function change(date) {
     if (this.state.view === this.props.initialView) {
-      this.notify('onChange', date);
+      _utilWidgetHelpers.notify(this.props.onChange, date);
       this.focus();
       return;
     }
 
     this.navigate(dir.DOWN, date);
-  },
-
-  select: function select(date) {
+  }
+}, {
+  key: 'select',
+  decorators: [_utilInteraction.widgetEditable],
+  value: function select(date) {
     var view = this.props.initialView,
         slideDir = view !== this.state.view || _utilDates2['default'].gt(date, this.state.currentDate) ? 'left' // move down to a the view
     : 'right';
 
-    this.notify('onChange', date);
+    _utilWidgetHelpers.notify(this.props.onChange, date);
 
     if (this.isValidView(view) && _utilDates2['default'].inRange(date, this.props.min, this.props.max, view)) {
       this.focus();
@@ -365,18 +391,21 @@ var Calendar = _react2['default'].createClass({
         view: view
       });
     }
-  },
-
-  nextDate: function nextDate(direction) {
+  }
+}, {
+  key: 'nextDate',
+  value: function nextDate(direction) {
     var method = direction === dir.LEFT ? 'subtract' : 'add',
         view = this.state.view,
         unit = view === views.MONTH ? view : views.YEAR,
         multi = MULTIPLIER[view] || 1;
 
     return _utilDates2['default'][method](this.state.currentDate, 1 * multi, unit);
-  },
-
-  _keyDown: _util_2['default'].ifNotDisabled(function (e) {
+  }
+}, {
+  key: '_keyDown',
+  decorators: [_utilInteraction.widgetEditable],
+  value: function _keyDown(e) {
     var ctrl = e.ctrlKey,
         key = e.key,
         direction = ARROWS_TO_DIRECTION[key],
@@ -407,35 +436,38 @@ var Calendar = _react2['default'].createClass({
       }
     }
 
-    this.notify('onKeyDown', [e]);
-  }),
-
-  _label: function _label() {
+    _utilWidgetHelpers.notify(this.props.onKeyDown, [e]);
+  }
+}, {
+  key: '_label',
+  value: function _label() {
     var _props2 = this.props;
     var culture = _props2.culture;
     var props = babelHelpers.objectWithoutProperties(_props2, ['culture']);
     var view = this.state.view;
     var dt = this.state.currentDate;
 
     if (view === 'month') return localizers.date.format(dt, format(props, 'header'), culture);else if (view === 'year') return localizers.date.format(dt, format(props, 'year'), culture);else if (view === 'decade') return localizers.date.format(_utilDates2['default'].startOf(dt, 'decade'), format(props, 'decade'), culture);else if (view === 'century') return localizers.date.format(_utilDates2['default'].startOf(dt, 'century'), format(props, 'century'), culture);
-  },
-
-  inRangeValue: function inRangeValue(_value) {
+  }
+}, {
+  key: 'inRangeValue',
+  value: function inRangeValue(_value) {
     var value = dateOrNull(_value);
 
     if (value === null) return value;
 
     return _utilDates2['default'].max(_utilDates2['default'].min(value, this.props.max), this.props.min);
-  },
-
-  isValidView: function isValidView(next) {
+  }
+}, {
+  key: 'isValidView',
+  value: function isValidView(next) {
     var bottom = VIEW_OPTIONS.indexOf(this.props.initialView),
         top = VIEW_OPTIONS.indexOf(this.props.finalView),
         current = VIEW_OPTIONS.indexOf(next);
 
     return current >= bottom && current <= top;
   }
-});
+}]));
 
 function dateOrNull(dt) {
   if (dt && !isNaN(dt.getTime())) return dt;
@@ -445,13 +477,13 @@ function dateOrNull(dt) {
 function msgs(msgs) {
   return babelHelpers._extends({
     moveBack: 'navigate back',
-    moveForward: 'navigate forward' }, msgs);
+    moveForward: 'navigate forward'
+  }, msgs);
 }
 
-var UncontrolledCalendar = (0, _uncontrollable2['default'])(Calendar, { value: 'onChange' });
+var UncontrolledCalendar = _uncontrollable2['default'](Calendar, { value: 'onChange' });
 
 UncontrolledCalendar.BaseCalendar = Calendar;
 
 exports['default'] = UncontrolledCalendar;
-module.exports = exports['default'];
-//console.log(document.activeElement)
+module.exports = exports['default'];