@cainiaofe/cn-ui-m
Version:
48 lines (47 loc) • 2.35 kB
JavaScript
import { __awaiter, __generator, __spreadArray } from "tslib";
import * as React from 'react';
import { useState } from 'react';
import { CnCard, CnPullToRefresh, CnList, CnListItem, CnDemoDescription, CnDemoPage, } from "../../..";
function getNextData() {
var ret = [];
for (var i = 0; i < 18; i++) {
ret.push("List Item ".concat(i));
}
return ret;
}
var sleep = function (time) {
return new Promise(function (resolve) { return setTimeout(resolve, time); });
};
export var 内容区域存在多层嵌套 = function () {
var _a = useState(function () { return getNextData(); }), data = _a[0], setData = _a[1];
return (React.createElement(CnDemoPage, { title: "\u5185\u5BB9\u533A\u57DF\u5B58\u5728\u591A\u5C42\u5D4C\u5957" },
React.createElement(CnPullToRefresh, { onRefresh: function () { return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
switch (_a.label) {
case 0: return [4 /*yield*/, sleep(1000)];
case 1:
_a.sent();
setData(__spreadArray(__spreadArray([], getNextData(), true), data, true));
return [2 /*return*/];
}
});
}); } },
React.createElement("div", { style: {
height: '100vh',
display: 'flex',
flexDirection: 'column',
} },
React.createElement("div", { style: {
flex: 'none',
backgroundColor: '#f2f4f8',
padding: 12,
} },
React.createElement(CnCard, { subTitle: "\u5934\u90E8" },
React.createElement(CnDemoDescription, null, "\u5934\u90E8\u533A\u57DF\u4E0D\u4F1A\u6EDA\u52A8"))),
React.createElement("div", { style: {
flex: 'auto',
overflowY: 'scroll',
} },
React.createElement(CnList, { style: { minHeight: '100vh' } }, data.map(function (item, index) { return (React.createElement(CnListItem, { title: item, key: index })); })))))));
};
export default { title: 'demo/CnPullToRefresh' };