import React from 'react';
import { Reset ,Render } from '@careteam/mfe-lowcode-render';
import schema from './schema.json';
export default () => (
<div style={{ margin: '20px', width: '800px' }}>
{/* 通过 id 获取配置并渲染 */}
<Render
labelWidth={80}
onSubmit={console.log}
id="10"
appKey="xxx"
appSecret="xxxx"
env="prod"
onChange={console.log}
>
<Reset/>
</Render>
{/* 通过schema直接渲染 */}
<Render
labelWidth={80}
onSubmit={console.log}
schema={schema}
onChange={console.log}
>
<Reset/>
</Render>
</div>
);
export interface IFormProps {
id?: string // 通过唯一标识渲染组件时,组件名称
appKey?: string // appkey
appSecret?: string // appsecret
env?:string // 环境[ pro, test ]
onChange?: (values: any, actions: any) => void // 表单value change事件
onSubmit?: (values: any, actions: any) => void // submit事件
onReset?: Function // 重置事件
onMessage?: Function // 废弃
schema?: any, // 通过传入schema直接渲染
components?: object, // 传入自定义component配置
value?: object, // 表单value
formComponent?: React.FunctionComponent, //
formItemComponent?: React.FunctionComponent //
children?:React.ReactElement //
mode?:string // mode,仅在编辑器中用到 [default , edit]
effects?:any // effect 参考https://formilyjs.org/#/0yTeT0/aAIRIjiou6,用于表单联动
serverUrl?:string // 通过唯一标识渲染,指定的服务接口
}
// 其他配置,参考 https://formilyjs.org/#/bdCRC5/dzUZU8il