ldx-widgets/dist/components/grid_form/grid_form_date_picker.js

widgets

(function() {
  var DatePicker, GridFormDatePicker, PropTypes, React, SelectInput2, assign, createClass, div, find, label, last, moment, omit, ref, span;

  React = require('react');

  PropTypes = require('prop-types');

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

  assign = require('lodash/assign');

  omit = require('lodash/omit');

  find = require('lodash/find');

  last = require('lodash/last');

  moment = require('moment');

  DatePicker = React.createFactory(require('../date_picker'));

  SelectInput2 = React.createFactory(require('../select_input_2'));

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


  /*&
  @general - 
    This component passes all props forward to datepicker, see datepicker component for it's props.
  
  @props.formLabel - OPTIONAL - [string]
    The value of the label that will display to the left of the input
  
  @props.className - OPTIONAL - [string] - default 'grid grid-pad'
    optional class to be added the main div
  
  @props.labelColumnClass - OPTIONAL - [string]
    optional class that will be added to the label column
  
  @props.inputColumnClass - OPTIONAL - [string]
    optional class that will be added to the input column
  
  @props.isFieldRequired - OPTIONAL - [boolean]
    optional boolean that will display the red asterisk if true
  
  @props.fullRow - OPTIONAL - [boolean]
    optional boolean that will determine whether to display the input in a full row with or without a label
  
  @props.enableTime - OPTIONAL - [boolean]
    includes the time picker
  
  @props.maxDate - OPTIONAL - [moment]
    when using the time picker it will disable times of day after this value
  
  @props.minDate - OPTIONAL - [moment]
    when using the time picker it will disable times of day before this value
  
  @props.children - OPTIONAL - [array]
    optional array of children 
  &
   */

  GridFormDatePicker = createClass({
    displayName: 'GridFormDatePicker',
    propTypes: {
      formLabel: PropTypes.string,
      className: PropTypes.string,
      labelColumnClass: PropTypes.string,
      inputColumnClass: PropTypes.string,
      isFieldRequired: PropTypes.bool,
      fullRow: PropTypes.bool,
      enableTime: PropTypes.bool,
      twentyFourHour: PropTypes.bool,
      selected: PropTypes.object,
      minutes: PropTypes.array,
      AmPm: PropTypes.array,
      isInPopover: PropTypes.bool,
      disabled: PropTypes.bool,
      onChange: PropTypes.func,
      timeColumns: PropTypes.number,
      returnDateString: PropTypes.string,
      maxDate: PropTypes.object,
      minDate: PropTypes.object
    },
    getDefaultProps: function() {
      return {
        labelColumnClass: 'col-3-12',
        inputColumnClass: 'col-9-12',
        className: 'grid grid-pad',
        isFieldRequired: false,
        fullRow: true,
        enableTime: false,
        twentyFourHour: false,
        minutes: [0, 15, 30, 45],
        AmPm: ['am', 'pm'],
        isInPopover: false,
        disabled: false,
        timeColumns: 2
      };
    },
    componentDidMount: function() {
      return this.changeOnOutOfRange();
    },
    componentDidUpdate: function() {
      return this.changeOnOutOfRange();
    },
    changeOnOutOfRange: function() {
      var controlValue, maxDate, minDate, propsValue, ref1, selected;
      ref1 = this.props, selected = ref1.selected, maxDate = ref1.maxDate, minDate = ref1.minDate;
      if ((selected != null) && ((maxDate != null) || (minDate != null))) {
        propsValue = this.getMomentObject(selected);
        controlValue = this.getMomentObject(this.getValue());
        if (!propsValue.isSame(controlValue, 'minute')) {
          return this.handleChange();
        }
      }
    },
    render: function() {
      var ampm, children, className, classes, content, disabled, enableTime, formLabel, fullRow, hour, hourOptions, input, inputCell, inputColumnClass, inputProps, inputTextClass, isFieldRequired, isInPopover, jsonPath, labelClass, labelColumnClass, labelField, minute, onChange, ref1, ref2, selected, tabId, tabIndex, twentyFourHour;
      ref1 = this.props, formLabel = ref1.formLabel, className = ref1.className, labelColumnClass = ref1.labelColumnClass, inputColumnClass = ref1.inputColumnClass, inputTextClass = ref1.inputTextClass, isFieldRequired = ref1.isFieldRequired, selected = ref1.selected, fullRow = ref1.fullRow, enableTime = ref1.enableTime, twentyFourHour = ref1.twentyFourHour, tabId = ref1.tabId, children = ref1.children, isInPopover = ref1.isInPopover, tabIndex = ref1.tabIndex, disabled = ref1.disabled, onChange = ref1.onChange, jsonPath = ref1.jsonPath;
      if (formLabel != null) {
        labelClass = 'form-label';
        if (isFieldRequired) {
          labelClass += ' is-required';
        }
        labelField = div({
          key: 'label',
          className: labelColumnClass
        }, label({
          className: labelClass
        }, formLabel));
      }
      inputProps = omit(assign({}, this.props, {
        ref: 'input'
      }), ['className']);
      inputProps.onChange = this.handleChange;
      input = DatePicker(inputProps);
      if (enableTime) {
        classes = this.getCellClasses(inputColumnClass);
        ref2 = this.parseTime(selected), hour = ref2.hour, minute = ref2.minute, ampm = ref2.ampm;
        hourOptions = this.getHourOptions({
          minute: minute,
          ampm: ampm
        });
        inputCell = [
          div({
            key: 'picker',
            className: classes[0]
          }, input), div({
            key: 'time1',
            className: classes[1]
          }, [
            SelectInput2({
              ref: 'hour',
              key: 'hour',
              tabId: tabId,
              wrapperClass: 'hour',
              value: hour || '',
              options: hourOptions,
              onChange: this.handleChange,
              disabled: disabled,
              isInPopover: isInPopover,
              tabIndex: tabIndex,
              jsonPath: jsonPath
            }), span({
              key: 'divide',
              className: 'time-divide'
            }, ':'), SelectInput2({
              ref: 'minute',
              key: 'minute',
              wrapperClass: 'minutes',
              tabId: tabId,
              value: minute || '',
              options: this.getMinuteOptions({
                hour: hour,
                ampm: ampm
              }, hourOptions),
              onChange: this.handleChange,
              disabled: disabled,
              isInPopover: isInPopover,
              tabIndex: tabIndex,
              jsonPath: jsonPath
            }), !twentyFourHour ? SelectInput2({
              ref: 'ampm',
              key: 'ampm',
              wrapperClass: 'ampm',
              tabId: tabId,
              value: ampm || '',
              options: this.getAmPmOptions(),
              onChange: this.handleChange,
              disabled: disabled,
              isInPopover: isInPopover,
              tabIndex: tabIndex,
              jsonPath: jsonPath
            }) : void 0
          ])
        ];
      } else {
        inputCell = div({
          key: 'input',
          className: inputColumnClass
        }, input);
      }
      if (fullRow && (formLabel != null)) {
        content = [labelField, inputCell].concat(children);
        return div({
          className: className
        }, content);
      } else if (fullRow) {
        content = [inputCell].concat(children);
        return div({
          className: className
        }, content);
      } else {
        return inputCell;
      }
    },
    handleChange: function() {
      var jsonPath, onChange, ref1, value;
      ref1 = this.props, onChange = ref1.onChange, jsonPath = ref1.jsonPath;
      value = this.getValue();
      return this.props.onChange(value, jsonPath);
    },
    getValue: function() {
      var ampm, date, enableTime, hour, minute, ref1, ref2, returnDateString, rv, timestamp, twentyFourHour;
      ref1 = this.props, enableTime = ref1.enableTime, returnDateString = ref1.returnDateString, twentyFourHour = ref1.twentyFourHour;
      timestamp = this.refs.input.getValue();
      if (timestamp == null) {
        return null;
      }
      if (!enableTime) {
        return timestamp;
      }
      minute = this.refs.minute.getValue();
      hour = this.refs.hour.getValue();
      ampm = ((ref2 = this.refs.ampm) != null ? ref2.getValue() : void 0) || '';
      if (returnDateString != null) {
        date = moment(timestamp, returnDateString).format('YYYYMMDD');
        rv = moment("" + date + hour + minute + ampm, twentyFourHour ? 'YYYYMMDDHHmm' : 'YYYYMMDDhmma');
        rv = rv.format(returnDateString);
        return rv;
      } else {
        date = timestamp.format('YYYYMMDD');
        return moment("" + date + hour + minute + ampm, twentyFourHour ? 'YYYYMMDDHHmm' : 'YYYYMMDDhmma');
      }
    },
    getMomentObject: function(date) {
      var returnDateString;
      returnDateString = this.props.returnDateString;
      if (returnDateString != null) {
        return moment(date, returnDateString);
      } else {
        return date;
      }
    },
    parseTime: function(timestamp) {
      var ref1, returnDateString, twentyFourHour;
      if (timestamp == null) {
        return {};
      }
      ref1 = this.props, twentyFourHour = ref1.twentyFourHour, returnDateString = ref1.returnDateString;
      timestamp = this.getMomentObject(timestamp);
      return {
        hour: timestamp.format(twentyFourHour ? 'HH' : 'h'),
        minute: timestamp.format('mm'),
        ampm: timestamp.format('a')
      };
    },
    getHourOptions: function(parsedTime) {
      var hour, hourOptions, hoursArray, i, results, twentyFourHour;
      twentyFourHour = this.props.twentyFourHour;
      hoursArray = twentyFourHour ? (function() {
        results = [];
        for (i = 0; i <= 23; i++){ results.push(i); }
        return results;
      }).apply(this) : [12].concat([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11]);
      hourOptions = (function() {
        var j, len, results1;
        results1 = [];
        for (j = 0, len = hoursArray.length; j < len; j++) {
          hour = hoursArray[j];
          results1.push({
            label: twentyFourHour ? this.prependZero(hour) : "" + hour,
            value: twentyFourHour ? this.prependZero(hour) : "" + hour,
            disabled: false
          });
        }
        return results1;
      }).call(this);
      this.removeOutOfRange('hours', parsedTime, hourOptions);
      return hourOptions;
    },
    getMinuteOptions: function(parsedTime, hourOptions) {
      var minute, minuteOptions, minutes;
      minutes = this.props.minutes;
      minuteOptions = (function() {
        var i, len, results;
        results = [];
        for (i = 0, len = minutes.length; i < len; i++) {
          minute = minutes[i];
          results.push({
            label: this.prependZero(minute),
            value: this.prependZero(minute),
            disabled: false
          });
        }
        return results;
      }).call(this);
      this.removeOutOfRange('minutes', parsedTime, minuteOptions, hourOptions);
      return minuteOptions;
    },
    getAmPmOptions: function() {
      var AmPm, ampmOptions, opt;
      AmPm = this.props.AmPm;
      ampmOptions = (function() {
        var i, len, results;
        results = [];
        for (i = 0, len = AmPm.length; i < len; i++) {
          opt = AmPm[i];
          results.push({
            label: opt,
            value: opt
          });
        }
        return results;
      })();
      this.removeOutOfRangeAmPm(ampmOptions);
      return ampmOptions;
    },
    removeOutOfRange: function(timeSection, parsedTime, optionsList, hourOptions) {
      var checkTime, currentValue, dateFormat, firstMinute, i, j, lastMinute, maxDate, maxDay, minDate, minDay, minutes, o, option, ref1, ref2, selected, selectedHour, twentyFourHour;
      if (hourOptions == null) {
        hourOptions = [];
      }
      ref1 = this.props, selected = ref1.selected, twentyFourHour = ref1.twentyFourHour, minDate = ref1.minDate, maxDate = ref1.maxDate, minutes = ref1.minutes;
      dateFormat = twentyFourHour ? 'MMDDYYYY HHmm' : 'MMDDYYYY hmma';
      if (selected != null) {
        currentValue = this.getMomentObject(selected);
        selectedHour = find(hourOptions, {
          value: parsedTime.hour
        }) == null ? ((ref2 = hourOptions[0]) != null ? ref2.value : void 0) || '' : parsedTime.hour;
        lastMinute = this.prependZero(last(minutes));
        firstMinute = this.prependZero(minutes[0]);
        if ((maxDate != null) && currentValue.isSame(maxDate, 'day')) {
          maxDay = maxDate.format('MMDDYYYY');
          for (o = i = optionsList.length - 1; i >= 0; o = i += -1) {
            option = optionsList[o];
            checkTime = (function() {
              switch (timeSection) {
                case 'hours':
                  return moment(maxDay + " " + option.value + firstMinute + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
                case 'minutes':
                  return moment(maxDay + " " + selectedHour + option.value + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
              }
            })();
            if (checkTime.isAfter(maxDate, 'minute')) {
              optionsList.splice(o, 1);
            }
          }
        }
        if ((minDate != null) && currentValue.isSame(minDate, 'day')) {
          minDay = minDate.format('MMDDYYYY');
          for (o = j = optionsList.length - 1; j >= 0; o = j += -1) {
            option = optionsList[o];
            checkTime = (function() {
              switch (timeSection) {
                case 'hours':
                  return moment(minDay + " " + option.value + lastMinute + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
                case 'minutes':
                  return moment(minDay + " " + selectedHour + option.value + (twentyFourHour ? '' : parsedTime.ampm), dateFormat);
              }
            })();
            if (checkTime.isBefore(minDate, 'minute')) {
              optionsList.splice(o, 1);
            }
          }
        }
        return optionsList;
      }
    },
    removeOutOfRangeAmPm: function(optionsList) {
      var currentValue, maxDate, minDate, ref1, selected;
      ref1 = this.props, selected = ref1.selected, minDate = ref1.minDate, maxDate = ref1.maxDate;
      if (selected != null) {
        currentValue = this.getMomentObject(selected);
        if (maxDate != null) {
          if (currentValue.isSame(maxDate, 'day')) {
            if (maxDate.format('a') === 'am') {
              optionsList.splice(1, 1);
            }
          }
        }
        if (minDate != null) {
          if (currentValue.isSame(minDate, 'day')) {
            if (minDate.format('a') === 'pm') {
              return optionsList.splice(0, 1);
            }
          }
        }
      }
    },
    getCellClasses: function(inputColumnClass) {
      var classSplit, colCount, dateCol, timeColumns;
      timeColumns = this.props.timeColumns;
      classSplit = inputColumnClass.split('-');
      dateCol = classSplit[1];
      colCount = classSplit[2];
      return ["col-" + (dateCol - timeColumns) + "-" + colCount, "col-" + timeColumns + "-" + colCount];
    },
    prependZero: function(value) {
      if (+value < 10) {
        return "0" + value;
      } else {
        return "" + value;
      }
    }
  });

  module.exports = GridFormDatePicker;

}).call(this);