chore(Layout): use relation

src/col/index.tsx

@@ -1,6 +1,6 @@
 import { computed, PropType } from 'vue';
 import { createNamespace } from '../utils';
-import { useParent } from '../composition/use-parent';
+import { useParent } from '../composition/use-relation';
 import { ROW_KEY, RowProvide } from '../row';
 
 const [createComponent, bem] = createNamespace('col');
@@ -19,7 +19,7 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const { parent, index } = useParent<RowProvide>(ROW_KEY, () => +props.span);
+    const { parent, index } = useParent<RowProvide>(ROW_KEY);
 
     const style = computed(() => {
       if (!parent) {

src/composition/use-relation.ts

@@ -94,23 +94,35 @@ export function useChildren(key: string) {
   };
 }
 
-export function useParent(key: string) {
-  const parent = inject<any | null>(key, null);
+type ParentProvide<T> = T & {
+  link(child: InternalInstance): void;
+  unlink(child: InternalInstance): void;
+  children: PublicInstance[];
+  internalChildren: InternalInstance[];
+};
+
+export function useParent<T>(key: string) {
+  const parent = inject<ParentProvide<T> | null>(key, null);
 
   if (parent) {
     const instance = getCurrentInstance();
-    const index = computed(() => parent.internalChildren.indexOf(instance));
 
-    parent.link(instance);
+    if (instance) {
+      const { link, unlink, internalChildren, ...rest } = parent;
 
-    onUnmounted(() => {
-      parent.unlink(instance);
-    });
+      link(instance);
 
-    return {
-      parent,
-      index,
-    };
+      onUnmounted(() => {
+        unlink(instance);
+      });
+
+      const index = computed(() => internalChildren.indexOf(instance));
+
+      return {
+        parent: rest,
+        index,
+      };
+    }
   }
 
   return {};

src/row/index.tsx

@@ -1,5 +1,6 @@
-import { provide, computed, reactive, PropType, ComputedRef } from 'vue';
+import { computed, PropType, ComputedRef } from 'vue';
 import { createNamespace } from '../utils';
+import { useChildren } from '../composition/use-relation';
 
 const [createComponent, bem] = createNamespace('row');
 
@@ -7,11 +8,8 @@ export const ROW_KEY = 'vanRow';
 
 export type RowSpaces = { left?: number; right: number }[];
 
-export type RowChild = () => number;
-
 export type RowProvide = {
   spaces: ComputedRef<RowSpaces>;
-  children: RowChild[];
 };
 
 export type RowAlign = 'top' | 'center' | 'bottom';
@@ -39,14 +37,16 @@ export default createComponent({
   },
 
   setup(props, { slots }) {
-    const children = reactive<RowChild[]>([]);
+    const { children, linkChildren } = useChildren(ROW_KEY);
 
     const groups = computed(() => {
       const groups: number[][] = [[]];
 
       let totalSpan = 0;
-      children.forEach((getSpan, index) => {
-        totalSpan += getSpan();
+      children.forEach((child, index) => {
+        // TODO
+        // @ts-ignore
+        totalSpan += Number(child.span);
 
         if (totalSpan > 24) {
           groups.push([index]);
@@ -84,10 +84,7 @@ export default createComponent({
       return spaces;
     });
 
-    provide(ROW_KEY, {
-      spaces,
-      children,
-    });
+    linkChildren({ spaces });
 
     return () => {
       const { tag, type, align, justify } = props;