DatePicker wrapper types with luxon

60 Views Asked by At

By generating DatePicker with luxon like this

import { DatePicker } from 'antd';
import type { DateTime } from 'luxon';
import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';

const LuxonDatePicker = DatePicker.generatePicker<DateTime>(
  luxonGenerateConfig,
);

i can use whatever i want on

the problem is i want to wrap this with another component to have label and error message etc for reusability.

interface CustomProps {
  label?: string;
  errorMessage?: string;
  hasError?: boolean;
}

export type DatePickerProps = CustomProps &
  React.ComponentProps<typeof LuxonDatePicker>;

const DatePicker: React.FC<DatePickerProps> = ({
  label,
  errorMessage,
  hasError,
  ...rest
}) => {

now rest.onChange's type is

(property) onChange?: ((date: unknown, dateString: string | string[]) => void) | undefined

while

<LuxonDatePicker
onChange

is

(property) onChange?: ((date: DateTime<boolean>, dateString: string | string[]) => void) | undefined

i can't find a way to keep the working types of my Component

Also is there a way i can implement with props?

0

There are 0 best solutions below