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] Add AdapterDateFnsJalaliV3 adapter #12891

Merged
merged 17 commits into from
May 8, 2024
Merged
Show file tree
Hide file tree
Changes from all 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
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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Strangely, it has not been picked up by renovate...
The version format could be to blame. 🙈

"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]",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Did not seem needed anymore! 👏 🥳

"[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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had to bump the version to have the exported date-fns-jalali/locale/types file so the build would pass.

"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