Formsy Semantic UI DayPicker component

//If you are using semantic-ui-react and formsy-react
//and you are looking for a react-day-picker Wrapper
//this component might be for you


import React, { Component, createElement, cloneElement } from 'react';
import { withFormsy } from 'formsy-react';
import { Form } from 'semantic-ui-react';
//import { filterSuirElementProps } from './utils'; //lazyness
import PropTypes from 'prop-types';
import DayPickerInput from 'react-day-picker/DayPickerInput';

const MONTHS = [
    'January',
    'February',
    'March',
    'April',
    'May',
    'June',
    'July',
    'August',
    'September',
    'October',
    'November',
    'December'
];

const WEEKDAYS_LONG = [
    'Sunday',
    'Monday',
    'Tuesday',
    'Wednesday',
    'Thursday',
    'Saturday',
    'Sunday'
];

const WEEKDAYS_SHORT = [
    'Sun',
    'Mon',
    'Tue',
    'Wed',
    'Thu',
    'Fri',
    'Sat'
];

class DayPicker extends Component {
  static propTypes = {
    id: PropTypes.string,
    name: PropTypes.string.isRequired,
    width: PropTypes.number,
    className: PropTypes.string,
    inputClassName: PropTypes.string,
    disabled: PropTypes.bool,
    inline: PropTypes.bool,
    errorLabel: PropTypes.element,
    required: PropTypes.bool,
    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
    instantValidation: PropTypes.bool,
    defaultValue: PropTypes.string,
    isValid: PropTypes.func.isRequired,
    setValue: PropTypes.func.isRequired,
    getValue: PropTypes.func.isRequired,
    onChange: PropTypes.func,
    isPristine: PropTypes.func.isRequired,
    getErrorMessage: PropTypes.func.isRequired,
    validationError: PropTypes.string,
    validationErrors: PropTypes.object,
    validations: PropTypes.oneOfType(
      [PropTypes.string, PropTypes.object]
    ),
  }

  static defaultProps = {

  }

  state = { allowError: false };

  componentDidMount() {
    const { defaultValue, setValue } = this.props;
    if (defaultValue) setValue(defaultValue);
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.isFormSubmitted()) this.showError();
  }

  onDaySelected = (day, modifiers) => {
    const { onChange, setValue } = this.props;
    if(!day){
        setValue('');
        onChange && onChange('');
        return;
    }
    let d = day.getFullYear()  + "-" + (day.getMonth()+1) + "-" + day.getDate()
    setValue(d);
    onChange && onChange(d);
  }

  showError = () => this.setState({ allowError: true });

  render() {
    const {
      id,
      name,
      as,
      inputClassName,
      required,
      label,
      defaultValue,
      getValue,
      isValid,
      isPristine,
      getErrorMessage,
      errorLabel,
      width,
      className,
      disabled,
      inline,
      passRequiredToField,
    } = this.props;

    const { allowError } = this.state;
    const error = !isPristine() && !isValid() && allowError;

    const inputProps = {
      name,
      className: inputClassName,
      id,
    };
    const value= getValue() || isPristine() && defaultValue || '';

    return (
      <Form.Field
        as={ as }
        className={ className }
        required={ required && passRequiredToField }
        error={ !disabled && error }
        width={ width }
        inline={ inline }
        disabled={disabled}
      >
        <label htmlFor={id}> { label } </label>
        <DayPickerInput
            inputProps={inputProps}
            value={value}
            dayPickerProps={
                {
                    months: MONTHS,
                    weekdaysLong: WEEKDAYS_LONG,
                    weekdaysShort: WEEKDAYS_SHORT,
                    firstDayOfWeek:1
                }
            }
            format='LL'
            onDayChange={this.onDaySelected} />
        { !disabled && error && errorLabel && cloneElement(errorLabel, {}, getErrorMessage()) }
      </Form.Field>
    );
  }
}

export default withFormsy(DayPicker);