react-date-field/lib/index.js

React DateField

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactClass = require('react-class');

var _reactClass2 = _interopRequireDefault(_reactClass);

var _objectAssign = require('object-assign');

var _objectAssign2 = _interopRequireDefault(_objectAssign);

var _reactFlex = require('react-flex');

var _reactField = require('react-field');

var _reactField2 = _interopRequireDefault(_reactField);

var _toMoment = require('./toMoment');

var _toMoment2 = _interopRequireDefault(_toMoment);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var notEmpty = function notEmpty(s) {
  return !!s;
};
var join = function join(array) {
  return array.filter(notEmpty).join(' ');
};

var getPicker = function getPicker(props) {
  return _react2.default.Children.toArray(props.children).filter(function (c) {
    return c && c.props && c.props.isDatePicker;
  })[0];
};

var DateField = (function (_Component) {
  _inherits(DateField, _Component);

  function DateField(props) {
    _classCallCheck(this, DateField);

    var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(DateField).call(this, props));

    var picker = getPicker(props) || { props: {} };
    var pickerProps = picker.props;

    var date = pickerProps.defaultDate !== undefined ? pickerProps.defaultDate : new Date();

    _this.state = {
      date: date,
      expanded: props.defaultExpanded || false,
      focused: false
    };
    return _this;
  }

  _createClass(DateField, [{
    key: 'render',
    value: function render() {

      var props = this.p = this.prepareProps(this.props);

      return _react2.default.createElement(
        _reactFlex.Flex,
        _extends({
          inline: true,
          row: true
        }, props, {
          onFocus: this.onFocus,
          tabIndex: this.state.focused ? -1 : this.props.tabIndex || 0
        }),
        this.renderInput(),
        this.renderClearIcon(),
        this.renderCalendarIcon(),
        this.renderDatePicker()
      );
    }
  }, {
    key: 'renderInput',
    value: function renderInput() {
      var props = this.p;
      var inputProps = this.prepareInputProps(props);

      var input = undefined;

      if (props.renderInput) {
        input = props.renderInput(inputProps);
      }

      if (input === undefined) {
        input = _react2.default.createElement(_reactField2.default, inputProps);
      }

      return input;
    }
  }, {
    key: 'renderClearIcon',
    value: function renderClearIcon() {
      var props = this.p;

      if (!props.clearIcon) {
        return;
      }

      var clearIcon = props.clearIcon === true ? '✖' : props.clearIcon;
      var clearIconProps = {
        style: {
          visibility: props.textValue ? 'visible' : 'hidden'
        },
        className: 'react-date-field__clear-icon',
        onMouseDown: this.onClearMouseDown,
        children: clearIcon
      };

      var result = undefined;

      if (props.renderClearIcon) {
        result = props.renderClearIcon(clearIconProps);
      }

      if (result === undefined) {
        result = _react2.default.createElement('span', clearIconProps);
      }

      return result;
    }
  }, {
    key: 'onClearMouseDown',
    value: function onClearMouseDown(event) {
      event.preventDefault();
      this.onPickerChange('', null, event);
    }
  }, {
    key: 'renderCalendarIcon',
    value: function renderCalendarIcon() {
      var result = undefined;
      var renderIcon = this.props.renderCalendarIcon;

      var calendarIconProps = {
        className: 'react-date-field__calendar-icon',
        onMouseDown: this.onCalendarIconMouseDown,
        children: _react2.default.createElement('div', { className: 'react-date-field__calendar-icon-inner' })
      };

      if (renderIcon) {
        result = renderIcon(calendarIconProps);
      }

      if (result === undefined) {
        result = _react2.default.createElement('div', calendarIconProps);
      }

      return result;
    }
  }, {
    key: 'onCalendarIconMouseDown',
    value: function onCalendarIconMouseDown(event) {

      if (this.state.focused) {
        event.preventDefault();
      }

      this.toggleExpand();
    }
  }, {
    key: 'toggleExpand',
    value: function toggleExpand() {
      this.setExpanded(!this.p.expanded);
    }
  }, {
    key: 'prepareProps',
    value: function prepareProps(thisProps) {
      var props = (0, _objectAssign2.default)({}, thisProps);

      props.expanded = props.expanded === undefined ? this.state.expanded : props.expanded;

      var picker = getPicker(props) || { props: {} };
      var pickerProps = picker.props;

      this.pickerProps = pickerProps;

      props.locale = pickerProps.locale;
      props.dateFormat = pickerProps.dateFormat;

      props.date = pickerProps.date !== undefined ?
      //we allow null for input date
      pickerProps.date : this.state.date;

      var date = props.date;

      if (date != null) {
        date = (0, _toMoment2.default)(props.date, props.displayFormat || props.dateFormat, {
          strict: false,
          locale: props.locale
        });

        if (!date.isValid() && props.displayFormat) {
          date = (0, _toMoment2.default)(props.date, props.dateFormat, {
            strict: false,
            locale: props.locale
          });
        }
      }

      props.date = date;
      props.textValue = date && date.isValid() ? date.format(props.displayFormat || props.dateFormat) : '';

      props.className = this.prepareClassName(props);

      return props;
    }
  }, {
    key: 'prepareClassName',
    value: function prepareClassName(props) {
      return join(['react-date-field', props.className, this.state.focused ? join(['react-date-field--focused', props.focusedClassName]) : '']);
    }
  }, {
    key: 'prepareInputProps',
    value: function prepareInputProps(props) {

      var newInputProps = {
        ref: 'field',
        date: props.date,
        onFocus: this.onFieldFocus,
        onBlur: this.onFieldBlur,
        onChange: this.onInputChange,
        className: join(['react-date-field__input', props.inputProps && props.inputProps.className, props.inputClassName])
      };

      if (props.textValue !== undefined) {
        newInputProps.value = props.textValue;
      }

      var inputProps = (0, _objectAssign2.default)({}, props.defaultInputProps, props.inputProps, newInputProps);

      return inputProps;
    }
  }, {
    key: 'onFieldFocus',
    value: function onFieldFocus(event) {

      if (this.state.focused) {
        return;
      }

      this.setState({
        focused: true
      });

      if (this.props.expandOnFocus) {
        this.setExpanded(true);
      }

      this.props.onFocus(event);
    }
  }, {
    key: 'onFieldBlur',
    value: function onFieldBlur(event) {
      this.setState({
        focused: false
      });

      this.setExpanded(false);

      this.props.onBlur(event);
    }
  }, {
    key: 'renderDatePicker',
    value: function renderDatePicker() {
      var props = this.p;

      if (props.expanded) {

        var picker = getPicker(props);

        if (!picker) {
          return;
        }

        return _react2.default.cloneElement(picker, {
          onMouseDown: function onMouseDown(event) {
            event.preventDefault();
          },
          onChange: this.onPickerChange
        });
      }
    }
  }, {
    key: 'onInputChange',
    value: function onInputChange(value, event) {}
  }, {
    key: 'setExpanded',
    value: function setExpanded(bool) {
      if (bool === this.p.expanded) {
        return;
      }

      if (this.props.expanded === undefined) {
        this.setState({
          expanded: bool
        });
      }

      this.props.onExpandChange(bool);
    }
  }, {
    key: 'onPickerChange',
    value: function onPickerChange(dateText, mom, event) {
      if (this.p.collapseOnChange) {
        this.setExpanded(false);
      }

      var pickerProps = this.pickerProps;

      if (pickerProps.date === undefined) {
        //the picker is uncontrolled, so also the datefield should be
        //uncontrolled and reflect the changes
        this.setState({
          date: dateText
        });
      }

      //call the onChange of the picker!
      var args = [].concat(Array.prototype.slice.call(arguments));

      if (pickerProps.onChange) {
        pickerProps.onChange.apply(pickerProps, _toConsumableArray(args));
      }
    }
  }, {
    key: 'onFocus',
    value: function onFocus(event) {
      if (this.state.focused) {
        return;
      }

      this.focusField();
    }
  }, {
    key: 'focusField',
    value: function focusField() {
      var input = (0, _reactDom.findDOMNode)(this.refs.field);

      input.focus();
    }
  }]);

  return DateField;
})(_reactClass2.default);

exports.default = DateField;

var emptyFn = function emptyFn() {};

DateField.defaultProps = {
  expandOnFocus: true,
  collapseOnChange: true,
  onChange: emptyFn,
  onBlur: emptyFn,
  onFocus: emptyFn,
  clearIcon: true,
  onExpandChange: function onExpandChange() {}
};

DateField.propTypes = {
  children: function children(props, propName) {
    var picker = _react2.default.Children.toArray(props.children).filter(function (c) {
      return c && c.props && c.props.isDatePicker;
    })[0];

    if (!picker) {
      return new Error('You should render a "DatePicker" child in the DateField component.');
    }
  }
};