feat(reactive): support skip toJS with markRaw

alibaba · Sep 16, 2021 · 5d24551 · 5d24551
1 parent b61ad90
commit 5d24551
Show file tree

Hide file tree

Showing 7 changed files with 15 additions and 14 deletions.
diff --git a/packages/antd/src/form-collapse/index.tsx b/packages/antd/src/form-collapse/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Collapse, Badge } from 'antd'
-import { model } from '@formily/reactive'
+import { model, markRaw } from '@formily/reactive'
 import { CollapseProps, CollapsePanelProps } from 'antd/lib/collapse'
 import {
   useField,
@@ -92,7 +92,7 @@ const createFormCollapse = (defaultActiveKeys?: ActiveKeys) => {
       }
     },
   })
-  return formCollapse
+  return markRaw(formCollapse)
 }
 
 export const FormCollapse: ComposedFormCollapse = observer(

diff --git a/packages/antd/src/form-step/index.tsx b/packages/antd/src/form-step/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { action, model } from '@formily/reactive'
+import { action, markRaw, model } from '@formily/reactive'
 import { Steps } from 'antd'
 import cls from 'classnames'
 import { StepsProps, StepProps } from 'antd/lib/steps'
@@ -123,7 +123,7 @@ const createFormStep = (defaultCurrent = 0): IFormStep => {
       return env.form?.submit?.(onSubmit)
     },
   })
-  return formStep
+  return markRaw(formStep)
 }
 
 export const FormStep: ComposedFormTab = connect(

diff --git a/packages/antd/src/form-tab/index.tsx b/packages/antd/src/form-tab/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Tabs, Badge } from 'antd'
-import { model } from '@formily/reactive'
+import { model, markRaw } from '@formily/reactive'
 import { TabPaneProps, TabsProps } from 'antd/lib/tabs'
 import {
   useField,
@@ -57,7 +57,7 @@ const createFormTab = (defaultActiveKey?: string) => {
       formTab.activeKey = key
     },
   })
-  return formTab
+  return markRaw(formTab)
 }
 
 export const FormTab: ComposedFormTab = observer(({ formTab, ...props }) => {

diff --git a/packages/next/src/form-collapse/index.tsx b/packages/next/src/form-collapse/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Collapse, Badge } from '@alifd/next'
-import { model } from '@formily/reactive'
+import { model, markRaw } from '@formily/reactive'
 import {
   CollapseProps,
   PanelProps as CollapsePanelProps,
@@ -99,7 +99,7 @@ const createFormCollapse = (defaultActiveKeys?: ActiveKeys) => {
       }
     },
   })
-  return formCollapse
+  return markRaw(formCollapse)
 }
 
 export const FormCollapse: ComposedFormCollapse = observer(

diff --git a/packages/next/src/form-step/index.tsx b/packages/next/src/form-step/index.tsx
@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react'
-import { model } from '@formily/reactive'
+import { model, markRaw, action } from '@formily/reactive'
 import cls from 'classnames'
 import {
   StepProps as StepsProps,
@@ -70,7 +70,7 @@ const createFormStep = (defaultCurrent = 0): IFormStep => {
     steps: [],
   }
 
-  const setDisplay = (target: number) => {
+  const setDisplay = action.bound((target: number) => {
     const currentStep = env.steps[target]
     env.steps.forEach(({ name }) => {
       env.form.query(`${env.field.address}.${name}`).take((field) => {
@@ -81,7 +81,7 @@ const createFormStep = (defaultCurrent = 0): IFormStep => {
         }
       })
     })
-  }
+  })
 
   const next = () => {
     if (formStep.allowNext) {
@@ -126,7 +126,7 @@ const createFormStep = (defaultCurrent = 0): IFormStep => {
       return env.form?.submit?.(onSubmit)
     },
   })
-  return formStep
+  return markRaw(formStep)
 }
 
 export const FormStep: ComposedFormTab = connect(

diff --git a/packages/next/src/form-tab/index.tsx b/packages/next/src/form-tab/index.tsx
@@ -1,6 +1,6 @@
 import React, { Fragment, useMemo } from 'react'
 import { Tab as Tabs, Badge } from '@alifd/next'
-import { model } from '@formily/reactive'
+import { model, markRaw } from '@formily/reactive'
 import { isValid } from '@formily/shared'
 import {
   ItemProps as TabPaneProps,
@@ -61,7 +61,7 @@ const createFormTab = (defaultActiveKey?: string) => {
       formTab.activeKey = key
     },
   })
-  return formTab
+  return markRaw(formTab)
 }
 
 export const FormTab: ComposedFormTab = observer(({ formTab, ...props }) => {

diff --git a/packages/reactive/src/externals.ts b/packages/reactive/src/externals.ts
@@ -87,6 +87,7 @@ export const toJS = <T>(values: T): T => {
     if (visited.has(values)) {
       return values
     }
+    if (values && values[RAW_TYPE]) return values
     if (isArr(values)) {
       if (isObservable(values)) {
         visited.add(values)