From f214c6e49316117985ae8e67a9fa055aee138222 Mon Sep 17 00:00:00 2001 From: Raju Kumar Date: Mon, 2 Dec 2024 12:11:16 +0530 Subject: [PATCH 1/4] [pickers] Added Support for Arabic (ar) Locale in @mui/x-date-pickers --- packages/x-date-pickers/src/locales/ar.ts | 100 ++++++++++++++++++++++ 1 file changed, 100 insertions(+) create mode 100644 packages/x-date-pickers/src/locales/ar.ts diff --git a/packages/x-date-pickers/src/locales/ar.ts b/packages/x-date-pickers/src/locales/ar.ts new file mode 100644 index 000000000000..3bca96a1fa3d --- /dev/null +++ b/packages/x-date-pickers/src/locales/ar.ts @@ -0,0 +1,100 @@ +import { PickersLocaleText } from './utils/pickersLocaleTextApi'; +import { getPickersLocalization } from './utils/getPickersLocalization'; +import { TimeViewWithMeridiem } from '../internals/models'; + +//maps TimeView to its translation +const views: Record = { + hours: 'ساعات', + minutes: 'دقائق', + seconds: 'ثواني', + meridiem: 'ميريديم', +}; + +const arPickers: Partial = { + //Calender navigation + previousMonth: 'الشهر السابق', + nextMonth: 'الشهر المقبل', + + //View navigation + openPreviousView: 'افتح العرض السابق', + openNextView: 'افتح العرض التالي', + calendarViewSwitchingButtonAriaLabel: (view) => + view === 'year' + ? 'عرض السنة مفتوح، قم بالتبديل إلى عرض التقويم' + : 'عرض التقويم مفتوح، قم بالتبديل إلى عرض السنة', + + //DateRange labels + start: 'يبدأ', + end: 'نهاية', + startDate: 'تاريخ البدء', + startTime: 'وقت البدء', + endDate: 'تاريخ الانتهاء', + endTime: 'وقت الانتهاء', + + //Action bar + cancelButtonLabel: 'يلغي', + clearButtonLabel: 'واضح', + okButtonLabel: 'نعم', + todayButtonLabel: 'اليوم', + + //Toolbar titles + datePickerToolbarTitle: 'اختر التاريخ', + dateTimePickerToolbarTitle: 'حدد التاريخ والوقت', + timePickerToolbarTitle: 'حدد الوقت', + dateRangePickerToolbarTitle: 'حدد النطاق الزمني', + + //Clock labels + clockLabelText: (view, formattedTime) => + `يختار ${views[view]}. ${ + !formattedTime ? 'لم يتم تحديد الوقت' : `الوقت المختار هو ${formattedTime}` + }`, + hoursClockNumberText: (hours) => `${hours} ساعات`, + minutesClockNumberText: (minutes) => `${minutes} دقائق`, + secondsClockNumberText: (seconds) => `${seconds} ثواني`, + + // Digital clock labels + selectViewText: (view) => `يختار ${views[view]}`, + + // Calendar labels + calendarWeekNumberHeaderLabel: 'رقم الاسبوع', + calendarWeekNumberHeaderText: '#', + calendarWeekNumberAriaLabelText: (weekNumber) => `أسبوع ${weekNumber}`, + calendarWeekNumberText: (weekNumber) => `${weekNumber}`, + + // Open picker labels + openDatePickerDialogue: (formattedDate) => + formattedDate ? `اختر التاريخ، التاريخ المحدد هو ${formattedDate}` : 'اختر التاريخ', + openTimePickerDialogue: (formattedTime) => + formattedTime ? `اختر الوقت، الوقت المحدد هو ${formattedTime}` : 'اختر الوقت', + + fieldClearLabel: 'واضح', + + // Table labels + timeTableLabel: 'اختيار الوقت', + dateTableLabel: 'تاريخ الاختيار', + + // Field section placeholders + fieldYearPlaceholder: (params) => 'س'.repeat(params.digitAmount), + fieldMonthPlaceholder: (params) => (params.contentType === 'letter' ? 'MMMM' : 'MM'), + fieldDayPlaceholder: () => 'اليوم', + fieldWeekDayPlaceholder: (params) => (params.contentType === 'letter' ? 'EEEE' : 'EE'), + fieldHoursPlaceholder: () => 'hh', + fieldMinutesPlaceholder: () => 'mm', + fieldSecondsPlaceholder: () => 'ss', + fieldMeridiemPlaceholder: () => 'aa', + + // View names + year: 'سنة', + month: 'شهر', + day: 'يوم', + weekDay: 'أيام الأسبوع', + hours: 'ساعات', + minutes: 'دقائق', + seconds: 'ثواني', + meridiem: 'ميريديم', + + // Common + empty: 'فارغ', +}; + +export const ar = getPickersLocalization(arPickers); From 23343ddfcd877f3ab566c11001642732e7af72c8 Mon Sep 17 00:00:00 2001 From: Raju Kumar Date: Mon, 2 Dec 2024 12:24:40 +0530 Subject: [PATCH 2/4] [pickers] Added import for Arabic (ar) Locale in @mui/x-date-picker --- packages/x-date-pickers/src/locales/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/x-date-pickers/src/locales/index.ts b/packages/x-date-pickers/src/locales/index.ts index 9ea212216886..809cc7fd6fe9 100644 --- a/packages/x-date-pickers/src/locales/index.ts +++ b/packages/x-date-pickers/src/locales/index.ts @@ -36,4 +36,5 @@ export * from './urPK'; export * from './viVN'; export * from './zhCN'; export * from './zhHK'; +export * from './ar'; export * from './utils/pickersLocaleTextApi'; From 7415f735c6e1fc52e1b72524063ce5aea0422b9b Mon Sep 17 00:00:00 2001 From: Raju Kumar Date: Mon, 2 Dec 2024 15:43:37 +0530 Subject: [PATCH 3/4] Running the suggested scripts to fix CI errors for arabic support --- packages/x-date-pickers/src/locales/ar.ts | 19 ++++++++----------- 1 file changed, 8 insertions(+), 11 deletions(-) diff --git a/packages/x-date-pickers/src/locales/ar.ts b/packages/x-date-pickers/src/locales/ar.ts index 3bca96a1fa3d..5c8120d8d8fe 100644 --- a/packages/x-date-pickers/src/locales/ar.ts +++ b/packages/x-date-pickers/src/locales/ar.ts @@ -2,7 +2,7 @@ import { PickersLocaleText } from './utils/pickersLocaleTextApi'; import { getPickersLocalization } from './utils/getPickersLocalization'; import { TimeViewWithMeridiem } from '../internals/models'; -//maps TimeView to its translation +// maps TimeView to its translation const views: Record = { hours: 'ساعات', minutes: 'دقائق', @@ -11,11 +11,11 @@ const views: Record = { }; const arPickers: Partial = { - //Calender navigation + // Calendar navigation previousMonth: 'الشهر السابق', nextMonth: 'الشهر المقبل', - //View navigation + // View navigation openPreviousView: 'افتح العرض السابق', openNextView: 'افتح العرض التالي', calendarViewSwitchingButtonAriaLabel: (view) => @@ -23,7 +23,7 @@ const arPickers: Partial = { ? 'عرض السنة مفتوح، قم بالتبديل إلى عرض التقويم' : 'عرض التقويم مفتوح، قم بالتبديل إلى عرض السنة', - //DateRange labels + // DateRange labels start: 'يبدأ', end: 'نهاية', startDate: 'تاريخ البدء', @@ -31,23 +31,21 @@ const arPickers: Partial = { endDate: 'تاريخ الانتهاء', endTime: 'وقت الانتهاء', - //Action bar + // Action bar cancelButtonLabel: 'يلغي', clearButtonLabel: 'واضح', okButtonLabel: 'نعم', todayButtonLabel: 'اليوم', - //Toolbar titles + // Toolbar titles datePickerToolbarTitle: 'اختر التاريخ', dateTimePickerToolbarTitle: 'حدد التاريخ والوقت', timePickerToolbarTitle: 'حدد الوقت', dateRangePickerToolbarTitle: 'حدد النطاق الزمني', - //Clock labels + // Clock labels clockLabelText: (view, formattedTime) => - `يختار ${views[view]}. ${ - !formattedTime ? 'لم يتم تحديد الوقت' : `الوقت المختار هو ${formattedTime}` - }`, + `يختار ${views[view]}. ${!formattedTime ? 'لم يتم تحديد الوقت' : `الوقت المختار هو ${formattedTime}`}`, hoursClockNumberText: (hours) => `${hours} ساعات`, minutesClockNumberText: (minutes) => `${minutes} دقائق`, secondsClockNumberText: (seconds) => `${seconds} ثواني`, @@ -66,7 +64,6 @@ const arPickers: Partial = { formattedDate ? `اختر التاريخ، التاريخ المحدد هو ${formattedDate}` : 'اختر التاريخ', openTimePickerDialogue: (formattedTime) => formattedTime ? `اختر الوقت، الوقت المحدد هو ${formattedTime}` : 'اختر الوقت', - fieldClearLabel: 'واضح', // Table labels From f2bf8b5d6aacdde2c76dc3d5c781b916482a9613 Mon Sep 17 00:00:00 2001 From: Raju Kumar Date: Tue, 3 Dec 2024 18:13:35 +0530 Subject: [PATCH 4/4] Update the json file for arabic localization --- docs/data/date-pickers/localization/data.json | 8 ++++++++ scripts/localeNames.js | 1 + 2 files changed, 9 insertions(+) diff --git a/docs/data/date-pickers/localization/data.json b/docs/data/date-pickers/localization/data.json index 14a69bf378d6..bcd6d542ef62 100644 --- a/docs/data/date-pickers/localization/data.json +++ b/docs/data/date-pickers/localization/data.json @@ -1,4 +1,12 @@ [ + { + "languageTag": "ar", + "importName": "ar", + "localeName": "Arabic", + "missingKeysCount": 0, + "totalKeysCount": 50, + "githubLink": "https://github.com/mui/mui-x/blob/master/packages/x-date-pickers/src/locales/ar.ts" + }, { "languageTag": "eu", "importName": "eu", diff --git a/scripts/localeNames.js b/scripts/localeNames.js index 5b0b0a23398f..a867dd3bc11b 100644 --- a/scripts/localeNames.js +++ b/scripts/localeNames.js @@ -1,5 +1,6 @@ module.exports = { 'am-ET': 'Amharic', + ar: 'Arabic', 'ar-EG': 'Arabic (Egypt)', 'ar-SA': 'Arabic (Saudi Arabia)', 'ar-SD': 'Arabic (Sudan)',