How to use @uform/shared - 10 common examples

>('grid', props => {
  const {
    cols: rawCols,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    title,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    description,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    help,
    // eslint-disable-next-line @typescript-eslint/no-unused-vars
    extra,
    ...selfProps
  } = props
  const children = toArr(props.children)
  const cols = toArr(rawCols).map(col => normalizeCol(col))
  const childNum = children.length

  if (cols.length < childNum) {
    let offset: number = childNum - cols.length
    let lastSpan: number =
      24 -
      cols.reduce((buf, col) => {
        return (
          buf +
          Number(col.span ? col.span : 0) +
          Number(col.offset ? col.offset : 0)
        )
      }, 0)
    for (let i = 0; i < offset; i++) {
      cols.push({ span: Math.floor(lastSpan / offset) })
    }

state.modified = false
        state.ruleErrors = []
        state.ruleWarnings = []
        state.effectErrors = []
        state.effectWarnings = []
        // forceClear仅对设置initialValues的情况下有意义
        if (forceClear || !isValid(state.initialValue)) {
          if (isArr(state.value)) {
            state.value = []
          } else if (!isObj(state.value)) {
            state.value = undefined
          }
        } else {
          const value = clone(state.initialValue)
          if (isArr(state.value)) {
            if (isArr(value)) {
              state.value = value
            } else {
              state.value = []
            }
          } else if (isObj(state.value)) {
            if (isObj(value)) {
              state.value = value
            } else {
              state.value = {}
            }
          } else {
            state.value = value
          }
        }
      })
    })

field.setState((state: IFieldState) => {
        state.modified = false
        state.ruleErrors = []
        state.ruleWarnings = []
        state.effectErrors = []
        state.effectWarnings = []
        // forceClear仅对设置initialValues的情况下有意义
        if (forceClear || !isValid(state.initialValue)) {
          if (isArr(state.value)) {
            state.value = []
          } else if (!isObj(state.value)) {
            state.value = undefined
          }
        } else {
          const value = clone(state.initialValue)
          if (isArr(state.value)) {
            if (isArr(value)) {
              state.value = value
            } else {
              state.value = []
            }
          } else if (isObj(state.value)) {
            if (isObj(value)) {
              state.value = value
            } else {
              state.value = {}
            }

// forceClear仅对设置initialValues的情况下有意义
        if (forceClear || !isValid(state.initialValue)) {
          if (isArr(state.value)) {
            state.value = []
          } else if (!isObj(state.value)) {
            state.value = undefined
          }
        } else {
          const value = clone(state.initialValue)
          if (isArr(state.value)) {
            if (isArr(value)) {
              state.value = value
            } else {
              state.value = []
            }
          } else if (isObj(state.value)) {
            if (isObj(value)) {
              state.value = value
            } else {
              state.value = {}
            }
          } else {
            state.value = value
          }
        }
      })
    })

field.setState((state: IFieldState) => {
        state.modified = false
        state.ruleErrors = []
        state.ruleWarnings = []
        state.effectErrors = []
        state.effectWarnings = []
        // forceClear仅对设置initialValues的情况下有意义
        if (forceClear || !isValid(state.initialValue)) {
          if (isArr(state.value)) {
            state.value = []
          } else if (!isObj(state.value)) {
            state.value = undefined
          }
        } else {
          const value = clone(state.initialValue)
          if (isArr(state.value)) {
            if (isArr(value)) {
              state.value = value
            } else {
              state.value = []
            }
          } else if (isObj(state.value)) {
            if (isObj(value)) {
              state.value = value
            } else {
              state.value = {}
            }
          } else {
            state.value = value
          }
        }

registerFormField('container', props => {
  const { value, mutators, renderField } = props
  return (
    
      {toArr(value).map((item, index) => {
        return (
          <div data-testid="item">
            {renderField(index)}
            <button type="button"> {
                mutators.remove(index)
              }}
            &gt;
              Remove Field
            </button>
          </div>
        )
      })}

registerFormField('array', props => {
  const { value, mutators, renderField } = props
  return (
    
      {toArr(value).map((item, index) => {
        return (
          <div data-testid="item">
            {renderField(index)}
          </div>
        )
      })}
      <button type="button"> {
          mutators.push()
        }}
      &gt;
        Add Field
      </button>
    
  )

function matchStrategy(
    pattern: FormPathPattern,
    node: IField | IVirtualField
  ) {
    const matchPattern = FormPath.parse(pattern)
    return node.getSourceState(
      state => matchPattern.match(state.name) || matchPattern.match(state.path)
    )
  }

const vf1GrandChildren = form.registerVirtualField({ name: 'a.a.a' })
  const vf2 = form.registerVirtualField({ name: 'b' })
  const vf2Children = form.registerVirtualField({ name: 'b.b' })
  const graph = new FormGraph()
  graph.appendNode("", state) 
  graph.appendNode(vf1.state.path, vf1)
  graph.appendNode(vf2.state.path, vf2)
  graph.appendNode(vf1Children.state.path, vf1Children)
  graph.appendNode(vf1GrandChildren.state.path, vf1GrandChildren)
  graph.appendNode(vf2Children.state.path, vf2Children)
  expect(graph.getLatestParent("")).toEqual(undefined)
  const rootPath = FormPath.getPath("")
  const v1Path = FormPath.getPath(vf1.state.path)
  const v2Path = FormPath.getPath(vf2.state.path)
  const v1CPath = FormPath.getPath(vf1Children.state.path)
  const v2CPath = FormPath.getPath(vf2Children.state.path)
  const root = {
    path: rootPath,
    ref: { path: rootPath, children: [v1Path, v2Path] }
  }
  expect(graph.getLatestParent(vf1.state.path)).toEqual(root)
  expect(graph.getLatestParent(vf2.state.path)).toEqual(root)
  expect(graph.getLatestParent(vf1Children.state.path)).toEqual({
    path: v1Path,
    ref: { path: v1Path, children: [v1CPath], parent: graph.getLatestParent(vf1.state.path).ref }    
  })
  expect(graph.getLatestParent(vf2Children.state.path)).toEqual({
    path: v2Path,
    ref: { path: v2Path, children: [v2CPath], parent: graph.getLatestParent(vf2.state.path).ref }    
  })
  expect(graph.getLatestParent(vf1GrandChildren.state.path)).toEqual({
    path: v1CPath,

const state = new FormState({})
  const form = createForm()
  const vf1 = form.registerVirtualField({ name: 'a' })
  const vf1Children = form.registerVirtualField({ name: 'a.a' })
  const vf1GrandChildren = form.registerVirtualField({ name: 'a.a.a' })
  const vf2 = form.registerVirtualField({ name: 'b' })
  const vf2Children = form.registerVirtualField({ name: 'b.b' })
  const graph = new FormGraph()
  graph.appendNode("", state) 
  graph.appendNode(vf1.state.path, vf1)
  graph.appendNode(vf2.state.path, vf2)
  graph.appendNode(vf1Children.state.path, vf1Children)
  graph.appendNode(vf1GrandChildren.state.path, vf1GrandChildren)
  graph.appendNode(vf2Children.state.path, vf2Children)
  expect(graph.getLatestParent("")).toEqual(undefined)
  const rootPath = FormPath.getPath("")
  const v1Path = FormPath.getPath(vf1.state.path)
  const v2Path = FormPath.getPath(vf2.state.path)
  const v1CPath = FormPath.getPath(vf1Children.state.path)
  const v2CPath = FormPath.getPath(vf2Children.state.path)
  const root = {
    path: rootPath,
    ref: { path: rootPath, children: [v1Path, v2Path] }
  }
  expect(graph.getLatestParent(vf1.state.path)).toEqual(root)
  expect(graph.getLatestParent(vf2.state.path)).toEqual(root)
  expect(graph.getLatestParent(vf1Children.state.path)).toEqual({
    path: v1Path,
    ref: { path: v1Path, children: [v1CPath], parent: graph.getLatestParent(vf1.state.path).ref }    
  })
  expect(graph.getLatestParent(vf2Children.state.path)).toEqual({
    path: v2Path,