imporve(ui): ContentWithQuestion less => cssinjs

oceanbase · Nov 10, 2023 · 0abd062 · 0abd062
1 parent df448d7
commit 0abd062
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 9 deletions.
diff --git a/packages/ui/src/ContentWithQuestion/index.tsx b/packages/ui/src/ContentWithQuestion/index.tsx
@@ -1,11 +1,9 @@
 import { QuestionCircleOutlined } from '@oceanbase/icons';
-import { Space, Tooltip } from '@oceanbase/design';
+import { ConfigProvider, Space, Tooltip } from '@oceanbase/design';
 import classNames from 'classnames';
-import React, { isValidElement } from 'react';
+import React, { useContext, isValidElement } from 'react';
 import { getPrefix } from '../_util';
-import './index.less';
-
-type IconPosition = 'prefix' | 'suffix';
+import useStyle from './style';
 
 export interface ContentWithQuestionProps {
   content?: React.ReactNode;
@@ -20,6 +18,7 @@ export interface ContentWithQuestionProps {
 const prefix = getPrefix('content-with-question');
 
 const ContentWithQuestion: React.FC<ContentWithQuestionProps> = ({
+  prefixCls: customizePrefixCls,
   content,
   tooltip,
   prefixIcon = null,
@@ -28,23 +27,29 @@ const ContentWithQuestion: React.FC<ContentWithQuestionProps> = ({
   children,
   ...restProps
 }: any) => {
+  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
+  const prefixCls = getPrefixCls('content-with-question', customizePrefixCls);
+  const { wrapSSR } = useStyle(prefixCls);
+
   // FIXME: antd 已经废弃 icon type 的用法，该组件也需要做相应处理，后面将会是传入 Icon 的形式而非 type
   const getIcon = (iconConfig: React.ReactNode) => {
     return iconConfig ? (
       <Tooltip {...tooltip}>
         {isValidElement(iconConfig) ? (
           iconConfig
         ) : (
-          <QuestionCircleOutlined className={`${prefix}-help`} />
+          <QuestionCircleOutlined className={`${prefixCls}-help`} />
         )}
       </Tooltip>
     ) : null;
   };
 
-  return (
+  return wrapSSR(
     <span
+      // eslint-disable-next-line react/no-unknown-property
+      prefixCls={customizePrefixCls}
       className={classNames({
-        [`${prefix}-item`]: true,
+        [`${prefixCls}-item`]: true,
         [className]: !!className,
       })}
       {...restProps}
@@ -53,7 +58,7 @@ const ContentWithQuestion: React.FC<ContentWithQuestionProps> = ({
         {getIcon(
           prefixIcon === true ? (
             <QuestionCircleOutlined
-              className={`${prefix}-help`}
+              className={`${prefixCls}-help`}
               style={{
                 marginRight: 4,
               }}

diff --git a/packages/ui/src/ContentWithQuestion/style/index.ts b/packages/ui/src/ContentWithQuestion/style/index.ts
@@ -0,0 +1,33 @@
+import type { CSSObject } from '@ant-design/cssinjs';
+import type { GenerateStyle } from '@oceanbase/design/es/theme';
+import { genComponentStyleHook } from '../../_util/genComponentStyleHook';
+
+export const genContentWithQuestionStyle: GenerateStyle<any> = (token: any): CSSObject => {
+  const { componentCls, paddingSM } = token;
+
+  return {
+    [`${componentCls}-item`]: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      [`${componentCls}-prefix`]: {
+        marginRight: paddingSM,
+      },
+      [`${componentCls}-suffix`]: {
+        marginLeft: paddingSM,
+      },
+      [`${componentCls}-help`]: {
+        cursor: 'help',
+      },
+      [`${componentCls}-color`]: {
+        color: 'red',
+      },
+    },
+  };
+};
+
+export default (prefixCls: string) => {
+  const useStyle = genComponentStyleHook('ContentWithQuestion', token => {
+    return [genContentWithQuestionStyle(token as any)];
+  });
+  return useStyle(prefixCls);
+};