diff --git a/src/components/calendar-picker-view/calendar-picker-view.tsx b/src/components/calendar-picker-view/calendar-picker-view.tsx index 0c9835a465..4ef9567a75 100644 --- a/src/components/calendar-picker-view/calendar-picker-view.tsx +++ b/src/components/calendar-picker-view/calendar-picker-view.tsx @@ -27,8 +27,6 @@ import useSyncScroll from './useSyncScroll' dayjs.extend(isoWeek) dayjs.extend(isSameOrBefore) -const classPrefix = 'adm-calendar-picker-view' - export const Context = React.createContext<{ visible: boolean }>({ @@ -54,6 +52,7 @@ export type CalendarPickerViewProps = { max?: Date min?: Date shouldDisableDate?: (date: Date) => boolean + prefixCls?: string } & ( | { selectionMode?: undefined @@ -91,8 +90,8 @@ export const CalendarPickerView = forwardRef< const bodyRef = useRef(null) const today = dayjs() const props = mergeProps(defaultProps, p) - const { locale } = useConfig() - + const { locale, getPrefixCls } = useConfig() + const prefixCls = getPrefixCls('calendar-picker-view', props.prefixCls) const markItems = [...locale.Calendar.markItems] if (props.weekStartsOn === 'Sunday') { const item = markItems.pop() @@ -187,8 +186,8 @@ export const CalendarPickerView = forwardRef< // =============================== Render =============================== const header = ( -
-
+
+
{props.title ?? locale.Calendar.title}
@@ -220,12 +219,12 @@ export const CalendarPickerView = forwardRef< : Array(presetEmptyCellCount) .fill(null) .map((_, index) => ( -
+
)) cells.push(
-
+
{locale.Calendar.yearAndMonth?.replace( /\${(.*?)}/g, (_, variable: keyof typeof renderMap) => { @@ -233,7 +232,7 @@ export const CalendarPickerView = forwardRef< } )}
-
+
{/* 空格填充 */} {presetEmptyCells} {/* 遍历每月 */} @@ -274,7 +273,7 @@ export const CalendarPickerView = forwardRef< if (props.renderTop === false) return null const contentWrapper = (content: ReactNode) => ( -
{content}
+
{content}
) const top = props.renderTop?.(d.toDate()) @@ -308,7 +307,7 @@ export const CalendarPickerView = forwardRef< if (props.renderBottom === false) return null return ( -
+
{props.renderBottom?.(d.toDate())}
) @@ -317,15 +316,15 @@ export const CalendarPickerView = forwardRef< return (
{ if (!props.selectionMode) return @@ -368,7 +367,7 @@ export const CalendarPickerView = forwardRef< }} > {renderTop()} -
+
{props.renderDate ? props.renderDate(d.toDate()) : d.date()} @@ -387,15 +386,15 @@ export const CalendarPickerView = forwardRef< return cells } const body = ( -
+
{renderBody()}
) const mark = ( -
+
{markItems.map((item, index) => ( -
+
{item}
))} @@ -404,7 +403,7 @@ export const CalendarPickerView = forwardRef< return withNativeProps( props, -
+
{showHeader && header} {mark} {body} diff --git a/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap b/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap index 91c7a299d5..0a5106e953 100644 --- a/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap +++ b/src/components/calendar-picker-view/tests/__snapshots__/calendar-picker-view.test.tsx.snap @@ -5030,6 +5030,6860 @@ exports[`Calendar range mode 1`] = `
`; +exports[`Calendar should apply prefixCls from ConfigProvider 1`] = ` +
+
+
+
+ 日期选择 +
+
+
+
+ 日 +
+
+ 一 +
+
+ 二 +
+
+ 三 +
+
+ 四 +
+
+ 五 +
+
+ 六 +
+
+
+
+
+ 2023年5月 +
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+ 今日 +
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年6月 +
+
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+
+ 2023年7月 +
+
+
+
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年8月 +
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年9月 +
+
+
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+
+ 2023年10月 +
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年11月 +
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+
+
+`; + +exports[`Calendar should prioritize component prefixCls over ConfigProvider 1`] = ` +
+
+
+
+ 日期选择 +
+
+
+
+ 日 +
+
+ 一 +
+
+ 二 +
+
+ 三 +
+
+ 四 +
+
+ 五 +
+
+ 六 +
+
+
+
+
+ 2023年5月 +
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+ 今日 +
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年6月 +
+
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+
+ 2023年7月 +
+
+
+
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年8月 +
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年9月 +
+
+
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+
+ 2023年10月 +
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+ 31 +
+
+
+
+
+
+
+ 2023年11月 +
+
+
+
+
+
+
+
+ 1 +
+
+
+
+
+
+ 2 +
+
+
+
+
+
+ 3 +
+
+
+
+
+
+ 4 +
+
+
+
+
+
+ 5 +
+
+
+
+
+
+ 6 +
+
+
+
+
+
+ 7 +
+
+
+
+
+
+ 8 +
+
+
+
+
+
+ 9 +
+
+
+
+
+
+ 10 +
+
+
+
+
+
+ 11 +
+
+
+
+
+
+ 12 +
+
+
+
+
+
+ 13 +
+
+
+
+
+
+ 14 +
+
+
+
+
+
+ 15 +
+
+
+
+
+
+ 16 +
+
+
+
+
+
+ 17 +
+
+
+
+
+
+ 18 +
+
+
+
+
+
+ 19 +
+
+
+
+
+
+ 20 +
+
+
+
+
+
+ 21 +
+
+
+
+
+
+ 22 +
+
+
+
+
+
+ 23 +
+
+
+
+
+
+ 24 +
+
+
+
+
+
+ 25 +
+
+
+
+
+
+ 26 +
+
+
+
+
+
+ 27 +
+
+
+
+
+
+ 28 +
+
+
+
+
+
+ 29 +
+
+
+
+
+
+ 30 +
+
+
+
+
+
+
+
+`; + exports[`Calendar single mode 1`] = `
{ container.querySelector('[data-year-month="2025-8"]') ).toBeInTheDocument() }) + + test('should apply prefixCls from ConfigProvider', () => { + const { container } = render( + + + + ) + expect( + container.querySelector('.config-prefix-calendar-picker-view') + ).toBeTruthy() + expect(container).toMatchSnapshot() + }) + + test('should prioritize component prefixCls over ConfigProvider', () => { + const { container } = render( + + + + ) + expect(container.querySelector('.component-prefix')).toBeTruthy() + expect( + container.querySelector('.config-prefix-calendar-picker-view') + ).toBeFalsy() + expect(container).toMatchSnapshot() + }) }) diff --git a/src/components/calendar-picker/calendar-picker.tsx b/src/components/calendar-picker/calendar-picker.tsx index 84bbe9a505..9d95facc82 100644 --- a/src/components/calendar-picker/calendar-picker.tsx +++ b/src/components/calendar-picker/calendar-picker.tsx @@ -13,8 +13,6 @@ import { useConfig } from '../config-provider' import Divider from '../divider' import Popup from '../popup' -const classPrefix = 'adm-calendar-picker' - export type CalendarPickerRef = CalendarPickerViewRef export type CalendarPickerProps = CalendarPickerViewProps & { @@ -60,7 +58,7 @@ export const CalendarPicker = forwardRef< p ) - const { locale } = useConfig() + const { locale, getPrefixCls } = useConfig() const calendarRef = (ref ?? useRef(null)) as React.RefObject @@ -76,15 +74,16 @@ export const CalendarPicker = forwardRef< onConfirm, onMaskClick, getContainer, + prefixCls: customPrefixCls, ...calendarViewProps } = props - + const prefixCls = getPrefixCls('calendar-picker', customPrefixCls) const viewContext = React.useMemo(() => ({ visible: !!visible }), [visible]) const footer = ( -
+
-
+