Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[pickers] Modify adapter.isValid method to accept TDate | null instead of any #10971

Merged
merged 7 commits into from
Nov 10, 2023
Merged
Show file tree
Hide file tree
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions docs/data/migration/migration-pickers-v6/migration-pickers-v6.md
Original file line number Diff line number Diff line change
Expand Up @@ -63,3 +63,61 @@

The same applies to `slotProps` and `componentsProps`.
:::

### Adapters

:::success
The following breaking changes only impact you if you are using the adapters outside the pickers like displayed in the following example:

```tsx
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';

const adapter = new AdapterDays();
adapter.isValid(dayjs('2022-04-17T15:30'));
```

If you are just passing an adapter to `LocalizationProvider`, then you can safely skip this section.
:::

#### Restrict the input format of the `isValid` method

The `isValid` method used to accept any type of value and tried to parse them before checking their validity.
The method has been simplified and now only accepts an already-parsed date or `null` (ie: the same formats used by the `value` prop in our components)

Check warning on line 85 in docs/data/migration/migration-pickers-v6/migration-pickers-v6.md

View workflow job for this annotation

GitHub Actions / runner / vale

[vale] reported by reviewdog 🐶 [Google.We] Try to avoid using first-person plural like 'our'. Raw Output: {"message": "[Google.We] Try to avoid using first-person plural like 'our'.", "location": {"path": "docs/data/migration/migration-pickers-v6/migration-pickers-v6.md", "range": {"start": {"line": 85, "column": 136}}}, "severity": "WARNING"}
flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved

```diff
const adapterDayjs = new AdapterDayjs();
const adapterLuxon = new AdapterLuxon();
const adapterDateFns = new AdapterDateFns();
const adapterMoment = new AdatperMoment();

// Supported formats
const isValid = adapterDayjs.isValid(null); // Same for the other adapters
const isValid = adapterLuxon.isValid(DateTime.now());
const isValid = adapterMoment.isValid(moment());
const isValid = adapterDateFns.isValid(new Date());

// Non-supported formats (JS Date)
- const isValid = adapterDayjs.isValid(new Date('2022-04-17'));
+ const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));

- const isValid = adapterLuxon.isValid(new Date('2022-04-17'));
+ const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));

- const isValid = adapterMoment.isValid(new Date('2022-04-17'));
+ const isValid = adapterMoment.isValid(moment('2022-04-17'));

// Non-supported formats (string)
- const isValid = adapterDayjs.isValid('2022-04-17');
+ const isValid = adapterDayjs.isValid(dayjs('2022-04-17'));

- const isValid = adapterLuxon.isValid('2022-04-17');
+ const isValid = adapterLuxon.isValid(DateTime.fromISO('2022-04-17'));

- const isValid = adapterMoment.isValid('2022-04-17');
+ const isValid = adapterMoment.isValid(moment('2022-04-17'));

- const isValid = adapterDateFns.isValid('2022-04-17');
+ const isValid = adapterDateFns.isValid(new Date('2022-04-17'));


```
8 changes: 6 additions & 2 deletions packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts
Original file line number Diff line number Diff line change
Expand Up @@ -300,8 +300,12 @@ export class AdapterDateFns implements MuiPickersAdapter<Date, DateFnsLocale> {
return value === null;
};

public isValid = (value: any) => {
return isValid(this.date(value));
public isValid = (value: Date | null) => {
if (value == null) {
return false;
}

return isValid(value);
};

public format = (value: Date, formatKey: keyof AdapterFormats) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -312,8 +312,12 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter<Date, DateFnsLoca
return value === null;
};

public isValid = (value: any) => {
return isValid(this.date(value));
public isValid = (value: Date | null) => {
if (value == null) {
return false;
}

return isValid(value);
};

public format = (value: Date, formatKey: keyof AdapterFormats) => {
Expand Down
8 changes: 6 additions & 2 deletions packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts
Original file line number Diff line number Diff line change
Expand Up @@ -435,8 +435,12 @@ export class AdapterDayjs implements MuiPickersAdapter<Dayjs, string> {
return value === null;
};

public isValid = (value: any) => {
return this.dayjs(value).isValid();
public isValid = (value: Dayjs | null) => {
if (value == null) {
return false;
}

return value.isValid();
};

public format = (value: Dayjs, formatKey: keyof AdapterFormats) => {
Expand Down
8 changes: 2 additions & 6 deletions packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts
Original file line number Diff line number Diff line change
Expand Up @@ -265,16 +265,12 @@ export class AdapterLuxon implements MuiPickersAdapter<DateTime, string> {
return value === null;
};

public isValid = (value: any): boolean => {
if (DateTime.isDateTime(value)) {
return value.isValid;
}

public isValid = (value: DateTime | null): boolean => {
if (value === null) {
return false;
}

return this.isValid(this.date(value));
return value.isValid;
};

public format = (value: DateTime, formatKey: keyof AdapterFormats) => {
Expand Down
8 changes: 6 additions & 2 deletions packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts
Original file line number Diff line number Diff line change
Expand Up @@ -345,8 +345,12 @@ export class AdapterMoment implements MuiPickersAdapter<Moment, string> {
return value === null;
};

public isValid = (value: any) => {
return this.moment(value).isValid();
public isValid = (value: Moment | null) => {
if (value == null) {
return false;
}

return value.isValid();
};

public format = (value: Moment, formatKey: keyof AdapterFormats) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -179,15 +179,6 @@ export class AdapterMomentJalaali
.toLocaleLowerCase();
};

public isValid = (value: any) => {
// We can't to `this.moment(value)` because moment-jalaali looses the invalidity information when creating a new moment object from an existing one
if (!this.moment.isMoment(value)) {
return false;
}

return value.isValid();
};

flaviendelangle marked this conversation as resolved.
Show resolved Hide resolved
public formatNumber = (numberToFormat: string) => {
return numberToFormat
.replace(/\d/g, (match) => NUMBER_SYMBOL_MAP[match as keyof typeof NUMBER_SYMBOL_MAP])
Expand Down
7 changes: 3 additions & 4 deletions packages/x-date-pickers/src/models/adapters.ts
Original file line number Diff line number Diff line change
Expand Up @@ -320,13 +320,12 @@ export interface MuiPickersAdapter<TDate, TLocale = any> {
* @returns {boolean} `true` if the date is null.
*/
isNull(value: TDate | null): boolean;
// TODO v7: Type `value` to be `TDate | null` and make sure the `isValid(null)` returns `false`.
/**
* Check if the date is valid.
* @param {any} value The value to test.
* @returns {boolean} `true` if the value is valid.
* @param {TDate | null} value The value to test.
* @returns {boolean} `true` if the value is a valid date according to the date library.
*/
isValid(value: any): boolean;
isValid(value: TDate | null): boolean;
/**
* Format a date using an adapter format string (see the `AdapterFormats` interface)
* @template TDate
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -255,9 +255,7 @@ export const testCalculations: DescribeGregorianAdapterTestSuite = ({
expect(adapter.isValid(testDateIso)).to.equal(true);
expect(adapter.isValid(testDateLocale)).to.equal(true);
expect(adapter.isValid(invalidDate)).to.equal(false);
expect(adapter.isValid(undefined)).to.equal(true);
expect(adapter.isValid(null)).to.equal(false);
expect(adapter.isValid('2018-42-30T11:60:00.000Z')).to.equal(false);
});

describe('Method: getDiff', () => {
Expand Down