@cainiaofe/cn-ui-m
Version:
54 lines (53 loc) • 3.97 kB
JavaScript
import { __spreadArray } from "tslib";
import React, { useState } from 'react';
import { CnBadge, CnCheckbox, CnDemoBlock, CnDemoPage, CnIcon, CnList, CnListItem, CnSwitch, } from "../../..";
export var 基本 = function () {
var _a = useState(['b']), selectList = _a[0], setSelectedList = _a[1];
var handleClick = function (val) {
var tmpList = __spreadArray([], selectList, true);
var index = tmpList.findIndex(function (i) { return i === val; });
var ret;
if (index > -1) {
tmpList.splice(index, 1);
ret = tmpList;
}
else {
ret = __spreadArray(__spreadArray([], tmpList, true), [val], false);
}
setSelectedList(ret);
};
return (React.createElement(CnDemoPage, { title: "\u57FA\u672C" },
React.createElement(CnDemoBlock, { padding: "0", title: "\u5E38\u89C4" },
React.createElement(CnList, null,
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898" }),
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", subTitle: "\u526F\u6807\u9898" }),
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", subTitle: "\u526F\u6807\u9898", description: "\u4E09\u7EA7\u6807\u9898", extra: "\u8BF4\u660E" }))),
React.createElement(CnDemoBlock, { padding: "0", title: "\u9644\u52A0\u5143\u7D20" },
React.createElement(CnList, null,
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", extra: React.createElement(CnBadge, { shape: "dot" }), arrow: "right" }),
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", extra: '未连接', arrow: "right" }),
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", extra: React.createElement(CnSwitch, { defaultChecked: true }) }))),
React.createElement(CnDemoBlock, { padding: "0", title: "\u7BAD\u5934\u548C\u56FE\u6807" },
React.createElement(CnList, null,
React.createElement(CnListItem, { title: "\u4E0A\u7BAD\u5934", arrow: "up" }),
React.createElement(CnListItem, { title: "\u53F3\u7BAD\u5934", arrow: "right" }),
React.createElement(CnListItem, { title: "\u4E0B\u7BAD\u5934", arrow: "down" }),
React.createElement(CnListItem, { title: "\u52A0\u8F7D\u4E2D", arrow: "loading" }))),
React.createElement(CnDemoBlock, { padding: "0", title: "\u81EA\u5B9A\u4E49\u56FE\u6807" },
React.createElement(CnList, null,
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", extra: React.createElement(CnIcon, { type: "complete-r" }), style: { color: '#14cccc' } }),
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", extra: React.createElement(CnIcon, { type: "error-r" }), style: { color: '#ec3e3e' } }),
React.createElement(CnListItem, { title: "\u4E3B\u6807\u9898", extra: React.createElement(CnIcon, { type: "add-r" }), style: { color: '#209bfa' } }))),
React.createElement(CnDemoBlock, { padding: "0", title: "\u591A\u9009\u5217\u8868" },
React.createElement(CnList, null,
React.createElement(CnListItem, { media: React.createElement(CnCheckbox, { checked: selectList.indexOf('a') > -1 }), title: "Apple", onClick: function () {
handleClick('a');
} }),
React.createElement(CnListItem, { media: React.createElement(CnCheckbox, { checked: selectList.indexOf('b') > -1 }), title: "Banana", onClick: function () {
handleClick('b');
} }),
React.createElement(CnListItem, { media: React.createElement(CnCheckbox, { checked: selectList.indexOf('c') > -1 }), title: "Cherry", onClick: function () {
handleClick('c');
} })))));
};
export default { title: 'demo/CnList' };