shlink-web-client/src/utils/DateInput.tsx

57 lines
1.8 KiB
TypeScript
Raw Normal View History

import { useRef } from 'react';
import { isNil, dissoc } from 'ramda';
2020-08-26 21:03:23 +03:00
import DatePicker, { ReactDatePickerProps } from 'react-datepicker';
2019-01-06 00:25:54 +03:00
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCalendarAlt as calendarIcon } from '@fortawesome/free-regular-svg-icons';
import classNames from 'classnames';
import moment from 'moment';
2018-09-08 14:28:40 +03:00
import './DateInput.scss';
2018-07-31 22:24:34 +03:00
interface DatePropsInterface {
endDate?: moment.Moment | null;
maxDate?: moment.Moment | null;
minDate?: moment.Moment | null;
selected?: moment.Moment | null;
startDate?: moment.Moment | null;
onChange?: (date: moment.Moment | null) => void;
2020-08-26 21:03:23 +03:00
}
2018-07-31 22:24:34 +03:00
export type DateInputProps = DatePropsInterface & Omit<ReactDatePickerProps, keyof DatePropsInterface>;
const transformProps = (props: DateInputProps): ReactDatePickerProps => ({
...dissoc('ref', props),
endDate: props.endDate?.toDate(),
maxDate: props.maxDate?.toDate(),
minDate: props.minDate?.toDate(),
selected: props.selected?.toDate(),
startDate: props.startDate?.toDate(),
onChange: (date: Date | null) => props.onChange?.(date && moment(date)),
});
2020-08-26 21:03:23 +03:00
const DateInput = (props: DateInputProps) => {
const { className, isClearable, selected } = props;
const showCalendarIcon = !isClearable || isNil(selected);
const ref = useRef<{ input: HTMLInputElement }>();
2018-08-09 21:13:46 +03:00
return (
<div className="date-input-container">
<DatePicker
{...transformProps(props)}
dateFormat="yyyy-MM-dd"
className={classNames('date-input-container__input form-control', className)}
// @ts-expect-error
ref={ref}
/>
{showCalendarIcon && (
<FontAwesomeIcon
icon={calendarIcon}
className="date-input-container__icon"
2020-08-26 21:03:23 +03:00
onClick={() => ref.current?.input.focus()}
2018-07-31 22:24:34 +03:00
/>
)}
</div>
);
};
export default DateInput;