@aglyn/ shared- ii- jsx- 形式

材料 UI 组件映射器 数据驱动窗体,加上额外的字段类型 Aglyn 编辑器需要:颜色和图标取取器,CSS维度,边框和梯度编辑器,一个断点跨行,一个数据表,以及主题尺度和预设选择器. 设计师的属性面板和插件的控制台表都随它而提供. 如果您使用带有当前 MUI 版本的数据驱动窗体, 请安装它 .

从Aglyn monorepo出版到npm. 随后的版本 语义版本。 。 。 .

安装

npm install @aglyn/shared-ui-jsx-forms

同伴依赖性 : react, (中文(简体) ), next, (中文(简体) ), @mui/material, (中文(简体) ), @mui/icons-material 财务报告和审定财务报表 @mui/x-date-pickers。 。 。 . next 字段组件被装入 next/dynamic。 。 。 . @data-driven-forms/react-form-renderer 是一个正常的依赖,并且是再出口的,所以您不会单独导入.

里面有什么东西

• 组件映射器. componentMapper 地图 FieldComponentType 到它的地盘。 较窄的映射器覆盖常见子集: simpleComponentMapper (选择、子窗体、切换、文本字段、文本区域), optionComponentMapper, (中文(简体) ), dateTimeComponentMapper 财务报告和审定财务报表 pickerComponentMapper。单项导出为 FIELD_MAP_*,并且懒散地装入的字段组件为 Field* (单位:千美元)FieldTextField, (中文(简体) ), FieldSelect, (中文(简体) ), FieldColorPicker (见a/cn.9/wg.iii/wp.iii/wp.1号文件).
• 映射器组件 . 写入当前 MUI API : Checkbox, (中文(简体) ), Radio, (中文(简体) ), Select, (中文(简体) ), Switch, (中文(简体) ), Slider, (中文(简体) ), TextField, (中文(简体) ), Textarea, (中文(简体) ), DatePicker, (中文(简体) ), TimePicker, (中文(简体) ), DualListSelect, (中文(简体) ), SubForm, (中文(简体) ), Tabs, (中文(简体) ), Wizard, (中文(简体) ), PlainText。映射器是一个端口 @data-driven-forms/mui-component-mapper (阿帕切-2.0) (中文(简体) ).
• 编辑器字段类型 . CssDimension, (中文(简体) ), CssBorder, (中文(简体) ), CssGradient, (中文(简体) ), BreakpointSpan 中,每个数据表字段都坚持一个字符串 seed…Draft 编号 : serialize…Draft 帮助者被导出旁边. ColorPickerComponent 可以通过 ColorPickerTokensContext。 。 。 . IconSelectControl 通过 id 选择材料设计图标.
• Num. FieldComponentType, (中文(简体) ), FieldValidatorType, (中文(简体) ), FieldDataType。 。 。 .
• 模板和抽屉. GridFormTemplateComponent 财务报告和审定财务报表 ArtifactFormTemplate 是将字段设置在带有提交按钮的 MUI 网格中的窗体模板. CreateArtifactDrawer 是一个抽屉,带有一个名称和描述的创建格式,可以接受 extraFields。 。 。 .
• 从数据驱动形式再出口. FormRenderer, (中文(简体) ), FormSpy, (中文(简体) ), FieldProvider, (中文(简体) ), useFieldApi, (中文(简体) ), useFormApi, (中文(简体) ), componentTypes, (中文(简体) ), validatorTypes, (中文(简体) ), dataTypes, (中文(简体) ), WizardContext 编辑 FieldSchema, (中文(简体) ), ComponentMapper, (中文(简体) ), Validator 和相关类型.
• 助会者. withGridItem, (中文(简体) ), validationMessage, (中文(简体) ), optionIsEqualToValue。 。 。 .

使用量

'use client'

import {
  ArtifactFormTemplate,
  FieldComponentType,
  FormRenderer,
  simpleComponentMapper,
} from '@aglyn/shared-ui-jsx-forms'

const schema = {
  fields: [
    {
      component: FieldComponentType.TEXT_FIELD,
      name: 'displayName',
      label: 'Name',
      isRequired: true,
    },
    {
      component: FieldComponentType.SWITCH,
      name: 'enabled',
      label: 'Enabled',
    },
  ],
}

export function Example() {
  return (
    <FormRenderer
      FormTemplate={ArtifactFormTemplate}
      componentMapper={simpleComponentMapper}
      schema={schema}
      onSubmit={(values) => console.log(values)}
    />
  )
}

@aglyn/shared-data-forms 已预定义连接到相同字段( 电子邮件、 密码、 地址) 的计划 fields 阵列.

怎样才合适

A 类 shared UI软件包. 这取决于 @aglyn/shared-ui-jsx, (中文(简体) ), @aglyn/shared-ui-theme, (中文(简体) ), @aglyn/shared-ui-color-picker, (中文(简体) ), @aglyn/shared-data-enums, (中文(简体) ), @aglyn/shared-data-mdi, (中文(简体) ), @aglyn/shared-util-tools 财务报告和审定财务报表 @aglyn/shared-util-vendor。 。 。 . @aglyn/besigner-ui 而表格、电子邮件和营销插件都取决于它。 共享软件包是通用的:它们只导入其他共享软件包并持有没有插件的域名.

许可证

阿帕奇2.0 (英语). 资料来源: https://github.com/aglyn/aglyn/tree/main/libs/shared/ui/jsx-forms. 中国植物物种信息数据库