storybook-addon-customize-antd-theme
Version:
a Storybook addon help you visually customize an ant design theme
1,426 lines (1,312 loc) • 56.6 kB
JavaScript
function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
import React, { useState } from 'react';
import TrieSearch from 'trie-search';
import { Row, Col, Divider, Radio, Popover, Button, Checkbox, Descriptions, Dropdown, Menu, Empty, Layout, Collapse, Form, Input, InputNumber, Mentions, Select, Cascader, Anchor, Tooltip, Modal, Progress, Switch, Space, Spin, Table, Tag, DatePicker, TimePicker, Calendar, Carousel, Badge, Avatar, Rate, Card, Comment, Tabs, BackTop, Pagination, PageHeader, Breadcrumb, Slider, Tree, Skeleton, Transfer, Alert, List, Statistic, Drawer, Timeline, Typography, Steps, notification, Result, Image, Affix } from 'antd';
import { DownloadOutlined, DownOutlined, UserOutlined, MailOutlined, AppstoreOutlined, ClockCircleOutlined, EditOutlined, EllipsisOutlined, SettingOutlined, DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
var SubMenu = Menu.SubMenu;
var Header = Layout.Header,
Footer = Layout.Footer,
Sider = Layout.Sider,
Content = Layout.Content;
var Panel = Collapse.Panel;
var Option = Mentions.Option;
var SOption = Select.Option;
var Link = Anchor.Link;
var Meta = Card.Meta;
var TabPane = Tabs.TabPane;
var Title = Typography.Title,
Paragraph = Typography.Paragraph,
Text = Typography.Text;
var Step = Steps.Step;
var Search = Input.Search;
function PopoverDemo() {
var content = /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("p", null, "Content"), /*#__PURE__*/React.createElement("p", null, "Content"));
return /*#__PURE__*/React.createElement(Popover, {
content: content,
title: "Title"
}, /*#__PURE__*/React.createElement(Button, {
type: "primary"
}, "Hover me"));
}
function LinkDemo() {
return /*#__PURE__*/React.createElement(Button, {
type: "link"
}, "Link");
}
function ButtonsDemo() {
var _useState = useState('large'),
_useState2 = _slicedToArray(_useState, 2),
size = _useState2[0],
setSize = _useState2[1];
var handleSizeChange = function handleSizeChange(e) {
setSize(e.target.value);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radio.Group, {
value: size,
onChange: handleSizeChange
}, /*#__PURE__*/React.createElement(Radio.Button, {
value: "large"
}, "Large"), /*#__PURE__*/React.createElement(Radio.Button, {
value: "default"
}, "Default"), /*#__PURE__*/React.createElement(Radio.Button, {
value: "small"
}, "Small")), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
type: "primary",
size: size
}, "Primary"), /*#__PURE__*/React.createElement(Button, {
size: size
}, "Default"), /*#__PURE__*/React.createElement(Button, {
type: "dashed",
size: size
}, "Dashed"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
type: "link",
size: size
}, "Link"), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
type: "primary",
icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
size: size
}), /*#__PURE__*/React.createElement(Button, {
type: "primary",
shape: "circle",
icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
size: size
}), /*#__PURE__*/React.createElement(Button, {
type: "primary",
shape: "round",
icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
size: size
}), /*#__PURE__*/React.createElement(Button, {
type: "primary",
shape: "round",
icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
size: size
}, "Download"), /*#__PURE__*/React.createElement(Button, {
type: "primary",
icon: /*#__PURE__*/React.createElement(DownloadOutlined, null),
size: size
}, "Download"));
}
function CheckboxDemo() {
return /*#__PURE__*/React.createElement(Checkbox.Group, {
style: {
width: '100%'
}
}, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "A"
}, "A")), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "B"
}, "B")), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "C"
}, "C")), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "D"
}, "D")), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Checkbox, {
value: "E"
}, "E"))));
}
function DescriptionsDemo() {
return /*#__PURE__*/React.createElement(Descriptions, {
title: "User Info"
}, /*#__PURE__*/React.createElement(Descriptions.Item, {
label: "UserName"
}, "Zhou Maomao"), /*#__PURE__*/React.createElement(Descriptions.Item, {
label: "Telephone"
}, "1810000000"), /*#__PURE__*/React.createElement(Descriptions.Item, {
label: "Live"
}, "Hangzhou, Zhejiang"), /*#__PURE__*/React.createElement(Descriptions.Item, {
label: "Remark"
}, "empty"), /*#__PURE__*/React.createElement(Descriptions.Item, {
label: "Address"
}, "No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China"));
}
function DropdownDemo() {
var menu = /*#__PURE__*/React.createElement(Menu, null, /*#__PURE__*/React.createElement(Menu.ItemGroup, {
title: "Group title"
}, /*#__PURE__*/React.createElement(Menu.Item, null, "1st menu item"), /*#__PURE__*/React.createElement(Menu.Item, null, "2nd menu item")), /*#__PURE__*/React.createElement(SubMenu, {
title: "sub menu"
}, /*#__PURE__*/React.createElement(Menu.Item, null, "3rd menu item"), /*#__PURE__*/React.createElement(Menu.Item, null, "4th menu item")), /*#__PURE__*/React.createElement(SubMenu, {
title: "disabled sub menu",
disabled: true
}, /*#__PURE__*/React.createElement(Menu.Item, null, "5d menu item"), /*#__PURE__*/React.createElement(Menu.Item, null, "6th menu item")));
return /*#__PURE__*/React.createElement(Dropdown, {
overlay: menu
}, /*#__PURE__*/React.createElement("a", {
className: "ant-dropdown-link",
onClick: function onClick(e) {
return e.preventDefault();
}
}, "Cascading menu ", /*#__PURE__*/React.createElement(DownOutlined, null)));
}
function RadioDemo() {
var plainOptions = ['Apple', 'Pear', 'Orange'];
var options = [{
label: 'Apple',
value: 'Apple'
}, {
label: 'Pear',
value: 'Pear'
}, {
label: 'Orange',
value: 'Orange'
}];
var optionsWithDisabled = [{
label: 'Apple',
value: 'Apple'
}, {
label: 'Pear',
value: 'Pear'
}, {
label: 'Orange',
value: 'Orange',
disabled: true
}];
var _useState3 = useState({
value1: 'Apple',
value2: 'Apple',
value3: 'Apple',
value4: 'Apple'
}),
_useState4 = _slicedToArray(_useState3, 2),
state = _useState4[0],
setState = _useState4[1];
var onChange1 = function onChange1(e) {
console.log('radio1 checked', e.target.value);
setState(_objectSpread(_objectSpread({}, state), {}, {
value1: e.target.value
}));
};
var onChange2 = function onChange2(e) {
console.log('radio2 checked', e.target.value);
setState(_objectSpread(_objectSpread({}, state), {}, {
value2: e.target.value
}));
};
var onChange3 = function onChange3(e) {
console.log('radio3 checked', e.target.value);
setState(_objectSpread(_objectSpread({}, state), {}, {
value3: e.target.value
}));
};
var onChange4 = function onChange4(e) {
console.log('radio4 checked', e.target.value);
setState(_objectSpread(_objectSpread({}, state), {}, {
value4: e.target.value
}));
};
var value1 = state.value1,
value2 = state.value2,
value3 = state.value3,
value4 = state.value4;
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Radio.Group, {
options: plainOptions,
onChange: onChange1,
value: value1
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Radio.Group, {
options: optionsWithDisabled,
onChange: onChange2,
value: value2
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Radio.Group, {
options: options,
onChange: onChange3,
value: value3,
optionType: "button"
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Radio.Group, {
options: optionsWithDisabled,
onChange: onChange4,
value: value4,
optionType: "button",
buttonStyle: "solid"
}));
}
function LayoutDemo() {
return /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Sider, null, "Sider"), /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Header, null, "Header"), /*#__PURE__*/React.createElement(Content, null, "Content"), /*#__PURE__*/React.createElement(Footer, null, "Footer")));
}
function CollapseDemo() {
var text = "\n A dog is a type of domesticated animal.\n Known for its loyalty and faithfulness,\n it can be found as a welcome guest in many households across the world.\n";
return /*#__PURE__*/React.createElement(Collapse, {
defaultActiveKey: ['1']
}, /*#__PURE__*/React.createElement(Panel, {
header: "This is panel header 1",
key: "1"
}, /*#__PURE__*/React.createElement("p", null, text)), /*#__PURE__*/React.createElement(Panel, {
header: "This is panel header 2",
key: "2"
}, /*#__PURE__*/React.createElement("p", null, text)), /*#__PURE__*/React.createElement(Panel, {
header: "This is panel header 3",
key: "3"
}, /*#__PURE__*/React.createElement("p", null, text)));
}
function FormDemo() {
var _Form$useForm = Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var _Form$useForm3 = Form.useForm(),
_Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
form2 = _Form$useForm4[0];
var _Form$useForm5 = Form.useForm(),
_Form$useForm6 = _slicedToArray(_Form$useForm5, 1),
form3 = _Form$useForm6[0];
return /*#__PURE__*/React.createElement(Row, {
gutter: [16, 16]
}, /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form, {
labelCol: {
span: 4
},
wrapperCol: {
span: 14
},
layout: "horizontal",
form: form
}, /*#__PURE__*/React.createElement(Form.Item, {
label: "Field A"
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/React.createElement(Form.Item, {
label: "Field B"
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/React.createElement(Form.Item, {
wrapperCol: {
span: 14,
offset: 4
}
}, /*#__PURE__*/React.createElement(Button, {
type: "primary"
}, "Submit")))), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form, {
layout: "vertical",
form: form2
}, /*#__PURE__*/React.createElement(Form.Item, {
label: "Field A"
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/React.createElement(Form.Item, {
label: "Field B"
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
type: "primary"
}, "Submit")))), /*#__PURE__*/React.createElement(Col, {
span: 8
}, /*#__PURE__*/React.createElement(Form, {
layout: "inline",
form: form3
}, /*#__PURE__*/React.createElement(Form.Item, {
label: "Field A"
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/React.createElement(Form.Item, {
label: "Field B"
}, /*#__PURE__*/React.createElement(Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/React.createElement(Form.Item, null, /*#__PURE__*/React.createElement(Button, {
type: "primary"
}, "Submit")))));
}
function InputDemo() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
size: "large",
placeholder: "large size",
prefix: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
placeholder: "default size",
prefix: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Input, {
size: "small",
placeholder: "small size",
prefix: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(InputNumber, {
min: 1,
max: 10,
defaultValue: 3
}));
}
function MentionsDemo() {
return /*#__PURE__*/React.createElement(Mentions, {
style: {
width: '100%'
},
defaultValue: "@afc163"
}, /*#__PURE__*/React.createElement(Option, {
value: "afc163"
}, "afc163"), /*#__PURE__*/React.createElement(Option, {
value: "zombieJ"
}, "zombieJ"), /*#__PURE__*/React.createElement(Option, {
value: "yesmeck"
}, "yesmeck"));
}
function SelectDemo() {
var children = [];
for (var i = 10; i < 36; i++) {
children.push( /*#__PURE__*/React.createElement(SOption, {
key: i.toString(36) + i,
value: i.toString(36) + i
}, i.toString(36) + i));
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Select, {
defaultValue: "lucy",
style: {
width: 120
},
allowClear: true
}, /*#__PURE__*/React.createElement(SOption, {
value: "jack"
}, "Jack"), /*#__PURE__*/React.createElement(SOption, {
value: "lucy"
}, "Lucy"), /*#__PURE__*/React.createElement(SOption, {
value: "disabled",
disabled: true
}, "Disabled"), /*#__PURE__*/React.createElement(SOption, {
value: "Yiminghe"
}, "yiminghe")), /*#__PURE__*/React.createElement(Select, {
defaultValue: "lucy",
style: {
width: 120
},
disabled: true
}, /*#__PURE__*/React.createElement(SOption, {
value: "lucy"
}, "Lucy")), /*#__PURE__*/React.createElement(Select, {
mode: "multiple",
allowClear: true,
style: {
width: '100%'
},
placeholder: "Please select",
defaultValue: ['a10', 'c12']
}, children));
}
function CascaderDemo() {
var options = [{
value: 'zhejiang',
label: 'Zhejiang',
children: [{
value: 'hangzhou',
label: 'Hangzhou',
children: [{
value: 'xihu',
label: 'West Lake'
}]
}]
}, {
value: 'jiangsu',
label: 'Jiangsu',
children: [{
value: 'nanjing',
label: 'Nanjing',
children: [{
value: 'zhonghuamen',
label: 'Zhong Hua Men'
}]
}]
}];
return /*#__PURE__*/React.createElement(Cascader, {
options: options,
placeholder: "Please select"
});
}
function AnchorDemo() {
return /*#__PURE__*/React.createElement(Anchor, {
affix: false
}, /*#__PURE__*/React.createElement(Link, {
href: "#",
title: "Basic demo"
}), /*#__PURE__*/React.createElement(Link, {
href: "#",
title: "Static demo"
}), /*#__PURE__*/React.createElement(Link, {
href: "#",
title: "API"
}, /*#__PURE__*/React.createElement(Link, {
href: "#",
title: "Anchor Props"
}), /*#__PURE__*/React.createElement(Link, {
href: "#",
title: "Link Props"
})));
}
function TooltipDemo() {
return /*#__PURE__*/React.createElement(Tooltip, {
title: "prompt text"
}, /*#__PURE__*/React.createElement("span", null, "Tooltip will show on mouse enter."));
}
function ModalDemo() {
var _useState5 = useState(false),
_useState6 = _slicedToArray(_useState5, 2),
isModalVisible = _useState6[0],
setIsModalVisible = _useState6[1];
var showModal = function showModal() {
setIsModalVisible(true);
};
var handleOk = function handleOk() {
setIsModalVisible(false);
};
var handleCancel = function handleCancel() {
setIsModalVisible(false);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: showModal
}, "Open Modal"), /*#__PURE__*/React.createElement(Modal, {
title: "Basic Modal",
visible: isModalVisible,
onOk: handleOk,
onCancel: handleCancel
}, /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents...")));
}
function ProgressDemo() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Progress, {
percent: 30
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
percent: 50,
status: "active"
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
percent: 70,
status: "exception"
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
percent: 100
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
percent: 50,
showInfo: false
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
type: "circle",
percent: 75
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
type: "circle",
percent: 70,
status: "exception"
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
type: "circle",
percent: 100
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
percent: 50,
steps: 3
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
percent: 30,
steps: 5
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Progress, {
percent: 100,
steps: 5,
size: "small",
strokeColor: "#52c41a"
}));
}
function MenuDemo() {
var _useState7 = useState({
theme: 'dark',
current: '1'
}),
_useState8 = _slicedToArray(_useState7, 2),
state = _useState8[0],
setState = _useState8[1];
var changeTheme = function changeTheme(value) {
setState(_objectSpread(_objectSpread({}, state), {}, {
theme: value ? 'dark' : 'light'
}));
};
var handleClick = function handleClick(e) {
console.log('click ', e);
setState(_objectSpread(_objectSpread({}, state), {}, {
current: e.key
}));
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, {
checked: state.theme === 'dark',
onChange: changeTheme,
checkedChildren: "Dark",
unCheckedChildren: "Light"
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Menu, {
theme: state.theme,
onClick: handleClick,
style: {
width: 256
},
defaultOpenKeys: ['sub1'],
selectedKeys: [state.current],
mode: "inline"
}, /*#__PURE__*/React.createElement(SubMenu, {
key: "sub1",
icon: /*#__PURE__*/React.createElement(MailOutlined, null),
title: "Navigation One"
}, /*#__PURE__*/React.createElement(Menu.Item, {
key: "1"
}, "Option 1"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "2"
}, "Option 2"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "3"
}, "Option 3"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "4"
}, "Option 4")), /*#__PURE__*/React.createElement(SubMenu, {
key: "sub2",
icon: /*#__PURE__*/React.createElement(AppstoreOutlined, null),
title: "Navigation Two"
}, /*#__PURE__*/React.createElement(Menu.Item, {
key: "5"
}, "Option 5"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "6"
}, "Option 6"), /*#__PURE__*/React.createElement(SubMenu, {
key: "sub3",
title: "Submenu"
}, /*#__PURE__*/React.createElement(Menu.Item, {
key: "7"
}, "Option 7"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "8"
}, "Option 8"))), /*#__PURE__*/React.createElement(SubMenu, {
key: "sub4",
icon: /*#__PURE__*/React.createElement(SettingOutlined, null),
title: "Navigation Three"
}, /*#__PURE__*/React.createElement(Menu.Item, {
key: "9"
}, "Option 9"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "10"
}, "Option 10"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "11"
}, "Option 11"), /*#__PURE__*/React.createElement(Menu.Item, {
key: "12"
}, "Option 12"))));
}
function SpinDemo() {
return /*#__PURE__*/React.createElement(Space, {
size: "middle"
}, /*#__PURE__*/React.createElement(Spin, {
size: "small"
}), /*#__PURE__*/React.createElement(Spin, null), /*#__PURE__*/React.createElement(Spin, {
size: "large"
}));
}
function TableDemo() {
var columns = [{
title: 'Name',
dataIndex: 'name'
}, {
title: 'Age',
dataIndex: 'age'
}, {
title: 'Address',
dataIndex: 'address'
}];
var data = [];
for (var i = 0; i < 46; i++) {
data.push({
key: i,
name: "Edward King ".concat(i),
age: 32,
address: "London, Park Lane no. ".concat(i)
});
}
var _useState9 = useState({
selectedRowKeys: [],
// Check here to configure the default column
loading: false
}),
_useState10 = _slicedToArray(_useState9, 2),
state = _useState10[0],
setState = _useState10[1];
var start = function start() {
setState(_objectSpread(_objectSpread({}, state), {}, {
loading: true
})); // ajax request after empty completing
setTimeout(function () {
setState(_objectSpread(_objectSpread({}, state), {}, {
selectedRowKeys: [],
loading: false
}));
}, 1000);
};
var onSelectChange = function onSelectChange(selectedRowKeys) {
console.log('selectedRowKeys changed: ', selectedRowKeys);
setState(_objectSpread(_objectSpread({}, state), {}, {
selectedRowKeys: selectedRowKeys
}));
};
var loading = state.loading,
selectedRowKeys = state.selectedRowKeys;
var rowSelection = {
selectedRowKeys: selectedRowKeys,
onChange: onSelectChange
};
var hasSelected = selectedRowKeys.length > 0;
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
style: {
marginBottom: 16
}
}, /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: start,
disabled: !hasSelected,
loading: loading
}, "Reload"), /*#__PURE__*/React.createElement("span", {
style: {
marginLeft: 8
}
}, hasSelected ? "Selected ".concat(selectedRowKeys.length, " items") : '')), /*#__PURE__*/React.createElement(Table, {
rowSelection: rowSelection,
columns: columns,
dataSource: data
}));
}
function TagDemo() {
function preventDefault(e) {
e.preventDefault();
console.log('Clicked! But prevent default.');
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Tag, null, "Tag 1"), /*#__PURE__*/React.createElement(Tag, null, /*#__PURE__*/React.createElement("a", {
href: "https://github.com/ant-design/ant-design/issues/1862"
}, "Link")), /*#__PURE__*/React.createElement(Tag, {
closable: true
}, "Tag 2"), /*#__PURE__*/React.createElement(Tag, {
closable: true,
onClose: preventDefault
}, "Prevent Default"));
}
function CarouselDemo() {
var contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79'
};
return /*#__PURE__*/React.createElement(Carousel, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
style: contentStyle
}, "1")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
style: contentStyle
}, "2")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
style: contentStyle
}, "3")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("h3", {
style: contentStyle
}, "4")));
}
function PickerDemo() {
return /*#__PURE__*/React.createElement(Space, {
direction: "vertical"
}, /*#__PURE__*/React.createElement(DatePicker, null), /*#__PURE__*/React.createElement(TimePicker, null));
}
function CalendarDemo() {
return /*#__PURE__*/React.createElement(Calendar, null);
}
function BadgeDemo() {
return /*#__PURE__*/React.createElement(Space, {
size: "middle"
}, /*#__PURE__*/React.createElement(Badge, {
count: 5
}, /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
size: "large"
})), /*#__PURE__*/React.createElement(Badge, {
count: 0,
showZero: true
}, /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
size: "large"
})), /*#__PURE__*/React.createElement(Badge, {
count: /*#__PURE__*/React.createElement(ClockCircleOutlined, {
style: {
color: '#f5222d'
}
})
}, /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
size: "large"
})), /*#__PURE__*/React.createElement(Badge, {
dot: true
}, /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
size: "large"
})));
}
function RateDemo() {
return /*#__PURE__*/React.createElement(Rate, {
allowHalf: true,
defaultValue: 2.5
});
}
function CardDemo() {
return /*#__PURE__*/React.createElement(Card, {
style: {
width: 300
},
cover: /*#__PURE__*/React.createElement("img", {
alt: "example",
src: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
}),
actions: [/*#__PURE__*/React.createElement(SettingOutlined, {
key: "setting"
}), /*#__PURE__*/React.createElement(EditOutlined, {
key: "edit"
}), /*#__PURE__*/React.createElement(EllipsisOutlined, {
key: "ellipsis"
})]
}, /*#__PURE__*/React.createElement(Meta, {
avatar: /*#__PURE__*/React.createElement(Avatar, {
src: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
}),
title: "Card title",
description: "This is the description"
}));
}
function CommentDemo() {
var _useState11 = useState(0),
_useState12 = _slicedToArray(_useState11, 2),
likes = _useState12[0],
setLikes = _useState12[1];
var _useState13 = useState(0),
_useState14 = _slicedToArray(_useState13, 2),
dislikes = _useState14[0],
setDislikes = _useState14[1];
var _useState15 = useState(null),
_useState16 = _slicedToArray(_useState15, 2),
action = _useState16[0],
setAction = _useState16[1];
var like = function like() {
setLikes(1);
setDislikes(0);
setAction('liked');
};
var dislike = function dislike() {
setLikes(0);
setDislikes(1);
setAction('disliked');
};
var actions = [/*#__PURE__*/React.createElement(Tooltip, {
key: "comment-basic-like",
title: "Like"
}, /*#__PURE__*/React.createElement("span", {
onClick: like
}, /*#__PURE__*/React.createElement(action === 'liked' ? LikeFilled : LikeOutlined), /*#__PURE__*/React.createElement("span", {
className: "comment-action"
}, likes))), /*#__PURE__*/React.createElement(Tooltip, {
key: "comment-basic-dislike",
title: "Dislike"
}, /*#__PURE__*/React.createElement("span", {
onClick: dislike
}, /*#__PURE__*/React.createElement(action === 'disliked' ? DislikeFilled : DislikeOutlined), /*#__PURE__*/React.createElement("span", {
className: "comment-action"
}, dislikes))), /*#__PURE__*/React.createElement("span", {
key: "comment-basic-reply-to"
}, "Reply to")];
return /*#__PURE__*/React.createElement(Comment, {
actions: actions,
author: /*#__PURE__*/React.createElement("a", null, "Han Solo"),
avatar: /*#__PURE__*/React.createElement(Avatar, {
src: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
alt: "Han Solo"
}),
content: /*#__PURE__*/React.createElement("p", null, "We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently."),
datetime: "1\u5929\u524D"
});
}
function TabsDemo() {
return /*#__PURE__*/React.createElement(Space, {
direction: "vertical",
size: "large"
}, /*#__PURE__*/React.createElement(Tabs, {
defaultActiveKey: "1"
}, /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 1",
key: "1"
}, "Content of Tab Pane 1"), /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 2",
key: "2"
}, "Content of Tab Pane 2"), /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 3",
key: "3"
}, "Content of Tab Pane 3")), /*#__PURE__*/React.createElement(Tabs, {
defaultActiveKey: "1",
tabPosition: "left"
}, /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 1",
key: "1"
}, "Content of Tab Pane 1"), /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 2",
key: "2"
}, "Content of Tab Pane 2"), /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 3",
key: "3"
}, "Content of Tab Pane 3")), /*#__PURE__*/React.createElement(Tabs, {
type: "card"
}, /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 1",
key: "1"
}, "Content of Tab Pane 1"), /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 2",
key: "2"
}, "Content of Tab Pane 2"), /*#__PURE__*/React.createElement(TabPane, {
tab: "Tab 3",
key: "3"
}, "Content of Tab Pane 3")));
}
function BackTopDemo() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(BackTop, null), "Scroll down to see the bottom-right", /*#__PURE__*/React.createElement("strong", {
className: "site-back-top-basic"
}, " gray "), "button.");
}
function AvatarDemo() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
size: 64,
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement(Avatar, {
size: "large",
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement(Avatar, {
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement(Avatar, {
size: "small",
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
})), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
size: 64,
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
size: "large",
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
}), /*#__PURE__*/React.createElement(Avatar, {
shape: "square",
size: "small",
icon: /*#__PURE__*/React.createElement(UserOutlined, null)
})));
}
function SwitchDemo() {
var _React$useState = React.useState(true),
_React$useState2 = _slicedToArray(_React$useState, 2),
disabled = _React$useState2[0],
setDisabled = _React$useState2[1];
var toggle = function toggle() {
setDisabled(!disabled);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switch, {
defaultChecked: true
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Switch, {
size: "small",
defaultChecked: true
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Switch, {
disabled: disabled,
defaultChecked: true
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: toggle
}, "Toggle disabled"));
}
function PaginationDemo() {
function showTotal(total) {
return "Total ".concat(total, " items");
}
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Pagination, {
showQuickJumper: true,
defaultCurrent: 2,
total: 500
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Pagination, {
showQuickJumper: true,
defaultCurrent: 2,
total: 500,
disabled: true
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Pagination, {
size: "small",
total: 50
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Pagination, {
size: "small",
total: 50,
showSizeChanger: true,
showQuickJumper: true
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Pagination, {
size: "small",
total: 50,
showTotal: showTotal
}), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement(Pagination, {
size: "small",
total: 50,
disabled: true,
showTotal: showTotal,
showSizeChanger: true,
showQuickJumper: true
}));
}
function PageHeaderDemo() {
var routes = [{
path: 'index',
breadcrumbName: 'First-level Menu'
}, {
path: 'first',
breadcrumbName: 'Second-level Menu'
}, {
path: 'second',
breadcrumbName: 'Third-level Menu'
}];
return /*#__PURE__*/React.createElement(Space, {
direction: "vertical"
}, /*#__PURE__*/React.createElement(PageHeader, {
className: "site-page-header",
onBack: function onBack() {
return null;
},
title: "Title",
subTitle: "This is a subtitle"
}), /*#__PURE__*/React.createElement(PageHeader, {
className: "site-page-header",
title: "Title",
breadcrumb: {
routes: routes
},
subTitle: "This is a subtitle"
}));
}
function BreadcrumbDemo() {
return /*#__PURE__*/React.createElement(Breadcrumb, null, /*#__PURE__*/React.createElement(Breadcrumb.Item, null, "Home"), /*#__PURE__*/React.createElement(Breadcrumb.Item, null, /*#__PURE__*/React.createElement("a", {
href: ""
}, "Application Center")), /*#__PURE__*/React.createElement(Breadcrumb.Item, null, /*#__PURE__*/React.createElement("a", {
href: ""
}, "Application List")), /*#__PURE__*/React.createElement(Breadcrumb.Item, null, "An Application"));
}
function SliderDemo() {
var _useState17 = useState(false),
_useState18 = _slicedToArray(_useState17, 2),
disabled = _useState18[0],
setState = _useState18[1];
var handleDisabledChange = function handleDisabledChange(disabled) {
setState(disabled);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Slider, {
defaultValue: 30,
disabled: disabled
}), /*#__PURE__*/React.createElement(Slider, {
range: true,
defaultValue: [20, 50],
disabled: disabled
}), "Disabled: ", /*#__PURE__*/React.createElement(Switch, {
size: "small",
checked: disabled,
onChange: handleDisabledChange
}));
}
var treeData = [{
title: 'parent 1',
key: '0-0',
children: [{
title: 'parent 1-0',
key: '0-0-0',
disabled: true,
children: [{
title: 'leaf',
key: '0-0-0-0',
disableCheckbox: true
}, {
title: 'leaf',
key: '0-0-0-1'
}]
}, {
title: 'parent 1-1',
key: '0-0-1',
children: [{
title: /*#__PURE__*/React.createElement("span", {
style: {
color: '#1890ff'
}
}, "sss"),
key: '0-0-1-0'
}]
}]
}];
function TreeDemo() {
return /*#__PURE__*/React.createElement(Tree, {
checkable: true,
defaultExpandedKeys: ['0-0-0', '0-0-1'],
defaultSelectedKeys: ['0-0-0', '0-0-1'],
defaultCheckedKeys: ['0-0-0', '0-0-1'],
treeData: treeData
});
}
function SkeletonDemo() {
return /*#__PURE__*/React.createElement(Skeleton, {
avatar: true,
paragraph: {
rows: 4
}
});
}
function TransferDemo() {
var mockData = [];
for (var i = 0; i < 20; i++) {
mockData.push({
key: i.toString(),
title: "content".concat(i + 1),
description: "description of content".concat(i + 1)
});
}
var initialTargetKeys = mockData.filter(function (item) {
return +item.key > 10;
}).map(function (item) {
return item.key;
});
var _useState19 = useState(initialTargetKeys),
_useState20 = _slicedToArray(_useState19, 2),
targetKeys = _useState20[0],
setTargetKeys = _useState20[1];
var _useState21 = useState([]),
_useState22 = _slicedToArray(_useState21, 2),
selectedKeys = _useState22[0],
setSelectedKeys = _useState22[1];
var onChange = function onChange(nextTargetKeys, direction, moveKeys) {
console.log('targetKeys:', nextTargetKeys);
console.log('direction:', direction);
console.log('moveKeys:', moveKeys);
setTargetKeys(nextTargetKeys);
};
var onSelectChange = function onSelectChange(sourceSelectedKeys, targetSelectedKeys) {
console.log('sourceSelectedKeys:', sourceSelectedKeys);
console.log('targetSelectedKeys:', targetSelectedKeys);
setSelectedKeys([].concat(_toConsumableArray(sourceSelectedKeys), _toConsumableArray(targetSelectedKeys)));
};
var onScroll = function onScroll(direction, e) {
console.log('direction:', direction);
console.log('target:', e.target);
};
return /*#__PURE__*/React.createElement(Transfer, {
dataSource: mockData,
titles: ['Source', 'Target'],
targetKeys: targetKeys,
selectedKeys: selectedKeys,
onChange: onChange,
onSelectChange: onSelectChange,
onScroll: onScroll,
render: function render(item) {
return item.title;
}
});
}
function AlertDemo() {
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Alert, {
message: "Success Tips",
type: "success",
showIcon: true
}), /*#__PURE__*/React.createElement(Alert, {
message: "Informational Notes",
type: "info",
showIcon: true
}), /*#__PURE__*/React.createElement(Alert, {
message: "Warning",
type: "warning",
showIcon: true,
closable: true
}), /*#__PURE__*/React.createElement(Alert, {
message: "Error",
type: "error",
showIcon: true
}), /*#__PURE__*/React.createElement(Alert, {
message: "Success Tips",
description: "Detailed description and advice about successful copywriting.",
type: "success",
showIcon: true
}), /*#__PURE__*/React.createElement(Alert, {
message: "Informational Notes",
description: "Additional description and information about copywriting.",
type: "info",
showIcon: true
}), /*#__PURE__*/React.createElement(Alert, {
message: "Warning",
description: "This is a warning notice about copywriting.",
type: "warning",
showIcon: true,
closable: true
}), /*#__PURE__*/React.createElement(Alert, {
message: "Error",
description: "This is an error message about copywriting.",
type: "error",
showIcon: true
}));
}
function ListDemo() {
var data = [{
title: 'Ant Design Title 1'
}, {
title: 'Ant Design Title 2'
}, {
title: 'Ant Design Title 3'
}, {
title: 'Ant Design Title 4'
}];
return /*#__PURE__*/React.createElement(List, {
itemLayout: "horizontal",
dataSource: data,
renderItem: function renderItem(item) {
return /*#__PURE__*/React.createElement(List.Item, null, /*#__PURE__*/React.createElement(List.Item.Meta, {
avatar: /*#__PURE__*/React.createElement(Avatar, {
src: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
}),
title: /*#__PURE__*/React.createElement("a", {
href: "https://ant.design"
}, item.title),
description: "Ant Design, a design language for background applications, is refined by Ant UED Team"
}));
}
});
}
function StatisticDemo() {
return /*#__PURE__*/React.createElement(Row, {
gutter: 16
}, /*#__PURE__*/React.createElement(Col, {
span: 12
}, /*#__PURE__*/React.createElement(Statistic, {
title: "Feedback",
value: 1128,
prefix: /*#__PURE__*/React.createElement(LikeOutlined, null)
})), /*#__PURE__*/React.createElement(Col, {
span: 12
}, /*#__PURE__*/React.createElement(Statistic, {
title: "Unmerged",
value: 93,
suffix: "/ 100"
})));
}
function DrawerDemo() {
var _useState23 = useState(false),
_useState24 = _slicedToArray(_useState23, 2),
visible = _useState24[0],
setVisible = _useState24[1];
var showDrawer = function showDrawer() {
setVisible(true);
};
var onClose = function onClose() {
setVisible(false);
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: showDrawer
}, "Open"), /*#__PURE__*/React.createElement(Drawer, {
title: "Basic Drawer",
placement: "right",
onClose: onClose,
visible: visible
}, /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents..."), /*#__PURE__*/React.createElement("p", null, "Some contents...")));
}
function TimelineDemo() {
return /*#__PURE__*/React.createElement(Timeline, null, /*#__PURE__*/React.createElement(Timeline.Item, null, "Create a services site 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Solve initial network problems 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Technical testing 2015-09-01"), /*#__PURE__*/React.createElement(Timeline.Item, null, "Network problems being solved 2015-09-01"));
}
function TypographyDemo() {
return /*#__PURE__*/React.createElement(Typography, null, /*#__PURE__*/React.createElement(Title, null, "Introduction"), /*#__PURE__*/React.createElement(Paragraph, null, "In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency of development."), /*#__PURE__*/React.createElement(Paragraph, null, "After massive project practice and summaries, Ant Design, a design language for background applications, is refined by Ant UED Team, which aims to", /*#__PURE__*/React.createElement(Text, {
strong: true
}, "uniform the user interface specs for internal background projects, lower the unnecessary cost of design differences and implementation and liberate the resources of design and front-end development"), "."));
}
function StepsDemo() {
return /*#__PURE__*/React.createElement(Space, {
direction: "vertical",
size: "large"
}, /*#__PURE__*/React.createElement(Steps, {
current: 1
}, /*#__PURE__*/React.createElement(Step, {
title: "Finished",
description: "This is a description."
}), /*#__PURE__*/React.createElement(Step, {
title: "In Progress",
subTitle: "Left 00:00:08",
description: "This is a description."
}), /*#__PURE__*/React.createElement(Step, {
title: "Waiting",
description: "This is a description."
})), /*#__PURE__*/React.createElement(Steps, {
size: "small",
current: 1
}, /*#__PURE__*/React.createElement(Step, {
title: "Finished"
}), /*#__PURE__*/React.createElement(Step, {
title: "In Progress"
}), /*#__PURE__*/React.createElement(Step, {
title: "Waiting"
})), /*#__PURE__*/React.createElement(Steps, {
direction: "vertical",
current: 1
}, /*#__PURE__*/React.createElement(Step, {
title: "Finished",
description: "This is a description."
}), /*#__PURE__*/React.createElement(Step, {
title: "In Progress",
description: "This is a description."
}), /*#__PURE__*/React.createElement(Step, {
title: "Waiting",
description: "This is a description."
})));
}
var openNotification = function openNotification() {
notification.open({
message: 'Notification Title',
description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
onClick: function onClick() {
console.log('Notification Clicked!');
}
});
};
function NotificationDemo() {
return /*#__PURE__*/React.createElement(Button, {
type: "primary",
onClick: openNotification
}, "Open the notification box");
}
function ResultDemo() {
return /*#__PURE__*/React.createElement(Result, {
status: "success",
title: "Successfully Purchased Cloud Server ECS!",
subTitle: "Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait.",
extra: [/*#__PURE__*/React.createElement(Button, {
type: "primary",
key: "console"
}, "Go Console"), /*#__PURE__*/React.createElement(Button, {
key: "buy"
}, "Buy Again")]
});
}
function ImageDemo() {
var _useState25 = useState(false),
_useState26 = _slicedToArray(_useState25, 2),
visible = _useState26[0],
setVisible = _useState26[1];
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Image, {
preview: {
visible: false
},
width: 200,
src: "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp",
onClick: function onClick() {
return setVisible(true);
}
}), /*#__PURE__*/React.createElement("div", {
style: {
display: 'none'
}
}, /*#__PURE__*/React.createElement(Image.PreviewGroup, {
preview: {
visible: visible,
onVisibleChange: function onVisibleChange(vis) {
return setVisible(vis);
}
}
}, /*#__PURE__*/React.createElement(Image, {
src: "https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp"
}), /*#__PURE__*/React.createElement(Image, {
src: "https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e796