wix-style-react/src/DatePicker/DateInput/DateInput.js

wix-style-react

import React from 'react';
import PropTypes from 'prop-types';
import CalendarIcon from 'wix-ui-icons-common/Date';
import Input from '../../Input';
import {
  formatDate,
  formatDateV2,
} from '../../common/LocaleUtils/DateInputLocaleUtils';
import legacyParse from '../../common/LocaleUtils/legacyParse';
import { WixStyleReactEnvironmentContext } from '../../WixStyleReactEnvironmentProvider/context';
import deprecationLog from '../../utils/deprecationLog';
import {
  dateTimeFormat,
  supportedWixlocales,
} from 'wix-design-systems-locale-utils';

class DateInput extends React.PureComponent {
  static displayName = 'DateInput';

  _formatDateValue = () => {
    const { value, dateFormat, dateFormatV2, dateStyle } = this.props;
    const locale = this._getLocale();

    if (!value) {
      return '';
    }

    if (typeof value === 'string') {
      return value;
    }

    if (dateFormatV2) {
      if (typeof dateFormatV2 === 'function') {
        return dateFormatV2(value);
      }

      return formatDateV2(value, dateFormatV2, locale);
    }

    if (dateFormat) {
      if (typeof dateFormat === 'function') {
        return dateFormat(value);
      }

      return formatDate(value, dateFormat, locale);
    }

    if (dateStyle === 'medium') {
      return dateTimeFormat.getMediumDate(locale, value);
    }

    return dateTimeFormat.getShortDate(locale, value);
  };

  _handleInputChange = event => {
    const { onChange } = this.props;
    const val = event.target.value;
    const dateObjectFormat = legacyParse(val);
    const newVal = {
      dateVal: !isNaN(dateObjectFormat) ? dateObjectFormat : new Date(),
      textVal: val,
    };
    onChange(newVal);
  };

  _getLocale() {
    if (typeof this.props.locale !== 'string') {
      deprecationLog(
        '<DateInput/> prop "locale" with value `date-fns locale object` is deprecated and will be removed in next major release, please pass a string instead',
      );
    }

    return this.props.locale || this.context.locale || 'en';
  }

  render() {
    const { value: initialValue, customInput, onChange, ...rest } = this.props;
    const _inputProps = {
      focusOnClearClick: false,
      value: this._formatDateValue(),
      prefix: (
        <Input.IconAffix dataHook="date-input-date-icon">
          <CalendarIcon />
        </Input.IconAffix>
      ),
      autoSelect: false,
      onChange: this._handleInputChange,
      ...rest,
      ...(customInput ? customInput.props : {}),
    };
    return React.cloneElement(customInput || <Input />, _inputProps);
  }
}

DateInput.contextType = WixStyleReactEnvironmentContext;

DateInput.propTypes = {
  ...Input.propTypes,
  /** The selected date */
  value: PropTypes.oneOfType([
    PropTypes.object,
    PropTypes.string,
    PropTypes.number,
  ]),
  /** Instance locale */
  locale: PropTypes.oneOfType([
    PropTypes.oneOf(supportedWixlocales),
    PropTypes.shape({
      code: PropTypes.string,
      formatDistance: PropTypes.func,
      formatRelative: PropTypes.func,
      localize: PropTypes.object,
      formatLong: PropTypes.object,
      match: PropTypes.object,
      options: PropTypes.object,
    }),
  ]),
  /** Sets date format of locale */
  dateStyle: PropTypes.oneOf(['short', 'medium']),
  /** this prop is deprecated and should not be used
   * @deprecated
   */
  dateFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
  /** this prop is deprecated and should not be used
   * @deprecated
   */
  dateFormatV2: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
};

export default DateInput;