@ bluprynt/ forms- buildinger (帮助) @ info: whatsthis

用于构建和编辑的无头反应组件, 构成带有拖放重排的策略 。 与 @bluprynt/forms-core 以通过 FormDefinitionEditor。 。 。 .

密钥能力

• 拖放重排顺序 ——通过@dnd-kit来重排有深度意识的筑巢场和区段,并尊重3级最大筑巢深度.
• 斯克马 CRUD ——添加,更新并去除字段和段落. 所有突变都经过 FormDefinitionEditor 从 @bluprynt/forms-core。 。 。 .
• 无头建筑 ——所有渲染都委托给您提供的组件(container, (中文(简体) ), section, (中文(简体) ), field, (中文(简体) ), addPlaceholder),因此软件包的UI观点为零.
• 深度意识入巢 ——水平拖放相抵控制入巢深度. 只有科可以接受被窝中的孩子,在拖放投影时执行.
• 添加占位符 ——每节末尾和根级自动插入点来添加新项目.

安装

npm install @bluprynt/forms-builder @bluprynt/forms-core ajv react react-dom @dnd-kit/abstract @dnd-kit/dom @dnd-kit/helpers @dnd-kit/react @dnd-kit/state

@bluprynt/forms-core, (中文(简体) ), react, (中文(简体) ), react-dom,以及 @dnd-kit/* 软件包是同伴的依赖性,必须安装在您的工程中.

快速启动

import { useState, type FC } from 'react'
import { FormBuilder } from '@bluprynt/forms-builder'
import type {
  FieldRenderProps,
  SectionRenderProps,
  AddPlaceholderRenderProps,
  NewContentItem,
} from '@bluprynt/forms-builder'
import type { FormDefinition } from '@bluprynt/forms-core'

const MyField: FC<FieldRenderProps> = ({ ref, handleRef, item, isDragging, onRemove }) => (
  <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
    <span ref={handleRef}>⠿</span>
    {item.label}
    <button onClick={onRemove}>Remove</button>
  </div>
)

const MySection: FC<SectionRenderProps> = ({ ref, handleRef, item, isDragging }) => (
  <div ref={ref} style={{ opacity: isDragging ? 0.5 : 1 }}>
    <span ref={handleRef}>⠿</span>
    {item.title}
  </div>
)

const MyAddPlaceholder: FC<AddPlaceholderRenderProps> = ({ onAdd }) => (
  <button onClick={() => onAdd({ type: 'string', label: 'New Field' })}>
    + Add Field
  </button>
)

const Builder: FC = () => {
  const [definition, setDefinition] = useState<FormDefinition>(initialDefinition)

  return (
    <FormBuilder
      definition={definition}
      container={({ children }) => <div>{children}</div>}
      section={MySection}
      field={MyField}
      addPlaceholder={MyAddPlaceholder}
      selectedId={null}
      onDefinitionChange={setDefinition}
    />
  )
}

处理选择

跟踪通过选择的项目 selectedId。每个外地和科部分都收到 isSelected数字 :

const [selectedId, setSelectedId] = useState<number | null>(null)

<FormBuilder
  definition={definition}
  container={({ children }) => <div>{children}</div>}
  section={(props) => (
    <div ref={props.ref} onClick={() => setSelectedId(props.id)}
      style={{ outline: props.isSelected ? '2px solid blue' : 'none' }}>
      <span ref={props.handleRef}>⠿</span>
      {props.item.title}
    </div>
  )}
  field={(props) => (
    <div ref={props.ref} onClick={() => setSelectedId(props.id)}
      style={{ outline: props.isSelected ? '2px solid blue' : 'none' }}>
      <span ref={props.handleRef}>⠿</span>
      {props.item.label}
    </div>
  )}
  addPlaceholder={MyAddPlaceholder}
  selectedId={selectedId}
  onDefinitionChange={setDefinition}
/>

渲染组件道具

外地渲染方案

区域

形状与 FieldRenderProps 但:

添加位置持有人选项

文档