shahabyazdi / react-multi-date-picker

a simple React datepicker component for working with gregorian, persian, arabic and indian calendars
https://shahabyazdi.github.io/react-multi-date-picker/
MIT License
766 stars 90 forks source link

Better typescript support for custom plugins #258

Open noknokcody opened 7 months ago

noknokcody commented 7 months ago

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.