Fr-generator-next NPM

fr-generator-next

  fr-generator for next.js 
  在npm 包基础上修改, 在打包成.

  
  致歉: 
  fr-generator 未找到开源协议, 如不可修改后发布 package,
  请从 github 联系我, 我会及时删除该仓库

使用

yarn add form-render-next@1.6.0-beta-1  
yarn add fr-generator-next

import Generator from 'fr-generator-next';

export default function Demo({schema}) {
  return (
          <>
              <div style={{ height: '80vh' }}>
              <Generator defaultValue={schema.defaultValue}/>
              </div>
          </>
      )
}

说明

该项目依赖 form-render-next@1.6.0-beta-1,

如遇到“ Error: Element type is invalid: expected a string ”

请检查 @ant-design/icons 是否已安装

fr-generator

如何使用

安装

npm i fr-generator

代码演示

/**
 * transform: true
 * defaultShowCode: true
 */
import React from 'react';
import Generator from 'fr-generator';

const defaultValue = {
  type: 'object',
  properties: {
    inputName: {
      title: '简单输入框',
      type: 'string',
    },
  },
};

const Demo = () => {
  return (
    <div style={{ height: '80vh' }}>
      <Generator defaultValue={defaultValue} />
    </div>
  );
};

export default Demo;

API

Props

参数	说明	类型	默认值
hideId	隐藏组件 ID	`boolean`	`false`
defaultValue	默认表单 schema	`object`	`DEFAULT_SCHEMA`
transformer	schema 双向转换	`object`	`{ fromFormRender, toFormRender }`
extraButtons	操作栏按钮	`array`	`extraButton[]`
controlButtons	选中项操作按钮	`array`	`controlButton[]`
settings	左右侧栏配置	`array`	`defaultSettings`
commonSettings	通用配置	`object`	`defaultCommonSettings`
globalSettings	全局配置	`object`	`defaultGlobalSettings`
widgets	自定义组件	`object`	`{}`
mapping	组件和 schema 的映射规则	`object`	`{}`

extraButton

属性	说明	类型
text	按钮文案	`string`
onClick	按钮点击回调函数	`(event) => void`

数组前四项为布尔值，决定默认按钮是否展示。支持 antd 按钮组件的所有其他属性 https://ant.design/components/button-cn/#API

controlButton

属性	说明	类型
text	按钮文案	`string`
onClick	按钮点击回调函数	`(event, schema) => void`

数组前两项为布尔值或函数，决定默认按钮是否展示，函数入参为选中项 schema。

Events

事件名	说明	回调参数
onChange	表单 data 变化回调	表单的 data
onSchemaChange	表单 schema 变化回调	导出的 schema

Methods

事件名	说明	入参
getValue	获取导出的 schema 值	-
setValue	从外部强制修改 schema	`schema`
copyValue	将现有 schema 拷贝到剪贴板	-

案例演示

https://x-render.gitee.io/tools/generator#%E6%A1%88%E4%BE%8B%E6%BC%94%E7%A4%BA

常见问题

1、如何控制编辑器高度

给组件外层要包裹的 div 设置高度即可，否则为默认值 min-height: 30vh

antd clone @ant-design/icons copy-text-to-clipboard form-render-next less moment nanoid rc-color-picker react-dnd react-dnd-html5-backend react-sortable-hoc

@infinitebrahmanuniverse/nolb-fr-@everything-registry/sub-chunk-1699

2.5.4-beta-1

3 years ago