react-schema-form
爬虫前端核心组件。
react-schema-form-extension
这是一个扩展项目，包括许多实用的hoc。
目录
安装
npm
npm install --save fx-schema-form-extendsion
HOC列表
condition
条件hoc，可以设置需要使用的数据，一般不单独使用。
配置参数:
- paths: ConditionPath[]; 配置需要的数据路径;
- hoc: ComponentEnhancer<any, any>; 下层hoc;
export interface ConditionPath {
/**
* 数据的路径，可以是相对路径
* example: ./height, ../height, /height
*/
path: string;
/**
* 是否从meta中获取数据
* 如果是从meta中获取数据，额需要配置metaKey
*/
meta: boolean;
/**
* 需要获取的meta的字段
* 例如 isLoading
*/
metaKey: string;
}返回属性:
- condition: Immutable.Map<string, any>; 数据，数据的key使用全路径数组join("/")得到。
changed
数据变更后回调，需要配合condition来使用。
配置参数:
- paths?: string[]; 需要监听变化的数据数组;(已废弃)
- condition: ConditionHocSettings; condition的设置参数;
- onChanged: (props: DefaultProps, data: any) => void; 数据变化时候的回调;
返回属性: null
实例: demo
// 下面是一个uiSchema的配置
// 监听高度的变化，做一些操作
{
key: "width",
hocs: ["utils", "theme", "field", "validate", "changed", "temp"],
options: Immutable.fromJS({
hoc: {
changed: {
// paths: ["../height"],
condition: {
paths: [{
path: "../height"
}]
},
onChanged: (props: any, data: any) => {
let height = props.getPathKeys(props.uiSchema.keys as any, "../height").join("/");
if (data[height] !== undefined) {
// do something
}
}
}
}
})
}copytometa
把数据拷贝到meta中。
配置参数:
- paths: CopyToMetaPath[];需要copy的数据配置。
- condition: ConditionHocSettings; condition的设置参数;
export interface CopyToMetaPath {
// 数据的路径
path: string;
// 拷贝到的路径
to: string[];
// 默认值
defaultValue?: any;
}返回属性: null
实例: demo
// 这是一个uiSchema的配置
// 这里当宽度变化的时候，把宽度的值设置到高度的meta中去
// 即宽度是高度的最大值
{
key: "height",
hocs: ["utils", "theme", "field", "validate", "copyToMeta", "temp"],
options: Immutable.fromJS({
hoc: {
copyToMeta: {
condition: {
paths: [{ path: "../width" }]
},
paths: [{ path: "../width", defaultValue: 0, to: ["options", "widget", "number", "options", "max"] }]
}
}
})
}datatometa
把data中的数据拷贝到meta。
配置参数: null 返回属性: null
format
根据schema中设置的format自动选择组件。
配置参数: null 返回属性: null
oneof
处理oneof关键字对应的表单。
配置参数:
- path: string; 数据字段路径，根据这个的值来改变表单的展现。
- key: anyOf|oneOf; schema中的关键字。
- condition: ConditionHocSettings; condition的设置参数。
- uiSchemas?: UiSchemas; 根据不同的值，来展现不同的uiSchema配置。
export class UiSchemas {
[key: string]: {
// schemaId
schemaId: string;
// uiSchemas配置
uiSchemas: Array<FxUiSchema | string>;
};
}返回属性: null
实例: demo
// 这里对type的值做检测
// 当type的值变化的时候，value的表单会变化
[{
key: "type",
widget: "select",
options: Immutable.fromJS({
widget: {
select: {
options: {
children: [1, 2, 3, 4].map((val: number, index: number) => {
return (<SelectOption key={index} value={val}>{val}</SelectOption>) as any;
})
}
}
}
})
}, {
key: "value",
hocs: ["utils", "theme", "field", "validate", "oneOf", "array", "temp"],
options: Immutable.fromJS({
hoc: {
oneOf: {
condition: {
paths: [{ path: "../type" }]
},
path: "../type",
key: "oneOf",
uiSchemas: {
1: { schemaId: "dnd-oneof-number", uiSchemas: ["*"] },
2: { schemaId: "dnd-oneof-string1", uiSchemas: ["*"] },
3: { schemaId: "dnd-oneof-boolean", uiSchemas: ["*"] },
4: {
schemaId: "dnd-oneof-object", uiSchemas: [{
key: "",
temps: ["formitem"],
children: ["*"]
}]
}
}
}
}
})
}]resetkey
处理下一级hoc的props属性的列表。
配置参数: null
返回属性:
- excludeKeys: string[]; 需要过滤掉的属性名。
- includeKeys: string[]; 不需要过滤掉的属性名。
show
是否显示下层组件。
配置参数:
- paths?: string[]; 需要验证的数据字段路径。(已废弃)
- renderNothings?:boolean; 如果不显示，是否返回null，否则把display设置成none。
- condition: ConditionHocSettings; condition的设置参数。
返回属性: null
实例: demo
// 这里户根据isEighteen的值，来决定现不现实textAlign这个字段
{
key: "textAlign",
hocs: ["utils", "theme", "field", "validate", "show", "temp"],
options: Immutable.fromJS({
hoc: {
show: {
condition: {
paths: [{ path: "../isEighteen" }]
},
// paths: ["../isEighteen"]
}
}
})
}wrapper
包装组件。
配置参数:
- condition: ConditionHocSettings; condition的设置参数。
- hoc?:any; 下层的hoc。
- hocName?:string; 下层的hoc的name，用于获取hoc的设置参数。
返回属性: null
启动
npm start