jjb-lc-designable
Version:
基于alibaba-designable源码二次封装的表单设计器。
210 lines • 5.72 kB
JavaScript
import { ReactionsSetter, DataSourceSetter, ValidatorSetter } from 'jjb-lc-designable/formily-setters';
import { FormItemSwitcher } from '../../common/FormItemSwitcher';
import { AllSchemas } from '../../schemas';
export const createComponentSchema = (component, decorator) => {
return {
'component-group': component && {
type: 'void',
'x-component': 'CollapseItem',
'x-reactions': {
fulfill: {
state: {
visible: '{{!!$form.values["x-component"]}}'
}
}
},
properties: {
'x-component-props': component
}
},
'decorator-group': decorator && {
type: 'void',
'x-component': 'CollapseItem',
'x-component-props': {
defaultExpand: false
},
'x-reactions': {
fulfill: {
state: {
visible: '{{!!$form.values["x-decorator"]}}'
}
}
},
properties: {
'x-decorator-props': decorator
}
},
'component-style-group': {
type: 'void',
'x-component': 'CollapseItem',
'x-component-props': {
defaultExpand: false
},
'x-reactions': {
fulfill: {
state: {
visible: '{{!!$form.values["x-component"]}}'
}
}
},
properties: {
'x-component-props.style': AllSchemas.CSSStyle
}
},
'decorator-style-group': {
type: 'void',
'x-component': 'CollapseItem',
'x-component-props': {
defaultExpand: false
},
'x-reactions': {
fulfill: {
state: {
visible: '{{!!$form.values["x-decorator"]}}'
}
}
},
properties: {
'x-decorator-props.style': AllSchemas.CSSStyle
}
}
};
};
export const createFieldSchema = (component, decorator = AllSchemas.FormItem) => {
return {
type: 'object',
properties: {
'field-group': {
type: 'void',
'x-component': 'CollapseItem',
properties: {
name: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input'
},
title: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input'
},
description: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea'
},
'x-display': {
type: 'string',
enum: ['visible', 'hidden', 'none', ''],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
defaultValue: 'visible'
}
},
'x-pattern': {
type: 'string',
enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
defaultValue: 'editable'
}
},
default: {
'x-decorator': 'FormItem',
'x-component': 'ValueInput'
},
enum: {
'x-decorator': 'FormItem',
'x-component': DataSourceSetter
},
'x-reactions': {
'x-decorator': 'FormItem',
'x-component': ReactionsSetter
},
'x-validator': {
type: 'array',
'x-component': ValidatorSetter
},
required: {
type: 'boolean',
'x-decorator': 'FormItem',
'x-component': 'Switch'
}
}
},
...createComponentSchema(component, decorator)
}
};
};
export const createVoidFieldSchema = (component, decorator = AllSchemas.FormItem) => {
return {
type: 'object',
properties: {
'field-group': {
type: 'void',
'x-component': 'CollapseItem',
properties: {
name: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input'
},
title: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input',
'x-reactions': {
fulfill: {
state: {
hidden: '{{$form.values["x-decorator"] !== "FormItem"}}'
}
}
}
},
description: {
type: 'string',
'x-decorator': 'FormItem',
'x-component': 'Input.TextArea',
'x-reactions': {
fulfill: {
state: {
hidden: '{{$form.values["x-decorator"] !== "FormItem"}}'
}
}
}
},
'x-display': {
type: 'string',
enum: ['visible', 'hidden', 'none', ''],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
defaultValue: 'visible'
}
},
'x-pattern': {
type: 'string',
enum: ['editable', 'disabled', 'readOnly', 'readPretty', ''],
'x-decorator': 'FormItem',
'x-component': 'Select',
'x-component-props': {
defaultValue: 'editable'
}
},
'x-reactions': {
'x-decorator': 'FormItem',
'x-component': ReactionsSetter
},
'x-decorator': {
type: 'string',
'x-decorator': 'FormItem',
'x-component': FormItemSwitcher
}
}
},
...createComponentSchema(component, decorator)
}
};
};