refactor: 优化组件间 provide & inject (#2681)

jd-opensource · Nov 28, 2023 · d217b2a · d217b2a
1 parent 3250f86
commit d217b2a
Show file tree

Hide file tree

Showing 61 changed files with 364 additions and 439 deletions.
diff --git a/src/packages/__VUE/avatar/index.taro.vue b/src/packages/__VUE/avatar/index.taro.vue
@@ -6,7 +6,7 @@
 <script lang="ts">
 import { toRefs, computed, inject, ref, PropType, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import type { AvatarShape, AvatarSize } from './types';
+import { AVATAR_KEY, type AvatarShape, type AvatarSize } from './types';
 const { create } = createComponent('avatar');
 export default create({
   props: {
@@ -30,7 +30,7 @@ export default create({
   setup(props) {
     const { size, shape, bgColor, color } = toRefs(props);
     const sizeValue = ['large', 'normal', 'small'];
-    const avatarGroup: any = inject('avatarGroup', null);
+    const avatarGroup: any = inject(AVATAR_KEY, null);
     const avatarRef = ref(null);
 
     const classes = computed(() => {

diff --git a/src/packages/__VUE/avatar/index.vue b/src/packages/__VUE/avatar/index.vue
@@ -6,7 +6,7 @@
 <script lang="ts">
 import { toRefs, computed, inject, ref, PropType, CSSProperties } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import type { AvatarShape, AvatarSize } from './types';
+import { AVATAR_KEY, type AvatarShape, type AvatarSize } from './types';
 const { create } = createComponent('avatar');
 export default create({
   props: {
@@ -30,7 +30,7 @@ export default create({
   setup(props) {
     const { size, shape, bgColor, color } = toRefs(props);
     const sizeValue = ['large', 'normal', 'small'];
-    const avatarGroup: any = inject('avatarGroup', null);
+    const avatarGroup: any = inject(AVATAR_KEY, null);
     const avatarRef = ref(null);
 
     const classes = computed(() => {

diff --git a/src/packages/__VUE/avatar/types.ts b/src/packages/__VUE/avatar/types.ts
@@ -1,3 +1,5 @@
+export const AVATAR_KEY = Symbol('nut-avatar');
+
 export type AvatarSize = 'large' | 'normal' | 'small';
 export type AvatarShape = 'round' | 'square';
 export type AvatarZIndex = 'left' | 'right';
diff --git a/src/packages/__VUE/avatargroup/index.taro.vue b/src/packages/__VUE/avatargroup/index.taro.vue
@@ -18,7 +18,7 @@
 import { onMounted, provide, ref, onUnmounted, nextTick, unref, PropType, computed } from 'vue';
 import Taro from '@tarojs/taro';
 import { createComponent } from '@/packages/utils/create';
-import type { AvatarShape, AvatarSize, AvatarZIndex } from '../avatar/types';
+import { AVATAR_KEY, type AvatarShape, type AvatarSize, type AvatarZIndex } from '../avatar/types';
 import NutAvatar from '../avatar/index.taro.vue';
 const { create } = createComponent('avatar-group');
 export default create({
@@ -142,7 +142,7 @@ export default create({
       observer.value?.disconnect();
     });
 
-    provide('avatarGroup', {
+    provide(AVATAR_KEY, {
       props,
       avatarGroupRef
     });

diff --git a/src/packages/__VUE/avatargroup/index.vue b/src/packages/__VUE/avatargroup/index.vue
@@ -17,7 +17,7 @@
 <script lang="ts">
 import { onMounted, provide, ref, onUnmounted, nextTick, unref, PropType, computed } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-import type { AvatarShape, AvatarSize, AvatarZIndex } from '../avatar/types';
+import { AVATAR_KEY, type AvatarShape, type AvatarSize, type AvatarZIndex } from '../avatar/types';
 import NutAvatar from '../avatar/index.vue';
 const { create } = createComponent('avatar-group');
 export default create({
@@ -135,7 +135,7 @@ export default create({
       observer.value?.disconnect();
     });
 
-    provide('avatarGroup', {
+    provide(AVATAR_KEY, {
       props,
       avatarGroupRef
     });

diff --git a/src/packages/__VUE/checkbox/common.ts b/src/packages/__VUE/checkbox/common.ts
@@ -1,5 +1,6 @@
 import { h, computed, inject, getCurrentInstance, onMounted, reactive, watch, Component, onBeforeUnmount } from 'vue';
 import { pxCheck } from '@/packages/utils/pxCheck';
+import { CHECKBOX_KEY } from './types';
 
 export const component = (componentName: string, components: Record<string, Component>): any => {
   return {
@@ -36,7 +37,7 @@ export const component = (componentName: string, components: Record<string, Comp
     },
     emits: ['change', 'update:modelValue'],
     setup(props: any, { emit, slots }: any) {
-      const parent: any = inject('parent', null);
+      const parent: any = inject(CHECKBOX_KEY, null);
       const state = reactive({
         partialSelect: props.indeterminate
       });

diff --git a/src/packages/__VUE/checkbox/types.ts b/src/packages/__VUE/checkbox/types.ts
@@ -0,0 +1 @@
+export const CHECKBOX_KEY = Symbol('nut-checkbox');
diff --git a/src/packages/__VUE/checkboxgroup/index.taro.vue b/src/packages/__VUE/checkboxgroup/index.taro.vue
@@ -2,6 +2,7 @@
 import { h, watch, provide, computed, ComponentInternalInstance, reactive, ComponentPublicInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { CHECKBOX_KEY } from '../checkbox/types';
 const { create, componentName } = createComponent('checkbox-group');
 
 export default create({
@@ -63,7 +64,7 @@ export default create({
       emit('update:modelValue', value);
     };
 
-    provide('parent', {
+    provide(CHECKBOX_KEY, {
       value: computed(() => props.modelValue),
       disabled: computed(() => props.disabled),
       max: computed(() => props.max),

diff --git a/src/packages/__VUE/checkboxgroup/index.vue b/src/packages/__VUE/checkboxgroup/index.vue
@@ -2,6 +2,7 @@
 import { h, watch, provide, computed, ComponentInternalInstance, reactive, ComponentPublicInstance } from 'vue';
 import { createComponent } from '@/packages/utils/create';
 import { useExpose } from '@/packages/utils/useExpose/index';
+import { CHECKBOX_KEY } from '../checkbox/types';
 const { create, componentName } = createComponent('checkbox-group');
 
 export default create({
@@ -63,7 +64,7 @@ export default create({
       emit('update:modelValue', value);
     };
 
-    provide('parent', {
+    provide(CHECKBOX_KEY, {
       value: computed(() => props.modelValue),
       disabled: computed(() => props.disabled),
       max: computed(() => props.max),

diff --git a/src/packages/__VUE/col/index.taro.vue b/src/packages/__VUE/col/index.taro.vue
@@ -6,7 +6,8 @@
 <script lang="ts">
 import { computed, inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('col');
+import { LAYOUT_KEY } from '../layout/types';
+const { create } = createComponent('col');
 
 export default create({
   props: {
@@ -21,8 +22,8 @@ export default create({
   },
   emits: [],
   setup(props) {
-    const prefixCls = componentName;
-    const gutter = inject('gutter') as number;
+    const prefixCls = 'nut-col';
+    const gutter = inject(LAYOUT_KEY) as number;
     const classes = computed(() => {
       return {
         [prefixCls]: true,

diff --git a/src/packages/__VUE/col/index.vue b/src/packages/__VUE/col/index.vue
@@ -6,7 +6,8 @@
 <script lang="ts">
 import { computed, inject } from 'vue';
 import { createComponent } from '@/packages/utils/create';
-const { componentName, create } = createComponent('col');
+import { LAYOUT_KEY } from '../layout/types';
+const { create } = createComponent('col');
 
 export default create({
   props: {
@@ -21,8 +22,8 @@ export default create({
   },
   emits: [],
   setup(props) {
-    const prefixCls = componentName;
-    const gutter = inject('gutter') as number;
+    const prefixCls = 'nut-col';
+    const gutter = inject(LAYOUT_KEY) as number;
     const classes = computed(() => {
       return {
         [prefixCls]: true,

diff --git a/src/packages/__VUE/collapse/index.taro.vue b/src/packages/__VUE/collapse/index.taro.vue
@@ -1,11 +1,12 @@
 <template>
-  <view ref="collapseDom" class="nut-collapse">
+  <view ref="nutCollapseRef" class="nut-collapse">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
 import { provide, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { COLLAPSE_KEY } from './types';
 const { create } = createComponent('collapse');
 export default create({
   props: {
@@ -20,7 +21,7 @@ export default create({
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
-    const collapseDom: any = ref(null);
+    const nutCollapseRef = ref(null);
     const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
 
     watch(
@@ -67,12 +68,12 @@ export default create({
       return false;
     };
 
-    provide('collapseParent', {
+    provide(COLLAPSE_KEY, {
       updateVal,
       isExpanded
     });
 
-    return { collapseDom };
+    return { nutCollapseRef };
   }
 });
 </script>
diff --git a/src/packages/__VUE/collapse/index.vue b/src/packages/__VUE/collapse/index.vue
@@ -1,11 +1,12 @@
 <template>
-  <view ref="collapseDom" class="nut-collapse">
+  <view ref="nutCollapseRef" class="nut-collapse">
     <slot></slot>
   </view>
 </template>
 <script lang="ts">
 import { provide, ref, watch } from 'vue';
 import { createComponent } from '@/packages/utils/create';
+import { COLLAPSE_KEY } from './types';
 const { create } = createComponent('collapse');
 export default create({
   props: {
@@ -20,7 +21,7 @@ export default create({
   },
   emits: ['update:modelValue', 'change'],
   setup(props, { emit }) {
-    const collapseDom: any = ref(null);
+    const nutCollapseRef = ref(null);
     const innerValue = ref(props.modelValue || (props.accordion ? '' : []));
 
     watch(
@@ -67,12 +68,12 @@ export default create({
       return false;
     };
 
-    provide('collapseParent', {
+    provide(COLLAPSE_KEY, {
       updateVal,
       isExpanded
     });
 
-    return { collapseDom };
+    return { nutCollapseRef };
   }
 });
 </script>
diff --git a/src/packages/__VUE/collapse/types.ts b/src/packages/__VUE/collapse/types.ts
@@ -0,0 +1,6 @@
+import type { InjectionKey } from 'vue';
+
+export const COLLAPSE_KEY = Symbol('nut-collapse') as InjectionKey<{
+  updateVal: Function;
+  isExpanded: Function;
+}>;
diff --git a/src/packages/__VUE/collapseitem/index.taro.vue b/src/packages/__VUE/collapseitem/index.taro.vue
@@ -46,11 +46,12 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, inject, ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, inject } from 'vue';
 import { DownArrow } from '@nutui/icons-vue-taro';
 import { createComponent, renderIcon } from '@/packages/utils/create';
 import Taro from '@tarojs/taro';
-const { create, componentName } = createComponent('collapse-item');
+import { COLLAPSE_KEY } from '../collapse/types';
+const { create } = createComponent('collapse-item');
 
 export default create({
   props: {
@@ -98,10 +99,9 @@ export default create({
     const currentHeight = ref<string>('auto');
     const inAnimation = ref(false);
     const timeoutId = ref<any>('');
-    const collapse: any = inject('collapseParent');
-    const parent: any = reactive(collapse);
+    const parent = inject(COLLAPSE_KEY);
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-collapse-item';
       return {
         [prefixCls]: true,
         [prefixCls + '__border']: props.border
@@ -153,7 +153,7 @@ export default create({
 
     const handleClick = () => {
       if (!inAnimation.value) {
-        parent.updateVal(props.name);
+        parent && parent.updateVal(props.name);
       }
     };
 

diff --git a/src/packages/__VUE/collapseitem/index.vue b/src/packages/__VUE/collapseitem/index.vue
@@ -44,10 +44,11 @@
   </view>
 </template>
 <script lang="ts">
-import { reactive, inject, ref, computed, watch } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { DownArrow } from '@nutui/icons-vue';
 import { createComponent, renderIcon } from '@/packages/utils/create';
-const { create, componentName } = createComponent('collapse-item');
+import { COLLAPSE_KEY } from '../collapse/types';
+const { create } = createComponent('collapse-item');
 
 export default create({
   props: {
@@ -93,10 +94,10 @@ export default create({
     const wrapperRef: any = ref(null);
     const contentRef: any = ref(null);
 
-    const collapse: any = inject('collapseParent');
-    const parent: any = reactive(collapse);
+    const parent = inject(COLLAPSE_KEY);
+
     const classes = computed(() => {
-      const prefixCls = componentName;
+      const prefixCls = 'nut-collapse-item';
       return {
         [prefixCls]: true,
         [prefixCls + '__border']: props.border
@@ -113,7 +114,7 @@ export default create({
     const wrapperHeight = ref(expanded.value ? 'auto' : '0px');
 
     const toggle = () => {
-      parent.updateVal(props.name);
+      parent && parent.updateVal(props.name);
     };
 
     const onTransitionEnd = () => {

diff --git a/src/packages/__VUE/form/common.ts b/src/packages/__VUE/form/common.ts
@@ -1,7 +1,8 @@
 import { getPropByPath, isPromise } from '@/packages/utils/util';
 import { computed, PropType, provide, reactive, watch } from 'vue';
 import { FormItemRule } from '../formitem/types';
-import { ErrorMessage, FormRule, FormRules } from './types';
+import { ErrorMessage, FormRule, FormRules, FORM_KEY } from './types';
+import { useChildren } from '@/packages/utils';
 
 export const component = (components: any) => {
   return {
@@ -19,53 +20,7 @@ export const component = (components: any) => {
     emits: ['validate'],
 
     setup(props: any, { emit }: any) {
-      const useChildren = () => {
-        const publicChildren: any[] = reactive([]);
-        const internalChildren: any[] = reactive([]);
-
-        const linkChildren = (value?: any) => {
-          const link = (child: any) => {
-            if (child.proxy) {
-              internalChildren.push(child);
-              publicChildren.push(child.proxy as any);
-            }
-          };
-
-          const removeLink = (child: any) => {
-            if (child.proxy) {
-              let internalIndex = internalChildren.indexOf(child);
-              if (internalIndex > -1) {
-                internalChildren.splice(internalIndex, 1);
-              }
-
-              let publicIndex = publicChildren.indexOf(child.proxy);
-              if (internalIndex > -1) {
-                publicChildren.splice(publicIndex, 1);
-              }
-            }
-          };
-
-          provide(
-            'NutFormParent',
-            Object.assign(
-              {
-                removeLink,
-                link,
-                children: publicChildren,
-                internalChildren
-              },
-              value
-            )
-          );
-        };
-
-        return {
-          children: publicChildren,
-          linkChildren
-        };
-      };
-
-      const { children, linkChildren } = useChildren();
+      const { children, linkChildren } = useChildren(FORM_KEY);
       linkChildren({ props });
 
       const formErrorTip = computed(() => reactive<any>({}));
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export const CHECKBOX_KEY = Symbol('nut-checkbox');