ldx-widgets/dist/components/date_picker.js

widgets

(function() {
  var DatePicker, InputMixin, PropTypes, React, ReactDatepicker, assign, createClass, div, moment, ref, span;

  React = require('react');

  createClass = require('create-react-class');

  PropTypes = require('prop-types');

  ReactDatepicker = React.createFactory(require('react-datepicker')["default"]);

  moment = require('moment');

  assign = require('lodash/assign');

  InputMixin = require('../mixins/input_mixin');

  ref = require('react-dom-factories'), div = ref.div, span = ref.span;

  DatePicker = createClass({
    displayName: 'DatePicker',
    mixins: [InputMixin],
    contextTypes: {
      clearValidationError: PropTypes.func,
      addValidationError: PropTypes.func,
      getValidationStatus: PropTypes.func,
      toggleValidationError: PropTypes.func
    },
    propTypes: {
      placeholderText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
      dateFormat: PropTypes.string,
      wrapperClass: PropTypes.string,
      className: PropTypes.string,
      minDate: PropTypes.object,
      maxDate: PropTypes.object,
      onChange: PropTypes.func.isRequired,
      tabIndex: PropTypes.number,
      hasDefaultDate: PropTypes.bool,
      validation: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
      selected: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
    },
    getDefaultProps: function() {
      return {
        hasDefaultDate: true,
        placeholderText: 'Select a date',
        dateFormat: 'MM/DD/YYYY',
        className: null,
        includeTime: false,
        returnDateString: null,
        onChange: function() {}
      };
    },
    getInitialState: function() {
      return {
        selected: null
      };
    },
    componentWillMount: function() {
      var hasDefaultDate, selected;
      hasDefaultDate = this.props.hasDefaultDate;
      if (hasDefaultDate && (this.props.selected != null)) {
        selected = this.props.selected;
      } else if (hasDefaultDate) {
        selected = moment();
      } else {
        selected = null;
      }
      return this.setState({
        selected: selected
      });
    },
    componentWillReceiveProps: function(nextProps) {
      var ref1, ref2;
      if (((ref1 = nextProps.selected) != null ? ref1.format(this.props.returnDateString || this.props.dateFormat) : void 0) !== ((ref2 = this.props.selected) != null ? ref2.format(this.props.returnDateString || this.props.dateFormat) : void 0)) {
        return this.setState({
          selected: nextProps.selected
        });
      }
    },
    render: function() {
      var error, forceShowAllErrors, isValid, mainClass, props, ref1, valueHasChanged, wrapperClass;
      ref1 = this.context.getValidationStatus(this.inputId), error = ref1.error, forceShowAllErrors = ref1.forceShowAllErrors;
      valueHasChanged = this.state.valueHasChanged;
      isValid = error == null;
      props = assign({}, this.props, {
        onChange: this.handleDateChange,
        onChangeRaw: this.handleRawDateChange,
        key: 'picker'
      });
      wrapperClass = props.wrapperClass;
      mainClass = 'datepicker-wrapper';
      if (wrapperClass != null) {
        mainClass += " " + wrapperClass;
      }
      if (!isValid && (valueHasChanged || forceShowAllErrors)) {
        mainClass += ' invalid';
      }
      return div({
        className: mainClass
      }, [
        ReactDatepicker(props), div({
          className: 'field-errors-show',
          key: 'textInputErrorsShow',
          ref: 'errorAnchor',
          onMouseOver: this.handleErrorMouseOver,
          onMouseOut: this.handleErrorMouseOut
        })
      ]);
    },
    handleRawDateChange: function(e) {
      var dateFormat, ref1, typedValue, validation, value, valueHasChanged;
      ref1 = this.props, dateFormat = ref1.dateFormat, validation = ref1.validation;
      valueHasChanged = this.state.valueHasChanged;
      typedValue = e.target.value;
      value = moment(typedValue, dateFormat);
      this.validate(validation, value);
      if (!valueHasChanged) {
        return this.setState({
          valueHasChanged: true
        });
      }
    },
    handleDateChange: function(date) {
      var jsonPath, ref1, validation;
      ref1 = this.props, validation = ref1.validation, jsonPath = ref1.jsonPath;
      this.validate(validation, date);
      return this.setState({
        selected: date,
        valueHasChanged: true
      }, (function(_this) {
        return function() {
          var base;
          return typeof (base = _this.props).onChange === "function" ? base.onChange(date, jsonPath) : void 0;
        };
      })(this));
    },
    getDateValue: function() {
      var hasDefaultDate, ref1, returnDateString, selected;
      ref1 = this.props, returnDateString = ref1.returnDateString, hasDefaultDate = ref1.hasDefaultDate;
      selected = this.state.selected;
      if ((returnDateString != null) && (selected != null)) {
        return selected.format(returnDateString);
      } else if (selected != null) {
        return selected;
      } else if (hasDefaultDate) {
        return moment();
      } else {
        return null;
      }
    }
  });

  module.exports = DatePicker;

}).call(this);