@ bluprynt/ forms- 查看器

无头反应组件用于渲染和编辑由JSON驱动的动态形式. 与 @bluprynt/forms-core 处理能见度,验证,和段导航——你提供UI组件,取景器将所有东西一起接通.

密钥能力

• 只读渲染 —— 说 FormViewer 使用自定义视图组件制作定义和文档中的窗体,并自动显示可见度和验证度.
• 可编辑表单 —— 说 FormEditor 使每个字段的可编辑窗体 onChange 处理器、数组和数组列项的操作(添加、去除、移动),并在每个变化上进行活的再验证.
• 区域导航 —— 说 FormSections 列出可见的顶层区域(包括用于未组合字段的合成根)并跟踪活性区域.
• 验证显示 —— 说 FormFieldsValidation 按字段分组实地一级错误; FormDocumentValidation 使文档级别出错( schema 错配, 缺失) submittedAt(见a/c.5/49/70,附件).
• 无头建筑 ——所有渲染都委托给您提供的组件地图(ViewerComponentMap, (中文(简体) ), EditorComponentMap),因此软件包的UI观点为零.

安装

npm install @bluprynt/forms-viewer @bluprynt/forms-core ajv react react-dom

@bluprynt/forms-core, (中文(简体) ), react,以及 react-dom 属于对等依赖,必须安装在您的工程中.

快速启动

设置窗体提供者

这个 Form 组件汇编定义,计算能见度,运行验证,并通过上下文曝光一切.

import type { FC } from 'react'
import { Form } from '@bluprynt/forms-viewer'
import type { FormDefinition, FormDocument } from '@bluprynt/forms-viewer'

const definition: FormDefinition = { /* ... */ }
const document: FormDocument = { /* ... */ }

const App: FC = () => {
  return (
    <Form definition={definition} data={document}>
      {/* FormViewer, FormEditor, FormSections, etc. */}
    </Form>
  )
}

Form 道具 :

使用表格编辑器( 只读)

使用 FormViewer 当您只需要不编辑而显示已提交的窗体值时。 它使每个字段通过您的组件映射以只读模式,应用能见度规则并显示验证状态.

import type { FC } from 'react'
import { Form, FormViewer } from '@bluprynt/forms-viewer'
import type { ViewerComponentMap } from '@bluprynt/forms-viewer'

const components: ViewerComponentMap = {
  string: ({ field, value }) => <p>{field.label}: {value}</p>,
  number: ({ field, value }) => <p>{field.label}: {value}</p>,
  boolean: ({ field, value }) => <p>{field.label}: {value ? 'Yes' : 'No'}</p>,
  date: ({ field, value }) => <p>{field.label}: {value}</p>,
  select: ({ field, value, options }) => (
    <p>{field.label}: {options.find(o => o.value === value)?.label}</p>
  ),
  array: ({ field, children }) => <div>{field.label}: {children}</div>,
  file: ({ field, value }) => <p>{field.label}: {value?.name}</p>,
  section: ({ section, children }) => (
    <fieldset>
      <legend>{section.title}</legend>
      {children}
    </fieldset>
  ),
}

const ReadOnlyForm: FC = () => {
  return (
    <Form definition={definition} data={document}>
      <FormViewer components={components} />
    </Form>
  )
}

使用窗体编辑器( Ediable)

使用 FormEditor 当用户需要填写或编辑表格时。 它提供每个战地 onChange 处理器和对每次更改都发出回调 FormDocument JSON和当前验证结果.

import { useState, type FC } from 'react'
import { Form, FormEditor } from '@bluprynt/forms-viewer'
import type { EditorComponentMap, FormDocument, FormValidationResult } from '@bluprynt/forms-viewer'

const components: EditorComponentMap = {
  string: ({ field, value, onChange }) => (
    <input value={value ?? ''} onChange={e => onChange(e.target.value)} />
  ),
  number: ({ field, value, onChange }) => (
    <input type="number" value={value ?? ''} onChange={e => onChange(Number(e.target.value))} />
  ),
  boolean: ({ field, value, onChange }) => (
    <input type="checkbox" checked={value ?? false} onChange={e => onChange(e.target.checked)} />
  ),
  date: ({ field, value, onChange }) => (
    <input type="date" value={value ?? ''} onChange={e => onChange(e.target.value)} />
  ),
  select: ({ field, value, options, onChange }) => (
    <select value={value ?? ''} onChange={e => onChange(e.target.value)}>
      {options.map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
    </select>
  ),
  array: ({ field, children, onAddItem }) => (
    <div>
      {children}
      <button onClick={onAddItem}>Add item</button>
    </div>
  ),
  file: ({ field, value, onChange }) => (
    <input type="file" onChange={e => { /* handle file */ }} />
  ),
  section: ({ section, children }) => (
    <fieldset>
      <legend>{section.title}</legend>
      {children}
    </fieldset>
  ),
}

const EditableForm: FC = () => {
  const [data, setData] = useState<FormDocument>(initialDocument)

  const handleChange = (doc: FormDocument, validation: FormValidationResult) => {
    setData(doc)
    // validation.valid, validation.fieldErrors, etc.
  }

  return (
    <Form definition={definition} data={data}>
      <FormEditor components={components} onChange={handleChange} />
    </Form>
  )
}

导航使用窗体部分

使用 FormSections 来将窗体区域变成标签、侧边栏菜单或任何其他导航 UI,并让用户在它们之间切换。 它列举了可见的顶层区段并跟踪活动区段.

import { useState, type FC } from 'react'
import { Form, FormViewer, FormSections, ROOT } from '@bluprynt/forms-viewer'

const FormWithSections: FC = () => {
  const [activeSection, setActiveSection] = useState<typeof ROOT | number>(ROOT)

  return (
    <Form definition={definition} data={document} section={activeSection}>
      <FormSections
        container={({ children }) => <nav>{children}</nav>}
        item={({ section, active, select }) => (
          <button onClick={select} style={{ fontWeight: active ? 'bold' : 'normal' }}>
            {section.title}
          </button>
        )}
        defaultSectionTitle="General"
        onSelect={setActiveSection}
      />
      <FormViewer components={viewerComponents} />
    </Form>
  )
}

使用窗体校正和窗体文档校正

使用 FormDocumentValidation 以显示文档级别错误 — 计划错配、 无效版本、 缺失 submittedAt以及类似的结构问题。 使用 FormFieldsValidation 以显示字段级错误——与表单中定义的验证规则不符的值(需要、分/最大、图案等).

import type { FC } from 'react'
import { Form, FormFieldsValidation, FormDocumentValidation } from '@bluprynt/forms-viewer'

const ValidationSummary: FC = () => {
  return (
    <Form definition={definition} data={document}>
      <FormDocumentValidation
        container={({ children }) => <div className="doc-errors">{children}</div>}
        error={({ code, message }) => <p>{message} ({code})</p>}
      />
      <FormFieldsValidation
        container={({ children }) => <div className="field-errors">{children}</div>}
        field={({ field, errors, children }) => (
          <div>
            <strong>{field?.label}</strong>
            {children}
          </div>
        )}
        error={({ message, rule }) => <p>{message} [{rule}]</p>}
      />
    </Form>
  )
}

组件映射类型

查看器组件映射

只读渲染的组件映射 。 每个键将字段类型映射到反应组件.

所有视图字段道具扩展 BaseViewFieldProps 规定 field: FieldContentItem 财务报告和审定财务报表 errors: FieldValidationError[]。 。 。 . StaticViewProps 是例外: 它只携带 field: StaticFieldContentItem,其 text 内容及其 label 是一个可选标题.

array_obj, (中文(简体) ), multiselect, (中文(简体) ), static, (中文(简体) ), blockchain 财务报告和审定财务报表 sustainability 为: 选项 键,所以现有的地图会不断编译。 未提供部件的字段只能扔出.

编辑器组件映射

可编辑渲染的组件映射 。 用突变回调来扩展取景道具.

所有编辑字段道具扩展 BaseEditFieldProps,则添加 onChange(value) 加可选 onAcceptSuggestion() 编号 : onRejectSuggestion() 处理器到基本视图道具. StaticEditProps 已经 不 静态块没有 onChange,因此同一部分为两种地图服务.

每个字段——只读可编辑——还收到字段撰写元数据 field (单位:千美元)description, (中文(简体) ), placeholder, (中文(简体) ), answer_guidelines, (中文(简体) ), reference_id)和可选 suggestion (单位:千美元){ value, confidence, source }当文档中包含一个字段。 正在接受 将建议值复制到字段值并保留建议;拒绝删除 建议并留下价值。 见 变化情况。 。 。 .

导出 API

文档

• API 参考 - 所有出口部件、钩子和类型的详细说明
• 建筑 • 内部设计、数据流动和组件结构
• 发展指南 制定、测试和贡献准则