Skip to content

Commit

Permalink
[pickers] Add AdapterDateFnsJalaliV3 adapter (#12891)
Browse files Browse the repository at this point in the history
Co-authored-by: Lukas <[email protected]>
  • Loading branch information
smmoosavi and LukasTy authored May 8, 2024
1 parent 1af982d commit 2a5b8fe
Show file tree
Hide file tree
Showing 16 changed files with 692 additions and 1,849 deletions.
13 changes: 12 additions & 1 deletion babel.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -91,9 +91,20 @@ module.exports = function getBabelConfig(api) {
{
test: /date-fns/i,
replacer: 'date-fns-v3',
ignoreFilenames: 'AdapterDateFns.ts',
// This option is provided by the `patches/[email protected]` patch
filenameIncludes: 'src/AdapterDateFnsV3/',
},
]);
plugins.push([
'babel-plugin-replace-imports',
{
test: /date-fns-jalali/i,
replacer: 'date-fns-jalali-v3',
// This option is provided by the `patches/[email protected]` patch
filenameIncludes: 'src/AdapterDateFnsJalaliV3/',
},
'replace-date-fns-jalali-imports',
]);
}

if (process.env.NODE_ENV === 'production') {
Expand Down
2 changes: 2 additions & 0 deletions codecov.yml
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ coverage:
target: 100%
paths:
- 'packages/x-date-pickers/src/AdapterDateFns/AdapterDateFns.ts'
- 'packages/x-date-pickers/src/AdapterDateFnsV3/AdapterDateFnsV3.ts'
- 'packages/x-date-pickers/src/AdapterDateFnsJalali/AdapterDateFnsJalali.ts'
- 'packages/x-date-pickers/src/AdapterDateFnsJalaliV3/AdapterDateFnsJalaliV3.ts'
- 'packages/x-date-pickers/src/AdapterDayjs/AdapterDayjs.ts'
- 'packages/x-date-pickers/src/AdapterLuxon/AdapterLuxon.ts'
- 'packages/x-date-pickers/src/AdapterMoment/AdapterMoment.ts'
Expand Down
18 changes: 17 additions & 1 deletion docs/data/date-pickers/calendar-systems/calendar-systems.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,26 @@ packageName: '@mui/x-date-pickers'
You can use either the `AdapterDateFnsJalali` adapter, which is based on [date-fns-jalali](https://www.npmjs.com/package/date-fns-jalali),
or the `AdapterMomentJalaali` adapter, which is based on [moment-jalaali](https://www.npmjs.com/package/moment-jalaali).

The following demo shows how to use the date-fns plugin:
The following demo shows how to use the `date-fns-jalali` adapter:

{{"demo": "AdapterJalali.js"}}

:::info
Both `date-fns-jalali` major versions (v2.x and v3.x) are supported.

A single adapter cannot work for both `date-fns-jalali` v2.x and v3.x, because the way functions are exported has been changed in v3.x.

To use `date-fns-jalali` v3.x, you will have to import the adapter from `@mui/x-date-pickers/AdapterDateFnsJalaliV3` instead of `@mui/x-date-pickers/AdapterDateFnsJalali`.

```tsx
// with date-fns-jalali v2.x
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalali';
// with date-fns-jalali v3.x
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
```

:::

## Hijri

:::error
Expand Down
2 changes: 1 addition & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@
"core-js": "^2.6.12",
"cross-env": "^7.0.3",
"date-fns": "^2.30.0",
"date-fns-jalali": "^2.21.3-1",
"date-fns-jalali": "^2.30.0-0",
"dayjs": "^1.11.11",
"doctrine": "^3.0.0",
"exceljs": "^4.4.0",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@
"cpy-cli": "^5.0.0",
"cross-env": "^7.0.3",
"danger": "^11.3.1",
"date-fns-jalali-v3": "npm:[email protected]",
"date-fns-v3": "npm:[email protected]",
"enzyme": "^3.11.0",
"eslint": "^8.57.0",
Expand Down Expand Up @@ -195,7 +196,6 @@
"packageManager": "[email protected]",
"pnpm": {
"patchedDependencies": {
"[email protected]": "patches/[email protected]",
"[email protected]": "patches/[email protected]",
"[email protected]": "patches/[email protected]"
}
Expand Down
3 changes: 2 additions & 1 deletion packages/x-date-pickers-pro/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.15.14",
"date-fns": "^2.25.0 || ^3.2.0",
"date-fns-jalali": "^2.13.0-0",
"date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
"dayjs": "^1.10.7",
"luxon": "^3.0.2",
"moment": "^2.29.4",
Expand Down Expand Up @@ -99,6 +99,7 @@
"@types/luxon": "^3.4.2",
"@types/prop-types": "^15.7.12",
"date-fns": "^2.30.0",
"date-fns-jalali": "^2.30.0-0",
"dayjs": "^1.11.11",
"luxon": "^3.4.4",
"moment": "^2.30.1",
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
4 changes: 2 additions & 2 deletions packages/x-date-pickers/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@
"@emotion/styled": "^11.8.1",
"@mui/material": "^5.15.14",
"date-fns": "^2.25.0 || ^3.2.0",
"date-fns-jalali": "^2.13.0-0",
"date-fns-jalali": "^2.13.0-0 || ^3.2.0-0",
"dayjs": "^1.10.7",
"luxon": "^3.0.2",
"moment": "^2.29.4",
Expand Down Expand Up @@ -103,7 +103,7 @@
"@types/moment-jalaali": "^0.7.9",
"@types/prop-types": "^15.7.12",
"date-fns": "^2.30.0",
"date-fns-jalali": "^2.13.0-0",
"date-fns-jalali": "^2.30.0-0",
"dayjs": "^1.11.11",
"luxon": "^3.4.4",
"moment": "^2.30.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -207,6 +207,14 @@ export class AdapterDateFnsJalali implements MuiPickersAdapter<Date, DateFnsLoca
public escapedCharacters = { start: "'", end: "'" };

constructor({ locale, formats }: AdapterOptions<DateFnsLocale, never> = {}) {
if (typeof addDays !== 'function') {
throw new Error(
[
'MUI: The `date-fns-jalali` package v3.x is not compatible with this adapter.',
'Please, install v2.x of the package or use the `AdapterDateFnsJalaliV3` instead.',
].join('\n'),
);
}
this.locale = locale;
this.formats = { ...defaultFormats, ...formats };
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,86 @@
import { expect } from 'chai';
import { DateTimeField } from '@mui/x-date-pickers';
import { AdapterDateFnsJalali } from '@mui/x-date-pickers/AdapterDateFnsJalaliV3';
import {
createPickerRenderer,
expectFieldValueV7,
describeJalaliAdapter,
buildFieldInteractions,
} from 'test/utils/pickers';
import { enUS, faIR } from 'date-fns-jalali/locale';
import { AdapterFormats } from '@mui/x-date-pickers/models';

describe('<AdapterDateFnsJalaliV3 />', () => {
describeJalaliAdapter(AdapterDateFnsJalali, {});

describe('Adapter localization', () => {
it('Formatting', () => {
const adapter = new AdapterDateFnsJalali();

const expectDate = (format: keyof AdapterFormats, expectedWithFaIR: string) => {
const date = adapter.date('2020-02-01T23:44:00.000Z')!;

expect(adapter.format(date, format)).to.equal(expectedWithFaIR);
};

expectDate('fullDate', '12-ام بهمن 1398');
expectDate('keyboardDate', '1398/11/12');
expectDate('keyboardDateTime', '1398/11/12 11:44 ب.ظ.');
expectDate('keyboardDateTime12h', '1398/11/12 11:44 ب.ظ.');
expectDate('keyboardDateTime24h', '1398/11/12 23:44');
});
});

describe('Picker localization', () => {
const testDate = '2018-05-15T09:35:00';
const localizedTexts = {
enUS: {
placeholder: 'MM/DD/YYYY hh:mm aa',
value: '02/25/1397 09:35 AM',
},
faIR: {
placeholder: 'YYYY/MM/DD hh:mm aa',
value: '1397/02/25 09:35 ق.ظ.',
},
};

Object.keys(localizedTexts).forEach((localeKey) => {
const localeObject = {
faIR,
enUS,
}[localeKey];

describe(`test with the "${localeKey}" locale`, () => {
const { render, adapter, clock } = createPickerRenderer({
clock: 'fake',
adapterName: 'date-fns-jalali',
locale: localeObject,
});

const { renderWithProps } = buildFieldInteractions({
render,
clock,
Component: DateTimeField,
});

it('should have correct placeholder', () => {
const v7Response = renderWithProps({ enableAccessibleFieldDOMStructure: true });

expectFieldValueV7(
v7Response.getSectionsContainer(),
localizedTexts[localeKey].placeholder,
);
});

it('should have well formatted value', () => {
const v7Response = renderWithProps({
enableAccessibleFieldDOMStructure: true,
value: adapter.date(testDate),
});

expectFieldValueV7(v7Response.getSectionsContainer(), localizedTexts[localeKey].value);
});
});
});
});
});
Loading

0 comments on commit 2a5b8fe

Please sign in to comment.