shlinkio / shlink-web-client

import React from 'react';

import { isNil } from 'ramda';

import DatePicker from 'react-datepicker';

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';

import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';

import * as PropTypes from 'prop-types';

import classNames from 'classnames';

import './DateInput.scss';

const propTypes = {

  className: PropTypes.string,

  isClearable: PropTypes.bool,

  selected: PropTypes.oneOfType([ PropTypes.string, PropTypes.object ]),

  ref: PropTypes.object,

  disabled: PropTypes.bool,

};

const DateInput = (props) => {

  const { className, isClearable, selected, ref = React.createRef() } = props;

  const showCalendarIcon = !isClearable || isNil(selected);

  return (

    <div className="date-input-container">

      <DatePicker

        {...props}

        className={classNames('date-input-container__input form-control', className)}

        dateFormat="YYYY-MM-DD"

        readOnly

        ref={ref}

      />

      {showCalendarIcon && (

        <FontAwesomeIcon

          icon={calendarIcon}

          className="date-input-container__icon"

          onClick={() => ref.current.input.focus()}

        />

      )}

    </div>

  );

};

DateInput.propTypes = propTypes;

export default DateInput;