@cainiaofe/cn-ui-m
Version:
64 lines (63 loc) • 3.27 kB
JavaScript
import { __assign } from "tslib";
import React, { useState } from 'react';
import { CnButton, CnCard, CnDemoPage, CnPopover } from "../../..";
var image = (React.createElement("img", { src: "https://gw.alipayobjects.com/zos/bmw-prod/ec7a239e-a880-4acd-8563-53047b1d7e84.svg", style: {
'--height': '36px',
'--width': '36px',
} }));
var flexStyle = {
display: 'flex',
justifyContent: 'flex-start',
alignItems: 'center',
flexDirection: 'column',
};
var imageStyle = {
marginRight: '12px',
};
var closeStyle = {
fontSize: '18px',
color: '#ffffff',
opacity: '0.6',
marginLeft: '8px',
cursor: 'pointer',
};
var SingleLine = function () {
var _a = useState(true), visible = _a[0], setVisible = _a[1];
return (React.createElement(CnPopover, { content: React.createElement("div", { style: flexStyle },
React.createElement("div", { style: imageStyle }, image),
React.createElement("div", null, "\u5355\u884C\u6587\u5B57\u63A8\u8350\u5173\u95ED\u6309\u94AE\u5C45\u4E2D"),
React.createElement("div", { style: closeStyle, onClick: function () {
setVisible(false);
} },
React.createElement("div", null))), placement: "bottom-start", mode: "dark", visible: visible },
React.createElement(CnButton, { onClick: function () {
setVisible(function (v) { return !v; });
} }, "\u70B9\u6211")));
};
var MultiLine = function () {
var _a = useState(true), visible = _a[0], setVisible = _a[1];
return (React.createElement(CnPopover, { content: React.createElement("div", { style: flexStyle },
React.createElement("div", { style: imageStyle }, image),
React.createElement("div", null,
"\u591A\u884C\u6587\u5B57\u63A8\u8350\u5173\u95ED\u6309\u94AE",
React.createElement("br", null),
"\u7AD6\u76F4\u65B9\u5411\u4E0A\u5C45\u4E2D"),
React.createElement("div", { style: __assign(__assign({}, closeStyle), { alignSelf: 'flex-start' }), onClick: function () {
setVisible(false);
} },
React.createElement("div", null))), placement: "bottom-start", mode: "dark", visible: visible },
React.createElement(CnButton, { onClick: function () {
setVisible(function (v) { return !v; });
} }, "\u70B9\u6211")));
};
export var 带关闭按钮 = function () {
return (React.createElement(CnDemoPage, { title: "\u5E26\u5173\u95ED\u6309\u94AE" },
React.createElement(CnCard, { title: "\u5E26\u5173\u95ED\u6309\u94AE" },
React.createElement("div", null, "\u5355\u884C\u6587\u5B57\u63A8\u8350\u5173\u95ED\u6309\u94AE\u5C45\u4E2D"),
React.createElement("div", { style: { paddingTop: 10, paddingBottom: 80 } },
React.createElement(SingleLine, null)),
React.createElement("div", null, "\u591A\u884C\u6587\u5B57\u63A8\u8350\u5173\u95ED\u6309\u94AE\u7AD6\u76F4\u65B9\u5411\u4E0A\u5C45\u4E2D"),
React.createElement("div", { style: { paddingTop: 10, paddingBottom: 80 } },
React.createElement(MultiLine, null)))));
};
export default { title: 'demo/CnPopover' };