React-form-wrapper

Document

Document

Base Usage

npm install @zzwing/react-form-wrapper

import FormWrapperHoc from '@zzwing/react-form-wrapper'
FormWrapperHoc(WrappedComponent, defaultState)

WrappedComponent can get formWrapper from this.props

FormWrapper props

| name | type | desc | | --------------- | -------------------------------------------------------------- | ---------------------------- | | itemWrapper | (element: JSX.Element, opt: FormItemWrapperOpt) => JSX.Element | wrap component | | getState | () => state | getState from wrapper | | setWrapperState | (state, callback) => void | setState like React.setState |

FormItemWrapperOpt

| name | type | desc | default | | ----------------- | --------------- | ------------------------------------------------- | -------------------------------- | | valuePropName | string | name for wrapped's value prop, eg: checked | value | | getValueFromEvent | (e: any) => any | change event to value | (e) => e.target[valuePropName] | | defaultValue | any | set defaultValue once when value is undefined | undefined | | eventTrigger | string | custom event trigger, eg: onCheck, onChange | onChange |

import * as React from 'react'
import FormWrapperHoc, { FormWrapperHocProp } from '@zzwing/react-form-wrapper'

class Form extends React.PureComponent<FormWrapperHocProp> {
  render() {
    const { itemWrapper, getState } = this.props.formWrapper
    // use itemWrapper to wrap sub-comp
    const Input = itemWrapper('valueKey')(<input />)
    const value = getState().valueKey
    return (
      <>
        {Input}
        you can get value for {key}
      </>
    )
  }
}

Types

type PlainObject = {
  [key: string]: any;
}

interface FormItemWrapperOpt {
  valuePropName?: string
  getValueFromEvent?: (e: any) => any
  defaultValue?: any
  eventTrigger?: string
}

 interface FormItemWrapper {
  (key: string, props?: FormItemWrapperOpt): (
    element: JSX.Element
  ) => JSX.Element
}

interface FormWrapperHocRef<T = any> {
  setWrapperState: (state: T) => void
  getState: () => T
}

type PropWithRef<P> = P & {
  getRef?: (arg: FormWrapperHocRef) => void;
}

function FormWrapperHoc<
    P = any,
    T extends PlainObject = PlainObject
  >(
    Wrapped: React.ComponentType<any>,
    initialState?: T
  ): React.ComponentClass<PropWithRef<P>>
}