refactor: descriptions use composition-api

Author: zkwolf

components/descriptions/index.tsx

@@ -1,12 +1,14 @@
 import {
   inject,
+  ref,
   App,
   defineComponent,
   PropType,
   VNode,
-  VNodeTypes,
   HTMLAttributes,
   ExtractPropTypes,
+  onMounted,
+  onBeforeUnmount,
 } from 'vue';
 import warning from '../_util/warning';
 import ResponsiveObserve, {
@@ -17,27 +19,16 @@ import ResponsiveObserve, {
 import { defaultConfigProvider } from '../config-provider';
 import Row from './Row';
 import PropTypes from '../_util/vue-types';
-import { getComponent, getSlot } from '../_util/props-util';
-import BaseMixin from '../_util/BaseMixin';
 import { tuple } from '../_util/type';
 import { cloneElement } from '../_util/vnode';
+import { filterEmpty } from '../_util/props-util';
 
 export const DescriptionsItemProps = {
   prefixCls: PropTypes.string,
   label: PropTypes.any,
   span: PropTypes.number,
 };
 
-function toArray(value: any) {
-  let ret = value;
-  if (value === undefined) {
-    ret = [];
-  } else if (!Array.isArray(value)) {
-    ret = [value];
-  }
-  return ret;
-}
-
 export const DescriptionsItem = {
   name: 'ADescriptionsItem',
   props: {
@@ -94,8 +85,8 @@ function getFilledItem(node: VNode, span: number | undefined, rowRestCol: number
   return clone;
 }
 
-function getRows(children: VNodeTypes, column: number) {
-  const childNodes = toArray(children).filter(n => n);
+function getRows(children: VNode[], column: number) {
+  const childNodes = filterEmpty(children);
   const rows: VNode[][] = [];
 
   let tmpRow: VNode[] = [];
@@ -146,88 +137,82 @@ export type DescriptionsProps = HTMLAttributes &
 const Descriptions = defineComponent<DescriptionsProps>({
   name: 'ADescriptions',
   Item: DescriptionsItem,
-  mixins: [BaseMixin],
-  setup() {
-    return {
-      configProvider: inject('configProvider', defaultConfigProvider),
-    };
-  },
-  data() {
-    return {
-      screens: {},
-      token: undefined,
-    };
-  },
-  mounted() {
-    const { column } = this.$props;
-    this.token = ResponsiveObserve.subscribe(screens => {
-      if (typeof column !== 'object') {
-        return;
-      }
-      this.setState({
-        screens,
+  setup(props, { slots }) {
+    let token: number;
+
+    const screens = ref<ScreenMap>({});
+
+    onMounted(() => {
+      token = ResponsiveObserve.subscribe(screen => {
+        if (typeof props.column !== 'object') {
+          return;
+        }
+
+        screens.value = screen;
       });
     });
-  },
-  beforeUnmount() {
-    ResponsiveObserve.unsubscribe(this.token);
-  },
-  render() {
-    const {
-      prefixCls: customizePrefixCls,
-      column,
-      size,
-      bordered = false,
-      layout = 'horizontal',
-      colon = true,
-    } = this.$props;
-    const title = getComponent(this, 'title');
-    const extra = getComponent(this, 'extra');
-
-    const getPrefixCls = this.configProvider.getPrefixCls;
-    const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
-    const mergeColumn = getColumn(column, this.screens);
-    const children = getSlot(this);
-    const rows = getRows(children, mergeColumn);
-
-    return (
-      <div
-        class={[
-          prefixCls,
-          {
-            [`${prefixCls}-${size}`]: size !== 'default',
-            [`${prefixCls}-bordered`]: !!bordered,
-          },
-        ]}
-      >
-        {(title || extra) && (
-          <div class={`${prefixCls}-header`}>
-            <div class={`${prefixCls}-title`}>{title}</div>
-            <div class={`${prefixCls}-extra`}>{extra}</div>
+
+    onBeforeUnmount(() => {
+      ResponsiveObserve.unsubscribe(token);
+    });
+
+    return () => {
+      const {
+        prefixCls: customizePrefixCls,
+        column,
+        size,
+        bordered = false,
+        layout = 'horizontal',
+        colon = true,
+        title = slots.title?.() || undefined,
+        extra = slots.extra?.() || undefined,
+      } = props;
+
+      const { getPrefixCls } = inject('configProvider', defaultConfigProvider);
+      const prefixCls = getPrefixCls('descriptions', customizePrefixCls);
+      const mergeColumn = getColumn(column, screens.value);
+      const children = slots.default?.();
+      const rows = getRows(children, mergeColumn);
+
+      return (
+        <div
+          class={[
+            prefixCls,
+            {
+              [`${prefixCls}-${size}`]: size !== 'default',
+              [`${prefixCls}-bordered`]: !!bordered,
+            },
+          ]}
+        >
+          {(title || extra) && (
+            <div class={`${prefixCls}-header`}>
+              <div class={`${prefixCls}-title`}>{title}</div>
+              <div class={`${prefixCls}-extra`}>{extra}</div>
+            </div>
+          )}
+          <div class={`${prefixCls}-view`}>
+            <table>
+              <tbody>
+                {rows.map((row, index) => (
+                  <Row
+                    key={index}
+                    index={index}
+                    colon={colon}
+                    prefixCls={prefixCls}
+                    vertical={layout === 'vertical'}
+                    bordered={bordered}
+                    row={row}
+                  />
+                ))}
+              </tbody>
+            </table>
           </div>
-        )}
-        <div class={`${prefixCls}-view`}>
-          <table>
-            <tbody>
-              {rows.map((row, index) => (
-                <Row
-                  key={index}
-                  index={index}
-                  colon={colon}
-                  prefixCls={prefixCls}
-                  vertical={layout === 'vertical'}
-                  bordered={bordered}
-                  row={row}
-                />
-              ))}
-            </tbody>
-          </table>
         </div>
-      </div>
-    );
+      );
+    };
   },
 });
-    
+
 Descriptions.props = descriptionsProps;
 
 Descriptions.install = function(app: App) {