DateField.tsx

import { DateField as BaseDateField, DateFieldProps as BaseDateFieldProps } from '@vtb/ui-kit3';
import moment from 'moment';
import React from 'react';
import styled from 'styled-components';

const format = 'DD.MM.YYYY';

export type DateFieldProps = Omit<BaseDateFieldProps, 'value' | 'onChange'> & {
  value: string | null;
  onChange: (date: string | null) => any;
};

const DateField: React.FC<DateFieldProps> = ({ value, onChange, ...props }) => {
  const [innerValue, setInnerValue] = React.useState<string | null>(value);

  const onDateChange = React.useCallback(
    (date: string) => {
      setInnerValue(date);

      if (date === '__.__.____') {
        return onChange(null);
      }

      if (!date.includes('_')) {
        if (moment(date, format).isValid()) {
          onChange(moment(date, format).format());
        }
      }
    },
    [onChange],
  );

  React.useEffect(() => {
    setInnerValue(value ? moment(value).format(format) : '');
  }, [value]);

  return (
    <StyledDateField value={innerValue || ''} onChange={(e) => onDateChange(e.target.value)} dimension="m" {...props} />
  );
};

const StyledDateField = styled(BaseDateField)``;

export default DateField;