refactor: popconfirm support css var (ant-design#45840)

* refactor: popconfirm support css var * Apply suggestions from code review Signed-off-by: MadCcc <[email protected]> * Apply suggestions from code review Signed-off-by: MadCcc <[email protected]> * fix: 补充遗漏的useStyle --------- Signed-off-by: MadCcc <[email protected]> Signed-off-by: MadCcc <[email protected]> Co-authored-by: MadCcc <[email protected]> Co-authored-by: MadCcc <[email protected]>
wanghui2021 · Nov 14, 2023 · 308d7ca · 308d7ca
1 parent 5224c05
commit 308d7ca
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 13 deletions.
diff --git a/components/popconfirm/PurePanel.tsx b/components/popconfirm/PurePanel.tsx
@@ -11,6 +11,7 @@ import { useLocale } from '../locale';
 import defaultLocale from '../locale/en_US';
 import PopoverPurePanel from '../popover/PurePanel';
 import useStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface PopconfirmLocale {
   okText: string;
@@ -108,9 +109,10 @@ const PurePanel: React.FC<PurePanelProps> = (props) => {
 
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('popconfirm', customizePrefixCls);
-  const [wrapSSR] = useStyle(prefixCls);
+  useStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
-  return wrapSSR(
+  return wrapCSSVar(
     <PopoverPurePanel
       placement={placement}
       className={classNames(prefixCls, className)}

diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
@@ -13,6 +13,7 @@ import Popover from '../popover';
 import type { AbstractTooltipProps, TooltipRef } from '../tooltip';
 import PurePanel, { Overlay } from './PurePanel';
 import usePopconfirmStyle from './style';
+import useCSSVar from './style/cssVar';
 
 export interface PopconfirmProps extends AbstractTooltipProps {
   title: React.ReactNode | RenderFunction;
@@ -95,9 +96,10 @@ const Popconfirm = React.forwardRef<TooltipRef, PopconfirmProps>((props, ref) =>
   const prefixCls = getPrefixCls('popconfirm', customizePrefixCls);
   const overlayClassNames = classNames(prefixCls, overlayClassName);
 
-  const [wrapSSR] = usePopconfirmStyle(prefixCls);
+  usePopconfirmStyle(prefixCls);
+  const wrapCSSVar = useCSSVar(prefixCls);
 
-  return wrapSSR(
+  return wrapCSSVar(
     <Popover
       {...omit(restProps, ['title'])}
       trigger={trigger}

diff --git a/components/popconfirm/style/cssVar.ts b/components/popconfirm/style/cssVar.ts
@@ -0,0 +1,4 @@
+import { genCSSVarRegister } from '../../theme/internal';
+import { prepareComponentToken } from '.';
+
+export default genCSSVarRegister('Popconfirm', prepareComponentToken);
diff --git a/components/popconfirm/style/index.tsx b/components/popconfirm/style/index.tsx
@@ -1,4 +1,4 @@
-import type { FullToken, GenerateStyle } from '../../theme/internal';
+import type { FullToken, GenerateStyle, GetDefaultToken } from '../../theme/internal';
 import { genComponentStyleHook } from '../../theme/internal';
 
 export interface ComponentToken {
@@ -76,16 +76,18 @@ const genBaseStyle: GenerateStyle<PopconfirmToken> = (token) => {
 };
 
 // ============================== Export ==============================
+export const prepareComponentToken: GetDefaultToken<'Popconfirm'> = (token) => {
+  const { zIndexPopupBase } = token;
+
+  return {
+    zIndexPopup: zIndexPopupBase + 60,
+  };
+};
+
 export default genComponentStyleHook(
   'Popconfirm',
   (token) => genBaseStyle(token),
-  (token) => {
-    const { zIndexPopupBase } = token;
-
-    return {
-      zIndexPopup: zIndexPopupBase + 60,
-    };
-  },
+  prepareComponentToken,
   {
     resetStyle: false,
   },

diff --git a/scripts/check-cssinjs.tsx b/scripts/check-cssinjs.tsx
@@ -55,7 +55,6 @@ async function checkCSSVar() {
     'message',
     'notification',
     'pagination',
-    'popconfirm',
     'progress',
     'qr-code',
     'radio',