react-multi-date-picker
react-multi-date-picker copied to clipboard
Better typescript support for custom plugins
I'm building a custom DateTimePicker control for my project that requires some extended functionality on the DatePicker used in react-multi-date-picker which I've identified can be achieved via plugins.
It appears that type declarations for custom plugins are missing in the project and the nature of plugin registration using a ReactNode seems to cause problems with typescript as well since it expects all required properties of the plugin to be provided when initializing the ReactNode.
My workaround so far is to build type definitions for the properties and methods I want to access. That lets me get around the noImplicitAny for my project, then I set each of the properties as nullable which allows me to initialize my react node without the object that get's passed through your middleware.
// Properties for my custom control
type DateTimePickerProps = Validatable & Omit<CalendarProps, "onChange"> & DatePickerProps & {
className?: string
};
// State properties I want to use
type DatePickerObjState = {
value: Value
}
// Object properties i want to use
type DatePickerObj = {
DatePicker?: {
openCalendar: () => void,
closeCalendar: () => void
},
state?: DatePickerObjState
}
// Custom plugin
const MyPlugin = ( { DatePicker, state }: DatePickerObj ) => {
// Typechecking to keep typescript happy
if( !DatePicker || !state ) {
return false;
}
// Now I can start building my plugin here
return <>{ 'My Plugin' }</>;
}
// Custom DateTimePicker wrapper
export function DateTimePicker( props: DateTimePickerProps ) {
props = {
...props,
plugins: [
...( props.plugins || [] ),
<TimePicker position="bottom" />,
<MyPlugin />
]
}
.. Rest of custom component
}
Out of curiosity, is there any intention of moving this project to typescript in the future? I'd be more than happy to help with the transition as this is likely my favourite standalone datepicker tool.