All files / elements/forms/DateField component.js

77.78% Statements 14/18
33.33% Branches 2/6
50% Functions 2/4
77.78% Lines 14/18

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92                        9x 9x 9x               9x               13x 13x                 13x 1x 1x 1x         13x                   13x                             9x                 9x                  
import PropTypes from 'prop-types';
import React from 'react';
import DayPicker from 'react-day-picker';
import * as MomentLocaleUtils from 'src/utils/momentHelpers';
import DayPickerInput from 'react-day-picker/DayPickerInput';
import { removeSomeProps } from 'src/utils/componentHelpers';
import { formatForOnChange } from './utils';
import { DEFAULT_DATE_FORMAT, DEFAULT_DATE_VALUE_FORMAT } from './constants';
 
const {
  formatDate,
  parseDate,
} = MomentLocaleUtils;
const propsToTrim = null;
const dayPickerInputStyle = {
  container: {
    input: {
      padding: '1rem',
    },
  },
};
 
export const DateFieldComponent = props => {
  const {
    calendarOnly,
    format,
    locale,
    onChange,
    value,
    valueFormat,
  } = props;
  const handleDayPickerClick = selectedDay => {
    const formattedDay = formatForOnChange(selectedDay, valueFormat, locale);
    if (onChange) {
      onChange({
        formattedDay,
        selectedDay,
      });
    }
  };
  const handleOnChange = (selectedDay, modifiers, dayPickerInput) => {
    const formattedDay = formatForOnChange(selectedDay, valueFormat, locale);
    Eif (onChange) {
      onChange({
        dayPickerInput, formattedDay, modifiers, selectedDay,
      });
    }
  };
  Iif (calendarOnly) {
    return (
      <DayPicker
        locale={locale}
        localeUtils={MomentLocaleUtils}
        onDayClick={handleDayPickerClick}
        {...removeSomeProps(props, propsToTrim)}
      />
    );
  }
  return (
    <DayPickerInput
      format={format}
      formatDate={formatDate}
      locale={locale}
      localeUtils={MomentLocaleUtils}
      onDayChange={handleOnChange}
      parseDate={parseDate}
      style={dayPickerInputStyle}
      value={value}
      {...removeSomeProps(props, propsToTrim)}
    />
  );
};
 
DateFieldComponent.propTypes = {
  calendarOnly: PropTypes.bool,
  format: PropTypes.string,
  locale: PropTypes.string,
  onChange: PropTypes.func,
  value: PropTypes.any,
  valueFormat: PropTypes.string,
};
 
DateFieldComponent.defaultProps = {
  calendarOnly: false,
  format: DEFAULT_DATE_FORMAT,
  locale: 'en',
  onChange: () => {},
  // moment-day-picker prefers undefined as the value for no date
  value: undefined,
  valueFormat: DEFAULT_DATE_VALUE_FORMAT,
};