storybook-addon-customize-antd-theme
Version:
a Storybook addon help you visually customize an ant design theme
1,267 lines (1,154 loc) • 64.5 kB
JavaScript
"use strict";
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = AntdDemos;
var _react = _interopRequireWildcard(require("react"));
var _trieSearch = _interopRequireDefault(require("trie-search"));
var _antd = require("antd");
var _icons = require("@ant-design/icons");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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; }
var SubMenu = _antd.Menu.SubMenu;
var Header = _antd.Layout.Header,
Footer = _antd.Layout.Footer,
Sider = _antd.Layout.Sider,
Content = _antd.Layout.Content;
var Panel = _antd.Collapse.Panel;
var Option = _antd.Mentions.Option;
var SOption = _antd.Select.Option;
var Link = _antd.Anchor.Link;
var Meta = _antd.Card.Meta;
var TabPane = _antd.Tabs.TabPane;
var Title = _antd.Typography.Title,
Paragraph = _antd.Typography.Paragraph,
Text = _antd.Typography.Text;
var Step = _antd.Steps.Step;
var Search = _antd.Input.Search;
function PopoverDemo() {
var content = /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("p", null, "Content"), /*#__PURE__*/_react["default"].createElement("p", null, "Content"));
return /*#__PURE__*/_react["default"].createElement(_antd.Popover, {
content: content,
title: "Title"
}, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary"
}, "Hover me"));
}
function LinkDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "link"
}, "Link");
}
function ButtonsDemo() {
var _useState = (0, _react.useState)('large'),
_useState2 = _slicedToArray(_useState, 2),
size = _useState2[0],
setSize = _useState2[1];
var handleSizeChange = function handleSizeChange(e) {
setSize(e.target.value);
};
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Radio.Group, {
value: size,
onChange: handleSizeChange
}, /*#__PURE__*/_react["default"].createElement(_antd.Radio.Button, {
value: "large"
}, "Large"), /*#__PURE__*/_react["default"].createElement(_antd.Radio.Button, {
value: "default"
}, "Default"), /*#__PURE__*/_react["default"].createElement(_antd.Radio.Button, {
value: "small"
}, "Small")), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
size: size
}, "Primary"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
size: size
}, "Default"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "dashed",
size: size
}, "Dashed"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "link",
size: size
}, "Link"), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
icon: /*#__PURE__*/_react["default"].createElement(_icons.DownloadOutlined, null),
size: size
}), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
shape: "circle",
icon: /*#__PURE__*/_react["default"].createElement(_icons.DownloadOutlined, null),
size: size
}), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
shape: "round",
icon: /*#__PURE__*/_react["default"].createElement(_icons.DownloadOutlined, null),
size: size
}), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
shape: "round",
icon: /*#__PURE__*/_react["default"].createElement(_icons.DownloadOutlined, null),
size: size
}, "Download"), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
icon: /*#__PURE__*/_react["default"].createElement(_icons.DownloadOutlined, null),
size: size
}, "Download"));
}
function CheckboxDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Checkbox.Group, {
style: {
width: '100%'
}
}, /*#__PURE__*/_react["default"].createElement(_antd.Row, null, /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
value: "A"
}, "A")), /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
value: "B"
}, "B")), /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
value: "C"
}, "C")), /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
value: "D"
}, "D")), /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Checkbox, {
value: "E"
}, "E"))));
}
function DescriptionsDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Descriptions, {
title: "User Info"
}, /*#__PURE__*/_react["default"].createElement(_antd.Descriptions.Item, {
label: "UserName"
}, "Zhou Maomao"), /*#__PURE__*/_react["default"].createElement(_antd.Descriptions.Item, {
label: "Telephone"
}, "1810000000"), /*#__PURE__*/_react["default"].createElement(_antd.Descriptions.Item, {
label: "Live"
}, "Hangzhou, Zhejiang"), /*#__PURE__*/_react["default"].createElement(_antd.Descriptions.Item, {
label: "Remark"
}, "empty"), /*#__PURE__*/_react["default"].createElement(_antd.Descriptions.Item, {
label: "Address"
}, "No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China"));
}
function DropdownDemo() {
var menu = /*#__PURE__*/_react["default"].createElement(_antd.Menu, null, /*#__PURE__*/_react["default"].createElement(_antd.Menu.ItemGroup, {
title: "Group title"
}, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, "1st menu item"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, "2nd menu item")), /*#__PURE__*/_react["default"].createElement(SubMenu, {
title: "sub menu"
}, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, "3rd menu item"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, "4th menu item")), /*#__PURE__*/_react["default"].createElement(SubMenu, {
title: "disabled sub menu",
disabled: true
}, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, "5d menu item"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, null, "6th menu item")));
return /*#__PURE__*/_react["default"].createElement(_antd.Dropdown, {
overlay: menu
}, /*#__PURE__*/_react["default"].createElement("a", {
className: "ant-dropdown-link",
onClick: function onClick(e) {
return e.preventDefault();
}
}, "Cascading menu ", /*#__PURE__*/_react["default"].createElement(_icons.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 = (0, _react.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Radio.Group, {
options: plainOptions,
onChange: onChange1,
value: value1
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Radio.Group, {
options: optionsWithDisabled,
onChange: onChange2,
value: value2
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Radio.Group, {
options: options,
onChange: onChange3,
value: value3,
optionType: "button"
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Radio.Group, {
options: optionsWithDisabled,
onChange: onChange4,
value: value4,
optionType: "button",
buttonStyle: "solid"
}));
}
function LayoutDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Layout, null, /*#__PURE__*/_react["default"].createElement(Sider, null, "Sider"), /*#__PURE__*/_react["default"].createElement(_antd.Layout, null, /*#__PURE__*/_react["default"].createElement(Header, null, "Header"), /*#__PURE__*/_react["default"].createElement(Content, null, "Content"), /*#__PURE__*/_react["default"].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["default"].createElement(_antd.Collapse, {
defaultActiveKey: ['1']
}, /*#__PURE__*/_react["default"].createElement(Panel, {
header: "This is panel header 1",
key: "1"
}, /*#__PURE__*/_react["default"].createElement("p", null, text)), /*#__PURE__*/_react["default"].createElement(Panel, {
header: "This is panel header 2",
key: "2"
}, /*#__PURE__*/_react["default"].createElement("p", null, text)), /*#__PURE__*/_react["default"].createElement(Panel, {
header: "This is panel header 3",
key: "3"
}, /*#__PURE__*/_react["default"].createElement("p", null, text)));
}
function FormDemo() {
var _Form$useForm = _antd.Form.useForm(),
_Form$useForm2 = _slicedToArray(_Form$useForm, 1),
form = _Form$useForm2[0];
var _Form$useForm3 = _antd.Form.useForm(),
_Form$useForm4 = _slicedToArray(_Form$useForm3, 1),
form2 = _Form$useForm4[0];
var _Form$useForm5 = _antd.Form.useForm(),
_Form$useForm6 = _slicedToArray(_Form$useForm5, 1),
form3 = _Form$useForm6[0];
return /*#__PURE__*/_react["default"].createElement(_antd.Row, {
gutter: [16, 16]
}, /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
labelCol: {
span: 4
},
wrapperCol: {
span: 14
},
layout: "horizontal",
form: form
}, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
label: "Field A"
}, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
label: "Field B"
}, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
wrapperCol: {
span: 14,
offset: 4
}
}, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary"
}, "Submit")))), /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
layout: "vertical",
form: form2
}, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
label: "Field A"
}, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
label: "Field B"
}, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, null, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary"
}, "Submit")))), /*#__PURE__*/_react["default"].createElement(_antd.Col, {
span: 8
}, /*#__PURE__*/_react["default"].createElement(_antd.Form, {
layout: "inline",
form: form3
}, /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
label: "Field A"
}, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, {
label: "Field B"
}, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
placeholder: "input placeholder"
})), /*#__PURE__*/_react["default"].createElement(_antd.Form.Item, null, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary"
}, "Submit")))));
}
function InputDemo() {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Input, {
size: "large",
placeholder: "large size",
prefix: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Input, {
placeholder: "default size",
prefix: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Input, {
size: "small",
placeholder: "small size",
prefix: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.InputNumber, {
min: 1,
max: 10,
defaultValue: 3
}));
}
function MentionsDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Mentions, {
style: {
width: '100%'
},
defaultValue: "@afc163"
}, /*#__PURE__*/_react["default"].createElement(Option, {
value: "afc163"
}, "afc163"), /*#__PURE__*/_react["default"].createElement(Option, {
value: "zombieJ"
}, "zombieJ"), /*#__PURE__*/_react["default"].createElement(Option, {
value: "yesmeck"
}, "yesmeck"));
}
function SelectDemo() {
var children = [];
for (var i = 10; i < 36; i++) {
children.push( /*#__PURE__*/_react["default"].createElement(SOption, {
key: i.toString(36) + i,
value: i.toString(36) + i
}, i.toString(36) + i));
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Select, {
defaultValue: "lucy",
style: {
width: 120
},
allowClear: true
}, /*#__PURE__*/_react["default"].createElement(SOption, {
value: "jack"
}, "Jack"), /*#__PURE__*/_react["default"].createElement(SOption, {
value: "lucy"
}, "Lucy"), /*#__PURE__*/_react["default"].createElement(SOption, {
value: "disabled",
disabled: true
}, "Disabled"), /*#__PURE__*/_react["default"].createElement(SOption, {
value: "Yiminghe"
}, "yiminghe")), /*#__PURE__*/_react["default"].createElement(_antd.Select, {
defaultValue: "lucy",
style: {
width: 120
},
disabled: true
}, /*#__PURE__*/_react["default"].createElement(SOption, {
value: "lucy"
}, "Lucy")), /*#__PURE__*/_react["default"].createElement(_antd.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["default"].createElement(_antd.Cascader, {
options: options,
placeholder: "Please select"
});
}
function AnchorDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Anchor, {
affix: false
}, /*#__PURE__*/_react["default"].createElement(Link, {
href: "#",
title: "Basic demo"
}), /*#__PURE__*/_react["default"].createElement(Link, {
href: "#",
title: "Static demo"
}), /*#__PURE__*/_react["default"].createElement(Link, {
href: "#",
title: "API"
}, /*#__PURE__*/_react["default"].createElement(Link, {
href: "#",
title: "Anchor Props"
}), /*#__PURE__*/_react["default"].createElement(Link, {
href: "#",
title: "Link Props"
})));
}
function TooltipDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Tooltip, {
title: "prompt text"
}, /*#__PURE__*/_react["default"].createElement("span", null, "Tooltip will show on mouse enter."));
}
function ModalDemo() {
var _useState5 = (0, _react.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
onClick: showModal
}, "Open Modal"), /*#__PURE__*/_react["default"].createElement(_antd.Modal, {
title: "Basic Modal",
visible: isModalVisible,
onOk: handleOk,
onCancel: handleCancel
}, /*#__PURE__*/_react["default"].createElement("p", null, "Some contents..."), /*#__PURE__*/_react["default"].createElement("p", null, "Some contents..."), /*#__PURE__*/_react["default"].createElement("p", null, "Some contents...")));
}
function ProgressDemo() {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 30
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 50,
status: "active"
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 70,
status: "exception"
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 100
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 50,
showInfo: false
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
type: "circle",
percent: 75
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
type: "circle",
percent: 70,
status: "exception"
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
type: "circle",
percent: 100
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 50,
steps: 3
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 30,
steps: 5
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Progress, {
percent: 100,
steps: 5,
size: "small",
strokeColor: "#52c41a"
}));
}
function MenuDemo() {
var _useState7 = (0, _react.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
checked: state.theme === 'dark',
onChange: changeTheme,
checkedChildren: "Dark",
unCheckedChildren: "Light"
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Menu, {
theme: state.theme,
onClick: handleClick,
style: {
width: 256
},
defaultOpenKeys: ['sub1'],
selectedKeys: [state.current],
mode: "inline"
}, /*#__PURE__*/_react["default"].createElement(SubMenu, {
key: "sub1",
icon: /*#__PURE__*/_react["default"].createElement(_icons.MailOutlined, null),
title: "Navigation One"
}, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "1"
}, "Option 1"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "2"
}, "Option 2"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "3"
}, "Option 3"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "4"
}, "Option 4")), /*#__PURE__*/_react["default"].createElement(SubMenu, {
key: "sub2",
icon: /*#__PURE__*/_react["default"].createElement(_icons.AppstoreOutlined, null),
title: "Navigation Two"
}, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "5"
}, "Option 5"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "6"
}, "Option 6"), /*#__PURE__*/_react["default"].createElement(SubMenu, {
key: "sub3",
title: "Submenu"
}, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "7"
}, "Option 7"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "8"
}, "Option 8"))), /*#__PURE__*/_react["default"].createElement(SubMenu, {
key: "sub4",
icon: /*#__PURE__*/_react["default"].createElement(_icons.SettingOutlined, null),
title: "Navigation Three"
}, /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "9"
}, "Option 9"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "10"
}, "Option 10"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "11"
}, "Option 11"), /*#__PURE__*/_react["default"].createElement(_antd.Menu.Item, {
key: "12"
}, "Option 12"))));
}
function SpinDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Space, {
size: "middle"
}, /*#__PURE__*/_react["default"].createElement(_antd.Spin, {
size: "small"
}), /*#__PURE__*/_react["default"].createElement(_antd.Spin, null), /*#__PURE__*/_react["default"].createElement(_antd.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 = (0, _react.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["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("div", {
style: {
marginBottom: 16
}
}, /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
onClick: start,
disabled: !hasSelected,
loading: loading
}, "Reload"), /*#__PURE__*/_react["default"].createElement("span", {
style: {
marginLeft: 8
}
}, hasSelected ? "Selected ".concat(selectedRowKeys.length, " items") : '')), /*#__PURE__*/_react["default"].createElement(_antd.Table, {
rowSelection: rowSelection,
columns: columns,
dataSource: data
}));
}
function TagDemo() {
function preventDefault(e) {
e.preventDefault();
console.log('Clicked! But prevent default.');
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Tag, null, "Tag 1"), /*#__PURE__*/_react["default"].createElement(_antd.Tag, null, /*#__PURE__*/_react["default"].createElement("a", {
href: "https://github.com/ant-design/ant-design/issues/1862"
}, "Link")), /*#__PURE__*/_react["default"].createElement(_antd.Tag, {
closable: true
}, "Tag 2"), /*#__PURE__*/_react["default"].createElement(_antd.Tag, {
closable: true,
onClose: preventDefault
}, "Prevent Default"));
}
function CarouselDemo() {
var contentStyle = {
height: '160px',
color: '#fff',
lineHeight: '160px',
textAlign: 'center',
background: '#364d79'
};
return /*#__PURE__*/_react["default"].createElement(_antd.Carousel, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", {
style: contentStyle
}, "1")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", {
style: contentStyle
}, "2")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", {
style: contentStyle
}, "3")), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("h3", {
style: contentStyle
}, "4")));
}
function PickerDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Space, {
direction: "vertical"
}, /*#__PURE__*/_react["default"].createElement(_antd.DatePicker, null), /*#__PURE__*/_react["default"].createElement(_antd.TimePicker, null));
}
function CalendarDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Calendar, null);
}
function BadgeDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Space, {
size: "middle"
}, /*#__PURE__*/_react["default"].createElement(_antd.Badge, {
count: 5
}, /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
size: "large"
})), /*#__PURE__*/_react["default"].createElement(_antd.Badge, {
count: 0,
showZero: true
}, /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
size: "large"
})), /*#__PURE__*/_react["default"].createElement(_antd.Badge, {
count: /*#__PURE__*/_react["default"].createElement(_icons.ClockCircleOutlined, {
style: {
color: '#f5222d'
}
})
}, /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
size: "large"
})), /*#__PURE__*/_react["default"].createElement(_antd.Badge, {
dot: true
}, /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
size: "large"
})));
}
function RateDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Rate, {
allowHalf: true,
defaultValue: 2.5
});
}
function CardDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Card, {
style: {
width: 300
},
cover: /*#__PURE__*/_react["default"].createElement("img", {
alt: "example",
src: "https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
}),
actions: [/*#__PURE__*/_react["default"].createElement(_icons.SettingOutlined, {
key: "setting"
}), /*#__PURE__*/_react["default"].createElement(_icons.EditOutlined, {
key: "edit"
}), /*#__PURE__*/_react["default"].createElement(_icons.EllipsisOutlined, {
key: "ellipsis"
})]
}, /*#__PURE__*/_react["default"].createElement(Meta, {
avatar: /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
src: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
}),
title: "Card title",
description: "This is the description"
}));
}
function CommentDemo() {
var _useState11 = (0, _react.useState)(0),
_useState12 = _slicedToArray(_useState11, 2),
likes = _useState12[0],
setLikes = _useState12[1];
var _useState13 = (0, _react.useState)(0),
_useState14 = _slicedToArray(_useState13, 2),
dislikes = _useState14[0],
setDislikes = _useState14[1];
var _useState15 = (0, _react.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["default"].createElement(_antd.Tooltip, {
key: "comment-basic-like",
title: "Like"
}, /*#__PURE__*/_react["default"].createElement("span", {
onClick: like
}, /*#__PURE__*/_react["default"].createElement(action === 'liked' ? _icons.LikeFilled : _icons.LikeOutlined), /*#__PURE__*/_react["default"].createElement("span", {
className: "comment-action"
}, likes))), /*#__PURE__*/_react["default"].createElement(_antd.Tooltip, {
key: "comment-basic-dislike",
title: "Dislike"
}, /*#__PURE__*/_react["default"].createElement("span", {
onClick: dislike
}, /*#__PURE__*/_react["default"].createElement(action === 'disliked' ? _icons.DislikeFilled : _icons.DislikeOutlined), /*#__PURE__*/_react["default"].createElement("span", {
className: "comment-action"
}, dislikes))), /*#__PURE__*/_react["default"].createElement("span", {
key: "comment-basic-reply-to"
}, "Reply to")];
return /*#__PURE__*/_react["default"].createElement(_antd.Comment, {
actions: actions,
author: /*#__PURE__*/_react["default"].createElement("a", null, "Han Solo"),
avatar: /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
src: "https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",
alt: "Han Solo"
}),
content: /*#__PURE__*/_react["default"].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["default"].createElement(_antd.Space, {
direction: "vertical",
size: "large"
}, /*#__PURE__*/_react["default"].createElement(_antd.Tabs, {
defaultActiveKey: "1"
}, /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 1",
key: "1"
}, "Content of Tab Pane 1"), /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 2",
key: "2"
}, "Content of Tab Pane 2"), /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 3",
key: "3"
}, "Content of Tab Pane 3")), /*#__PURE__*/_react["default"].createElement(_antd.Tabs, {
defaultActiveKey: "1",
tabPosition: "left"
}, /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 1",
key: "1"
}, "Content of Tab Pane 1"), /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 2",
key: "2"
}, "Content of Tab Pane 2"), /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 3",
key: "3"
}, "Content of Tab Pane 3")), /*#__PURE__*/_react["default"].createElement(_antd.Tabs, {
type: "card"
}, /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 1",
key: "1"
}, "Content of Tab Pane 1"), /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 2",
key: "2"
}, "Content of Tab Pane 2"), /*#__PURE__*/_react["default"].createElement(TabPane, {
tab: "Tab 3",
key: "3"
}, "Content of Tab Pane 3")));
}
function BackTopDemo() {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.BackTop, null), "Scroll down to see the bottom-right", /*#__PURE__*/_react["default"].createElement("strong", {
className: "site-back-top-basic"
}, " gray "), "button.");
}
function AvatarDemo() {
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
size: 64,
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
size: "large",
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
size: "small",
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
})), /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
size: 64,
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
size: "large",
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
}), /*#__PURE__*/_react["default"].createElement(_antd.Avatar, {
shape: "square",
size: "small",
icon: /*#__PURE__*/_react["default"].createElement(_icons.UserOutlined, null)
})));
}
function SwitchDemo() {
var _React$useState = _react["default"].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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
defaultChecked: true
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
size: "small",
defaultChecked: true
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Switch, {
disabled: disabled,
defaultChecked: true
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Button, {
type: "primary",
onClick: toggle
}, "Toggle disabled"));
}
function PaginationDemo() {
function showTotal(total) {
return "Total ".concat(total, " items");
}
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Pagination, {
showQuickJumper: true,
defaultCurrent: 2,
total: 500
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Pagination, {
showQuickJumper: true,
defaultCurrent: 2,
total: 500,
disabled: true
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Pagination, {
size: "small",
total: 50
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Pagination, {
size: "small",
total: 50,
showSizeChanger: true,
showQuickJumper: true
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.Pagination, {
size: "small",
total: 50,
showTotal: showTotal
}), /*#__PURE__*/_react["default"].createElement("br", null), /*#__PURE__*/_react["default"].createElement(_antd.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["default"].createElement(_antd.Space, {
direction: "vertical"
}, /*#__PURE__*/_react["default"].createElement(_antd.PageHeader, {
className: "site-page-header",
onBack: function onBack() {
return null;
},
title: "Title",
subTitle: "This is a subtitle"
}), /*#__PURE__*/_react["default"].createElement(_antd.PageHeader, {
className: "site-page-header",
title: "Title",
breadcrumb: {
routes: routes
},
subTitle: "This is a subtitle"
}));
}
function BreadcrumbDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.Breadcrumb, null, /*#__PURE__*/_react["default"].createElement(_antd.Breadcrumb.Item, null, "Home"), /*#__PURE__*/_react["default"].createElement(_antd.Breadcrumb.Item, null, /*#__PURE__*/_react["default"].createElement("a", {
href: ""
}, "Application Center")), /*#__PURE__*/_react["default"].createElement(_antd.Breadcrumb.Item, null, /*#__PURE__*/_react["default"].createElement("a", {
href: ""
}, "Application List")), /*#__PURE__*/_react["default"].createElement(_antd.Breadcrumb.Item, null, "An Application"));
}
function SliderDemo() {
var _useState17 = (0, _react.useState)(false),
_useState18 = _slicedToArray(_useState17, 2),
disabled = _useState18[0],
setState = _useState18[1];
var handleDisabledChange = function handleDisabledChange(disabled) {
setState(disabled);
};
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Slider, {
defaultValue: 30,
disabled: disabled
}), /*#__PURE__*/_react["default"].createElement(_antd.Slider, {
range: true,
defaultValue: [20, 50],
disabled: disabled
}), "Disabled: ", /*#__PURE__*/_react["default"].createElement(_antd.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["default"].createElement("span", {
style: {
color: '#1890ff'
}
}, "sss"),
key: '0-0-1-0'
}]
}]
}];
function TreeDemo() {
return /*#__PURE__*/_react["default"].createElement(_antd.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["default"].createElement(_antd.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 = (0, _react.useState)(initialTargetKeys),
_useState20 = _slicedToArray(_useState19, 2),
targetKeys = _useState20[0],
setTargetKeys = _useState20[1];
var _useState21 = (0, _react.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["default"].createElement(_antd.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["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Success Tips",
type: "success",
showIcon: true
}), /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Informational Notes",
type: "info",
showIcon: true
}), /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Warning",
type: "warning",
showIcon: true,
closable: true
}), /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Error",
type: "error",
showIcon: true
}), /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Success Tips",
description: "Detailed description and advice about successful copywriting.",
type: "success",
showIcon: true
}), /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Informational Notes",
description: "Additional description and information about copywriting.",
type: "info",
showIcon: true
}), /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Warning",
description: "This is a warning notice about copywriting.",
type: "warning",
showIcon: true,
closable: true
}), /*#__PURE__*/_react["default"].createElement(_antd.Alert, {
message: "Error",
description: "This is an error message about copywriting.",
type: "error",
showIcon: true
}));
}
function