TimePicker not assignable to ComponentType<TimePickerProps> (Typescript Typings issue)

[k290]

I'm submitting a...

• Bug report

Current behavior

I am having an issue with the TimePicker typescript typings. I am trying to create a React HOC in Typescript which handles the validation logic of all Kendo FormComponents . However, in the case of the TimePicker it is not allowing it to be assigned to a React.ComponentType. All other Kendo Form components are fine.

Minimal reproduction of the problem with instructions

Please see the following code

import * as React from 'react';
import { Input, MaskedTextBox, NumericTextBox, InputProps, MaskedTextBoxProps, NumericTextBoxProps } from '@progress/kendo-react-inputs';
import { DatePicker, TimePicker, DateInputProps, DatePickerProps, DateInput, TimePickerProps } from '@progress/kendo-react-dateinputs';
import { AutoComplete, ComboBox, DropDownList, MultiSelect, AutoCompleteProps, ComboBoxProps, DropDownListProps, MultiSelectProps } from '@progress/kendo-react-dropdowns';

interface WithValidationProps {
    validityStyles?: boolean;
    onChange?: React.ChangeEventHandler;
}

interface WithValidationState {
    touched: boolean;
}

const withValidation = <P extends object>(Component: React.ComponentType<P>) =>
    class WithValidation extends React.PureComponent<P & WithValidationProps, WithValidationState> {

        constructor(props) {
            super(props);
            this.state = { touched: false };
            this.handleChange = this.handleChange.bind(this);
        }

        handleChange(event) {
            this.setState(() => {
                return { touched: true };
            })
            // Check if another event function should be triggered
            if (this.props.onChange) {
                this.props.onChange(event);
            }
        }

        render() {
            const { validityStyles, onChange, ...props } = this.props as WithValidationProps;

            return <Component {...props as any} validityStyles={this.state.touched} onChange={this.handleChange} />;
        }
    };

export const PipDateInput = withValidation<DateInputProps>(DateInput);
export const PipDatePicker = withValidation<DatePickerProps>(DatePicker);
export const PipTimePicker = withValidation<TimePickerProps>(TimePicker);
export const PipAutoComplete = withValidation<AutoCompleteProps>(AutoComplete);
export const PipComboBox = withValidation<ComboBoxProps>(ComboBox);
export const PipDropDownList = withValidation<DropDownListProps>(DropDownList);
export const PipMultiSelect = withValidation<MultiSelectProps>(MultiSelect);
export const PipMaskedTextBox = withValidation<MaskedTextBoxProps>(MaskedTextBox);
export const PipNumericTextBox = withValidation<NumericTextBoxProps>(NumericTextBox);
export const PipInput = withValidation<InputProps>(Input);

As you can see there is something wrong with the typings on the TimePicker:

Environment

Package versions: Kendo-React: 2.5 React: 16.7.18

System:

• TypeScript version: 3.2
• Platform: Windows

[kspeyanski]

Thank you for reporting this @k290 ,

I'll dig into this issue, but at first sight, it seems that the problem is with the custom propTypes validation function expecting to return an Error instead of throwing a new Error.

I'd greatly appreciate if you can share the project code.

[k290]

@kspeyanski I have created a Minimal Example here: https://github.com/k290/kendo-timepicker-issue

You can just pull down the repo, and run annpm install in the root directory.

Open the root folder in Visual Studio Code. If you open withValidation.component.tsx you will see the error. The same error will be shown when you run webpack in the root directory.

If you comment out the Timepicker component, you can run webpack and run the project in a browser and see the component in action on an Autocomplete

[kspeyanski]

Thank you for the providing the project, it really helped us track down the problem fast!

I've opened a PR and once it is published i will let you know.

[kspeyanski]

Hello @k290, The issue is now fixed, and has been published in our dev channel.

Please, let us know if you encounter any other issues with the KendoReact components, and we will be happy to help!

[k290]

Thank you