diff --git a/package.json b/package.json index a3c57f84c2..ab1f54223a 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,7 @@ "classnames": "^2.3.2", "dayjs": "^1.11.7", "lodash": "^4.17.21", - "rc-field-form": "~1.27.4", + "rc-field-form": "~1.41.0", "rc-util": "^5.30.0", "react-is": "^18.2.0", "runes2": "^1.1.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ac7848f4ed..d86d44f204 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -40,8 +40,8 @@ dependencies: specifier: ^4.17.21 version: 4.17.21 rc-field-form: - specifier: ~1.27.4 - version: 1.27.4(react-dom@18.2.0)(react@18.2.0) + specifier: ~1.41.0 + version: 1.41.0(react-dom@18.2.0)(react@18.2.0) rc-util: specifier: ^5.30.0 version: 5.37.0(react-dom@18.2.0)(react@18.2.0) @@ -14536,8 +14536,8 @@ packages: react-dom: 18.2.0(react@18.2.0) dev: true - /rc-field-form@1.27.4(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-PQColQnZimGKArnOh8V2907+VzDCXcqtFvHgevDLtqWc/P7YASb/FqntSmdS8q3VND5SHX3Y1vgMIzY22/f/0Q==} + /rc-field-form@1.34.2(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-BdciU5C7dBO51/9ZKcMvK2f8zaaO12Lt1eBhlAo8nNv+6htlNcgY9DAkUlZ7gfyWjnCc1Oo4hHIXau1m6tLw1A==} engines: {node: '>=8.x'} peerDependencies: react: '>=16.9.0' @@ -14548,10 +14548,10 @@ packages: rc-util: 5.37.0(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - dev: false + dev: true - /rc-field-form@1.34.2(react-dom@18.2.0)(react@18.2.0): - resolution: {integrity: sha512-BdciU5C7dBO51/9ZKcMvK2f8zaaO12Lt1eBhlAo8nNv+6htlNcgY9DAkUlZ7gfyWjnCc1Oo4hHIXau1m6tLw1A==} + /rc-field-form@1.41.0(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-k9AS0wmxfJfusWDP/YXWTpteDNaQ4isJx9UKxx4/e8Dub4spFeZ54/EuN2sYrMRID/+hUznPgVZeg+Gf7XSYCw==} engines: {node: '>=8.x'} peerDependencies: react: '>=16.9.0' @@ -14562,7 +14562,7 @@ packages: rc-util: 5.37.0(react-dom@18.2.0)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - dev: true + dev: false /rc-image@5.13.0(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-iZTOmw5eWo2+gcrJMMcnd7SsxVHl3w5xlyCgsULUdJhJbnuI8i/AL0tVOsE7aLn9VfOh1qgDT3mC2G75/c7mqg==} diff --git a/src/components/form/form-subscribe.tsx b/src/components/form/form-subscribe.tsx index deab7f1172..4865abc661 100644 --- a/src/components/form/form-subscribe.tsx +++ b/src/components/form/form-subscribe.tsx @@ -1,10 +1,9 @@ -import React, { memo, useContext } from 'react' +import React, { useContext } from 'react' import type { FC, ReactNode } from 'react' import { FieldContext, useWatch } from 'rc-field-form' -import { useUpdate } from 'ahooks' import type { FormInstance } from 'rc-field-form' import type { NamePath } from 'rc-field-form/es/interface' -import { useIsomorphicUpdateLayoutEffect } from '../../utils/use-isomorphic-update-layout-effect' +import { cloneByNamePathList } from './utils' type RenderChildren = ( changedValues: Record, @@ -18,9 +17,9 @@ export interface FormSubscribeProps { } export const FormSubscribe: FC = props => { - const update = useUpdate() const form = useContext(FieldContext) + useWatch(values => cloneByNamePathList(values, props.to), form) const value = form.getFieldsValue(props.to) // Memo to avoid useless render @@ -29,29 +28,5 @@ export const FormSubscribe: FC = props => { [JSON.stringify(value), props.children] ) - return ( - <> - {childNode} - {props.to.map(namePath => ( - - ))} - - ) + return childNode as React.ReactElement } - -export const Watcher = memo<{ - form: FormInstance - namePath: NamePath - onChange: () => void -}>(props => { - const value = useWatch(props.namePath, props.form) - useIsomorphicUpdateLayoutEffect(() => { - props.onChange() - }, [value]) - return null -}) diff --git a/src/components/form/utils.ts b/src/components/form/utils.ts index bcfa86d1b7..9580f42513 100644 --- a/src/components/form/utils.ts +++ b/src/components/form/utils.ts @@ -1,4 +1,8 @@ import { isMemo, isFragment } from 'react-is' +import { NamePath, Store } from 'rc-field-form/es/interface' +import getValue from 'rc-util/lib/utils/get' +import setValue from 'rc-util/lib/utils/set' + export function toArray(candidate?: T | T[] | false): T[] { if (candidate === undefined || candidate === false) return [] @@ -25,3 +29,16 @@ export function isSafeSetRefComponent(component: any): boolean { return !isSimpleFunctionComponent(component.type) } + +export const cloneByNamePathList = ( + store: Store, + namePathList: NamePath[] +): Store => { + return namePathList.reduce((accumulator, currentValue) => { + return setValue( + accumulator, + toArray(currentValue), + getValue(store, toArray(currentValue)) + ) + }, {}) +}