@cainiaofe/cn-ui-m
Version:
200 lines (199 loc) • 9.14 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
import { CnForm, CnPage, formilyCore, CnCard } from "../../..";
import { onFormValuesChange } from '@formily/core';
var defaultLayout = {
labelAlign: 'top',
labelWidth: 100,
labelTextAlign: 'left',
wrapperAlign: 'left',
};
export var 基本 = function () {
var _a = React.useState(defaultLayout), layout = _a[0], setLayout = _a[1];
var layoutForm = React.useMemo(function () {
return formilyCore.createForm({
initialValues: defaultLayout,
effects: function () {
onFormValuesChange(function (form) {
setLayout(__assign({}, form.values));
});
},
});
}, []);
var form = React.useMemo(function () {
return formilyCore.createForm({
initialValues: {
name: '123',
textDisabled: '禁用文本',
},
});
}, []);
return (React.createElement(CnPage, null,
React.createElement(CnCard, { title: "\u8868\u5355\u9009\u9879" },
React.createElement(CnForm, { form: layoutForm, formLayoutProps: { labelAlign: 'left', labelWidth: 100 }, schema: {
type: 'object',
properties: {
labelAlign: {
title: '标签对齐',
required: true,
'x-component': 'CnRadioGroup',
'x-decorator': 'CnFormItem',
'x-component-props': {
dataSource: [
{
label: 'top',
value: 'top',
},
{
label: 'left',
value: 'left',
},
],
},
},
labelWidth: {
title: '标签宽度',
required: true,
'x-component': 'CnRadioGroup',
'x-decorator': 'CnFormItem',
'x-component-props': {
dataSource: [
{
label: 100,
value: 100,
},
{
label: 200,
value: 200,
},
],
},
},
labelTextAlign: {
title: '标签文本对齐',
required: true,
'x-component': 'CnRadioGroup',
'x-decorator': 'CnFormItem',
'x-component-props': {
dataSource: [
{
label: 'left',
value: 'left',
},
{
label: 'right',
value: 'right',
},
],
},
},
wrapperAlign: {
title: '内容对齐',
required: true,
'x-component': 'CnRadioGroup',
'x-decorator': 'CnFormItem',
'x-component-props': {
dataSource: [
{
label: 'left',
value: 'left',
},
{
label: 'right',
value: 'right',
},
],
},
},
},
} })),
React.createElement(CnCard, { title: "\u8868\u5355\u5185\u5BB9" },
React.createElement(CnForm, { hasFooterSubmit: true, onSubmit: console.log, form: form, formLayoutProps: layout, schema: {
type: 'object',
properties: {
name: {
title: '姓名',
required: true,
'x-component': 'CnInput',
'x-decorator': 'CnFormItem',
'x-decorator-props': {
extra: '这是一段额外的辅助信息',
tip: '这是一段额外的辅助信息',
rightExtra: '这是一段右侧的额外信息',
},
'x-component-props': {
tip: '姓名的一段解释',
},
},
agree: {
'x-component': 'CnAgreement',
'x-decorator': 'CnFormItem',
'x-component-props': {
requestConfig: {
url: 'https://mocks.alibaba-inc.com/mock/ms/ms-agreement',
},
labelText: (React.createElement("div", null,
"\u6211\u5DF2\u9605\u8BFB\u5E76\u540C\u610F",
React.createElement("span", { style: { color: '#005be5' } }, "\u300A\u7528\u6237\u534F\u8BAE\u300B"),
"\u5E76\u6388\u6743\u83DC\u9E1F\u8D26\u53F7\u4F7F\u7528\u8BE5\u4FE1\u606F\u8FDB\u884C\u7EDF\u4E00\u7BA1\u7406")),
dataSource: [
{
label: 100,
value: 100,
},
{
label: 200,
value: 200,
},
],
},
},
address: {
title: '地址',
required: true,
'x-component': 'CnInputTextArea',
'x-decorator': 'CnFormItem',
'x-component-props': {
tip: '地址的一段解释',
},
},
number: {
'x-component': 'CnNumberPicker',
'x-decorator': 'CnFormItem',
'x-component-props': {
tip: '地址的一段解释',
},
},
isDerived: {
title: '送货上门',
'x-component': 'CnSwitch',
'x-decorator': 'CnFormItem',
'x-component-props': {
tip: '地址的一段解释',
},
},
image: {
title: '图片上传,在form中强制上下结构展示',
required: true,
'x-component': 'CnOSSImageUpload',
'x-decorator': 'CnFormItem',
'x-component-props': {
tip: '图片上传的一段解释',
},
},
startDate: {
title: '开始日期',
required: true,
'x-component': 'CnDatePickerPro',
'x-decorator': 'CnFormItem',
},
textDisabled: {
title: '禁用信息',
'x-disabled': true,
'x-component': 'CnInput',
'x-decorator': 'CnFormItem',
},
},
} }))));
};
export default { title: 'demo/CnForm' };