@cainiaofe/cn-ui-m
Version:
201 lines (200 loc) • 7.79 kB
JavaScript
import React from 'react';
import { CnCascaderSelect, CnDemoBlock, CnDemoPage, CnFormField, CnForm, formilyCore, } from "../../..";
var onFieldChange = formilyCore.onFieldChange;
var options = [
{
label: '浙江',
value: '浙江',
children: [
{
label: '杭州',
value: '杭州',
children: [
{
label: '西湖区',
value: '西湖区',
children: [],
},
{
label: '上城区',
value: '上城区',
},
{
label: '余杭区',
value: '余杭区',
disabled: true,
},
],
},
{
label: '温州',
value: '温州',
children: [
{
label: '鹿城区',
value: '鹿城区',
},
{
label: '龙湾区',
value: '龙湾区',
disabled: true,
},
{
label: '瓯海区',
value: '瓯海区',
},
],
},
{
label: '宁波',
value: '宁波',
children: [
{
label: '海曙区',
value: '海曙区',
},
{
label: '江北区',
value: '江北区',
},
{
label: '镇海区',
value: '镇海区',
},
],
},
],
},
{
label: '江苏',
value: '江苏',
children: [
{
label: '南京',
value: '南京',
children: [
{
label: '玄武区',
value: '玄武区',
},
{
label: '秦淮区',
value: '秦淮区',
},
{
label: '建邺区',
value: '建邺区',
},
],
},
{
label: '苏州',
value: '苏州',
children: [
{
label: '虎丘区',
value: '虎丘区',
},
{
label: '吴中区',
value: '吴中区',
},
{
label: '相城区',
value: '相城区',
},
],
},
],
},
];
export var 多选 = function () {
var _a = React.useState(['江苏']), values = _a[0], setValues = _a[1];
var _b = React.useState([
{
value: '2973',
label: '陕西',
},
]), dataSource = _b[0], setDataSource = _b[1];
var onLoadData = function (data) {
console.log(data);
return new Promise(function (resolve) {
setTimeout(function () {
setDataSource([
{
value: '2973',
label: '陕西',
children: [
{
value: '2974',
label: '西安',
children: [
{
value: '2975',
label: '西安市',
isLeaf: true,
},
{
value: '2976',
label: '高陵县',
isLeaf: true,
},
],
},
{
value: '2980',
label: '铜川',
children: [
{
value: '2981',
label: '铜川市',
isLeaf: true,
},
{
value: '2982',
label: '宜君县',
isLeaf: true,
},
],
},
],
},
]);
resolve(1);
}, 500);
});
};
return (React.createElement(CnDemoPage, { title: "\u591A\u9009" },
React.createElement(CnDemoBlock, { title: "\u591A\u9009-\u975E\u53D7\u63A7", padding: 0 },
React.createElement(CnCascaderSelect, { multiple: true, dataSource: options, onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u591A\u9009+ \u53D7\u63A7", padding: 0 },
React.createElement(CnCascaderSelect, { multiple: true, value: values, dataSource: options, onChange: function (list, records) {
setValues(list);
console.log(list, records);
} })),
React.createElement(CnDemoBlock, { title: "\u591A\u9009+\u4F7F\u7528\u8FDC\u7A0B\u8BF7\u6C42", padding: 0 },
React.createElement(CnCascaderSelect, { multiple: true, requestConfig: {
url: 'https://oneapi.alibaba-inc.com/mock/kuw2pbp6/api/customaddress',
} })),
React.createElement(CnDemoBlock, { title: "\u5F02\u6B65\u52A0\u8F7D\u6570\u636E", padding: 0 },
React.createElement(CnCascaderSelect, { multiple: true, dataSource: dataSource, loadData: onLoadData, onChange: console.log })),
React.createElement(CnDemoBlock, { title: "\u8868\u5355\u4E2D\u4F7F\u7528" },
React.createElement(CnForm, { formProps: {
values: {
opt: ['西湖区'],
opt3: ['镇海区'],
},
effects: function () {
onFieldChange('*', function (fieldState) {
console.log(fieldState.path.toString(), fieldState.value);
});
},
} },
React.createElement(CnFormField, { title: "\u7EA7\u8054\u591A\u9009", name: "opt" },
React.createElement(CnCascaderSelect, { multiple: true, dataSource: options })),
React.createElement(CnFormField, { title: "\u7A7A\u503C", name: "opt2" },
React.createElement(CnCascaderSelect, { multiple: true, dataSource: options })),
React.createElement(CnFormField, { title: "\u53EA\u8BFB", name: "opt3", readOnly: true },
React.createElement(CnCascaderSelect, { multiple: true, dataSource: options }))))));
};
export default { title: 'demo/CnCascaderSelect' };