update: datepicker locale support

star-whale · Oct 19, 2023 · 9ac4d28 · 9ac4d28
1 parent 922a9f8
commit 9ac4d28
Show file tree

Hide file tree

Showing 4 changed files with 110 additions and 1 deletion.
diff --git a/console/packages/starwhale-ui/src/DatePicker/Calendar.tsx b/console/packages/starwhale-ui/src/DatePicker/Calendar.tsx
@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { StatefulCalendar as BaseStatefulCalendar, DatepickerProps } from 'baseui/datepicker'
+import useTranslation from '@/hooks/useTranslation'
+import { mergeOverrides, expandPadding } from '../utils'
+import zh from 'date-fns/locale/zh-CN'
+
+const selectOverride = {
+    style: {
+        'borderTopWidth': '1px',
+        'borderBottomWidth': '1px',
+        'borderLeftWidth': '1px',
+        'borderRightWidth': '1px',
+        'paddingLeft': '0px',
+        'paddingRight': '0px',
+        ':hover': {
+            borderColor: '#799EE8',
+        },
+        ':focus': {
+            backgroundColor: '#fff',
+        },
+    },
+    props: {
+        overrides: {
+            ValueContainer: {
+                style: {
+                    ...expandPadding('4px', '12px', '4px', '12px'),
+                    fontSize: '14px',
+                },
+            },
+            IconsContainer: {
+                style: {
+                    color: 'rgba(2, 16, 43, 0.2)',
+                },
+            },
+        },
+    },
+}
+
+function StatefulCalendar({ ...props }: DatepickerProps) {
+    const [, i18n] = useTranslation()
+    const overrides = mergeOverrides(
+        {
+            QuickSelect: selectOverride,
+            TimeSelectContainer: {
+                style: {
+                    width: props.range ? '50%' : '100%',
+                    display: 'inline-block',
+                    marginBottom: '0',
+                },
+            },
+            TimeSelect: {
+                props: {
+                    overrides: {
+                        Select: selectOverride,
+                    },
+                },
+            },
+        },
+        props.overrides
+    )
+
+    return (
+        <BaseStatefulCalendar
+            density='high'
+            locale={i18n.language === 'zh' ? { ...zh } : undefined}
+            {...props}
+            overrides={overrides}
+        />
+    )
+}
+
+export { StatefulCalendar }
diff --git a/console/packages/starwhale-ui/src/DatePicker/index.tsx b/console/packages/starwhale-ui/src/DatePicker/index.tsx
@@ -1 +1,2 @@
 export * from './DatePicker'
+export * from './Calendar'
diff --git a/console/packages/starwhale-ui/src/Search/components/FieldDatetime.tsx b/console/packages/starwhale-ui/src/Search/components/FieldDatetime.tsx
@@ -1,11 +1,11 @@
 import React from 'react'
 import PopoverContainer, { Label } from './PopoverContainer'
-import { StatefulCalendar } from 'baseui/datepicker'
 import { useTrace } from '@starwhale/core'
 import FieldInput from './FieldInput'
 import moment from 'moment'
 import { useControllableValue, useCreation, useKeyPress, useUpdateEffect } from 'ahooks'
 import { DATETIME_DELIMITER } from '@starwhale/core/datastore/schemas/TableQueryFilter'
+import { StatefulCalendar } from '@starwhale/ui/DatePicker'
 
 export const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD hh:mm:ss'
 

diff --git a/console/packages/starwhale-ui/src/i18n/zh.ts b/console/packages/starwhale-ui/src/i18n/zh.ts
@@ -40,7 +40,43 @@ const datatable = {
     columnQuery: '筛选',
     columnConfig: '管理列',
 }
+const datepicker = {
+    ariaLabel: '选择日期。',
+    ariaLabelRange: '选择日期范围。',
+    ariaLabelCalendar: '日历。',
+    ariaRoleDescriptionCalendarMonth: '日历月份',
+    previousMonth: '上个月。',
+    nextMonth: '下个月。',
+    pastWeek: '过去一周',
+    pastMonth: '过去一个月',
+    pastThreeMonths: '过去三个月',
+    pastSixMonths: '过去六个月',
+    pastYear: '过去一年',
+    pastTwoYears: '过去两年',
+    // eslint-disable-next-line
+    screenReaderMessageInput: '日期格式为${formatString}。按下箭头或回车键与日历交互并选择日期。按下Esc键关闭日历。',
+    // eslint-disable-next-line
+    selectedDate: '选择的日期为${date}。',
+    // eslint-disable-next-line
+    selectedDateRange: '选择的日期范围为从${startDate}到${endDate}。',
+    selectSecondDatePrompt: '选择第二个日期。',
+    quickSelectLabel: '选择日期范围',
+    quickSelectAriaLabel: '选择日期范围',
+    quickSelectPlaceholder: '无',
+    timeSelectEndLabel: '结束时间',
+    timeSelectStartLabel: '开始时间',
+    timePickerAriaLabel12Hour: '选择时间，12小时制。',
+    timePickerAriaLabel24Hour: '选择时间，24小时制。',
+    timezonePickerAriaLabel: '选择时区。',
+    selectedStartDateLabel: '已选择的开始日期。',
+    selectedEndDateLabel: '已选择的结束日期。',
+    dateNotAvailableLabel: '不可用。',
+    dateAvailableLabel: '可用。',
+    selectedLabel: '已选择。',
+    chooseLabel: '选择',
+}
 
 export default {
     datatable,
+    datepicker,
 }