@cainiaofe/cn-ui-m
Version:
82 lines (81 loc) • 3.98 kB
JavaScript
import { __awaiter, __generator } from "tslib";
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' },
],
];
var sleep = function (time) {
return new Promise(function (resolve) { return setTimeout(resolve, time); });
};
function mockRequest(_a) {
var delay = _a.delay;
return __awaiter(this, void 0, void 0, function () {
return __generator(this, function (_b) {
switch (_b.label) {
case 0: return [4 /*yield*/, sleep(delay)];
case 1:
_b.sent();
return [2 /*return*/, basicColumns];
}
});
});
}
export var 自定义样式 = function () {
var _a = useState(false), visible = _a[0], setVisible = _a[1];
return (React.createElement(CnDemoPage, { title: "\u81EA\u5B9A\u4E49\u6837\u5F0F" },
React.createElement(CnCard, { title: "\u81EA\u5B9A\u4E49\u6837\u5F0F" },
React.createElement(CnButton, { onClick: function () {
setVisible(true);
} }, "\u9009\u62E9"),
React.createElement("span", null, "\u4F60\u53EF\u4EE5\u901A\u8FC7 CSS \u53D8\u91CF\u5BF9 Picker \u7684\u5B57\u53F7\u7B49\u8FDB\u884C\u81EA\u5B9A\u4E49\uFF0CCascadePicker \u548C DatePicker \u4E5F\u540C\u6837\u652F\u6301\u81EA\u5B9A\u4E49\u6837\u5F0F\u3002"),
React.createElement(CnPicker, { style: {
'--title-font-size': '13px',
'--header-button-font-size': '13px',
'--item-font-size': '13px',
'--item-height': '30px',
}, defaultValue: ['Wed', 'pm'], columns: basicColumns, visible: visible, onClose: function () {
setVisible(false);
} })),
React.createElement(CnCard, { title: "\u61D2\u52A0\u8F7D\u6570\u636E" },
React.createElement(LazyLoadColumnsDemo, null))));
};
function LazyLoadColumnsDemo() {
var _this = this;
var _a = useState(false), visible = _a[0], setVisible = _a[1];
var _b = useState([]), columns = _b[0], setColumns = _b[1];
var _c = useState(true), loading = _c[0], setLoading = _c[1];
var handleClick = function () { return __awaiter(_this, void 0, void 0, function () {
var data;
return __generator(this, function (_a) {
switch (_a.label) {
case 0:
setVisible(true);
if (!!columns.length) return [3 /*break*/, 2];
return [4 /*yield*/, mockRequest({ delay: 2000 })];
case 1:
data = _a.sent();
setColumns(data);
setLoading(false);
_a.label = 2;
case 2: return [2 /*return*/];
}
});
}); };
return (React.createElement(React.Fragment, null,
React.createElement(CnButton, { onClick: handleClick }, "\u61D2\u52A0\u8F7D\u6570\u636E"),
React.createElement("span", null, "\u4F60\u53EF\u4EE5\u5728 Picker \u663E\u793A\u65F6\u53D1\u8D77\u5F02\u6B65\u8BF7\u6C42\u83B7\u53D6\u6570\u636E\uFF0C\u9ED8\u8BA4\u63D0\u4F9B\u4E86\u8F6C\u5708\u52A0\u8F7D\u4E2D\u7684\u52A0\u8F7D\u6548\u679C\uFF0CCascadePicker \u548C DatePicker \u540C\u6837\u652F\u6301\uFF0C\u4F60\u4E5F\u53EF\u4EE5\u4F20\u5165 loadingContent \u81EA\u5B9A\u4E49 loading \u6837\u5F0F\u3002"),
React.createElement(CnPicker, { loading: loading, columns: columns, visible: visible, onClose: function () {
setVisible(false);
} })));
}
export default { title: 'demo/CnPicker' };