@cainiaofe/cn-ui-m
Version:
52 lines (51 loc) • 2.25 kB
JavaScript
import React, { useState } from 'react';
import { CnButton, CnCard, CnDemoPage, CnPicker } from "../../..";
var basicColumns = [
[
{ label: '周一', value: 'Mon' },
{ label: '周二', value: 'Tues' },
{ label: '周三', value: 'Wed' },
{ label: '周四', value: 'Thur' },
{ label: '周五', value: 'Fri' },
],
[
{ label: '上午', value: 'am' },
{ label: '下午', value: 'pm' },
],
];
// 基本
function BasicDemo() {
var _a = useState(false), visible = _a[0], setVisible = _a[1];
var _b = useState(['M']), value = _b[0], setValue = _b[1];
return (React.createElement(React.Fragment, null,
React.createElement(CnButton, { onClick: function () {
setVisible(true);
} }, "\u9009\u62E9"),
React.createElement(CnPicker, { columns: basicColumns, visible: visible, onClose: function () {
setVisible(false);
}, value: value, onConfirm: function (v) {
setValue(v);
} })));
}
// 渲染所选值
function RenderChildrenDemo() {
var _a = useState([]), value = _a[0], setValue = _a[1];
return (React.createElement(CnPicker, { columns: basicColumns, value: value, onConfirm: setValue, onSelect: function (val, extend) {
console.log('onSelect', val, extend.items);
} }, function (items, _a) {
var open = _a.open;
return (React.createElement("div", null,
React.createElement(CnButton, { onClick: open }, "\u9009\u62E9"),
items.every(function (item) { return item === null; })
? '未选择'
: items.map(function (item) { var _a; return (_a = item === null || item === void 0 ? void 0 : item.label) !== null && _a !== void 0 ? _a : '未选择'; }).join(' - ')));
}));
}
export var 基本 = function () {
return (React.createElement(CnDemoPage, { title: "\u57FA\u672C" },
React.createElement(CnCard, { title: "\u57FA\u672C" },
React.createElement(BasicDemo, null)),
React.createElement(CnCard, { title: "\u6E32\u67D3\u6240\u9009\u503C" },
React.createElement(RenderChildrenDemo, null))));
};
export default { title: 'demo/CnPicker' };