@cainiaofe/cn-ui-m
Version:
76 lines (75 loc) • 4.55 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
import { CnDemoBlock, CnFormItem, CnInput, CnForm, CnFormField, CnRadioGroup, formilyCore, CnDemoPage, } from "../../..";
var onFormValuesChange = formilyCore.onFormValuesChange;
var defaultLayout = {
labelAlign: 'top',
labelWidth: 100,
labelTextAlign: '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 onChange = function (value) {
console.log('onChange', value);
};
return (React.createElement(CnDemoPage, { title: "\u57FA\u672C" },
React.createElement(CnDemoBlock, { title: "\u8868\u5355\u9009\u9879" },
React.createElement(CnForm, { form: layoutForm, formLayoutProps: { labelAlign: 'left', labelWidth: 100 } },
React.createElement(CnFormField, { name: "labelAlign", title: "\u6807\u7B7E\u5BF9\u9F50", required: true },
React.createElement(CnRadioGroup, { dataSource: [
{
label: 'top',
value: 'top',
},
{
label: 'left',
value: 'left',
},
] })),
React.createElement(CnFormField, { name: "labelWidth", title: "\u6807\u7B7E\u5BBD\u5EA6", required: true },
React.createElement(CnRadioGroup, { dataSource: [
{
label: 100,
value: 100,
},
{
label: 200,
value: 200,
},
] })),
React.createElement(CnFormField, { name: "labelTextAlign", title: "\u6807\u7B7E\u6587\u672C\u5BF9\u9F50", required: true },
React.createElement(CnRadioGroup, { dataSource: [
{
label: 'left',
value: 'left',
},
{
label: 'right',
value: 'right',
},
] })))),
React.createElement(CnDemoBlock, { title: "\u8868\u5355\u5B57\u6BB5\u5BB9\u5668" },
React.createElement(CnFormItem, __assign({}, layout, { title: "\u666E\u901A\u5B57\u6BB5" }),
React.createElement(CnInput, { onChange: onChange })),
React.createElement(CnFormItem, __assign({}, layout, { title: "\u5FC5\u586B\u5B57\u6BB5", required: true }),
React.createElement(CnInput, { onChange: onChange })),
React.createElement(CnFormItem, __assign({}, layout, { title: "\u5B57\u6BB5\u63D0\u793A", tip: "\u63D0\u793A\u4FE1\u606F\u5185\u5BB9", required: true }),
React.createElement(CnInput, { onChange: onChange })),
React.createElement(CnFormItem, __assign({}, layout, { title: "\u9519\u8BEF\u4FE1\u606F\u53D7\u63A7", errors: ['此处必填', '文字不能含有中文'], required: true }),
React.createElement(CnInput, { onChange: onChange })),
React.createElement(CnFormItem, __assign({}, layout, { title: "\u5B57\u6BB5\u6807\u9898\u662F\u4E00\u6BB5\u7279\u522B\u957F\u7684\u6587\u672C\u65F6\u4F1A\u7701\u7565\uFF0C\u5EFA\u8BAE\u5C06\u63D0\u793A\u653E\u5230tip\u4E2D", tip: "\u5EFA\u8BAE\u5C06\u63D0\u793A\u653E\u5230tip\u4E2D", required: true }),
React.createElement(CnInput, { onChange: onChange })),
React.createElement(CnFormItem, __assign({}, layout, { title: "\u5B57\u6BB5\u6807\u9898", tip: "\u63D0\u793A\u4FE1\u606F\u5185\u5BB9", required: true, extra: React.createElement("a", { href: "https://www.taobao.com", target: "_blank", style: { color: '#005be5' }, rel: "noreferrer" }, "\u67E5\u770B\u8BE6\u60C5") }),
React.createElement(CnInput, { onChange: onChange })))));
};
export default { title: 'demo/CnFormItem' };