refactor: descriptions

components/_util/hooks/useBreakpoint.ts

@@ -1,19 +1,21 @@
 import type { Ref } from 'vue';
 import { onMounted, onUnmounted, ref } from 'vue';
 import type { ScreenMap } from '../../_util/responsiveObserve';
-import ResponsiveObserve from '../../_util/responsiveObserve';
+import useResponsiveObserve from '../../_util/responsiveObserve';
 
 function useBreakpoint(): Ref<ScreenMap> {
   const screens = ref<ScreenMap>({});
   let token = null;
+  const responsiveObserve = useResponsiveObserve();
+
   onMounted(() => {
-    token = ResponsiveObserve.subscribe(supportScreens => {
+    token = responsiveObserve.value.subscribe(supportScreens => {
       screens.value = supportScreens;
     });
   });
 
   onUnmounted(() => {
-    ResponsiveObserve.unsubscribe(token);
+    responsiveObserve.value.unsubscribe(token);
   });
 
   return screens;

components/_util/responsiveObserve.ts

@@ -1,75 +1,86 @@
+import type { GlobalToken } from '../theme/interface';
+import { useToken } from '../theme/internal';
+import useMemo from './hooks/useMemo';
+
 export type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
 export type BreakpointMap = Record<Breakpoint, string>;
 export type ScreenMap = Partial<Record<Breakpoint, boolean>>;
 export type ScreenSizeMap = Partial<Record<Breakpoint, number>>;
 
 export const responsiveArray: Breakpoint[] = ['xxxl', 'xxl', 'xl', 'lg', 'md', 'sm', 'xs'];
+type SubscribeFunc = (screens: ScreenMap) => void;
 
-export const responsiveMap: BreakpointMap = {
-  xs: '(max-width: 575px)',
-  sm: '(min-width: 576px)',
-  md: '(min-width: 768px)',
-  lg: '(min-width: 992px)',
-  xl: '(min-width: 1200px)',
-  xxl: '(min-width: 1600px)',
-  xxxl: '(min-width: 2000px)',
-};
+const getResponsiveMap = (token: GlobalToken): BreakpointMap => ({
+  xs: `(max-width: ${token.screenXSMax}px)`,
+  sm: `(min-width: ${token.screenSM}px)`,
+  md: `(min-width: ${token.screenMD}px)`,
+  lg: `(min-width: ${token.screenLG}px)`,
+  xl: `(min-width: ${token.screenXL}px)`,
+  xxl: `(min-width: ${token.screenXXL}px)`,
+  xxxl: `{min-width: ${token.screenXXXL}px}`,
+});
 
-type SubscribeFunc = (screens: ScreenMap) => void;
-const subscribers = new Map<Number, SubscribeFunc>();
-let subUid = -1;
-let screens = {};
+export default function useResponsiveObserver() {
+  const [, token] = useToken();
+  const responsiveMap: BreakpointMap = getResponsiveMap(token.value);
 
-const responsiveObserve = {
-  matchHandlers: {} as {
-    [prop: string]: {
-      mql: MediaQueryList;
-      listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
-    };
-  },
-  dispatch(pointMap: ScreenMap) {
-    screens = pointMap;
-    subscribers.forEach(func => func(screens));
-    return subscribers.size >= 1;
-  },
-  subscribe(func: SubscribeFunc): number {
-    if (!subscribers.size) this.register();
-    subUid += 1;
-    subscribers.set(subUid, func);
-    func(screens);
-    return subUid;
-  },
-  unsubscribe(token: number) {
-    subscribers.delete(token);
-    if (!subscribers.size) this.unregister();
-  },
-  unregister() {
-    Object.keys(responsiveMap).forEach((screen: string) => {
-      const matchMediaQuery = responsiveMap[screen];
-      const handler = this.matchHandlers[matchMediaQuery];
-      handler?.mql.removeListener(handler?.listener);
-    });
-    subscribers.clear();
-  },
-  register() {
-    Object.keys(responsiveMap).forEach((screen: string) => {
-      const matchMediaQuery = responsiveMap[screen];
-      const listener = ({ matches }: { matches: boolean }) => {
-        this.dispatch({
-          ...screens,
-          [screen]: matches,
-        });
-      };
-      const mql = window.matchMedia(matchMediaQuery);
-      mql.addListener(listener);
-      this.matchHandlers[matchMediaQuery] = {
-        mql,
-        listener,
-      };
+  // To avoid repeat create instance, we add `useMemo` here.
+  return useMemo(() => {
+    const subscribers = new Map<Number, SubscribeFunc>();
+    let subUid = -1;
+    let screens = {};
 
-      listener(mql);
-    });
-  },
-};
+    return {
+      matchHandlers: {} as {
+        [prop: string]: {
+          mql: MediaQueryList;
+          listener: ((this: MediaQueryList, ev: MediaQueryListEvent) => any) | null;
+        };
+      },
+      dispatch(pointMap: ScreenMap) {
+        screens = pointMap;
+        subscribers.forEach(func => func(screens));
+        return subscribers.size >= 1;
+      },
+      subscribe(func: SubscribeFunc): number {
+        if (!subscribers.size) this.register();
+        subUid += 1;
+        subscribers.set(subUid, func);
+        func(screens);
+        return subUid;
+      },
+      unsubscribe(paramToken: number) {
+        subscribers.delete(paramToken);
+        if (!subscribers.size) this.unregister();
+      },
+      unregister() {
+        Object.keys(responsiveMap).forEach((screen: string) => {
+          const matchMediaQuery = responsiveMap[screen];
+          const handler = this.matchHandlers[matchMediaQuery];
+          handler?.mql.removeListener(handler?.listener);
+        });
+        subscribers.clear();
+      },
+      register() {
+        Object.keys(responsiveMap).forEach((screen: string) => {
+          const matchMediaQuery = responsiveMap[screen];
+          const listener = ({ matches }: { matches: boolean }) => {
+            this.dispatch({
+              ...screens,
+              [screen]: matches,
+            });
+          };
+          const mql = window.matchMedia(matchMediaQuery);
+          mql.addListener(listener);
+          this.matchHandlers[matchMediaQuery] = {
+            mql,
+            listener,
+          };
 
-export default responsiveObserve;
+          listener(mql);
+        });
+      },
+      responsiveMap,
+    };
+  }, [token]);
+}

components/descriptions/Cell.tsx

@@ -11,8 +11,8 @@ interface CellProps extends HTMLAttributes {
   labelStyle?: CSSProperties;
   contentStyle?: CSSProperties;
   bordered?: boolean;
-  label?: VNodeTypes;
-  content?: VNodeTypes;
+  label?: number | VNodeTypes;
+  content?: number | VNodeTypes;
   colon?: boolean;
 }
 
@@ -49,7 +49,7 @@ const Cell: FunctionalComponent<CellProps> = props => {
   return (
     <Component class={[`${itemPrefixCls}-item`]} colSpan={span}>
       <div class={`${itemPrefixCls}-item-container`}>
-        {label && (
+        {(label || label === 0) && (
           <span
             class={[
               `${itemPrefixCls}-item-label`,
@@ -62,7 +62,7 @@ const Cell: FunctionalComponent<CellProps> = props => {
             {label}
           </span>
         )}
-        {content && (
+        {(content || content === 0) && (
           <span class={`${itemPrefixCls}-item-content`} style={contentStyle}>
             {content}
           </span>

components/descriptions/index.en-US.md

@@ -2,7 +2,7 @@
 category: Components
 type: Data Display
 title: Descriptions
-cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 Display multiple read-only fields in groups.

components/descriptions/index.tsx

@@ -20,13 +20,15 @@ import {
 } from 'vue';
 import warning from '../_util/warning';
 import type { Breakpoint, ScreenMap } from '../_util/responsiveObserve';
-import ResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
+import useResponsiveObserve, { responsiveArray } from '../_util/responsiveObserve';
 import Row from './Row';
 import PropTypes from '../_util/vue-types';
 import { cloneElement } from '../_util/vnode';
 import { flattenChildren } from '../_util/props-util';
 import useConfigInject from '../config-provider/hooks/useConfigInject';
 
+import useStyle from './style';
+
 export const DescriptionsItemProps = {
   prefixCls: String,
   label: PropTypes.any,
@@ -82,7 +84,7 @@ function getColumn(column: DescriptionsProps['column'], screens: ScreenMap): num
   return 3;
 }
 
-function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number): VNode {
+function getFilledItem(node: VNode, rowRestCol: number, span?: number): VNode {
   let clone = node;
 
   if (span === undefined || span > rowRestCol) {
@@ -106,12 +108,12 @@ function getRows(children: VNode[], column: number) {
   let tmpRow: VNode[] = [];
   let rowRestCol = column;
   childNodes.forEach((node, index) => {
-    const span: number | undefined = node.props?.span;
+    const span: number = node.props?.span;
     const mergedSpan = span || 1;
 
     // Additional handle last one
     if (index === childNodes.length - 1) {
-      tmpRow.push(getFilledItem(node, span, rowRestCol));
+      tmpRow.push(getFilledItem(node, rowRestCol, span));
       rows.push(tmpRow);
       return;
     }
@@ -120,7 +122,7 @@ function getRows(children: VNode[], column: number) {
       rowRestCol -= mergedSpan;
       tmpRow.push(node);
     } else {
-      tmpRow.push(getFilledItem(node, mergedSpan, rowRestCol));
+      tmpRow.push(getFilledItem(node, rowRestCol, mergedSpan));
       rows.push(tmpRow);
       rowRestCol = column;
       tmpRow = [];
@@ -167,8 +169,12 @@ const Descriptions = defineComponent({
     const { prefixCls, direction } = useConfigInject('descriptions', props);
     let token: number;
     const screens = ref<ScreenMap>({});
+
+    const [wrapSSR, hashId] = useStyle(prefixCls);
+    const responsiveObserve = useResponsiveObserve();
+
     onBeforeMount(() => {
-      token = ResponsiveObserve.subscribe(screen => {
+      token = responsiveObserve.value.subscribe(screen => {
         if (typeof props.column !== 'object') {
           return;
         }
@@ -177,7 +183,7 @@ const Descriptions = defineComponent({
     });
 
     onBeforeUnmount(() => {
-      ResponsiveObserve.unsubscribe(token);
+      responsiveObserve.value.unsubscribe(token);
     });
 
     provide(descriptionsContext, {
@@ -200,7 +206,7 @@ const Descriptions = defineComponent({
       const children = slots.default?.();
       const rows = getRows(children, mergeColumn.value);
 
-      return (
+      return wrapSSR(
         <div
           class={[
             prefixCls.value,
@@ -209,6 +215,7 @@ const Descriptions = defineComponent({
               [`${prefixCls.value}-bordered`]: !!bordered,
               [`${prefixCls.value}-rtl`]: direction.value === 'rtl',
             },
+            hashId.value,
           ]}
         >
           {(title || extra) && (
@@ -234,7 +241,7 @@ const Descriptions = defineComponent({
               </tbody>
             </table>
           </div>
-        </div>
+        </div>,
       );
     };
   },

components/descriptions/index.zh-CN.md

@@ -3,7 +3,7 @@ category: Components
 type: 数据展示
 title: Descriptions
 subtitle: 描述列表
-cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
+cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*fHdlTpif6XQAAAAAAAAAAAAADrJ8AQ/original
 ---
 
 成组展示多个只读字段。