✨ feat: 将 r 改名为 responsive

BREAKING CHANGE: 为了方便用户理解，将 r 改名为 responsive
ant-design · Feb 4, 2023 · 022c25b · 022c25b
1 parent 1b3b20f
commit 022c25b
Show file tree

Hide file tree

Showing 14 changed files with 56 additions and 41 deletions.
diff --git a/.dumi/theme/pages/Docs/styles.ts b/.dumi/theme/pages/Docs/styles.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, r, token }) => ({
+export const useStyles = createStyles(({ css, responsive, token }) => ({
   layout: css`
     background-color: ${token.colorBgLayout};
     background-image: linear-gradient(
@@ -18,7 +18,7 @@ export const useStyles = createStyles(({ css, r, token }) => ({
       'sidebar footer footer';
     min-height: 100vh;
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       display: flex;
       flex-direction: column;
     }
@@ -33,7 +33,7 @@ export const useStyles = createStyles(({ css, r, token }) => ({
     overflow: auto;
     margin-top: 48px;
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       z-index: 300;
       top: ${token.headerHeight + 1}px;
       margin-top: 0;
@@ -57,7 +57,7 @@ export const useStyles = createStyles(({ css, r, token }) => ({
     margin: 0 24px;
 
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       margin: 0;
     }
   }

diff --git a/.dumi/theme/slots/Content/style.ts b/.dumi/theme/slots/Content/style.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ token, r, isDarkMode, css }) => ({
+export const useStyles = createStyles(({ token, responsive, isDarkMode, css }) => ({
   content: css`
     min-height: 400px;
     flex: 1;
@@ -11,7 +11,8 @@ export const useStyles = createStyles(({ token, r, isDarkMode, css }) => ({
     border-radius: 10px;
     background-color: ${token.colorBgContainer};
     box-shadow: ${token.boxShadow};
-    ${r.mobile} {
+
+    ${responsive.mobile} {
       padding: 8px 16px;
       border-radius: 0;
     }

diff --git a/.dumi/theme/slots/Features/style.ts b/.dumi/theme/slots/Features/style.ts
@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 import chroma from 'chroma-js';
 
-export const useStyles = createStyles(({ token, r, css, stylish, isDarkMode }) => ({
+export const useStyles = createStyles(({ token, responsive, css, stylish, isDarkMode }) => ({
   container: css`
     max-width: ${token.contentMaxWidth}px;
 
@@ -13,7 +13,7 @@ export const useStyles = createStyles(({ token, r, css, stylish, isDarkMode }) =
 
     margin: 0 16px;
 
-    ${r({
+    ${responsive({
       mobile: css`
         flex-direction: column;
         display: flex;
@@ -112,7 +112,7 @@ export const useStyles = createStyles(({ token, r, css, stylish, isDarkMode }) =
     ${stylish.heroBlurBall};
     scale: 2;
     opacity: 0.05;
-    ${r.mobile} {
+    ${responsive.mobile} {
       display: none;
     }
   `,

diff --git a/.dumi/theme/slots/Footer/index.tsx b/.dumi/theme/slots/Footer/index.tsx
@@ -5,7 +5,7 @@ import { type FC } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 
 const useStyles = createStyles(
-  ({ css, r, token }) => css`
+  ({ css, responsive, token }) => css`
     grid-area: footer;
     border-top: 1px solid ${token.colorSplit};
     color: ${token.colorTextDescription};
@@ -15,7 +15,7 @@ const useStyles = createStyles(
     padding: 24px 0;
     align-self: stretch;
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       border: none;
       flex-direction: column;
     }

diff --git a/.dumi/theme/slots/Header/style.ts b/.dumi/theme/slots/Header/style.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyle = createStyles(({ css, r, token }) => ({
+export const useStyle = createStyles(({ css, responsive, token }) => ({
   header: css`
     top: 0;
     position: sticky;
@@ -12,15 +12,15 @@ export const useStyle = createStyles(({ css, r, token }) => ({
     grid-area: head;
     align-self: stretch;
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       background: ${token.colorBgContainer};
     }
   `,
   content: css`
     padding: 0 24px;
     height: 64px;
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       padding: 0 16px;
     }
   `,
@@ -34,7 +34,7 @@ export const useStyle = createStyles(({ css, r, token }) => ({
       display: flex;
       align-items: center;
 
-      ${r.mobile} {
+      ${responsive.mobile} {
         margin: 8px 16px;
         padding-top: 24px;
         justify-content: center;

diff --git a/.dumi/theme/slots/Hero/style.ts b/.dumi/theme/slots/Hero/style.ts
@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, r, token, stylish, isDarkMode }) => ({
+export const useStyles = createStyles(({ css, responsive, token, stylish, isDarkMode }) => ({
   container: css`
     position: relative;
     text-align: center;
@@ -16,7 +16,7 @@ export const useStyles = createStyles(({ css, r, token, stylish, isDarkMode }) =
       font-size: 20px;
       line-height: 1.6;
 
-      ${r({
+      ${responsive({
         mobile: { fontSize: 16 },
       })}
     }
@@ -32,7 +32,7 @@ export const useStyles = createStyles(({ css, r, token, stylish, isDarkMode }) =
     margin: 0;
     font-family: AliPuHui, ${token.fontFamily};
 
-    ${r({
+    ${responsive({
       mobile: { fontSize: 40 },
     })}
 
@@ -56,7 +56,7 @@ export const useStyles = createStyles(({ css, r, token, stylish, isDarkMode }) =
     font-size: 68px;
     font-family: AliPuHui, ${token.fontFamily};
     font-weight: bold;
-    ${r({
+    ${responsive({
       mobile: { fontSize: 40 },
     })}
 
@@ -71,7 +71,7 @@ export const useStyles = createStyles(({ css, r, token, stylish, isDarkMode }) =
     font-size: ${token.fontSizeHeading3}px;
     color: ${token.colorTextSecondary};
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       font-size: ${token.fontSizeHeading5}px;
       margin: 24px 16px;
     }
@@ -82,7 +82,7 @@ export const useStyles = createStyles(({ css, r, token, stylish, isDarkMode }) =
     display: flex;
     justify-content: center;
 
-    ${r({
+    ${responsive({
       mobile: { marginTop: 24 },
     })}
   `,
@@ -98,7 +98,7 @@ export const useStyles = createStyles(({ css, r, token, stylish, isDarkMode }) =
     opacity: 0.2;
     ${stylish.heroBlurBall}
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       width: 200px;
       height: 300px;
     }

diff --git a/.dumi/theme/slots/Logo/style.ts b/.dumi/theme/slots/Logo/style.ts
@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(
-  ({ css, stylish, r, token }) => css`
+  ({ css, stylish, responsive, token }) => css`
     display: inline-flex;
     align-items: center;
     font-family: AliPuHui, ${token.fontFamily};
@@ -13,15 +13,15 @@ export const useStyles = createStyles(
 
     ${stylish.clickableText};
 
-    ${r.mobile} {
+    ${responsive.mobile} {
       font-size: 18px;
     }
 
     img {
       margin-inline-end: 10px;
       height: 40px;
 
-      ${r.mobile} {
+      ${responsive.mobile} {
         height: 32px;
       }
     }

diff --git a/.dumi/theme/slots/Navbar/index.tsx b/.dumi/theme/slots/Navbar/index.tsx
@@ -6,7 +6,7 @@ import { memo, type FC } from 'react';
 import { shallow } from 'zustand/shallow';
 import { activePathSel, useSiteStore } from '../../store/useSiteStore';
 
-const useStyles = createStyles(({ css, r, token, stylish, prefixCls }) => {
+const useStyles = createStyles(({ css, responsive, token, stylish, prefixCls }) => {
   const prefix = `.${prefixCls}-tabs`;
 
   const marginHoriz = 16;
@@ -39,7 +39,7 @@ const useStyles = createStyles(({ css, r, token, stylish, prefixCls }) => {
         margin-bottom: 0;
       }
 
-      ${r.mobile} {
+      ${responsive.mobile} {
         display: none;
       }
     `,

diff --git a/.dumi/theme/slots/SearchBar/style.ts b/.dumi/theme/slots/SearchBar/style.ts
@@ -1,12 +1,12 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ token, r, css, cx }) => {
+export const useStyles = createStyles(({ token, responsive, css, cx }) => {
   return {
     container: css`
       position: relative;
 
       // TODO: support search for mobile devices
-      ${r.mobile} {
+      ${responsive.mobile} {
         display: none;
       }
     `,
@@ -29,7 +29,7 @@ export const useStyles = createStyles(({ token, r, css, cx }) => {
         transition: all 0.3s;
         pointer-events: none;
 
-        ${r.mobile} {
+        ${responsive.mobile} {
           display: none;
         }
       `,

diff --git a/.dumi/theme/slots/Toc/style.ts b/.dumi/theme/slots/Toc/style.ts
@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 import chroma from 'chroma-js';
 
-export const useStyles = createStyles(({ token, prefixCls, r, css }) => {
+export const useStyles = createStyles(({ token, prefixCls, responsive, css }) => {
   const fixHeight = 36;
   return {
     container: css`
@@ -14,7 +14,7 @@ export const useStyles = createStyles(({ token, prefixCls, r, css }) => {
       overflow: auto;
       margin-top: 48px;
 
-      ${r.mobile} {
+      ${responsive.mobile} {
         z-index: 300;
         top: ${token.headerHeight + 1}px;
         margin-top: 0;

diff --git a/src/functions/createStyles/index.ts b/src/functions/createStyles/index.ts
@@ -24,8 +24,19 @@ import { convertResponsiveStyleToString, useMediaQueryMap } from './response';
 export interface CreateStylesTheme extends CommonStyleUtils {
   token: FullToken;
   stylish: FullStylish;
+  /**
+   * ThemeProvider 下当前的主题模式
+   */
   appearance: ThemeAppearance;
+  /**
+   * appearance === 'dark' 的语法糖，可以直接使用 isDarkMode 来降低外观的判断成本
+   */
   isDarkMode: boolean;
+  /**
+   * 在 ThemeProvider 上标记的 prefix，可以拿到当前的 组件 prefix
+   * 便于更加灵活地响应组件 prefix
+   * @default ant
+   */
   prefixCls: string;
 }
 
@@ -46,6 +57,8 @@ export type GetStyleFn<Input extends BaseReturnType, Props> = (
 
 /**
  * 创建样式的函数或者对象
+ * 可以传入 StyleObject 或者 ()=> StyleObject 函数
+ * StyleObject 可以是
  */
 export type StyleOrGetStyleFn<Input extends BaseReturnType, Props> =
   | Input
@@ -91,7 +104,7 @@ export const createStyles =
             // 工具函数们
             cx: reactCx,
             css: reactCss,
-            r: responsive,
+            responsive,
           },
           props!,
         ) as any;

diff --git a/src/types/function.ts b/src/types/function.ts
@@ -26,7 +26,7 @@ export interface CommonStyleUtils {
   /**
    * 可以快速创建响应式样式的工具函数
    */
-  r: ResponsiveStyleUtil;
+  responsive: ResponsiveStyleUtil;
 }
 
 /**

diff --git a/src/types/genericUtils.ts b/src/types/genericUtils.ts
@@ -1,10 +1,11 @@
+import { SerializedStyles } from '@emotion/serialize';
 import { CSSObject } from './css';
 
 /**
- * 任何一组样式，最基础的入参就只有 string
+ * 任何一组样式，最基础的入参就只有 CSS Style 对象 / 或者
  */
 
-export type AtomInputType = string | CSSObject;
+export type AtomInputType = string | CSSObject | SerializedStyles;
 
 /**
  * getStyle 函数的的基础出参类型，我们需要将为这个类型提供准确定义，进而为开发者用户提供精准的类型提示
@@ -15,7 +16,7 @@ export type AtomInputType = string | CSSObject;
  */
 export type BaseReturnType = KVObject | AtomInputType;
 
-type KVObject = Record<string, CSSObject | string>;
+type KVObject = Record<string, CSSObject | string | SerializedStyles>;
 
 type StyleObjectOnly<T extends BaseReturnType> = T extends string ? never : T;
 

diff --git a/tests/functions/createStyles.test.tsx b/tests/functions/createStyles.test.tsx
@@ -184,10 +184,10 @@ describe('createStyles', () => {
 
 describe('createStyles：响应式工具函数', () => {
   it('断点与设备查询', () => {
-    const useStyles = createStyles(({ css, r }) => ({
+    const useStyles = createStyles(({ css, responsive }) => ({
       container: css`
         background-color: blue;
-        ${r({
+        ${responsive({
           xs: css`
             background-color: red;
           `,
@@ -231,9 +231,9 @@ describe('createStyles：响应式工具函数', () => {
   });
   it('使用了不存在的断点，不输出样式', () => {
     const useStyles = createStyles(
-      ({ css, r }) => css`
+      ({ css, responsive }) => css`
         background-color: blue;
-        ${r({
+        ${responsive({
           xxx: css`
             background-color: red;
           `,