Merge pull request #232 from oceanbase/dengfuping-dev

improve(theme): Recommend for token => useToken

.dumi/hooks/useMenu.tsx

@@ -3,6 +3,7 @@ import { Tag, theme } from '@oceanbase/design';
 import { Link, useFullSidebarData, useSidebarData } from 'dumi';
 import React, { useMemo } from 'react';
 import useLocation from './useLocation';
+import useSiteToken from './useSiteToken';
 
 export interface UseMenuOptions {
   before?: React.ReactNode;
@@ -14,7 +15,7 @@ const useMenu = (options: UseMenuOptions = {}): [MenuProps['items'], string] =>
   const { pathname, search } = useLocation();
   const sidebarData = useSidebarData();
   const { before, after } = options;
-  const { token } = theme.useToken();
+  const { token } = useSiteToken();
 
   const menuItems = useMemo<MenuProps['items']>(() => {
     const sidebarItems = [...(sidebarData ?? [])];

.dumi/hooks/useSiteToken.ts

@@ -4,14 +4,13 @@ import { ConfigProvider, theme } from '@oceanbase/design';
 const { useToken } = theme;
 
 const useSiteToken = () => {
-  const result = useToken();
+  const { token, ...rest } = useToken();
   const { getPrefixCls, iconPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const rootPrefixCls = getPrefixCls();
-  const { token } = result;
   const siteMarkdownCodeBg = token.colorFillTertiary;
 
   return {
-    ...result,
+    ...rest,
     token: {
       ...token,
       headerHeight: 64,

.dumi/theme/SiteThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { ConfigProvider, token } from '@oceanbase/design';
+import { ConfigProvider } from '@oceanbase/design';
 import type { ThemeConfig } from '@oceanbase/design';
 import { ChartProvider } from '@oceanbase/charts';
 import type { ThemeProviderProps } from 'antd-style';
@@ -8,6 +8,7 @@ import React, { useContext } from 'react';
 import useLocale from '../hooks/useLocale';
 import SiteContext from './slots/SiteContext';
 import zhCN from '../../packages/design/src/locale/zh-CN';
+import useSiteToken from '../hooks/useSiteToken';
 
 const SiteThemeProvider: FC<
   ThemeProviderProps<any> & {
@@ -22,6 +23,8 @@ const SiteThemeProvider: FC<
   const [_, lang] = useLocale();
   const { direction } = useContext(SiteContext);
 
+  const { token } = useSiteToken();
+
   return (
     <ThemeProvider
       {...rest}

packages/design/src/form/FormItem.tsx

@@ -3,7 +3,7 @@ import type { FormItemProps as AntFormItemProps } from 'antd/es/form';
 import type { ReactNode } from 'react';
 import React from 'react';
 import type { TooltipProps } from '../tooltip';
-import { getTooltipTypeList } from '../tooltip';
+import { useTooltipTypeList } from '../tooltip/hooks/useTooltipTypeList';
 
 const AntFormItem = AntForm.Item;
 
@@ -18,7 +18,7 @@ interface FormItemProps extends AntFormItemProps {
 }
 
 const Item: React.FC<FormItemProps> = ({ children, tooltip, ...restProps }) => {
-  const typeList = getTooltipTypeList();
+  const typeList = useTooltipTypeList();
   // tooltip config
   if (typeof tooltip === 'object' && !React.isValidElement(tooltip)) {
     const { icon, type, overlayInnerStyle, ...restTooltipProps } = tooltip as WrapperTooltipProps;

packages/design/src/modal/demo/over-height.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react';
-import { Button, Modal, token } from '@oceanbase/design';
+import { Button, Modal, theme } from '@oceanbase/design';
 
 export default () => {
   const [open, setOpen] = useState(false);
+  const { token } = theme.useToken();
 
   return (
     <>

packages/design/src/spin/demo/inside.tsx

@@ -1,19 +1,23 @@
 import React from 'react';
-import { Spin, token } from '@oceanbase/design';
+import { Spin, theme } from '@oceanbase/design';
 
-const App: React.FC = () => (
-  <div
-    style={{
-      margin: '20px 0',
-      marginBottom: 20,
-      padding: '30px 50px',
-      textAlign: 'center',
-      background: token.colorBgLayout,
-      borderRadius: 4,
-    }}
-  >
-    <Spin />
-  </div>
-);
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+
+  return (
+    <div
+      style={{
+        margin: '20px 0',
+        marginBottom: 20,
+        padding: '30px 50px',
+        textAlign: 'center',
+        background: token.colorBgLayout,
+        borderRadius: 4,
+      }}
+    >
+      <Spin />
+    </div>
+  );
+};
 
 export default App;

packages/design/src/spin/demo/tip.tsx

@@ -1,36 +1,39 @@
 import React from 'react';
-import { Alert, Space, Spin, token } from '@oceanbase/design';
+import { Alert, Space, Spin, theme } from '@oceanbase/design';
 
-const containerStyle = {
-  padding: 50,
-  background: token.colorBgLayout,
-  borderRadius: 4,
-  width: 120,
-  height: 120,
-};
+const App: React.FC = () => {
+  const { token } = theme.useToken();
+  const containerStyle = {
+    padding: 50,
+    background: token.colorBgLayout,
+    borderRadius: 4,
+    width: 120,
+    height: 120,
+  };
 
-const App: React.FC = () => (
-  <Space direction="vertical" style={{ width: '100%' }}>
-    <Space>
-      <Spin tip="Loading" size="small">
-        <div style={containerStyle} />
-      </Spin>
-      <Spin tip="Loading">
-        <div style={containerStyle} />
-      </Spin>
-      <Spin tip="Loading" size="large">
-        <div style={containerStyle} />
+  return (
+    <Space direction="vertical" style={{ width: '100%' }}>
+      <Space>
+        <Spin tip="Loading" size="small">
+          <div style={containerStyle} />
+        </Spin>
+        <Spin tip="Loading">
+          <div style={containerStyle} />
+        </Spin>
+        <Spin tip="Loading" size="large">
+          <div style={containerStyle} />
+        </Spin>
+      </Space>
+
+      <Spin tip="Loading...">
+        <Alert
+          message="Alert message title"
+          description="Further details about the context of this alert."
+          type="info"
+        />
       </Spin>
     </Space>
-
-    <Spin tip="Loading...">
-      <Alert
-        message="Alert message title"
-        description="Further details about the context of this alert."
-        type="info"
-      />
-    </Spin>
-  </Space>
-);
+  );
+};
 
 export default App;

packages/design/src/theme/index.md

@@ -27,62 +27,39 @@ export default () {
 
 ### 在 React 中使用
 
-- <Badge>⭐️ 推荐</Badge> 通过 `token` 对象来获取 Design Token，和 `useToken` 获取的值完全相同，且有两大优势:
-  - 使用时不用声明 `useToken`，`@oceanbase/design` 会帮你在 ConfigProvider 中自动注入，以降低业务调用成本。
-  - 支持在 React 类组件中使用。
+- 如果是函数组件，推荐使用 `useToken` hook 来获取 Design Token:
 
 ```tsx | pure
-// 无需声明 useToken，即引即用
-import { Button, ConfigProvider, token } from '@oceanbase/design';
+import { Button, useToken } from '@oceanbase/design';
 import React from 'react';
 
 const App: React.FC = () => {
-  return (
-    <ConfigProvider>
-      <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>
-    </ConfigProvider>
-  );
+  const { token } = useToken();
+
+  return <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>;
 };
 
 export default App;
 ```
 
+- 如果是类组件，可以通过 `token` 对象来获取 Design Token:
+
 ```tsx | pure
-// 支持在 React 类组件中使用
 import { Button, ConfigProvider, token } from '@oceanbase/design';
 import React from 'react';
 
 class App extends React.Component {
   render() {
-    return (
-      <ConfigProvider>
-        <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>
-      </ConfigProvider>
-    );
+    return <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>;
   }
 }
 
 export default App;
 ```
 
-- 当然，也可以通过 `useToken` hook 来获取 Design Token。只不过在实际的业务场景中会比较繁琐，而且只能在函数组件中使用。
-
-```tsx | pure
-import { Button, useToken } from '@oceanbase/design';
-import React from 'react';
-
-const App: React.FC = () => {
-  const { token } = useToken();
-
-  return <Button style={{ backgroundColor: token.colorPrimary }}>Button</Button>;
-};
-
-export default App;
-```
-
 ### 在非 React 中使用
 
-- 在常量文件、dva model 等非 React 环境下，也可以使用 `token` 对象来获取 Design Token。
+- 在常量文件、dva model 等非 React 环境下，可以使用 `token` 对象来获取 Design Token。
 
 ```ts
 import { token } from '@oceanbase/design';

packages/design/src/tooltip/MouseTooltip.tsx

@@ -2,7 +2,7 @@ import { useMouse, useSize } from 'ahooks';
 import type { TooltipPropsWithTitle as AntTooltipPropsWithTitle } from 'antd/es/tooltip';
 import React, { useRef, useState } from 'react';
 import ReactStickyMouseTooltip from 'react-sticky-mouse-tooltip';
-import { token } from '../static-function';
+import theme from '../theme';
 
 interface MouseTooltipProps extends AntTooltipPropsWithTitle {
   /* 外部传入的 visible 并不完全控制显示和隐藏，只是作为是否显示的前提条件 */
@@ -24,6 +24,7 @@ const MouseTooltip: React.FC<MouseTooltipProps> = ({
   mouseLeaveDelay = 0.1,
   ...restProps
 }) => {
+  const { token } = theme.useToken();
   const [visible, setVisible] = useState(false);
 
   const { color: textColor, ...restOverlayInnerStyle } = overlayInnerStyle || {};

packages/design/src/tooltip/hooks/useTooltipTypeList.ts

@@ -0,0 +1,32 @@
+import theme from '../../theme';
+
+export const useTooltipTypeList = () => {
+  const { token } = theme.useToken();
+  return [
+    {
+      type: 'light',
+      color: token.colorText,
+      backgroundColor: token.colorBgElevated,
+    },
+    {
+      type: 'success',
+      color: token.colorSuccess,
+      backgroundColor: token.colorSuccessBg,
+    },
+    {
+      type: 'info',
+      color: token.colorInfo,
+      backgroundColor: token.colorInfoBg,
+    },
+    {
+      type: 'warning',
+      color: token.colorWarning,
+      backgroundColor: token.colorWarningBg,
+    },
+    {
+      type: 'error',
+      color: token.colorError,
+      backgroundColor: token.colorErrorBg,
+    },
+  ];
+};

packages/design/src/tooltip/index.tsx

@@ -2,12 +2,13 @@ import { Tooltip as AntTooltip, Space } from 'antd';
 import type { TooltipPropsWithTitle as AntTooltipPropsWithTitle } from 'antd/es/tooltip';
 import React, { useContext, useEffect, useState } from 'react';
 import { CloseOutlined } from '@oceanbase/icons';
+import classNames from 'classnames';
 import { isNil } from 'lodash';
 import { token } from '../static-function';
 import MouseTooltip from './MouseTooltip';
 import ConfigProvider from '../config-provider';
 import useStyle from './style';
-import classNames from 'classnames';
+import { useTooltipTypeList } from './hooks/useTooltipTypeList';
 
 export * from 'antd/es/tooltip';
 
@@ -20,34 +21,6 @@ export interface TooltipProps extends AntTooltipPropsWithTitle {
   onClose?: (e: React.MouseEvent<HTMLElement>) => void;
 }
 
-export const getTooltipTypeList = () => [
-  {
-    type: 'light',
-    color: token.colorText,
-    backgroundColor: token.colorBgElevated,
-  },
-  {
-    type: 'success',
-    color: token.colorSuccess,
-    backgroundColor: token.colorSuccessBg,
-  },
-  {
-    type: 'info',
-    color: token.colorInfo,
-    backgroundColor: token.colorInfoBg,
-  },
-  {
-    type: 'warning',
-    color: token.colorWarning,
-    backgroundColor: token.colorWarningBg,
-  },
-  {
-    type: 'error',
-    color: token.colorError,
-    backgroundColor: token.colorErrorBg,
-  },
-];
-
 type CompoundedComponent = React.FC<TooltipProps> & {
   /** @internal */
   __ANT_TOOLTIP: boolean;
@@ -121,7 +94,7 @@ const Tooltip: CompoundedComponent = ({
     titleNode
   );
 
-  const typeList = getTooltipTypeList();
+  const typeList = useTooltipTypeList();
   const typeItem = typeList.find(item => item.type === type);
   return wrapSSR(
     mouseFollow ? (

packages/ui/src/BasicLayout/index.tsx

@@ -1,6 +1,6 @@
 import { CaretRightFilled, LeftOutlined, RightOutlined } from '@oceanbase/icons';
 import { setAlpha } from '@ant-design/pro-components';
-import { Typography, token } from '@oceanbase/design';
+import { Typography, theme } from '@oceanbase/design';
 import { isNullValue } from '@oceanbase/util';
 import { ConfigProvider, Divider, Layout, Menu, Tooltip } from '@oceanbase/design';
 import type { BadgeProps } from '@oceanbase/design/es/badge';
@@ -92,6 +92,7 @@ const BasicLayout: React.FC<BasicLayoutProps> = ({
   prefixCls: customizePrefixCls,
   ...restProps
 }) => {
+  const { token } = theme.useToken();
   const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);
   const prefixCls = getPrefixCls('pro-basic-layout', customizePrefixCls);
   const { wrapSSR } = useStyle(prefixCls);