feat: Calendar support cssVar (ant-design#45835)

* feat: calendar support cssvar * fix: calc priority * Update components/calendar/generateCalendar.tsx Co-authored-by: MadCcc <[email protected]> Signed-off-by: 红果汁 <[email protected]> --------- Signed-off-by: 红果汁 <[email protected]> Co-authored-by: MadCcc <[email protected]>
wanghui2021 · Nov 14, 2023 · 625184a · 625184a
1 parent b8e180b
commit 625184a
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 26 deletions.
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
@@ -16,6 +16,7 @@ import { useLocale } from '../locale';
 import CalendarHeader from './Header';
 import enUS from './locale/en_US';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 type InjectDefaultProps<Props> = Omit<
   Props,
@@ -119,7 +120,8 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const calendarPrefixCls = `${prefixCls}-calendar`;
 
-    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const [, hashId] = useStyle(prefixCls);
+    const wrapCSSVar = useCSSVar(calendarPrefixCls);
 
     const today = generateConfig.getNow();
 
@@ -281,7 +283,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       }
     };
 
-    return wrapSSR(
+    return wrapCSSVar(
       <div
         className={classNames(
           calendarPrefixCls,

diff --git a/components/calendar/style/cssVar.ts b/components/calendar/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { prepareComponentToken } from '.';
+import { genCSSVarRegister } from '../../theme/internal';
+
+export default genCSSVarRegister('Calendar', prepareComponentToken);
diff --git a/components/calendar/style/index.ts b/components/calendar/style/index.ts
@@ -1,12 +1,14 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { unit } from '@ant-design/cssinjs';
+
 import type { PanelComponentToken, PickerPanelToken } from '../../date-picker/style';
 import {
   genPanelStyle,
   initPanelComponentToken,
   initPickerPanelToken,
 } from '../../date-picker/style';
 import { resetComponent } from '../../style';
-import type { FullToken } from '../../theme/internal';
+import type { FullToken, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -62,7 +64,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
       [`${calendarCls}-header`]: {
         display: 'flex',
         justifyContent: 'flex-end',
-        padding: `${token.paddingSM}px 0`,
+        padding: `${unit(token.paddingSM)} 0`,
 
         [`${calendarCls}-year-select`]: {
           minWidth: token.yearControlWidth,
@@ -79,13 +81,13 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
     [`${calendarCls} ${componentCls}-panel`]: {
       background: fullPanelBg,
       border: 0,
-      borderTop: `${token.lineWidth}px ${token.lineType} ${token.colorSplit}`,
+      borderTop: `${unit(token.lineWidth)} ${token.lineType} ${token.colorSplit}`,
       borderRadius: 0,
       [`${componentCls}-month-panel, ${componentCls}-date-panel`]: {
         width: 'auto',
       },
       [`${componentCls}-body`]: {
-        padding: `${token.paddingXS}px 0`,
+        padding: `${unit(token.paddingXS)} 0`,
       },
       [`${componentCls}-content`]: {
         width: '100%',
@@ -98,14 +100,14 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
         paddingInlineStart: token.paddingXS,
       },
       [`${componentCls}-panel`]: {
-        borderRadius: `0 0 ${token.borderRadiusLG}px ${token.borderRadiusLG}px`,
+        borderRadius: `0 0 ${unit(token.borderRadiusLG)} ${unit(token.borderRadiusLG)}`,
       },
       [`${componentCls}-content`]: {
         height: token.miniContentHeight,
         th: {
           height: 'auto',
           padding: 0,
-          lineHeight: `${token.weekHeight}px`,
+          lineHeight: `${unit(token.weekHeight)}`,
         },
       },
       [`${componentCls}-cell::before`]: {
@@ -127,7 +129,7 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
             height: 'auto',
             paddingInlineEnd: token.paddingSM,
             paddingBottom: token.paddingXXS,
-            lineHeight: `${token.weekHeight}px`,
+            lineHeight: `${unit(token.weekHeight)}`,
           },
         },
       },
@@ -161,14 +163,14 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
         display: 'block',
         width: 'auto',
         height: 'auto',
-        margin: `0 ${token.marginXS / 2}px`,
-        padding: `${token.paddingXS / 2}px ${token.paddingXS}px 0`,
+        margin: `0 ${unit(token.calc(token.marginXS).div(2).equal())}`,
+        padding: `${unit(token.calc(token.paddingXS).div(2).equal())} ${unit(token.paddingXS)} 0`,
         border: 0,
-        borderTop: `${token.lineWidthBold}px ${token.lineType} ${token.colorSplit}`,
+        borderTop: `${unit(token.lineWidthBold)} ${token.lineType} ${token.colorSplit}`,
         borderRadius: 0,
         transition: `background ${token.motionDurationSlow}`,
         '&-value': {
-          lineHeight: `${token.dateValueHeight}px`,
+          lineHeight: `${unit(token.dateValueHeight)}`,
           transition: `color ${token.motionDurationSlow}`,
         },
         '&-content': {
@@ -188,15 +190,15 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
         },
       },
     },
-    [`@media only screen and (max-width: ${token.screenXS}px) `]: {
+    [`@media only screen and (max-width: ${unit(token.screenXS)}) `]: {
       [`${calendarCls}`]: {
         [`${calendarCls}-header`]: {
           display: 'block',
           [`${calendarCls}-year-select`]: {
             width: '50%',
           },
           [`${calendarCls}-month-select`]: {
-            width: `calc(50% - ${token.paddingXS}px)`,
+            width: `calc(50% - ${unit(token.paddingXS)})`,
           },
           [`${calendarCls}-mode-switch`]: {
             width: '100%',
@@ -213,6 +215,15 @@ export const genCalendarStyles = (token: CalendarToken): CSSObject => {
   };
 };
 
+export const prepareComponentToken: GetDefaultToken<'Calendar'> = (token) => ({
+  fullBg: token.colorBgContainer,
+  fullPanelBg: token.colorBgContainer,
+  itemActiveBg: token.controlItemBgActive,
+  yearControlWidth: 80,
+  monthControlWidth: 70,
+  miniContentHeight: 256,
+});
+
 export default genComponentStyleHook(
   'Calendar',
   (token) => {
@@ -225,20 +236,16 @@ export default genComponentStyleHook(
         calendarCls,
         pickerCellInnerCls: `${token.componentCls}-cell-inner`,
         dateValueHeight: token.controlHeightSM,
-        weekHeight: token.controlHeightSM * 0.75,
-        dateContentHeight:
-          (token.fontSizeSM * token.lineHeightSM + token.marginXS) * 3 + token.lineWidth * 2,
+        weekHeight: token.calc(token.controlHeightSM).mul(0.75).equal() as number,
+        dateContentHeight: token
+          .calc(token.calc(token.fontHeightSM).add(token.marginXS))
+          .mul(3)
+          .add(token.calc(token.lineWidth).mul(2))
+          .equal() as number,
       },
     );
 
     return [genCalendarStyles(calendarToken)];
   },
-  (token) => ({
-    fullBg: token.colorBgContainer,
-    fullPanelBg: token.colorBgContainer,
-    itemActiveBg: token.controlItemBgActive,
-    yearControlWidth: 80,
-    monthControlWidth: 70,
-    miniContentHeight: 256,
-  }),
+  prepareComponentToken,
 );