WeeklyRecurrenceSelectorProps has onValueChange instead of onFieldChange

[atrudeau-vitall]

• I have searched this repository's issues and believe that this is not a duplicate.

I'm using ...

• React Grid
• React Chart
• React Scheduler

Current Behaviour

I'm trying to build a custom weekly recurrence selector component (in TypeScript) and I'm having some trouble with using the AppointmentForm.WeeklyRecurrenceSelectorProps interface

• onFieldChange is undefined when I try to use it in my code, even though the interface in the scheduler repo is:

/** Properties passed to a component that renders a weekly recurrence selector on the appointment form. */
  interface WeeklyRecurrenceSelectorProps {
    /** A function that formats dates based on the locale. */
    formatDate: FormatterFn;
    /** A number between 0 (Sunday) and 6 (Saturday) that specifies the first day of the week. */
    firstDayOfWeek: number;
    /** Specifies the recurrence rule. */
    rRule: string;
    /** Specifies whether the weekly recurrence selector is read-only. */
    readOnly: boolean;
    /** Handles appointment field value changes. */
    onFieldChange: (nextFieldValue: {
      [fieldName: string]: any;
    }) => void;
  }

Expected Behaviour

• According to the documentation, AppointmentForm.WeeklySelectorProps should have a property called onValueChange, not onFieldChange, though the type of onValueChange is the same as other onFieldChange fields, so I'm wondering if this was just a mistyped field.

Steps to Reproduce

1. Create a custom stateless component in TypeScript that takes in an argument {...props} of type AppointmentForm.WeeklyRecurrenceSelectorProps
2. Use the onFieldChange property from props in any way you like
3. onFieldChange will be undefined, and if you debug you'll see onValueChange defined in props instead

Link to the example that reproduces the issue: https://codesandbox.io/s/devextreme-react-scheduler-for-material-ui-forked-cq56i?file=/index.js

Environment

• devextreme-reactive: 2.7.4
• react: ^17.0.1
• browser: Chrome
• bootstrap: none
• react-bootstrap: none
• material-ui: 4.11

[atrudeau-vitall]

If anyone is facing the same issue, my workaround is to define my own WeeklyRecurrenceSelectorProps interface and then typecast AppointmentForm.WeeklyRecurrenceSelectorProps to that interface:

interface CustomWeeklyRecurrenceSelectorProps {
  formatDate: FormatterFn;
  firstDayOfWeek: number;
  rRule: string;
  readOnly: boolean;
  onValueChange: (nextFieldValue: Record<string, any>) => void;
}
export default const WeeklyRecurrenceSelector: React.FC<AppointmentForm.WeeklyRecurrenceSelectorProps> = ({
  ...props
}) => {
    const newProps = (props as unknown) as CustomWeeklyRecurrenceSelectorProps;
    const { onValueChange } = newProps; // Can now use onValueChange in selector buttons
    ...
}

[AryamnovEugeniy]

Hello! Thank you for reporting the issue, we will fix this soon.