refactor(transfer): remove provide(reactive)

src/transfer/src/Transfer.tsx

@@ -4,7 +4,6 @@ import {
   h,
   provide,
   PropType,
-  reactive,
   toRef,
   CSSProperties
 } from 'vue'
@@ -216,23 +215,20 @@ export default defineComponent({
       )
       tgtCheckedValuesRef.value = []
     }
-    provide(
-      transferInjectionKey,
-      reactive({
-        cPrefix: mergedClsPrefix,
-        mergedSize: formItem.mergedSize,
-        disabled: toRef(props, 'disabled'),
-        mergedTheme: themeRef,
-        srcCheckedValues: srcCheckedValuesRef,
-        tgtCheckedValues: tgtCheckedValuesRef,
-        srcOpts: srcOptsRef,
-        tgtOpts: tgtOptsRef,
-        srcCheckedStatus: srcCheckedStatusRef,
-        tgtCheckedStatus: tgtCheckedStatusRef,
-        handleSrcCheckboxClick,
-        handleTgtCheckboxClick
-      })
-    )
+    provide(transferInjectionKey, {
+      cPrefixRef: mergedClsPrefix,
+      mergedSizeRef: formItem.mergedSize,
+      disabledRef: toRef(props, 'disabled'),
+      mergedThemeRef: themeRef,
+      srcCheckedValuesRef,
+      tgtCheckedValuesRef,
+      srcOptsRef,
+      tgtOptsRef,
+      srcCheckedStatusRef,
+      tgtCheckedStatusRef,
+      handleSrcCheckboxClick,
+      handleTgtCheckboxClick
+    })
     return {
       ...formItem,
       ...useLocale('Transfer'),

src/transfer/src/TransferFilter.tsx

@@ -25,14 +25,14 @@ export default defineComponent({
   },
   setup () {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NTransfer = inject(transferInjectionKey)!
+    const { mergedThemeRef, cPrefixRef } = inject(transferInjectionKey)!
     return {
-      NTransfer
+      cPrefix: cPrefixRef,
+      mergedTheme: mergedThemeRef
     }
   },
   render () {
-    const { NTransfer } = this
-    const { mergedTheme, cPrefix } = NTransfer
+    const { mergedTheme, cPrefix } = this
     return (
       <div class={`${cPrefix}-transfer-filter`}>
         <NInput

src/transfer/src/TransferHeader.tsx

@@ -16,20 +16,31 @@ export default defineComponent({
     title: String
   },
   setup (props) {
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NTransfer = inject(transferInjectionKey)!
+    const {
+      srcOptsRef,
+      tgtOptsRef,
+      srcCheckedStatusRef,
+      tgtCheckedStatusRef,
+      srcCheckedValuesRef,
+      tgtCheckedValuesRef,
+      mergedThemeRef,
+      disabledRef,
+      cPrefixRef
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(transferInjectionKey)!
     const checkboxPropsRef = computed(() => {
       const { source } = props
       if (source) {
-        return NTransfer.srcCheckedStatus
+        return srcCheckedStatusRef.value
       } else {
-        return NTransfer.tgtCheckedStatus
+        return tgtCheckedStatusRef.value
       }
     })
     return () => {
       const { source } = props
       const { value: checkboxProps } = checkboxPropsRef
-      const { mergedTheme, cPrefix } = NTransfer
+      const { value: mergedTheme } = mergedThemeRef
+      const { value: cPrefix } = cPrefixRef
       return (
         <div class={`${cPrefix}-transfer-list-header`}>
           <div class={`${cPrefix}-transfer-list-header__checkbox`}>
@@ -38,7 +49,7 @@ export default defineComponent({
               themeOverrides={mergedTheme.peerOverrides.Checkbox}
               checked={checkboxProps.checked}
               indeterminate={checkboxProps.indeterminate}
-              disabled={checkboxProps.disabled || NTransfer.disabled}
+              disabled={checkboxProps.disabled || disabledRef.value}
               onUpdateChecked={props.onChange}
             />
           </div>
@@ -47,9 +58,9 @@ export default defineComponent({
           </div>
           <div class={`${cPrefix}-transfer-list-header__extra`}>
             {source
-              ? NTransfer.srcCheckedValues.length
-              : NTransfer.tgtCheckedValues.length}
-            /{source ? NTransfer.srcOpts.length : NTransfer.tgtOpts.length}
+              ? srcCheckedValuesRef.value.length
+              : tgtCheckedValuesRef.value.length}
+            /{source ? srcOptsRef.value.length : tgtOptsRef.value.length}
           </div>
         </div>
       )

src/transfer/src/TransferList.tsx

@@ -47,7 +47,7 @@ export default defineComponent({
   },
   setup () {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NTransfer = inject(transferInjectionKey)!
+    const { mergedThemeRef, cPrefixRef } = inject(transferInjectionKey)!
     const scrollerInstRef = ref<ScrollbarInst | null>(null)
     const vlInstRef = ref<VirtualListRef | null>(null)
     function syncVLScroller (): void {
@@ -66,7 +66,8 @@ export default defineComponent({
       return itemsRef
     }
     return {
-      NTransfer,
+      mergedTheme: mergedThemeRef,
+      cPrefix: cPrefixRef,
       scrollerInstRef,
       vlInstRef,
       syncVLScroller,
@@ -75,8 +76,7 @@ export default defineComponent({
     }
   },
   render () {
-    const { NTransfer, syncVLScroller } = this
-    const { mergedTheme, cPrefix } = NTransfer
+    const { mergedTheme, cPrefix, syncVLScroller } = this
     return this.options.length ? (
       this.virtualScroll ? (
         <NScrollbar
@@ -118,8 +118,8 @@ export default defineComponent({
         </NScrollbar>
       ) : (
         <NScrollbar
-          theme={NTransfer.mergedTheme.peers.Scrollbar}
-          themeOverrides={NTransfer.mergedTheme.peerOverrides.Scrollbar}
+          theme={mergedTheme.peers.Scrollbar}
+          themeOverrides={mergedTheme.peerOverrides.Scrollbar}
         >
           {{
             default: () => (
@@ -158,8 +158,8 @@ export default defineComponent({
         {{
           default: () => (
             <NEmpty
-              theme={NTransfer.mergedTheme.peers.Empty}
-              themeOverrides={NTransfer.mergedTheme.peerOverrides.Empty}
+              theme={mergedTheme.peers.Empty}
+              themeOverrides={mergedTheme.peerOverrides.Empty}
             />
           )
         }}

src/transfer/src/TransferListItem.tsx

@@ -25,31 +25,38 @@ export default defineComponent({
   },
   setup (props) {
     const { source } = props
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    const NTransfer = inject(transferInjectionKey)!
+    const {
+      cPrefixRef,
+      mergedThemeRef,
+      srcCheckedValuesRef,
+      tgtCheckedValuesRef,
+      handleSrcCheckboxClick,
+      handleTgtCheckboxClick
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    } = inject(transferInjectionKey)!
     const checkedRef = source
-      ? useMemo(() => NTransfer.srcCheckedValues.includes(props.value))
-      : useMemo(() => NTransfer.tgtCheckedValues.includes(props.value))
+      ? useMemo(() => srcCheckedValuesRef.value.includes(props.value))
+      : useMemo(() => tgtCheckedValuesRef.value.includes(props.value))
     const handleClick = source
       ? () => {
         if (!props.disabled) {
-          NTransfer.handleSrcCheckboxClick(!checkedRef.value, props.value)
+          handleSrcCheckboxClick(!checkedRef.value, props.value)
         }
       }
       : () => {
         if (!props.disabled) {
-          NTransfer.handleTgtCheckboxClick(!checkedRef.value, props.value)
+          handleTgtCheckboxClick(!checkedRef.value, props.value)
         }
       }
     return {
-      NTransfer,
+      cPrefix: cPrefixRef,
+      mergedTheme: mergedThemeRef,
       checked: checkedRef,
       handleClick
     }
   },
   render () {
-    const { disabled, NTransfer, label, checked, source } = this
-    const { mergedTheme, cPrefix } = NTransfer
+    const { disabled, mergedTheme, cPrefix, label, checked, source } = this
     return (
       <div
         class={[

src/transfer/src/interface.ts

@@ -1,4 +1,4 @@
-import { InjectionKey } from 'vue'
+import { InjectionKey, Ref } from 'vue'
 import type { MergedTheme } from '../../_mixins'
 import type { TransferTheme } from '../styles'
 
@@ -22,16 +22,16 @@ export type Filter = (
 ) => boolean
 
 export interface TransferInjection {
-  cPrefix: string
-  mergedSize: 'small' | 'medium' | 'large'
-  disabled: boolean
-  mergedTheme: MergedTheme<TransferTheme>
-  srcCheckedValues: OptionValue[]
-  tgtCheckedValues: OptionValue[]
-  srcOpts: Option[]
-  tgtOpts: Option[]
-  srcCheckedStatus: CheckedStatus
-  tgtCheckedStatus: CheckedStatus
+  cPrefixRef: Ref<string>
+  mergedSizeRef: Ref<'small' | 'medium' | 'large'>
+  disabledRef: Ref<boolean>
+  mergedThemeRef: Ref<MergedTheme<TransferTheme>>
+  srcCheckedValuesRef: Ref<OptionValue[]>
+  tgtCheckedValuesRef: Ref<OptionValue[]>
+  srcOptsRef: Ref<Option[]>
+  tgtOptsRef: Ref<Option[]>
+  srcCheckedStatusRef: Ref<CheckedStatus>
+  tgtCheckedStatusRef: Ref<CheckedStatus>
   handleSrcCheckboxClick: (checked: boolean, value: OptionValue) => void
   handleTgtCheckboxClick: (checked: boolean, value: OptionValue) => void
 }