How to use @uform/core - 10 common examples

test('basic ', () => {
    let globalForm
    let globalGraph
    const formInstance = createForm({
      lifecycles: [
        new FormLifeCycle(LifeCycleTypes.ON_FORM_GRAPH_CHANGE, graph => {
          globalGraph = graph
        })
      ]
    })
    const formWrapper = ({ children }) => {
      const form = useForm({
        form: formInstance
      })
      globalForm = form
      return (
        {children}
      )
    }

    const { result } = renderHook(() => useField({ name: 'username' }), {
      wrapper: formWrapper

test('basic ', ()=>{    
    let globalForm
    let globalGraph
    const formInstance = createForm({
      lifecycles: [
        new FormLifeCycle(LifeCycleTypes.ON_FORM_GRAPH_CHANGE, (graph) => {
          globalGraph = graph
        })
      ]
    })
    const formWrapper = ({ children }) => {
      const form = useForm({
        form: formInstance
      })
      globalForm = form
      return {children}
    }

    const { result } = renderHook(() => useVirtualField({ name: 'username' }), { wrapper: formWrapper })
    expect(result.current.form).toEqual(globalForm)
    expect(result.current.state.props).toEqual({})
    expect(result.current.state).toEqual({

test('FormState change', ()=>{
    const broadCastWrapper = ({ children }) => {
      return {children}
    }

    const form = createForm({})
    expect(form.getFormState(state => state.mounted)).toEqual(false)
    expect(form.getFormState(state => state.initialized)).toEqual(true)
    expect(form.getFormState(state => state.editable)).toEqual(undefined)
    const { result } = renderHook(() => useForm({ form }), { wrapper: broadCastWrapper })
    expect(result.current.getFormState(state => state.mounted)).toEqual(true)
    expect(result.current.getFormState(state => state.initialized)).toEqual(true)
    expect(result.current.getFormState(state => state.editable)).toEqual(undefined)
  })

test('return createForm instance', ()=>{
    const broadCastWrapper = ({ children }) => {
      return {children}
    }

    const opts = {}
    const form = createForm(opts)
    const { result } = renderHook(() => useForm({ form }), { wrapper: broadCastWrapper })
    expect(result.current).toEqual(form)
  })

const formWrapper = ({ children }) => {
      const formInstance = createForm({
        lifecycles: [
          new FormLifeCycle(LifeCycleTypes.ON_FIELD_CHANGE, field => {})
        ]
      })
      const form = useForm({
        form: formInstance
      })
      return (
        {children}
      )
    }

const formWrapper = ({ children }) => {
      const formInstance = createForm({
        lifecycles: [
          new FormLifeCycle(LifeCycleTypes.ON_FIELD_CHANGE, (field) => {
            
          })
        ]
      })
      const form = useForm({
        form: formInstance
      })
      return {children}
    }

})
          if (type === LifeCycleTypes.ON_FORM_INPUT_CHANGE) {
            if (props.onChange) {
              props.onChange(
                isStateModel(payload)
                  ? payload.getState((state: IFormState) => state.values)
                  : {}
              )
            }
          }
          if (broadcast) {
            broadcast.notify({ type, payload })
          }
        }
      ),
      new FormLifeCycle(
        LifeCycleTypes.ON_FORM_WILL_INIT,
        (payload: IModel, form: IForm) => {
          const actions = {
            ...form,
            dispatch: form.notify
          }
          if (broadcast) {
            broadcast.setContext(actions)
          }
          implementActions(actions)
        }
      )
    ],
    onReset: props.onReset,
    onSubmit: props.onSubmit,
    onValidateFailed: props.onValidateFailed

const transformStatus = (type: string, ref: any) => {
  switch (type) {
    case LifeCycleTypes.ON_FORM_INIT:
      return 'initialize'
    case LifeCycleTypes.ON_FORM_SUBMIT_START:
      ref.current.submitting = true
      return 'submitting'
    case LifeCycleTypes.ON_FORM_SUBMIT_END:
      ref.current.submitting = false
      return 'submitted'
    default:
      return ref.current.submitting ? 'submitting' : type
  }
}

if (!env.effectStart || env.effectEnd) {
    throw new Error(
      'EffectHook must be called synchronously within the effects callback function.'
    )
  }
  if (!env.effectSelector) {
    throw new Error('Can not found effect hook selector.')
  }
  return env.effectSelector(type, ...args)
}

export const FormEffectHooks = {
  onFormWillInit$: createEffectHook(
    LifeCycleTypes.ON_FORM_WILL_INIT
  ),
  onFormInit$: createEffectHook(LifeCycleTypes.ON_FORM_INIT),
  onFormChange$: createEffectHook(LifeCycleTypes.ON_FORM_CHANGE),
  onFormInputChange$: createEffectHook(
    LifeCycleTypes.ON_FORM_INPUT_CHANGE
  ),
  onFormInitialValueChange$: createEffectHook(
    LifeCycleTypes.ON_FORM_INITIAL_VALUES_CHANGE
  ),
  onFormReset$: createEffectHook(LifeCycleTypes.ON_FORM_RESET),

  onFormSubmitValidateStart$: createEffectHook(
    LifeCycleTypes.ON_FORM_SUBMIT_VALIDATE_START
  ),
  onFormSubmitValidateSuccess$: createEffectHook(
    LifeCycleTypes.ON_FORM_SUBMIT_VALIDATE_SUCCESS
  ),
  onFormSubmitValidateFailed$: createEffectHook(

export const FormSpy: React.FunctionComponent = props => {
  const broadcast = useContext(BroadcastContext)
  const form = useContext(FormContext)
  const initializedRef = useRef(false)
  const [type, setType] = useState(LifeCycleTypes.ON_FORM_INIT)
  const [state, dispatch] = useReducer(
    (state, action) => props.reducer(state, action, form),
    {}
  )
  const subscriber = useCallback(({ type, payload }) => {
    if (initializedRef.current) return
    if (isStr(props.selector) && FormPath.parse(props.selector).match(type)) {
      setType(type)
      dispatch({
        type,
        payload
      })
    } else if (isArr(props.selector) && props.selector.indexOf(type) > -1) {
      setType(type)
      dispatch({
        type,