@cainiaofe/cn-ui-m
Version:
134 lines (133 loc) • 3.24 kB
JavaScript
import React, { useState } from 'react';
import { CnDemoBlock, CnDemoPage, CnSelect } from "../../..";
var data = [
{
value: 207606027537,
label: '阎秀英',
},
{
value: 207606027538,
label: '唐洋',
},
{
value: 207606027539,
label: '徐静',
},
{
value: 207606027540,
label: '侯丽',
},
{
value: 207606027541,
label: '史磊',
},
{
value: 207606027542,
label: '谢平',
},
{
value: 207606027543,
label: '尹刚',
},
{
value: 207606027544,
label: '汪娜',
},
{
value: 207606027545,
label: '梁刚',
},
{
value: 207606027546,
label: '杜丽',
},
{
value: 207606027547,
label: '段伟',
},
{
value: 207606027548,
label: '史桂英',
},
{
value: 207606027549,
label: '孙丽',
},
{
value: 207606027550,
label: '谢娟',
},
{
value: 207606027551,
label: '常秀兰',
},
{
value: 207606027552,
label: '汪秀英',
},
{
value: 207606027553,
label: '赵涛',
},
{
value: 207606027554,
label: '刘超',
},
{
value: 207606027555,
label: '韩勇',
},
{
value: 207606027556,
label: '赵超',
},
];
var timer;
export var 实时搜索 = function () {
var _a = useState([]), ds = _a[0], setDataSource = _a[1];
var _b = useState([
// 初始数据
{
value: 207606027540,
label: '侯丽',
},
{
value: 207606027541,
label: '史磊',
},
]), val = _b[0], setValue = _b[1];
// mock remote load delay
var loadData = function (filterVal) {
setTimeout(function () {
if (filterVal) {
var newDataSource = data.filter(function (item) {
return new RegExp(filterVal).test(item.label);
});
setDataSource(newDataSource);
}
else {
setDataSource(data);
}
}, 500);
};
var handleSearch = function (v) {
console.log('handleSearch');
clearTimeout(timer);
timer = setTimeout(function () {
loadData(v);
}, 500);
};
var handleChange = function (v) {
setValue(v);
};
var handleVisibleChange = function (open) {
if (open) {
loadData();
}
};
return (React.createElement(CnDemoPage, { title: "\u5B9E\u65F6\u641C\u7D22" },
React.createElement(CnDemoBlock, { padding: "0", title: "\u5B9E\u65F6\u641C\u7D22" },
React.createElement(CnSelect, { placeholder: "\u8BF7\u9009\u62E9", dataSource: ds, mode: "multiple", hasSearch: true, hasClear: true, filterLocal: false, useDetailValue: true, value: val, onSearch: handleSearch, onChange: handleChange, onVisibleChange: handleVisibleChange }))));
};
实时搜索.desc = 'filterLocal为false时，根据输入内容实时搜索';
export default { title: 'demo/CnSelect' };