@cainiaofe/cn-ui-m
Version:
57 lines (56 loc) • 2.6 kB
JavaScript
import { __assign } from "tslib";
import React, { useState } from 'react';
import { CnButton, CnCard, CnCheckboxGroup, CnDemoPage, CnDrawer, CnRadioGroup, CnBox, } from "../../..";
export var 基本 = function () {
var _a = useState(false), visible = _a[0], setVisible = _a[1];
var _b = useState('bottom'), placement = _b[0], setPlacement = _b[1];
var _c = useState(false), showTitle = _c[0], setShowTitle = _c[1];
var _d = useState(['mask']), closeMode = _d[0], setCloseMode = _d[1];
var open = function (p) {
setPlacement(p);
setVisible(true);
};
var close = function () {
setVisible(false);
};
var sizeProps = {
height: '',
width: '',
};
if (['top', 'bottom'].indexOf(placement) !== -1) {
sizeProps.height = '5rem';
}
else {
sizeProps.width = '2rem';
}
return (React.createElement(CnDemoPage, { title: "\u57FA\u672C" },
React.createElement(CnCard, null,
React.createElement(CnBox, { spacing: 12 },
React.createElement("div", null, "Title"),
React.createElement(CnRadioGroup, { direction: "hoz", value: showTitle, dataSource: [
{
label: 'yes',
value: true,
},
{
label: 'no',
value: false,
},
], onChange: function (v) {
setShowTitle(v);
} }),
React.createElement("div", null, "close"),
React.createElement(CnCheckboxGroup, { direction: "hoz", value: closeMode, dataSource: ['close', 'mask'], onChange: function (v) {
setCloseMode(v);
} }),
React.createElement(CnButton, { type: "primary", className: "btn", onClick: function () { return open('bottom'); } }, "Open Drawer"))),
React.createElement(CnDrawer, __assign({ title: showTitle ? 'Title' : '', closeMode: closeMode, placement: placement }, sizeProps, { visible: visible, containerClassName: "drawer-container", onClose: function (reason) {
console.log('closed by ', reason);
close();
}, onVisibleChange: function (visi) {
console.log('visible change', visi);
}, onMaskClick: function () {
console.log('mask click');
} }), "\u666E\u901A\u7684\u62BD\u5C49")));
};
export default { title: 'demo/CnDrawer' };