alibaba / formily

📱🚀 🧩 Cross Device & High Performance Normal Form/Dynamic(JSON Schema) Form/Form Builder -- Support React/React Native/Vue 2/Vue 3
https://formilyjs.org/
MIT License
11.12k stars 1.44k forks source link

[Feature Request] RecursionField 是不是可以将filterProperties、mapProperties也有选择性的递归传递下去呢,有助于做一些动态渲染 #3965

Closed nicetooo closed 9 months ago

nicetooo commented 10 months ago

What problem does this feature solve?

希望可以给RecursionField增加选择性递归传递filterProperties、mapProperties这两个props的能力, 目前是需要将一颗schema树上的一部分name的内容渲染取消,但是filterProperties只对第一层生效

What does the proposed API look like?

希望可以加一个propsRecursion prop,可以通过数组指定key或者其他方式指定需要递归传递的props,

nicetooo commented 10 months ago

或者propsRecursion为boolean,为true时递归传递回调函数

export const RecursionField: ReactFC<IRecursionFieldProps> = (props) => {
  const basePath = useBasePath(props)
  const fieldSchema = useMemo(() => new Schema(props.schema), [props.schema])
  const fieldProps = useFieldProps(fieldSchema)

  const renderProperties = (field?: GeneralField) => {
    if (props.onlyRenderSelf) return
    const properties = Schema.getOrderProperties(fieldSchema)
    if (!properties.length) return
    return (
      <Fragment>
        {properties.map(({ schema: item, key: name }, index) => {
          const base = field?.address || basePath
          let schema: Schema = item
          if (isFn(props.mapProperties)) {
            const mapped = props.mapProperties(item, name)
            if (mapped) {
              schema = mapped
            }
          }
          if (isFn(props.filterProperties)) {
            if (props.filterProperties(schema, name) === false) {
              return null
            }
          }
          let recursionProps: Partial<IRecursionFieldProps> = {};
          if(isBool(props.propsRecursion) && props.propsRecursion){
            recursionProps = {
              propsRecursion: true,
              filterProperties: props.filterProperties,
              mapProperties: props.mapProperties
            }
          }
          return (
            <RecursionField
             {...recursionProps}
              schema={schema}
              key={`${index}-${name}`}
              name={name}
              basePath={base}
            />
          )
        })}
      </Fragment>
    )
  }
// ...

或 

export const RecursionField: ReactFC<IRecursionFieldProps> = (props) => {
  const basePath = useBasePath(props)
  const fieldSchema = useMemo(() => new Schema(props.schema), [props.schema])
  const fieldProps = useFieldProps(fieldSchema)

  const renderProperties = (field?: GeneralField) => {
    if (props.onlyRenderSelf) return
    const properties = Schema.getOrderProperties(fieldSchema)
    if (!properties.length) return
    return (
      <Fragment>
        {properties.map(({ schema: item, key: name }, index) => {
          const base = field?.address || basePath
          let schema: Schema = item
          if (isFn(props.mapProperties)) {
            const mapped = props.mapProperties(item, name)
            if (mapped) {
              schema = mapped
            }
          }
          if (isFn(props.filterProperties)) {
            if (props.filterProperties(schema, name) === false) {
              return null
            }
          }
          if(isBool(props.propsRecursion) && props.propsRecursion){
           return (
             <RecursionField
              propsRecursion={true}
              filterProperties={props.filterProperties}
              mapProperties={props.mapProperties}
              schema={schema}
              key={`${index}-${name}`}
              name={name}
              basePath={base}
            />)
          }
          return (
            <RecursionField
              schema={schema}
              key={`${index}-${name}`}
              name={name}
              basePath={base}
            />
          )
        })}
      </Fragment>
    )
  }
// ...