Skip to content

Commit 774a2a2

Browse files
x0sinax0sina
committed
feat(date-picker): add multi-language support for date picker preferences and enhance theme settings
1 parent e43ae68 commit 774a2a2

File tree

7 files changed

+308
-223
lines changed

7 files changed

+308
-223
lines changed

‎dashboard/public/statics/locales/en.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1456,7 +1456,15 @@
14561456
"radiusNone": "None",
14571457
"radiusSmall": "Small",
14581458
"radiusMedium": "Medium",
1459-
"radiusLarge": "Large"
1459+
"radiusLarge": "Large",
1460+
"datePicker": "Date picker",
1461+
"datePickerDescription": "Choose whether date pickers use Gregorian, Persian, or follow your language.",
1462+
"datePickerFollowLocale": "Follow app language",
1463+
"datePickerManualHint": "Turn off to choose a calendar manually.",
1464+
"datePickerPreferenceSaved": "Date picker preference saved",
1465+
"datePickerModeLocale": "Locale default",
1466+
"datePickerModeGregorian": "Gregorian",
1467+
"datePickerModePersian": "Jalali"
14601468
},
14611469
"coreConfigModal": {
14621470
"addConfig": "Create Core Configuration",

‎dashboard/public/statics/locales/fa.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1375,7 +1375,15 @@
13751375
"radiusNone": "هیچ",
13761376
"radiusSmall": "کوچک",
13771377
"radiusMedium": "متوسط",
1378-
"radiusLarge": "بزرگ"
1378+
"radiusLarge": "بزرگ",
1379+
"datePicker": "انتخابگر تاریخ",
1380+
"datePickerDescription": "تقویم انتخابگر تاریخ را بین میلادی، شمسی یا بر اساس زبان انتخاب کنید.",
1381+
"datePickerFollowLocale": "هماهنگ با زبان برنامه",
1382+
"datePickerManualHint": "برای انتخاب دستی تقویم، سوییچ را خاموش کنید.",
1383+
"datePickerPreferenceSaved": "ترجیحات تقویم ذخیره شد",
1384+
"datePickerModeLocale": "پیش‌فرض بر اساس زبان",
1385+
"datePickerModeGregorian": "میلادی",
1386+
"datePickerModePersian": "جلالی"
13791387
},
13801388
"coreConfigModal": {
13811389
"addConfig": "افزودن پیکربندی هسته",

‎dashboard/public/statics/locales/ru.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1354,7 +1354,15 @@
13541354
"radiusNone": "Без",
13551355
"radiusSmall": "Малый",
13561356
"radiusMedium": "Средний",
1357-
"radiusLarge": "Большой"
1357+
"radiusLarge": "Большой",
1358+
"datePicker": "Дата-пикер",
1359+
"datePickerDescription": "Выберите календарь: григорианский, персидский или по языку.",
1360+
"datePickerFollowLocale": "Следовать языку приложения",
1361+
"datePickerManualHint": "Отключите, чтобы выбрать календарь вручную.",
1362+
"datePickerPreferenceSaved": "Предпочтение календаря сохранено",
1363+
"datePickerModeLocale": "По языку",
1364+
"datePickerModeGregorian": "Григорианский",
1365+
"datePickerModePersian": "Джалали"
13581366
},
13591367
"coreConfigModal": {
13601368
"addConfig": "Добавить конфигурацию ядра",

‎dashboard/public/statics/locales/zh.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1416,7 +1416,15 @@
14161416
"radiusNone": "无",
14171417
"radiusSmall": "小",
14181418
"radiusMedium": "中",
1419-
"radiusLarge": "大"
1419+
"radiusLarge": "大",
1420+
"datePicker": "日期选择器",
1421+
"datePickerDescription": "选择使用公历、波斯历或跟随语言。",
1422+
"datePickerFollowLocale": "跟随应用语言",
1423+
"datePickerManualHint": "关闭开关以手动选择日历。",
1424+
"datePickerPreferenceSaved": "日期选择器偏好已保存",
1425+
"datePickerModeLocale": "语言默认",
1426+
"datePickerModeGregorian": "公历",
1427+
"datePickerModePersian": "贾拉里历"
14201428
},
14211429
"coreConfigModal": {
14221430
"addConfig": "添加核心配置",

‎dashboard/src/components/common/date-picker.tsx‎

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { Calendar as PersianCalendar } from '@/components/ui/persian-calendar'
1414
import { formatDateByLocale, formatDateShort, isDateDisabled } from '@/utils/datePickerUtils'
1515
import { useIsMobile } from '@/hooks/use-mobile'
1616
import { useTheme } from '@/components/common/theme-provider'
17+
import { DATE_PICKER_PREFERENCE_KEY, getDatePickerPreference, type DatePickerPreference } from '@/utils/userPreferenceStorage'
1718

1819
export type DatePickerMode = 'single' | 'range'
1920

@@ -162,7 +163,8 @@ export function DatePicker({
162163
side,
163164
}: DatePickerProps) {
164165
const { t, i18n } = useTranslation()
165-
const isPersianLocale = i18n.language === 'fa'
166+
const [datePreference, setDatePreference] = useState<DatePickerPreference>('locale')
167+
const isPersianCalendar = datePreference === 'persian' || (datePreference === 'locale' && i18n.language === 'fa')
166168
const isMobile = useIsMobile()
167169
const { resolvedTheme } = useTheme()
168170
const [internalOpen, setInternalOpen] = useState(false)
@@ -197,6 +199,20 @@ export function DatePicker({
197199
}
198200
}, [])
199201

202+
useEffect(() => {
203+
const storedPreference = getDatePickerPreference()
204+
setDatePreference(storedPreference)
205+
206+
const handleStorageChange = (event: StorageEvent) => {
207+
if (event.key === DATE_PICKER_PREFERENCE_KEY) {
208+
setDatePreference(getDatePickerPreference())
209+
}
210+
}
211+
212+
window.addEventListener('storage', handleStorageChange)
213+
return () => window.removeEventListener('storage', handleStorageChange)
214+
}, [])
215+
200216
const handleDateSelect = useCallback(
201217
(selectedDate: Date | undefined) => {
202218
if (!selectedDate) {
@@ -285,9 +301,9 @@ export function DatePicker({
285301
if (customFormatDate) {
286302
return customFormatDate(date)
287303
}
288-
return formatDateByLocale(date, isPersianLocale, showTime)
304+
return formatDateByLocale(date, isPersianCalendar, showTime)
289305
},
290-
[customFormatDate, isPersianLocale, showTime],
306+
[customFormatDate, isPersianCalendar, showTime],
291307
)
292308

293309
const dateDisabled = useCallback(
@@ -356,7 +372,7 @@ export function DatePicker({
356372
}}
357373
onEscapeKeyDown={() => setIsOpen(false)}
358374
>
359-
{isPersianLocale ? (
375+
{isPersianCalendar ? (
360376
<PersianCalendar
361377
mode="single"
362378
selected={displayDate}
@@ -459,13 +475,13 @@ export function DatePicker({
459475
{formatDate(displayRange.from)} - {formatDate(displayRange.to)}
460476
</span>
461477
<span className="sm:hidden">
462-
{formatDateShort(displayRange.from, isPersianLocale)} - {formatDateShort(displayRange.to, isPersianLocale)}
478+
{formatDateShort(displayRange.from, isPersianCalendar)} - {formatDateShort(displayRange.to, isPersianCalendar)}
463479
</span>
464480
</span>
465481
) : (
466482
<span className="truncate">
467483
<span className="hidden sm:inline">{formatDate(displayRange.from)}</span>
468-
<span className="sm:hidden">{formatDateShort(displayRange.from, isPersianLocale)}</span>
484+
<span className="sm:hidden">{formatDateShort(displayRange.from, isPersianCalendar)}</span>
469485
</span>
470486
)
471487
) : (
@@ -474,7 +490,7 @@ export function DatePicker({
474490
</Button>
475491
</PopoverTrigger>
476492
<PopoverContent className="w-auto p-0" align={align ? align : "start"} side={side ? side : "bottom"} sideOffset={4} collisionPadding={8}>
477-
{isPersianLocale ? (
493+
{isPersianCalendar ? (
478494
<PersianCalendar
479495
mode="range"
480496
defaultMonth={displayRange?.from}

0 commit comments

Comments
 (0)