mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
179 lines
1.4 MiB
179 lines
1.4 MiB
(("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd=("undefined"!=typeof globalThis?globalThis:self).makoChunk_antd||[]).push([["common"],{"0012a91b":function(n,e,t){},"002c6f97":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b54e5036");var o="import React from 'react';\nimport { Button, Flex, Input, Segmented, Select } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"small\" vertical>\n <div>\n <Segmented\n size=\"large\"\n style={{ marginInlineEnd: 6 }}\n options={['Daily', 'Weekly', 'Monthly']}\n />\n <Button type=\"primary\" size=\"large\">\n Button\n </Button>\n </div>\n <div>\n <Segmented\n size=\"middle\"\n style={{ marginInlineEnd: 6 }}\n options={['Daily', 'Weekly', 'Monthly']}\n />\n <Input placeholder=\"default size\" style={{ width: 150 }} />\n </div>\n <div>\n <Segmented\n size=\"small\"\n style={{ marginInlineEnd: 6 }}\n options={['Daily', 'Weekly', 'Monthly']}\n />\n <Select size=\"small\" defaultValue=\"lucy\" style={{ width: 150 }}>\n <Select.Option value=\"lucy\">Lucy</Select.Option>\n </Select>\n </div>\n </Flex>\n);\n\nexport default App;\n";},"00389016":function(n,e,t){},"00395264":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5af6d844");var o="import React, { useRef, useState } from 'react';\nimport { Button, Modal } from 'antd';\nimport type { DraggableData, DraggableEvent } from 'react-draggable';\nimport Draggable from 'react-draggable';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [disabled, setDisabled] = useState(true);\n const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });\n const draggleRef = useRef<HTMLDivElement>(null!);\n\n const showModal = () => {\n setOpen(true);\n };\n\n const handleOk = (e: React.MouseEvent<HTMLElement>) => {\n console.log(e);\n setOpen(false);\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLElement>) => {\n console.log(e);\n setOpen(false);\n };\n\n const onStart = (_event: DraggableEvent, uiData: DraggableData) => {\n const { clientWidth, clientHeight } = window.document.documentElement;\n const targetRect = draggleRef.current?.getBoundingClientRect();\n if (!targetRect) {\n return;\n }\n setBounds({\n left: -targetRect.left + uiData.x,\n right: clientWidth - (targetRect.right - uiData.x),\n top: -targetRect.top + uiData.y,\n bottom: clientHeight - (targetRect.bottom - uiData.y),\n });\n };\n\n return (\n <>\n <Button onClick={showModal}>Open Draggable Modal</Button>\n <Modal\n title={\n <div\n style={{ width: '100%', cursor: 'move' }}\n onMouseOver={() => {\n if (disabled) {\n setDisabled(false);\n }\n }}\n onMouseOut={() => {\n setDisabled(true);\n }}\n // fix eslintjsx-a11y/mouse-events-have-key-events\n // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/blob/master/docs/rules/mouse-events-have-key-events.md\n onFocus={() => {}}\n onBlur={() => {}}\n // end\n >\n Draggable Modal\n </div>\n }\n open={open}\n onOk={handleOk}\n onCancel={handleCancel}\n modalRender={(modal) => (\n <Draggable\n disabled={disabled}\n bounds={bounds}\n nodeRef={draggleRef}\n onStart={(event, uiData) => onStart(event, uiData)}\n >\n <div ref={draggleRef}>{modal}</div>\n </Draggable>\n )}\n >\n <p>\n Just don't learn physics at school and your life will be full of magic and miracles.\n </p>\n <br />\n <p>Day before yesterday I saw a rabbit, and yesterday a deer, and today, you.</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n";},"0042c7d6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1091505d");var o="import React, { useState } from 'react';\nimport { CloseSquareFilled } from '@ant-design/icons';\nimport { AutoComplete } from 'antd';\nimport type { AutoCompleteProps } from 'antd';\n\nconst mockVal = (str: string, repeat = 1) => ({\n value: str.repeat(repeat),\n});\n\nconst App: React.FC = () => {\n const [options, setOptions] = useState<AutoCompleteProps['options']>([]);\n\n const getPanelValue = (searchText: string) =>\n !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];\n\n return (\n <>\n <AutoComplete\n options={options}\n style={{ width: 200 }}\n onSearch={(text) => setOptions(getPanelValue(text))}\n placeholder=\"UnClearable\"\n allowClear={false}\n />\n <br />\n <br />\n <AutoComplete\n options={options}\n style={{ width: 200 }}\n onSearch={(text) => setOptions(getPanelValue(text))}\n placeholder=\"Customized clear icon\"\n allowClear={{ clearIcon: <CloseSquareFilled /> }}\n />\n </>\n );\n};\n\nexport default App;\n";},"004dd1d4":function(n,e,t){},"00535210":function(n,e,t){},"006c2401":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c1fbc568");var o="import React, { useState } from 'react';\nimport type { InputNumberProps } from 'antd';\nimport { Form, InputNumber } from 'antd';\n\ntype ValidateStatus = Parameters<typeof Form.Item>[0]['validateStatus'];\n\nconst validatePrimeNumber = (\n number: number,\n): {\n validateStatus: ValidateStatus;\n errorMsg: string | null;\n} => {\n if (number === 11) {\n return {\n validateStatus: 'success',\n errorMsg: null,\n };\n }\n return {\n validateStatus: 'error',\n errorMsg: 'The prime between 8 and 12 is 11!',\n };\n};\n\nconst formItemLayout = {\n labelCol: { span: 7 },\n wrapperCol: { span: 12 },\n};\n\nconst tips =\n 'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';\n\nconst App: React.FC = () => {\n const [number, setNumber] = useState<{\n value: number;\n validateStatus?: ValidateStatus;\n errorMsg?: string | null;\n }>({ value: 11 });\n\n const onNumberChange: InputNumberProps['onChange'] = (value) => {\n setNumber({\n ...validatePrimeNumber(value as number),\n value: value as number,\n });\n };\n\n return (\n <Form style={{ maxWidth: 600 }}>\n <Form.Item\n {...formItemLayout}\n label=\"Prime between 8 & 12\"\n validateStatus={number.validateStatus}\n help={number.errorMsg || tips}\n >\n <InputNumber min={8} max={12} value={number.value} onChange={onNumberChange} />\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n";},"0084aabc":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("10a5a1b5");var o="import React from 'react';\nimport { Input } from 'antd';\n\nconst { TextArea } = Input;\n\nconst onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n console.log(e);\n};\n\nconst App: React.FC = () => (\n <>\n <Input placeholder=\"input with clear icon\" allowClear onChange={onChange} />\n <br />\n <br />\n <TextArea placeholder=\"textarea with clear icon\" allowClear onChange={onChange} />\n </>\n);\n\nexport default App;\n";},"00aa5115":function(n,e,t){},"00afcce7":function(n,e,t){},"00c0dac3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d7f7f501");var o="import React from 'react';\nimport { Pagination } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Pagination simple defaultCurrent={2} total={50} />\n <br />\n <Pagination simple={{ readOnly: true }} defaultCurrent={2} total={50} />\n <br />\n <Pagination disabled simple defaultCurrent={2} total={50} />\n </>\n);\n\nexport default App;\n";},"00cc3386":function(n,e,t){},"00d22fd4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b4de0246");var o="import React from 'react';\nimport { Popconfirm } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20 (\u5305\u542B\u7BAD\u5934\u3001\u5185\u5BB9\u5143\u7D20)',\n body: '\u5185\u5BB9\u5143\u7D20',\n },\n en: {\n root: 'Root element (including arrows, content elements)',\n body: 'Body element',\n },\n};\n\nconst BlockList: React.FC<React.PropsWithChildren> = (props: any) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n\n return (\n <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>\n <Popconfirm\n title=\"prompt text\"\n open\n placement=\"top\"\n autoAdjustOverflow={false}\n getPopupContainer={() => divRef.current}\n {...props}\n />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Popconfirm\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.23.0' },\n { name: 'body', desc: locale.body, version: '5.23.0' },\n ]}\n >\n <BlockList />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},"011f89f4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d7eebbc1");var o="import React from 'react';\nimport { LikeOutlined } from '@ant-design/icons';\nimport { Col, Row, Statistic } from 'antd';\n\nconst App: React.FC = () => (\n <Row gutter={16}>\n <Col span={12}>\n <Statistic title=\"Feedback\" value={1128} prefix={<LikeOutlined />} />\n </Col>\n <Col span={12}>\n <Statistic title=\"Unmerged\" value={93} suffix=\"/ 100\" />\n </Col>\n </Row>\n);\n\nexport default App;\n";},"0130da46":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("03ef401a");var o="import React from 'react';\nimport { DatePicker, Space } from 'antd';\n\nconst { RangePicker } = DatePicker;\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <DatePicker renderExtraFooter={() => 'extra footer'} />\n <DatePicker renderExtraFooter={() => 'extra footer'} showTime />\n <RangePicker renderExtraFooter={() => 'extra footer'} />\n <RangePicker renderExtraFooter={() => 'extra footer'} showTime />\n <DatePicker renderExtraFooter={() => 'extra footer'} picker=\"month\" />\n </Space>\n);\n\nexport default App;\n";},"0136f87c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fab0dc7b");var o='import React from \'react\';\nimport {\n CheckCircleOutlined,\n ClockCircleOutlined,\n CloseCircleOutlined,\n ExclamationCircleOutlined,\n MinusCircleOutlined,\n SyncOutlined,\n} from \'@ant-design/icons\';\nimport { Divider, Flex, Tag } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Divider orientation="left">Without icon</Divider>\n <Flex gap="4px 0" wrap>\n <Tag color="success">success</Tag>\n <Tag color="processing">processing</Tag>\n <Tag color="error">error</Tag>\n <Tag color="warning">warning</Tag>\n <Tag color="default">default</Tag>\n </Flex>\n <Divider orientation="left">With icon</Divider>\n <Flex gap="4px 0" wrap>\n <Tag icon={<CheckCircleOutlined />} color="success">\n success\n </Tag>\n <Tag icon={<SyncOutlined spin />} color="processing">\n processing\n </Tag>\n <Tag icon={<CloseCircleOutlined />} color="error">\n error\n </Tag>\n <Tag icon={<ExclamationCircleOutlined />} color="warning">\n warning\n </Tag>\n <Tag icon={<ClockCircleOutlined />} color="default">\n waiting\n </Tag>\n <Tag icon={<MinusCircleOutlined />} color="default">\n stop\n </Tag>\n </Flex>\n </>\n);\n\nexport default App;\n';},"01722677":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("91288e8d");var o="import React from 'react';\nimport { Select } from 'antd';\n\nconst handleChange = (value: string) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <Select\n defaultValue=\"lucy\"\n style={{ width: 200 }}\n onChange={handleChange}\n options={[\n {\n label: <span>manager</span>,\n title: 'manager',\n options: [\n { label: <span>Jack</span>, value: 'Jack' },\n { label: <span>Lucy</span>, value: 'Lucy' },\n ],\n },\n {\n label: <span>engineer</span>,\n title: 'engineer',\n options: [\n { label: <span>Chloe</span>, value: 'Chloe' },\n { label: <span>Lucas</span>, value: 'Lucas' },\n ],\n },\n ]}\n />\n);\n\nexport default App;\n";},"019b2ff2":function(n,e,t){},"019c43a7":function(n,e,t){},"019e0ec3":function(n,e,t){},"0223b174":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f3e2098e");var o="import React from 'react';\nimport { Flex, Input, Typography } from 'antd';\nimport type { GetProps } from 'antd';\n\ntype OTPProps = GetProps<typeof Input.OTP>;\n\nconst { Title } = Typography;\n\nconst App: React.FC = () => {\n const onChange: OTPProps['onChange'] = (text) => {\n console.log('onChange:', text);\n };\n\n const onInput: OTPProps['onInput'] = (value) => {\n console.log('onInput:', value);\n };\n\n const sharedProps: OTPProps = {\n onChange,\n onInput,\n };\n\n return (\n <Flex gap=\"middle\" align=\"flex-start\" vertical>\n <Title level={5}>With formatter (Upcase)</Title>\n <Input.OTP formatter={(str) => str.toUpperCase()} {...sharedProps} />\n <Title level={5}>With Disabled</Title>\n <Input.OTP disabled {...sharedProps} />\n <Title level={5}>With Length (8)</Title>\n <Input.OTP length={8} {...sharedProps} />\n <Title level={5}>With variant</Title>\n <Input.OTP variant=\"filled\" {...sharedProps} />\n <Title level={5}>With custom display character</Title>\n <Input.OTP mask=\"\u{1F512}\" {...sharedProps} />\n <Title level={5}>With custom ReactNode separator</Title>\n <Input.OTP separator={<span>/</span>} {...sharedProps} />\n <Title level={5}>With custom function separator</Title>\n <Input.OTP\n separator={(i) => <span style={{ color: i & 1 ? 'red' : 'blue' }}>\u2014</span>}\n {...sharedProps}\n />\n </Flex>\n );\n};\n\nexport default App;\n";},"02398622":function(n,e,t){},"026f22db":function(n,e,t){},"0298622e":function(n,e,t){},"02b8fe80":function(n,e,t){},"02bbb19b":function(n,e,t){},"03085bae":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("17f690ab");var o="import React, { useState } from 'react';\nimport {\n AppstoreOutlined,\n ContainerOutlined,\n DesktopOutlined,\n MailOutlined,\n MenuFoldOutlined,\n MenuUnfoldOutlined,\n PieChartOutlined,\n} from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Button, Menu } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n { key: '1', icon: <PieChartOutlined />, label: 'Option 1' },\n { key: '2', icon: <DesktopOutlined />, label: 'Option 2' },\n { key: '3', icon: <ContainerOutlined />, label: 'Option 3' },\n {\n key: 'sub1',\n label: 'Navigation One',\n icon: <MailOutlined />,\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n { key: '7', label: 'Option 7' },\n { key: '8', label: 'Option 8' },\n ],\n },\n {\n key: 'sub2',\n label: 'Navigation Two',\n icon: <AppstoreOutlined />,\n children: [\n { key: '9', label: 'Option 9' },\n { key: '10', label: 'Option 10' },\n {\n key: 'sub3',\n label: 'Submenu',\n children: [\n { key: '11', label: 'Option 11' },\n { key: '12', label: 'Option 12' },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [collapsed, setCollapsed] = useState(false);\n\n const toggleCollapsed = () => {\n setCollapsed(!collapsed);\n };\n\n return (\n <div style={{ width: 256 }}>\n <Button type=\"primary\" onClick={toggleCollapsed} style={{ marginBottom: 16 }}>\n {collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}\n </Button>\n <Menu\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n mode=\"inline\"\n theme=\"dark\"\n inlineCollapsed={collapsed}\n items={items}\n />\n </div>\n );\n};\n\nexport default App;\n";},"031d5948":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ab7a96a6");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap="small">\n <Progress strokeLinecap="butt" percent={75} />\n <Flex wrap gap="small">\n <Progress strokeLinecap="butt" type="circle" percent={75} />\n <Progress strokeLinecap="butt" type="dashboard" percent={75} />\n </Flex>\n </Flex>\n);\n\nexport default App;\n';},"03570064":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("daf4f843");var o="import React from 'react';\nimport { Flex, Select } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap={12} vertical>\n <Flex gap={8}>\n <Select\n placeholder=\"Outlined\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n <Select\n mode=\"multiple\"\n defaultValue={['lucy']}\n placeholder=\"Outlined\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n </Flex>\n <Flex gap={8}>\n <Select\n placeholder=\"Filled\"\n variant=\"filled\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n <Select\n mode=\"multiple\"\n defaultValue={['lucy']}\n placeholder=\"Filled\"\n variant=\"filled\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n </Flex>\n <Flex gap={8}>\n <Select\n placeholder=\"Borderless\"\n variant=\"borderless\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n <Select\n mode=\"multiple\"\n defaultValue={['lucy']}\n placeholder=\"Borderless\"\n variant=\"borderless\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n </Flex>\n <Flex gap={8}>\n <Select\n placeholder=\"Underlined\"\n variant=\"underlined\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n <Select\n mode=\"multiple\"\n defaultValue={['lucy']}\n placeholder=\"Underlined\"\n variant=\"underlined\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n </Flex>\n </Flex>\n);\n\nexport default App;\n";},"0366fe8d":function(n,e,t){},"03c60420":function(n,e,t){},"03dc0a55":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("34873843");var o='import React from \'react\';\nimport { AlertFilled, CloseSquareFilled } from \'@ant-design/icons\';\nimport { Button, Form, Input, Tooltip } from \'antd\';\nimport { createStyles, css } from \'antd-style\';\nimport uniqueId from \'lodash/uniqueId\';\n\nconst useStyle = createStyles(() => ({\n \'custom-feedback-icons\': css`\n .ant-form-item-feedback-icon {\n pointer-events: all;\n }\n `,\n}));\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const { styles } = useStyle();\n\n return (\n <Form\n name="custom-feedback-icons"\n form={form}\n style={{ maxWidth: 600 }}\n feedbackIcons={({ errors }) => ({\n error: (\n <Tooltip\n key="tooltipKey"\n title={errors?.map((error) => <div key={uniqueId()}>{error}</div>)}\n color="red"\n >\n <CloseSquareFilled />\n </Tooltip>\n ),\n })}\n >\n <Form.Item\n name="custom-feedback-test-item"\n label="Test"\n className={styles[\'custom-feedback-icons\']}\n rules={[{ required: true, type: \'email\' }, { min: 10 }]}\n help=""\n hasFeedback\n >\n <Input />\n </Form.Item>\n <Form.Item\n name="custom-feedback-test-item2"\n label="Test"\n className={styles[\'custom-feedback-icons\']}\n rules={[{ required: true, type: \'email\' }, { min: 10 }]}\n help=""\n hasFeedback={{\n icons: ({ errors }) => ({\n error: (\n <Tooltip\n key="tooltipKey"\n title={errors?.map((error) => <div key={uniqueId()}>{error}</div>)}\n color="pink"\n >\n <AlertFilled />\n </Tooltip>\n ),\n success: false,\n }),\n }}\n >\n <Input />\n </Form.Item>\n <Form.Item>\n <Button htmlType="submit">Submit</Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"03ef401a":function(n,e,t){},"041ddcc6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fab71e78");var o="import React, { useState } from 'react';\nimport { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Menu } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n label: 'Navigation One',\n key: 'mail',\n icon: <MailOutlined />,\n },\n {\n label: 'Navigation Two',\n key: 'app',\n icon: <AppstoreOutlined />,\n disabled: true,\n },\n {\n label: 'Navigation Three - Submenu',\n key: 'SubMenu',\n icon: <SettingOutlined />,\n children: [\n {\n type: 'group',\n label: 'Item 1',\n children: [\n { label: 'Option 1', key: 'setting:1' },\n { label: 'Option 2', key: 'setting:2' },\n ],\n },\n {\n type: 'group',\n label: 'Item 2',\n children: [\n { label: 'Option 3', key: 'setting:3' },\n { label: 'Option 4', key: 'setting:4' },\n ],\n },\n ],\n },\n {\n key: 'alipay',\n label: (\n <a href=\"https://ant.design\" target=\"_blank\" rel=\"noopener noreferrer\">\n Navigation Four - Link\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => {\n const [current, setCurrent] = useState('mail');\n\n const onClick: MenuProps['onClick'] = (e) => {\n console.log('click ', e);\n setCurrent(e.key);\n };\n\n return (\n <Menu onClick={onClick} selectedKeys={[current]} mode=\"horizontal\" items={items} theme=\"dark\" />\n );\n};\n\nexport default App;\n";},"04391e00":function(n,e,t){},"0450981e":function(n,e,t){},"04eccd47":function(n,e,t){},"04f96b6a":function(n,e,t){},"04fc099e":function(n,e,t){},"0528b2e0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fcd5e58c");var o="import React from 'react';\nimport { CopyOutlined, SearchOutlined } from '@ant-design/icons';\nimport { Button, Cascader, Input, InputNumber, Select, Space, TimePicker } from 'antd';\n\nconst { Option } = Select;\n\nconst App: React.FC = () => (\n <>\n <Space.Compact block>\n <Space.Compact>\n <Space.Compact>\n <Input style={{ width: 90 }} placeholder=\"Typing...\" />\n <Button icon={<SearchOutlined />} />\n </Space.Compact>\n <Space.Compact>\n <InputNumber defaultValue={12} />\n <Select defaultValue=\"Option1\">\n <Option value=\"Option1\">Opt1</Option>\n <Option value=\"Option2\">Opt2</Option>\n </Select>\n </Space.Compact>\n </Space.Compact>\n <Button type=\"primary\">Separator</Button>\n <Space.Compact>\n <Space.Compact>\n <Input.Search style={{ width: 110 }} placeholder=\"Search\" />\n <Button type=\"primary\">Submit</Button>\n </Space.Compact>\n <Space.Compact>\n <Input defaultValue=\"mysite\" />\n <Button icon={<CopyOutlined />} />\n </Space.Compact>\n </Space.Compact>\n </Space.Compact>\n <>\n <br />\n <Space.Compact block>\n <Space.Compact>\n <TimePicker />\n <Button type=\"primary\">Submit</Button>\n </Space.Compact>\n <Space.Compact>\n <Cascader\n options={[\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n ]}\n placeholder=\"Select Address\"\n />\n <Button type=\"primary\">Submit</Button>\n </Space.Compact>\n </Space.Compact>\n </>\n </>\n);\n\nexport default App;\n";},"05425902":function(n,e,t){},"055465cc":function(n,e,t){},"0592f27c":function(n,e,t){},"05937365":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2af3f7e9");var o="import React from 'react';\nimport type { SliderSingleProps } from 'antd';\nimport { Slider } from 'antd';\n\nconst formatter: NonNullable<SliderSingleProps['tooltip']>['formatter'] = (value) => `${value}%`;\n\nconst App: React.FC = () => (\n <>\n <Slider tooltip={{ formatter }} />\n <Slider tooltip={{ formatter: null }} />\n </>\n);\n\nexport default App;\n";},"05af7948":function(n,e,t){},"05f80574":function(n,e,t){},"0604d4d4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b5b7750d");var o="import React, { useState } from 'react';\nimport { ConfigProvider, TreeSelect } from 'antd';\n\nconst treeData = [\n {\n value: 'parent 1',\n title: 'parent 1',\n children: [\n {\n value: 'parent 1-0',\n title: 'parent 1-0',\n children: [\n {\n value: 'leaf1',\n title: 'leaf1',\n },\n {\n value: 'leaf2',\n title: 'leaf2',\n },\n ],\n },\n {\n value: 'parent 1-1',\n title: 'parent 1-1',\n children: [\n {\n value: 'leaf3',\n title: <b style={{ color: '#08c' }}>leaf3</b>,\n },\n ],\n },\n ],\n },\n];\nconst App: React.FC = () => {\n const [value, setValue] = useState<string>();\n\n const onChange = (newValue: string) => {\n setValue(newValue);\n };\n\n return (\n <ConfigProvider\n theme={{\n components: {\n TreeSelect: {\n nodeHoverBg: '#fff2f0',\n nodeSelectedBg: '#ffa39e',\n },\n },\n }}\n >\n <TreeSelect\n showSearch\n style={{ width: '100%' }}\n value={value}\n styles={{ popup: { root: { maxHeight: 400, overflow: 'auto' } } }}\n placeholder=\"Please select\"\n allowClear\n treeDefaultExpandAll\n onChange={onChange}\n treeData={treeData}\n />\n </ConfigProvider>\n );\n};\n\nexport default App;\n";},"063d7036":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1ff8f9cf");var o="import React from 'react';\nimport { ColorPicker } from 'antd';\n\nconst Demo = () => <ColorPicker defaultValue=\"#1677ff\" disabledAlpha />;\n\nexport default Demo;\n";},"06697b1c":function(n,e,t){},"071166c3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("02bbb19b");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, message, Upload } from 'antd';\n\nconst props: UploadProps = {\n name: 'file',\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n headers: {\n authorization: 'authorization-text',\n },\n onChange(info) {\n if (info.file.status !== 'uploading') {\n console.log(info.file, info.fileList);\n }\n if (info.file.status === 'done') {\n message.success(`${info.file.name} file uploaded successfully`);\n } else if (info.file.status === 'error') {\n message.error(`${info.file.name} file upload failed.`);\n }\n },\n progress: {\n strokeColor: {\n '0%': '#108ee9',\n '100%': '#87d068',\n },\n strokeWidth: 3,\n format: (percent) => percent && `${parseFloat(percent.toFixed(2))}%`,\n },\n};\n\nconst App: React.FC = () => (\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Click to Upload</Button>\n </Upload>\n);\n\nexport default App;\n";},"07437843":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("34282b08");var o="import React from 'react';\nimport { Anchor, Col, ConfigProvider, Row } from 'antd';\n\n/** Test usage. Do not use in your production. */\n\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Anchor: {\n linkPaddingBlock: 100,\n linkPaddingInlineStart: 50,\n },\n },\n }}\n >\n <Row>\n <Col span={16}>\n <div id=\"part-1\" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />\n <div id=\"part-2\" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />\n <div id=\"part-3\" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />\n </Col>\n <Col span={8}>\n <Anchor\n items={[\n {\n key: 'part-1',\n href: '#part-1',\n title: 'Part 1',\n },\n {\n key: 'part-2',\n href: '#part-2',\n title: 'Part 2',\n },\n {\n key: 'part-3',\n href: '#part-3',\n title: 'Part 3',\n },\n ]}\n />\n </Col>\n </Row>\n </ConfigProvider>\n);\n";},"074700c8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("35cd8722");var o="import React from 'react';\nimport { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';\nimport { InputNumber } from 'antd';\n\nconst App: React.FC = () => (\n <InputNumber controls={{ upIcon: <ArrowUpOutlined />, downIcon: <ArrowDownOutlined /> }} />\n);\n\nexport default App;\n";},"075388ff":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("97cf9820");var o="import React from 'react';\nimport { Slider } from 'antd';\n\nfunction getGradientColor(percentage: number) {\n const startColor = [135, 208, 104];\n const endColor = [255, 204, 199];\n\n const midColor = startColor.map((start, i) => {\n const end = endColor[i];\n const delta = end - start;\n return (start + delta * percentage).toFixed(0);\n });\n\n return `rgb(${midColor.join(',')})`;\n}\n\nconst App: React.FC = () => {\n const [value, setValue] = React.useState([0, 10, 20]);\n\n const start = value[0] / 100;\n const end = value[value.length - 1] / 100;\n\n return (\n <Slider\n range\n defaultValue={value}\n onChange={setValue}\n styles={{\n track: {\n background: 'transparent',\n },\n tracks: {\n background: `linear-gradient(to right, ${getGradientColor(start)} 0%, ${getGradientColor(\n end,\n )} 100%)`,\n },\n }}\n />\n );\n};\n\nexport default App;\n";},"07712d4a":function(n,e,t){},"078f22c2":function(n,e,t){},"07976629":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8c1eed3f");var o="import React, { useState } from 'react';\nimport { Button, Drawer } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showDrawer}>\n Open\n </Button>\n <Drawer\n title=\"Drawer without mask\"\n placement=\"right\"\n mask={false}\n onClose={onClose}\n open={open}\n styles={{\n mask: {\n width: 333,\n background: 'red',\n borderRadius: 20,\n boxShadow: '-5px 0 5px green',\n overflow: 'hidden',\n },\n }}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n";},"079c47f2":function(n,e,t){},"079c9782":function(n,e,t){},"07c76048":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("04fc099e");var o='import React from \'react\';\nimport { Divider } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider>Text</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="left">Left Text</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="right">Right Text</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="left" orientationMargin="0">\n Left Text with 0 orientationMargin\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="right" orientationMargin={50}>\n Right Text with 50px orientationMargin\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n </>\n);\n\nexport default App;\n';},"07edf56d":function(n,e,t){},"07efc0ec":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1a4e5589");var o="import React from 'react';\nimport { Button, message } from 'antd';\n\nconst info = () => {\n message.info('This is a normal message');\n};\n\nconst App: React.FC = () => (\n <Button type=\"primary\" onClick={info}>\n Static Method\n </Button>\n);\n\nexport default App;\n";},"07fedc13":function(n,e,t){},"0819c524":function(n,e,t){},"08214589":function(n,e,t){},"082dc265":function(n,e,t){},"083338b7":function(n,e,t){},"0850e5b9":function(n,e,t){},"08afc965":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("03c60420");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => (\n <Cascader options={options} onChange={onChange} placeholder=\"Please select\" />\n);\n\nexport default App;\n";},"08db1c79":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bb417813");var o='import React from \'react\';\nimport { Avatar, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space>\n <Avatar shape="circle" src="http://abc.com/not-exist.jpg">\n A\n </Avatar>\n <Avatar shape="circle" src="http://abc.com/not-exist.jpg">\n ABC\n </Avatar>\n </Space>\n);\n\nexport default App;\n';},"08fbead6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a0f7c627");var o="import React from 'react';\nimport { Popover } from 'antd';\nimport type { PopoverProps } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20 (\u5305\u542B\u7BAD\u5934\u3001\u5185\u5BB9\u5143\u7D20)',\n body: '\u5185\u5BB9\u5143\u7D20',\n },\n en: {\n root: 'Root element (including arrows, content elements)',\n body: 'Body element',\n },\n};\n\nconst BlockList: React.FC<React.PropsWithChildren<PopoverProps>> = (props) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n const { children, ...rest } = props;\n return (\n <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>\n <Popover\n title=\"prompt text\"\n open\n placement=\"top\"\n autoAdjustOverflow={false}\n getPopupContainer={() => divRef.current!}\n {...rest}\n >\n {children}\n </Popover>\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Popover\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.23.0' },\n { name: 'body', desc: locale.body, version: '5.23.0' },\n ]}\n >\n <BlockList />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},"0912217a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("de2d61bb");var o='import React from \'react\';\nimport { Form, Input, InputNumber, Typography } from \'antd\';\n\nconst Demo: React.FC = () => {\n const [form] = Form.useForm<{ name: string; age: number }>();\n const nameValue = Form.useWatch(\'name\', form);\n // The selector is static and does not support closures.\n const customValue = Form.useWatch((values) => `name: ${values.name || \'\'}`, form);\n\n return (\n <>\n <Form form={form} layout="vertical" autoComplete="off">\n <Form.Item name="name" label="Name (Watch to trigger rerender)">\n <Input />\n </Form.Item>\n <Form.Item name="age" label="Age (Not Watch)">\n <InputNumber />\n </Form.Item>\n </Form>\n\n <Typography>\n <pre>Name Value: {nameValue}</pre>\n <pre>Custom Value: {customValue}</pre>\n </Typography>\n </>\n );\n};\n\nexport default Demo;\n';},"09206736":function(n,e,t){},"093fb432":function(n,e,t){},"09808c75":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9304e17a");var o="import React from 'react';\nimport type { TimePickerProps } from 'antd';\nimport { TimePicker } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst onChange: TimePickerProps['onChange'] = (time, timeString) => {\n console.log(time, timeString);\n};\n\nconst App: React.FC = () => <TimePicker onChange={onChange} changeOnScroll needConfirm={false} />;\n\nexport default App;\n";},"098c8906":function(n,e,t){},"09b87bdb":function(n,e,t){},"09c9f19a":function(n,e,t){},"09dd0b4d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1e3152e7");var o="import React from 'react';\nimport { Slider } from 'antd';\nimport type { SliderSingleProps } from 'antd';\n\nconst style: React.CSSProperties = {\n display: 'inline-block',\n height: 300,\n marginInlineStart: 70,\n};\n\nconst marks: SliderSingleProps['marks'] = {\n 0: '0\xb0C',\n 26: '26\xb0C',\n 37: '37\xb0C',\n 100: {\n style: { color: '#f50' },\n label: <strong>100\xb0C</strong>,\n },\n};\n\nconst App: React.FC = () => (\n <>\n <div style={style}>\n <Slider vertical defaultValue={30} />\n </div>\n <div style={style}>\n <Slider vertical range step={10} defaultValue={[20, 50]} />\n </div>\n <div style={style}>\n <Slider vertical range marks={marks} defaultValue={[26, 37]} />\n </div>\n </>\n);\n\nexport default App;\n";},"09ee00f1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3647da4c");var o='import React from \'react\';\nimport { Divider } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n Text\n <Divider type="vertical" />\n <a href="#">Link</a>\n <Divider type="vertical" />\n <a href="#">Link</a>\n </>\n);\n\nexport default App;\n';},"0a205ee5":function(n,e,t){},"0a2c4e6b":function(n,e,t){},"0a6d7035":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("16fada1b");var o="import React from 'react';\nimport { Badge, Descriptions, Table } from 'antd';\nimport type { DescriptionsProps, TableProps } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst dataSource: DataType[] = [\n {\n key: '1',\n name: '\u80E1\u5F66\u658C',\n age: 32,\n address: '\u897F\u6E56\u533A\u6E56\u5E95\u516C\u56ED1\u53F7',\n },\n {\n key: '2',\n name: '\u80E1\u5F66\u7956',\n age: 42,\n address: '\u897F\u6E56\u533A\u6E56\u5E95\u516C\u56ED1\u53F7',\n },\n];\n\nconst columns: TableProps<DataType>['columns'] = [\n {\n title: '\u59D3\u540D',\n dataIndex: 'name',\n key: 'name',\n },\n {\n title: '\u5E74\u9F84',\n dataIndex: 'age',\n key: 'age',\n },\n {\n title: '\u4F4F\u5740',\n dataIndex: 'address',\n key: 'address',\n },\n];\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: <div style={{ display: 'flex' }}>Billing Mode</div>,\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Automatic Renewal',\n children: 'YES',\n },\n {\n key: '4',\n label: 'Order time',\n children: '2018-04-24 18:00:00',\n },\n {\n key: '5',\n label: 'Usage Time',\n span: 2,\n children: '2019-04-24 18:00:00',\n },\n {\n key: '6',\n label: 'Status',\n span: 3,\n children: <Badge status=\"processing\" text=\"Running\" />,\n },\n {\n key: '7',\n label: 'Negotiated Amount',\n children: '$80.00',\n },\n {\n key: '8',\n label: 'Discount',\n children: '$20.00',\n },\n {\n key: '9',\n label: 'Official Receipts',\n children: '$60.00',\n },\n {\n key: '10',\n label: 'Config Info',\n children: (\n <>\n Data disk type: MongoDB\n <br />\n Database version: 3.4\n <br />\n Package: dds.mongo.mid\n <br />\n Storage space: 10 GB\n <br />\n Replication factor: 3\n <br />\n Region: East China 1\n <br />\n </>\n ),\n },\n {\n key: '11',\n label: 'Official Receipts',\n children: '$60.00',\n },\n {\n key: '12',\n label: 'Config Info',\n children: (\n <Table<DataType> size=\"small\" pagination={false} dataSource={dataSource} columns={columns} />\n ),\n },\n];\n\nconst App: React.FC = () => <Descriptions title=\"User Info\" column={2} items={items} />;\n\nexport default App;\n";},"0a70b260":function(n,e,t){},"0aa94798":function(n,e,t){},"0ab6a6d2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("651869ff");var o='import React from \'react\';\nimport { ConfigProvider, Radio, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Radio: {\n radioSize: 20,\n dotSize: 10,\n dotColorDisabled: \'grey\',\n buttonBg: \'#f6ffed\',\n buttonCheckedBg: \'#d9f7be\',\n buttonColor: \'#faad14\',\n buttonPaddingInline: 20,\n buttonCheckedBgDisabled: \'#fffbe6\',\n buttonCheckedColorDisabled: \'#ffe58f\',\n buttonSolidCheckedColor: \'#ffa39e\',\n wrapperMarginInlineEnd: 20,\n },\n },\n }}\n >\n <Space direction="vertical">\n <Radio checked>Test</Radio>\n <Radio checked disabled>\n Disabled\n </Radio>\n <Radio.Group defaultValue="a">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n <Radio.Group defaultValue="a" disabled>\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n <Radio.Group defaultValue="a" buttonStyle="solid">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n </Space>\n </ConfigProvider>\n);\n\nexport default App;\n';},"0b358f15":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5fd028c3");var o="import React from 'react';\nimport { Flex, Select } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap={12} vertical>\n <Flex gap={8}>\n <Select\n value=\"lucy\"\n disabled\n variant=\"filled\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n <Select\n value=\"lucy\"\n disabled\n mode=\"multiple\"\n variant=\"filled\"\n placeholder=\"Outlined\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n </Flex>\n <Flex gap={8}>\n <Select\n value=\"lucy\"\n status=\"error\"\n variant=\"filled\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n <Select\n value=\"lucy\"\n status=\"error\"\n mode=\"multiple\"\n variant=\"filled\"\n placeholder=\"Outlined\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n </Flex>\n <Flex gap={8}>\n <Select\n disabled\n value=\"lucy\"\n status=\"error\"\n variant=\"filled\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n <Select\n disabled\n value=\"lucy\"\n status=\"error\"\n mode=\"multiple\"\n variant=\"filled\"\n placeholder=\"Outlined\"\n style={{ flex: 1 }}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n ]}\n />\n </Flex>\n </Flex>\n);\n\nexport default App;\n";},"0b688409":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("76d914db");var o='import React from \'react\';\nimport type { FormProps } from \'antd\';\nimport { Button, Checkbox, Form, Input } from \'antd\';\n\ntype FieldType = {\n username?: string;\n password?: string;\n remember?: string;\n};\n\nconst onFinish: FormProps<FieldType>[\'onFinish\'] = (values) => {\n console.log(\'Success:\', values);\n};\n\nconst onFinishFailed: FormProps<FieldType>[\'onFinishFailed\'] = (errorInfo) => {\n console.log(\'Failed:\', errorInfo);\n};\n\nconst App: React.FC = () => (\n <Form\n name="basic"\n labelCol={{ span: 8 }}\n wrapperCol={{ span: 16 }}\n style={{ maxWidth: 600 }}\n initialValues={{ remember: true }}\n onFinish={onFinish}\n onFinishFailed={onFinishFailed}\n autoComplete="off"\n >\n <Form.Item<FieldType>\n label="Username"\n name="username"\n rules={[{ required: true, message: \'Please input your username!\' }]}\n >\n <Input />\n </Form.Item>\n\n <Form.Item<FieldType>\n label="Password"\n name="password"\n rules={[{ required: true, message: \'Please input your password!\' }]}\n >\n <Input.Password />\n </Form.Item>\n\n <Form.Item<FieldType> name="remember" valuePropName="checked" label={null}>\n <Checkbox>Remember me</Checkbox>\n </Form.Item>\n\n <Form.Item label={null}>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},"0bb25e56":function(n,e,t){},"0c2423fa":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c825164e");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent } from 'antd';\nimport { Radio } from 'antd';\nimport type { CheckboxGroupProps } from 'antd/es/checkbox';\n\nconst plainOptions: CheckboxGroupProps<string>['options'] = ['Apple', 'Pear', 'Orange'];\n\nconst options: CheckboxGroupProps<string>['options'] = [\n { label: 'Apple', value: 'Apple', className: 'label-1' },\n { label: 'Pear', value: 'Pear', className: 'label-2' },\n { label: 'Orange', value: 'Orange', title: 'Orange', className: 'label-3' },\n];\n\nconst optionsWithDisabled: CheckboxGroupProps<string>['options'] = [\n { label: 'Apple', value: 'Apple', className: 'label-1' },\n { label: 'Pear', value: 'Pear', className: 'label-2' },\n { label: 'Orange', value: 'Orange', className: 'label-3', disabled: true },\n];\n\nconst App: React.FC = () => {\n const [value1, setValue1] = useState('Apple');\n const [value2, setValue2] = useState('Apple');\n const [value3, setValue3] = useState('Apple');\n const [value4, setValue4] = useState('Apple');\n\n const onChange1 = ({ target: { value } }: RadioChangeEvent) => {\n console.log('radio1 checked', value);\n setValue1(value);\n };\n\n const onChange2 = ({ target: { value } }: RadioChangeEvent) => {\n console.log('radio2 checked', value);\n setValue2(value);\n };\n\n const onChange3 = ({ target: { value } }: RadioChangeEvent) => {\n console.log('radio3 checked', value);\n setValue3(value);\n };\n\n const onChange4 = ({ target: { value } }: RadioChangeEvent) => {\n console.log('radio4 checked', value);\n setValue4(value);\n };\n\n return (\n <>\n <Radio.Group options={plainOptions} onChange={onChange1} value={value1} />\n <br />\n <Radio.Group options={optionsWithDisabled} onChange={onChange2} value={value2} />\n <br />\n <br />\n <Radio.Group options={options} onChange={onChange3} value={value3} optionType=\"button\" />\n <br />\n <br />\n <Radio.Group\n options={optionsWithDisabled}\n onChange={onChange4}\n value={value4}\n optionType=\"button\"\n buttonStyle=\"solid\"\n />\n </>\n );\n};\n\nexport default App;\n";},"0c622cab":function(n,e,t){},"0c6d3e9b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f71a8873");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" wrap>\n <Progress type="circle" percent={75} />\n <Progress type="circle" percent={70} status="exception" />\n <Progress type="circle" percent={100} />\n </Flex>\n);\n\nexport default App;\n';},"0c71447d":function(n,e,t){},"0c8f9b72":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9d260d4f");var o="import React from 'react';\nimport { Button, Form, Mentions, Space } from 'antd';\n\nconst { getMentions } = Mentions;\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n\n const onReset = () => {\n form.resetFields();\n };\n\n const onFinish = async () => {\n try {\n const values = await form.validateFields();\n console.log('Submit:', values);\n } catch (errInfo) {\n console.log('Error:', errInfo);\n }\n };\n\n const checkMention = async (_: any, value: string) => {\n const mentions = getMentions(value);\n\n if (mentions.length < 2) {\n throw new Error('More than one must be selected!');\n }\n };\n\n return (\n <Form form={form} layout=\"horizontal\" onFinish={onFinish}>\n <Form.Item\n name=\"coders\"\n label=\"Top coders\"\n labelCol={{ span: 6 }}\n wrapperCol={{ span: 16 }}\n rules={[{ validator: checkMention }]}\n >\n <Mentions\n rows={1}\n options={[\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n {\n value: 'yesmeck',\n label: 'yesmeck',\n },\n ]}\n />\n </Form.Item>\n <Form.Item\n name=\"bio\"\n label=\"Bio\"\n labelCol={{ span: 6 }}\n wrapperCol={{ span: 16 }}\n rules={[{ required: true }]}\n >\n <Mentions\n rows={3}\n placeholder=\"You can use @ to ref user here\"\n options={[\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n {\n value: 'yesmeck',\n label: 'yesmeck',\n },\n ]}\n />\n </Form.Item>\n <Form.Item wrapperCol={{ span: 14, offset: 6 }}>\n <Space wrap>\n <Button htmlType=\"submit\" type=\"primary\">\n Submit\n </Button>\n <Button htmlType=\"button\" onClick={onReset}>\n Reset\n </Button>\n </Space>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n";},"0c90fe35":function(n,e,t){},"0ca9c2b7":function(n,e,t){},"0cc943b2":function(n,e,t){},"0cea2589":function(n,e,t){},"0cf5f046":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b4643e1b");var o="import React, { useEffect, useState } from 'react';\nimport { Avatar, List, message } from 'antd';\nimport VirtualList from 'rc-virtual-list';\n\ninterface UserItem {\n email: string;\n gender: string;\n name: string;\n avatar: string;\n}\n\nconst CONTAINER_HEIGHT = 400;\nconst PAGE_SIZE = 20;\n\nconst App: React.FC = () => {\n const [data, setData] = useState<UserItem[]>([]);\n const [page, setPage] = useState(1);\n\n const appendData = (showMessage = true) => {\n const fakeDataUrl = `https://660d2bd96ddfa2943b33731c.mockapi.io/api/users/?page=${page}&limit=${PAGE_SIZE}`;\n fetch(fakeDataUrl)\n .then((res) => res.json())\n .then((body) => {\n const results = Array.isArray(body) ? body : [];\n setData(data.concat(results));\n setPage(page + 1);\n showMessage && message.success(`${results.length} more items loaded!`);\n });\n };\n\n useEffect(() => {\n appendData(false);\n }, []);\n\n const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {\n // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions\n if (\n Math.abs(e.currentTarget.scrollHeight - e.currentTarget.scrollTop - CONTAINER_HEIGHT) <= 1\n ) {\n appendData();\n }\n };\n\n return (\n <List>\n <VirtualList\n data={data}\n height={CONTAINER_HEIGHT}\n itemHeight={47}\n itemKey=\"email\"\n onScroll={onScroll}\n >\n {(item: UserItem) => (\n <List.Item key={item.email}>\n <List.Item.Meta\n avatar={<Avatar src={item.avatar} />}\n title={<a href=\"https://ant.design\">{item.name}</a>}\n description={item.email}\n />\n <div>Content</div>\n </List.Item>\n )}\n </VirtualList>\n </List>\n );\n};\n\nexport default App;\n";},"0d1dfc98":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b32ffe9a");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hanzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => <Cascader options={options} onChange={onChange} changeOnSelect />;\n\nexport default App;\n";},"0d220f5a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9d568652");var o="import React from 'react';\nimport { ConfigProvider, Image } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Image: {\n previewOperationSize: 20,\n previewOperationColor: '#222',\n previewOperationColorDisabled: '#b20000',\n },\n },\n }}\n >\n <Image.PreviewGroup\n preview={{ countRender: (current, total) => `\u5F53\u524D ${current} / \u603B\u8BA1 ${total}` }}\n >\n <Image\n width={150}\n src=\"https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg\"\n />\n <Image\n width={150}\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n />\n </Image.PreviewGroup>\n </ConfigProvider>\n);\n\nexport default App;\n";},"0ddedff0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dcaca8e4");var o="import React from 'react';\nimport { Affix, Button } from 'antd';\n\nconst App: React.FC = () => (\n <Affix offsetTop={120} onChange={(affixed) => console.log(affixed)}>\n <Button>120px to affix top</Button>\n </Affix>\n);\n\nexport default App;\n";},"0de3bac3":function(n,e,t){},"0e13f12e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5c269100");var o="import React from 'react';\nimport { Flex, Segmented } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"small\" align=\"flex-start\" vertical>\n <Segmented size=\"large\" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />\n <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />\n <Segmented size=\"small\" options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />\n </Flex>\n);\n\nexport default App;\n";},"0e3bed0e":function(n,e,t){},"0e50deaf":function(n,e,t){},"0e892cec":function(n,e,t){},"0e8e8a0f":function(n,e,t){},"0e9dbb48":function(n,e,t){},"0ee39561":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("019c43a7");var o="import React from 'react';\nimport { Button, notification } from 'antd';\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotification = () => {\n api.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n className: 'custom-class',\n style: {\n width: 600,\n },\n });\n };\n\n return (\n <>\n {contextHolder}\n <Button type=\"primary\" onClick={openNotification}>\n Open the notification box\n </Button>\n </>\n );\n};\nexport default App;\n";},"0f1a85e8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e1a70461");var o="import React from 'react';\nimport { Carousel } from 'antd';\n\nconst contentStyle: React.CSSProperties = {\n margin: 0,\n height: '160px',\n color: '#fff',\n lineHeight: '160px',\n textAlign: 'center',\n background: '#364d79',\n};\n\nconst App: React.FC = () => (\n <>\n <Carousel arrows infinite={false}>\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n <br />\n <Carousel arrows dotPosition=\"left\" infinite={false}>\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n </>\n);\n\nexport default App;\n";},"0f1d0b1d":function(n,e,t){},"0f29991d":function(n,e,t){},"0f3a0775":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3cd782c1");var o='import React from \'react\';\nimport { Button, Empty, Typography } from \'antd\';\n\nconst App: React.FC = () => (\n <Empty\n image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"\n styles={{ image: { height: 60 } }}\n description={\n <Typography.Text>\n Customize <a href="#API">Description</a>\n </Typography.Text>\n }\n >\n <Button type="primary">Create Now</Button>\n </Empty>\n);\n\nexport default App;\n';},"0fb44363":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3b0ea392");var o="import React from 'react';\nimport { UserOutlined } from '@ant-design/icons';\nimport { Avatar, Space } from 'antd';\n\nconst url = 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg';\n\nconst App: React.FC = () => (\n <Space size={16} wrap>\n <Avatar icon={<UserOutlined />} />\n <Avatar>U</Avatar>\n <Avatar size={40}>USER</Avatar>\n <Avatar src={url} />\n <Avatar src={<img src={url} alt=\"avatar\" />} />\n <Avatar style={{ backgroundColor: '#fde3cf', color: '#f56a00' }}>U</Avatar>\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n </Space>\n);\n\nexport default App;\n";},"0fef50f8":function(n,e,t){},"101070f0":function(n,e,t){},"102cac6c":function(n,e,t){},"107cac9d":function(n,e,t){},"108c25ad":function(n,e,t){},"1091505d":function(n,e,t){},"109558d4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e4022d1e");var o='import React from \'react\';\nimport { Avatar, Badge, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space size="middle">\n <Badge size="default" count={5}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge size="small" count={5}>\n <Avatar shape="square" size="large" />\n </Badge>\n </Space>\n);\n\nexport default App;\n';},"10a5a1b5":function(n,e,t){},"10e347f8":function(n,e,t){},"10fd14ae":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9a420ac9");var o='import React from \'react\';\nimport { Flex, Input } from \'antd\';\n\nconst { TextArea } = Input;\n\nconst App: React.FC = () => (\n <Flex vertical gap={20}>\n <Flex gap={12}>\n <Input placeholder="Filled" variant="filled" />\n <Input placeholder="Filled" variant="filled" disabled />\n <Input placeholder="Filled" variant="filled" status="error" value="Filled Error" />\n </Flex>\n <Flex gap={12}>\n <Input prefix="$" placeholder="Filled" variant="filled" />\n <Input prefix="$" placeholder="Filled" variant="filled" disabled />\n <Input prefix="$" placeholder="Filled" variant="filled" status="error" value="Filled Error" />\n </Flex>\n <Flex gap={12}>\n <Input addonBefore="http://" addonAfter=".com" placeholder="Filled" variant="filled" />\n <Input\n addonBefore="http://"\n addonAfter=".com"\n placeholder="Filled"\n variant="filled"\n disabled\n />\n <Input\n addonBefore="http://"\n addonAfter=".com"\n placeholder="Filled"\n variant="filled"\n status="error"\n value="Filled Error"\n />\n </Flex>\n <Flex gap={12}>\n <Input addonAfter=".com" placeholder="Filled" variant="filled" />\n <Input addonAfter=".com" placeholder="Filled" variant="filled" disabled />\n <Input\n addonAfter=".com"\n placeholder="Filled"\n variant="filled"\n status="error"\n value="Filled Error"\n />\n </Flex>\n <Flex gap={12}>\n <Input addonBefore="http://" placeholder="Filled" variant="filled" />\n <Input addonBefore="http://" placeholder="Filled" variant="filled" disabled />\n <Input\n addonBefore="http://"\n placeholder="Filled"\n variant="filled"\n status="error"\n value="Filled Error"\n />\n </Flex>\n <TextArea variant="filled" placeholder="Basic" />\n <TextArea variant="filled" placeholder="Basic" status="error" value="Filled Error" />\n <TextArea variant="filled" placeholder="Allow Clear" allowClear />\n <TextArea variant="filled" placeholder="Show Count" showCount />\n <TextArea\n variant="filled"\n placeholder="Show Count"\n showCount\n status="error"\n value="Filled Error"\n />\n </Flex>\n);\n\nexport default App;\n';},"110ee3ec":function(n,e,t){},"1110c9c4":function(n,e,t){},11710614:function(n,e,t){},"11792f28":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("66c0bc2c");var o="import React from 'react';\nimport { Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Row>\n <Col span={8}>col-8</Col>\n <Col span={8} offset={8}>\n col-8\n </Col>\n </Row>\n <Row>\n <Col span={6} offset={6}>\n col-6 col-offset-6\n </Col>\n <Col span={6} offset={6}>\n col-6 col-offset-6\n </Col>\n </Row>\n <Row>\n <Col span={12} offset={6}>\n col-12 col-offset-6\n </Col>\n </Row>\n </>\n);\n\nexport default App;\n";},"11cc0831":function(n,e,t){},"11d08909":function(n,e,t){},"11d31c87":function(n,e,t){},"11d7ebd8":function(n,e,t){},"11e0ddee":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c27a2a3b");var o="import React from 'react';\nimport { Space, Table, Tag } from 'antd';\nimport type { TableProps } from 'antd';\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n address: string;\n tags: string[];\n}\n\nconst columns: TableProps<DataType>['columns'] = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n render: (text) => <a>{text}</a>,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n },\n {\n title: 'Tags',\n key: 'tags',\n dataIndex: 'tags',\n render: (_, { tags }) => (\n <>\n {tags.map((tag) => {\n let color = tag.length > 5 ? 'geekblue' : 'green';\n if (tag === 'loser') {\n color = 'volcano';\n }\n return (\n <Tag color={color} key={tag}>\n {tag.toUpperCase()}\n </Tag>\n );\n })}\n </>\n ),\n },\n {\n title: 'Action',\n key: 'action',\n render: (_, record) => (\n <Space size=\"middle\">\n <a>Invite {record.name}</a>\n <a>Delete</a>\n </Space>\n ),\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n tags: ['nice', 'developer'],\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n tags: ['loser'],\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n tags: ['cool', 'teacher'],\n },\n];\n\nconst App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;\n\nexport default App;\n";},"11e13fa5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f1514f5b");var o="import React from 'react';\nimport type { DatePickerProps } from 'antd';\nimport { DatePicker } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\nconst onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {\n console.log(date, dateString);\n};\n\nconst App: React.FC = () => <DatePicker onChange={onChange} needConfirm />;\n\nexport default App;\n";},"11e77e20":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("acd771c8");var o="import React from 'react';\nimport { Rate } from 'antd';\n\nconst App: React.FC = () => <Rate allowHalf defaultValue={2.5} />;\n\nexport default App;\n";},"1219a13d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("665547cc");var o="import type { CSSProperties } from 'react';\nimport React from 'react';\nimport { CaretRightOutlined } from '@ant-design/icons';\nimport type { CollapseProps } from 'antd';\nimport { Collapse, theme } from 'antd';\n\nconst 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`;\n\nconst getItems: (panelStyle: CSSProperties) => CollapseProps['items'] = (panelStyle) => [\n {\n key: '1',\n label: 'This is panel header 1',\n children: <p>{text}</p>,\n style: panelStyle,\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: <p>{text}</p>,\n style: panelStyle,\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: <p>{text}</p>,\n style: panelStyle,\n },\n];\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n\n const panelStyle: React.CSSProperties = {\n marginBottom: 24,\n background: token.colorFillAlter,\n borderRadius: token.borderRadiusLG,\n border: 'none',\n };\n\n return (\n <Collapse\n bordered={false}\n defaultActiveKey={['1']}\n expandIcon={({ isActive }) => <CaretRightOutlined rotate={isActive ? 90 : 0} />}\n style={{ background: token.colorBgContainer }}\n items={getItems(panelStyle)}\n />\n );\n};\n\nexport default App;\n";},"1219cfba":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d5ea1db2");var o="import React from 'react';\nimport { Switch } from 'antd';\n\nconst onChange = (checked: boolean) => {\n console.log(`switch to ${checked}`);\n};\n\nconst App: React.FC = () => <Switch defaultChecked onChange={onChange} />;\n\nexport default App;\n";},"121a71ca":function(n,e,t){},"124ca613":function(n,e,t){},"12584de4":function(n,e,t){},"126c75a7":function(n,e,t){},"12b1eb0a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dae3e5ac");var o='import React from \'react\';\nimport { Button, Result } from \'antd\';\n\nconst App: React.FC = () => (\n <Result\n status="success"\n title="Successfully Purchased Cloud Server ECS!"\n subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."\n extra={[\n <Button type="primary" key="console">\n Go Console\n </Button>,\n <Button key="buy">Buy Again</Button>,\n ]}\n />\n);\n\nexport default App;\n';},"12cd4581":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b3160a88");var o='import React from \'react\';\nimport { Input } from \'antd\';\n\nconst { TextArea } = Input;\n\nconst App: React.FC = () => (\n <div style={{ backgroundColor: \'rgba(0, 0, 128, .2)\' }}>\n <Input placeholder="Unbordered" variant="borderless" />\n <Input placeholder="Unbordered" variant="borderless" size="large" />\n <TextArea placeholder="Unbordered" variant="borderless" />\n <TextArea placeholder="Unbordered" variant="borderless" allowClear />\n <Input placeholder="Unbordered" variant="borderless" allowClear />\n <Input prefix="\uFFE5" suffix="RMB" variant="borderless" />\n <Input prefix="\uFFE5" suffix="RMB" disabled variant="borderless" />\n <TextArea allowClear style={{ border: \'2px solid #000\' }} />\n\n {/* status */}\n <Input defaultValue="error" variant="borderless" status="error" />\n <Input defaultValue="warning" variant="borderless" status="warning" />\n <Input prefix="$" defaultValue="error" variant="borderless" status="error" />\n <Input prefix="$" defaultValue="warning" variant="borderless" status="warning" />\n </div>\n);\n\nexport default App;\n';},"12e61fdf":function(n,e,t){},"130f119b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("be5cdaca");var o='import React from \'react\';\nimport { Button, ConfigProvider, Flex, Popover } from \'antd\';\n\nconst text = <span>Title</span>;\n\nconst content = (\n <div>\n <p>Content</p>\n <p>Content</p>\n </div>\n);\n\nconst buttonWidth = 80;\n\nconst App: React.FC = () => (\n <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>\n <Flex vertical justify="center" align="center" className="demo">\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Popover placement="topLeft" title={text} content={content}>\n <Button>TL</Button>\n </Popover>\n <Popover placement="top" title={text} content={content}>\n <Button>Top</Button>\n </Popover>\n <Popover placement="topRight" title={text} content={content}>\n <Button>TR</Button>\n </Popover>\n </Flex>\n <Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">\n <Flex align="center" vertical>\n <Popover placement="leftTop" title={text} content={content}>\n <Button>LT</Button>\n </Popover>\n <Popover placement="left" title={text} content={content}>\n <Button>Left</Button>\n </Popover>\n <Popover placement="leftBottom" title={text} content={content}>\n <Button>LB</Button>\n </Popover>\n </Flex>\n <Flex align="center" vertical>\n <Popover placement="rightTop" title={text} content={content}>\n <Button>RT</Button>\n </Popover>\n <Popover placement="right" title={text} content={content}>\n <Button>Right</Button>\n </Popover>\n <Popover placement="rightBottom" title={text} content={content}>\n <Button>RB</Button>\n </Popover>\n </Flex>\n </Flex>\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Popover placement="bottomLeft" title={text} content={content}>\n <Button>BL</Button>\n </Popover>\n <Popover placement="bottom" title={text} content={content}>\n <Button>Bottom</Button>\n </Popover>\n <Popover placement="bottomRight" title={text} content={content}>\n <Button>BR</Button>\n </Popover>\n </Flex>\n </Flex>\n </ConfigProvider>\n);\n\nexport default App;\n';},"1330c978":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1943aa9b");var o='import React from \'react\';\nimport {\n CommentOutlined,\n DownloadOutlined,\n EllipsisOutlined,\n HeartOutlined,\n LikeOutlined,\n MailOutlined,\n MobileOutlined,\n ShareAltOutlined,\n StarOutlined,\n WarningOutlined,\n} from \'@ant-design/icons\';\nimport { Button, Dropdown, Space, Tooltip } from \'antd\';\n\nconst App: React.FC = () => (\n <div>\n <Space.Compact block>\n <Tooltip title="Like">\n <Button icon={<LikeOutlined />} />\n </Tooltip>\n <Tooltip title="Comment">\n <Button icon={<CommentOutlined />} />\n </Tooltip>\n <Tooltip title="Star">\n <Button icon={<StarOutlined />} />\n </Tooltip>\n <Tooltip title="Heart">\n <Button icon={<HeartOutlined />} />\n </Tooltip>\n <Tooltip title="Share">\n <Button icon={<ShareAltOutlined />} />\n </Tooltip>\n <Tooltip title="Download">\n <Button icon={<DownloadOutlined />} />\n </Tooltip>\n <Dropdown\n placement="bottomRight"\n menu={{\n items: [\n {\n key: \'1\',\n label: \'Report\',\n icon: <WarningOutlined />,\n },\n {\n key: \'2\',\n label: \'Mail\',\n icon: <MailOutlined />,\n },\n {\n key: \'3\',\n label: \'Mobile\',\n icon: <MobileOutlined />,\n },\n ],\n }}\n trigger={[\'click\']}\n >\n <Button icon={<EllipsisOutlined />} />\n </Dropdown>\n </Space.Compact>\n <br />\n <Space.Compact block>\n <Button type="primary">Button 1</Button>\n <Button type="primary">Button 2</Button>\n <Button type="primary">Button 3</Button>\n <Button type="primary">Button 4</Button>\n <Tooltip title="Tooltip">\n <Button type="primary" icon={<DownloadOutlined />} disabled />\n </Tooltip>\n <Tooltip title="Tooltip">\n <Button type="primary" icon={<DownloadOutlined />} />\n </Tooltip>\n </Space.Compact>\n <br />\n <Space.Compact block>\n <Button>Button 1</Button>\n <Button>Button 2</Button>\n <Button>Button 3</Button>\n <Tooltip title="Tooltip">\n <Button icon={<DownloadOutlined />} disabled />\n </Tooltip>\n <Tooltip title="Tooltip">\n <Button icon={<DownloadOutlined />} />\n </Tooltip>\n <Button type="primary">Button 4</Button>\n <Dropdown\n placement="bottomRight"\n menu={{\n items: [\n {\n key: \'1\',\n label: \'1st item\',\n },\n {\n key: \'2\',\n label: \'2nd item\',\n },\n {\n key: \'3\',\n label: \'3rd item\',\n },\n ],\n }}\n trigger={[\'click\']}\n >\n <Button type="primary" icon={<EllipsisOutlined />} />\n </Dropdown>\n </Space.Compact>\n </div>\n);\n\nexport default App;\n';},"134c1950":function(n,e,t){},"1351fc36":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1614b34c");var o="import React, { useState } from 'react';\nimport { theme, Transfer, Tree } from 'antd';\nimport type { GetProp, TransferProps, TreeDataNode } from 'antd';\n\ntype TransferItem = GetProp<TransferProps, 'dataSource'>[number];\n\ninterface TreeTransferProps {\n dataSource: TreeDataNode[];\n targetKeys: TransferProps['targetKeys'];\n onChange: TransferProps['onChange'];\n}\n\n// Customize Table Transfer\nconst isChecked = (selectedKeys: React.Key[], eventKey: React.Key) =>\n selectedKeys.includes(eventKey);\n\nconst generateTree = (\n treeNodes: TreeDataNode[] = [],\n checkedKeys: TreeTransferProps['targetKeys'] = [],\n): TreeDataNode[] =>\n treeNodes.map(({ children, ...props }) => ({\n ...props,\n disabled: checkedKeys.includes(props.key as string),\n children: generateTree(children, checkedKeys),\n }));\n\nconst TreeTransfer: React.FC<TreeTransferProps> = ({\n dataSource,\n targetKeys = [],\n ...restProps\n}) => {\n const { token } = theme.useToken();\n\n const transferDataSource: TransferItem[] = [];\n function flatten(list: TreeDataNode[] = []) {\n list.forEach((item) => {\n transferDataSource.push(item as TransferItem);\n flatten(item.children);\n });\n }\n flatten(dataSource);\n\n return (\n <Transfer\n {...restProps}\n targetKeys={targetKeys}\n dataSource={transferDataSource}\n className=\"tree-transfer\"\n render={(item) => item.title!}\n showSelectAll={false}\n >\n {({ direction, onItemSelect, selectedKeys }) => {\n if (direction === 'left') {\n const checkedKeys = [...selectedKeys, ...targetKeys];\n return (\n <div style={{ padding: token.paddingXS }}>\n <Tree\n blockNode\n checkable\n checkStrictly\n defaultExpandAll\n checkedKeys={checkedKeys}\n treeData={generateTree(dataSource, targetKeys)}\n onCheck={(_, { node: { key } }) => {\n onItemSelect(key as string, !isChecked(checkedKeys, key));\n }}\n onSelect={(_, { node: { key } }) => {\n onItemSelect(key as string, !isChecked(checkedKeys, key));\n }}\n />\n </div>\n );\n }\n }}\n </Transfer>\n );\n};\n\nconst treeData: TreeDataNode[] = [\n { key: '0-0', title: '0-0' },\n {\n key: '0-1',\n title: '0-1',\n children: [\n { key: '0-1-0', title: '0-1-0' },\n { key: '0-1-1', title: '0-1-1' },\n ],\n },\n { key: '0-2', title: '0-2' },\n { key: '0-3', title: '0-3' },\n { key: '0-4', title: '0-4' },\n];\n\nconst App: React.FC = () => {\n const [targetKeys, setTargetKeys] = useState<TreeTransferProps['targetKeys']>([]);\n const onChange: TreeTransferProps['onChange'] = (keys) => {\n setTargetKeys(keys);\n };\n return <TreeTransfer dataSource={treeData} targetKeys={targetKeys} onChange={onChange} />;\n};\n\nexport default App;\n";},"135888ac":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e1abac99");var o="import React, { useState } from 'react';\nimport { Avatar, Button, Space } from 'antd';\n\ntype SizeType = 'large' | 'small' | 'default' | number;\n\nconst App: React.FC = () => {\n const [hide, setHide] = useState(true);\n const [size, setSize] = useState<SizeType>('large');\n const [scale, setScale] = useState(1);\n\n const toggle = () => {\n setHide(!hide);\n };\n\n const toggleSize = () => {\n const sizes = ['small', 'default', 'large'] as SizeType[];\n let current = sizes.indexOf(size) + 1;\n if (current > 2) {\n current = 0;\n }\n setSize(sizes[current]);\n };\n\n const changeScale = () => {\n setScale(scale === 1 ? 2 : 1);\n };\n\n return (\n <>\n <Space wrap>\n <Button onClick={toggle}>Toggle Avatar visibility</Button>\n <Button onClick={toggleSize}>Toggle Avatar size</Button>\n <Button onClick={changeScale}>Change Avatar scale</Button>\n </Space>\n <div style={{ textAlign: 'center', transform: `scale(${scale})`, marginTop: 24 }}>\n <Avatar size={size} style={{ background: '#7265e6', display: hide ? 'none' : '' }}>\n Avatar\n </Avatar>\n <Avatar\n size={size}\n src=\"invalid\"\n style={{ background: '#00a2ae', display: hide ? 'none' : '' }}\n >\n Invalid\n </Avatar>\n <div style={{ display: hide ? 'none' : '' }}>\n <Avatar size={size} style={{ background: '#7265e6' }}>\n Avatar\n </Avatar>\n <Avatar size={size} src=\"invalid\" style={{ background: '#00a2ae' }}>\n Invalid\n </Avatar>\n </div>\n </div>\n </>\n );\n};\n\nexport default App;\n";},"13aa82de":function(n,e,t){},"13daf19a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a72fc5fe");var o="import React from 'react';\nimport { Mentions, Space } from 'antd';\nimport type { GetProp, MentionProps } from 'antd';\n\ntype MentionsOptionProps = GetProp<MentionProps, 'options'>[number];\n\nconst onChange = (value: string) => {\n console.log('Change:', value);\n};\n\nconst onSelect = (option: MentionsOptionProps) => {\n console.log('select', option);\n};\n\nconst App: React.FC = () => {\n const options = [\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n {\n value: 'yesmeck',\n label: 'yesmeck',\n },\n ];\n\n return (\n <Space direction=\"vertical\">\n <Mentions\n onChange={onChange}\n onSelect={onSelect}\n defaultValue=\"@afc163\"\n status=\"error\"\n options={options}\n />\n <Mentions\n onChange={onChange}\n onSelect={onSelect}\n defaultValue=\"@afc163\"\n status=\"warning\"\n options={options}\n />\n </Space>\n );\n};\n\nexport default App;\n";},"13e2f7ca":function(n,e,t){},"141a8cab":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d94bcd53");var o='import React from \'react\';\nimport { ConfigProvider, Popover } from \'antd\';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;\n\nconst content = (\n <div>\n <p>Content</p>\n <p>Content</p>\n </div>\n);\n\nconst App: React.FC = () => (\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <InternalPopover content={content} title="Title" />\n <InternalPopover\n content={content}\n title="Title"\n placement="bottomLeft"\n style={{ width: 250 }}\n />\n </ConfigProvider>\n);\n\nexport default App;\n';},"1456d966":function(n,e,t){},"145c2aeb":function(n,e,t){},"14a0b9a5":function(n,e,t){},"14af7718":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eabf7ffe");var o="import React from 'react';\nimport { Tree } from 'antd';\nimport type { TreeDataNode } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent',\n key: '0',\n children: [\n {\n title: 'child 1',\n key: '0-0',\n disabled: true,\n },\n {\n title: 'child 2',\n key: '0-1',\n disableCheckbox: true,\n },\n ],\n },\n];\n\nconst App: React.FC = () => (\n <Tree checkable defaultSelectedKeys={['0-1']} defaultExpandAll treeData={treeData} blockNode />\n);\n\nexport default App;\n";},"14b06dd7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("46eeba52");var o='import React from \'react\';\nimport { Flex, Progress, Slider, Typography } from \'antd\';\n\nconst App: React.FC = () => {\n const [stepsCount, setStepsCount] = React.useState<number>(5);\n const [stepsGap, setStepsGap] = React.useState<number>(7);\n return (\n <>\n <Typography.Title level={5}>Custom count:</Typography.Title>\n <Slider min={2} max={10} value={stepsCount} onChange={setStepsCount} />\n <Typography.Title level={5}>Custom gap:</Typography.Title>\n <Slider step={4} min={0} max={40} value={stepsGap} onChange={setStepsGap} />\n <Flex wrap gap="middle" style={{ marginTop: 16 }}>\n <Progress\n type="dashboard"\n steps={8}\n percent={50}\n trailColor="rgba(0, 0, 0, 0.06)"\n strokeWidth={20}\n />\n <Progress\n type="circle"\n percent={100}\n steps={{ count: stepsCount, gap: stepsGap }}\n trailColor="rgba(0, 0, 0, 0.06)"\n strokeWidth={20}\n />\n </Flex>\n </>\n );\n};\n\nexport default App;\n';},"14c64107":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3525336d");var o='import React from \'react\';\nimport { Flex, Radio } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap="middle">\n <Radio.Group defaultValue="a" buttonStyle="solid">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n <Radio.Group defaultValue="c" buttonStyle="solid">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b" disabled>\n Shanghai\n </Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n </Flex>\n);\n\nexport default App;\n';},"14d02d92":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("71da1883");var o='import React from \'react\';\nimport {\n FacebookOutlined,\n LinkedinOutlined,\n TwitterOutlined,\n YoutubeOutlined,\n} from \'@ant-design/icons\';\nimport { Flex, Tag } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="4px 0" wrap>\n <Tag icon={<TwitterOutlined />} color="#55acee">\n Twitter\n </Tag>\n <Tag icon={<YoutubeOutlined />} color="#cd201f">\n Youtube\n </Tag>\n <Tag icon={<FacebookOutlined />} color="#3b5999">\n Facebook\n </Tag>\n <Tag icon={<LinkedinOutlined />} color="#55acee">\n LinkedIn\n </Tag>\n </Flex>\n);\n\nexport default App;\n';},"14d63102":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3e157b64");var o='import React from \'react\';\nimport { Button, Flex } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex wrap gap="small" className="site-button-ghost-wrapper">\n <Button type="primary" ghost>\n Primary\n </Button>\n <Button ghost>Default</Button>\n <Button type="dashed" ghost>\n Dashed\n </Button>\n <Button type="primary" danger ghost>\n Danger\n </Button>\n </Flex>\n);\n\nexport default App;\n';},"14d7979d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a54a22bf");var o="import React from 'react';\nimport { FloatButton } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <FloatButton\n style={{ insetBlockEnd: 108 }}\n tooltip={{\n // tooltipProps is supported starting from version 5.25.0.\n title: 'Since 5.25.0+',\n color: 'blue',\n placement: 'top',\n }}\n />\n <FloatButton tooltip={<div>Documents</div>} />\n </>\n);\n\nexport default App;\n";},"1543a54d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("13aa82de");var o="import React, { useEffect, useState } from 'react';\nimport { Anchor, Col, Row } from 'antd';\n\nconst style: React.CSSProperties = {\n height: '30vh',\n backgroundColor: 'rgba(0, 0, 0, 0.85)',\n position: 'fixed',\n top: 0,\n insetInlineStart: 0,\n width: '75%',\n color: '#fff',\n};\n\nconst App: React.FC = () => {\n const topRef = React.useRef<HTMLDivElement>(null);\n const [targetOffset, setTargetOffset] = useState<number>();\n\n useEffect(() => {\n setTargetOffset(topRef.current?.clientHeight);\n }, []);\n\n return (\n <div>\n <Row>\n <Col span={18}>\n <div\n id=\"part-1\"\n style={{ height: '100vh', background: 'rgba(255,0,0,0.02)', marginTop: '30vh' }}\n >\n Part 1\n </div>\n <div id=\"part-2\" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }}>\n Part 2\n </div>\n <div id=\"part-3\" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }}>\n Part 3\n </div>\n </Col>\n <Col span={6}>\n <Anchor\n targetOffset={targetOffset}\n items={[\n { key: 'part-1', href: '#part-1', title: 'Part 1' },\n { key: 'part-2', href: '#part-2', title: 'Part 2' },\n { key: 'part-3', href: '#part-3', title: 'Part 3' },\n ]}\n />\n </Col>\n </Row>\n <div style={style} ref={topRef}>\n <div>Fixed Top Block</div>\n </div>\n </div>\n );\n};\n\nexport default App;\n";},"1547f532":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5f56afff");var o="import React from 'react';\nimport {\n DownOutlined,\n FrownFilled,\n FrownOutlined,\n MehOutlined,\n SmileOutlined,\n} from '@ant-design/icons';\nimport { Tree } from 'antd';\nimport type { TreeDataNode } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 1',\n key: '0-0',\n icon: <SmileOutlined />,\n children: [\n {\n title: 'leaf',\n key: '0-0-0',\n icon: <MehOutlined />,\n },\n {\n title: 'leaf',\n key: '0-0-1',\n icon: ({ selected }) => (selected ? <FrownFilled /> : <FrownOutlined />),\n },\n ],\n },\n];\n\nconst App: React.FC = () => (\n <Tree\n showIcon\n defaultExpandAll\n defaultSelectedKeys={['0-0-0']}\n switcherIcon={<DownOutlined />}\n treeData={treeData}\n />\n);\n\nexport default App;\n";},"159144ba":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("35be718c");var o="import React, { useState } from 'react';\nimport { AutoComplete, Input } from 'antd';\nimport type { AutoCompleteProps } from 'antd';\n\nconst getRandomInt = (max: number, min = 0) => Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst searchResult = (query: string) =>\n Array.from({ length: getRandomInt(5) })\n .join('.')\n .split('.')\n .map((_, idx) => {\n const category = `${query}${idx}`;\n return {\n value: category,\n label: (\n <div\n style={{\n display: 'flex',\n justifyContent: 'space-between',\n }}\n >\n <span>\n Found {query} on{' '}\n <a\n href={`https://s.taobao.com/search?q=${query}`}\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n {category}\n </a>\n </span>\n <span>{getRandomInt(200, 100)} results</span>\n </div>\n ),\n };\n });\n\nconst App: React.FC = () => {\n const [options, setOptions] = useState<AutoCompleteProps['options']>([]);\n\n const handleSearch = (value: string) => {\n setOptions(value ? searchResult(value) : []);\n };\n\n const onSelect = (value: string) => {\n console.log('onSelect', value);\n };\n\n return (\n <AutoComplete\n popupMatchSelectWidth={252}\n style={{ width: 300 }}\n options={options}\n onSelect={onSelect}\n onSearch={handleSearch}\n >\n <Input.Search size=\"large\" placeholder=\"input here\" enterButton />\n </AutoComplete>\n );\n};\n\nexport default App;\n";},"15b75b35":function(n,e,t){},"15b9b13b":function(n,e,t){},"1614b34c":function(n,e,t){},"1624d22b":function(n,e,t){},"163a3e78":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("77cfdf0c");var o="import React, { useState } from 'react';\nimport {\n FileExcelTwoTone,\n FilePdfTwoTone,\n FileWordTwoTone,\n LoadingOutlined,\n PaperClipOutlined,\n PictureTwoTone,\n PlusOutlined,\n} from '@ant-design/icons';\nimport { Image, Upload } from 'antd';\nimport type { GetProp, UploadFile, UploadProps } from 'antd';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst getBase64 = (file: FileType): Promise<string> =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = (error) => reject(error);\n });\n\nconst App: React.FC = () => {\n const [previewOpen, setPreviewOpen] = useState(false);\n const [previewImage, setPreviewImage] = useState('');\n const [fileList, setFileList] = useState<UploadFile[]>([\n {\n uid: '-2',\n name: 'pdf.pdf',\n status: 'done',\n url: 'http://cdn07.foxitsoftware.cn/pub/foxit/cpdf/FoxitCompanyProfile.pdf',\n },\n {\n uid: '-3',\n name: 'doc.doc',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.doc',\n },\n {\n uid: '-4',\n name: 'image.png',\n status: 'error',\n },\n {\n uid: '-5',\n name: 'pdf.pdf',\n status: 'error',\n },\n {\n uid: '-6',\n name: 'doc.doc',\n status: 'error',\n },\n ]);\n\n const handlePreview = async (file: UploadFile) => {\n if (!file.url && !file.preview) {\n file.preview = await getBase64(file.originFileObj as FileType);\n }\n\n setPreviewOpen(true);\n setPreviewImage(file.url || (file.preview as string));\n };\n\n const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>\n setFileList(newFileList);\n\n const handleIconRender: UploadProps['iconRender'] = (file, listType) => {\n const fileSufIconList = [\n { type: <FilePdfTwoTone />, suf: ['.pdf'] },\n { type: <FileExcelTwoTone />, suf: ['.xlsx', '.xls', '.csv'] },\n { type: <FileWordTwoTone />, suf: ['.doc', '.docx'] },\n {\n type: <PictureTwoTone />,\n suf: ['.webp', '.svg', '.png', '.gif', '.jpg', '.jpeg', '.jfif', '.bmp', '.dpg'],\n },\n ];\n // console.log(1, file, listType);\n let icon = file.status === 'uploading' ? <LoadingOutlined /> : <PaperClipOutlined />;\n if (listType === 'picture' || listType === 'picture-card' || listType === 'picture-circle') {\n if (listType === 'picture-card' && file.status === 'uploading') {\n icon = <LoadingOutlined />; // or icon = 'uploading...';\n } else {\n fileSufIconList.forEach((item) => {\n if (item.suf.includes(file.name.slice(file.name.lastIndexOf('.')))) {\n icon = item.type;\n }\n });\n }\n }\n return icon;\n };\n\n const uploadButton = (\n <button style={{ border: 0, background: 'none' }} type=\"button\">\n <PlusOutlined />\n <div style={{ marginTop: 8 }}>Upload</div>\n </button>\n );\n\n return (\n <>\n <Upload\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n listType=\"picture-card\"\n fileList={fileList}\n onPreview={handlePreview}\n onChange={handleChange}\n iconRender={handleIconRender}\n >\n {fileList.length >= 8 ? null : uploadButton}\n </Upload>\n {previewImage && (\n <Image\n wrapperStyle={{ display: 'none' }}\n preview={{\n visible: previewOpen,\n onVisibleChange: (visible) => setPreviewOpen(visible),\n afterOpenChange: (visible) => !visible && setPreviewImage(''),\n }}\n src={previewImage}\n />\n )}\n </>\n );\n};\n\nexport default App;\n";},"163db498":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fd424958");var o="import React, { useContext, useEffect, useRef, useState } from 'react';\nimport type { GetRef, InputRef, TableProps } from 'antd';\nimport { Button, Form, Input, Popconfirm, Table } from 'antd';\n\ntype FormInstance<T> = GetRef<typeof Form<T>>;\n\nconst EditableContext = React.createContext<FormInstance<any> | null>(null);\n\ninterface Item {\n key: string;\n name: string;\n age: string;\n address: string;\n}\n\ninterface EditableRowProps {\n index: number;\n}\n\nconst EditableRow: React.FC<EditableRowProps> = ({ index, ...props }) => {\n const [form] = Form.useForm();\n return (\n <Form form={form} component={false}>\n <EditableContext.Provider value={form}>\n <tr {...props} />\n </EditableContext.Provider>\n </Form>\n );\n};\n\ninterface EditableCellProps {\n title: React.ReactNode;\n editable: boolean;\n dataIndex: keyof Item;\n record: Item;\n handleSave: (record: Item) => void;\n}\n\nconst EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({\n title,\n editable,\n children,\n dataIndex,\n record,\n handleSave,\n ...restProps\n}) => {\n const [editing, setEditing] = useState(false);\n const inputRef = useRef<InputRef>(null);\n const form = useContext(EditableContext)!;\n\n useEffect(() => {\n if (editing) {\n inputRef.current?.focus();\n }\n }, [editing]);\n\n const toggleEdit = () => {\n setEditing(!editing);\n form.setFieldsValue({ [dataIndex]: record[dataIndex] });\n };\n\n const save = async () => {\n try {\n const values = await form.validateFields();\n\n toggleEdit();\n handleSave({ ...record, ...values });\n } catch (errInfo) {\n console.log('Save failed:', errInfo);\n }\n };\n\n let childNode = children;\n\n if (editable) {\n childNode = editing ? (\n <Form.Item\n style={{ margin: 0 }}\n name={dataIndex}\n rules={[{ required: true, message: `${title} is required.` }]}\n >\n <Input ref={inputRef} onPressEnter={save} onBlur={save} />\n </Form.Item>\n ) : (\n <div\n className=\"editable-cell-value-wrap\"\n style={{ paddingInlineEnd: 24 }}\n onClick={toggleEdit}\n >\n {children}\n </div>\n );\n }\n\n return <td {...restProps}>{childNode}</td>;\n};\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: string;\n address: string;\n}\n\ntype ColumnTypes = Exclude<TableProps<DataType>['columns'], undefined>;\n\nconst App: React.FC = () => {\n const [dataSource, setDataSource] = useState<DataType[]>([\n {\n key: '0',\n name: 'Edward King 0',\n age: '32',\n address: 'London, Park Lane no. 0',\n },\n {\n key: '1',\n name: 'Edward King 1',\n age: '32',\n address: 'London, Park Lane no. 1',\n },\n ]);\n\n const [count, setCount] = useState(2);\n\n const handleDelete = (key: React.Key) => {\n const newData = dataSource.filter((item) => item.key !== key);\n setDataSource(newData);\n };\n\n const defaultColumns: (ColumnTypes[number] & { editable?: boolean; dataIndex: string })[] = [\n {\n title: 'name',\n dataIndex: 'name',\n width: '30%',\n editable: true,\n },\n {\n title: 'age',\n dataIndex: 'age',\n },\n {\n title: 'address',\n dataIndex: 'address',\n },\n {\n title: 'operation',\n dataIndex: 'operation',\n render: (_, record) =>\n dataSource.length >= 1 ? (\n <Popconfirm title=\"Sure to delete?\" onConfirm={() => handleDelete(record.key)}>\n <a>Delete</a>\n </Popconfirm>\n ) : null,\n },\n ];\n\n const handleAdd = () => {\n const newData: DataType = {\n key: count,\n name: `Edward King ${count}`,\n age: '32',\n address: `London, Park Lane no. ${count}`,\n };\n setDataSource([...dataSource, newData]);\n setCount(count + 1);\n };\n\n const handleSave = (row: DataType) => {\n const newData = [...dataSource];\n const index = newData.findIndex((item) => row.key === item.key);\n const item = newData[index];\n newData.splice(index, 1, {\n ...item,\n ...row,\n });\n setDataSource(newData);\n };\n\n const components = {\n body: {\n row: EditableRow,\n cell: EditableCell,\n },\n };\n\n const columns = defaultColumns.map((col) => {\n if (!col.editable) {\n return col;\n }\n return {\n ...col,\n onCell: (record: DataType) => ({\n record,\n editable: col.editable,\n dataIndex: col.dataIndex,\n title: col.title,\n handleSave,\n }),\n };\n });\n\n return (\n <div>\n <Button onClick={handleAdd} type=\"primary\" style={{ marginBottom: 16 }}>\n Add a row\n </Button>\n <Table<DataType>\n components={components}\n rowClassName={() => 'editable-row'}\n bordered\n dataSource={dataSource}\n columns={columns as ColumnTypes}\n />\n </div>\n );\n};\n\nexport default App;\n";},"1648d8d8":function(n,e,t){},"167b685b":function(n,e,t){},"1686cebe":function(n,e,t){},"169d676f":function(n,e,t){},"169e6dd3":function(n,e,t){},"16da1f00":function(n,e,t){},"16fada1b":function(n,e,t){},"1705d06c":function(n,e,t){},"178e8973":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("83070921");var o='import React from \'react\';\nimport { EditOutlined, EllipsisOutlined, SettingOutlined } from \'@ant-design/icons\';\nimport { Avatar, Card } from \'antd\';\n\nconst { Meta } = Card;\n\nconst App: React.FC = () => (\n <Card\n style={{ width: 300 }}\n cover={\n <img\n alt="example"\n src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"\n />\n }\n actions={[\n <SettingOutlined key="setting" />,\n <EditOutlined key="edit" />,\n <EllipsisOutlined key="ellipsis" />,\n ]}\n >\n <Meta\n avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />}\n title="Card title"\n description="This is the description"\n />\n </Card>\n);\n\nexport default App;\n';},"17b29b1b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1fa29fbe");var o="import React from 'react';\nimport { Segmented, Tabs } from 'antd';\nimport type { TabsProps } from 'antd';\n\nconst onChange = (key: string) => {\n console.log(key);\n};\n\nconst items: TabsProps['items'] = [\n { key: '1', label: 'Tab 1', children: 'Content of Tab Pane 1' },\n { key: '2', label: 'Tab 2', children: 'Content of Tab Pane 2' },\n { key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' },\n];\n\ntype Align = 'start' | 'center' | 'end';\n\nconst App: React.FC = () => {\n const [alignValue, setAlignValue] = React.useState<Align>('center');\n return (\n <>\n <Segmented\n value={alignValue}\n style={{ marginBottom: 8 }}\n onChange={setAlignValue}\n options={['start', 'center', 'end']}\n />\n <Tabs\n defaultActiveKey=\"1\"\n items={items}\n onChange={onChange}\n indicator={{ size: (origin) => origin - 20, align: alignValue }}\n />\n </>\n );\n};\n\nexport default App;\n";},"17f690ab":function(n,e,t){},"182d80ad":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5f869ad8");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent } from 'antd';\nimport { Cascader, Radio } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [placement, SetPlacement] = useState<'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'>(\n 'topLeft',\n );\n\n const placementChange = (e: RadioChangeEvent) => {\n SetPlacement(e.target.value);\n };\n\n return (\n <>\n <Radio.Group value={placement} onChange={placementChange}>\n <Radio.Button value=\"topLeft\">topLeft</Radio.Button>\n <Radio.Button value=\"topRight\">topRight</Radio.Button>\n <Radio.Button value=\"bottomLeft\">bottomLeft</Radio.Button>\n <Radio.Button value=\"bottomRight\">bottomRight</Radio.Button>\n </Radio.Group>\n <br />\n <br />\n <Cascader options={options} placeholder=\"Please select\" placement={placement} />\n </>\n );\n};\n\nexport default App;\n";},18450704:function(n,e,t){},"184fed3d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2457483b");var o="import React from 'react';\nimport { EditOutlined, UserOutlined } from '@ant-design/icons';\nimport { Input } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n input: '\u8F93\u5165\u6846\u5143\u7D20',\n prefix: '\u524D\u7F00\u7684\u5305\u88F9\u5143\u7D20',\n suffix: '\u540E\u7F00\u7684\u5305\u88F9\u5143\u7D20',\n count: '\u6587\u5B57\u8BA1\u6570\u5143\u7D20',\n },\n en: {\n input: 'input element',\n prefix: 'prefix element',\n suffix: 'suffix element',\n count: 'count element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Input\"\n semantics={[\n { name: 'input', desc: locale.input, version: '5.4.0' },\n { name: 'prefix', desc: locale.prefix, version: '5.4.0' },\n { name: 'suffix', desc: locale.suffix, version: '5.4.0' },\n { name: 'count', desc: locale.count, version: '5.4.0' },\n ]}\n >\n <Input\n showCount\n prefix={<UserOutlined />}\n suffix={<EditOutlined />}\n defaultValue=\"Hello, Ant Design\"\n />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},"185ee01c":function(n,e,t){},"185f2ef8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d322e434");var o='import React, { useState } from \'react\';\nimport { Avatar, Col, Divider, Drawer, List, Row } from \'antd\';\n\ninterface DescriptionItemProps {\n title: string;\n content: React.ReactNode;\n}\n\nconst DescriptionItem = ({ title, content }: DescriptionItemProps) => (\n <div className="site-description-item-profile-wrapper">\n <p className="site-description-item-profile-p-label">{title}:</p>\n {content}\n </div>\n);\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n return (\n <>\n <List\n dataSource={[\n {\n id: 1,\n name: \'Lily\',\n },\n {\n id: 2,\n name: \'Lily\',\n },\n ]}\n bordered\n renderItem={(item) => (\n <List.Item\n key={item.id}\n actions={[\n <a onClick={showDrawer} key={`a-${item.id}`}>\n View Profile\n </a>,\n ]}\n >\n <List.Item.Meta\n avatar={\n <Avatar src="https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png" />\n }\n title={<a href="https://ant.design/index-cn">{item.name}</a>}\n description="Progresser XTech"\n />\n </List.Item>\n )}\n />\n <Drawer width={640} placement="right" closable={false} onClose={onClose} open={open}>\n <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>\n User Profile\n </p>\n <p className="site-description-item-profile-p">Personal</p>\n <Row>\n <Col span={12}>\n <DescriptionItem title="Full Name" content="Lily" />\n </Col>\n <Col span={12}>\n <DescriptionItem title="Account" content="AntDesign@example.com" />\n </Col>\n </Row>\n <Row>\n <Col span={12}>\n <DescriptionItem title="City" content="HangZhou" />\n </Col>\n <Col span={12}>\n <DescriptionItem title="Country" content="China\u{1F1E8}\u{1F1F3}" />\n </Col>\n </Row>\n <Row>\n <Col span={12}>\n <DescriptionItem title="Birthday" content="February 2,1900" />\n </Col>\n <Col span={12}>\n <DescriptionItem title="Website" content="-" />\n </Col>\n </Row>\n <Row>\n <Col span={24}>\n <DescriptionItem\n title="Message"\n content="Make things as simple as possible but no simpler."\n />\n </Col>\n </Row>\n <Divider />\n <p className="site-description-item-profile-p">Company</p>\n <Row>\n <Col span={12}>\n <DescriptionItem title="Position" content="Programmer" />\n </Col>\n <Col span={12}>\n <DescriptionItem title="Responsibilities" content="Coding" />\n </Col>\n </Row>\n <Row>\n <Col span={12}>\n <DescriptionItem title="Department" content="XTech" />\n </Col>\n <Col span={12}>\n <DescriptionItem title="Supervisor" content={<a>Lin</a>} />\n </Col>\n </Row>\n <Row>\n <Col span={24}>\n <DescriptionItem\n title="Skills"\n content="C / C + +, data structures, software engineering, operating systems, computer networks, databases, compiler theory, computer architecture, Microcomputer Principle and Interface Technology, Computer English, Java, ASP, etc."\n />\n </Col>\n </Row>\n <Divider />\n <p className="site-description-item-profile-p">Contacts</p>\n <Row>\n <Col span={12}>\n <DescriptionItem title="Email" content="AntDesign@example.com" />\n </Col>\n <Col span={12}>\n <DescriptionItem title="Phone Number" content="+86 181 0000 0000" />\n </Col>\n </Row>\n <Row>\n <Col span={24}>\n <DescriptionItem\n title="Github"\n content={\n <a href="http://github.com/ant-design/ant-design/" target="_blank" rel="noreferrer">\n github.com/ant-design/ant-design/\n </a>\n }\n />\n </Col>\n </Row>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n';},"1882a08b":function(n,e,t){},"18901ddd":function(n,e,t){},"18c884cc":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("616a6d18");var o="import React from 'react';\nimport { Slider } from 'antd';\n\nconst App: React.FC = () => <Slider defaultValue={30} tooltip={{ open: true }} />;\n\nexport default App;\n";},"18ebf4fb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2e20b86e");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => (\n <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} onChange={onChange} />\n);\n\nexport default App;\n";},"18efc164":function(n,e,t){},"18fa5233":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c80b78f9");var o="import React from 'react';\nimport { Skeleton } from 'antd';\n\nconst App: React.FC = () => <Skeleton active />;\n\nexport default App;\n";},"1902ac56":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("29e45378");var o="import React from 'react';\nimport { Input } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n textarea: '\u8F93\u5165\u6846\u5143\u7D20',\n count: '\u6587\u5B57\u8BA1\u6570\u5143\u7D20',\n },\n en: {\n textarea: 'textarea element',\n count: 'count element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"TextArea\"\n semantics={[\n { name: 'textarea', desc: locale.textarea, version: '5.4.0' },\n { name: 'count', desc: locale.count, version: '5.4.0' },\n ]}\n >\n <Input.TextArea defaultValue=\"Hello, Ant Design\" rows={3} count={{ max: 100, show: true }} />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},"19147b76":function(n,e,t){},"192c090d":function(n,e,t){},"1942c195":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b366ab56");var o='import React from \'react\';\nimport { QRCode, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space>\n <QRCode type="canvas" value="https://ant.design/" />\n <QRCode type="svg" value="https://ant.design/" />\n </Space>\n);\n\nexport default App;\n';},"1943aa9b":function(n,e,t){},"199244ac":function(n,e,t){},"19bcfe66":function(n,e,t){},"19d89045":function(n,e,t){},"19de1e96":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2989c81c");var o="import React from 'react';\nimport { HomeOutlined, UserOutlined } from '@ant-design/icons';\nimport { Breadcrumb, ConfigProvider } from 'antd';\n\nconst menuItems = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.alipay.com/\">\n General\n </a>\n ),\n },\n {\n key: '2',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.taobao.com/\">\n Layout\n </a>\n ),\n },\n {\n key: '3',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"http://www.tmall.com/\">\n Navigation\n </a>\n ),\n },\n];\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Breadcrumb: {\n itemColor: '#b02121',\n lastItemColor: '#0f3a88',\n iconFontSize: 28,\n linkColor: '#979a42',\n linkHoverColor: '#9450c0',\n separatorColor: '#b41b60',\n separatorMargin: 22,\n },\n },\n }}\n >\n <Breadcrumb\n separator=\">\"\n items={[\n {\n title: 'Home',\n },\n {\n title: <a href=\"\">Application Center</a>,\n },\n {\n title: <a href=\"\">General</a>,\n menu: { items: menuItems },\n },\n {\n title: 'Application Center',\n href: '',\n },\n {\n href: '',\n title: <HomeOutlined />,\n },\n {\n href: '',\n title: (\n <>\n <UserOutlined />\n <span>Application List</span>\n </>\n ),\n },\n ]}\n />\n </ConfigProvider>\n);\n";},"1a4d37a4":function(n,e,t){},"1a4e5589":function(n,e,t){},"1a54da1c":function(n,e,t){},"1a795707":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return i;}});var o=t("f19d2b93");t("ff31a468");var a=t("a9d1a279");let r=(n,e,t)=>"prev"===e?(0,o.jsx)("a",{children:"Previous"}):"next"===e?(0,o.jsx)("a",{children:"Next"}):t;var i=()=>(0,o.jsx)(a.Pagination,{total:500,itemRender:r});},"1a91387e":function(n,e,t){},"1b1cbae8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4eec8e14");var o="import React, { useState } from 'react';\nimport { DotChartOutlined } from '@ant-design/icons';\nimport type { RadioChangeEvent } from 'antd';\nimport { Flex, Divider, Form, Radio, Skeleton, Space, Switch } from 'antd';\n\ntype SizeType = 'default' | 'small' | 'large';\ntype ButtonShapeType = 'circle' | 'square' | 'round' | 'default';\ntype AvatarShapeType = 'circle' | 'square';\n\nconst App: React.FC = () => {\n const [active, setActive] = useState(false);\n const [block, setBlock] = useState(false);\n const [size, setSize] = useState<SizeType>('default');\n const [buttonShape, setButtonShape] = useState<ButtonShapeType>('default');\n const [avatarShape, setAvatarShape] = useState<AvatarShapeType>('circle');\n\n const handleActiveChange = (checked: boolean) => {\n setActive(checked);\n };\n\n const handleBlockChange = (checked: boolean) => {\n setBlock(checked);\n };\n\n const handleSizeChange = (e: RadioChangeEvent) => {\n setSize(e.target.value);\n };\n\n const handleShapeButton = (e: RadioChangeEvent) => {\n setButtonShape(e.target.value);\n };\n\n const handleAvatarShape = (e: RadioChangeEvent) => {\n setAvatarShape(e.target.value);\n };\n\n return (\n <Flex gap=\"middle\" vertical>\n <Space>\n <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />\n <Skeleton.Avatar active={active} size={size} shape={avatarShape} />\n <Skeleton.Input active={active} size={size} />\n </Space>\n <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />\n <Skeleton.Input active={active} size={size} block={block} />\n <Space>\n <Skeleton.Image active={active} />\n <Skeleton.Node active={active} style={{ width: 160 }} />\n <Skeleton.Node active={active}>\n <DotChartOutlined style={{ fontSize: 40, color: '#bfbfbf' }} />\n </Skeleton.Node>\n </Space>\n <Divider />\n <Form layout=\"inline\" style={{ margin: '16px 0' }}>\n <Space size={16} wrap>\n <Form.Item label=\"Active\">\n <Switch checked={active} onChange={handleActiveChange} />\n </Form.Item>\n <Form.Item label=\"Button and Input Block\">\n <Switch checked={block} onChange={handleBlockChange} />\n </Form.Item>\n <Form.Item label=\"Size\">\n <Radio.Group value={size} onChange={handleSizeChange}>\n <Radio.Button value=\"default\">Default</Radio.Button>\n <Radio.Button value=\"large\">Large</Radio.Button>\n <Radio.Button value=\"small\">Small</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Button Shape\">\n <Radio.Group value={buttonShape} onChange={handleShapeButton}>\n <Radio.Button value=\"default\">Default</Radio.Button>\n <Radio.Button value=\"square\">Square</Radio.Button>\n <Radio.Button value=\"round\">Round</Radio.Button>\n <Radio.Button value=\"circle\">Circle</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Avatar Shape\">\n <Radio.Group value={avatarShape} onChange={handleAvatarShape}>\n <Radio.Button value=\"square\">Square</Radio.Button>\n <Radio.Button value=\"circle\">Circle</Radio.Button>\n </Radio.Group>\n </Form.Item>\n </Space>\n </Form>\n </Flex>\n );\n};\n\nexport default App;\n";},"1b556025":function(n,e,t){},"1b62efa0":function(n,e,t){},"1b67b506":function(n,e,t){},"1b761474":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7089f9a2");var o="/* eslint-disable react-hooks-extra/no-direct-set-state-in-use-effect */\nimport React from 'react';\nimport { InfoCircleOutlined } from '@ant-design/icons';\nimport get from 'rc-util/lib/utils/get';\nimport set from 'rc-util/lib/utils/set';\nimport { Col, ConfigProvider, Flex, Popover, Row, Tag, theme, Typography } from 'antd';\nimport { createStyles, css } from 'antd-style';\nimport classnames from 'classnames';\nimport Prism from 'prismjs';\n\nconst MARK_BORDER_SIZE = 2;\n\nconst useStyle = createStyles(({ token }, markPos: [number, number, number, number]) => ({\n container: css`\n position: relative;\n `,\n colWrap: css`\n border-right: 1px solid ${token.colorBorderSecondary};\n display: flex;\n justify-content: center;\n align-items: center;\n padding: ${token.paddingMD}px;\n overflow: hidden;\n `,\n colWrapPaddingLess: css`\n padding: 0;\n `,\n listWrap: css`\n display: flex;\n flex-direction: column;\n list-style: none;\n margin: 0;\n padding: 0;\n overflow: hidden;\n `,\n listItem: css`\n cursor: pointer;\n padding: ${token.paddingSM}px;\n transition: background-color ${token.motionDurationFast} ease;\n &:hover {\n background-color: ${token.controlItemBgHover};\n }\n &:not(:first-of-type) {\n border-top: 1px solid ${token.colorBorderSecondary};\n }\n `,\n marker: css`\n position: absolute;\n border: ${MARK_BORDER_SIZE}px solid ${token.colorWarning};\n box-sizing: border-box;\n z-index: 999999;\n box-shadow: 0 0 0 1px #fff;\n pointer-events: none;\n inset-inline-start: ${markPos[0] - MARK_BORDER_SIZE}px;\n top: ${markPos[1] - MARK_BORDER_SIZE}px;\n width: ${markPos[2] + MARK_BORDER_SIZE * 2}px;\n height: ${markPos[3] + MARK_BORDER_SIZE * 2}px;\n `,\n markerActive: css`\n opacity: 1;\n `,\n markerNotActive: css`\n opacity: 0;\n `,\n markerMotion: css`\n transition:\n opacity ${token.motionDurationSlow} ease,\n all ${token.motionDurationSlow} ease;\n `,\n markerNotMotion: css`\n transition: opacity ${token.motionDurationSlow} ease;\n `,\n}));\n\nfunction getSemanticCells(semanticPath: string) {\n return semanticPath.split('.');\n}\n\nfunction HighlightExample(props: { componentName: string; semanticName: string }) {\n const { componentName, semanticName } = props;\n\n const highlightCode = React.useMemo(() => {\n const classNames = set({}, getSemanticCells(semanticName), `my-classname`);\n const styles = set({}, getSemanticCells(semanticName), { color: 'red' });\n\n function format(obj: object) {\n const str = JSON.stringify(obj, null, 2);\n return (\n str\n // Add space\n .split('\\n')\n .map((line) => ` ${line}`)\n .join('\\n')\n .trim()\n // Replace quotes\n .replace(/\"/g, \"'\")\n // Remove key quotes\n .replace(/'([^']+)':/g, '$1:')\n );\n }\n\n const code = `\n<${componentName}\n classNames={${format(classNames)}}\n styles={${format(styles)}}\n/>`.trim();\n\n return Prism.highlight(code, Prism.languages.javascript, 'jsx');\n }, [componentName, semanticName]);\n\n return (\n // biome-ignore lint: lint/security/noDangerouslySetInnerHtml\n <div dangerouslySetInnerHTML={{ __html: highlightCode }} />\n );\n}\n\nexport interface SemanticPreviewProps {\n componentName: string;\n semantics: { name: string; desc: string; version?: string }[];\n children: React.ReactElement<any>;\n height?: number;\n padding?: false;\n}\n\nconst SemanticPreview: React.FC<SemanticPreviewProps> = (props) => {\n const { semantics = [], children, height, padding, componentName = 'Component' } = props;\n const { token } = theme.useToken();\n\n // ======================= Semantic =======================\n const getMarkClassName = React.useCallback(\n (semanticKey: string) => `semantic-mark-${semanticKey}`.replace(/\\./g, '-'),\n [],\n );\n\n const semanticClassNames = React.useMemo<Record<string, string>>(() => {\n let classNames: Record<string, string> = {};\n\n semantics.forEach((semantic) => {\n const pathCell = getSemanticCells(semantic.name);\n classNames = set(classNames, pathCell, getMarkClassName(semantic.name));\n });\n\n return classNames;\n }, [semantics]);\n\n // ======================== Hover =========================\n const containerRef = React.useRef<HTMLDivElement>(null);\n\n const timerRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n\n const [positionMotion, setPositionMotion] = React.useState<boolean>(false);\n const [hoverSemantic, setHoverSemantic] = React.useState<string | null>(null);\n const [markPos, setMarkPos] = React.useState<[number, number, number, number]>([0, 0, 0, 0]);\n\n const { styles } = useStyle(markPos);\n\n React.useEffect(() => {\n if (hoverSemantic) {\n const targetClassName = getMarkClassName(hoverSemantic);\n const targetElement = containerRef.current?.querySelector<HTMLElement>(`.${targetClassName}`);\n const containerRect = containerRef.current?.getBoundingClientRect();\n const targetRect = targetElement?.getBoundingClientRect();\n\n setMarkPos([\n (targetRect?.left || 0) - (containerRect?.left || 0),\n (targetRect?.top || 0) - (containerRect?.top || 0),\n targetRect?.width || 0,\n targetRect?.height || 0,\n ]);\n\n timerRef.current = setTimeout(() => {\n setPositionMotion(true);\n }, 10);\n } else {\n timerRef.current = setTimeout(() => {\n setPositionMotion(false);\n }, 500);\n }\n return () => {\n if (timerRef.current) {\n clearTimeout(timerRef.current);\n }\n };\n }, [hoverSemantic]);\n\n const hoveredSemanticClassNames = React.useMemo(() => {\n if (!hoverSemantic) {\n return semanticClassNames;\n }\n\n const hoverCell = getSemanticCells(hoverSemantic);\n const clone = set(\n semanticClassNames,\n hoverCell,\n classnames(get(semanticClassNames, hoverCell), getMarkClassName('active')),\n );\n\n return clone;\n }, [semanticClassNames, hoverSemantic]);\n\n // ======================== Render ========================\n const cloneNode = React.cloneElement(children, {\n classNames: hoveredSemanticClassNames,\n });\n\n return (\n <div className={classnames(styles.container)} ref={containerRef}>\n <Row style={{ minHeight: height }}>\n <Col\n span={16}\n className={classnames(styles.colWrap, padding === false && styles.colWrapPaddingLess)}\n >\n <ConfigProvider theme={{ token: { motion: false } }}>{cloneNode}</ConfigProvider>\n </Col>\n <Col span={8}>\n <ul className={classnames(styles.listWrap)}>\n {semantics.map<React.ReactNode>((semantic) => (\n <li\n key={semantic.name}\n className={classnames(styles.listItem)}\n onMouseEnter={() => setHoverSemantic(semantic.name)}\n onMouseLeave={() => setHoverSemantic(null)}\n >\n <Flex vertical gap=\"small\">\n <Flex gap=\"small\" align=\"center\" justify=\"space-between\">\n <Flex gap=\"small\" align=\"center\">\n <Typography.Title level={5} style={{ margin: 0 }}>\n {semantic.name}\n </Typography.Title>\n {semantic.version && <Tag color=\"blue\">{semantic.version}</Tag>}\n </Flex>\n <Popover\n content={\n <Typography style={{ fontSize: 12, minWidth: 300 }}>\n <pre dir=\"ltr\">\n <code dir=\"ltr\">\n <HighlightExample\n componentName={componentName}\n semanticName={semantic.name}\n />\n </code>\n </pre>\n </Typography>\n }\n >\n <InfoCircleOutlined\n style={{ cursor: 'pointer', color: token.colorTextSecondary }}\n />\n </Popover>\n </Flex>\n <Typography.Paragraph style={{ margin: 0, fontSize: token.fontSizeSM }}>\n {semantic.desc}\n </Typography.Paragraph>\n </Flex>\n </li>\n ))}\n </ul>\n </Col>\n </Row>\n <div\n className={classnames(\n styles.marker,\n hoverSemantic ? styles.markerActive : styles.markerNotActive,\n positionMotion ? styles.markerMotion : styles.markerNotMotion,\n )}\n />\n </div>\n );\n};\n\nexport default SemanticPreview;\n";},"1b8afa9d":function(n,e,t){},"1beaa1e0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("56efc875");var o="import React from 'react';\nimport { DatePicker, Flex } from 'antd';\nimport dayjs from 'dayjs';\n\nconst defaultValue = Array.from({ length: 10 }).map((_, i) => dayjs('2000-01-01').add(i, 'day'));\n\nconst App: React.FC = () => (\n <Flex vertical gap=\"small\">\n <DatePicker multiple placeholder=\"Bamboo\" />\n <DatePicker multiple defaultValue={defaultValue} size=\"small\" />\n <DatePicker multiple defaultValue={defaultValue} />\n <DatePicker multiple defaultValue={defaultValue} size=\"large\" />\n </Flex>\n);\n\nexport default App;\n";},"1bf499d5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fc885f45");var o='import React from \'react\';\nimport { LikeOutlined, MessageOutlined, StarOutlined } from \'@ant-design/icons\';\nimport { Avatar, List, Space } from \'antd\';\n\nconst data = Array.from({ length: 23 }).map((_, i) => ({\n href: \'https://ant.design\',\n title: `ant design part ${i}`,\n avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,\n description:\n \'Ant Design, a design language for background applications, is refined by Ant UED Team.\',\n content:\n \'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.\',\n}));\n\nconst IconText = ({ icon, text }: { icon: React.FC; text: string }) => (\n <Space>\n {React.createElement(icon)}\n {text}\n </Space>\n);\n\nconst App: React.FC = () => (\n <List\n itemLayout="vertical"\n size="large"\n pagination={{\n onChange: (page) => {\n console.log(page);\n },\n pageSize: 3,\n }}\n dataSource={data}\n footer={\n <div>\n <b>ant design</b> footer part\n </div>\n }\n renderItem={(item) => (\n <List.Item\n key={item.title}\n actions={[\n <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,\n <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,\n <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,\n ]}\n extra={\n <img\n width={272}\n alt="logo"\n src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"\n />\n }\n >\n <List.Item.Meta\n avatar={<Avatar src={item.avatar} />}\n title={<a href={item.href}>{item.title}</a>}\n description={item.description}\n />\n {item.content}\n </List.Item>\n )}\n />\n);\n\nexport default App;\n';},"1c36efca":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e0e2c825");var o="import React from 'react';\nimport { CarryOutOutlined } from '@ant-design/icons';\nimport type { TreeDataNode, TreeProps } from 'antd';\nimport { Switch, Tree } from 'antd';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst data: TreeDataNode[] = [];\n\nconst generateData = (_level: number, preKey = '0', tns = data): TreeDataNode[] | undefined => {\n const children: string[] = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key, icon: <CarryOutOutlined /> });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\n\ngenerateData(z);\n\nconst App: React.FC = () => {\n const [gData, setGData] = React.useState<TreeDataNode[]>(data);\n const [showLine, setShowLine] = React.useState<any>(true);\n const [showIcon, setShowIcon] = React.useState<boolean>(true);\n const [showLeafIcon, setShowLeafIcon] = React.useState<boolean>(true);\n const [expandedKeys, setExpandedKeys] = React.useState<React.Key[]>(['0-0', '0-0-0', '0-0-0-0']);\n\n const onDragEnter: TreeProps['onDragEnter'] = (info) => {\n console.log(info);\n // expandedKeys, set it when controlled is needed\n setExpandedKeys(info.expandedKeys);\n };\n\n const onDrop: TreeProps['onDrop'] = (info) => {\n console.log(info);\n const dropKey = info.node.key as number;\n const dragKey = info.dragNode.key as number;\n const dropPos = info.node.pos.split('-');\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]);\n\n const loop = (\n data: TreeDataNode[],\n key: number,\n callback: (item: TreeDataNode, index: number, err: TreeDataNode[]) => void,\n ): void => {\n for (let i = 0; i < data.length; i++) {\n if (data[i].key === key) {\n return callback(data[i], i, data);\n }\n if (data[i].children) {\n loop(data[i].children!, key, callback);\n }\n }\n };\n\n const data = [...gData];\n\n // Find dragObject\n let dragObj: TreeDataNode;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n\n if (!info.dropToGap) {\n // Drop on the content\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert. New item was inserted to the end of the array in this example, but can be anywhere\n item.children.push(dragObj);\n });\n } else if (\n ((info.node as any).props.children || []).length > 0 && // Has children\n (info.node as any).props.expanded && // Is expanded\n dropPosition === 1 // On the bottom gap\n ) {\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert. New item was inserted to the start of the array in this example, but can be anywhere\n item.children.unshift(dragObj);\n });\n } else {\n let ar: TreeDataNode[];\n let i: number;\n loop(data, dropKey, (_, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n ar!.splice(i!, 0, dragObj!);\n } else {\n ar!.splice(i! + 1, 0, dragObj!);\n }\n }\n setGData(data);\n };\n\n const innerSetShowLine = (showLine: boolean) => {\n if (showLine) {\n if (showLeafIcon) {\n setShowLine({ showLeafIcon: true });\n } else {\n setShowLine(true);\n }\n } else {\n setShowLine(false);\n }\n };\n\n const innerSetShowLeafIcon = (showLeafIcon: boolean) => {\n setShowLeafIcon(showLeafIcon);\n setShowLine({ showLeafIcon });\n };\n\n return (\n <>\n <div style={{ marginBottom: 16 }}>\n showLine: <Switch checked={showLine} onChange={innerSetShowLine} />\n <br />\n <br />\n showIcon: <Switch checked={showIcon} onChange={() => setShowIcon(showIcon)} />\n <br />\n <br />\n showLeafIcon: <Switch checked={showLeafIcon} onChange={innerSetShowLeafIcon} />\n </div>\n <Tree\n showLine={showLine}\n showIcon={showIcon}\n className=\"draggable-tree\"\n defaultExpandedKeys={expandedKeys}\n draggable\n blockNode\n onDragEnter={onDragEnter}\n onDrop={onDrop}\n treeData={gData}\n />\n </>\n );\n};\n\nexport default App;\n";},"1c8b6224":function(n,e,t){},"1cd6b7ed":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2e6eb3ed");var o="import React, { useState } from 'react';\nimport type { GetProp } from 'antd';\nimport { Button, ConfigProvider, Empty, Table } from 'antd';\n\ninterface DataType {\n key: number;\n name: string;\n age: number;\n address: string;\n}\n\nconst genFakeData = (count = 5) =>\n Array.from({ length: count }).map<DataType>((_, index) => ({\n key: index,\n name: `Edward King ${index}`,\n age: 32 + index,\n address: `London, Park Lane no. ${index}`,\n }));\n\nconst renderEmpty: GetProp<typeof ConfigProvider, 'renderEmpty'> = (componentName) => {\n if (componentName === 'Table.filter' /** \u{1F448} 5.20.0+ */) {\n return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description=\"No Filter(Custom)\" />;\n }\n};\n\nfunction App() {\n const [dataSource, setDataSource] = useState<DataType[]>(genFakeData);\n\n const handleToggle = () => {\n setDataSource(dataSource.length ? [] : genFakeData(Math.floor(Math.random() * 10)));\n };\n\n const columns: GetProp<typeof Table<DataType>, 'columns'> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n filters: dataSource.length\n ? [\n { text: '>=35', value: 'gte35' },\n { text: '<18', value: 'lt18' },\n ]\n : [],\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n },\n ];\n\n const toggleButton = (\n <Button type=\"primary\" onClick={handleToggle}>\n Toggle Data\n </Button>\n );\n\n return (\n <ConfigProvider renderEmpty={renderEmpty}>\n {dataSource.length ? toggleButton : null}\n <div style={{ marginBlock: 8 }} />\n <Table<DataType>\n bordered\n dataSource={dataSource}\n columns={columns}\n locale={{ emptyText: <Empty description=\"No Data\">{toggleButton}</Empty> }}\n />\n </ConfigProvider>\n );\n}\n\nexport default App;\n";},"1d4273e3":function(n,e,t){},"1d69e8ab":function(n,e,t){},"1d7b54e3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9f57658b");var o="import React, { useState } from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport {\n Cascader,\n ConfigProvider,\n Divider,\n List,\n Select,\n Space,\n Switch,\n Table,\n Transfer,\n TreeSelect,\n} from 'antd';\n\nconst customizeRenderEmpty = () => (\n <div style={{ textAlign: 'center' }}>\n <SmileOutlined style={{ fontSize: 20 }} />\n <p>Data Not Found</p>\n </div>\n);\n\nconst style: React.CSSProperties = { width: 200 };\n\nconst App: React.FC = () => {\n const [customize, setCustomize] = useState(true);\n return (\n <>\n <Switch\n unCheckedChildren=\"default\"\n checkedChildren=\"customize\"\n checked={customize}\n onChange={setCustomize}\n />\n <Divider />\n <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <h4>Select</h4>\n <Select style={style} />\n <h4>TreeSelect</h4>\n <TreeSelect style={style} treeData={[]} />\n <h4>Cascader</h4>\n <Cascader style={style} options={[]} showSearch />\n <h4>Transfer</h4>\n <Transfer />\n <h4>Table</h4>\n <Table\n style={{ marginTop: 8 }}\n columns={[\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Age', dataIndex: 'age', key: 'age' },\n ]}\n />\n <h4>List</h4>\n <List />\n </Space>\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},"1d7d898d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6ed9092f");var o='import React, { useState } from \'react\';\nimport { Button, Drawer } from \'antd\';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [childrenDrawer, setChildrenDrawer] = useState(false);\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n const showChildrenDrawer = () => {\n setChildrenDrawer(true);\n };\n\n const onChildrenDrawerClose = () => {\n setChildrenDrawer(false);\n };\n\n return (\n <>\n <Button type="primary" onClick={showDrawer}>\n Open drawer\n </Button>\n <Drawer title="Multi-level drawer" width={520} closable={false} onClose={onClose} open={open}>\n <Button type="primary" onClick={showChildrenDrawer}>\n Two-level drawer\n </Button>\n <Drawer\n title="Two-level Drawer"\n width={320}\n closable={false}\n onClose={onChildrenDrawerClose}\n open={childrenDrawer}\n >\n This is two-level drawer\n </Drawer>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n';},"1d907343":function(n,e,t){},"1d97c650":function(n,e,t){},"1dac9968":function(n,e,t){},"1dbcd8c9":function(n,e,t){},"1dc7c404":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9dcdf535");var o="import React from 'react';\nimport { Button, Modal } from 'antd';\n\nconst App: React.FC = () => {\n const [modal, contextHolder] = Modal.useModal();\n\n const countDown = () => {\n let secondsToGo = 5;\n\n const instance = modal.success({\n title: 'This is a notification message',\n content: `This modal will be destroyed after ${secondsToGo} second.`,\n });\n\n const timer = setInterval(() => {\n secondsToGo -= 1;\n instance.update({\n content: `This modal will be destroyed after ${secondsToGo} second.`,\n });\n }, 1000);\n\n setTimeout(() => {\n clearInterval(timer);\n instance.destroy();\n }, secondsToGo * 1000);\n };\n\n return (\n <>\n <Button onClick={countDown}>Open modal to close in 5s</Button>\n {contextHolder}\n </>\n );\n};\n\nexport default App;\n";},"1dce9f63":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5c2dac1f");var o="import React from 'react';\nimport {\n HomeOutlined,\n LoadingOutlined,\n SettingFilled,\n SmileOutlined,\n SyncOutlined,\n} from '@ant-design/icons';\nimport { Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space>\n <HomeOutlined />\n <SettingFilled />\n <SmileOutlined />\n <SyncOutlined spin />\n <SmileOutlined rotate={180} />\n <LoadingOutlined />\n </Space>\n);\n\nexport default App;\n";},"1e1edef3":function(n,e,t){},"1e3152e7":function(n,e,t){},"1e47807d":function(n,e,t){},"1e760c7c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("909ae6f4");var o="import React, { useState } from 'react';\nimport { FrownOutlined, SmileOutlined } from '@ant-design/icons';\nimport { Slider } from 'antd';\n\ninterface IconSliderProps {\n max: number;\n min: number;\n}\n\nconst IconSlider: React.FC<IconSliderProps> = (props) => {\n const { max, min } = props;\n const [value, setValue] = useState(0);\n\n const mid = Number(((max - min) / 2).toFixed(5));\n const preColorCls = value >= mid ? '' : 'icon-wrapper-active';\n const nextColorCls = value >= mid ? 'icon-wrapper-active' : '';\n\n return (\n <div className=\"icon-wrapper\">\n <FrownOutlined className={preColorCls} />\n <Slider {...props} onChange={setValue} value={value} />\n <SmileOutlined className={nextColorCls} />\n </div>\n );\n};\n\nconst App: React.FC = () => <IconSlider min={0} max={20} />;\n\nexport default App;\n";},"1e804a80":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("55523280");var o="import React, { useRef, useState } from 'react';\nimport { PlusOutlined } from '@ant-design/icons';\nimport { Button, Divider, Input, Select, Space } from 'antd';\nimport type { InputRef } from 'antd';\n\nlet index = 0;\n\nconst App: React.FC = () => {\n const [items, setItems] = useState(['jack', 'lucy']);\n const [name, setName] = useState('');\n const inputRef = useRef<InputRef>(null);\n\n const onNameChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n setName(event.target.value);\n };\n\n const addItem = (e: React.MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n e.preventDefault();\n setItems([...items, name || `New item ${index++}`]);\n setName('');\n setTimeout(() => {\n inputRef.current?.focus();\n }, 0);\n };\n\n return (\n <Select\n style={{ width: 300 }}\n placeholder=\"custom dropdown render\"\n popupRender={(menu) => (\n <>\n {menu}\n <Divider style={{ margin: '8px 0' }} />\n <Space style={{ padding: '0 8px 4px' }}>\n <Input\n placeholder=\"Please enter item\"\n ref={inputRef}\n value={name}\n onChange={onNameChange}\n onKeyDown={(e) => e.stopPropagation()}\n />\n <Button type=\"text\" icon={<PlusOutlined />} onClick={addItem}>\n Add item\n </Button>\n </Space>\n </>\n )}\n options={items.map((item) => ({ label: item, value: item }))}\n />\n );\n};\n\nexport default App;\n";},"1ed6a721":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2eeae0f1");var o="import React, { useState } from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { GetProp, RadioChangeEvent, TableProps } from 'antd';\nimport { Form, Radio, Space, Switch, Table } from 'antd';\n\ntype SizeType = TableProps['size'];\ntype ColumnsType<T extends object> = GetProp<TableProps<T>, 'columns'>;\ntype TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;\ntype TablePaginationPosition = NonNullable<TablePagination<any>['position']>[number];\ntype ExpandableConfig<T extends object> = TableProps<T>['expandable'];\ntype TableRowSelection<T extends object> = TableProps<T>['rowSelection'];\n\ninterface DataType {\n key: number;\n name: string;\n age: number;\n address: string;\n description: string;\n}\n\nconst columns: ColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n filters: [\n {\n text: 'London',\n value: 'London',\n },\n {\n text: 'New York',\n value: 'New York',\n },\n ],\n onFilter: (value, record) => record.address.indexOf(value as string) === 0,\n },\n {\n title: 'Action',\n key: 'action',\n sorter: true,\n render: () => (\n <Space size=\"middle\">\n <a>Delete</a>\n <a>\n <Space>\n More actions\n <DownOutlined />\n </Space>\n </a>\n </Space>\n ),\n },\n];\n\nconst data = Array.from({ length: 10 }).map<DataType>((_, i) => ({\n key: i,\n name: 'John Brown',\n age: Number(`${i}2`),\n address: `New York No. ${i} Lake Park`,\n description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,\n}));\n\nconst defaultExpandable: ExpandableConfig<DataType> = {\n expandedRowRender: (record: DataType) => <p>{record.description}</p>,\n};\n\nconst defaultTitle = () => 'Here is title';\nconst defaultFooter = () => 'Here is footer';\n\nconst App: React.FC = () => {\n const [bordered, setBordered] = useState(false);\n const [loading, setLoading] = useState(false);\n const [size, setSize] = useState<SizeType>('large');\n const [expandable, setExpandable] = useState<ExpandableConfig<DataType>>(defaultExpandable);\n const [showTitle, setShowTitle] = useState(false);\n const [showHeader, setShowHeader] = useState(true);\n const [showFooter, setShowFooter] = useState(true);\n const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});\n const [hasData, setHasData] = useState(true);\n const [tableLayout, setTableLayout] = useState<string>('unset');\n const [top, setTop] = useState<TablePaginationPosition>('none');\n const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');\n const [ellipsis, setEllipsis] = useState(false);\n const [yScroll, setYScroll] = useState(false);\n const [xScroll, setXScroll] = useState<string>('unset');\n\n const handleBorderChange = (enable: boolean) => {\n setBordered(enable);\n };\n\n const handleLoadingChange = (enable: boolean) => {\n setLoading(enable);\n };\n\n const handleSizeChange = (e: RadioChangeEvent) => {\n setSize(e.target.value);\n };\n\n const handleTableLayoutChange = (e: RadioChangeEvent) => {\n setTableLayout(e.target.value);\n };\n\n const handleExpandChange = (enable: boolean) => {\n setExpandable(enable ? defaultExpandable : undefined);\n };\n\n const handleEllipsisChange = (enable: boolean) => {\n setEllipsis(enable);\n };\n\n const handleTitleChange = (enable: boolean) => {\n setShowTitle(enable);\n };\n\n const handleHeaderChange = (enable: boolean) => {\n setShowHeader(enable);\n };\n\n const handleFooterChange = (enable: boolean) => {\n setShowFooter(enable);\n };\n\n const handleRowSelectionChange = (enable: boolean) => {\n setRowSelection(enable ? {} : undefined);\n };\n\n const handleYScrollChange = (enable: boolean) => {\n setYScroll(enable);\n };\n\n const handleXScrollChange = (e: RadioChangeEvent) => {\n setXScroll(e.target.value);\n };\n\n const handleDataChange = (newHasData: boolean) => {\n setHasData(newHasData);\n };\n\n const scroll: { x?: number | string; y?: number | string } = {};\n if (yScroll) {\n scroll.y = 240;\n }\n if (xScroll !== 'unset') {\n scroll.x = '100vw';\n }\n\n const tableColumns = columns.map((item) => ({ ...item, ellipsis }));\n if (xScroll === 'fixed') {\n tableColumns[0].fixed = true;\n tableColumns[tableColumns.length - 1].fixed = 'right';\n }\n\n const tableProps: TableProps<DataType> = {\n bordered,\n loading,\n size,\n expandable,\n title: showTitle ? defaultTitle : undefined,\n showHeader,\n footer: showFooter ? defaultFooter : undefined,\n rowSelection,\n scroll,\n tableLayout: tableLayout === 'unset' ? undefined : (tableLayout as TableProps['tableLayout']),\n };\n\n return (\n <>\n <Form layout=\"inline\" className=\"table-demo-control-bar\" style={{ marginBottom: 16 }}>\n <Form.Item label=\"Bordered\">\n <Switch checked={bordered} onChange={handleBorderChange} />\n </Form.Item>\n <Form.Item label=\"loading\">\n <Switch checked={loading} onChange={handleLoadingChange} />\n </Form.Item>\n <Form.Item label=\"Title\">\n <Switch checked={showTitle} onChange={handleTitleChange} />\n </Form.Item>\n <Form.Item label=\"Column Header\">\n <Switch checked={showHeader} onChange={handleHeaderChange} />\n </Form.Item>\n <Form.Item label=\"Footer\">\n <Switch checked={showFooter} onChange={handleFooterChange} />\n </Form.Item>\n <Form.Item label=\"Expandable\">\n <Switch checked={!!expandable} onChange={handleExpandChange} />\n </Form.Item>\n <Form.Item label=\"Checkbox\">\n <Switch checked={!!rowSelection} onChange={handleRowSelectionChange} />\n </Form.Item>\n <Form.Item label=\"Fixed Header\">\n <Switch checked={!!yScroll} onChange={handleYScrollChange} />\n </Form.Item>\n <Form.Item label=\"Has Data\">\n <Switch checked={!!hasData} onChange={handleDataChange} />\n </Form.Item>\n <Form.Item label=\"Ellipsis\">\n <Switch checked={!!ellipsis} onChange={handleEllipsisChange} />\n </Form.Item>\n <Form.Item label=\"Size\">\n <Radio.Group value={size} onChange={handleSizeChange}>\n <Radio.Button value=\"large\">Large</Radio.Button>\n <Radio.Button value=\"middle\">Middle</Radio.Button>\n <Radio.Button value=\"small\">Small</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Table Scroll\">\n <Radio.Group value={xScroll} onChange={handleXScrollChange}>\n <Radio.Button value=\"unset\">Unset</Radio.Button>\n <Radio.Button value=\"scroll\">Scroll</Radio.Button>\n <Radio.Button value=\"fixed\">Fixed Columns</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Table Layout\">\n <Radio.Group value={tableLayout} onChange={handleTableLayoutChange}>\n <Radio.Button value=\"unset\">Unset</Radio.Button>\n <Radio.Button value=\"fixed\">Fixed</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Pagination Top\">\n <Radio.Group value={top} onChange={(e) => setTop(e.target.value)}>\n <Radio.Button value=\"topLeft\">TopLeft</Radio.Button>\n <Radio.Button value=\"topCenter\">TopCenter</Radio.Button>\n <Radio.Button value=\"topRight\">TopRight</Radio.Button>\n <Radio.Button value=\"none\">None</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Pagination Bottom\">\n <Radio.Group value={bottom} onChange={(e) => setBottom(e.target.value)}>\n <Radio.Button value=\"bottomLeft\">BottomLeft</Radio.Button>\n <Radio.Button value=\"bottomCenter\">BottomCenter</Radio.Button>\n <Radio.Button value=\"bottomRight\">BottomRight</Radio.Button>\n <Radio.Button value=\"none\">None</Radio.Button>\n </Radio.Group>\n </Form.Item>\n </Form>\n <Table<DataType>\n {...tableProps}\n pagination={{ position: [top, bottom] }}\n columns={tableColumns}\n dataSource={hasData ? data : []}\n scroll={scroll}\n />\n </>\n );\n};\n\nexport default App;\n";},"1ef2571c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7018a581");var o="import React, { useState } from 'react';\nimport { Radio, Select, Space } from 'antd';\nimport type { ConfigProviderProps, RadioChangeEvent, SelectProps } from 'antd';\n\ntype SizeType = ConfigProviderProps['componentSize'];\n\nconst options: SelectProps['options'] = [];\n\nfor (let i = 10; i < 36; i++) {\n options.push({\n value: i.toString(36) + i,\n label: i.toString(36) + i,\n });\n}\n\nconst handleChange = (value: string | string[]) => {\n console.log(`Selected: ${value}`);\n};\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<SizeType>('middle');\n\n const handleSizeChange = (e: RadioChangeEvent) => {\n setSize(e.target.value);\n };\n\n return (\n <>\n <Radio.Group value={size} onChange={handleSizeChange}>\n <Radio.Button value=\"large\">Large</Radio.Button>\n <Radio.Button value=\"middle\">Default</Radio.Button>\n <Radio.Button value=\"small\">Small</Radio.Button>\n </Radio.Group>\n <br />\n <br />\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Select\n size={size}\n defaultValue=\"a1\"\n onChange={handleChange}\n style={{ width: 200 }}\n options={options}\n />\n <Select\n mode=\"multiple\"\n size={size}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n onChange={handleChange}\n style={{ width: '100%' }}\n options={options}\n />\n <Select\n mode=\"tags\"\n size={size}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n onChange={handleChange}\n style={{ width: '100%' }}\n options={options}\n />\n </Space>\n </>\n );\n};\n\nexport default App;\n";},"1f09bcb9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return l;}});var o=t("777fffbe"),a=o._(t("c151961a")),r=o._(t("75844fdf"));let i={lang:{placeholder:"\u8BF7\u9009\u62E9\u65E5\u671F",yearPlaceholder:"\u8BF7\u9009\u62E9\u5E74\u4EFD",quarterPlaceholder:"\u8BF7\u9009\u62E9\u5B63\u5EA6",monthPlaceholder:"\u8BF7\u9009\u62E9\u6708\u4EFD",weekPlaceholder:"\u8BF7\u9009\u62E9\u5468",rangePlaceholder:["\u5F00\u59CB\u65E5\u671F","\u7ED3\u675F\u65E5\u671F"],rangeYearPlaceholder:["\u5F00\u59CB\u5E74\u4EFD","\u7ED3\u675F\u5E74\u4EFD"],rangeMonthPlaceholder:["\u5F00\u59CB\u6708\u4EFD","\u7ED3\u675F\u6708\u4EFD"],rangeQuarterPlaceholder:["\u5F00\u59CB\u5B63\u5EA6","\u7ED3\u675F\u5B63\u5EA6"],rangeWeekPlaceholder:["\u5F00\u59CB\u5468","\u7ED3\u675F\u5468"],...a.default},timePickerLocale:{...r.default}};i.lang.ok="\u786E\u5B9A";var l=i;},"1f129db1":function(n,e,t){},"1f35c352":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("14a0b9a5");var o="import React, { useState } from 'react';\nimport { AutoComplete, Input } from 'antd';\nimport type { AutoCompleteProps } from 'antd';\n\nconst { TextArea } = Input;\n\nconst App: React.FC = () => {\n const [options, setOptions] = useState<AutoCompleteProps['options']>([]);\n\n const handleSearch = (value: string) => {\n setOptions(\n !value ? [] : [{ value }, { value: value + value }, { value: value + value + value }],\n );\n };\n\n const handleKeyPress = (ev: React.KeyboardEvent<HTMLTextAreaElement>) => {\n console.log('handleKeyPress', ev);\n };\n\n const onSelect = (value: string) => {\n console.log('onSelect', value);\n };\n\n return (\n <AutoComplete\n options={options}\n style={{ width: 200 }}\n onSelect={onSelect}\n onSearch={handleSearch}\n >\n <TextArea\n placeholder=\"input here\"\n className=\"custom\"\n style={{ height: 50 }}\n onKeyPress={handleKeyPress}\n />\n </AutoComplete>\n );\n};\n\nexport default App;\n";},"1f48e536":function(n,e,t){},"1f5c0a8d":function(n,e,t){},"1f8a4eed":function(n,e,t){},"1fa29fbe":function(n,e,t){},"1fd0f328":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("53c5ba17");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n showSorterTooltip: { target: 'full-header' },\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'Jim',\n value: 'Jim',\n },\n {\n text: 'Submenu',\n value: 'Submenu',\n children: [\n {\n text: 'Green',\n value: 'Green',\n },\n {\n text: 'Black',\n value: 'Black',\n },\n ],\n },\n ],\n // specify the condition of filtering result\n // here is that finding the name started with `value`\n onFilter: (value, record) => record.name.indexOf(value as string) === 0,\n sorter: (a, b) => a.name.length - b.name.length,\n sortDirections: ['descend'],\n },\n {\n title: 'Age',\n dataIndex: 'age',\n defaultSortOrder: 'descend',\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n filters: [\n {\n text: 'London',\n value: 'London',\n },\n {\n text: 'New York',\n value: 'New York',\n },\n ],\n onFilter: (value, record) => record.address.indexOf(value as string) === 0,\n },\n];\n\nconst data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n];\n\nconst onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {\n console.log('params', pagination, filters, sorter, extra);\n};\n\nconst App: React.FC = () => (\n <Table<DataType>\n columns={columns}\n dataSource={data}\n onChange={onChange}\n showSorterTooltip={{ target: 'sorter-icon' }}\n />\n);\n\nexport default App;\n";},"1ff8f9cf":function(n,e,t){},"2016edad":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("594e6032");var o='import React from \'react\';\nimport { QRCode } from \'antd\';\n\nconst App: React.FC = () => (\n <QRCode\n errorLevel="H"\n value="https://ant.design/"\n icon="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"\n />\n);\n\nexport default App;\n';},"203a6efa":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c610d4fd");var o='import React from \'react\';\nimport { CloseCircleOutlined, SyncOutlined } from \'@ant-design/icons\';\nimport { ConfigProvider, Flex, Tag } from \'antd\';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{ components: { Tag: { defaultBg: \'#f9f0ff\', defaultColor: \'#4b34d3\' } } }}\n >\n <Flex gap="4px 0" wrap>\n <Tag>\n <a\n href="https://github.com/ant-design/ant-design/issues/1862"\n target="_blank"\n rel="noreferrer"\n >\n Link\n </a>\n </Tag>\n <Tag bordered={false}>\n <a\n href="https://github.com/ant-design/ant-design/issues/1862"\n target="_blank"\n rel="noreferrer"\n >\n Link\n </a>\n </Tag>\n <Tag closable color="magenta">\n Tag 2\n </Tag>\n <Tag icon={<CloseCircleOutlined />} color="error">\n error\n </Tag>\n <Tag color="red-inverse">red</Tag>\n <Tag bordered={false} color="magenta">\n magenta\n </Tag>\n <Tag icon={<SyncOutlined spin />} color="processing">\n processing\n </Tag>\n </Flex>\n </ConfigProvider>\n);\n\nexport default App;\n';},"20627d2c":function(n,e,t){},"2076c980":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("85236f6d");var o="import React, { useState } from 'react';\nimport type { SelectProps } from 'antd';\nimport { Select, Space, Tooltip } from 'antd';\n\ninterface ItemProps {\n label: string;\n value: string;\n}\n\nconst options: ItemProps[] = [];\n\nfor (let i = 10; i < 36; i++) {\n const value = i.toString(36) + i;\n options.push({\n label: `Long Label: ${value}`,\n value,\n });\n}\n\nconst sharedProps: SelectProps = {\n mode: 'multiple',\n style: { width: '100%' },\n options,\n placeholder: 'Select Item...',\n maxTagCount: 'responsive',\n};\n\nconst App: React.FC = () => {\n const [value, setValue] = useState(['a10', 'c12', 'h17', 'j19', 'k20']);\n\n const selectProps: SelectProps = {\n value,\n onChange: setValue,\n };\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Select {...sharedProps} {...selectProps} />\n <Select {...sharedProps} disabled />\n <Select\n {...sharedProps}\n {...selectProps}\n maxTagPlaceholder={(omittedValues) => (\n <Tooltip\n styles={{ root: { pointerEvents: 'none' } }}\n title={omittedValues.map(({ label }) => label).join(', ')}\n >\n <span>Hover Me</span>\n </Tooltip>\n )}\n />\n </Space>\n );\n};\n\nexport default App;\n";},"2078ca0d":function(n,e,t){},"209168cd":function(n,e,t){},"20e4e3d7":function(n,e,t){},"20f4e7de":function(n,e,t){},"20f66d77":function(n,e,t){},21061131:function(n,e,t){},"2136eb46":function(n,e,t){},"213e85ac":function(n,e,t){},"215315e2":function(n,e,t){},"216a3a86":function(n,e,t){},"219b50b0":function(n,e,t){},"21b908d7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5bc7653d");var o='import React from \'react\';\nimport { Button, Result } from \'antd\';\n\nconst App: React.FC = () => (\n <Result\n status="403"\n title="403"\n subTitle="Sorry, you are not authorized to access this page."\n extra={<Button type="primary">Back Home</Button>}\n />\n);\n\nexport default App;\n';},"21d447bf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ce5304a3");var o="import React from 'react';\nimport type { PopconfirmProps } from 'antd';\nimport { Button, message, Popconfirm } from 'antd';\n\nconst confirm: PopconfirmProps['onConfirm'] = (e) => {\n console.log(e);\n message.success('Click on Yes');\n};\n\nconst cancel: PopconfirmProps['onCancel'] = (e) => {\n console.log(e);\n message.error('Click on No');\n};\n\nconst App: React.FC = () => (\n <Popconfirm\n title=\"Delete the task\"\n description=\"Are you sure to delete this task?\"\n onConfirm={confirm}\n onCancel={cancel}\n okText=\"Yes\"\n cancelText=\"No\"\n >\n <Button danger>Delete</Button>\n </Popconfirm>\n);\n\nexport default App;\n";},"2250147d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c2ae325a");var o="import React, { useState } from 'react';\nimport { Checkbox, Divider } from 'antd';\nimport type { CheckboxProps } from 'antd';\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst plainOptions = ['Apple', 'Pear', 'Orange'];\nconst defaultCheckedList = ['Apple', 'Orange'];\n\nconst App: React.FC = () => {\n const [checkedList, setCheckedList] = useState<string[]>(defaultCheckedList);\n\n const checkAll = plainOptions.length === checkedList.length;\n const indeterminate = checkedList.length > 0 && checkedList.length < plainOptions.length;\n\n const onChange = (list: string[]) => {\n setCheckedList(list);\n };\n\n const onCheckAllChange: CheckboxProps['onChange'] = (e) => {\n setCheckedList(e.target.checked ? plainOptions : []);\n };\n\n return (\n <>\n <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>\n Check all\n </Checkbox>\n <Divider />\n <CheckboxGroup options={plainOptions} value={checkedList} onChange={onChange} />\n </>\n );\n};\n\nexport default App;\n";},"22555d97":function(n,e,t){},"2273351b":function(n,e,t){},"22912bb4":function(n,e,t){},"22a04353":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("513ba9b7");var o="import React from 'react';\nimport { Slider } from 'antd';\nimport type { SliderSingleProps } from 'antd';\n\nconst marks: SliderSingleProps['marks'] = {\n 0: '0\xb0C',\n 26: '26\xb0C',\n 37: '37\xb0C',\n 100: {\n style: {\n color: '#f50',\n },\n label: <strong>100\xb0C</strong>,\n },\n};\n\nconst App: React.FC = () => (\n <>\n <h4>included=true</h4>\n <Slider marks={marks} defaultValue={37} />\n <Slider range marks={marks} defaultValue={[26, 37]} />\n\n <h4>included=false</h4>\n <Slider marks={marks} included={false} defaultValue={37} />\n\n <h4>marks & step</h4>\n <Slider marks={marks} step={10} defaultValue={37} />\n\n <h4>step=null</h4>\n <Slider marks={marks} step={null} defaultValue={37} />\n </>\n);\n\nexport default App;\n";},"22c4c88a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6e40b954");var o="import React from 'react';\nimport { AntDesignOutlined } from '@ant-design/icons';\nimport { Avatar } from 'antd';\n\nconst App: React.FC = () => (\n <Avatar\n size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}\n icon={<AntDesignOutlined />}\n />\n);\n\nexport default App;\n";},"231919c1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4521625b");var o='import React from \'react\';\nimport { Button, Result } from \'antd\';\n\nconst App: React.FC = () => (\n <Result\n status="500"\n title="500"\n subTitle="Sorry, something went wrong."\n extra={<Button type="primary">Back Home</Button>}\n />\n);\n\nexport default App;\n';},"231c97e5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8ec59db5");var o="import React from 'react';\nimport type { DatePickerProps } from 'antd';\nimport { DatePicker, Space } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst { RangePicker } = DatePicker;\n\nconst dateFormat = 'YYYY/MM/DD';\nconst weekFormat = 'MM/DD';\nconst monthFormat = 'YYYY/MM';\n\n/** Manually entering any of the following formats will perform date parsing */\nconst dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY', 'DD-MM-YYYY', 'DD-MM-YY'];\n\nconst customFormat: DatePickerProps['format'] = (value) =>\n `custom format: ${value.format(dateFormat)}`;\n\nconst customWeekStartEndFormat: DatePickerProps['format'] = (value) =>\n `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)\n .endOf('week')\n .format(weekFormat)}`;\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />\n <DatePicker defaultValue={dayjs('01/01/2015', dateFormatList[0])} format={dateFormatList} />\n <DatePicker defaultValue={dayjs('2015/01', monthFormat)} format={monthFormat} picker=\"month\" />\n <DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker=\"week\" />\n <RangePicker\n defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}\n format={dateFormat}\n />\n <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={customFormat} />\n </Space>\n);\n\nexport default App;\n";},"233846b8":function(n,e,t){},"235d4ac1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c92203f4");var o="import React from 'react';\nimport { Flex, Progress } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"small\" wrap>\n <Progress type=\"circle\" percent={75} format={(percent) => `${percent} Days`} />\n <Progress type=\"circle\" percent={100} format={() => 'Done'} />\n </Flex>\n);\n\nexport default App;\n";},"236bead4":function(n,e,t){},"239e5624":function(n,e,t){},"23a07d4e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b1cf4b9c");var o="import React from 'react';\nimport { Select } from 'antd';\nimport type { SelectProps } from 'antd';\n\ntype LabelRender = SelectProps['labelRender'];\n\nconst options = [\n { label: 'gold', value: 'gold' },\n { label: 'lime', value: 'lime' },\n { label: 'green', value: 'green' },\n { label: 'cyan', value: 'cyan' },\n];\n\nconst labelRender: LabelRender = (props) => {\n const { label, value } = props;\n\n if (label) {\n return value;\n }\n return <span>No option match</span>;\n};\n\nconst App: React.FC = () => (\n <Select labelRender={labelRender} defaultValue=\"1\" style={{ width: '100%' }} options={options} />\n);\n\nexport default App;\n";},"23d2e41c":function(n,e,t){},"23d423e3":function(n,e,t){},"23dee24c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4be88db5");var o="import React, { useState } from 'react';\nimport { ConfigProvider, FloatButton, Slider } from 'antd';\nimport type { ConfigProviderProps, GetProp } from 'antd';\n\ntype AliasToken = GetProp<ConfigProviderProps, 'theme'>['token'];\n\nconst App: React.FC = () => {\n const [radius, setRadius] = useState<number>(0);\n\n const token: Partial<AliasToken> = {\n borderRadius: radius,\n };\n\n return (\n <>\n <Slider min={0} max={20} style={{ margin: 16 }} onChange={setRadius} />\n <ConfigProvider theme={{ token }}>\n <FloatButton shape=\"square\" badge={{ dot: true }} />\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},"23fbea8b":function(n,e,t){},"23ffd883":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b45b7a1f");var o="import React, { useState } from 'react';\nimport type { DatePickerProps, TimePickerProps } from 'antd';\nimport { DatePicker, Select, Space, TimePicker } from 'antd';\n\nconst { Option } = Select;\n\ntype PickerType = 'time' | 'date';\n\nconst PickerWithType = ({\n type,\n onChange,\n}: {\n type: PickerType;\n onChange: TimePickerProps['onChange'] | DatePickerProps['onChange'];\n}) => {\n if (type === 'time') return <TimePicker onChange={onChange} />;\n if (type === 'date') return <DatePicker onChange={onChange} />;\n return <DatePicker picker={type} onChange={onChange} />;\n};\n\nconst App: React.FC = () => {\n const [type, setType] = useState<PickerType>('time');\n\n return (\n <Space>\n <Select aria-label=\"Picker Type\" value={type} onChange={setType}>\n <Option value=\"time\">Time</Option>\n <Option value=\"date\">Date</Option>\n <Option value=\"week\">Week</Option>\n <Option value=\"month\">Month</Option>\n <Option value=\"quarter\">Quarter</Option>\n <Option value=\"year\">Year</Option>\n </Select>\n <PickerWithType type={type} onChange={(value) => console.log(value)} />\n </Space>\n );\n};\n\nexport default App;\n";},"24279cb1":function(n,e,t){},"24480da7":function(n,e,t){},"2457483b":function(n,e,t){},"246067e2":function(n,e,t){},"246eed01":function(n,e,t){},"2477eab8":function(n,e,t){},"24a8e5c3":function(n,e,t){},"24afbea9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4f2c8108");var o="import React from 'react';\nimport { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Menu } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n key: 'sub1',\n icon: <MailOutlined />,\n label: 'Navigation One',\n children: [\n {\n key: '1-1',\n label: 'Item 1',\n type: 'group',\n children: [\n { key: '1', label: 'Option 1' },\n { key: '2', label: 'Option 2' },\n ],\n },\n {\n key: '1-2',\n label: 'Item 2',\n type: 'group',\n children: [\n { key: '3', label: 'Option 3' },\n { key: '4', label: 'Option 4' },\n ],\n },\n ],\n },\n {\n key: 'sub2',\n icon: <AppstoreOutlined />,\n label: 'Navigation Two',\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n {\n key: 'sub3',\n label: 'Submenu',\n children: [\n { key: '7', label: 'Option 7' },\n { key: '8', label: 'Option 8' },\n ],\n },\n ],\n },\n {\n key: 'sub4',\n label: 'Navigation Three',\n icon: <SettingOutlined />,\n children: [\n { key: '9', label: 'Option 9' },\n { key: '10', label: 'Option 10' },\n { key: '11', label: 'Option 11' },\n { key: '12', label: 'Option 12' },\n ],\n },\n];\n\nconst onClick: MenuProps['onClick'] = (e) => {\n console.log('click', e);\n};\n\nconst App: React.FC = () => (\n <Menu onClick={onClick} style={{ width: 256 }} mode=\"vertical\" items={items} />\n);\n\nexport default App;\n";},"24b3e385":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3f00d914");var o="import React from 'react';\nimport { Affix, Button } from 'antd';\n\nconst containerStyle: React.CSSProperties = {\n width: '100%',\n height: 100,\n overflow: 'auto',\n boxShadow: '0 0 0 1px #1677ff',\n scrollbarWidth: 'thin',\n scrollbarGutter: 'stable',\n};\n\nconst style: React.CSSProperties = {\n width: '100%',\n height: 1000,\n};\n\nconst App: React.FC = () => {\n const [container, setContainer] = React.useState<HTMLDivElement | null>(null);\n return (\n <div style={containerStyle} ref={setContainer}>\n <div style={style}>\n <Affix target={() => container}>\n <Button type=\"primary\">Fixed at the top of container</Button>\n </Affix>\n </div>\n </div>\n );\n};\n\nexport default App;\n";},"24bddcc6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f7560db3");var o="import React from 'react';\nimport { Select } from 'antd';\n\nconst handleChange = (value: { value: string; label: React.ReactNode }) => {\n console.log(value); // { value: \"lucy\", key: \"lucy\", label: \"Lucy (101)\" }\n};\n\nconst App: React.FC = () => (\n <Select\n labelInValue\n defaultValue={{ value: 'lucy', label: 'Lucy (101)' }}\n style={{ width: 120 }}\n onChange={handleChange}\n options={[\n {\n value: 'jack',\n label: 'Jack (100)',\n },\n {\n value: 'lucy',\n label: 'Lucy (101)',\n },\n ]}\n />\n);\n\nexport default App;\n";},"24ea9bf3":function(n,e,t){},"2514f46b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("356ff941");var o="import React from 'react';\nimport type { InputNumberProps } from 'antd';\nimport { InputNumber } from 'antd';\n\nconst onChange: InputNumberProps['onChange'] = (value) => {\n console.log('changed', value);\n};\n\nconst App: React.FC = () => (\n <InputNumber<string>\n style={{ width: 200 }}\n defaultValue=\"1\"\n min=\"0\"\n max=\"10\"\n step=\"0.00000000000001\"\n onChange={onChange}\n stringMode\n />\n);\n\nexport default App;\n";},"2523039b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("384ee047");var o="import React, { useState } from 'react';\nimport { Button, Form, Input, Select } from 'antd';\n\nconst { Option } = Select;\n\ntype Currency = 'rmb' | 'dollar';\n\ninterface PriceValue {\n number?: number;\n currency?: Currency;\n}\n\ninterface PriceInputProps {\n id?: string;\n value?: PriceValue;\n onChange?: (value: PriceValue) => void;\n}\n\nconst PriceInput: React.FC<PriceInputProps> = (props) => {\n const { id, value = {}, onChange } = props;\n const [number, setNumber] = useState(0);\n const [currency, setCurrency] = useState<Currency>('rmb');\n\n const triggerChange = (changedValue: { number?: number; currency?: Currency }) => {\n onChange?.({ number, currency, ...value, ...changedValue });\n };\n\n const onNumberChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const newNumber = parseInt(e.target.value || '0', 10);\n if (Number.isNaN(number)) {\n return;\n }\n if (!('number' in value)) {\n setNumber(newNumber);\n }\n triggerChange({ number: newNumber });\n };\n\n const onCurrencyChange = (newCurrency: Currency) => {\n if (!('currency' in value)) {\n setCurrency(newCurrency);\n }\n triggerChange({ currency: newCurrency });\n };\n\n return (\n <span id={id}>\n <Input\n type=\"text\"\n value={value.number || number}\n onChange={onNumberChange}\n style={{ width: 100 }}\n />\n <Select\n value={value.currency || currency}\n style={{ width: 80, margin: '0 8px' }}\n onChange={onCurrencyChange}\n >\n <Option value=\"rmb\">RMB</Option>\n <Option value=\"dollar\">Dollar</Option>\n </Select>\n </span>\n );\n};\n\nconst App: React.FC = () => {\n const onFinish = (values: any) => {\n console.log('Received values from form: ', values);\n };\n\n const checkPrice = (_: any, value: { number: number }) => {\n if (value.number > 0) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('Price must be greater than zero!'));\n };\n\n return (\n <Form\n name=\"customized_form_controls\"\n layout=\"inline\"\n onFinish={onFinish}\n initialValues={{\n price: {\n number: 0,\n currency: 'rmb',\n },\n }}\n >\n <Form.Item name=\"price\" label=\"Price\" rules={[{ validator: checkPrice }]}>\n <PriceInput />\n </Form.Item>\n <Form.Item>\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n";},"257c7f57":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5b529225");var o="import React from 'react';\nimport { Button, message } from 'antd';\n\nconst App: React.FC = () => {\n const [messageApi, contextHolder] = message.useMessage();\n\n const success = () => {\n messageApi.open({\n type: 'loading',\n content: 'Action in progress..',\n duration: 0,\n });\n // Dismiss manually and asynchronously\n setTimeout(messageApi.destroy, 2500);\n };\n return (\n <>\n {contextHolder}\n <Button onClick={success}>Display a loading indicator</Button>\n </>\n );\n};\n\nexport default App;\n";},"25b6374b":function(n,e,t){},"260fd1be":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.e(e,{default:function(){return d;},locales:function(){return s;}});var o=t("777fffbe"),a=t("f19d2b93"),r=o._(t("5b220c3d")),i=o._(t("23546486")),l=o._(t("f4312251"));let s={cn:{root:"\u6839\u5143\u7D20","popup.root":"\u5F39\u51FA\u83DC\u5355\u5143\u7D20"},en:{root:"Root element","popup.root":"Popup element"}},c=({component:n,options:e,defaultValue:t,...o})=>{let i=r.default.useRef(null);return(0,a.jsx)("div",{ref:i,style:{position:"absolute",marginBottom:80},children:(0,a.jsx)(n,{...o,open:!0,placement:"bottomLeft",defaultValue:t,getPopupContainer:()=>i.current,options:e,styles:{popup:{zIndex:1}}})});};var d=({component:n,defaultValue:e,options:t,height:o,style:r,componentName:d,...u})=>{let[p]=(0,i.default)(s);return(0,a.jsx)(l.default,{componentName:d,semantics:[{name:"root",desc:p.root,version:"5.25.0"},{name:"popup.root",desc:p["popup.root"],version:"5.25.0"}],height:o,children:(0,a.jsx)(c,{component:n,defaultValue:e,options:t,style:r,...u})});};},"262da149":function(n,e,t){},"26412f56":function(n,e,t){},"26aeeaa5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("00535210");var o="import React, { useState } from 'react';\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport { DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\ninterface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n 'data-row-key': string;\n}\n\nconst Row: React.FC<Readonly<RowProps>> = (props) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: props['data-row-key'],\n });\n\n const style: React.CSSProperties = {\n ...props.style,\n transform: CSS.Translate.toString(transform),\n transition,\n cursor: 'move',\n ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),\n };\n\n return <tr {...props} ref={setNodeRef} style={style} {...attributes} {...listeners} />;\n};\n\nconst App: React.FC = () => {\n const [dataSource, setDataSource] = useState([\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address:\n 'Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text Long text',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sidney No. 1 Lake Park',\n },\n ]);\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n // https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints\n distance: 1,\n },\n }),\n );\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n setDataSource((prev) => {\n const activeIndex = prev.findIndex((i) => i.key === active.id);\n const overIndex = prev.findIndex((i) => i.key === over?.id);\n return arrayMove(prev, activeIndex, overIndex);\n });\n }\n };\n\n return (\n <DndContext sensors={sensors} modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>\n <SortableContext\n // rowKey array\n items={dataSource.map((i) => i.key)}\n strategy={verticalListSortingStrategy}\n >\n <Table<DataType>\n components={{\n body: { row: Row },\n }}\n rowKey=\"key\"\n columns={columns}\n dataSource={dataSource}\n />\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default App;\n";},"2708632b":function(n,e,t){},"2721d950":function(n,e,t){},"273d613f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2f56b89a");var o="import React from 'react';\nimport { Checkbox } from 'antd';\nimport type { CheckboxProps } from 'antd';\n\nconst onChange: CheckboxProps['onChange'] = (e) => {\n console.log(`checked = ${e.target.checked}`);\n};\n\nconst App: React.FC = () => <Checkbox onChange={onChange}>Checkbox</Checkbox>;\n\nexport default App;\n";},27953283:function(n,e,t){},"27c19118":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9db5f1e3");var o="import React, { useState } from 'react';\nimport { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Menu } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n key: '1',\n icon: <MailOutlined />,\n label: 'Navigation One',\n children: [\n { key: '11', label: 'Option 1' },\n { key: '12', label: 'Option 2' },\n { key: '13', label: 'Option 3' },\n { key: '14', label: 'Option 4' },\n ],\n },\n {\n key: '2',\n icon: <AppstoreOutlined />,\n label: 'Navigation Two',\n children: [\n { key: '21', label: 'Option 1' },\n { key: '22', label: 'Option 2' },\n {\n key: '23',\n label: 'Submenu',\n children: [\n { key: '231', label: 'Option 1' },\n { key: '232', label: 'Option 2' },\n { key: '233', label: 'Option 3' },\n ],\n },\n {\n key: '24',\n label: 'Submenu 2',\n children: [\n { key: '241', label: 'Option 1' },\n { key: '242', label: 'Option 2' },\n { key: '243', label: 'Option 3' },\n ],\n },\n ],\n },\n {\n key: '3',\n icon: <SettingOutlined />,\n label: 'Navigation Three',\n children: [\n { key: '31', label: 'Option 1' },\n { key: '32', label: 'Option 2' },\n { key: '33', label: 'Option 3' },\n { key: '34', label: 'Option 4' },\n ],\n },\n];\n\ninterface LevelKeysProps {\n key?: string;\n children?: LevelKeysProps[];\n}\n\nconst getLevelKeys = (items1: LevelKeysProps[]) => {\n const key: Record<string, number> = {};\n const func = (items2: LevelKeysProps[], level = 1) => {\n items2.forEach((item) => {\n if (item.key) {\n key[item.key] = level;\n }\n if (item.children) {\n func(item.children, level + 1);\n }\n });\n };\n func(items1);\n return key;\n};\n\nconst levelKeys = getLevelKeys(items as LevelKeysProps[]);\n\nconst App: React.FC = () => {\n const [stateOpenKeys, setStateOpenKeys] = useState(['2', '23']);\n\n const onOpenChange: MenuProps['onOpenChange'] = (openKeys) => {\n const currentOpenKey = openKeys.find((key) => stateOpenKeys.indexOf(key) === -1);\n // open\n if (currentOpenKey !== undefined) {\n const repeatIndex = openKeys\n .filter((key) => key !== currentOpenKey)\n .findIndex((key) => levelKeys[key] === levelKeys[currentOpenKey]);\n\n setStateOpenKeys(\n openKeys\n // remove repeat key\n .filter((_, index) => index !== repeatIndex)\n // remove current level all child\n .filter((key) => levelKeys[key] <= levelKeys[currentOpenKey]),\n );\n } else {\n // close\n setStateOpenKeys(openKeys);\n }\n };\n\n return (\n <Menu\n mode=\"inline\"\n defaultSelectedKeys={['231']}\n openKeys={stateOpenKeys}\n onOpenChange={onOpenChange}\n style={{ width: 256 }}\n items={items}\n />\n );\n};\n\nexport default App;\n";},"27c449e0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("76122a66");var o='import React from \'react\';\nimport { ArrowDownOutlined, ArrowUpOutlined } from \'@ant-design/icons\';\nimport { Card, Col, Row, Statistic } from \'antd\';\n\nconst App: React.FC = () => (\n <Row gutter={16}>\n <Col span={12}>\n <Card variant="borderless">\n <Statistic\n title="Active"\n value={11.28}\n precision={2}\n valueStyle={{ color: \'#3f8600\' }}\n prefix={<ArrowUpOutlined />}\n suffix="%"\n />\n </Card>\n </Col>\n <Col span={12}>\n <Card variant="borderless">\n <Statistic\n title="Idle"\n value={9.3}\n precision={2}\n valueStyle={{ color: \'#cf1322\' }}\n prefix={<ArrowDownOutlined />}\n suffix="%"\n />\n </Card>\n </Col>\n </Row>\n);\n\nexport default App;\n';},"27e96236":function(n,e,t){},"27f9d042":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5a15bf4c");var o="import React from 'react';\nimport { Mentions } from 'antd';\nimport type { GetProp, MentionProps } from 'antd';\n\ntype MentionsOptionProps = GetProp<MentionProps, 'options'>[number];\n\nconst onChange = (value: string) => {\n console.log('Change:', value);\n};\n\nconst onSelect = (option: MentionsOptionProps) => {\n console.log('select', option);\n};\n\nconst App: React.FC = () => (\n <Mentions\n style={{ width: '100%' }}\n onChange={onChange}\n onSelect={onSelect}\n defaultValue=\"@afc163\"\n options={[\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n {\n value: 'yesmeck',\n label: 'yesmeck',\n },\n ]}\n />\n);\n\nexport default App;\n";},"2817c2cd":function(n,e,t){},"28256ac7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("72a11508");var o='import React from \'react\';\nimport { Button, Result } from \'antd\';\n\nconst App: React.FC = () => (\n <Result\n status="warning"\n title="There are some problems with your operation."\n extra={\n <Button type="primary" key="console">\n Go Console\n </Button>\n }\n />\n);\n\nexport default App;\n';},"28332f7b":function(n,e,t){},"2895f4c8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a412d087");var o="import React from 'react';\nimport { ColorPicker } from 'antd';\n\nexport default () => <ColorPicker defaultValue=\"#1677ff\" showText disabled />;\n";},"28a93f0f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3ff63ddc");var o='import React from \'react\';\nimport { Form, Input } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Form\n name="layout-multiple-horizontal"\n layout="horizontal"\n labelCol={{ span: 4 }}\n wrapperCol={{ span: 20 }}\n >\n <Form.Item label="horizontal" name="horizontal" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item\n layout="vertical"\n label="vertical"\n name="vertical"\n rules={[{ required: true }]}\n labelCol={{ span: 24 }}\n wrapperCol={{ span: 24 }}\n >\n <Input />\n </Form.Item>\n </Form>\n <br />\n <Form\n name="layout-multiple-vertical"\n layout="vertical"\n labelCol={{ span: 4 }}\n wrapperCol={{ span: 20 }}\n >\n <Form.Item label="vertical" name="vertical" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item\n layout="horizontal"\n label="horizontal"\n name="horizontal"\n rules={[{ required: true }]}\n >\n <Input />\n </Form.Item>\n </Form>\n </>\n);\n\nexport default App;\n';},"28b9eb0c":function(n,e,t){},"28c382b9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7eb75643");var o="import React from 'react';\nimport { DownOutlined, MailOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Flex, Menu, Space } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items1: MenuItem[] = [\n {\n key: 'sub1',\n icon: <MailOutlined />,\n label: 'Navigation One',\n children: [\n {\n key: '1',\n label: (\n <Flex justify=\"space-between\">\n <span>Option 1</span>\n <DownOutlined />\n </Flex>\n ),\n },\n {\n key: '2',\n label: 'Option 2',\n extra: '\u2318P',\n },\n {\n key: '3',\n label: <a href=\"https://www.baidu.com\">Link Option</a>,\n disabled: true,\n },\n ],\n },\n];\n\nconst items2: MenuItem[] = [\n { key: '1', label: 'Users', extra: '\u2318U' },\n { key: '2', label: 'Profile', extra: '\u2318P' },\n];\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\">\n <Menu\n mode=\"inline\"\n defaultOpenKeys={['sub1']}\n defaultSelectedKeys={['1']}\n style={{ width: 256 }}\n items={items1}\n />\n <Menu theme=\"dark\" style={{ width: 256 }} items={items2} />\n </Space>\n);\n\nexport default App;\n";},"28fb3ec0":function(n,e,t){},"293f4f22":function(n,e,t){},"2989c81c":function(n,e,t){},"29a4c6d0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("02398622");var o='import React from \'react\';\nimport { Card, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical" size="middle" style={{ display: \'flex\' }}>\n <Card title="Card" size="small">\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n <Card title="Card" size="small">\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n <Card title="Card" size="small">\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n </Space>\n);\n\nexport default App;\n';},"29b35957":function(n,e,t){},"29d2207b":function(n,e,t){},"29dcdeeb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f31d6c21");var o='import React from \'react\';\nimport { Button, Flex, Splitter, Switch, Typography } from \'antd\';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify="center" align="center" style={{ height: \'100%\' }}>\n <Typography.Title type="secondary" level={5} style={{ whiteSpace: \'nowrap\' }}>\n {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => {\n const [sizes, setSizes] = React.useState<(number | string)[]>([\'50%\', \'50%\']);\n const [enabled, setEnabled] = React.useState(true);\n return (\n <Flex vertical gap="middle">\n <Splitter\n onResize={setSizes}\n style={{ height: 200, boxShadow: \'0 0 10px rgba(0, 0, 0, 0.1)\' }}\n >\n <Splitter.Panel size={sizes[0]} resizable={enabled}>\n <Desc text="First" />\n </Splitter.Panel>\n <Splitter.Panel size={sizes[1]}>\n <Desc text="Second" />\n </Splitter.Panel>\n </Splitter>\n <Flex gap="middle" justify="space-between">\n <Switch\n value={enabled}\n onChange={() => setEnabled(!enabled)}\n checkedChildren="Enabled"\n unCheckedChildren="Disabled"\n />\n <Button onClick={() => setSizes([\'50%\', \'50%\'])}>Reset</Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default App;\n';},"29e0d70f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("18efc164");var o="import React from 'react';\nimport { Button, Spin } from 'antd';\n\nconst App: React.FC = () => {\n const [spinning, setSpinning] = React.useState(false);\n const [percent, setPercent] = React.useState(0);\n\n const showLoader = () => {\n setSpinning(true);\n let ptg = -10;\n\n const interval = setInterval(() => {\n ptg += 5;\n setPercent(ptg);\n\n if (ptg > 120) {\n clearInterval(interval);\n setSpinning(false);\n setPercent(0);\n }\n }, 100);\n };\n\n return (\n <>\n <Button onClick={showLoader}>Show fullscreen</Button>\n <Spin spinning={spinning} percent={percent} fullscreen />\n </>\n );\n};\n\nexport default App;\n";},"29e2696f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("373e40d8");var o='import React from \'react\';\nimport { Button, ConfigProvider, Flex, Popconfirm } from \'antd\';\n\nconst text = \'Are you sure to delete this task?\';\nconst description = \'Delete the task\';\nconst buttonWidth = 80;\n\nconst App: React.FC = () => (\n <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>\n <Flex vertical justify="center" align="center" className="demo">\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Popconfirm\n placement="topLeft"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>TL</Button>\n </Popconfirm>\n <Popconfirm\n placement="top"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>Top</Button>\n </Popconfirm>\n <Popconfirm\n placement="topRight"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>TR</Button>\n </Popconfirm>\n </Flex>\n <Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">\n <Flex align="center" vertical>\n <Popconfirm\n placement="leftTop"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>LT</Button>\n </Popconfirm>\n <Popconfirm\n placement="left"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>Left</Button>\n </Popconfirm>\n <Popconfirm\n placement="leftBottom"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>LB</Button>\n </Popconfirm>\n </Flex>\n <Flex align="center" vertical>\n <Popconfirm\n placement="rightTop"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>RT</Button>\n </Popconfirm>\n <Popconfirm\n placement="right"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>Right</Button>\n </Popconfirm>\n <Popconfirm\n placement="rightBottom"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>RB</Button>\n </Popconfirm>\n </Flex>\n </Flex>\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Popconfirm\n placement="bottomLeft"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>BL</Button>\n </Popconfirm>\n <Popconfirm\n placement="bottom"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>Bottom</Button>\n </Popconfirm>\n <Popconfirm\n placement="bottomRight"\n title={text}\n description={description}\n okText="Yes"\n cancelText="No"\n >\n <Button>BR</Button>\n </Popconfirm>\n </Flex>\n </Flex>\n </ConfigProvider>\n);\n\nexport default App;\n';},"29e45378":function(n,e,t){},"2a0ae940":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7a0c6385");var o='import React from \'react\';\nimport type { FormInstance } from \'antd\';\nimport { Button, Form, Input, Space } from \'antd\';\n\ninterface SubmitButtonProps {\n form: FormInstance;\n}\n\nconst SubmitButton: React.FC<React.PropsWithChildren<SubmitButtonProps>> = ({ form, children }) => {\n const [submittable, setSubmittable] = React.useState<boolean>(false);\n\n // Watch all values\n const values = Form.useWatch([], form);\n\n React.useEffect(() => {\n form\n .validateFields({ validateOnly: true })\n .then(() => setSubmittable(true))\n .catch(() => setSubmittable(false));\n }, [form, values]);\n\n return (\n <Button type="primary" htmlType="submit" disabled={!submittable}>\n {children}\n </Button>\n );\n};\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n return (\n <Form form={form} name="validateOnly" layout="vertical" autoComplete="off">\n <Form.Item name="name" label="Name" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item name="age" label="Age" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item>\n <Space>\n <SubmitButton form={form}>Submit</SubmitButton>\n <Button htmlType="reset">Reset</Button>\n </Space>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"2a262d81":function(n,e,t){},"2a2c6ade":function(n,e,t){},"2a30689b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ef38070e");var o='import React, { useState } from \'react\';\nimport { EditOutlined, EllipsisOutlined, SettingOutlined } from \'@ant-design/icons\';\nimport { Avatar, Card, Flex, Switch } from \'antd\';\n\nconst actions: React.ReactNode[] = [\n <EditOutlined key="edit" />,\n <SettingOutlined key="setting" />,\n <EllipsisOutlined key="ellipsis" />,\n];\n\nconst App: React.FC = () => {\n const [loading, setLoading] = useState<boolean>(true);\n return (\n <Flex gap="middle" align="start" vertical>\n <Switch checked={!loading} onChange={(checked) => setLoading(!checked)} />\n <Card loading={loading} actions={actions} style={{ minWidth: 300 }}>\n <Card.Meta\n avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=1" />}\n title="Card title"\n description={\n <>\n <p>This is the description</p>\n <p>This is the description</p>\n </>\n }\n />\n </Card>\n <Card loading={loading} actions={actions} style={{ minWidth: 300 }}>\n <Card.Meta\n avatar={<Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=2" />}\n title="Card title"\n description={\n <>\n <p>This is the description</p>\n <p>This is the description</p>\n </>\n }\n />\n </Card>\n </Flex>\n );\n};\n\nexport default App;\n';},"2a4395dd":function(n,e,t){},"2a482626":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8dedf947");var o="import React from 'react';\nimport { Timeline } from 'antd';\n\nconst App: React.FC = () => (\n <Timeline\n items={[\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n children: 'Solve initial network problems 2015-09-01',\n },\n {\n children: 'Technical testing 2015-09-01',\n },\n {\n children: 'Network problems being solved 2015-09-01',\n },\n ]}\n />\n);\n\nexport default App;\n";},"2a6edb8b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fdd24265");var o="import React from 'react';\nimport { Flex, TimePicker } from 'antd';\n\nconst { RangePicker } = TimePicker;\n\nconst App: React.FC = () => (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <TimePicker placeholder=\"Outlined\" />\n <RangePicker placeholder={['Outlined Start', 'Outlined End']} />\n </Flex>\n <Flex gap={8}>\n <TimePicker variant=\"filled\" placeholder=\"Filled\" />\n <RangePicker variant=\"filled\" placeholder={['Filled Start', 'Filled End']} />\n </Flex>\n <Flex gap={8}>\n <TimePicker variant=\"borderless\" placeholder=\"Borderless\" />\n <RangePicker variant=\"borderless\" placeholder={['Borderless Start', 'Borderless End']} />\n </Flex>\n <Flex gap={8}>\n <TimePicker variant=\"underlined\" placeholder=\"Underlined\" />\n <RangePicker variant=\"underlined\" placeholder={['Underlined Start', 'Underlined End']} />\n </Flex>\n </Flex>\n);\n\nexport default App;\n";},"2a7b5674":function(n,e,t){},"2abfea61":function(n,e,t){},"2af3f7e9":function(n,e,t){},"2b0eb0e2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("60ed14ae");var o="/* eslint-disable react-dom/no-dangerously-set-innerhtml */\nimport React from 'react';\nimport { Flex } from 'antd';\n\nconst styleTxt = `\n.blog-css-tricks {\n border: 1px solid #0958d9;\n width: 200px;\n height: 50px;\n}\n\n.blog-css-tricks {\n @container style(--custom-var) {\n p {\n color: green;\n }\n }\n}\n`;\n\nconst Block = (props: { children: React.ReactNode; style?: React.CSSProperties }) => (\n <div className=\"blog-css-tricks\" style={props.style}>\n <p>{props.children}</p>\n </div>\n);\n\nexport default () => (\n <Flex vertical gap=\"middle\">\n <style>{styleTxt}</style>\n <Block>Without CSS Var</Block>\n <Block style={{ '--custom-var': '0px' }}>With CSS Var</Block>\n </Flex>\n);\n";},"2b1266c5":function(n,e,t){},"2ba6e97d":function(n,e,t){},"2bafe3f0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("05f80574");var o="import React, { useState } from 'react';\nimport { Button, Input } from 'antd';\n\nconst { TextArea } = Input;\n\nconst defaultValue =\n 'The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.';\n\nconst App: React.FC = () => {\n const [autoResize, setAutoResize] = useState(false);\n\n return (\n <>\n <Button onClick={() => setAutoResize(!autoResize)} style={{ marginBottom: 16 }}>\n Auto Resize: {String(autoResize)}\n </Button>\n <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />\n <TextArea allowClear style={{ width: 93 }} />\n <br />\n <TextArea\n style={{\n resize: 'both',\n }}\n showCount\n />\n </>\n );\n};\n\nexport default App;\n";},"2bb80b5e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0c71447d");var o='import React, { useState } from \'react\';\nimport { PlusOutlined } from \'@ant-design/icons\';\nimport {\n Button,\n Cascader,\n Checkbox,\n ColorPicker,\n DatePicker,\n Form,\n Input,\n InputNumber,\n Radio,\n Rate,\n Select,\n Slider,\n Switch,\n TreeSelect,\n Upload,\n} from \'antd\';\n\nconst { RangePicker } = DatePicker;\nconst { TextArea } = Input;\n\nconst normFile = (e: any) => {\n if (Array.isArray(e)) {\n return e;\n }\n return e?.fileList;\n};\n\nconst FormDisabledDemo: React.FC = () => {\n const [componentDisabled, setComponentDisabled] = useState<boolean>(true);\n\n return (\n <>\n <Checkbox\n checked={componentDisabled}\n onChange={(e) => setComponentDisabled(e.target.checked)}\n >\n Form disabled\n </Checkbox>\n <Form\n labelCol={{ span: 4 }}\n wrapperCol={{ span: 14 }}\n layout="horizontal"\n disabled={componentDisabled}\n style={{ maxWidth: 600 }}\n >\n <Form.Item label="Checkbox" name="disabled" valuePropName="checked">\n <Checkbox>Checkbox</Checkbox>\n </Form.Item>\n <Form.Item label="Radio">\n <Radio.Group>\n <Radio value="apple"> Apple </Radio>\n <Radio value="pear"> Pear </Radio>\n </Radio.Group>\n </Form.Item>\n <Form.Item label="Input">\n <Input />\n </Form.Item>\n <Form.Item label="Select">\n <Select>\n <Select.Option value="demo">Demo</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item label="TreeSelect">\n <TreeSelect\n treeData={[\n { title: \'Light\', value: \'light\', children: [{ title: \'Bamboo\', value: \'bamboo\' }] },\n ]}\n />\n </Form.Item>\n <Form.Item label="Cascader">\n <Cascader\n options={[\n {\n value: \'zhejiang\',\n label: \'Zhejiang\',\n children: [\n {\n value: \'hangzhou\',\n label: \'Hangzhou\',\n },\n ],\n },\n ]}\n />\n </Form.Item>\n <Form.Item label="DatePicker">\n <DatePicker />\n </Form.Item>\n <Form.Item label="RangePicker">\n <RangePicker />\n </Form.Item>\n <Form.Item label="InputNumber">\n <InputNumber />\n </Form.Item>\n <Form.Item label="TextArea">\n <TextArea rows={4} />\n </Form.Item>\n <Form.Item label="Switch" valuePropName="checked">\n <Switch />\n </Form.Item>\n <Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>\n <Upload action="/upload.do" listType="picture-card">\n <button\n style={{ color: \'inherit\', cursor: \'inherit\', border: 0, background: \'none\' }}\n type="button"\n >\n <PlusOutlined />\n <div style={{ marginTop: 8 }}>Upload</div>\n </button>\n </Upload>\n </Form.Item>\n <Form.Item label="Button">\n <Button>Button</Button>\n </Form.Item>\n <Form.Item label="Slider">\n <Slider />\n </Form.Item>\n <Form.Item label="ColorPicker">\n <ColorPicker />\n </Form.Item>\n <Form.Item label="Rate">\n <Rate />\n </Form.Item>\n </Form>\n </>\n );\n};\n\nexport default () => <FormDisabledDemo />;\n';},"2bf44fee":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("74cf00c5");var o='import React from \'react\';\nimport { DownOutlined } from \'@ant-design/icons\';\nimport { Button, Divider, Dropdown, Space, theme } from \'antd\';\nimport type { MenuProps } from \'antd\';\n\nconst { useToken } = theme;\n\nconst items: MenuProps[\'items\'] = [\n {\n key: \'1\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">\n 1st menu item\n </a>\n ),\n },\n {\n key: \'2\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">\n 2nd menu item (disabled)\n </a>\n ),\n disabled: true,\n },\n {\n key: \'3\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">\n 3rd menu item (disabled)\n </a>\n ),\n disabled: true,\n },\n];\n\nconst App: React.FC = () => {\n const { token } = useToken();\n\n const contentStyle: React.CSSProperties = {\n backgroundColor: token.colorBgElevated,\n borderRadius: token.borderRadiusLG,\n boxShadow: token.boxShadowSecondary,\n };\n\n const menuStyle: React.CSSProperties = {\n boxShadow: \'none\',\n };\n\n return (\n <Dropdown\n menu={{ items }}\n popupRender={(menu) => (\n <div style={contentStyle}>\n {React.cloneElement(\n menu as React.ReactElement<{\n style: React.CSSProperties;\n }>,\n { style: menuStyle },\n )}\n <Divider style={{ margin: 0 }} />\n <Space style={{ padding: 8 }}>\n <Button type="primary">Click me!</Button>\n </Space>\n </div>\n )}\n >\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Hover me\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n );\n};\n\nexport default App;\n';},"2c027fa2":function(n,e,t){},"2c220785":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b8248a30");var o="import React from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { Space, TimePicker } from 'antd';\nimport type { TimePickerProps } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst onChange: TimePickerProps['onChange'] = (time, timeString) => {\n console.log(time, timeString);\n};\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <TimePicker\n suffixIcon={<SmileOutlined />}\n onChange={onChange}\n defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}\n />\n <TimePicker prefix={<SmileOutlined />} />\n <TimePicker.RangePicker prefix={<SmileOutlined />} />\n </Space>\n);\n\nexport default App;\n";},"2c6ba998":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b1098fe5");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ css, token }) => {\n const { antCls } = token;\n return {\n customTable: css`\n ${antCls}-table {\n ${antCls}-table-container {\n ${antCls}-table-body,\n ${antCls}-table-content {\n scrollbar-width: thin;\n scrollbar-color: #eaeaea transparent;\n scrollbar-gutter: stable;\n }\n }\n }\n `,\n };\n});\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n width: 150,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n width: 150,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\nconst dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n}));\n\nconst App: React.FC = () => {\n const { styles } = useStyle();\n return (\n <Table<DataType>\n className={styles.customTable}\n columns={columns}\n dataSource={dataSource}\n pagination={{ pageSize: 50 }}\n scroll={{ y: 55 * 5 }}\n />\n );\n};\n\nexport default App;\n";},"2cbc19cc":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("18901ddd");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, Upload } from 'antd';\n\nconst props: UploadProps = {\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n onChange({ file, fileList }) {\n if (file.status !== 'uploading') {\n console.log(file, fileList);\n }\n },\n defaultFileList: [\n {\n uid: '1',\n name: 'xxx.png',\n status: 'uploading',\n url: 'http://www.baidu.com/xxx.png',\n percent: 33,\n },\n {\n uid: '2',\n name: 'yyy.png',\n status: 'done',\n url: 'http://www.baidu.com/yyy.png',\n },\n {\n uid: '3',\n name: 'zzz.png',\n status: 'error',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/zzz.png',\n },\n ],\n};\n\nconst App: React.FC = () => (\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Upload</Button>\n </Upload>\n);\n\nexport default App;\n";},"2cd7d129":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6d30ec0d");var o="import React from 'react';\nimport type { InputNumberProps } from 'antd';\nimport { InputNumber } from 'antd';\n\nconst onChange: InputNumberProps['onChange'] = (value) => {\n console.log('changed', value);\n};\n\nconst App: React.FC = () => <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} />;\n\nexport default App;\n";},"2d052013":function(n,e,t){},"2d0c18f4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("df558091");var o="import React, { createContext } from 'react';\nimport { Button, Modal, Space } from 'antd';\n\nconst ReachableContext = createContext<string | null>(null);\nconst UnreachableContext = createContext<string | null>(null);\n\nconst config = {\n title: 'Use Hook!',\n content: (\n <>\n <ReachableContext.Consumer>{(name) => `Reachable: ${name}!`}</ReachableContext.Consumer>\n <br />\n <UnreachableContext.Consumer>{(name) => `Unreachable: ${name}!`}</UnreachableContext.Consumer>\n </>\n ),\n};\n\nconst App: React.FC = () => {\n const [modal, contextHolder] = Modal.useModal();\n\n return (\n <ReachableContext.Provider value=\"Light\">\n <Space>\n <Button\n onClick={async () => {\n const confirmed = await modal.confirm(config);\n console.log('Confirmed: ', confirmed);\n }}\n >\n Confirm\n </Button>\n <Button\n onClick={() => {\n modal.warning(config);\n }}\n >\n Warning\n </Button>\n <Button\n onClick={async () => {\n modal.info(config);\n }}\n >\n Info\n </Button>\n <Button\n onClick={async () => {\n modal.error(config);\n }}\n >\n Error\n </Button>\n </Space>\n {/* `contextHolder` should always be placed under the context you want to access */}\n {contextHolder}\n\n {/* Can not access this context since `contextHolder` is not in it */}\n <UnreachableContext.Provider value=\"Bamboo\" />\n </ReachableContext.Provider>\n );\n};\n\nexport default App;\n";},"2d28f7dd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d96c9e59");var o="import React from 'react';\nimport { Button, Input, Select, Space } from 'antd';\n\nconst style: React.CSSProperties = {\n width: 500,\n position: 'relative',\n zIndex: 1,\n border: '1px solid red',\n backgroundColor: '#fff',\n};\n\nconst handleChange = (value: string | string[]) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <Space style={style} wrap>\n <Input style={{ width: 100 }} value=\"222\" />\n <Select\n style={{ width: 120 }}\n onChange={handleChange}\n showSearch\n placeholder=\"233\"\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'disabled', disabled: true, label: 'Disabled' },\n { value: 'Yiminghe', label: 'yiminghe' },\n { value: 'long', label: 'I am super super long!' },\n ]}\n />\n <Select\n mode=\"multiple\"\n style={{ width: 120 }}\n defaultValue={['lucy']}\n onChange={handleChange}\n showSearch\n placeholder=\"233\"\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'disabled', disabled: true, label: 'Disabled' },\n { value: 'Yiminghe', label: 'yiminghe' },\n { value: 'long', label: 'I am super super long!' },\n ]}\n />\n <span className=\"debug-align\">AntDesign</span>\n <Button>222</Button>\n </Space>\n);\n\nexport default App;\n";},"2d4c5ad8":function(n,e,t){},"2d97c4eb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("84958dda");var o="import React from 'react';\nimport { Skeleton } from 'antd';\n\nconst App: React.FC = () => <Skeleton avatar paragraph={{ rows: 4 }} />;\n\nexport default App;\n";},"2da6d5fb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b529e592");var o='import React from \'react\';\nimport { UploadOutlined } from \'@ant-design/icons\';\nimport { Button, Space, Upload } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical" style={{ width: \'100%\' }} size="large">\n <Upload\n action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"\n listType="picture"\n maxCount={1}\n >\n <Button icon={<UploadOutlined />}>Upload (Max: 1)</Button>\n </Upload>\n <Upload\n action="https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload"\n listType="picture"\n maxCount={3}\n multiple\n >\n <Button icon={<UploadOutlined />}>Upload (Max: 3)</Button>\n </Upload>\n </Space>\n);\n\nexport default App;\n';},"2e0cdfcc":function(n,e,t){},"2e0ecfd4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a9b54e74");var o="import React from 'react';\nimport { Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <Row>\n <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>\n Col\n </Col>\n <Col xs={{ span: 11, offset: 1 }} lg={{ span: 6, offset: 2 }}>\n Col\n </Col>\n <Col xs={{ span: 5, offset: 1 }} lg={{ span: 6, offset: 2 }}>\n Col\n </Col>\n </Row>\n);\n\nexport default App;\n";},"2e20b86e":function(n,e,t){},"2e3a1971":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0c90fe35");var o="import React from 'react';\nimport { Descriptions } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst items: DescriptionsProps['items'] = [\n {\n label: 'UserName',\n children: 'Zhou Maomao',\n },\n {\n label: 'Live',\n span: 'filled', // span = 2\n children: 'Hangzhou, Zhejiang',\n },\n {\n label: 'Remark',\n span: 'filled', // span = 3\n children: 'empty',\n },\n {\n label: 'Address',\n span: 1, // span will be 3 and warning for span is not align to the end\n children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',\n },\n];\n\nconst App: React.FC = () => <Descriptions bordered title=\"User Info\" items={items} />;\n\nexport default App;\n";},"2e40f522":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3afdba1e");var o="import React from 'react';\nimport { Cascader } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalCascader } = Cascader;\n\ninterface Option {\n value: string | number;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => <InternalCascader options={options} placeholder=\"Please select\" />;\n\nexport default App;\n";},"2e4a829e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6c31c2f7");var o="import React from 'react';\nimport { Image } from 'antd';\n\nconst App: React.FC = () => (\n <Image\n width={200}\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200\"\n preview={{\n src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n }}\n />\n);\n\nexport default App;\n";},"2e4e2445":function(n,e,t){},"2e6eb3ed":function(n,e,t){},"2e9bfb32":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7dd4b982");var o='import React from \'react\';\nimport { Button, ConfigProvider, Flex } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" vertical>\n <ConfigProvider\n theme={{\n components: {\n Button: {\n algorithm: true,\n colorPrimary: \'#1976d2\',\n controlHeight: 36,\n primaryShadow:\n \'0 3px 1px -2px rgba(0,0,0,0.2), 0 2px 2px 0 rgba(0,0,0,0.14), 0 1px 5px 0 rgba(0,0,0,0.12)\',\n fontWeight: 500,\n defaultBorderColor: \'rgba(25, 118, 210, 0.5)\',\n colorText: \'#1976d2\',\n defaultColor: \'#1976d2\',\n borderRadius: 4,\n colorTextDisabled: \'rgba(0, 0, 0, 0.26)\',\n colorBgContainerDisabled: \'rgba(0, 0, 0, 0.12)\',\n contentFontSizeSM: 12,\n },\n },\n }}\n >\n <Flex wrap gap="small">\n <Button type="text">TEXT</Button>\n <Button type="primary">CONTAINED</Button>\n <Button>OUTLINED</Button>\n </Flex>\n <Flex wrap gap="small">\n <Button type="text" disabled>\n TEXT\n </Button>\n <Button type="primary" disabled>\n CONTAINED\n </Button>\n <ConfigProvider\n theme={{\n components: {\n Button: {\n borderColorDisabled: \'rgba(0, 0, 0, 0.12)\',\n colorBgContainerDisabled: \'transparent\',\n },\n },\n }}\n >\n <Button disabled>OUTLINED</Button>\n </ConfigProvider>\n </Flex>\n <Flex wrap gap="small">\n <Button type="text" size="small">\n TEXT\n </Button>\n <Button type="primary" size="small">\n CONTAINED\n </Button>\n <Button size="small">OUTLINED</Button>\n </Flex>\n </ConfigProvider>\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: \'#FF0000\',\n },\n }}\n >\n <Flex gap="small" wrap>\n <Button type="text">Text</Button>\n <Button type="link">Link</Button>\n <Button color="primary" variant="text">\n Primary Text\n </Button>\n <Button color="primary" variant="link">\n Primary Link\n </Button>\n </Flex>\n </ConfigProvider>\n </Flex>\n);\n\nexport default App;\n';},"2ea0858a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("079c47f2");var o="import React from 'react';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, theme } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n label: '1st menu item',\n key: '1',\n },\n {\n label: '2nd menu item',\n key: '2',\n },\n {\n label: '3rd menu item',\n key: '3',\n },\n];\n\nconst App: React.FC = () => {\n const {\n token: { colorBgLayout, colorTextTertiary },\n } = theme.useToken();\n\n return (\n <Dropdown menu={{ items }} trigger={['contextMenu']}>\n <div\n style={{\n color: colorTextTertiary,\n background: colorBgLayout,\n height: 200,\n textAlign: 'center',\n lineHeight: '200px',\n }}\n >\n Right Click on here\n </div>\n </Dropdown>\n );\n};\n\nexport default App;\n";},"2ea91b55":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e0e1127a");var o='import React from \'react\';\nimport { Image } from \'antd\';\n\nconst App: React.FC = () => (\n <Image.PreviewGroup\n preview={{ countRender: (current, total) => `\u5F53\u524D ${current} / \u603B\u8BA1 ${total}` }}\n >\n <Image width={150} src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />\n <Image\n width={150}\n src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"\n />\n <Image\n width={150}\n src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"\n />\n </Image.PreviewGroup>\n);\n\nexport default App;\n';},"2eeae0f1":function(n,e,t){},"2f1f1a79":function(n,e,t){},"2f36c889":function(n,e,t){},"2f465293":function(n,e,t){},"2f56b89a":function(n,e,t){},"2f5c7448":function(n,e,t){},"2f978a38":function(n,e,t){},"2fccc249":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4c05f73d");var o="import React, { useState } from 'react';\nimport { Button, Descriptions, Radio } from 'antd';\nimport type { DescriptionsProps, RadioChangeEvent } from 'antd';\n\nconst borderedItems: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: 'Billing',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Time',\n children: '18:00:00',\n },\n {\n key: '4',\n label: 'Amount',\n children: '$80.00',\n },\n {\n key: '5',\n label: 'Discount',\n children: '$20.00',\n },\n {\n key: '6',\n label: 'Official',\n children: '$60.00',\n },\n {\n key: '7',\n label: 'Config Info',\n children: (\n <>\n Data disk type: MongoDB\n <br />\n Database version: 3.4\n <br />\n Package: dds.mongo.mid\n <br />\n Storage space: 10 GB\n <br />\n Replication factor: 3\n <br />\n Region: East China 1\n <br />\n </>\n ),\n },\n];\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: 'Billing',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Time',\n children: '18:00:00',\n },\n {\n key: '4',\n label: 'Amount',\n children: '$80.00',\n },\n {\n key: '5',\n label: 'Discount',\n children: '$20.00',\n },\n {\n key: '6',\n label: 'Official',\n children: '$60.00',\n },\n];\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');\n\n const onChange = (e: RadioChangeEvent) => {\n console.log('size checked', e.target.value);\n setSize(e.target.value);\n };\n\n return (\n <div>\n <Radio.Group onChange={onChange} value={size}>\n <Radio value=\"default\">default</Radio>\n <Radio value=\"middle\">middle</Radio>\n <Radio value=\"small\">small</Radio>\n </Radio.Group>\n <br />\n <br />\n <Descriptions\n bordered\n title=\"Custom Size\"\n size={size}\n extra={<Button type=\"primary\">Edit</Button>}\n items={borderedItems}\n />\n <br />\n <br />\n <Descriptions\n title=\"Custom Size\"\n size={size}\n extra={<Button type=\"primary\">Edit</Button>}\n items={items}\n />\n </div>\n );\n};\n\nexport default App;\n";},"301fecea":function(n,e,t){},"3052bd63":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("134c1950");var o="import React from 'react';\nimport { Tree } from 'antd';\nimport type { TreeDataNode } from 'antd';\n\nconst treeData: TreeDataNode[] = [];\n\nfor (let i = 0; i < 100; i += 1) {\n const children: TreeDataNode[] = [];\n\n for (let j = 0; j < 100; j += 1) {\n children.push({\n title: `child ${i}-${j}`,\n key: `l-${i}-${j}`,\n });\n }\n\n treeData.push({\n title: `parent ${i}`,\n key: `l-${i}`,\n children,\n });\n}\n\nconst App: React.FC = () => <Tree defaultExpandAll height={400} treeData={treeData} />;\n\nexport default App;\n";},"3064fc8b":function(n,e,t){},"3065f103":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d6205eeb");var o="import React from 'react';\nimport { Avatar, Badge } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n indicator: '\u6307\u793A\u5668\u5143\u7D20',\n },\n en: {\n root: 'Root element',\n indicator: 'Indicator element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Badge\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.7.0' },\n { name: 'indicator', desc: locale.indicator, version: '5.7.0' },\n ]}\n >\n <Badge count={5}>\n <Avatar shape=\"square\" size=\"large\" />\n </Badge>\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},30823373:function(n,e,t){},"30832bc8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("66ebc567");var o="import React, { useEffect, useState } from 'react';\nimport { Switch, Transfer } from 'antd';\nimport type { TransferProps } from 'antd';\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n chosen: boolean;\n}\n\nconst App: React.FC = () => {\n const [oneWay, setOneWay] = useState(false);\n const [mockData, setMockData] = useState<RecordType[]>([]);\n const [targetKeys, setTargetKeys] = useState<React.Key[]>([]);\n\n useEffect(() => {\n const newTargetKeys = [];\n const newMockData = [];\n for (let i = 0; i < 2000; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: i % 2 === 0,\n };\n if (data.chosen) {\n newTargetKeys.push(data.key);\n }\n newMockData.push(data);\n }\n\n setTargetKeys(newTargetKeys);\n setMockData(newMockData);\n }, []);\n\n const onChange: TransferProps['onChange'] = (newTargetKeys, direction, moveKeys) => {\n console.log(newTargetKeys, direction, moveKeys);\n setTargetKeys(newTargetKeys);\n };\n\n return (\n <>\n <Transfer\n dataSource={mockData}\n targetKeys={targetKeys}\n onChange={onChange}\n render={(item) => item.title}\n oneWay={oneWay}\n pagination\n />\n <br />\n <Switch\n unCheckedChildren=\"one way\"\n checkedChildren=\"one way\"\n checked={oneWay}\n onChange={setOneWay}\n />\n </>\n );\n};\n\nexport default App;\n";},"30939aeb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9aa83c1d");var o='import React from \'react\';\nimport { Alert, Flex, Spin, Switch } from \'antd\';\n\nconst App: React.FC = () => {\n const [loading, setLoading] = React.useState<boolean>(false);\n return (\n <Flex gap="middle" vertical>\n <Spin spinning={loading} delay={500}>\n <Alert\n type="info"\n message="Alert message title"\n description="Further details about the context of this alert."\n />\n </Spin>\n <p>\n Loading state\uFF1A\n <Switch checked={loading} onChange={setLoading} />\n </p>\n </Flex>\n );\n};\n\nexport default App;\n';},"3097a4fa":function(n,e,t){},"30b4b8fc":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("107cac9d");var o="import React from 'react';\nimport { Flex, Tree } from 'antd';\nimport type { GetProps, TreeDataNode } from 'antd';\n\nconst { DirectoryTree } = Tree;\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 0',\n key: '0-0',\n children: [\n { title: 'leaf 0-0', key: '0-0-0', isLeaf: true, disabled: true },\n { title: 'leaf 0-1', key: '0-0-1', isLeaf: true, disableCheckbox: true },\n ],\n },\n {\n title: 'parent 1',\n key: '0-1',\n children: [\n { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },\n { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },\n ],\n },\n];\n\nconst sharedProps: GetProps<typeof DirectoryTree> = {\n treeData,\n defaultExpandAll: true,\n onSelect: (keys, info) => {\n console.log('Trigger Select', keys, info);\n },\n onExpand: (keys, info) => {\n console.log('Trigger Expand', keys, info);\n },\n};\n\nconst DemoOne = () => <DirectoryTree draggable defaultSelectedKeys={['0-0-0']} />;\n\nconst DemoTwo = () => <DirectoryTree {...sharedProps} checkable defaultSelectedKeys={['0-1-0']} />;\n\nconst DemoThree = () => (\n <DirectoryTree {...sharedProps} draggable checkable defaultSelectedKeys={['0-1']} />\n);\n\nconst BasicDemo = () => <DirectoryTree {...sharedProps} multiple treeData={treeData} />;\n\nconst NormalDemo = () => <Tree {...sharedProps} defaultSelectedKeys={['0-1']} />;\n\nconst NormalCheckDemo = () => (\n <Tree {...sharedProps} checkable defaultSelectedKeys={['0-1', '0-0-0', '0-0-1', '0-1-1']} />\n);\n\nconst NormalDragDemo = () => <Tree {...sharedProps} draggable defaultSelectedKeys={['0-1-0']} />;\n\nconst App = () => (\n <Flex wrap gap=\"large\">\n <DemoOne />\n <DemoTwo />\n <DemoThree />\n <BasicDemo />\n <NormalDemo />\n <NormalCheckDemo />\n <NormalDragDemo />\n </Flex>\n);\n\nexport default App;\n";},"30f40a89":function(n,e,t){},31220063:function(n,e,t){},31253148:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("09206736");var o="import React, { useState } from 'react';\nimport { MinusOutlined, PlusOutlined } from '@ant-design/icons';\nimport { Button, QRCode, Space } from 'antd';\n\nconst MIN_SIZE = 48;\nconst MAX_SIZE = 300;\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<number>(160);\n\n const increase = () => {\n setSize((prevSize) => {\n const newSize = prevSize + 10;\n if (newSize >= MAX_SIZE) {\n return MAX_SIZE;\n }\n return newSize;\n });\n };\n\n const decline = () => {\n setSize((prevSize) => {\n const newSize = prevSize - 10;\n if (newSize <= MIN_SIZE) {\n return MIN_SIZE;\n }\n return newSize;\n });\n };\n\n return (\n <>\n <Space.Compact style={{ marginBottom: 16 }}>\n <Button onClick={decline} disabled={size <= MIN_SIZE} icon={<MinusOutlined />}>\n Smaller\n </Button>\n <Button onClick={increase} disabled={size >= MAX_SIZE} icon={<PlusOutlined />}>\n Larger\n </Button>\n </Space.Compact>\n <QRCode\n errorLevel=\"H\"\n size={size}\n iconSize={size / 4}\n value=\"https://ant.design/\"\n icon=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\"\n />\n </>\n );\n};\n\nexport default App;\n";},"31952cfe":function(n,e,t){},"31a400c4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b0382f40");var o="import React from 'react';\nimport { Flex, Splitter, Tabs, Typography } from 'antd';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify=\"center\" align=\"center\" style={{ height: '100%' }}>\n <Typography.Title type=\"secondary\" level={5} style={{ whiteSpace: 'nowrap' }}>\n {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => {\n const SplitterContent = (\n <Splitter\n style={{\n height: 200,\n boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)',\n }}\n >\n <Splitter.Panel collapsible>\n <Desc text={1} />\n </Splitter.Panel>\n <Splitter.Panel\n collapsible={{\n start: true,\n }}\n >\n <Desc text={2} />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text={3} />\n </Splitter.Panel>\n </Splitter>\n );\n return (\n <Tabs\n defaultActiveKey=\"1\"\n items={[\n {\n key: '1',\n label: 'General',\n children: 'Content of Tab Pane 1',\n },\n {\n key: '2',\n label: 'Splitter Tab',\n children: SplitterContent,\n },\n ]}\n />\n );\n};\n\nexport default App;\n";},"31a5aae3":function(n,e,t){},"31c0f582":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("da3fec68");var o="import React from 'react';\nimport { SmileFilled, SmileOutlined } from '@ant-design/icons';\nimport { Typography } from 'antd';\n\nconst { Paragraph, Text } = Typography;\n\nconst App: React.FC = () => (\n <>\n <Paragraph copyable>This is a copyable text.</Paragraph>\n <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>\n <Paragraph\n copyable={{\n icon: [<SmileOutlined key=\"copy-icon\" />, <SmileFilled key=\"copied-icon\" />],\n tooltips: ['click here', 'you clicked!!'],\n }}\n >\n Custom Copy icon and replace tooltips text.\n </Paragraph>\n <Paragraph copyable={{ tooltips: false }}>Hide Copy tooltips.</Paragraph>\n <Paragraph\n copyable={{\n text: async () =>\n new Promise((resolve) => {\n setTimeout(() => {\n resolve('Request text');\n }, 500);\n }),\n }}\n >\n Request copy text.\n </Paragraph>\n <Text copyable={{ text: 'text to be copied' }} />\n </>\n);\n\nexport default App;\n";},"31c87912":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2f1f1a79");var o="import React from 'react';\nimport { ClockCircleOutlined } from '@ant-design/icons';\nimport { Timeline } from 'antd';\n\nconst App: React.FC = () => (\n <Timeline\n mode=\"alternate\"\n items={[\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n children: 'Solve initial network problems 2015-09-01',\n color: 'green',\n },\n {\n dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,\n children: `Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.`,\n },\n {\n color: 'red',\n children: 'Network problems being solved 2015-09-01',\n },\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,\n children: 'Technical testing 2015-09-01',\n },\n ]}\n />\n);\n\nexport default App;\n";},"31f8d933":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("66f56c4a");var o="import React from 'react';\nimport type { PaginationProps } from 'antd';\nimport { Pagination } from 'antd';\n\nconst onChange: PaginationProps['onChange'] = (pageNumber) => {\n console.log('Page: ', pageNumber);\n};\n\nconst App: React.FC = () => (\n <>\n <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} />\n <br />\n <Pagination showQuickJumper defaultCurrent={2} total={500} onChange={onChange} disabled />\n </>\n);\n\nexport default App;\n";},"3206fb1b":function(n,e,t){},"325cfd8b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("59fe4a2b");var o="import React from 'react';\nimport type { PaginationProps } from 'antd';\nimport { Pagination } from 'antd';\n\nconst showTotal: PaginationProps['showTotal'] = (total) => `Total ${total} items`;\n\nconst App: React.FC = () => (\n <>\n <Pagination size=\"small\" total={50} />\n <Pagination size=\"small\" total={50} showSizeChanger showQuickJumper />\n <Pagination size=\"small\" total={50} showTotal={showTotal} />\n <Pagination\n size=\"small\"\n total={50}\n disabled\n showTotal={showTotal}\n showSizeChanger\n showQuickJumper\n />\n </>\n);\n\nexport default App;\n";},"325fcde4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("64984701");var o='import React, { useState } from \'react\';\nimport { ColorPicker, Flex, Form, Input, InputNumber, Slider, Typography, Watermark } from \'antd\';\nimport type { ColorPickerProps, GetProp, WatermarkProps } from \'antd\';\n\ntype Color = Extract<GetProp<ColorPickerProps, \'value\'>, string | { cleared: any }>;\n\nconst { Paragraph } = Typography;\n\ninterface WatermarkConfig {\n content: string;\n color: string | Color;\n fontSize: number;\n zIndex: number;\n rotate: number;\n gap: [number, number];\n offset?: [number, number];\n}\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const [config, setConfig] = useState<WatermarkConfig>({\n content: \'Ant Design\',\n color: \'rgba(0, 0, 0, 0.15)\',\n fontSize: 16,\n zIndex: 11,\n rotate: -22,\n gap: [100, 100],\n offset: undefined,\n });\n const { content, color, fontSize, zIndex, rotate, gap, offset } = config;\n\n const watermarkProps: WatermarkProps = {\n content,\n zIndex,\n rotate,\n gap,\n offset,\n font: { color: typeof color === \'string\' ? color : color.toRgbString(), fontSize },\n };\n\n return (\n <Flex gap="middle">\n <Watermark {...watermarkProps}>\n <Typography>\n <Paragraph>\n The light-speed iteration of the digital world makes products more complex. However,\n human consciousness and attention resources are limited. Facing this design\n contradiction, the pursuit of natural interaction will be the consistent direction of\n Ant Design.\n </Paragraph>\n <Paragraph>\n Natural user cognition: According to cognitive psychology, about 80% of external\n information is obtained through visual channels. The most important visual elements in\n the interface design, including layout, colors, illustrations, icons, etc., should fully\n absorb the laws of nature, thereby reducing the user's cognitive cost and bringing\n authentic and smooth feelings. In some scenarios, opportunely adding other sensory\n channels such as hearing, touch can create a richer and more natural product experience.\n </Paragraph>\n <Paragraph>\n Natural user behavior: In the interaction with the system, the designer should fully\n understand the relationship between users, system roles, and task objectives, and also\n contextually organize system functions and services. At the same time, a series of\n methods such as behavior analysis, artificial intelligence and sensors could be applied\n to assist users to make effective decisions and reduce extra operations of users, to\n save users' mental and physical resources and make human-computer interaction more\n natural.\n </Paragraph>\n </Typography>\n <img\n style={{ zIndex: 10, width: \'100%\', maxWidth: 800, position: \'relative\' }}\n src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zx7LTI_ECSAAAAAAAAAAAABkARQnAQ"\n alt="img"\n />\n </Watermark>\n <Form\n style={{ width: 280, flexShrink: 0, borderLeft: \'1px solid #eee\', paddingInlineStart: 16 }}\n form={form}\n layout="vertical"\n initialValues={config}\n onValuesChange={(_, values) => {\n setConfig(values);\n }}\n >\n <Form.Item name="content" label="Content">\n <Input placeholder="\u8BF7\u8F93\u5165" />\n </Form.Item>\n <Form.Item name="color" label="Color">\n <ColorPicker />\n </Form.Item>\n <Form.Item name="fontSize" label="FontSize">\n <Slider step={1} min={1} max={100} />\n </Form.Item>\n <Form.Item name="zIndex" label="zIndex">\n <Slider step={1} min={0} max={100} />\n </Form.Item>\n <Form.Item name="rotate" label="Rotate">\n <Slider step={1} min={-180} max={180} />\n </Form.Item>\n <Form.Item label="Gap" style={{ marginBottom: 0 }}>\n <Flex gap="small">\n <Form.Item name={[\'gap\', 0]}>\n <InputNumber placeholder="gapX" style={{ width: \'100%\' }} />\n </Form.Item>\n <Form.Item name={[\'gap\', 1]}>\n <InputNumber placeholder="gapY" style={{ width: \'100%\' }} />\n </Form.Item>\n </Flex>\n </Form.Item>\n <Form.Item label="Offset" style={{ marginBottom: 0 }}>\n <Flex gap="small">\n <Form.Item name={[\'offset\', 0]}>\n <InputNumber placeholder="offsetLeft" style={{ width: \'100%\' }} />\n </Form.Item>\n <Form.Item name={[\'offset\', 1]}>\n <InputNumber placeholder="offsetTop" style={{ width: \'100%\' }} />\n </Form.Item>\n </Flex>\n </Form.Item>\n </Form>\n </Flex>\n );\n};\n\nexport default App;\n';},"32a0511c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("93c45ef3");var o="import React, { useState } from 'react';\nimport { ConfigProvider, Space, Switch, Table, Tag, Transfer } from 'antd';\nimport type { GetProp, TableColumnsType, TableProps, TransferProps } from 'antd';\nimport difference from 'lodash/difference';\n\ntype TableRowSelection<T> = TableProps<T>['rowSelection'];\n\ntype TransferItem = GetProp<TransferProps, 'dataSource'>[number];\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n disabled: boolean;\n tag: string;\n}\n\ninterface DataType {\n key: string;\n title: string;\n description: string;\n disabled: boolean;\n tag: string;\n}\n\ninterface TableTransferProps extends TransferProps<TransferItem> {\n dataSource: DataType[];\n leftColumns: TableColumnsType<DataType>;\n rightColumns: TableColumnsType<DataType>;\n}\n\n// Customize Table Transfer\nconst TableTransfer = ({ leftColumns, rightColumns, ...restProps }: TableTransferProps) => (\n <Transfer {...restProps}>\n {({\n direction,\n filteredItems,\n onItemSelectAll,\n onItemSelect,\n selectedKeys: listSelectedKeys,\n disabled: listDisabled,\n }) => {\n const columns = direction === 'left' ? leftColumns : rightColumns;\n\n const rowSelection: TableRowSelection<TransferItem> = {\n getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),\n onSelectAll(selected, selectedRows) {\n const treeSelectedKeys = selectedRows\n .filter((item) => !item.disabled)\n .map(({ key }) => key);\n const diffKeys = selected\n ? difference(treeSelectedKeys, listSelectedKeys)\n : difference(listSelectedKeys, treeSelectedKeys);\n onItemSelectAll(diffKeys as string[], selected);\n },\n onSelect({ key }, selected) {\n onItemSelect(key as string, selected);\n },\n selectedRowKeys: listSelectedKeys,\n };\n\n return (\n <Table\n rowSelection={rowSelection}\n columns={columns}\n dataSource={filteredItems}\n size=\"small\"\n style={{ pointerEvents: listDisabled ? 'none' : undefined }}\n onRow={({ key, disabled: itemDisabled }) => ({\n onClick: () => {\n if (itemDisabled || listDisabled) {\n return;\n }\n onItemSelect(key as string, !listSelectedKeys.includes(key as string));\n },\n })}\n />\n );\n }}\n </Transfer>\n);\n\nconst mockTags = ['cat', 'dog', 'bird'];\n\nconst mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n disabled: i % 4 === 0,\n tag: mockTags[i % 3],\n}));\n\nconst leftTableColumns: TableColumnsType<DataType> = [\n {\n dataIndex: 'title',\n title: 'Name',\n },\n {\n dataIndex: 'tag',\n title: 'Tag',\n render: (tag) => <Tag>{tag}</Tag>,\n },\n {\n dataIndex: 'description',\n title: 'Description',\n },\n];\n\nconst rightTableColumns: TableColumnsType<DataType> = [\n {\n dataIndex: 'title',\n title: 'Name',\n },\n];\n\nconst initialTargetKeys = mockData.filter((item) => Number(item.key) > 10).map((item) => item.key);\n\nconst App: React.FC = () => {\n const [targetKeys, setTargetKeys] = useState<React.Key[]>(initialTargetKeys);\n const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);\n\n const onChange: TransferProps['onChange'] = (nextTargetKeys, direction, moveKeys) => {\n console.log('targetKeys:', nextTargetKeys);\n console.log('direction:', direction);\n console.log('moveKeys:', moveKeys);\n setTargetKeys(nextTargetKeys);\n };\n\n const onSelectChange: TransferProps['onSelectChange'] = (\n sourceSelectedKeys,\n targetSelectedKeys,\n ) => {\n console.log('sourceSelectedKeys:', sourceSelectedKeys);\n console.log('targetSelectedKeys:', targetSelectedKeys);\n setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);\n };\n\n const onScroll: TransferProps['onScroll'] = (direction, e) => {\n console.log('direction:', direction);\n console.log('target:', e.target);\n };\n\n const [disabled, setDisabled] = useState(false);\n const [showSearch, setShowSearch] = useState(false);\n\n const secondOnChange: TransferProps['onChange'] = (nextTargetKeys) => {\n setTargetKeys(nextTargetKeys);\n };\n\n const triggerDisable = (checked: boolean) => {\n setDisabled(checked);\n };\n\n const triggerShowSearch = (checked: boolean) => {\n setShowSearch(checked);\n };\n\n return (\n <ConfigProvider\n theme={{\n components: {\n Transfer: {\n listWidth: 40,\n listWidthLG: 50,\n listHeight: 30,\n itemHeight: 20,\n itemPaddingBlock: 10,\n headerHeight: 18,\n },\n },\n }}\n >\n <Transfer\n dataSource={mockData}\n titles={['Source', 'Target']}\n targetKeys={targetKeys}\n selectedKeys={selectedKeys}\n onChange={onChange}\n onSelectChange={onSelectChange}\n onScroll={onScroll}\n render={(item) => item.title}\n />\n <Transfer status=\"error\" />\n <Transfer status=\"warning\" showSearch />\n <TableTransfer\n dataSource={mockData}\n targetKeys={targetKeys}\n disabled={disabled}\n showSearch={showSearch}\n onChange={secondOnChange}\n filterOption={(inputValue, item) =>\n item.title!.indexOf(inputValue) !== -1 || item.tag.indexOf(inputValue) !== -1\n }\n leftColumns={leftTableColumns}\n rightColumns={rightTableColumns}\n />\n <Space style={{ marginTop: 16 }}>\n <Switch\n unCheckedChildren=\"disabled\"\n checkedChildren=\"disabled\"\n checked={disabled}\n onChange={triggerDisable}\n />\n <Switch\n unCheckedChildren=\"showSearch\"\n checkedChildren=\"showSearch\"\n checked={showSearch}\n onChange={triggerShowSearch}\n />\n </Space>\n </ConfigProvider>\n );\n};\n\nexport default App;\n";},"32a0f233":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3a061bab");var o='import React, { useState } from \'react\';\nimport { MinusOutlined, PlusOutlined, QuestionOutlined } from \'@ant-design/icons\';\nimport { Avatar, Badge, Button, Space, Switch } from \'antd\';\n\nconst App: React.FC = () => {\n const [count, setCount] = useState(5);\n const [show, setShow] = useState(true);\n\n const increase = () => {\n setCount(count + 1);\n };\n\n const decline = () => {\n let newCount = count - 1;\n if (newCount < 0) {\n newCount = 0;\n }\n setCount(newCount);\n };\n\n const random = () => {\n const newCount = Math.floor(Math.random() * 100);\n setCount(newCount);\n };\n\n const onChange = (checked: boolean) => {\n setShow(checked);\n };\n\n return (\n <Space direction="vertical">\n <Space size="large">\n <Badge count={count}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Space.Compact>\n <Button onClick={decline} icon={<MinusOutlined />} />\n <Button onClick={increase} icon={<PlusOutlined />} />\n <Button onClick={random} icon={<QuestionOutlined />} />\n </Space.Compact>\n </Space>\n <Space size="large">\n <Badge dot={show}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Switch onChange={onChange} checked={show} />\n </Space>\n </Space>\n );\n};\n\nexport default App;\n';},"32a4e1d5":function(n,e,t){},"32a97619":function(n,e,t){},"32bea601":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e6da8cbc");var o='import React, { useState } from \'react\';\nimport type { DrawerProps, RadioChangeEvent } from \'antd\';\nimport { Button, Drawer, Radio, Space } from \'antd\';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [placement, setPlacement] = useState<DrawerProps[\'placement\']>(\'left\');\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n const onChange = (e: RadioChangeEvent) => {\n setPlacement(e.target.value);\n };\n\n return (\n <>\n <Space>\n <Radio.Group value={placement} onChange={onChange}>\n <Radio value="top">top</Radio>\n <Radio value="right">right</Radio>\n <Radio value="bottom">bottom</Radio>\n <Radio value="left">left</Radio>\n </Radio.Group>\n <Button type="primary" onClick={showDrawer}>\n Open\n </Button>\n </Space>\n <Drawer\n title="Basic Drawer"\n placement={placement}\n closable={false}\n onClose={onClose}\n open={open}\n key={placement}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n';},"32effae9":function(n,e,t){},"32f07d1a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a5aaa80f");var o="import React from 'react';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\n\nconst 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`;\n\nconst items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header 1',\n children: <p>{text}</p>,\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: <p>{text}</p>,\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: <p>{text}</p>,\n },\n];\n\nconst App: React.FC = () => <Collapse accordion items={items} />;\n\nexport default App;\n";},"32fee28f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fd75a8bb");var o='import React from \'react\';\nimport { Divider, Flex, Tag } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Flex gap="4px 0" wrap>\n <Tag bordered={false}>Tag 1</Tag>\n <Tag bordered={false}>Tag 2</Tag>\n <Tag bordered={false} closable>\n Tag 3\n </Tag>\n <Tag bordered={false} closable>\n Tag 4\n </Tag>\n </Flex>\n <Divider />\n <Flex gap="4px 0" wrap>\n <Tag bordered={false} color="processing">\n processing\n </Tag>\n <Tag bordered={false} color="success">\n success\n </Tag>\n <Tag bordered={false} color="error">\n error\n </Tag>\n <Tag bordered={false} color="warning">\n warning\n </Tag>\n <Tag bordered={false} color="magenta">\n magenta\n </Tag>\n <Tag bordered={false} color="red">\n red\n </Tag>\n <Tag bordered={false} color="volcano">\n volcano\n </Tag>\n <Tag bordered={false} color="orange">\n orange\n </Tag>\n <Tag bordered={false} color="gold">\n gold\n </Tag>\n <Tag bordered={false} color="lime">\n lime\n </Tag>\n <Tag bordered={false} color="green">\n green\n </Tag>\n <Tag bordered={false} color="cyan">\n cyan\n </Tag>\n <Tag bordered={false} color="blue">\n blue\n </Tag>\n <Tag bordered={false} color="geekblue">\n geekblue\n </Tag>\n <Tag bordered={false} color="purple">\n purple\n </Tag>\n </Flex>\n </>\n);\n\nexport default App;\n';},"330d0726":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("079c9782");var o='import React from \'react\';\nimport { Tooltip } from \'antd\';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalTooltip } = Tooltip;\n\nconst App: React.FC = () => (\n <>\n <InternalTooltip title="Hello, Pink Pure Panel!" color="pink" />\n <InternalTooltip title="Hello, Customize Color Pure Panel!" color="#f50" />\n <InternalTooltip title="Hello, Pure Panel!" placement="bottomLeft" style={{ width: 200 }} />\n </>\n);\n\nexport default App;\n';},"33b91ee5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1456d966");var o='import React from \'react\';\nimport { InboxOutlined, UploadOutlined } from \'@ant-design/icons\';\nimport {\n Button,\n Checkbox,\n Col,\n ColorPicker,\n Form,\n InputNumber,\n Radio,\n Rate,\n Row,\n Select,\n Slider,\n Space,\n Switch,\n Upload,\n} from \'antd\';\n\nconst { Option } = Select;\n\nconst formItemLayout = {\n labelCol: { span: 6 },\n wrapperCol: { span: 14 },\n};\n\nconst normFile = (e: any) => {\n console.log(\'Upload event:\', e);\n if (Array.isArray(e)) {\n return e;\n }\n return e?.fileList;\n};\n\nconst onFinish = (values: any) => {\n console.log(\'Received values of form: \', values);\n};\n\nconst App: React.FC = () => (\n <Form\n name="validate_other"\n {...formItemLayout}\n onFinish={onFinish}\n initialValues={{\n \'input-number\': 3,\n \'checkbox-group\': [\'A\', \'B\'],\n rate: 3.5,\n \'color-picker\': null,\n }}\n style={{ maxWidth: 600 }}\n >\n <Form.Item label="Plain Text">\n <span className="ant-form-text">China</span>\n </Form.Item>\n <Form.Item\n name="select"\n label="Select"\n hasFeedback\n rules={[{ required: true, message: \'Please select your country!\' }]}\n >\n <Select placeholder="Please select a country">\n <Option value="china">China</Option>\n <Option value="usa">U.S.A</Option>\n </Select>\n </Form.Item>\n\n <Form.Item\n name="select-multiple"\n label="Select[multiple]"\n rules={[{ required: true, message: \'Please select your favourite colors!\', type: \'array\' }]}\n >\n <Select mode="multiple" placeholder="Please select favourite colors">\n <Option value="red">Red</Option>\n <Option value="green">Green</Option>\n <Option value="blue">Blue</Option>\n </Select>\n </Form.Item>\n\n <Form.Item label="InputNumber">\n <Form.Item name="input-number" noStyle>\n <InputNumber min={1} max={10} />\n </Form.Item>\n <span className="ant-form-text" style={{ marginInlineStart: 8 }}>\n machines\n </span>\n </Form.Item>\n\n <Form.Item name="switch" label="Switch" valuePropName="checked">\n <Switch />\n </Form.Item>\n\n <Form.Item name="slider" label="Slider">\n <Slider\n marks={{\n 0: \'A\',\n 20: \'B\',\n 40: \'C\',\n 60: \'D\',\n 80: \'E\',\n 100: \'F\',\n }}\n />\n </Form.Item>\n\n <Form.Item name="radio-group" label="Radio.Group">\n <Radio.Group>\n <Radio value="a">item 1</Radio>\n <Radio value="b">item 2</Radio>\n <Radio value="c">item 3</Radio>\n </Radio.Group>\n </Form.Item>\n\n <Form.Item\n name="radio-button"\n label="Radio.Button"\n rules={[{ required: true, message: \'Please pick an item!\' }]}\n >\n <Radio.Group>\n <Radio.Button value="a">item 1</Radio.Button>\n <Radio.Button value="b">item 2</Radio.Button>\n <Radio.Button value="c">item 3</Radio.Button>\n </Radio.Group>\n </Form.Item>\n\n <Form.Item name="checkbox-group" label="Checkbox.Group">\n <Checkbox.Group>\n <Row>\n <Col span={8}>\n <Checkbox value="A" style={{ lineHeight: \'32px\' }}>\n A\n </Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value="B" style={{ lineHeight: \'32px\' }} disabled>\n B\n </Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value="C" style={{ lineHeight: \'32px\' }}>\n C\n </Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value="D" style={{ lineHeight: \'32px\' }}>\n D\n </Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value="E" style={{ lineHeight: \'32px\' }}>\n E\n </Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value="F" style={{ lineHeight: \'32px\' }}>\n F\n </Checkbox>\n </Col>\n </Row>\n </Checkbox.Group>\n </Form.Item>\n\n <Form.Item name="rate" label="Rate">\n <Rate />\n </Form.Item>\n\n <Form.Item\n name="upload"\n label="Upload"\n valuePropName="fileList"\n getValueFromEvent={normFile}\n extra="longgggggggggggggggggggggggggggggggggg"\n >\n <Upload name="logo" action="/upload.do" listType="picture">\n <Button icon={<UploadOutlined />}>Click to upload</Button>\n </Upload>\n </Form.Item>\n <Form.Item label="Dragger">\n <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>\n <Upload.Dragger name="files" action="/upload.do">\n <p className="ant-upload-drag-icon">\n <InboxOutlined />\n </p>\n <p className="ant-upload-text">Click or drag file to this area to upload</p>\n <p className="ant-upload-hint">Support for a single or bulk upload.</p>\n </Upload.Dragger>\n </Form.Item>\n </Form.Item>\n <Form.Item\n name="color-picker"\n label="ColorPicker"\n rules={[{ required: true, message: \'color is required!\' }]}\n >\n <ColorPicker />\n </Form.Item>\n\n <Form.Item wrapperCol={{ span: 12, offset: 6 }}>\n <Space>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n <Button htmlType="reset">reset</Button>\n </Space>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},"33da27d4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("69b85beb");var o='import React from \'react\';\nimport { Button, Flex } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" wrap>\n <Button type="primary">Primary Button</Button>\n <Button>Default Button</Button>\n <Button type="dashed">Dashed Button</Button>\n <Button type="text">Text Button</Button>\n <Button type="link">Link Button</Button>\n </Flex>\n);\n\nexport default App;\n';},"340214aa":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9f5ee73a");var o="import React, { useEffect, useState } from 'react';\nimport { Transfer } from 'antd';\nimport type { TransferProps } from 'antd';\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n chosen: boolean;\n}\n\nconst App: React.FC = () => {\n const [mockData, setMockData] = useState<RecordType[]>([]);\n const [targetKeys, setTargetKeys] = useState<React.Key[]>([]);\n\n const getMock = () => {\n const tempTargetKeys = [];\n const tempMockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: i % 2 === 0,\n };\n if (data.chosen) {\n tempTargetKeys.push(data.key);\n }\n tempMockData.push(data);\n }\n setMockData(tempMockData);\n setTargetKeys(tempTargetKeys);\n };\n\n useEffect(() => {\n getMock();\n }, []);\n\n const handleChange: TransferProps['onChange'] = (newTargetKeys, direction, moveKeys) => {\n console.log(newTargetKeys, direction, moveKeys);\n setTargetKeys(newTargetKeys);\n };\n\n const renderItem = (item: RecordType) => {\n const customLabel = (\n <span className=\"custom-item\">\n {item.title} - {item.description}\n </span>\n );\n\n return {\n label: customLabel, // for displayed item\n value: item.title, // for title and filter matching\n };\n };\n\n return (\n <Transfer\n dataSource={mockData}\n listStyle={{\n width: 300,\n height: 300,\n }}\n targetKeys={targetKeys}\n onChange={handleChange}\n render={renderItem}\n />\n );\n};\n\nexport default App;\n";},"340ad388":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9807f03d");var o="import React from 'react';\nimport { Breadcrumb, Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Footer } = Layout;\n\nconst items = Array.from({ length: 3 }).map((_, index) => ({\n key: String(index + 1),\n label: `nav ${index + 1}`,\n}));\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout>\n <Header\n style={{\n position: 'sticky',\n top: 0,\n zIndex: 1,\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n }}\n >\n <div className=\"demo-logo\" />\n <Menu\n theme=\"dark\"\n mode=\"horizontal\"\n defaultSelectedKeys={['2']}\n items={items}\n style={{ flex: 1, minWidth: 0 }}\n />\n </Header>\n <Content style={{ padding: '0 48px' }}>\n <Breadcrumb\n style={{ margin: '16px 0' }}\n items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}\n />\n <div\n style={{\n padding: 24,\n minHeight: 380,\n background: colorBgContainer,\n borderRadius: borderRadiusLG,\n }}\n >\n Content\n </div>\n </Content>\n <Footer style={{ textAlign: 'center' }}>\n Ant Design \xa9{new Date().getFullYear()} Created by Ant UED\n </Footer>\n </Layout>\n );\n};\n\nexport default App;\n";},"3421dc20":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a3d831de");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, Upload } from 'antd';\n\nconst props: UploadProps = {\n action: '//jsonplaceholder.typicode.com/posts/',\n listType: 'picture',\n previewFile(file) {\n console.log('Your upload file:', file);\n // Your process logic. Here we just mock to the same file\n return fetch('https://next.json-generator.com/api/json/get/4ytyBoLK8', {\n method: 'POST',\n body: file,\n })\n .then((res) => res.json())\n .then(({ thumbnail }) => thumbnail);\n },\n};\n\nconst App: React.FC = () => (\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Upload</Button>\n </Upload>\n);\n\nexport default App;\n";},"34282b08":function(n,e,t){},34366397:function(n,e,t){},"346901ab":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b8b8c62f");var o="/* eslint-disable compat/compat */\nimport React, { useEffect, useState } from 'react';\nimport type { GetProp, TableProps } from 'antd';\nimport { Table } from 'antd';\nimport type { AnyObject } from 'antd/es/_util/type';\nimport type { SorterResult } from 'antd/es/table/interface';\n\ntype ColumnsType<T extends object = object> = TableProps<T>['columns'];\ntype TablePaginationConfig = Exclude<GetProp<TableProps, 'pagination'>, boolean>;\n\ninterface DataType {\n name: string;\n gender: string;\n email: string;\n id: string;\n}\n\ninterface TableParams {\n pagination?: TablePaginationConfig;\n sortField?: SorterResult<any>['field'];\n sortOrder?: SorterResult<any>['order'];\n filters?: Parameters<GetProp<TableProps, 'onChange'>>[1];\n}\n\nconst columns: ColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n sorter: true,\n width: '20%',\n },\n {\n title: 'Gender',\n dataIndex: 'gender',\n filters: [\n { text: 'Male', value: 'male' },\n { text: 'Female', value: 'female' },\n ],\n width: '20%',\n },\n {\n title: 'Email',\n dataIndex: 'email',\n },\n];\n\nconst toURLSearchParams = <T extends AnyObject>(record: T) => {\n const params = new URLSearchParams();\n for (const [key, value] of Object.entries(record)) {\n params.append(key, value);\n }\n return params;\n};\n\nconst getRandomuserParams = (params: TableParams) => {\n const { pagination, filters, sortField, sortOrder, ...restParams } = params;\n const result: Record<string, any> = {};\n\n // https://github.com/mockapi-io/docs/wiki/Code-examples#pagination\n result.limit = pagination?.pageSize;\n result.page = pagination?.current;\n\n // https://github.com/mockapi-io/docs/wiki/Code-examples#filtering\n if (filters) {\n Object.entries(filters).forEach(([key, value]) => {\n if (value !== undefined && value !== null) {\n result[key] = value;\n }\n });\n }\n\n // https://github.com/mockapi-io/docs/wiki/Code-examples#sorting\n if (sortField) {\n result.orderby = sortField;\n result.order = sortOrder === 'ascend' ? 'asc' : 'desc';\n }\n\n // \u5904\u7406\u5176\u4ED6\u53C2\u6570\n Object.entries(restParams).forEach(([key, value]) => {\n if (value !== undefined && value !== null) {\n result[key] = value;\n }\n });\n\n return result;\n};\n\nconst App: React.FC = () => {\n const [data, setData] = useState<DataType[]>();\n const [loading, setLoading] = useState(false);\n const [tableParams, setTableParams] = useState<TableParams>({\n pagination: {\n current: 1,\n pageSize: 10,\n },\n });\n\n const params = toURLSearchParams(getRandomuserParams(tableParams));\n\n const fetchData = () => {\n setLoading(true);\n fetch(`https://660d2bd96ddfa2943b33731c.mockapi.io/api/users?${params.toString()}`)\n .then((res) => res.json())\n .then((res) => {\n setData(Array.isArray(res) ? res : []);\n setLoading(false);\n setTableParams({\n ...tableParams,\n pagination: {\n ...tableParams.pagination,\n total: 100,\n // 100 is mock data, you should read it from server\n // total: data.totalCount,\n },\n });\n });\n };\n\n useEffect(fetchData, [\n tableParams.pagination?.current,\n tableParams.pagination?.pageSize,\n tableParams?.sortOrder,\n tableParams?.sortField,\n JSON.stringify(tableParams.filters),\n ]);\n\n const handleTableChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter) => {\n setTableParams({\n pagination,\n filters,\n sortOrder: Array.isArray(sorter) ? undefined : sorter.order,\n sortField: Array.isArray(sorter) ? undefined : sorter.field,\n });\n\n // `dataSource` is useless since `pageSize` changed\n if (pagination.pageSize !== tableParams.pagination?.pageSize) {\n setData([]);\n }\n };\n\n return (\n <Table<DataType>\n columns={columns}\n rowKey={(record) => record.id}\n dataSource={data}\n pagination={tableParams.pagination}\n loading={loading}\n onChange={handleTableChange}\n />\n );\n};\n\nexport default App;\n";},34873843:function(n,e,t){},"349666af":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eda308cb");var o="import React from 'react';\nimport { Checkbox, Radio, Space, Upload } from 'antd';\n\nconst App: React.FC = () => (\n <Space>\n <Upload>\n <Radio>Radio</Radio>\n </Upload>\n <Upload>\n <Checkbox>Checkbox</Checkbox>\n </Upload>\n </Space>\n);\n\nexport default App;\n";},"34c67028":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("60854a5e");var o="import React, { useState } from 'react';\nimport { Button, Tooltip } from 'antd';\n\nconst App: React.FC = () => {\n const [disabled, setDisabled] = useState(true);\n\n return (\n <Tooltip title={disabled ? null : 'prompt text'}>\n <Button onClick={() => setDisabled(!disabled)}>{disabled ? 'Enable' : 'Disable'}</Button>\n </Tooltip>\n );\n};\n\nexport default App;\n";},"34c6a14b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a651d3dd");var o="import React, { useEffect, useState } from 'react';\nimport { Avatar, Divider, List, Skeleton } from 'antd';\nimport InfiniteScroll from 'react-infinite-scroll-component';\n\ninterface DataType {\n gender?: string;\n name?: string;\n email?: string;\n avatar?: string;\n id?: string;\n}\n\nconst App: React.FC = () => {\n const [loading, setLoading] = useState(false);\n const [data, setData] = useState<DataType[]>([]);\n const [page, setPage] = useState(1);\n\n const loadMoreData = () => {\n if (loading) {\n return;\n }\n setLoading(true);\n fetch(`https://660d2bd96ddfa2943b33731c.mockapi.io/api/users/?page=${page}&limit=10`)\n .then((res) => res.json())\n .then((res) => {\n const results = Array.isArray(res) ? res : [];\n setData([...data, ...results]);\n setLoading(false);\n setPage(page + 1);\n })\n .catch(() => {\n setLoading(false);\n });\n };\n\n useEffect(() => {\n loadMoreData();\n }, []);\n\n return (\n <div\n id=\"scrollableDiv\"\n style={{\n height: 400,\n overflow: 'auto',\n padding: '0 16px',\n border: '1px solid rgba(140, 140, 140, 0.35)',\n }}\n >\n <InfiniteScroll\n dataLength={data.length}\n next={loadMoreData}\n hasMore={data.length < 50}\n loader={<Skeleton avatar paragraph={{ rows: 1 }} active />}\n endMessage={<Divider plain>It is all, nothing more \u{1F910}</Divider>}\n scrollableTarget=\"scrollableDiv\"\n >\n <List\n dataSource={data}\n renderItem={(item) => (\n <List.Item key={item.email}>\n <List.Item.Meta\n avatar={<Avatar src={item.avatar} />}\n title={<a href=\"https://ant.design\">{item.name}</a>}\n description={item.email}\n />\n <div>Content</div>\n </List.Item>\n )}\n />\n </InfiniteScroll>\n </div>\n );\n};\n\nexport default App;\n";},"3525336d":function(n,e,t){},"35601abe":function(n,e,t){},"3569d17c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fde93017");var o="import React from 'react';\nimport { Checkbox } from 'antd';\nimport type { CheckboxOptionType, GetProp } from 'antd';\n\nconst onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {\n console.log('checked = ', checkedValues);\n};\n\nconst plainOptions = ['Apple', 'Pear', 'Orange'];\n\nconst options: CheckboxOptionType<string>[] = [\n { label: 'Apple', value: 'Apple', className: 'label-1' },\n { label: 'Pear', value: 'Pear', className: 'label-2' },\n { label: 'Orange', value: 'Orange', className: 'label-3' },\n];\n\nconst optionsWithDisabled: CheckboxOptionType<string>[] = [\n { label: 'Apple', value: 'Apple', className: 'label-1' },\n { label: 'Pear', value: 'Pear', className: 'label-2' },\n { label: 'Orange', value: 'Orange', className: 'label-3', disabled: false },\n];\n\nconst App: React.FC = () => (\n <>\n <Checkbox.Group options={plainOptions} defaultValue={['Apple']} onChange={onChange} />\n <br />\n <br />\n <Checkbox.Group options={options} defaultValue={['Pear']} onChange={onChange} />\n <br />\n <br />\n <Checkbox.Group\n options={optionsWithDisabled}\n disabled\n defaultValue={['Apple']}\n onChange={onChange}\n />\n </>\n);\n\nexport default App;\n";},"356ea786":function(n,e,t){},"356ff941":function(n,e,t){},"35916c6d":function(n,e,t){"use strict";var o=t("852bbaa9")._;t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return C;}});var a=t("777fffbe"),r=t("852bbaa9"),i=t("f19d2b93"),l=r._(t("5b220c3d")),s=t("a9d1a279"),c=t("3835a2b7"),d=a._(t("600aabe0")),u=t("9c86e52a"),p=a._(t("23546486")),m=a._(t("7483ba91")),f=a._(t("714a8bde")),g=r._(t("e67f7d0e")),h=a._(t("cd4f0a98"));t("73215ae0");let b=l.default.lazy(()=>Promise.all([t.ensure("vendors_2"),t.ensure("93fdd2ce")]).then(t.dr(o,t.bind(t,"93fdd2ce")))),y={cn:{slogan:"\u52A9\u529B\u8BBE\u8BA1\u5F00\u53D1\u8005\u300C\u66F4\u7075\u6D3B\u300D\u5730\u642D\u5EFA\u51FA\u300C\u66F4\u7F8E\u300D\u7684\u4EA7\u54C1\uFF0C\u8BA9\u7528\u6237\u300C\u5FEB\u4E50\u5DE5\u4F5C\u300D\uFF5E",start:"\u5F00\u59CB\u4F7F\u7528",designLanguage:"\u8BBE\u8BA1\u8BED\u8A00"},en:{slogan:"Help designers/developers building beautiful products more flexible and working with happiness",start:"Getting Started",designLanguage:"Design Language"}},v=(0,c.createStyles)(({token:n,css:e,cx:t},o)=>{let a=`0 0 4px ${n.colorBgContainer}`,r=o.theme.includes("dark"),i=t(e`
|
|
position: absolute;
|
|
inset: 0;
|
|
backdrop-filter: blur(2px);
|
|
opacity: 1;
|
|
background-color: ${r?"rgba(0, 0, 0, 0.2)":"rgba(255, 255, 255, 0.2)"};
|
|
transition: all 1s ease;
|
|
pointer-events: none;
|
|
`),l=t(e`
|
|
position: absolute;
|
|
inset-inline-end: -60px;
|
|
top: -24px;
|
|
transition: all 1s cubic-bezier(0.03, 0.98, 0.52, 0.99);
|
|
`);return{holder:e`
|
|
height: 640px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
overflow: hidden;
|
|
perspective: 800px;
|
|
/* fix safari bug by removing blur style */
|
|
transform: translateZ(1000px);
|
|
row-gap: ${n.marginXL}px;
|
|
|
|
&:hover {
|
|
.${i} {
|
|
opacity: 0;
|
|
}
|
|
|
|
.${l} {
|
|
transform: scale(0.96);
|
|
}
|
|
}
|
|
`,mask:i,typography:e`
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
padding-inline: ${n.paddingXL}px;
|
|
text-shadow: ${Array.from({length:5},()=>a).join(", ")};
|
|
h1 {
|
|
font-family: AliPuHui, ${n.fontFamily} !important;
|
|
font-weight: 900 !important;
|
|
font-size: ${2*n.fontSizeHeading2}px !important;
|
|
line-height: ${n.lineHeightHeading2} !important;
|
|
}
|
|
|
|
p {
|
|
font-size: ${n.fontSizeLG}px !important;
|
|
font-weight: normal !important;
|
|
margin-bottom: 0;
|
|
}
|
|
`,block:l,child:e`
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
z-index: 1;
|
|
`,btnWrap:e`
|
|
margin-bottom: ${n.marginXL}px;
|
|
`,bgImg:e`
|
|
position: absolute;
|
|
width: 240px;
|
|
`,bgImgTop:e`
|
|
top: 0;
|
|
inset-inline-start: ${o.isMobile?"-120px":0};
|
|
`,bgImgBottom:e`
|
|
bottom: 120px;
|
|
inset-inline-end: ${o.isMobile?0:"40%"};
|
|
`};});var C=n=>{let{children:e}=n,[t]=(0,p.default)(y),o=(0,l.use)(f.default),{styles:a}=v(o),{pathname:r,search:c}=(0,u.useLocation)(),C=g.isZhCN(r);return(0,i.jsxs)(h.default,{children:[(0,i.jsx)("img",{alt:"bg",src:"https://gw.alipayobjects.com/zos/bmw-prod/49f963db-b2a8-4f15-857a-270d771a1204.svg",draggable:!1,className:(0,d.default)(a.bgImg,a.bgImgTop)}),(0,i.jsx)("img",{alt:"bg",src:"https://gw.alipayobjects.com/zos/bmw-prod/e152223c-bcae-4913-8938-54fda9efe330.svg",draggable:!1,className:(0,d.default)(a.bgImg,a.bgImgBottom)}),(0,i.jsxs)("div",{className:a.holder,children:[(0,i.jsx)(l.Suspense,{fallback:null,children:o.isMobile?null:(0,i.jsx)("div",{className:a.block,children:(0,i.jsx)(b,{})})}),(0,i.jsx)("div",{className:a.mask}),(0,i.jsxs)(s.Typography,{className:a.typography,children:[(0,i.jsx)("h1",{children:"Ant Design 5.0"}),(0,i.jsx)("p",{children:t.slogan})]}),(0,i.jsxs)(s.Flex,{gap:"middle",className:a.btnWrap,children:[(0,i.jsx)(m.default,{size:"large",type:"primary",to:g.getLocalizedPathname("/components/overview/",C,c),children:t.start}),(0,i.jsx)(m.default,{size:"large",to:g.getLocalizedPathname("/docs/spec/introduce/",C,c),children:t.designLanguage})]}),(0,i.jsx)("div",{className:a.child,children:e})]})]});};},"35be718c":function(n,e,t){},"35cd8722":function(n,e,t){},"35ff6227":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3c92767a");var o="import React from 'react';\nimport { Divider, Steps } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Steps\n progressDot\n current={1}\n items={[\n {\n title: 'Finished',\n description: 'This is a description.',\n },\n {\n title: 'In Progress',\n description: 'This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n ]}\n />\n <Divider />\n <Steps\n progressDot\n current={1}\n direction=\"vertical\"\n items={[\n {\n title: 'Finished',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'Finished',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'In Progress',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n ]}\n />\n </>\n);\n\nexport default App;\n";},36096981:function(n,e,t){},"362dfc85":function(n,e,t){},"3633591e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7ebe5e0c");var o="import React from 'react';\nimport { Divider, Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n];\n\nconst App: React.FC = () => (\n <>\n <Divider>Middle size table</Divider>\n <Table<DataType> columns={columns} dataSource={data} size=\"middle\" />\n <Divider>Small size table</Divider>\n <Table<DataType> columns={columns} dataSource={data} size=\"small\" />\n </>\n);\n\nexport default App;\n";},"3647da4c":function(n,e,t){},"36881db2":function(n,e,t){},"36a4159e":function(n,e,t){},"36c798c7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e359a5b5");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ntype TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];\n\ninterface DataType {\n key: React.Key;\n name: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n];\n\nconst dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({\n key: i,\n name: i % 2 === 0 ? `Edward King ${i}` : 'Another Row',\n}));\n\nconst rowSelection: TableRowSelection<DataType> = {\n renderCell: (checked, _record, index, node) => ({\n props: { rowSpan: index % 2 === 0 ? 2 : 0 },\n children: (\n <>\n {String(checked)}: {node}\n </>\n ),\n }),\n};\n\nconst App: React.FC = () => (\n <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />\n);\n\nexport default App;\n";},"36cdd050":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("004dd1d4");var o="import React from 'react';\nimport { AutoComplete, Space, Switch } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalAutoComplete } = AutoComplete;\n\nconst App: React.FC = () => {\n const [open, setOpen] = React.useState(false);\n\n return (\n <Space direction=\"vertical\" style={{ display: 'flex' }}>\n <Switch checked={open} onChange={() => setOpen(!open)} />\n <InternalAutoComplete\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n open={open}\n options={[\n { label: 'Jack', value: 'jack' },\n { label: 'Lucy', value: 'lucy' },\n { label: 'Disabled', value: 'disabled' },\n { label: 'Bamboo', value: 'bamboo' },\n ]}\n />\n </Space>\n );\n};\n\nexport default App;\n";},"36d9e09f":function(n,e,t){},"3739a5ba":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5ec4a406");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport { Button, Upload } from 'antd';\nimport type { UploadFile } from 'antd';\n\nconst fileList: UploadFile[] = [\n {\n uid: '0',\n name: 'xxx.png',\n status: 'uploading',\n percent: 33,\n },\n {\n uid: '-1',\n name: 'yyy.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-2',\n name: 'zzz.png',\n status: 'error',\n },\n];\n\nconst App: React.FC = () => (\n <Upload\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n listType=\"picture\"\n defaultFileList={fileList}\n >\n <Button type=\"primary\" icon={<UploadOutlined />}>\n Upload\n </Button>\n </Upload>\n);\n\nexport default App;\n";},"373e40d8":function(n,e,t){},"374c67e0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("853ad754");var o="import React from 'react';\nimport type { BadgeProps, CalendarProps } from 'antd';\nimport { Badge, Calendar } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\nconst getListData = (value: Dayjs) => {\n let listData: { type: string; content: string }[] = []; // Specify the type of listData\n switch (value.date()) {\n case 8:\n listData = [\n { type: 'warning', content: 'This is warning event.' },\n { type: 'success', content: 'This is usual event.' },\n ];\n break;\n case 10:\n listData = [\n { type: 'warning', content: 'This is warning event.' },\n { type: 'success', content: 'This is usual event.' },\n { type: 'error', content: 'This is error event.' },\n ];\n break;\n case 15:\n listData = [\n { type: 'warning', content: 'This is warning event' },\n { type: 'success', content: 'This is very long usual event......' },\n { type: 'error', content: 'This is error event 1.' },\n { type: 'error', content: 'This is error event 2.' },\n { type: 'error', content: 'This is error event 3.' },\n { type: 'error', content: 'This is error event 4.' },\n ];\n break;\n default:\n }\n return listData || [];\n};\n\nconst getMonthData = (value: Dayjs) => {\n if (value.month() === 8) {\n return 1394;\n }\n};\n\nconst App: React.FC = () => {\n const monthCellRender = (value: Dayjs) => {\n const num = getMonthData(value);\n return num ? (\n <div className=\"notes-month\">\n <section>{num}</section>\n <span>Backlog number</span>\n </div>\n ) : null;\n };\n\n const dateCellRender = (value: Dayjs) => {\n const listData = getListData(value);\n return (\n <ul className=\"events\">\n {listData.map((item) => (\n <li key={item.content}>\n <Badge status={item.type as BadgeProps['status']} text={item.content} />\n </li>\n ))}\n </ul>\n );\n };\n\n const cellRender: CalendarProps<Dayjs>['cellRender'] = (current, info) => {\n if (info.type === 'date') return dateCellRender(current);\n if (info.type === 'month') return monthCellRender(current);\n return info.originNode;\n };\n\n return <Calendar cellRender={cellRender} />;\n};\n\nexport default App;\n";},"3756071d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c413e601");var o='import React from \'react\';\nimport { Button, Divider, Form, Input, Select } from \'antd\';\n\nconst sharedItem = (\n <Form.Item\n label={\n <a\n href="https://github.com/ant-design/ant-design/issues/36459"\n target="_blank"\n rel="noreferrer"\n >\n #36459\n </a>\n }\n initialValue={[\'bamboo\']}\n name="select"\n style={{ boxShadow: \'0 0 3px red\' }}\n >\n <Select\n style={{ width: \'70%\' }}\n mode="multiple"\n options={[\n { label: \'Bamboo\', value: \'bamboo\' },\n { label: \'Little\', value: \'little\' },\n { label: \'Light\', value: \'light\' },\n ]}\n />\n </Form.Item>\n);\n\nconst App: React.FC = () => {\n const onFinish = (values: any) => {\n console.log(\'Success:\', values);\n };\n\n const onFinishFailed = (errorInfo: any) => {\n console.log(\'Failed:\', errorInfo);\n };\n\n return (\n <>\n <Form\n name="col-24-debug"\n labelCol={{ span: 24 }}\n wrapperCol={{ span: 24 }}\n initialValues={{ remember: true }}\n onFinish={onFinish}\n onFinishFailed={onFinishFailed}\n style={{ maxWidth: 600 }}\n autoComplete="off"\n >\n <Form.Item\n label="Username"\n name="username"\n rules={[{ required: true, message: \'Please input your username!\' }]}\n >\n <Input />\n </Form.Item>\n\n <Form.Item\n label="Password"\n name="password"\n rules={[{ required: true, message: \'Please input your password!\' }]}\n >\n <Input.Password />\n </Form.Item>\n\n {sharedItem}\n\n <Form.Item>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form.Item>\n </Form>\n <Form\n name="responsive"\n labelCol={{ sm: 24, xl: 24 }}\n wrapperCol={{ sm: 24, xl: 24 }}\n initialValues={{ remember: true }}\n onFinish={onFinish}\n onFinishFailed={onFinishFailed}\n autoComplete="off"\n >\n <Form.Item\n label="Username"\n name="username"\n rules={[{ required: true, message: \'Please input your username!\' }]}\n >\n <Input />\n </Form.Item>\n\n <Form.Item\n label="Password"\n name="password"\n rules={[{ required: true, message: \'Please input your password!\' }]}\n >\n <Input.Password />\n </Form.Item>\n\n <Form.Item>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form.Item>\n </Form>\n\n <Divider />\n\n <Form layout="vertical">\n {sharedItem}\n\n <Form.Item label="col12" name="col12" labelCol={{ span: 12 }} wrapperCol={{ span: 12 }}>\n <Input />\n </Form.Item>\n </Form>\n </>\n );\n};\n\nexport default App;\n';},"37a9a14d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("09b87bdb");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n code: string;\n name: string;\n items?: Option[];\n}\n\nconst options: Option[] = [\n {\n code: 'zhejiang',\n name: 'Zhejiang',\n items: [\n {\n code: 'hangzhou',\n name: 'Hangzhou',\n items: [\n {\n code: 'xihu',\n name: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n code: 'jiangsu',\n name: 'Jiangsu',\n items: [\n {\n code: 'nanjing',\n name: 'Nanjing',\n items: [\n {\n code: 'zhonghuamen',\n name: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => (\n <Cascader\n fieldNames={{ label: 'name', value: 'code', children: 'items' }}\n options={options}\n onChange={onChange}\n placeholder=\"Please select\"\n />\n);\n\nexport default App;\n";},"37d849cd":function(n,e,t){},"37e007c8":function(n,e,t){},"37e76120":function(n,e,t){},"37ef7827":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e21de074");var o='import React from \'react\';\nimport { Button, Flex } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex wrap gap="small">\n <Button type="primary" danger>\n Primary\n </Button>\n <Button danger>Default</Button>\n <Button type="dashed" danger>\n Dashed\n </Button>\n <Button type="text" danger>\n Text\n </Button>\n <Button type="link" danger>\n Link\n </Button>\n </Flex>\n);\n\nexport default App;\n';},"37f9ba2b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("30823373");var o="import React, { useState } from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { TableColumnsType, TableProps } from 'antd';\nimport { Badge, Dropdown, Form, Space, Switch, Table } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n platform: string;\n version: string;\n upgradeNum: number;\n creator: string;\n createdAt: string;\n}\n\ninterface ExpandedDataType {\n key: React.Key;\n date: string;\n name: string;\n upgradeNum: string;\n}\n\nconst items = [\n { key: '1', label: 'Action 1' },\n { key: '2', label: 'Action 2' },\n];\n\nconst expandedColumns: TableProps<ExpandedDataType>['columns'] = [\n { title: 'Date', dataIndex: 'date', key: 'date' },\n { title: 'Name', dataIndex: 'name', key: 'name' },\n {\n title: 'Status',\n key: 'state',\n render: () => (\n <span>\n <Badge status=\"success\" />\n Finished\n </span>\n ),\n },\n { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n {\n title: 'Action',\n dataIndex: 'operation',\n key: 'operation',\n render: () => (\n <Space size=\"middle\">\n <a>Pause</a>\n <a>Stop</a>\n <Dropdown menu={{ items }}>\n <a>\n More <DownOutlined />\n </a>\n </Dropdown>\n </Space>\n ),\n },\n];\n\nconst expandedDataSource = Array.from({ length: 3 }).map<ExpandedDataType>((_, i) => ({\n key: i,\n date: '2014-12-24 23:12:00',\n name: 'This is production name',\n upgradeNum: 'Upgraded: 56',\n}));\n\nconst createExpandedRowRender = (bordered: boolean) => () => (\n <Table<ExpandedDataType>\n columns={expandedColumns}\n dataSource={expandedDataSource}\n pagination={false}\n bordered={bordered}\n />\n);\n\nconst columns: TableColumnsType<DataType> = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Platform', dataIndex: 'platform', key: 'platform' },\n { title: 'Version', dataIndex: 'version', key: 'version' },\n { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n { title: 'Creator', dataIndex: 'creator', key: 'creator' },\n { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },\n { title: 'Action', key: 'operation', render: () => <a>Publish</a> },\n];\n\nconst dataSource = Array.from({ length: 3 }).map<DataType>((_, i) => ({\n key: i,\n name: 'Screem',\n platform: 'iOS',\n version: '10.3.4.5654',\n upgradeNum: 500,\n creator: 'Jack',\n createdAt: '2014-12-24 23:12:00',\n}));\n\nconst App: React.FC = () => {\n const [rootTableBordered, setRootTableBordered] = useState(true);\n const [childTableBordered, setChildTableBordered] = useState(true);\n return (\n <>\n <Form layout=\"inline\" className=\"table-demo-control-bar\" style={{ marginBottom: 16 }}>\n <Form.Item label=\"Root Table Bordered\">\n <Switch checked={rootTableBordered} onChange={(v) => setRootTableBordered(v)} />\n </Form.Item>\n <Form.Item label=\"Child Table Bordered\">\n <Switch checked={childTableBordered} onChange={(v) => setChildTableBordered(v)} />\n </Form.Item>\n </Form>\n <Table<DataType>\n title={() => 'cool'}\n footer={() => 'cool'}\n columns={columns}\n expandable={{ expandedRowRender: createExpandedRowRender(childTableBordered) }}\n dataSource={dataSource}\n bordered={rootTableBordered}\n />\n </>\n );\n};\n\nexport default App;\n";},"3844ef8f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6c95f188");var o="import React, { useState } from 'react';\nimport { Descriptions, Divider, Radio, Switch } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst labelStyle: React.CSSProperties = { background: 'red' };\nconst contentStyle: React.CSSProperties = { background: 'green' };\n\ntype LayoutType = 'horizontal' | 'vertical' | undefined;\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n styles: {\n label: labelStyle,\n content: contentStyle,\n },\n },\n {\n key: '2',\n label: 'Billing Mode',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Automatic Renewal',\n children: 'YES',\n },\n];\n\nconst rootStyleItems: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: 'Billing Mode',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Automatic Renewal',\n children: 'YES',\n styles: {\n label: { color: 'orange' },\n content: { color: 'blue' },\n },\n },\n];\n\nconst App: React.FC = () => {\n const [border, setBorder] = useState(true);\n const [layout, setLayout] = useState('horizontal' as LayoutType);\n\n return (\n <>\n <Switch\n checkedChildren=\"Border\"\n unCheckedChildren=\"No Border\"\n checked={border}\n onChange={(e) => setBorder(e)}\n />\n <Divider />\n <Radio.Group onChange={(e) => setLayout(e.target.value)} value={layout}>\n <Radio value=\"horizontal\">horizontal</Radio>\n <Radio value=\"vertical\">vertical</Radio>\n </Radio.Group>\n <Divider />\n <Descriptions title=\"User Info\" bordered={border} layout={layout} items={items} />\n <Divider />\n <Descriptions\n title=\"Root style\"\n styles={{\n label: labelStyle,\n content: contentStyle,\n }}\n bordered={border}\n layout={layout}\n items={rootStyleItems}\n />\n </>\n );\n};\n\nexport default App;\n";},"384ee047":function(n,e,t){},"3868ee65":function(n,e,t){},"3996c4be":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6e78d301");var o="import React, { useState } from 'react';\nimport type { DescriptionsProps, RadioChangeEvent } from 'antd';\nimport { Button, ConfigProvider, Descriptions, Radio } from 'antd';\n\nconst borderedItems: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: 'Billing',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Time',\n children: '18:00:00',\n },\n {\n key: '4',\n label: 'Amount',\n children: '$80.00',\n },\n {\n key: '5',\n label: 'Discount',\n children: '$20.00',\n },\n {\n key: '6',\n label: 'Official',\n children: '$60.00',\n },\n {\n key: '7',\n label: 'Config Info',\n children: (\n <>\n Data disk type: MongoDB\n <br />\n Database version: 3.4\n <br />\n Package: dds.mongo.mid\n <br />\n Storage space: 10 GB\n <br />\n Replication factor: 3\n <br />\n Region: East China 1\n <br />\n </>\n ),\n },\n];\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: 'Billing',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Time',\n children: '18:00:00',\n },\n {\n key: '4',\n label: 'Amount',\n children: '$80.00',\n },\n {\n key: '5',\n label: 'Discount',\n children: '$20.00',\n },\n {\n key: '6',\n label: 'Official',\n children: '$60.00',\n },\n];\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<'default' | 'middle' | 'small'>('default');\n\n const onChange = (e: RadioChangeEvent) => {\n console.log('size checked', e.target.value);\n setSize(e.target.value);\n };\n\n return (\n <ConfigProvider\n theme={{\n components: {\n Descriptions: {\n labelBg: 'red',\n titleColor: 'red',\n titleMarginBottom: 2,\n itemPaddingBottom: 8,\n itemPaddingEnd: 8,\n colonMarginRight: 10,\n colonMarginLeft: 20,\n contentColor: 'green',\n extraColor: 'blue',\n },\n },\n }}\n >\n <div>\n <Radio.Group onChange={onChange} value={size}>\n <Radio value=\"default\">default</Radio>\n <Radio value=\"middle\">middle</Radio>\n <Radio value=\"small\">small</Radio>\n </Radio.Group>\n <br />\n <br />\n <Descriptions\n bordered\n title=\"Custom Size\"\n size={size}\n extra={<div>extra color: blue</div>}\n items={borderedItems}\n />\n <br />\n <br />\n <Descriptions\n title=\"Custom Size\"\n size={size}\n extra={<Button type=\"primary\">Edit</Button>}\n items={items}\n />\n </div>\n </ConfigProvider>\n );\n};\n\nexport default App;\n";},"39d2d9ff":function(n,e,t){},"39de706c":function(n,e,t){},"3a021449":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4eb44662");var o="import React, { useState } from 'react';\nimport {\n AppstoreOutlined,\n ContainerOutlined,\n DesktopOutlined,\n MailOutlined,\n PieChartOutlined,\n SettingOutlined,\n} from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { ConfigProvider, Menu, Space, theme } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n label: 'Navigation One',\n key: 'mail',\n icon: <MailOutlined />,\n },\n {\n label: 'Navigation Two',\n key: 'app',\n icon: <AppstoreOutlined />,\n disabled: true,\n },\n {\n label: 'Navigation Three - Submenu',\n key: 'SubMenu',\n icon: <SettingOutlined />,\n children: [\n {\n type: 'group',\n label: 'Item 1',\n children: [\n { label: 'Option 1', key: 'setting:1' },\n { label: 'Option 2', key: 'setting:2' },\n ],\n },\n {\n type: 'group',\n label: 'Item 2',\n children: [\n { label: 'Option 3', key: 'setting:3' },\n { label: 'Option 4', key: 'setting:4' },\n ],\n },\n ],\n },\n {\n key: 'alipay',\n label: (\n <a href=\"https://ant.design\" target=\"_blank\" rel=\"noopener noreferrer\">\n Navigation Four - Link\n </a>\n ),\n },\n];\n\nconst items2: MenuItem[] = [\n {\n key: '1',\n icon: <PieChartOutlined />,\n label: 'Option 1',\n },\n {\n key: '2',\n icon: <DesktopOutlined />,\n label: 'Option 2',\n },\n {\n key: '3',\n icon: <ContainerOutlined />,\n label: 'Option 3',\n },\n {\n key: 'sub1',\n label: 'Navigation One',\n icon: <MailOutlined />,\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n { key: '7', label: 'Option 7' },\n { key: '8', label: 'Option 8' },\n ],\n },\n {\n key: 'sub2',\n label: 'Navigation Two',\n icon: <AppstoreOutlined />,\n children: [\n { key: '9', label: 'Option 9' },\n { key: '10', label: 'Option 10' },\n {\n key: 'sub3',\n label: 'Submenu',\n children: [\n { key: '11', label: 'Option 11' },\n { key: '12', label: 'Option 12' },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [current, setCurrent] = useState('mail');\n\n const onClick: MenuProps['onClick'] = (e) => {\n console.log('click ', e);\n setCurrent(e.key);\n };\n\n return (\n <Space direction=\"vertical\">\n <ConfigProvider\n theme={{\n algorithm: [theme.darkAlgorithm],\n components: {\n Menu: {\n popupBg: 'yellow',\n darkPopupBg: 'red',\n },\n },\n }}\n >\n <Menu onClick={onClick} selectedKeys={[current]} mode=\"horizontal\" items={items} />\n <Menu\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n mode=\"inline\"\n theme=\"dark\"\n inlineCollapsed\n items={items2}\n style={{\n width: 56,\n }}\n />\n </ConfigProvider>\n <ConfigProvider\n theme={{\n components: {\n Menu: {\n horizontalItemBorderRadius: 6,\n popupBg: 'red',\n horizontalItemHoverBg: '#f5f5f5',\n },\n },\n }}\n >\n <Menu onClick={onClick} selectedKeys={[current]} mode=\"horizontal\" items={items} />\n </ConfigProvider>\n <ConfigProvider\n theme={{\n components: {\n Menu: {\n darkItemColor: '#91daff',\n darkItemBg: '#d48806',\n darkSubMenuItemBg: '#faad14',\n darkItemSelectedColor: '#ffccc7',\n darkItemSelectedBg: '#52c41a',\n },\n },\n }}\n >\n <Menu\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n mode=\"inline\"\n theme=\"dark\"\n items={items2}\n style={{\n width: 256,\n }}\n />\n </ConfigProvider>\n </Space>\n );\n};\n\nexport default App;\n";},"3a061bab":function(n,e,t){},"3a0ca85d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("de1a922a");var o="import React from 'react';\nimport { Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <Row>\n <Col span={18} push={6}>\n col-18 col-push-6\n </Col>\n <Col span={6} pull={18}>\n col-6 col-pull-18\n </Col>\n </Row>\n);\n\nexport default App;\n";},"3a1b1b85":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0f29991d");var o="import React, { useState } from 'react';\nimport { ClockCircleOutlined } from '@ant-design/icons';\nimport { Badge, Space, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const [show, setShow] = useState(true);\n\n return (\n <Space>\n <Switch checked={show} onChange={() => setShow(!show)} />\n <Badge count={show ? 11 : 0} showZero color=\"#faad14\" />\n <Badge count={show ? 25 : 0} />\n <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />\n <Badge\n className=\"site-badge-count-109\"\n count={show ? 109 : 0}\n style={{ backgroundColor: '#52c41a' }}\n />\n </Space>\n );\n};\n\nexport default App;\n";},"3a2cefac":function(n,e,t){},"3a3ea101":function(n,e,t){},"3a480c85":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1a4d37a4");var o='import React, { useState } from \'react\';\nimport {\n Button,\n Cascader,\n DatePicker,\n Form,\n Input,\n InputNumber,\n Radio,\n Select,\n Switch,\n TreeSelect,\n} from \'antd\';\n\ntype SizeType = Parameters<typeof Form>[0][\'size\'];\n\nconst App: React.FC = () => {\n const [componentSize, setComponentSize] = useState<SizeType | \'default\'>(\'default\');\n\n const onFormLayoutChange = ({ size }: { size: SizeType }) => {\n setComponentSize(size);\n };\n\n return (\n <Form\n labelCol={{ span: 4 }}\n wrapperCol={{ span: 14 }}\n layout="horizontal"\n initialValues={{ size: componentSize }}\n onValuesChange={onFormLayoutChange}\n size={componentSize as SizeType}\n style={{ maxWidth: 600 }}\n >\n <Form.Item label="Form Size" name="size">\n <Radio.Group>\n <Radio.Button value="small">Small</Radio.Button>\n <Radio.Button value="default">Default</Radio.Button>\n <Radio.Button value="large">Large</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label="Input">\n <Input />\n </Form.Item>\n <Form.Item label="Select">\n <Select>\n <Select.Option value="demo">Demo</Select.Option>\n </Select>\n </Form.Item>\n <Form.Item label="TreeSelect">\n <TreeSelect\n treeData={[\n { title: \'Light\', value: \'light\', children: [{ title: \'Bamboo\', value: \'bamboo\' }] },\n ]}\n />\n </Form.Item>\n <Form.Item label="Cascader">\n <Cascader\n options={[\n {\n value: \'zhejiang\',\n label: \'Zhejiang\',\n children: [{ value: \'hangzhou\', label: \'Hangzhou\' }],\n },\n ]}\n />\n </Form.Item>\n <Form.Item label="DatePicker">\n <DatePicker />\n </Form.Item>\n <Form.Item label="InputNumber">\n <InputNumber />\n </Form.Item>\n <Form.Item label="Switch" valuePropName="checked">\n <Switch />\n </Form.Item>\n <Form.Item label="Button">\n <Button>Button</Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"3a6d0e79":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5f8855a4");var o="import React from 'react';\nimport { Card, List } from 'antd';\n\nconst data = [\n {\n title: 'Title 1',\n },\n {\n title: 'Title 2',\n },\n {\n title: 'Title 3',\n },\n {\n title: 'Title 4',\n },\n {\n title: 'Title 5',\n },\n {\n title: 'Title 6',\n },\n];\n\nconst ListItem = () => (\n <List.Item>\n <Card title=\"title\">Card content</Card>\n </List.Item>\n);\n\nconst App: React.FC = () => (\n <>\n <List\n grid={{ gutter: 16, column: 4 }}\n dataSource={data}\n renderItem={(item) => (\n <List.Item>\n <Card title={item.title}>Card content</Card>\n </List.Item>\n )}\n />\n <List grid={{ gutter: 16, column: 4 }} dataSource={data} renderItem={() => <ListItem />} />\n <List\n grid={{ gutter: 16, column: 4 }}\n dataSource={data}\n renderItem={() => (\n <>\n <ListItem />\n <div />\n </>\n )}\n />\n </>\n);\n\nexport default App;\n";},"3a71571a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2d052013");var o="import React from 'react';\nimport { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Breadcrumb, Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Footer, Sider } = Layout;\n\nconst items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({\n key,\n label: `nav ${key}`,\n}));\n\nconst items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(\n (icon, index) => {\n const key = String(index + 1);\n\n return {\n key: `sub${key}`,\n icon: React.createElement(icon),\n label: `subnav ${key}`,\n children: Array.from({ length: 4 }).map((_, j) => {\n const subKey = index * 4 + j + 1;\n return {\n key: subKey,\n label: `option${subKey}`,\n };\n }),\n };\n },\n);\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout>\n <Header style={{ display: 'flex', alignItems: 'center' }}>\n <div className=\"demo-logo\" />\n <Menu\n theme=\"dark\"\n mode=\"horizontal\"\n defaultSelectedKeys={['2']}\n items={items1}\n style={{ flex: 1, minWidth: 0 }}\n />\n </Header>\n <div style={{ padding: '0 48px' }}>\n <Breadcrumb\n style={{ margin: '16px 0' }}\n items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}\n />\n <Layout\n style={{ padding: '24px 0', background: colorBgContainer, borderRadius: borderRadiusLG }}\n >\n <Sider style={{ background: colorBgContainer }} width={200}>\n <Menu\n mode=\"inline\"\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n style={{ height: '100%' }}\n items={items2}\n />\n </Sider>\n <Content style={{ padding: '0 24px', minHeight: 280 }}>Content</Content>\n </Layout>\n </div>\n <Footer style={{ textAlign: 'center' }}>\n Ant Design \xa9{new Date().getFullYear()} Created by Ant UED\n </Footer>\n </Layout>\n );\n};\n\nexport default App;\n";},"3a82fbc7":function(n,e,t){},"3ab26a77":function(n,e,t){},"3ad69296":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8506c7e3");var o="import React from 'react';\nimport { message } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;\n\nexport default () => <InternalPanel content=\"Hello World!\" type=\"error\" />;\n";},"3adaea0e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2abfea61");var o="import React from 'react';\nimport { ConfigProvider, Tree } from 'antd';\nimport type { TreeDataNode, TreeProps } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 1',\n key: '0-0',\n children: [\n {\n title: 'parent 1-0',\n key: '0-0-0',\n disabled: true,\n children: [\n {\n title: 'leaf',\n key: '0-0-0-0',\n disableCheckbox: true,\n },\n {\n title: 'leaf',\n key: '0-0-0-1',\n },\n ],\n },\n {\n title: 'parent 1-1',\n key: '0-0-1',\n children: [{ title: <span style={{ color: '#1677ff' }}>sss</span>, key: '0-0-1-0' }],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {\n console.log('selected', selectedKeys, info);\n };\n\n const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {\n console.log('onCheck', checkedKeys, info);\n };\n\n return (\n <ConfigProvider\n theme={{\n components: {\n Tree: {\n nodeHoverBg: '#fff2f0',\n nodeHoverColor: '#1677ff',\n nodeSelectedBg: '#ffa39e',\n nodeSelectedColor: '#fff',\n indentSize: 80,\n },\n },\n }}\n >\n <Tree\n checkable\n defaultExpandedKeys={['0-0-0', '0-0-1']}\n defaultSelectedKeys={['0-0-1']}\n defaultCheckedKeys={['0-0-0', '0-0-1']}\n onSelect={onSelect}\n onCheck={onCheck}\n treeData={treeData}\n />\n </ConfigProvider>\n );\n};\n\nexport default App;\n";},"3adb0dd3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("52a1b26c");var o="import React, { useState } from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ntype TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\nconst dataSource = Array.from({ length: 46 }).map<DataType>((_, i) => ({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n}));\n\nconst App: React.FC = () => {\n const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);\n\n const onSelectChange = (newSelectedRowKeys: React.Key[]) => {\n console.log('selectedRowKeys changed: ', newSelectedRowKeys);\n setSelectedRowKeys(newSelectedRowKeys);\n };\n\n const rowSelection: TableRowSelection<DataType> = {\n selectedRowKeys,\n onChange: onSelectChange,\n selections: [\n Table.SELECTION_ALL,\n Table.SELECTION_INVERT,\n Table.SELECTION_NONE,\n {\n key: 'odd',\n text: 'Select Odd Row',\n onSelect: (changeableRowKeys) => {\n let newSelectedRowKeys = [];\n newSelectedRowKeys = changeableRowKeys.filter((_, index) => {\n if (index % 2 !== 0) {\n return false;\n }\n return true;\n });\n setSelectedRowKeys(newSelectedRowKeys);\n },\n },\n {\n key: 'even',\n text: 'Select Even Row',\n onSelect: (changeableRowKeys) => {\n let newSelectedRowKeys = [];\n newSelectedRowKeys = changeableRowKeys.filter((_, index) => {\n if (index % 2 !== 0) {\n return true;\n }\n return false;\n });\n setSelectedRowKeys(newSelectedRowKeys);\n },\n },\n ],\n };\n\n return <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />;\n};\n\nexport default App;\n";},"3afdba1e":function(n,e,t){},"3b0ea392":function(n,e,t){},"3b2f1ffc":function(n,e,t){},"3b55336f":function(n,e,t){},"3b713522":function(n,e,t){},"3b765713":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4cd328e2");var o="import React from 'react';\nimport type { TooltipProps } from 'antd';\nimport { Button, Tooltip, Typography } from 'antd';\n\nconst Block = React.forwardRef<HTMLDivElement, Partial<TooltipProps>>((props, ref) => (\n <div\n style={{\n overflow: 'auto',\n position: 'relative',\n padding: '24px',\n border: '1px solid #e9e9e9',\n }}\n ref={ref}\n >\n <div\n style={{\n width: '200%',\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n rowGap: 16,\n }}\n >\n <Tooltip {...props} placement=\"left\" title=\"Prompt Text\">\n <Button>Adjust automatically / \u81EA\u52A8\u8C03\u6574</Button>\n </Tooltip>\n <Tooltip {...props} placement=\"left\" title=\"Prompt Text\" autoAdjustOverflow={false}>\n <Button>Ignore / \u4E0D\u5904\u7406</Button>\n </Tooltip>\n </div>\n </div>\n));\n\nconst App: React.FC = () => {\n const containerRef1 = React.useRef<HTMLDivElement>(null);\n const containerRef2 = React.useRef<HTMLDivElement>(null);\n\n React.useEffect(() => {\n containerRef1.current!.scrollLeft = containerRef1.current!.clientWidth * 0.5;\n containerRef2.current!.scrollLeft = containerRef2.current!.clientWidth * 0.5;\n }, []);\n\n return (\n <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>\n <Typography.Title level={5}>With `getPopupContainer`</Typography.Title>\n <Block ref={containerRef1} getPopupContainer={(trigger) => trigger.parentElement!} />\n\n <Typography.Title level={5}>Without `getPopupContainer`</Typography.Title>\n <Block ref={containerRef2} />\n </div>\n );\n};\n\nexport default App;\n";},"3b964509":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("976a30a0");var o='import React from \'react\';\nimport { ConfigProvider, InputNumber, Space } from \'antd\';\n\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n InputNumber: {\n handleWidth: 50,\n },\n },\n }}\n >\n <Space wrap>\n <InputNumber />\n\n <ConfigProvider\n theme={{\n components: {\n InputNumber: {\n handleWidth: 25,\n },\n },\n }}\n >\n <InputNumber />\n </ConfigProvider>\n\n <ConfigProvider\n theme={{\n components: {\n InputNumber: {\n paddingBlockLG: 12,\n paddingInlineLG: 16,\n },\n },\n }}\n >\n <Space wrap>\n <InputNumber size="large" />\n <InputNumber size="large" prefix="$" />\n </Space>\n </ConfigProvider>\n\n <ConfigProvider\n theme={{\n components: {\n InputNumber: {\n inputFontSize: 30,\n inputFontSizeSM: 20,\n inputFontSizeLG: 40,\n },\n },\n }}\n >\n <Space wrap>\n <InputNumber defaultValue={11111} size="small" />\n <InputNumber defaultValue={11111} />\n <InputNumber defaultValue={11111} size="large" />\n </Space>\n </ConfigProvider>\n </Space>\n </ConfigProvider>\n);\n';},"3bb2e875":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("909d528d");var o="import React from 'react';\nimport { Select } from 'antd';\n\nconst onChange = (value: string) => {\n console.log(`selected ${value}`);\n};\n\nconst onSearch = (value: string) => {\n console.log('search:', value);\n};\n\nconst App: React.FC = () => (\n <Select\n showSearch\n placeholder=\"Select a person\"\n optionFilterProp=\"label\"\n onChange={onChange}\n onSearch={onSearch}\n options={[\n {\n value: 'jack',\n label: 'Jack',\n },\n {\n value: 'lucy',\n label: 'Lucy',\n },\n {\n value: 'tom',\n label: 'Tom',\n },\n ]}\n />\n);\n\nexport default App;\n";},"3bbc2b48":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("44399c00");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n chinese: number;\n math: number;\n english: number;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Chinese Score',\n dataIndex: 'chinese',\n sorter: {\n compare: (a, b) => a.chinese - b.chinese,\n multiple: 3,\n },\n },\n {\n title: 'Math Score',\n dataIndex: 'math',\n sorter: {\n compare: (a, b) => a.math - b.math,\n multiple: 2,\n },\n },\n {\n title: 'English Score',\n dataIndex: 'english',\n sorter: {\n compare: (a, b) => a.english - b.english,\n multiple: 1,\n },\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n chinese: 98,\n math: 60,\n english: 70,\n },\n {\n key: '2',\n name: 'Jim Green',\n chinese: 98,\n math: 66,\n english: 89,\n },\n {\n key: '3',\n name: 'Joe Black',\n chinese: 98,\n math: 90,\n english: 70,\n },\n {\n key: '4',\n name: 'Jim Red',\n chinese: 88,\n math: 99,\n english: 89,\n },\n];\n\nconst onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {\n console.log('params', pagination, filters, sorter, extra);\n};\n\nconst App: React.FC = () => (\n <Table<DataType> columns={columns} dataSource={data} onChange={onChange} />\n);\n\nexport default App;\n";},"3bcd98ef":function(n,e,t){},"3bdaf5ef":function(n,e,t){},"3c04ace0":function(n,e,t){},"3c434bc7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5c158d1a");var o="import React, { useState } from 'react';\nimport { TreeSelect } from 'antd';\n\nconst treeData = [\n {\n title: 'Node1',\n value: '0-0',\n children: [\n {\n title: 'Child Node1',\n value: '0-0-1',\n },\n {\n title: 'Child Node2',\n value: '0-0-2',\n },\n ],\n },\n {\n title: 'Node2',\n value: '0-1',\n },\n];\n\nconst App: React.FC = () => {\n const [value, setValue] = useState<string>();\n\n const onChange = (newValue: string) => {\n console.log(newValue);\n setValue(newValue);\n };\n\n return (\n <TreeSelect\n style={{ width: '100%' }}\n value={value}\n styles={{\n popup: { root: { maxHeight: 400, overflow: 'auto' } },\n }}\n treeData={treeData}\n placeholder=\"Please select\"\n treeDefaultExpandAll\n onChange={onChange}\n />\n );\n};\n\nexport default App;\n";},"3c463529":function(n,e,t){},"3c5e53d8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4e620aaf");var o="import React from 'react';\nimport { FrownOutlined, MehOutlined, SmileOutlined } from '@ant-design/icons';\nimport { Flex, Rate } from 'antd';\n\nconst customIcons: Record<number, React.ReactNode> = {\n 1: <FrownOutlined />,\n 2: <FrownOutlined />,\n 3: <MehOutlined />,\n 4: <SmileOutlined />,\n 5: <SmileOutlined />,\n};\n\nconst App: React.FC = () => (\n <Flex gap=\"middle\" vertical>\n <Rate defaultValue={2} character={({ index = 0 }) => index + 1} />\n <Rate defaultValue={3} character={({ index = 0 }) => customIcons[index + 1]} />\n </Flex>\n);\n\nexport default App;\n";},"3c78bb70":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("64c7cd5a");var o="import React from 'react';\nimport { Checkbox } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Checkbox defaultChecked={false} disabled />\n <br />\n <Checkbox indeterminate disabled />\n <br />\n <Checkbox defaultChecked disabled />\n </>\n);\n\nexport default App;\n";},"3c8af02e":function(n,e,t){},"3c92767a":function(n,e,t){},"3ccd83ea":function(n,e,t){},"3cd782c1":function(n,e,t){},"3d222276":function(n,e,t){},"3d61f594":function(n,e,t){},"3d8b5c5b":function(n,e,t){},"3da0509e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ecf56c79");var o="import React from 'react';\nimport type { DatePickerProps } from 'antd';\nimport { Button, DatePicker, Flex, Slider, Space, Typography } from 'antd';\nimport dayjs from 'dayjs';\nimport type { Dayjs } from 'dayjs';\n\nconst onChange: DatePickerProps['onChange'] = (date, dateString) => {\n console.log(date, dateString);\n};\n\ntype DateComponent = Required<NonNullable<DatePickerProps<Dayjs>['components']>>['date'];\ntype GetProps<T> = T extends React.ComponentType<infer P> ? P : never;\n\nconst MyDatePanel = (props: GetProps<DateComponent>) => {\n const { value, onSelect, onHover } = props;\n\n // Value\n const startDate = React.useMemo(() => dayjs().date(1).month(0), []);\n const [innerValue, setInnerValue] = React.useState(value || startDate);\n\n React.useEffect(() => {\n if (value) {\n setInnerValue(value);\n }\n }, [value]);\n\n // Range\n const dateCount = React.useMemo(() => {\n const endDate = startDate.add(1, 'year').add(-1, 'day');\n return endDate.diff(startDate, 'day');\n }, [startDate]);\n\n const sliderValue = Math.min(Math.max(0, innerValue.diff(startDate, 'day')), dateCount);\n\n // Render\n return (\n <Flex vertical gap=\"small\" style={{ padding: 16 }}>\n <Typography.Title level={4} style={{ margin: 0 }} title=\"no, it's not\">\n The BEST Picker Panel\n </Typography.Title>\n <Slider\n min={0}\n max={dateCount}\n value={sliderValue}\n onChange={(nextValue) => {\n const nextDate = startDate.add(nextValue, 'day');\n setInnerValue(nextDate);\n onHover?.(nextDate);\n }}\n tooltip={{\n formatter: (nextValue) => startDate.add(nextValue || 0, 'day').format('YYYY-MM-DD'),\n }}\n />\n <Button\n type=\"primary\"\n onClick={() => {\n onSelect(innerValue);\n }}\n >{`That's It!`}</Button>\n </Flex>\n );\n};\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\">\n <DatePicker\n showNow={false}\n onChange={onChange}\n components={{\n date: MyDatePanel,\n }}\n />\n </Space>\n);\n\nexport default App;\n";},"3dab6cb1":function(n,e,t){},"3dae44d9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5f5425ef");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ css, token }) => {\n const { antCls } = token;\n return {\n customTable: css`\n ${antCls}-table {\n ${antCls}-table-container {\n ${antCls}-table-body,\n ${antCls}-table-content {\n scrollbar-width: thin;\n scrollbar-color: #eaeaea transparent;\n scrollbar-gutter: stable;\n }\n }\n }\n `,\n };\n});\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Full Name',\n width: 100,\n dataIndex: 'name',\n key: 'name',\n fixed: 'left',\n },\n {\n title: 'Age',\n width: 100,\n dataIndex: 'age',\n key: 'age',\n fixed: 'left',\n sorter: true,\n },\n { title: 'Column 1', dataIndex: 'address', key: '1' },\n { title: 'Column 2', dataIndex: 'address', key: '2' },\n { title: 'Column 3', dataIndex: 'address', key: '3' },\n { title: 'Column 4', dataIndex: 'address', key: '4' },\n { title: 'Column 5', dataIndex: 'address', key: '5' },\n { title: 'Column 6', dataIndex: 'address', key: '6' },\n { title: 'Column 7', dataIndex: 'address', key: '7' },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n { title: 'Column 9', dataIndex: 'address', key: '9' },\n { title: 'Column 10', dataIndex: 'address', key: '10' },\n { title: 'Column 11', dataIndex: 'address', key: '11' },\n { title: 'Column 12', dataIndex: 'address', key: '12' },\n { title: 'Column 13', dataIndex: 'address', key: '13' },\n { title: 'Column 14', dataIndex: 'address', key: '14' },\n { title: 'Column 15', dataIndex: 'address', key: '15' },\n { title: 'Column 16', dataIndex: 'address', key: '16' },\n { title: 'Column 17', dataIndex: 'address', key: '17' },\n { title: 'Column 18', dataIndex: 'address', key: '18' },\n { title: 'Column 19', dataIndex: 'address', key: '19' },\n { title: 'Column 20', dataIndex: 'address', key: '20' },\n {\n title: 'Action',\n key: 'operation',\n fixed: 'right',\n width: 100,\n render: () => <a>action</a>,\n },\n];\n\nconst dataSource: DataType[] = [\n { key: '1', name: 'Olivia', age: 32, address: 'New York Park' },\n { key: '2', name: 'Ethan', age: 40, address: 'London Park' },\n];\n\nconst App: React.FC = () => {\n const { styles } = useStyle();\n return (\n <Table<DataType>\n className={styles.customTable}\n pagination={false}\n columns={columns}\n dataSource={dataSource}\n scroll={{ x: 'max-content' }}\n />\n );\n};\n\nexport default App;\n";},"3db4b831":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d942245a");var o="import React from 'react';\nimport { Divider } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Divider style={{ borderWidth: 2, borderColor: '#7cb305' }} />\n <Divider style={{ borderColor: '#7cb305' }} dashed />\n <Divider style={{ borderColor: '#7cb305' }} dashed>\n Text\n </Divider>\n <Divider type=\"vertical\" style={{ height: 60, borderColor: '#7cb305' }} />\n <Divider type=\"vertical\" style={{ height: 60, borderColor: '#7cb305' }} dashed />\n\n <div style={{ display: 'flex', flexDirection: 'column', height: 50, boxShadow: '0 0 1px red' }}>\n <Divider style={{ background: 'rgba(0,255,0,0.05)' }} orientation=\"left\">\n Text\n </Divider>\n </div>\n </>\n);\n\nexport default App;\n";},"3e157b64":function(n,e,t){},"3e681b45":function(n,e,t){},"3ed144ab":function(n,e,t){},"3ef68136":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9b161ea7");var o='import React from \'react\';\nimport { Col, Divider, Row } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Divider orientation="left">sub-element align left</Divider>\n <Row justify="start">\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n </Row>\n\n <Divider orientation="left">sub-element align center</Divider>\n <Row justify="center">\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n </Row>\n\n <Divider orientation="left">sub-element align right</Divider>\n <Row justify="end">\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n </Row>\n\n <Divider orientation="left">sub-element monospaced arrangement</Divider>\n <Row justify="space-between">\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n </Row>\n\n <Divider orientation="left">sub-element align full</Divider>\n <Row justify="space-around">\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n </Row>\n\n <Divider orientation="left">sub-element align evenly</Divider>\n <Row justify="space-evenly">\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n <Col span={4}>col-4</Col>\n </Row>\n </>\n);\n\nexport default App;\n';},"3f00d914":function(n,e,t){},"3f5ff83e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6e344bc6");var o="import React from 'react';\nimport { ZoomInOutlined } from '@ant-design/icons';\nimport { Image, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Image\n width={96}\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n preview={{\n maskClassName: 'customize-mask',\n mask: (\n <Space direction=\"vertical\" align=\"center\">\n <ZoomInOutlined />\n \u793A\u4F8B\n </Space>\n ),\n }}\n />\n);\n\nexport default App;\n";},"3f681966":function(n,e,t){},"3f74e845":function(n,e,t){},"3fa0aba1":function(n,e,t){},"3fbcf87e":function(n,e,t){},"3fcf7b48":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b4c0095a");var o='import React from \'react\';\nimport { LockOutlined, UserOutlined } from \'@ant-design/icons\';\nimport { Button, Checkbox, Form, Input, Flex } from \'antd\';\n\nconst App: React.FC = () => {\n const onFinish = (values: any) => {\n console.log(\'Received values of form: \', values);\n };\n\n return (\n <Form\n name="login"\n initialValues={{ remember: true }}\n style={{ maxWidth: 360 }}\n onFinish={onFinish}\n >\n <Form.Item\n name="username"\n rules={[{ required: true, message: \'Please input your Username!\' }]}\n >\n <Input prefix={<UserOutlined />} placeholder="Username" />\n </Form.Item>\n <Form.Item\n name="password"\n rules={[{ required: true, message: \'Please input your Password!\' }]}\n >\n <Input prefix={<LockOutlined />} type="password" placeholder="Password" />\n </Form.Item>\n <Form.Item>\n <Flex justify="space-between" align="center">\n <Form.Item name="remember" valuePropName="checked" noStyle>\n <Checkbox>Remember me</Checkbox>\n </Form.Item>\n <a href="">Forgot password</a>\n </Flex>\n </Form.Item>\n\n <Form.Item>\n <Button block type="primary" htmlType="submit">\n Log in\n </Button>\n or <a href="">Register now!</a>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"3fdb7541":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3064fc8b");var o='import React from \'react\';\nimport { Button, Result } from \'antd\';\n\nconst App: React.FC = () => (\n <Result\n title="Your operation has been executed"\n extra={\n <Button type="primary" key="console">\n Go Console\n </Button>\n }\n />\n);\n\nexport default App;\n';},"3ff550fd":function(n,e,t){},"3ff63ddc":function(n,e,t){},"4005411b":function(n,e,t){},"402f153b":function(n,e,t){},"4068f1ab":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5612368d");var o="import React from 'react';\nimport { Select } from 'antd';\n\nconst App: React.FC = () => (\n <Select\n showSearch\n style={{ width: 200 }}\n placeholder=\"Search to Select\"\n optionFilterProp=\"label\"\n filterSort={(optionA, optionB) =>\n (optionA?.label ?? '').toLowerCase().localeCompare((optionB?.label ?? '').toLowerCase())\n }\n options={[\n {\n value: '1',\n label: 'Not Identified',\n },\n {\n value: '2',\n label: 'Closed',\n },\n {\n value: '3',\n label: 'Communicated',\n },\n {\n value: '4',\n label: 'Identified',\n },\n {\n value: '5',\n label: 'Resolved',\n },\n {\n value: '6',\n label: 'Cancelled',\n },\n ]}\n />\n);\n\nexport default App;\n";},"408c6134":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c9d11905");var o='import React from \'react\';\nimport { SearchOutlined } from \'@ant-design/icons\';\nimport { Button, Flex, Tooltip } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" vertical>\n <Flex wrap gap="small">\n <Tooltip title="search">\n <Button type="primary" shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button type="primary" shape="circle">\n A\n </Button>\n <Button type="primary" icon={<SearchOutlined />}>\n Search\n </Button>\n <Tooltip title="search">\n <Button shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button icon={<SearchOutlined />}>Search</Button>\n </Flex>\n <Flex wrap gap="small">\n <Tooltip title="search">\n <Button shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button icon={<SearchOutlined />}>Search</Button>\n <Tooltip title="search">\n <Button type="dashed" shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button type="dashed" icon={<SearchOutlined />}>\n Search\n </Button>\n <Button icon={<SearchOutlined />} href="https://www.google.com" target="_blank" />\n </Flex>\n </Flex>\n);\n\nexport default App;\n';},"40bcde63":function(n,e,t){},"40cfb626":function(n,e,t){},"40d543ed":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"DarkContext",{enumerable:!0,get:function(){return o;}});let o=t("777fffbe")._(t("5b220c3d")).default.createContext(!1);},"40eabc73":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c74bea28");var o="import React from 'react';\nimport {\n BorderBottomOutlined,\n BorderTopOutlined,\n RadiusBottomleftOutlined,\n RadiusBottomrightOutlined,\n RadiusUpleftOutlined,\n RadiusUprightOutlined,\n} from '@ant-design/icons';\nimport { Button, Divider, notification, Space } from 'antd';\nimport type { NotificationArgsProps } from 'antd';\n\ntype NotificationPlacement = NotificationArgsProps['placement'];\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotification = (placement: NotificationPlacement) => {\n api.info({\n message: `Notification ${placement}`,\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n placement,\n });\n };\n\n return (\n <>\n {contextHolder}\n <Space>\n <Button type=\"primary\" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>\n top\n </Button>\n <Button\n type=\"primary\"\n onClick={() => openNotification('bottom')}\n icon={<BorderBottomOutlined />}\n >\n bottom\n </Button>\n </Space>\n <Divider />\n <Space>\n <Button\n type=\"primary\"\n onClick={() => openNotification('topLeft')}\n icon={<RadiusUpleftOutlined />}\n >\n topLeft\n </Button>\n <Button\n type=\"primary\"\n onClick={() => openNotification('topRight')}\n icon={<RadiusUprightOutlined />}\n >\n topRight\n </Button>\n </Space>\n <Divider />\n <Space>\n <Button\n type=\"primary\"\n onClick={() => openNotification('bottomLeft')}\n icon={<RadiusBottomleftOutlined />}\n >\n bottomLeft\n </Button>\n <Button\n type=\"primary\"\n onClick={() => openNotification('bottomRight')}\n icon={<RadiusBottomrightOutlined />}\n >\n bottomRight\n </Button>\n </Space>\n </>\n );\n};\n\nexport default App;\n";},"40ecfa65":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5ef2e240");var o='import React from \'react\';\nimport { Button, Drawer, Flex, Modal, Watermark } from \'antd\';\n\nconst style: React.CSSProperties = {\n height: 300,\n display: \'flex\',\n justifyContent: \'center\',\n alignItems: \'center\',\n backgroundColor: \'rgba(150, 150, 150, 0.2)\',\n};\n\nconst placeholder = <div style={style}>A mock height</div>;\n\nconst App: React.FC = () => {\n const [showModal, setShowModal] = React.useState(false);\n const [showDrawer, setShowDrawer] = React.useState(false);\n const [showDrawer2, setShowDrawer2] = React.useState(false);\n\n const closeModal = () => setShowModal(false);\n const closeDrawer = () => setShowDrawer(false);\n const closeDrawer2 = () => setShowDrawer2(false);\n\n return (\n <>\n <Flex gap="middle">\n <Button type="primary" onClick={() => setShowModal(true)}>\n Show in Modal\n </Button>\n <Button type="primary" onClick={() => setShowDrawer(true)}>\n Show in Drawer\n </Button>\n <Button type="primary" onClick={() => setShowDrawer2(true)}>\n Not Show in Drawer\n </Button>\n </Flex>\n <Watermark content="Ant Design">\n <Modal\n destroyOnHidden\n open={showModal}\n title="Modal"\n onCancel={closeModal}\n onOk={closeModal}\n >\n {placeholder}\n </Modal>\n <Drawer destroyOnHidden open={showDrawer} title="Drawer" onClose={closeDrawer}>\n {placeholder}\n </Drawer>\n </Watermark>\n <Watermark content="Ant Design" inherit={false}>\n <Drawer destroyOnHidden open={showDrawer2} title="Drawer" onClose={closeDrawer2}>\n {placeholder}\n </Drawer>\n </Watermark>\n </>\n );\n};\n\nexport default App;\n';},"410dbd22":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4005411b");var o="import React, { useContext, useLayoutEffect } from 'react';\nimport { StyleProvider } from '@ant-design/cssinjs';\nimport { ExclamationCircleFilled } from '@ant-design/icons';\nimport { App, Button, ConfigProvider, message, Modal, notification, Space } from 'antd';\n\nconst Demo: React.FC = () => {\n const { locale, theme } = useContext(ConfigProvider.ConfigContext);\n useLayoutEffect(() => {\n ConfigProvider.config({\n holderRender: (children) => (\n <StyleProvider hashPriority=\"high\">\n <ConfigProvider prefixCls=\"static\" iconPrefixCls=\"icon\" locale={locale} theme={theme}>\n <App message={{ maxCount: 1 }} notification={{ maxCount: 1 }}>\n {children}\n </App>\n </ConfigProvider>\n </StyleProvider>\n ),\n });\n }, [locale, theme]);\n\n return (\n <div>\n <Space>\n <Button\n type=\"primary\"\n onClick={() => {\n message.info('This is a normal message');\n }}\n >\n message\n </Button>\n <Button\n type=\"primary\"\n onClick={() => {\n notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n });\n }}\n >\n notification\n </Button>\n <Button\n type=\"primary\"\n onClick={() => {\n Modal.confirm({\n title: 'Do you want to delete these items?',\n icon: <ExclamationCircleFilled />,\n content: 'Some descriptions',\n });\n }}\n >\n Modal\n </Button>\n </Space>\n </div>\n );\n};\n\nexport default Demo;\n";},"41440d20":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("07edf56d");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport { DatePicker, Dropdown, Space } from 'antd';\nimport dayjs from 'dayjs';\n\nconst App: React.FC = () => {\n const [visible, setVisible] = React.useState(false);\n const [panelVisible, setPanelVisible] = React.useState(false);\n\n const [date, setDate] = React.useState(dayjs());\n\n return (\n <Dropdown\n arrow\n open={visible}\n trigger={['click']}\n destroyOnHidden\n onOpenChange={(open) => {\n setVisible(open);\n if (!open) {\n setPanelVisible(false);\n }\n }}\n menu={{\n items: [\n {\n key: 'today',\n label: 'Today',\n onClick() {\n setDate(dayjs());\n setVisible(false);\n },\n },\n {\n key: 'tomorrow',\n label: 'Tomorrow',\n onClick() {\n setDate(dayjs().add(1, 'day'));\n setVisible(false);\n },\n },\n {\n key: 'custom-date',\n label: (\n <div\n style={{ position: 'relative' }}\n onClick={(e) => {\n e.stopPropagation();\n setPanelVisible(true);\n }}\n >\n <div>Customize</div>\n <div\n onClick={(e) => {\n e.stopPropagation();\n }}\n style={{\n height: 0,\n width: 0,\n overflow: 'hidden',\n position: 'absolute',\n top: 0,\n insetInlineStart: 0,\n }}\n >\n <DatePicker\n open={panelVisible}\n onChange={(date) => {\n setDate(date);\n setVisible(false);\n setPanelVisible(false);\n }}\n />\n </div>\n </div>\n ),\n },\n ],\n }}\n >\n <Space>\n <span>{date.format('YYYY-MM-DD')}</span>\n <DownOutlined />\n </Space>\n </Dropdown>\n );\n};\n\nexport default App;\n";},"417a22ba":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2f36c889");var o='import React from \'react\';\nimport { Button, Popconfirm, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space>\n <>\n Button\n <Button>Button</Button>\n </>\n Button\n <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">\n <Button>Delete</Button>\n </Popconfirm>\n <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">\n <Button disabled>Delete</Button>\n </Popconfirm>\n {null}\n {false}\n {1}\n Button\n {null}\n {undefined}\n </Space>\n);\n\nexport default App;\n';},"420ff15d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9d71179d");var o="import React from 'react';\nimport type { PaginationProps } from 'antd';\nimport { ConfigProvider, Pagination } from 'antd';\n\nconst itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {\n if (type === 'prev') {\n return <a>Previous</a>;\n }\n if (type === 'next') {\n return <a>Next</a>;\n }\n return originalElement;\n};\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Pagination: {\n itemSize: 20,\n itemSizeSM: 12,\n itemActiveBg: '#e7cc87',\n itemLinkBg: '#344324',\n itemActiveBgDisabled: '#9c1515',\n itemInputBg: '#9c1515',\n miniOptionsSizeChangerTop: 0,\n itemBg: '#b5f5ec',\n },\n },\n }}\n >\n <Pagination\n showSizeChanger\n defaultCurrent={3}\n total={500}\n itemRender={itemRender}\n showQuickJumper\n showTotal={(total) => `Total ${total} items`}\n />\n <br />\n <Pagination showSizeChanger defaultCurrent={3} total={500} disabled />\n </ConfigProvider>\n);\n\nexport default App;\n";},"427609ea":function(n,e,t){},"4294da5e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dcfa992d");var o="import React from 'react';\nimport { Pagination } from 'antd';\n\nconst App: React.FC = () => <Pagination defaultCurrent={6} total={500} />;\n\nexport default App;\n";},"4317b8e2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b79fdc3a");var o="import React, { useState } from 'react';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => {\n const [value, setValue] = useState<string | number>('Map');\n\n return <Segmented options={['Map', 'Transit', 'Satellite']} value={value} onChange={setValue} />;\n};\n\nexport default Demo;\n";},"43425e76":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7f31ebab");var o="import React from 'react';\nimport { Input, QRCode, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [text, setText] = React.useState('https://ant.design/');\n\n return (\n <Space direction=\"vertical\" align=\"center\">\n <QRCode value={text || '-'} />\n <Input\n placeholder=\"-\"\n maxLength={60}\n value={text}\n onChange={(e) => setText(e.target.value)}\n />\n </Space>\n );\n};\n\nexport default App;\n";},"435dae7e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("44596df2");var o="import React from 'react';\nimport { Carousel } from 'antd';\n\nconst contentStyle: React.CSSProperties = {\n height: '160px',\n color: '#fff',\n lineHeight: '160px',\n textAlign: 'center',\n background: '#364d79',\n};\n\nconst App: React.FC = () => (\n <Carousel autoplay={{ dotDuration: true }} autoplaySpeed={5000}>\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n);\n\nexport default App;\n";},"437530d4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1a54da1c");var o='import React from \'react\';\nimport { Button, Popover, Space } from \'antd\';\n\nconst content = (\n <div>\n <p>Content</p>\n <p>Content</p>\n </div>\n);\n\nconst App: React.FC = () => (\n <Space wrap>\n <Popover content={content} title="Title" trigger="hover">\n <Button>Hover me</Button>\n </Popover>\n <Popover content={content} title="Title" trigger="focus">\n <Button>Focus me</Button>\n </Popover>\n <Popover content={content} title="Title" trigger="click">\n <Button>Click me</Button>\n </Popover>\n </Space>\n);\n\nexport default App;\n';},"437b09ed":function(n,e,t){},"43b1a101":function(n,e,t){},"43b8b82b":function(n,e,t){},"43f5e917":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2b1266c5");var o='import React from \'react\';\nimport { Alert, Button, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Alert\n message="Success Tips"\n type="success"\n showIcon\n action={\n <Button size="small" type="text">\n UNDO\n </Button>\n }\n closable\n />\n <br />\n <Alert\n message="Error Text"\n showIcon\n description="Error Description Error Description Error Description Error Description"\n type="error"\n action={\n <Button size="small" danger>\n Detail\n </Button>\n }\n />\n <br />\n <Alert\n message="Warning Text"\n type="warning"\n action={\n <Space>\n <Button type="text" size="small">\n Done\n </Button>\n </Space>\n }\n closable\n />\n <br />\n <Alert\n message="Info Text"\n description="Info Description Info Description Info Description Info Description"\n type="info"\n action={\n <Space direction="vertical">\n <Button size="small" type="primary">\n Accept\n </Button>\n <Button size="small" danger ghost>\n Decline\n </Button>\n </Space>\n }\n closable\n />\n </>\n);\n\nexport default App;\n';},"4410eb77":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fdb7d440");var o="import React from 'react';\nimport { ConfigProvider, Skeleton } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Skeleton: {\n blockRadius: 30,\n titleHeight: 50,\n gradientFromColor: '#222',\n gradientToColor: '#444',\n paragraphMarginTop: 30,\n paragraphLiHeight: 30,\n },\n },\n }}\n >\n <Skeleton loading active />\n </ConfigProvider>\n);\n\nexport default App;\n";},"442e37f6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("83def3bd");var o='import React from \'react\';\nimport { ClockCircleOutlined } from \'@ant-design/icons\';\nimport { Avatar, Badge, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space size="middle">\n <Badge count={5}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={0} showZero>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={<ClockCircleOutlined style={{ color: \'#f5222d\' }} />}>\n <Avatar shape="square" size="large" />\n </Badge>\n </Space>\n);\n\nexport default App;\n';},"44399c00":function(n,e,t){},"44596df2":function(n,e,t){},"44756fa8":function(n,e,t){},"4485d53d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3bcd98ef");var o="import React, { useState } from 'react';\nimport type { TableColumnsType, TableProps } from 'antd';\nimport { Button, Space, Table } from 'antd';\n\ntype OnChange = NonNullable<TableProps<DataType>['onChange']>;\ntype Filters = Parameters<OnChange>[1];\n\ntype GetSingle<T> = T extends (infer U)[] ? U : never;\ntype Sorts = GetSingle<Parameters<OnChange>[2]>;\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n address: string;\n}\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n];\n\nconst App: React.FC = () => {\n const [filteredInfo, setFilteredInfo] = useState<Filters>({});\n const [sortedInfo, setSortedInfo] = useState<Sorts>({});\n\n const handleChange: OnChange = (pagination, filters, sorter) => {\n console.log('Various parameters', pagination, filters, sorter);\n setFilteredInfo(filters);\n setSortedInfo(sorter as Sorts);\n };\n\n const clearFilters = () => {\n setFilteredInfo({});\n };\n\n const clearAll = () => {\n setFilteredInfo({});\n setSortedInfo({});\n };\n\n const setAgeSort = () => {\n setSortedInfo({\n order: 'descend',\n columnKey: 'age',\n });\n };\n\n const columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n filters: [\n { text: 'Joe', value: 'Joe' },\n { text: 'Jim', value: 'Jim' },\n ],\n filteredValue: filteredInfo.name || null,\n onFilter: (value, record) => record.name.includes(value as string),\n sorter: (a, b) => a.name.length - b.name.length,\n sortOrder: sortedInfo.columnKey === 'name' ? sortedInfo.order : null,\n ellipsis: true,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n sorter: (a, b) => a.age - b.age,\n sortOrder: sortedInfo.columnKey === 'age' ? sortedInfo.order : null,\n ellipsis: true,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n filters: [\n { text: 'London', value: 'London' },\n { text: 'New York', value: 'New York' },\n ],\n filteredValue: filteredInfo.address || null,\n onFilter: (value, record) => record.address.includes(value as string),\n sorter: (a, b) => a.address.length - b.address.length,\n sortOrder: sortedInfo.columnKey === 'address' ? sortedInfo.order : null,\n ellipsis: true,\n },\n ];\n\n return (\n <>\n <Space style={{ marginBottom: 16 }}>\n <Button onClick={setAgeSort}>Sort age</Button>\n <Button onClick={clearFilters}>Clear filters</Button>\n <Button onClick={clearAll}>Clear filters and sorters</Button>\n </Space>\n <Table<DataType> columns={columns} dataSource={data} onChange={handleChange} />\n </>\n );\n};\n\nexport default App;\n";},"44af4e74":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c5a59ccf");var o="/* eslint-disable compat/compat */\nimport React, { useState } from 'react';\nimport { Select } from 'antd';\nimport type { SelectProps } from 'antd';\nimport type { AnyObject } from 'antd/es/_util/type';\n\nlet timeout: ReturnType<typeof setTimeout> | null;\nlet currentValue: string;\n\nconst toURLSearchParams = <T extends AnyObject>(record: T) => {\n const params = new URLSearchParams();\n for (const [key, value] of Object.entries(record)) {\n params.append(key, value);\n }\n return params;\n};\n\nconst fetchData = (value: string, callback: (data: { value: string; text: string }[]) => void) => {\n if (timeout) {\n clearTimeout(timeout);\n timeout = null;\n }\n currentValue = value;\n\n const params = toURLSearchParams({ code: 'utf-8', q: value });\n\n const fake = () => {\n fetch(`https://suggest.taobao.com/sug?${params.toString()}`)\n .then((response) => response.json())\n .then(({ result }) => {\n if (currentValue === value) {\n const data = result.map((item: any) => ({ value: item[0], text: item[0] }));\n callback(data);\n }\n });\n };\n if (value) {\n timeout = setTimeout(fake, 300);\n } else {\n callback([]);\n }\n};\n\nconst SearchInput: React.FC<{ placeholder: string; style: React.CSSProperties }> = (props) => {\n const [data, setData] = useState<SelectProps['options']>([]);\n const [value, setValue] = useState<string>();\n\n const handleSearch = (newValue: string) => {\n fetchData(newValue, setData);\n };\n\n const handleChange = (newValue: string) => {\n setValue(newValue);\n };\n\n return (\n <Select\n showSearch\n value={value}\n placeholder={props.placeholder}\n style={props.style}\n defaultActiveFirstOption={false}\n suffixIcon={null}\n filterOption={false}\n onSearch={handleSearch}\n onChange={handleChange}\n notFoundContent={null}\n options={(data || []).map((d) => ({\n value: d.value,\n label: d.text,\n }))}\n />\n );\n};\n\nconst App: React.FC = () => <SearchInput placeholder=\"input search text\" style={{ width: 200 }} />;\n\nexport default App;\n";},"44bde013":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return c;}});var o=t("777fffbe"),a=t("f19d2b93"),r=o._(t("5b220c3d")),i=t("a9d1a279"),l=t("3835a2b7"),s=o._(t("714a8bde")),c=({children:n,theme:e,...t})=>{let{getPrefixCls:o,iconPrefixCls:c}=r.default.use(i.ConfigProvider.ConfigContext),d=o(),{token:u}=i.theme.useToken(),{bannerVisible:p}=r.default.use(s.default);return r.default.useEffect(()=>{i.ConfigProvider.config({theme:e});},[e]),(0,a.jsx)(l.ThemeProvider,{...t,theme:e,customToken:{headerHeight:64,bannerHeight:38,menuItemBorder:2,mobileMaxWidth:767.99,siteMarkdownCodeBg:u.colorFillTertiary,antCls:`.${d}`,iconCls:`.${c}`,marginFarXS:u.marginXXL/6*7,marginFarSM:u.marginXXL/3*5,marginFar:2*u.marginXXL,codeFamily:"'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace",contentMarginTop:40,anchorTop:64+u.margin+(p?38:0)},children:n});};},"450832ea":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("59158189");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport { Tree } from 'antd';\nimport type { TreeDataNode, TreeProps } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 1',\n key: '0-0',\n children: [\n {\n title: 'parent 1-0',\n key: '0-0-0',\n children: [\n {\n title: 'leaf',\n key: '0-0-0-0',\n },\n {\n title: 'leaf',\n key: '0-0-0-1',\n },\n {\n title: 'leaf',\n key: '0-0-0-2',\n },\n ],\n },\n {\n title: 'parent 1-1',\n key: '0-0-1',\n children: [\n {\n title: 'leaf',\n key: '0-0-1-0',\n },\n ],\n },\n {\n title: 'parent 1-2',\n key: '0-0-2',\n children: [\n {\n title: 'leaf',\n key: '0-0-2-0',\n },\n {\n title: 'leaf',\n key: '0-0-2-1',\n },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {\n console.log('selected', selectedKeys, info);\n };\n\n return (\n <Tree\n showLine\n switcherIcon={<DownOutlined />}\n defaultExpandedKeys={['0-0-0']}\n onSelect={onSelect}\n treeData={treeData}\n />\n );\n};\n\nexport default App;\n";},"4521625b":function(n,e,t){},"4528d28d":function(n,e,t){},"45555f38":function(n,e,t){},"4584056c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("84e3b8d2");var o='import React from \'react\';\nimport { Card } from \'antd\';\n\nconst App: React.FC = () => (\n <Card title="Card title">\n <Card type="inner" title="Inner Card title" extra={<a href="#">More</a>}>\n Inner Card content\n </Card>\n <Card\n style={{ marginTop: 16 }}\n type="inner"\n title="Inner Card title"\n extra={<a href="#">More</a>}\n >\n Inner Card content\n </Card>\n </Card>\n);\n\nexport default App;\n';},"4588c86c":function(n,e,t){},"4589b50a":function(n,e,t){},"45a0b748":function(n,e,t){},"45bbf5ce":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("97f30088");var o="import React from 'react';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\n\nconst 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`;\n\nconst items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header with arrow icon',\n children: <p>{text}</p>,\n },\n {\n key: '2',\n label: 'This is panel header with no arrow icon',\n children: <p>{text}</p>,\n showArrow: false,\n },\n];\n\nconst App: React.FC = () => {\n const onChange = (key: string | string[]) => {\n console.log(key);\n };\n\n return <Collapse defaultActiveKey={['1']} onChange={onChange} items={items} />;\n};\n\nexport default App;\n";},"463065d4":function(n,e,t){},"4643e445":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2f465293");var o="import React from 'react';\nimport type { FormProps } from 'antd';\nimport { Button, DatePicker, Form } from 'antd';\nimport dayjs from 'dayjs';\n\nconst dateTimestamp = dayjs('2024-01-01').valueOf();\n\ntype FieldType = {\n date?: string;\n};\n\nconst onFinish: FormProps<FieldType>['onFinish'] = (values) => {\n console.log('Success:', values);\n};\n\nconst App: React.FC = () => (\n <Form\n name=\"getValueProps\"\n labelCol={{ span: 8 }}\n wrapperCol={{ span: 16 }}\n style={{ maxWidth: 600 }}\n initialValues={{ date: dateTimestamp }}\n onFinish={onFinish}\n autoComplete=\"off\"\n >\n <Form.Item<FieldType>\n label=\"Date\"\n name=\"date\"\n rules={[{ required: true }]}\n getValueProps={(value) => ({ value: value && dayjs(Number(value)) })}\n normalize={(value) => value && `${dayjs(value).valueOf()}`}\n >\n <DatePicker />\n </Form.Item>\n\n <Form.Item label={null}>\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n";},"46eeba52":function(n,e,t){},"471a033c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dfe66250");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent } from 'antd';\nimport { Radio, Space, Tabs } from 'antd';\n\ntype TabPosition = 'left' | 'right' | 'top' | 'bottom';\n\nconst App: React.FC = () => {\n const [tabPosition, setTabPosition] = useState<TabPosition>('left');\n\n const changeTabPosition = (e: RadioChangeEvent) => {\n setTabPosition(e.target.value);\n };\n\n return (\n <>\n <Space style={{ marginBottom: 24 }}>\n Tab position:\n <Radio.Group value={tabPosition} onChange={changeTabPosition}>\n <Radio.Button value=\"top\">top</Radio.Button>\n <Radio.Button value=\"bottom\">bottom</Radio.Button>\n <Radio.Button value=\"left\">left</Radio.Button>\n <Radio.Button value=\"right\">right</Radio.Button>\n </Radio.Group>\n </Space>\n <Tabs\n tabPosition={tabPosition}\n items={Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab ${id}`,\n key: id,\n children: `Content of Tab ${id}`,\n };\n })}\n />\n </>\n );\n};\n\nexport default App;\n";},"476bfb5f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7be31577");var o='import React from \'react\';\nimport { Image } from \'antd\';\n\nconst App: React.FC = () => (\n <Image\n width={200}\n preview={{\n destroyOnHidden: true,\n imageRender: () => (\n <video\n muted\n width="100%"\n controls\n src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/file/A*uYT7SZwhJnUAAAAAAAAAAAAADgCCAQ"\n />\n ),\n toolbarRender: () => null,\n }}\n src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"\n />\n);\n\nexport default App;\n';},"479180ec":function(n,e,t){},"4806efc2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("85a63b01");var o='import React, { useState } from \'react\';\nimport { Button, Form, Input, Radio } from \'antd\';\n\ntype LayoutType = Parameters<typeof Form>[0][\'layout\'];\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const [formLayout, setFormLayout] = useState<LayoutType>(\'horizontal\');\n\n const onFormLayoutChange = ({ layout }: { layout: LayoutType }) => {\n setFormLayout(layout);\n };\n\n return (\n <Form\n layout={formLayout}\n form={form}\n initialValues={{ layout: formLayout }}\n onValuesChange={onFormLayoutChange}\n style={{ maxWidth: formLayout === \'inline\' ? \'none\' : 600 }}\n >\n <Form.Item label="Form Layout" name="layout">\n <Radio.Group value={formLayout}>\n <Radio.Button value="horizontal">Horizontal</Radio.Button>\n <Radio.Button value="vertical">Vertical</Radio.Button>\n <Radio.Button value="inline">Inline</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label="Field A">\n <Input placeholder="input placeholder" />\n </Form.Item>\n <Form.Item label="Field B">\n <Input placeholder="input placeholder" />\n </Form.Item>\n <Form.Item>\n <Button type="primary">Submit</Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},48147498:function(n,e,t){},"48eac933":function(n,e,t){},49109685:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("517b3e4a");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'Category 1',\n value: 'Category 1',\n children: [\n {\n text: 'Yellow',\n value: 'Yellow',\n },\n {\n text: 'Pink',\n value: 'Pink',\n },\n ],\n },\n {\n text: 'Category 2',\n value: 'Category 2',\n children: [\n {\n text: 'Green',\n value: 'Green',\n },\n {\n text: 'Black',\n value: 'Black',\n },\n ],\n },\n ],\n filterMode: 'tree',\n filterSearch: true,\n onFilter: (value, record) => record.name.includes(value as string),\n width: '30%',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n filters: [\n {\n text: 'London',\n value: 'London',\n },\n {\n text: 'New York',\n value: 'New York',\n },\n ],\n onFilter: (value, record) => record.address.startsWith(value as string),\n filterSearch: true,\n width: '40%',\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n];\n\nconst onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {\n console.log('params', pagination, filters, sorter, extra);\n};\n\nconst App: React.FC = () => (\n <Table<DataType> columns={columns} dataSource={data} onChange={onChange} />\n);\n\nexport default App;\n";},"493398f3":function(n,e,t){},"49583d6b":function(n,e,t){},"49584aba":function(n,e,t){},"4987b30f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("76264deb");var o='import React, { useEffect, useRef, useState } from \'react\';\nimport { SmileOutlined, UserOutlined } from \'@ant-design/icons\';\nimport { Avatar, Button, Flex, Form, Input, InputNumber, Modal, Space, Typography } from \'antd\';\nimport type { GetRef } from \'antd\';\n\ntype FormInstance = GetRef<typeof Form>;\n\nconst layout = {\n labelCol: { span: 8 },\n wrapperCol: { span: 16 },\n};\n\nconst tailLayout = {\n wrapperCol: { offset: 8, span: 16 },\n};\n\ninterface UserType {\n name: string;\n age: string;\n}\n\ninterface ModalFormProps {\n open: boolean;\n onCancel: () => void;\n}\n\n// reset form fields when modal is form, closed\nconst useResetFormOnCloseModal = ({ form, open }: { form: FormInstance; open: boolean }) => {\n const prevOpenRef = useRef<boolean>(null);\n useEffect(() => {\n prevOpenRef.current = open;\n }, [open]);\n const prevOpen = prevOpenRef.current;\n\n useEffect(() => {\n if (!open && prevOpen) {\n form.resetFields();\n }\n }, [form, prevOpen, open]);\n};\n\nconst ModalForm: React.FC<ModalFormProps> = ({ open, onCancel }) => {\n const [form] = Form.useForm();\n\n useResetFormOnCloseModal({\n form,\n open,\n });\n\n const onOk = () => {\n form.submit();\n };\n\n return (\n <Modal title="Basic Drawer" open={open} onOk={onOk} onCancel={onCancel}>\n <Form form={form} layout="vertical" name="userForm">\n <Form.Item name="name" label="User Name" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item name="age" label="User Age" rules={[{ required: true }]}>\n <InputNumber />\n </Form.Item>\n </Form>\n </Modal>\n );\n};\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const showUserModal = () => {\n setOpen(true);\n };\n\n const hideUserModal = () => {\n setOpen(false);\n };\n\n const onFinish = (values: any) => {\n console.log(\'Finish:\', values);\n };\n\n return (\n <Form.Provider\n onFormFinish={(name, { values, forms }) => {\n if (name === \'userForm\') {\n const { basicForm } = forms;\n const users = basicForm.getFieldValue(\'users\') || [];\n basicForm.setFieldsValue({ users: [...users, values] });\n setOpen(false);\n }\n }}\n >\n <Form {...layout} name="basicForm" onFinish={onFinish} style={{ maxWidth: 600 }}>\n <Form.Item name="group" label="Group Name" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n\n {/* Create a hidden field to make Form instance record this */}\n <Form.Item name="users" noStyle />\n\n <Form.Item\n label="User List"\n shouldUpdate={(prevValues, curValues) => prevValues.users !== curValues.users}\n >\n {({ getFieldValue }) => {\n const users: UserType[] = getFieldValue(\'users\') || [];\n return users.length ? (\n <Flex vertical gap={8}>\n {users.map((user) => (\n <Space key={user.name}>\n <Avatar icon={<UserOutlined />} />\n {`${user.name} - ${user.age}`}\n </Space>\n ))}\n </Flex>\n ) : (\n <Typography.Text className="ant-form-text" type="secondary">\n ( <SmileOutlined /> No user yet. )\n </Typography.Text>\n );\n }}\n </Form.Item>\n <Form.Item {...tailLayout}>\n <Button htmlType="submit" type="primary">\n Submit\n </Button>\n <Button htmlType="button" style={{ margin: \'0 8px\' }} onClick={showUserModal}>\n Add User\n </Button>\n </Form.Item>\n </Form>\n\n <ModalForm open={open} onCancel={hideUserModal} />\n </Form.Provider>\n );\n};\n\nexport default App;\n';},"49d201b3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5465ea26");var o="import React from 'react';\nimport { ConfigProvider, Steps } from 'antd';\n\nconst description = 'This is a description.';\nconst App: React.FC = () => (\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <Steps\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n subTitle: 'Left 00:00:08',\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n </ConfigProvider>\n);\n\nexport default App;\n";},"4a543eae":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f169af7a");var o="import React from 'react';\nimport { DatePicker, Space, Typography } from 'antd';\nimport type { DatePickerProps } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\nconst { RangePicker } = DatePicker;\n\nconst getYearMonth = (date: Dayjs) => date.year() * 12 + date.month();\n\n// Disabled 7 days from the selected date\nconst disabled7DaysDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {\n if (from) {\n const minDate = from.add(-6, 'days');\n const maxDate = from.add(6, 'days');\n\n switch (type) {\n case 'year':\n return current.year() < minDate.year() || current.year() > maxDate.year();\n\n case 'month':\n return (\n getYearMonth(current) < getYearMonth(minDate) ||\n getYearMonth(current) > getYearMonth(maxDate)\n );\n\n default:\n return Math.abs(current.diff(from, 'days')) >= 7;\n }\n }\n\n return false;\n};\n\n// Disabled 6 months from the selected date\nconst disabled6MonthsDate: DatePickerProps['disabledDate'] = (current, { from, type }) => {\n if (from) {\n const minDate = from.add(-5, 'months');\n const maxDate = from.add(5, 'months');\n\n switch (type) {\n case 'year':\n return current.year() < minDate.year() || current.year() > maxDate.year();\n\n default:\n return (\n getYearMonth(current) < getYearMonth(minDate) ||\n getYearMonth(current) > getYearMonth(maxDate)\n );\n }\n }\n\n return false;\n};\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\">\n <Typography.Title level={5}>7 days range</Typography.Title>\n <RangePicker disabledDate={disabled7DaysDate} />\n\n <Typography.Title level={5}>6 months range</Typography.Title>\n <RangePicker disabledDate={disabled6MonthsDate} picker=\"month\" />\n </Space>\n);\n\nexport default App;\n";},"4a550284":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("22555d97");var o="import React from 'react';\nimport { Typography } from 'antd';\n\nconst { Text } = Typography;\n\nconst EllipsisMiddle: React.FC<{ suffixCount: number; children: string }> = ({\n suffixCount,\n children,\n}) => {\n const start = children.slice(0, children.length - suffixCount);\n const suffix = children.slice(-suffixCount).trim();\n return (\n <Text style={{ maxWidth: '100%' }} ellipsis={{ suffix }}>\n {start}\n </Text>\n );\n};\n\nconst App: React.FC = () => (\n <EllipsisMiddle suffixCount={12}>\n In the process of internal desktop applications development, many different design specs and\n implementations would be involved, which might cause designers and developers difficulties and\n duplication and reduce the efficiency of development.\n </EllipsisMiddle>\n);\n\nexport default App;\n";},"4a566940":function(n,e,t){},"4a805458":function(n,e,t){},"4adbe695":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f90dca02");var o="import React from 'react';\nimport { Button, DatePicker, Form, TimePicker } from 'antd';\n\nconst { RangePicker } = DatePicker;\n\nconst formItemLayout = {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 8 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 16 },\n },\n};\n\nconst config = {\n rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],\n};\n\nconst rangeConfig = {\n rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],\n};\n\nconst onFinish = (fieldsValue: any) => {\n // Should format date value before submit.\n const rangeValue = fieldsValue['range-picker'];\n const rangeTimeValue = fieldsValue['range-time-picker'];\n const values = {\n ...fieldsValue,\n 'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),\n 'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),\n 'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),\n 'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],\n 'range-time-picker': [\n rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),\n rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),\n ],\n 'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),\n };\n console.log('Received values of form: ', values);\n};\n\nconst App: React.FC = () => (\n <Form\n name=\"time_related_controls\"\n {...formItemLayout}\n onFinish={onFinish}\n style={{ maxWidth: 600 }}\n >\n <Form.Item name=\"date-picker\" label=\"DatePicker\" {...config}>\n <DatePicker />\n </Form.Item>\n <Form.Item name=\"date-time-picker\" label=\"DatePicker[showTime]\" {...config}>\n <DatePicker showTime format=\"YYYY-MM-DD HH:mm:ss\" />\n </Form.Item>\n <Form.Item name=\"month-picker\" label=\"MonthPicker\" {...config}>\n <DatePicker picker=\"month\" />\n </Form.Item>\n <Form.Item name=\"range-picker\" label=\"RangePicker\" {...rangeConfig}>\n <RangePicker />\n </Form.Item>\n <Form.Item name=\"range-time-picker\" label=\"RangePicker[showTime]\" {...rangeConfig}>\n <RangePicker showTime format=\"YYYY-MM-DD HH:mm:ss\" />\n </Form.Item>\n <Form.Item name=\"time-picker\" label=\"TimePicker\" {...config}>\n <TimePicker />\n </Form.Item>\n <Form.Item label={null}>\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n";},"4b046a2c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b8a4c676");var o="import React, { useRef, useState } from 'react';\nimport { Button, Col, Row, Slider, Space, Tour, Typography } from 'antd';\nimport type { TourProps } from 'antd';\n\nconst { Text } = Typography;\n\nconst App: React.FC = () => {\n const tourNodeRef = useRef(null);\n const [radius, setRadius] = useState(8);\n const [offsetX, setOffsetX] = useState(2);\n const [offsetY, setOffsetY] = useState(2);\n const [offset, setOffset] = useState(2);\n const [open, setOpen] = useState(false);\n const [offsetDirection, setOffsetDirection] = useState<'both' | 'individual'>('individual');\n\n const steps: TourProps['steps'] = [\n {\n title: 'Upload File',\n description: 'Put your files here.',\n cover: (\n <img\n alt=\"tour.png\"\n src=\"https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png\"\n />\n ),\n target: () => tourNodeRef.current,\n },\n ];\n\n const offsetGap =\n offsetDirection === 'both'\n ? { offset }\n : {\n offset: [offsetX, offsetY] as [number, number],\n };\n return (\n <div ref={tourNodeRef}>\n <Button type=\"primary\" onClick={() => setOpen(true)}>\n Begin Tour\n </Button>\n <Space style={{ display: 'flex', marginTop: 12 }} direction=\"vertical\">\n <Row>\n <Col span={6}>\n <Text>Radius:</Text>\n </Col>\n <Col span={12}>\n <Slider value={radius} onChange={(val) => val && setRadius(val)} />\n </Col>\n </Row>\n <Row>\n <Col span={6}>\n <Text> offset:</Text>\n </Col>\n <Col span={12}>\n <Slider\n value={offset}\n max={50}\n onChange={(val) => val && setOffset(val)}\n onFocus={() => setOffsetDirection('both')}\n />\n </Col>\n </Row>\n <Row>\n <Col span={6}>\n <Text>Horizontal offset:</Text>\n </Col>\n <Col span={12}>\n <Slider\n value={offsetX}\n max={50}\n onChange={(val) => val && setOffsetX(val)}\n onFocus={() => setOffsetDirection('individual')}\n />\n </Col>\n </Row>\n <Row>\n <Col span={6}>\n <Text>Vertical offset:</Text>\n </Col>\n <Col span={12}>\n <Slider\n value={offsetY}\n max={50}\n onChange={(val) => val && setOffsetY(val)}\n onFocus={() => setOffsetDirection('individual')}\n />\n </Col>\n </Row>\n </Space>\n <Tour\n open={open}\n onClose={() => setOpen(false)}\n steps={steps}\n gap={{ ...offsetGap, radius }}\n />\n </div>\n );\n};\n\nexport default App;\n";},"4b0e807c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("73f951cb");var o='import React, { useEffect, useState } from \'react\';\nimport { LockOutlined, UserOutlined } from \'@ant-design/icons\';\nimport { Button, Form, Input } from \'antd\';\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const [clientReady, setClientReady] = useState<boolean>(false);\n\n // To disable submit button at the beginning.\n useEffect(() => {\n setClientReady(true);\n }, []);\n\n const onFinish = (values: any) => {\n console.log(\'Finish:\', values);\n };\n\n return (\n <Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>\n <Form.Item\n name="username"\n rules={[{ required: true, message: \'Please input your username!\' }]}\n >\n <Input prefix={<UserOutlined />} placeholder="Username" />\n </Form.Item>\n <Form.Item\n name="password"\n rules={[{ required: true, message: \'Please input your password!\' }]}\n >\n <Input prefix={<LockOutlined />} type="password" placeholder="Password" />\n </Form.Item>\n <Form.Item shouldUpdate>\n {() => (\n <Button\n type="primary"\n htmlType="submit"\n disabled={\n !clientReady ||\n !form.isFieldsTouched(true) ||\n !!form.getFieldsError().filter(({ errors }) => errors.length).length\n }\n >\n Log in\n </Button>\n )}\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"4b2fdeab":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("04f96b6a");var o='import React from \'react\';\nimport { UserOutlined } from \'@ant-design/icons\';\nimport { Avatar, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical" size={16}>\n <Space wrap size={16}>\n <Avatar size={64} icon={<UserOutlined />} />\n <Avatar size="large" icon={<UserOutlined />} />\n <Avatar icon={<UserOutlined />} />\n <Avatar size="small" icon={<UserOutlined />} />\n <Avatar size={14} icon={<UserOutlined />} />\n </Space>\n <Space wrap size={16}>\n <Avatar shape="square" size={64} icon={<UserOutlined />} />\n <Avatar shape="square" size="large" icon={<UserOutlined />} />\n <Avatar shape="square" icon={<UserOutlined />} />\n <Avatar shape="square" size="small" icon={<UserOutlined />} />\n <Avatar shape="square" size={14} icon={<UserOutlined />} />\n </Space>\n </Space>\n);\n\nexport default App;\n';},"4b8760ba":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5a87a731");var o='import React from \'react\';\nimport type { DatePickerProps } from \'antd\';\nimport { DatePicker, Space } from \'antd\';\n\nconst onChange: DatePickerProps[\'onChange\'] = (date, dateString) => {\n console.log(date, dateString);\n};\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <DatePicker onChange={onChange} />\n <DatePicker onChange={onChange} picker="week" />\n <DatePicker onChange={onChange} picker="month" />\n <DatePicker onChange={onChange} picker="quarter" />\n <DatePicker onChange={onChange} picker="year" />\n </Space>\n);\n\nexport default App;\n';},"4bb51a32":function(n,e,t){},"4be62777":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("49584aba");var o="import React, { useState } from 'react';\nimport { Divider, Radio, Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n render: (text: string) => <a>{text}</a>,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Disabled User',\n age: 99,\n address: 'Sydney No. 1 Lake Park',\n },\n];\n\n// rowSelection object indicates the need for row selection\nconst rowSelection: TableProps<DataType>['rowSelection'] = {\n onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {\n console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\n },\n getCheckboxProps: (record: DataType) => ({\n disabled: record.name === 'Disabled User', // Column configuration not to be checked\n name: record.name,\n }),\n};\n\nconst App: React.FC = () => {\n const [selectionType, setSelectionType] = useState<'checkbox' | 'radio'>('checkbox');\n\n return (\n <div>\n <Radio.Group onChange={(e) => setSelectionType(e.target.value)} value={selectionType}>\n <Radio value=\"checkbox\">Checkbox</Radio>\n <Radio value=\"radio\">radio</Radio>\n </Radio.Group>\n <Divider />\n <Table<DataType>\n rowSelection={{ type: selectionType, ...rowSelection }}\n columns={columns}\n dataSource={data}\n />\n </div>\n );\n};\n\nexport default App;\n";},"4be88db5":function(n,e,t){},"4beb3c40":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5255c953");var o="import React, { useState } from 'react';\nimport { AutoComplete } from 'antd';\nimport type { AutoCompleteProps } from 'antd';\n\nconst mockVal = (str: string, repeat = 1) => ({\n value: str.repeat(repeat),\n});\n\nconst App: React.FC = () => {\n const [value, setValue] = useState('');\n const [options, setOptions] = useState<AutoCompleteProps['options']>([]);\n const [anotherOptions, setAnotherOptions] = useState<AutoCompleteProps['options']>([]);\n\n const getPanelValue = (searchText: string) =>\n !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];\n\n const onSelect = (data: string) => {\n console.log('onSelect', data);\n };\n\n const onChange = (data: string) => {\n setValue(data);\n };\n\n return (\n <>\n <AutoComplete\n options={options}\n style={{ width: 200 }}\n onSelect={onSelect}\n onSearch={(text) => setOptions(getPanelValue(text))}\n placeholder=\"input here\"\n />\n <br />\n <br />\n <AutoComplete\n value={value}\n options={anotherOptions}\n style={{ width: 200 }}\n onSelect={onSelect}\n onSearch={(text) => setAnotherOptions(getPanelValue(text))}\n onChange={onChange}\n placeholder=\"control mode\"\n />\n </>\n );\n};\n\nexport default App;\n";},"4c05f73d":function(n,e,t){},"4c20f7c8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d2ee8272");var o="import React from 'react';\nimport { Affix, Button } from 'antd';\n\nconst App: React.FC = () => {\n const [top, setTop] = React.useState<number>(100);\n const [bottom, setBottom] = React.useState<number>(100);\n return (\n <>\n <Affix offsetTop={top}>\n <Button type=\"primary\" onClick={() => setTop(top + 10)}>\n Affix top\n </Button>\n </Affix>\n <br />\n <Affix offsetBottom={bottom}>\n <Button type=\"primary\" onClick={() => setBottom(bottom + 10)}>\n Affix bottom\n </Button>\n </Affix>\n </>\n );\n};\n\nexport default App;\n";},"4c357030":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6dea8bb1");var o="import React from 'react';\nimport { UserOutlined } from '@ant-design/icons';\nimport { Avatar, Badge, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space size={24}>\n <Badge count={1}>\n <Avatar shape=\"square\" icon={<UserOutlined />} />\n </Badge>\n <Badge dot>\n <Avatar shape=\"square\" icon={<UserOutlined />} />\n </Badge>\n </Space>\n);\n\nexport default App;\n";},"4c9d9dd5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("11d31c87");var o="import React, { useState } from 'react';\nimport { Select, Space } from 'antd';\n\nconst cityData = {\n Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],\n Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],\n};\n\ntype CityName = keyof typeof cityData;\n\nconst provinceData: CityName[] = ['Zhejiang', 'Jiangsu'];\n\nconst App: React.FC = () => {\n const [cities, setCities] = useState(cityData[provinceData[0] as CityName]);\n const [secondCity, setSecondCity] = useState(cityData[provinceData[0]][0] as CityName);\n\n const handleProvinceChange = (value: CityName) => {\n setCities(cityData[value]);\n setSecondCity(cityData[value][0] as CityName);\n };\n\n const onSecondCityChange = (value: CityName) => {\n setSecondCity(value);\n };\n\n return (\n <Space wrap>\n <Select\n defaultValue={provinceData[0]}\n style={{ width: 120 }}\n onChange={handleProvinceChange}\n options={provinceData.map((province) => ({ label: province, value: province }))}\n />\n <Select\n style={{ width: 120 }}\n value={secondCity}\n onChange={onSecondCityChange}\n options={cities.map((city) => ({ label: city, value: city }))}\n />\n </Space>\n );\n};\n\nexport default App;\n";},"4ca9feaf":function(n,e,t){},"4cbdcdd7":function(n,e,t){},"4cbdfcf4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7e2cc86d");var o="import React from 'react';\nimport { Pagination } from 'antd';\n\nconst App: React.FC = () => (\n <Pagination\n total={85}\n showSizeChanger\n showQuickJumper\n showTotal={(total) => `Total ${total} items`}\n />\n);\n\nexport default App;\n";},"4cc29ff5":function(n,e,t){},"4ccd0c13":function(n,e,t){},"4cd328e2":function(n,e,t){},"4cd4ea78":function(n,e,t){},"4ceca6ac":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6fd6fca1");var o='import React from \'react\';\nimport type { MenuProps } from \'antd\';\nimport { Button, Dropdown, Space } from \'antd\';\n\nconst items: MenuProps[\'items\'] = [\n {\n key: \'1\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">\n 1st menu item\n </a>\n ),\n },\n {\n key: \'2\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">\n 2nd menu item\n </a>\n ),\n },\n {\n key: \'3\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">\n 3rd menu item\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Space wrap>\n <Dropdown menu={{ items }} placement="bottomLeft" arrow>\n <Button>bottomLeft</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="bottom" arrow>\n <Button>bottom</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="bottomRight" arrow>\n <Button>bottomRight</Button>\n </Dropdown>\n </Space>\n <Space wrap>\n <Dropdown menu={{ items }} placement="topLeft" arrow>\n <Button>topLeft</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="top" arrow>\n <Button>top</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="topRight" arrow>\n <Button>topRight</Button>\n </Dropdown>\n </Space>\n </Space>\n);\n\nexport default App;\n';},"4ceed8eb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9d4034d0");var o="import React from 'react';\nimport type { PaginationProps } from 'antd';\nimport { Pagination } from 'antd';\n\nconst onShowSizeChange: PaginationProps['onShowSizeChange'] = (current, pageSize) => {\n console.log(current, pageSize);\n};\n\nconst App: React.FC = () => (\n <>\n <Pagination\n showSizeChanger\n onShowSizeChange={onShowSizeChange}\n defaultCurrent={3}\n total={500}\n />\n <br />\n <Pagination\n showSizeChanger\n onShowSizeChange={onShowSizeChange}\n defaultCurrent={3}\n total={500}\n disabled\n />\n </>\n);\n\nexport default App;\n";},"4d023ff8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dff62091");var o='import React from \'react\';\nimport { Col, Divider, Row } from \'antd\';\n\nconst style: React.CSSProperties = { background: \'#0092ff\', padding: \'8px 0\' };\n\nconst App: React.FC = () => (\n <>\n <Divider orientation="left">Horizontal</Divider>\n <Row gutter={16}>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n </Row>\n <Divider orientation="left">Responsive</Divider>\n <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n </Row>\n <Divider orientation="left">Vertical</Divider>\n <Row gutter={[16, 24]}>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n <Col className="gutter-row" span={6}>\n <div style={style}>col-6</div>\n </Col>\n </Row>\n </>\n);\n\nexport default App;\n';},"4d0950ba":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dc81ea04");var o="import React from 'react';\nimport { generate, green, presetPalettes, red } from '@ant-design/colors';\nimport { ColorPicker, theme } from 'antd';\nimport type { ColorPickerProps } from 'antd';\n\ntype Presets = Required<ColorPickerProps>['presets'][number];\n\nfunction genPresets(presets = presetPalettes) {\n return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));\n}\n\nconst Demo: React.FC = () => {\n const { token } = theme.useToken();\n const presets = genPresets({ primary: generate(token.colorPrimary), red, green });\n return <ColorPicker presets={presets} defaultValue=\"#1677ff\" />;\n};\n\nexport default Demo;\n";},"4d717528":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("636fb801");var o="import React, { useState } from 'react';\nimport { Select, Tabs } from 'antd';\n\nconst { Option } = Select;\n\nconst positionList = ['left', 'right', 'top', 'bottom'];\n\nconst App: React.FC = () => {\n const [parentPos, setParentPos] = useState(undefined);\n const [childPos, setChildPos] = useState(undefined);\n const [parentType, setParentType] = useState(undefined);\n const [childType, setChildType] = useState(undefined);\n\n return (\n <div>\n <Select\n style={{ width: 200 }}\n onChange={(val) => {\n setParentPos(val);\n }}\n >\n {positionList.map((pos) => (\n <Option key={pos} value={pos}>\n Parent - {pos}\n </Option>\n ))}\n </Select>\n\n <Select\n style={{ width: 200 }}\n onChange={(val) => {\n setChildPos(val);\n }}\n >\n {positionList.map((pos) => (\n <Option key={pos} value={pos}>\n Child - {pos}\n </Option>\n ))}\n </Select>\n\n <Select\n style={{ width: 200 }}\n onChange={(val) => {\n setParentType(val);\n }}\n >\n <Option value=\"line\">Parent - line</Option>\n <Option value=\"card\">Parent - card</Option>\n <Option value=\"editable-card\">Parent - card edit</Option>\n </Select>\n\n <Select\n style={{ width: 200 }}\n onChange={(val) => {\n setChildType(val);\n }}\n >\n <Option value=\"line\">Child - line</Option>\n <Option value=\"card\">Child - card</Option>\n <Option value=\"editable-card\">Parent - card edit</Option>\n </Select>\n <Tabs\n defaultActiveKey=\"1\"\n tabPosition={parentPos}\n type={parentType}\n items={[\n {\n label: 'Tab 1',\n key: '1',\n children: (\n <Tabs\n defaultActiveKey=\"1\"\n tabPosition={childPos}\n type={childType}\n style={{ height: 300 }}\n items={Array.from({ length: 20 }).map((_, index) => {\n const key = String(index);\n return {\n label: `Tab ${key}`,\n key,\n children: `TTTT ${key}`,\n };\n })}\n />\n ),\n },\n {\n label: 'Tab 2',\n key: '2',\n children: 'Content of Tab Pane 2',\n },\n ]}\n />\n </div>\n );\n};\n\nexport default App;\n";},"4d80e82b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d35c52e0");var o="import React, { useMemo, useRef, useState } from 'react';\nimport { Select, Spin, Avatar } from 'antd';\nimport type { SelectProps } from 'antd';\nimport debounce from 'lodash/debounce';\n\nexport interface DebounceSelectProps<ValueType = any>\n extends Omit<SelectProps<ValueType | ValueType[]>, 'options' | 'children'> {\n fetchOptions: (search: string) => Promise<ValueType[]>;\n debounceTimeout?: number;\n}\n\nfunction DebounceSelect<\n ValueType extends {\n key?: string;\n label: React.ReactNode;\n value: string | number;\n avatar?: string;\n } = any,\n>({ fetchOptions, debounceTimeout = 300, ...props }: DebounceSelectProps<ValueType>) {\n const [fetching, setFetching] = useState(false);\n const [options, setOptions] = useState<ValueType[]>([]);\n const fetchRef = useRef(0);\n\n const debounceFetcher = useMemo(() => {\n const loadOptions = (value: string) => {\n fetchRef.current += 1;\n const fetchId = fetchRef.current;\n setOptions([]);\n setFetching(true);\n\n fetchOptions(value).then((newOptions) => {\n if (fetchId !== fetchRef.current) {\n // for fetch callback order\n return;\n }\n\n setOptions(newOptions);\n setFetching(false);\n });\n };\n\n return debounce(loadOptions, debounceTimeout);\n }, [fetchOptions, debounceTimeout]);\n\n return (\n <Select\n labelInValue\n filterOption={false}\n onSearch={debounceFetcher}\n notFoundContent={fetching ? <Spin size=\"small\" /> : 'No results found'}\n {...props}\n options={options}\n optionRender={(option) => (\n <div style={{ display: 'flex', alignItems: 'center' }}>\n {option.data.avatar && <Avatar src={option.data.avatar} style={{ marginRight: 8 }} />}\n {option.label}\n </div>\n )}\n />\n );\n}\n\n// Usage of DebounceSelect\ninterface UserValue {\n label: string;\n value: string;\n avatar?: string;\n}\n\nasync function fetchUserList(username: string): Promise<UserValue[]> {\n console.log('fetching user', username);\n return fetch(`https://660d2bd96ddfa2943b33731c.mockapi.io/api/users/?search=${username}`)\n .then((res) => res.json())\n .then((res) => {\n const results = Array.isArray(res) ? res : [];\n return results.map((user) => ({\n label: user.name,\n value: user.id,\n avatar: user.avatar,\n }));\n });\n}\n\nconst App: React.FC = () => {\n const [value, setValue] = useState<UserValue[]>([]);\n\n return (\n <DebounceSelect\n mode=\"multiple\"\n value={value}\n placeholder=\"Select users\"\n fetchOptions={fetchUserList}\n style={{ width: '100%' }}\n onChange={(newValue) => {\n if (Array.isArray(newValue)) {\n setValue(newValue);\n }\n }}\n />\n );\n};\n\nexport default App;\n";},"4d948609":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8a146945");var o="import React from 'react';\nimport { App, Button, Space } from 'antd';\n\n// Sub page\nconst MyPage = () => {\n const { message, notification } = App.useApp();\n\n const showMessage = () => {\n message.success('Success!');\n };\n\n const showNotification = () => {\n notification.info({\n message: 'Notification',\n description: 'Hello, Ant Design!!',\n });\n };\n\n return (\n <Space wrap>\n <Button type=\"primary\" onClick={showMessage}>\n Message for only one\n </Button>\n <Button type=\"primary\" onClick={showNotification}>\n Notification for bottomLeft\n </Button>\n </Space>\n );\n};\n\n// Entry component\nexport default () => (\n <App message={{ maxCount: 1 }} notification={{ placement: 'bottomLeft' }}>\n <MyPage />\n </App>\n);\n";},"4dc6bed6":function(n,e,t){},"4e14771f":function(n,e,t){},"4e26b929":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bed1e6a7");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" wrap>\n <Progress type="dashboard" percent={75} />\n <Progress type="dashboard" percent={75} gapDegree={30} />\n </Flex>\n);\n\nexport default App;\n';},"4e49f628":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4a566940");var o="import React, { useState } from 'react';\nimport { Upload } from 'antd';\nimport type { GetProp, UploadFile, UploadProps } from 'antd';\nimport ImgCrop from 'antd-img-crop';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst App: React.FC = () => {\n const [fileList, setFileList] = useState<UploadFile[]>([\n {\n uid: '-1',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n ]);\n\n const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {\n setFileList(newFileList);\n };\n\n const onPreview = async (file: UploadFile) => {\n let src = file.url as string;\n if (!src) {\n src = await new Promise((resolve) => {\n const reader = new FileReader();\n reader.readAsDataURL(file.originFileObj as FileType);\n reader.onload = () => resolve(reader.result as string);\n });\n }\n const image = new Image();\n image.src = src;\n const imgWindow = window.open(src);\n imgWindow?.document.write(image.outerHTML);\n };\n\n return (\n <ImgCrop rotationSlider>\n <Upload\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n listType=\"picture-card\"\n fileList={fileList}\n onChange={onChange}\n onPreview={onPreview}\n >\n {fileList.length < 5 && '+ Upload'}\n </Upload>\n </ImgCrop>\n );\n};\n\nexport default App;\n";},"4e620aaf":function(n,e,t){},"4eaa09de":function(n,e,t){},"4eb44662":function(n,e,t){},"4eebd428":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9c05edf1");var o="import React, { useMemo } from 'react';\nimport {\n RadiusBottomleftOutlined,\n RadiusBottomrightOutlined,\n RadiusUpleftOutlined,\n RadiusUprightOutlined,\n} from '@ant-design/icons';\nimport { Button, Divider, notification, Space } from 'antd';\nimport type { NotificationArgsProps } from 'antd';\n\ntype NotificationPlacement = NotificationArgsProps['placement'];\n\nconst Context = React.createContext({ name: 'Default' });\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotification = (placement: NotificationPlacement) => {\n api.info({\n message: `Notification ${placement}`,\n description: <Context.Consumer>{({ name }) => `Hello, ${name}!`}</Context.Consumer>,\n placement,\n });\n };\n\n const contextValue = useMemo(() => ({ name: 'Ant Design' }), []);\n\n return (\n <Context.Provider value={contextValue}>\n {contextHolder}\n <Space>\n <Button\n type=\"primary\"\n onClick={() => openNotification('topLeft')}\n icon={<RadiusUpleftOutlined />}\n >\n topLeft\n </Button>\n <Button\n type=\"primary\"\n onClick={() => openNotification('topRight')}\n icon={<RadiusUprightOutlined />}\n >\n topRight\n </Button>\n </Space>\n <Divider />\n <Space>\n <Button\n type=\"primary\"\n onClick={() => openNotification('bottomLeft')}\n icon={<RadiusBottomleftOutlined />}\n >\n bottomLeft\n </Button>\n <Button\n type=\"primary\"\n onClick={() => openNotification('bottomRight')}\n icon={<RadiusBottomrightOutlined />}\n >\n bottomRight\n </Button>\n </Space>\n </Context.Provider>\n );\n};\n\nexport default App;\n";},"4eec8e14":function(n,e,t){},"4f1b7c61":function(n,e,t){},"4f2c8108":function(n,e,t){},"4f2cb817":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ae1ee3e7");var o='import React from \'react\';\nimport { Button, Flex, Tooltip } from \'antd\';\n\nconst zeroWidthEle = <div />;\n\nconst App: React.FC = () => (\n <Flex vertical gap={72} align="flex-start">\n <span />\n <Tooltip\n open\n title="Thanks for using antd. Have a nice day !"\n arrow={{ pointAtCenter: true }}\n placement="topLeft"\n >\n <Button>Point at center</Button>\n </Tooltip>\n <Tooltip open title={zeroWidthEle} placement="topLeft">\n <Button>Min Width</Button>\n </Tooltip>\n <Tooltip open title={zeroWidthEle} placement="top">\n <Button>Min Width</Button>\n </Tooltip>\n </Flex>\n);\n\nexport default App;\n';},"5001d5bb":function(n,e,t){},"501e461f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("49583d6b");var o="import React, { useState } from 'react';\nimport { Input } from 'antd';\n\nconst { TextArea } = Input;\n\nconst App: React.FC = () => {\n const [value, setValue] = useState('');\n\n return (\n <>\n <TextArea placeholder=\"Autosize height based on content lines\" autoSize />\n <div style={{ margin: '24px 0' }} />\n <TextArea\n placeholder=\"Autosize height with minimum and maximum number of lines\"\n autoSize={{ minRows: 2, maxRows: 6 }}\n />\n <div style={{ margin: '24px 0' }} />\n <TextArea\n value={value}\n onChange={(e) => setValue(e.target.value)}\n placeholder=\"Controlled autosize\"\n autoSize={{ minRows: 3, maxRows: 5 }}\n />\n </>\n );\n};\n\nexport default App;\n";},"50421c89":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("45a0b748");var o="import React from 'react';\nimport { Avatar, ConfigProvider, Divider, List, Typography } from 'antd';\n\nconst data = [\n 'Racing car sprays burning fuel into crowd.',\n 'Japanese princess to wed commoner.',\n 'Australian walks 100km after outback crash.',\n 'Man charged over missing wedding girl.',\n 'Los Angeles battles huge wildfires.',\n];\n\nconst data1 = [\n {\n title: 'Ant Design Title 1',\n },\n {\n title: 'Ant Design Title 2',\n },\n {\n title: 'Ant Design Title 3',\n },\n {\n title: 'Ant Design Title 4',\n },\n];\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n List: {\n headerBg: 'pink',\n footerBg: 'pink',\n emptyTextPadding: 32,\n itemPadding: '26px',\n itemPaddingSM: '16px',\n itemPaddingLG: '36px',\n metaMarginBottom: 20,\n avatarMarginRight: 20,\n titleMarginBottom: 10,\n descriptionFontSize: 20,\n },\n },\n }}\n >\n <Divider orientation=\"left\">Default Size</Divider>\n <List\n header={<div>Header</div>}\n footer={<div>Footer</div>}\n bordered\n dataSource={data}\n renderItem={(item) => (\n <List.Item>\n <Typography.Text mark>[ITEM]</Typography.Text> {item}\n </List.Item>\n )}\n />\n <Divider orientation=\"left\">Small Size</Divider>\n <List\n size=\"small\"\n header={<div>Header</div>}\n footer={<div>Footer</div>}\n bordered\n dataSource={data}\n renderItem={(item) => <List.Item>{item}</List.Item>}\n />\n <Divider orientation=\"left\">Large Size</Divider>\n <List\n size=\"large\"\n header={<div>Header</div>}\n footer={<div>Footer</div>}\n bordered\n dataSource={data}\n renderItem={(item) => <List.Item>{item}</List.Item>}\n />\n <Divider orientation=\"left\">Meta</Divider>\n <List\n itemLayout=\"horizontal\"\n dataSource={data1}\n renderItem={(item, index) => (\n <List.Item>\n <List.Item.Meta\n avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}\n title={<a href=\"https://ant.design\">{item.title}</a>}\n description=\"Ant Design, a design language for background applications, is refined by Ant UED Team\"\n />\n </List.Item>\n )}\n />\n <Divider orientation=\"left\">Vertical</Divider>\n <List\n itemLayout=\"vertical\"\n dataSource={data1}\n renderItem={(item, index) => (\n <List.Item>\n <List.Item.Meta\n avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}\n title={<a href=\"https://ant.design\">{item.title}</a>}\n description=\"Ant Design, a design language for background applications, is refined by Ant UED Team\"\n />\n </List.Item>\n )}\n />\n <Divider orientation=\"left\">Empty Text</Divider>\n <List />\n </ConfigProvider>\n);\n\nexport default App;\n";},"5054c315":function(n,e,t){},"5058a574":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0bb25e56");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\n// Just show the latest item.\nconst displayRender = (labels: string[]) => labels[labels.length - 1];\n\nconst App: React.FC = () => (\n <Cascader\n options={options}\n expandTrigger=\"hover\"\n displayRender={displayRender}\n onChange={onChange}\n />\n);\n\nexport default App;\n";},50600201:function(n,e,t){},"5112318f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("70f8b765");var o="import React from 'react';\nimport { Steps } from 'antd';\n\nconst App: React.FC = () => (\n <Steps\n size=\"small\"\n current={1}\n items={[\n {\n title: 'Finished',\n },\n {\n title: 'In Progress',\n },\n {\n title: 'Waiting',\n },\n ]}\n />\n);\n\nexport default App;\n";},"513ba9b7":function(n,e,t){},"5149e5f4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c7280243");var o='import React from \'react\';\nimport { Badge, Card, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Badge.Ribbon text="\u5566\u5566\u5566\u5566">\n <Card>\u63A8\u5F00\u7A97\u6237\u4E3E\u8D77\u671B\u8FDC\u955C</Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="\u5566\u5566\u5566\u5566" color="purple">\n <Card>\u63A8\u5F00\u7A97\u6237\u4E3E\u8D77\u671B\u8FDC\u955C</Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="\u5566\u5566\u5566\u5566" color="#2db7f5">\n <Card>\u63A8\u5F00\u7A97\u6237\u4E3E\u8D77\u671B\u8FDC\u955C</Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="\u5566\u5566\u5566\u5566" color="#2db7f5" placement="start">\n <Card>\u63A8\u5F00\u7A97\u6237\u4E3E\u8D77\u671B\u8FDC\u955C</Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="\u5566\u5566\u5566\u5566" color="#2db7f5" placement="end">\n <Card>\u63A8\u5F00\u7A97\u6237\u4E3E\u8D77\u671B\u8FDC\u955C</Card>\n </Badge.Ribbon>\n </Space>\n);\n\nexport default App;\n';},"515ef171":function(n,e,t){},"5162cc39":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c033a4c3");var o="import React, { useState } from 'react';\nimport { Button, Image, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [random, setRandom] = useState<number>();\n\n return (\n <Space size={12}>\n <Image\n width={200}\n src={`https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?${random}`}\n placeholder={\n <Image\n preview={false}\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200\"\n width={200}\n />\n }\n />\n <Button\n type=\"primary\"\n onClick={() => {\n setRandom(Date.now());\n }}\n >\n Reload\n </Button>\n </Space>\n );\n};\n\nexport default App;\n";},"5177a095":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("09c9f19a");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport { Select } from 'antd';\n\nconst MAX_COUNT = 3;\n\nconst App: React.FC = () => {\n const [value, setValue] = React.useState<string[]>(['Ava Swift']);\n\n const suffix = (\n <>\n <span>\n {value.length} / {MAX_COUNT}\n </span>\n <DownOutlined />\n </>\n );\n\n return (\n <Select\n mode=\"multiple\"\n maxCount={MAX_COUNT}\n value={value}\n style={{ width: '100%' }}\n onChange={setValue}\n suffixIcon={suffix}\n placeholder=\"Please select\"\n options={[\n { value: 'Ava Swift', label: 'Ava Swift' },\n { value: 'Cole Reed', label: 'Cole Reed' },\n { value: 'Mia Blake', label: 'Mia Blake' },\n { value: 'Jake Stone', label: 'Jake Stone' },\n { value: 'Lily Lane', label: 'Lily Lane' },\n { value: 'Ryan Chase', label: 'Ryan Chase' },\n { value: 'Zoe Fox', label: 'Zoe Fox' },\n { value: 'Alex Grey', label: 'Alex Grey' },\n { value: 'Elle Blair', label: 'Elle Blair' },\n ]}\n />\n );\n};\n\nexport default App;\n";},"517b3e4a":function(n,e,t){},"517e0761":function(n,e,t){},"519bb90c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c61a1b01");var o="import React from 'react';\nimport { SearchOutlined } from '@ant-design/icons';\nimport { AutoComplete, Button, Form, Input, TreeSelect } from 'antd';\n\nconst formItemLayout = {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 8 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 16 },\n },\n};\n\nconst App: React.FC = () => (\n <Form style={{ margin: '0 auto' }} {...formItemLayout}>\n <Form.Item label=\"\u5355\u72EC AutoComplete\">\n <AutoComplete />\n </Form.Item>\n <Form.Item label=\"\u5355\u72EC TreeSelect\">\n <TreeSelect />\n </Form.Item>\n <Form.Item label=\"\u6DFB\u52A0 Input.Group \u6B63\u5E38\">\n <Input.Group compact>\n <TreeSelect style={{ width: '30%' }} />\n <AutoComplete />\n </Input.Group>\n </Form.Item>\n <Form.Item label=\"\u5305\u542B search \u56FE\u6807\u6B63\u5E38\">\n <AutoComplete>\n <Input suffix={<SearchOutlined />} />\n </AutoComplete>\n </Form.Item>\n <Form.Item label=\"\u540C\u65F6\u6709 Input.Group \u548C\u56FE\u6807\u53D1\u751F\u79FB\u4F4D\">\n <Input.Group compact>\n <TreeSelect style={{ width: '30%' }} />\n <AutoComplete>\n <Input suffix={<SearchOutlined />} />\n </AutoComplete>\n </Input.Group>\n </Form.Item>\n <Form.Item label=\"\u540C\u65F6\u6709 Input.Group \u548C Search \u7EC4\u4EF6\u53D1\u751F\u79FB\u4F4D\">\n <Input.Group compact>\n <TreeSelect style={{ width: '30%' }} />\n <AutoComplete>\n <Input.Search />\n </AutoComplete>\n </Input.Group>\n </Form.Item>\n <Form.Item label=\"Input Group \u548C Button \u7ED3\u5408\">\n <Input.Group compact>\n <TreeSelect style={{ width: '20%' }} />\n <AutoComplete>\n <Input.Search />\n </AutoComplete>\n <Button type=\"primary\" icon={<SearchOutlined />}>\n Search\n </Button>\n </Input.Group>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n";},"51a26c19":function(n,e,t){},"51b5036f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b587b8a6");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'Category 1',\n value: 'Category 1',\n },\n {\n text: 'Category 2',\n value: 'Category 2',\n },\n ],\n filterMode: 'tree',\n filterSearch: true,\n onFilter: (value, record) => record.name.startsWith(value as string),\n width: '30%',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n filters: [\n {\n text: 'London',\n value: 'London',\n },\n {\n text: 'New York',\n value: 'New York',\n },\n ],\n onFilter: (value, record) => record.address.startsWith(value as string),\n filterSearch: true,\n width: '40%',\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n];\n\nconst onChange: TableProps<DataType>['onChange'] = (pagination, filters, sorter, extra) => {\n console.log('params', pagination, filters, sorter, extra);\n};\n\nconst App: React.FC = () => (\n <Table<DataType> columns={columns} dataSource={data} onChange={onChange} />\n);\n\nexport default App;\n";},"51bade86":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b5282d6c");var o="import React from 'react';\nimport { Steps } from 'antd';\n\nconst description = 'This is a description.';\nconst App: React.FC = () => (\n <Steps\n current={1}\n percent={60}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n subTitle: 'Left 00:00:08',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\n\nexport default App;\n";},"51bbfd3f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("78f20a15");var o="import React, { useState } from 'react';\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport { closestCenter, DndContext, PointerSensor, useSensor } from '@dnd-kit/core';\nimport {\n arrayMove,\n horizontalListSortingStrategy,\n SortableContext,\n useSortable,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Tabs } from 'antd';\nimport type { TabsProps } from 'antd';\n\ninterface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {\n 'data-node-key': string;\n}\n\nconst DraggableTabNode: React.FC<Readonly<DraggableTabPaneProps>> = ({ className, ...props }) => {\n const { attributes, listeners, setNodeRef, transform, transition } = useSortable({\n id: props['data-node-key'],\n });\n\n const style: React.CSSProperties = {\n ...props.style,\n transform: CSS.Translate.toString(transform),\n transition,\n cursor: 'move',\n };\n\n return React.cloneElement(props.children as React.ReactElement<any>, {\n ref: setNodeRef,\n style,\n ...attributes,\n ...listeners,\n });\n};\n\nconst App: React.FC = () => {\n const [items, setItems] = useState<NonNullable<TabsProps['items']>>([\n { key: '1', label: 'Tab 1', children: 'Content of Tab Pane 1' },\n { key: '2', label: 'Tab 2', children: 'Content of Tab Pane 2' },\n { key: '3', label: 'Tab 3', children: 'Content of Tab Pane 3' },\n ]);\n\n const sensor = useSensor(PointerSensor, { activationConstraint: { distance: 10 } });\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n setItems((prev) => {\n const activeIndex = prev.findIndex((i) => i.key === active.id);\n const overIndex = prev.findIndex((i) => i.key === over?.id);\n return arrayMove(prev, activeIndex, overIndex);\n });\n }\n };\n\n return (\n <Tabs\n items={items}\n renderTabBar={(tabBarProps, DefaultTabBar) => (\n <DndContext sensors={[sensor]} onDragEnd={onDragEnd} collisionDetection={closestCenter}>\n <SortableContext items={items.map((i) => i.key)} strategy={horizontalListSortingStrategy}>\n <DefaultTabBar {...tabBarProps}>\n {(node) => (\n <DraggableTabNode\n {...(node as React.ReactElement<DraggableTabPaneProps>).props}\n key={node.key}\n >\n {node}\n </DraggableTabNode>\n )}\n </DefaultTabBar>\n </SortableContext>\n </DndContext>\n )}\n />\n );\n};\n\nexport default App;\n";},"51bd69ff":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5fc3eaea");var o="import React from 'react';\nimport { Tabs } from 'antd';\n\nconst App: React.FC = () => (\n <Tabs\n defaultActiveKey=\"1\"\n centered\n items={Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab ${id}`,\n key: id,\n children: `Content of Tab Pane ${id}`,\n };\n })}\n />\n);\n\nexport default App;\n";},"520e185a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("23d2e41c");var o="import React from 'react';\nimport type { SelectProps } from 'antd';\nimport { Select, Typography } from 'antd';\n\nconst { Title } = Typography;\n\nconst options: SelectProps['options'] = [];\n\nfor (let i = 0; i < 100000; i++) {\n const value = `${i.toString(36)}${i}`;\n options.push({\n label: value,\n value,\n disabled: i === 10,\n });\n}\n\nconst handleChange = (value: string[]) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <>\n <Title level={4}>{options.length} Items</Title>\n <Select\n mode=\"multiple\"\n style={{ width: '100%' }}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n onChange={handleChange}\n options={options}\n />\n </>\n);\n\nexport default App;\n";},"522aada4":function(n,e,t){},"5255c953":function(n,e,t){},52824988:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6c99ae93");var o="import React from 'react';\nimport { ConfigProvider, Modal } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;\n\nexport default () => (\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>\n <InternalPanel title=\"Hello World!\" style={{ width: '100%' }}>\n Hello World?!\n </InternalPanel>\n <InternalPanel type=\"success\" style={{ width: 200 }}>\n A good news!\n </InternalPanel>\n <InternalPanel title=\"Confirm This?\" type=\"confirm\" style={{ width: 300 }}>\n Some descriptions.\n </InternalPanel>\n </div>\n </ConfigProvider>\n);\n";},"528341f3":function(n,e,t){},"52a1b26c":function(n,e,t){},"52beeb78":function(n,e,t){},"52f39349":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("53c3f798");var o='import React from \'react\';\nimport {\n Button,\n Cascader,\n DatePicker,\n Form,\n Input,\n InputNumber,\n Mentions,\n Segmented,\n Select,\n TreeSelect,\n} from \'antd\';\n\nconst { RangePicker } = DatePicker;\n\nconst formItemLayout = {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 6 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 14 },\n },\n};\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const variant = Form.useWatch(\'variant\', form);\n return (\n <Form\n {...formItemLayout}\n form={form}\n variant={variant || \'filled\'}\n style={{ maxWidth: 600 }}\n initialValues={{ variant: \'filled\' }}\n >\n <Form.Item label="Form variant" name="variant">\n <Segmented options={[\'outlined\', \'filled\', \'borderless\', \'underlined\']} />\n </Form.Item>\n\n <Form.Item label="Input" name="Input" rules={[{ required: true, message: \'Please input!\' }]}>\n <Input />\n </Form.Item>\n\n <Form.Item\n label="InputNumber"\n name="InputNumber"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <InputNumber style={{ width: \'100%\' }} />\n </Form.Item>\n\n <Form.Item\n label="TextArea"\n name="TextArea"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <Input.TextArea />\n </Form.Item>\n\n <Form.Item\n label="Mentions"\n name="Mentions"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <Mentions />\n </Form.Item>\n\n <Form.Item\n label="Select"\n name="Select"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <Select />\n </Form.Item>\n\n <Form.Item\n label="Cascader"\n name="Cascader"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <Cascader />\n </Form.Item>\n\n <Form.Item\n label="TreeSelect"\n name="TreeSelect"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <TreeSelect />\n </Form.Item>\n\n <Form.Item\n label="DatePicker"\n name="DatePicker"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <DatePicker />\n </Form.Item>\n\n <Form.Item\n label="RangePicker"\n name="RangePicker"\n rules={[{ required: true, message: \'Please input!\' }]}\n >\n <RangePicker />\n </Form.Item>\n\n <Form.Item wrapperCol={{ offset: 6, span: 16 }}>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"53187b57":function(n,e,t){},"531ddb40":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bcfda361");var o="import React from 'react';\nimport { cyan, generate, green, presetPalettes, red } from '@ant-design/colors';\nimport { Col, ColorPicker, Divider, Row, Space, theme } from 'antd';\nimport type { ColorPickerProps } from 'antd';\n\ntype Presets = Required<ColorPickerProps>['presets'][number];\n\nfunction genPresets(presets = presetPalettes) {\n return Object.entries(presets).map<Presets>(([label, colors]) => ({ label, colors, key: label }));\n}\n\nconst HorizontalLayoutDemo = () => {\n const { token } = theme.useToken();\n\n const presets = genPresets({\n primary: generate(token.colorPrimary),\n red,\n green,\n cyan,\n });\n\n const customPanelRender: ColorPickerProps['panelRender'] = (\n _,\n { components: { Picker, Presets } },\n ) => (\n <Row justify=\"space-between\" wrap={false}>\n <Col span={12}>\n <Presets />\n </Col>\n <Divider type=\"vertical\" style={{ height: 'auto' }} />\n <Col flex=\"auto\">\n <Picker />\n </Col>\n </Row>\n );\n\n return (\n <ColorPicker\n defaultValue={token.colorPrimary}\n styles={{ popupOverlayInner: { width: 480 } }}\n presets={presets}\n panelRender={customPanelRender}\n />\n );\n};\n\nconst BasicDemo = () => (\n <ColorPicker\n defaultValue=\"#1677ff\"\n panelRender={(panel) => (\n <div className=\"custom-panel\">\n <div\n style={{\n fontSize: 12,\n color: 'rgba(0, 0, 0, 0.88)',\n lineHeight: '20px',\n marginBottom: 8,\n }}\n >\n Color Picker\n </div>\n {panel}\n </div>\n )}\n />\n);\n\nexport default () => (\n <Space direction=\"vertical\">\n <Space>\n <span>Add title:</span>\n <BasicDemo />\n </Space>\n <Space>\n <span>Horizontal layout:</span>\n <HorizontalLayoutDemo />\n </Space>\n </Space>\n);\n";},"5328d895":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d0f54e20");var o="import React from 'react';\nimport { Button, Flex, Radio, Slider } from 'antd';\nimport type { ConfigProviderProps } from 'antd';\n\ntype SizeType = ConfigProviderProps['componentSize'];\n\nconst App: React.FC = () => {\n const [gapSize, setGapSize] = React.useState<SizeType | 'customize'>('small');\n const [customGapSize, setCustomGapSize] = React.useState<number>(0);\n return (\n <Flex gap=\"middle\" vertical>\n <Radio.Group value={gapSize} onChange={(e) => setGapSize(e.target.value)}>\n {['small', 'middle', 'large', 'customize'].map((size) => (\n <Radio key={size} value={size}>\n {size}\n </Radio>\n ))}\n </Radio.Group>\n {gapSize === 'customize' && <Slider value={customGapSize} onChange={setCustomGapSize} />}\n <Flex gap={gapSize !== 'customize' ? gapSize : customGapSize}>\n <Button type=\"primary\">Primary</Button>\n <Button>Default</Button>\n <Button type=\"dashed\">Dashed</Button>\n <Button type=\"link\">Link</Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default App;\n";},"537f5e32":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("624d091e");var o='import React from \'react\';\nimport { Avatar, Badge } from \'antd\';\n\nconst App: React.FC = () => (\n <a href="#">\n <Badge count={5}>\n <Avatar shape="square" size="large" />\n </Badge>\n </a>\n);\n\nexport default App;\n';},"5395f4a8":function(n,e,t){},"53b9777f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5eaac062");var o="import React from 'react';\nimport { DatePicker } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst dateFormat = 'YYYY-MM-DD';\n\nconst App: React.FC = () => (\n <DatePicker\n defaultValue={dayjs('2019-09-03', dateFormat)}\n minDate={dayjs('2019-08-01', dateFormat)}\n maxDate={dayjs('2020-10-31', dateFormat)}\n />\n);\n\nexport default App;\n";},"53c3f798":function(n,e,t){},"53c5ba17":function(n,e,t){},"53e15da5":function(n,e,t){},"5406e955":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("427609ea");var o="import React from 'react';\nimport { Button, Divider, Space, Tooltip } from 'antd';\n\nconst colors = [\n 'pink',\n 'red',\n 'yellow',\n 'orange',\n 'cyan',\n 'green',\n 'blue',\n 'purple',\n 'geekblue',\n 'magenta',\n 'volcano',\n 'gold',\n 'lime',\n];\n\nconst customColors = ['#f50', '#2db7f5', '#87d068', '#108ee9'];\n\nconst App: React.FC = () => (\n <>\n <Divider orientation=\"left\">Presets</Divider>\n <Space wrap>\n {colors.map((color) => (\n <Tooltip title=\"prompt text\" color={color} key={color}>\n <Button>{color}</Button>\n </Tooltip>\n ))}\n </Space>\n <Divider orientation=\"left\">Custom</Divider>\n <Space wrap>\n {customColors.map((color) => (\n <Tooltip title=\"prompt text\" color={color} key={color}>\n <Button>{color}</Button>\n </Tooltip>\n ))}\n </Space>\n </>\n);\n\nexport default App;\n";},"54100e74":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ffdc05ac");var o='import React from \'react\';\nimport { Col, Divider, Row } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Divider orientation="left">Percentage columns</Divider>\n <Row>\n <Col flex={2}>2 / 5</Col>\n <Col flex={3}>3 / 5</Col>\n </Row>\n <Divider orientation="left">Fill rest</Divider>\n <Row>\n <Col flex="100px">100px</Col>\n <Col flex="auto">Fill Rest</Col>\n </Row>\n <Divider orientation="left">Raw flex style</Divider>\n <Row>\n <Col flex="1 1 200px">1 1 200px</Col>\n <Col flex="0 1 300px">0 1 300px</Col>\n </Row>\n\n <Row wrap={false}>\n <Col flex="none">\n <div style={{ padding: \'0 16px\' }}>none</div>\n </Col>\n <Col flex="auto">auto with no-wrap</Col>\n </Row>\n </>\n);\n\nexport default App;\n';},"5413bb30":function(n,e,t){},"542d543c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6da59cb2");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n disabled?: boolean;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n disabled: true,\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => <Cascader options={options} onChange={onChange} />;\n\nexport default App;\n";},"544591b1":function(n,e,t){},"5465ea26":function(n,e,t){},54750542:function(n,e,t){},"548e6e0f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c819c467");var o="import React, { useState } from 'react';\nimport { Flex, Slider, Switch, Typography } from 'antd';\n\nconst App = () => {\n const [rows, setRows] = useState(2);\n const [expanded, setExpanded] = useState(false);\n\n return (\n <Flex gap={16} vertical>\n <Flex gap={16} align=\"center\">\n <Switch\n checked={expanded}\n onChange={() => setExpanded((c) => !c)}\n style={{ flex: 'none' }}\n />\n <Slider min={1} max={20} value={rows} onChange={setRows} style={{ flex: 'auto' }} />\n </Flex>\n\n <Typography.Paragraph\n ellipsis={{\n rows,\n expandable: 'collapsible',\n expanded,\n onExpand: (_, info) => setExpanded(info.expanded),\n }}\n copyable\n >\n {'Ant Design, a design language for background applications, is refined by Ant UED Team.'.repeat(\n 20,\n )}\n </Typography.Paragraph>\n </Flex>\n );\n};\n\nexport default App;\n";},"54a4af1b":function(n,e,t){},"54e626bc":function(n,e,t){},"54fadc4b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2f978a38");var o='import React, { useState } from \'react\';\nimport { PlusOutlined } from \'@ant-design/icons\';\nimport { Button, Col, DatePicker, Drawer, Form, Input, Row, Select, Space } from \'antd\';\n\nconst { Option } = Select;\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n return (\n <>\n <Button type="primary" onClick={showDrawer} icon={<PlusOutlined />}>\n New account\n </Button>\n <Drawer\n title="Create a new account"\n width={720}\n onClose={onClose}\n open={open}\n styles={{\n body: {\n paddingBottom: 80,\n },\n }}\n extra={\n <Space>\n <Button onClick={onClose}>Cancel</Button>\n <Button onClick={onClose} type="primary">\n Submit\n </Button>\n </Space>\n }\n >\n <Form layout="vertical" hideRequiredMark>\n <Row gutter={16}>\n <Col span={12}>\n <Form.Item\n name="name"\n label="Name"\n rules={[{ required: true, message: \'Please enter user name\' }]}\n >\n <Input placeholder="Please enter user name" />\n </Form.Item>\n </Col>\n <Col span={12}>\n <Form.Item\n name="url"\n label="Url"\n rules={[{ required: true, message: \'Please enter url\' }]}\n >\n <Input\n style={{ width: \'100%\' }}\n addonBefore="http://"\n addonAfter=".com"\n placeholder="Please enter url"\n />\n </Form.Item>\n </Col>\n </Row>\n <Row gutter={16}>\n <Col span={12}>\n <Form.Item\n name="owner"\n label="Owner"\n rules={[{ required: true, message: \'Please select an owner\' }]}\n >\n <Select placeholder="Please select an owner">\n <Option value="xiao">Xiaoxiao Fu</Option>\n <Option value="mao">Maomao Zhou</Option>\n </Select>\n </Form.Item>\n </Col>\n <Col span={12}>\n <Form.Item\n name="type"\n label="Type"\n rules={[{ required: true, message: \'Please choose the type\' }]}\n >\n <Select placeholder="Please choose the type">\n <Option value="private">Private</Option>\n <Option value="public">Public</Option>\n </Select>\n </Form.Item>\n </Col>\n </Row>\n <Row gutter={16}>\n <Col span={12}>\n <Form.Item\n name="approver"\n label="Approver"\n rules={[{ required: true, message: \'Please choose the approver\' }]}\n >\n <Select placeholder="Please choose the approver">\n <Option value="jack">Jack Ma</Option>\n <Option value="tom">Tom Liu</Option>\n </Select>\n </Form.Item>\n </Col>\n <Col span={12}>\n <Form.Item\n name="dateTime"\n label="DateTime"\n rules={[{ required: true, message: \'Please choose the dateTime\' }]}\n >\n <DatePicker.RangePicker\n style={{ width: \'100%\' }}\n getPopupContainer={(trigger) => trigger.parentElement!}\n />\n </Form.Item>\n </Col>\n </Row>\n <Row gutter={16}>\n <Col span={24}>\n <Form.Item\n name="description"\n label="Description"\n rules={[\n {\n required: true,\n message: \'please enter url description\',\n },\n ]}\n >\n <Input.TextArea rows={4} placeholder="please enter url description" />\n </Form.Item>\n </Col>\n </Row>\n </Form>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n';},"554d50a0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("67ae6b18");var o='import React from \'react\';\nimport { Flex, TreeSelect } from \'antd\';\n\nconst style: React.CSSProperties = {\n width: \'100%\',\n maxWidth: \'100%\',\n};\n\nconst App: React.FC = () => {\n return (\n <Flex vertical gap="middle">\n <TreeSelect style={style} placeholder="Please select" variant="borderless" />\n <TreeSelect style={style} placeholder="Please select" variant="filled" />\n <TreeSelect style={style} placeholder="Please select" variant="outlined" />\n <TreeSelect style={style} placeholder="Please select" variant="underlined" />\n </Flex>\n );\n};\n\nexport default App;\n';},55523280:function(n,e,t){},"55537bca":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("528341f3");var o='import React from \'react\';\nimport { Alert } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Alert message="Warning text" banner />\n <br />\n <Alert\n message="Very long warning text warning text text text text text text text"\n banner\n closable\n />\n <br />\n <Alert showIcon={false} message="Warning text without icon" banner />\n <br />\n <Alert type="error" message="Error text" banner />\n </>\n);\n\nexport default App;\n';},"555dfc91":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("233846b8");var o='import React from \'react\';\nimport { Flex, InputNumber } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap={12}>\n <InputNumber placeholder="Outlined" style={{ width: 200 }} />\n <InputNumber placeholder="Filled" variant="filled" style={{ width: 200 }} />\n <InputNumber placeholder="Borderless" variant="borderless" style={{ width: 200 }} />\n <InputNumber placeholder="Underlined" variant="underlined" style={{ width: 200 }} />\n </Flex>\n);\n\nexport default App;\n';},"557008f3":function(n,e,t){},"5581c62d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b7d39d86");var o="import React, { useEffect, useState } from 'react';\nimport { Button, Transfer } from 'antd';\nimport type { TransferProps } from 'antd';\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n chosen: boolean;\n}\n\nconst App: React.FC = () => {\n const [mockData, setMockData] = useState<RecordType[]>([]);\n const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);\n\n const getMock = () => {\n const tempTargetKeys = [];\n const tempMockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: i % 2 === 0,\n };\n if (data.chosen) {\n tempTargetKeys.push(data.key);\n }\n tempMockData.push(data);\n }\n setMockData(tempMockData);\n setTargetKeys(tempTargetKeys);\n };\n\n useEffect(() => {\n getMock();\n }, []);\n\n const handleChange: TransferProps['onChange'] = (newTargetKeys) => {\n setTargetKeys(newTargetKeys);\n };\n\n const renderFooter: TransferProps['footer'] = (_, info) => {\n if (info?.direction === 'left') {\n return (\n <Button\n size=\"small\"\n style={{ display: 'flex', margin: 8, marginInlineEnd: 'auto' }}\n onClick={getMock}\n >\n Left button reload\n </Button>\n );\n }\n return (\n <Button\n size=\"small\"\n style={{ display: 'flex', margin: 8, marginInlineStart: 'auto' }}\n onClick={getMock}\n >\n Right button reload\n </Button>\n );\n };\n\n return (\n <Transfer\n dataSource={mockData}\n showSearch\n listStyle={{\n width: 250,\n height: 300,\n }}\n operations={['to right', 'to left']}\n targetKeys={targetKeys}\n onChange={handleChange}\n render={(item) => `${item.title}-${item.description}`}\n footer={renderFooter}\n />\n );\n};\n\nexport default App;\n";},"55a5a3c0":function(n,e,t){},56104879:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("27e96236");var o="import React, { useRef, useState } from 'react';\nimport { EllipsisOutlined } from '@ant-design/icons';\nimport { Button, Divider, Space, Tour } from 'antd';\nimport type { TourProps } from 'antd';\n\nconst App: React.FC = () => {\n const ref1 = useRef(null);\n const ref2 = useRef(null);\n const ref3 = useRef(null);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const steps: TourProps['steps'] = [\n {\n title: 'Upload File',\n description: 'Put your files here.',\n cover: (\n <img\n alt=\"tour.png\"\n src=\"https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png\"\n />\n ),\n target: () => ref1.current,\n },\n {\n title: 'Save',\n description: 'Save your changes.',\n target: () => ref2.current,\n },\n {\n title: 'Other Actions',\n description: 'Click to see other actions.',\n target: () => ref3.current,\n },\n ];\n\n return (\n <>\n <Button type=\"primary\" onClick={() => setOpen(true)}>\n Begin non-modal Tour\n </Button>\n\n <Divider />\n\n <Space>\n <Button ref={ref1}>Upload</Button>\n <Button ref={ref2} type=\"primary\">\n Save\n </Button>\n <Button ref={ref3} icon={<EllipsisOutlined />} />\n </Space>\n\n <Tour open={open} onClose={() => setOpen(false)} mask={false} type=\"primary\" steps={steps} />\n </>\n );\n};\n\nexport default App;\n";},"5612368d":function(n,e,t){},"56200a77":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a8a21de1");var o="import React from 'react';\nimport { Select } from 'antd';\n\nconst App: React.FC = () => (\n <Select\n style={{ width: 120, marginTop: '50vh' }}\n open\n options={Array.from({ length: 100 }).map((_, index) => ({\n value: index,\n }))}\n />\n);\n\nexport default App;\n";},"565705c0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fb58139b");var o="import React from 'react';\nimport { ColorPicker } from 'antd';\n\nexport default () => {\n const [color, setColor] = React.useState<string>('#1677ff');\n\n return (\n <ColorPicker\n value={color}\n allowClear\n onChange={(c) => {\n setColor(c.toHexString());\n }}\n />\n );\n};\n";},"569236ad":function(n,e,t){},"56c17793":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c86fb4da");var o="import React from 'react';\nimport type { StepsProps } from 'antd';\nimport { Popover, Steps } from 'antd';\n\nconst customDot: StepsProps['progressDot'] = (dot, { status, index }) => (\n <Popover\n content={\n <span>\n step {index} status: {status}\n </span>\n }\n >\n {dot}\n </Popover>\n);\nconst description = 'You can hover on the dot.';\nconst App: React.FC = () => (\n <Steps\n current={1}\n progressDot={customDot}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\n\nexport default App;\n";},"56efc875":function(n,e,t){},"570022aa":function(n,e,t){},"5705450c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d21f630e");var o="import React from 'react';\nimport { Input } from 'antd';\n\nconst { TextArea } = Input;\n\nconst App: React.FC = () => (\n <>\n <TextArea rows={4} />\n <br />\n <br />\n <TextArea rows={4} placeholder=\"maxLength is 6\" maxLength={6} />\n </>\n);\n\nexport default App;\n";},"570736e1":function(n,e,t){},"57389c6a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4dc6bed6");var o='import React from \'react\';\nimport { Button, ConfigProvider, Flex, Tabs } from \'antd\';\n\nconst tabItems = Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n disabled: i === 2,\n label: `Tab ${id}`,\n key: id,\n children: `Content of Tab Pane ${id}`,\n };\n});\n\nconst sharedTabsProps = {\n items: Array.from({ length: 2 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab ${id}`,\n key: id,\n };\n }),\n tabBarStyle: { background: \'red\' },\n};\n\nconst App: React.FC = () => (\n <>\n <ConfigProvider\n theme={{\n components: {\n Tabs: {\n cardBg: \'#f6ffed\',\n cardHeight: 60,\n cardPadding: `20px`,\n cardPaddingSM: `20px`,\n cardPaddingLG: `20px`,\n titleFontSize: 20,\n titleFontSizeLG: 20,\n titleFontSizeSM: 20,\n inkBarColor: \'#52C41A\',\n horizontalMargin: `0 0 12px 0`,\n horizontalItemGutter: 12, // Fixed Value\n horizontalItemPadding: `20px`,\n horizontalItemPaddingSM: `20px`,\n horizontalItemPaddingLG: `20px`,\n verticalItemPadding: `8px`,\n verticalItemMargin: `4px 0 0 0`,\n itemColor: \'rgba(0,0,0,0.85)\',\n itemSelectedColor: \'#389e0d\',\n itemHoverColor: \'#d9f7be\',\n itemActiveColor: \'#b7eb8f\',\n cardGutter: 12,\n },\n },\n }}\n >\n <div>\n <Tabs\n defaultActiveKey="1"\n tabBarExtraContent={<Button>Extra Action</Button>}\n style={{ marginBottom: 32 }}\n items={tabItems}\n />\n <Tabs\n tabPosition="left"\n defaultActiveKey="1"\n tabBarExtraContent={<Button>Extra Action</Button>}\n style={{ marginBottom: 32 }}\n items={tabItems}\n />\n <Tabs\n size="small"\n defaultActiveKey="1"\n tabBarExtraContent={<Button>Extra Action</Button>}\n style={{ marginBottom: 32 }}\n items={tabItems}\n />\n <Tabs\n size="large"\n defaultActiveKey="1"\n tabBarExtraContent={<Button>Extra Action</Button>}\n style={{ marginBottom: 32 }}\n items={tabItems}\n />\n <Tabs defaultActiveKey="1" centered type="card" items={tabItems} />\n <Tabs size="small" defaultActiveKey="1" centered type="card" items={tabItems} />\n <Tabs size="large" defaultActiveKey="1" centered type="card" items={tabItems} />\n </div>\n </ConfigProvider>\n <ConfigProvider\n theme={{\n components: {\n Tabs: {\n cardHeight: 180,\n cardPadding: \'0px 0px 0px 0px\',\n cardPaddingSM: \'0px 0px 0px 0px\',\n verticalItemPadding: \'0px 0px\',\n borderRadiusLG: 0,\n borderRadius: 0,\n horizontalItemPadding: \'0px 0px 0px 0px\',\n horizontalMargin: \'0 0 0 0\',\n inkBarColor: \'#ffa940\',\n },\n },\n }}\n >\n <Tabs size="small" type="editable-card" items={tabItems} />\n </ConfigProvider>\n <Flex align="flex-end">\n <Tabs size="large" type="card" {...sharedTabsProps} />\n <Tabs size="middle" type="card" {...sharedTabsProps} />\n <Tabs size="small" type="editable-card" {...sharedTabsProps} />\n <Tabs size="small" type="card" {...sharedTabsProps} />\n </Flex>\n </>\n);\n\nexport default App;\n';},"577b8b3c":function(n,e,t){},"57f96f79":function(n,e,t){},"57fa1310":function(n,e,t){},"57fcdd67":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eaab550b");var o="import React, { useState } from 'react';\nimport { Button, Modal } from 'antd';\n\nconst App: React.FC = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const showModal = () => {\n setIsModalOpen(true);\n };\n\n const handleOk = () => {\n setIsModalOpen(false);\n };\n\n const handleCancel = () => {\n setIsModalOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showModal}>\n Open Modal\n </Button>\n <Modal\n title=\"Basic Modal\"\n closable={{ 'aria-label': 'Custom Close Button' }}\n open={isModalOpen}\n onOk={handleOk}\n onCancel={handleCancel}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n";},"581bf200":function(n,e,t){},"584f12da":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f32f2133");var o="import React from 'react';\nimport { Tabs } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ token, css }) => {\n const antdTabsCls = '.ant-tabs';\n\n return css`\n ${antdTabsCls}${antdTabsCls}-card {\n ${antdTabsCls}-content {\n padding: ${token.padding}px;\n background: ${token.colorBgContainer};\n }\n\n ${antdTabsCls}-nav {\n margin: 0;\n\n ${antdTabsCls}-nav-wrap > ${antdTabsCls}-nav-list > ${antdTabsCls}-tab {\n background: transparent;\n border-color: transparent;\n\n &-active {\n border-color: ${token.colorBorderBg};\n background: ${token.colorBgContainer};\n }\n }\n\n &::before {\n display: none;\n }\n }\n }\n `;\n});\n\nconst items = Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab Title ${id}`,\n key: id,\n children: (\n <>\n <p>Content of Tab Pane {id}</p>\n <p>Content of Tab Pane {id}</p>\n <p>Content of Tab Pane {id}</p>\n </>\n ),\n };\n});\n\nconst App = () => {\n const { styles } = useStyle();\n\n return (\n <div className={styles}>\n <Tabs type=\"card\" items={items} />\n </div>\n );\n};\n\nexport default App;\n";},"58c0a69d":function(n,e,t){},"58ef23fc":function(n,e,t){},59158189:function(n,e,t){},"594e6032":function(n,e,t){},"59b43840":function(n,e,t){},"59b72563":function(n,e,t){},"59db0c62":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7b7514e1");var o="import React from 'react';\nimport { Tooltip } from 'antd';\n\nconst App: React.FC = () => (\n <Tooltip title=\"prompt text\">\n <span>Tooltip will show on mouse enter.</span>\n </Tooltip>\n);\n\nexport default App;\n";},"59f285d3":function(n,e,t){},"59f42d13":function(n,e,t){},"59fe4a2b":function(n,e,t){},"5a15bf4c":function(n,e,t){},"5a1f5bc2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3bdaf5ef");var o='import React from \'react\';\nimport { CustomerServiceOutlined } from \'@ant-design/icons\';\nimport { FloatButton } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <FloatButton\n shape="circle"\n type="primary"\n style={{ insetInlineEnd: 94 }}\n icon={<CustomerServiceOutlined />}\n />\n <FloatButton\n shape="square"\n type="primary"\n style={{ insetInlineEnd: 24 }}\n icon={<CustomerServiceOutlined />}\n />\n </>\n);\n\nexport default App;\n';},"5a53e46a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6c5bfed1");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ css, token }) => {\n const { antCls } = token;\n return {\n customTable: css`\n ${antCls}-table {\n ${antCls}-table-container {\n ${antCls}-table-body,\n ${antCls}-table-content {\n scrollbar-width: thin;\n scrollbar-color: #eaeaea transparent;\n scrollbar-gutter: stable;\n }\n }\n }\n `,\n };\n});\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Full Name',\n width: 100,\n dataIndex: 'name',\n key: 'name',\n fixed: 'left',\n },\n {\n title: 'Age',\n width: 100,\n dataIndex: 'age',\n key: 'age',\n fixed: 'left',\n },\n {\n title: 'Column 1',\n dataIndex: 'address',\n key: '1',\n width: 150,\n },\n {\n title: 'Column 2',\n dataIndex: 'address',\n key: '2',\n width: 150,\n },\n {\n title: 'Column 3',\n dataIndex: 'address',\n key: '3',\n width: 150,\n },\n {\n title: 'Column 4',\n dataIndex: 'address',\n key: '4',\n width: 150,\n },\n {\n title: 'Column 5',\n dataIndex: 'address',\n key: '5',\n width: 150,\n },\n {\n title: 'Column 6',\n dataIndex: 'address',\n key: '6',\n width: 150,\n },\n {\n title: 'Column 7',\n dataIndex: 'address',\n key: '7',\n width: 150,\n },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n { title: 'Column 9', dataIndex: 'address', key: '9' },\n { title: 'Column 10', dataIndex: 'address', key: '10' },\n { title: 'Column 11', dataIndex: 'address', key: '11' },\n { title: 'Column 12', dataIndex: 'address', key: '12' },\n { title: 'Column 13', dataIndex: 'address', key: '13' },\n { title: 'Column 14', dataIndex: 'address', key: '14' },\n { title: 'Column 15', dataIndex: 'address', key: '15' },\n { title: 'Column 16', dataIndex: 'address', key: '16' },\n { title: 'Column 17', dataIndex: 'address', key: '17' },\n { title: 'Column 18', dataIndex: 'address', key: '18' },\n { title: 'Column 19', dataIndex: 'address', key: '19' },\n { title: 'Column 20', dataIndex: 'address', key: '20' },\n {\n title: 'Action',\n key: 'operation',\n fixed: 'right',\n width: 100,\n render: () => <a>action</a>,\n },\n];\n\nconst dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n}));\n\nconst App: React.FC = () => {\n const { styles } = useStyle();\n return (\n <Table<DataType>\n className={styles.customTable}\n columns={columns}\n dataSource={dataSource}\n scroll={{ x: 'max-content', y: 55 * 5 }}\n />\n );\n};\n\nexport default App;\n";},"5a87a731":function(n,e,t){},"5a94c7f9":function(n,e,t){},"5ab232f2":function(n,e,t){},"5af6d844":function(n,e,t){},"5b529225":function(n,e,t){},"5ba2d927":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a9722adc");var o="import React from 'react';\nimport { Mentions } from 'antd';\n\nconst options = ['afc163', 'zombiej', 'yesmeck'].map((value) => ({\n value,\n key: value,\n label: value,\n}));\n\nconst App: React.FC = () => (\n <>\n <div style={{ marginBottom: 10 }}>\n <Mentions\n style={{ width: '100%' }}\n placeholder=\"this is disabled Mentions\"\n disabled\n options={options}\n />\n </div>\n <Mentions\n style={{ width: '100%' }}\n placeholder=\"this is readOnly Mentions\"\n readOnly\n options={options}\n />\n </>\n);\n\nexport default App;\n";},"5bbab28e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d516bf61");var o="import React, { useState } from 'react';\nimport { Checkbox, InputNumber, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [keyboard, setKeyboard] = useState(true);\n\n return (\n <Space>\n <InputNumber min={1} max={10} keyboard={keyboard} defaultValue={3} />\n <Checkbox\n onChange={() => {\n setKeyboard(!keyboard);\n }}\n checked={keyboard}\n >\n Toggle keyboard\n </Checkbox>\n </Space>\n );\n};\n\nexport default App;\n";},"5bc7653d":function(n,e,t){},"5bcf1657":function(n,e,t){},"5bd3b645":function(n,e,t){},"5c09328e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ca8da506");var o="import React from 'react';\nimport { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';\nimport { Steps } from 'antd';\n\nconst App: React.FC = () => (\n <Steps\n items={[\n {\n title: 'Login',\n status: 'finish',\n icon: <UserOutlined />,\n },\n {\n title: 'Verification',\n status: 'finish',\n icon: <SolutionOutlined />,\n },\n {\n title: 'Pay',\n status: 'process',\n icon: <LoadingOutlined />,\n },\n {\n title: 'Done',\n status: 'wait',\n icon: <SmileOutlined />,\n },\n ]}\n />\n);\n\nexport default App;\n";},"5c158d1a":function(n,e,t){},"5c269100":function(n,e,t){},"5c2dac1f":function(n,e,t){},"5c8d266f":function(n,e,t){},"5ce9954d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f8f50271");var o="import React from 'react';\nimport { Tree } from 'antd';\nimport type { TreeDataNode, TreeProps } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 1',\n key: '0-0',\n children: [\n {\n title: 'parent 1-0',\n key: '0-0-0',\n disabled: true,\n children: [\n {\n title: 'This is a very very very very long text',\n key: '0-0-0-0',\n disableCheckbox: true,\n },\n {\n title: 'This is also a very very very very very long text',\n key: '0-0-0-1',\n },\n ],\n },\n {\n title: 'parent 1-1',\n key: '0-0-1',\n children: [{ title: <span style={{ color: '#1677ff' }}>sss</span>, key: '0-0-1-0' }],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {\n console.log('selected', selectedKeys, info);\n };\n\n const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {\n console.log('onCheck', checkedKeys, info);\n };\n\n return (\n <Tree\n checkable\n defaultExpandedKeys={['0-0-0', '0-0-1']}\n defaultSelectedKeys={['0-0-1']}\n defaultCheckedKeys={['0-0-0', '0-0-1']}\n onSelect={onSelect}\n onCheck={onCheck}\n treeData={treeData}\n style={{ width: 200 }}\n />\n );\n};\n\nexport default App;\n";},"5cea4667":function(n,e,t){},"5d0a12cd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1882a08b");var o='import React from \'react\';\nimport { ConfigProvider, Popover } from \'antd\';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;\n\nconst content = (\n <div>\n <p>Content</p>\n <p>Content</p>\n </div>\n);\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Popover: {\n titleMinWidth: 40,\n },\n },\n }}\n >\n <InternalPopover content={content} title="Title" />\n <InternalPopover\n content={content}\n title="Title"\n placement="bottomLeft"\n style={{ width: 250 }}\n />\n </ConfigProvider>\n);\n\nexport default App;\n';},"5d938257":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("32a97619");var o="import React, { useMemo } from 'react';\nimport { Button, Divider, InputNumber, notification, Space, Switch } from 'antd';\n\nconst Context = React.createContext({ name: 'Default' });\n\nconst App: React.FC = () => {\n const [enabled, setEnabled] = React.useState(true);\n const [threshold, setThreshold] = React.useState(3);\n const [api, contextHolder] = notification.useNotification({\n stack: enabled\n ? {\n threshold,\n }\n : false,\n });\n\n const openNotification = () => {\n api.open({\n message: 'Notification Title',\n description: `${Array.from(\n { length: Math.round(Math.random() * 5) + 1 },\n () => 'This is the content of the notification.',\n ).join('\\n')}`,\n duration: null,\n });\n };\n\n const contextValue = useMemo(() => ({ name: 'Ant Design' }), []);\n\n return (\n <Context.Provider value={contextValue}>\n {contextHolder}\n <div>\n <Space size=\"large\">\n <Space style={{ width: '100%' }}>\n <span>Enabled: </span>\n <Switch checked={enabled} onChange={(v) => setEnabled(v)} />\n </Space>\n <Space style={{ width: '100%' }}>\n <span>Threshold: </span>\n <InputNumber\n disabled={!enabled}\n value={threshold}\n step={1}\n min={1}\n max={10}\n onChange={(v) => setThreshold(v || 0)}\n />\n </Space>\n </Space>\n <Divider />\n <Button type=\"primary\" onClick={openNotification}>\n Open the notification box\n </Button>\n </div>\n </Context.Provider>\n );\n};\n\nexport default App;\n";},"5de965d1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("40bcde63");var o="import React from 'react';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => (\n <Segmented<string>\n options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']}\n onChange={(value) => {\n console.log(value); // string\n }}\n />\n);\n\nexport default Demo;\n";},"5e3a704b":function(n,e,t){},"5e405328":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("29d2207b");var o="import React from 'react';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\n\nconst 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`;\n\nconst items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header 1',\n children: <p>{text}</p>,\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: <p>{text}</p>,\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: <p>{text}</p>,\n },\n];\n\nconst App: React.FC = () => {\n const onChange = (key: string | string[]) => {\n console.log(key);\n };\n\n return <Collapse items={items} defaultActiveKey={['1']} onChange={onChange} />;\n};\n\nexport default App;\n";},"5e6aac99":function(n,e,t){},"5eaac062":function(n,e,t){},"5ec13616":function(n,e,t){},"5ec4a406":function(n,e,t){},"5ee77987":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6c8ac6b4");var o='import React from \'react\';\nimport { Divider } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider size="small" />\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider size="middle" />\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider size="large" />\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n </>\n);\n\nexport default App;\n';},"5ef2e240":function(n,e,t){},"5efc3ccd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ea933a00");var o="import React, { useState } from 'react';\nimport type { InputNumberProps } from 'antd';\nimport { Col, InputNumber, Row, Slider, Space } from 'antd';\n\nconst IntegerStep: React.FC = () => {\n const [inputValue, setInputValue] = useState(1);\n\n const onChange: InputNumberProps['onChange'] = (newValue) => {\n setInputValue(newValue as number);\n };\n\n return (\n <Row>\n <Col span={12}>\n <Slider\n min={1}\n max={20}\n onChange={onChange}\n value={typeof inputValue === 'number' ? inputValue : 0}\n />\n </Col>\n <Col span={4}>\n <InputNumber\n min={1}\n max={20}\n style={{ margin: '0 16px' }}\n value={inputValue}\n onChange={onChange}\n />\n </Col>\n </Row>\n );\n};\n\nconst DecimalStep: React.FC = () => {\n const [inputValue, setInputValue] = useState(0);\n\n const onChange: InputNumberProps['onChange'] = (value) => {\n if (Number.isNaN(value)) {\n return;\n }\n setInputValue(value as number);\n };\n\n return (\n <Row>\n <Col span={12}>\n <Slider\n min={0}\n max={1}\n onChange={onChange}\n value={typeof inputValue === 'number' ? inputValue : 0}\n step={0.01}\n />\n </Col>\n <Col span={4}>\n <InputNumber\n min={0}\n max={1}\n style={{ margin: '0 16px' }}\n step={0.01}\n value={inputValue}\n onChange={onChange}\n />\n </Col>\n </Row>\n );\n};\n\nconst App: React.FC = () => (\n <Space style={{ width: '100%' }} direction=\"vertical\">\n <IntegerStep />\n <DecimalStep />\n </Space>\n);\n\nexport default App;\n";},"5f437b44":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d6a9f41a");var o='import React from \'react\';\nimport { SmileOutlined } from \'@ant-design/icons\';\nimport {\n Cascader,\n DatePicker,\n Form,\n Input,\n InputNumber,\n Mentions,\n Select,\n TimePicker,\n TreeSelect,\n} from \'antd\';\n\nconst { Option } = Select;\n\nconst formItemLayout = {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 6 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 14 },\n },\n};\n\nconst App: React.FC = () => (\n <Form {...formItemLayout} style={{ maxWidth: 600 }}>\n <Form.Item\n label="Fail"\n validateStatus="error"\n help="Should be combination of numbers & alphabets"\n >\n <Input placeholder="unavailable choice" id="error" />\n </Form.Item>\n\n <Form.Item label="Warning" validateStatus="warning">\n <Input placeholder="Warning" id="warning" prefix={<SmileOutlined />} />\n </Form.Item>\n\n <Form.Item\n label="Validating"\n hasFeedback\n validateStatus="validating"\n help="The information is being validated..."\n >\n <Input placeholder="I\'m the content is being validated" id="validating" />\n </Form.Item>\n\n <Form.Item label="Success" hasFeedback validateStatus="success">\n <Input placeholder="I\'m the content" id="success" />\n </Form.Item>\n\n <Form.Item label="Warning" hasFeedback validateStatus="warning">\n <Input placeholder="Warning" id="warning2" />\n </Form.Item>\n\n <Form.Item\n label="Fail"\n hasFeedback\n validateStatus="error"\n help="Should be combination of numbers & alphabets"\n >\n <Input placeholder="unavailable choice" id="error2" />\n </Form.Item>\n\n <Form.Item label="Success" hasFeedback validateStatus="success">\n <DatePicker style={{ width: \'100%\' }} />\n </Form.Item>\n\n <Form.Item label="Warning" hasFeedback validateStatus="warning">\n <TimePicker style={{ width: \'100%\' }} />\n </Form.Item>\n\n <Form.Item label="Error" hasFeedback validateStatus="error">\n <DatePicker.RangePicker style={{ width: \'100%\' }} />\n </Form.Item>\n\n <Form.Item label="Error" hasFeedback validateStatus="error">\n <Select placeholder="I\'m Select" allowClear>\n <Option value="1">Option 1</Option>\n <Option value="2">Option 2</Option>\n <Option value="3">Option 3</Option>\n </Select>\n </Form.Item>\n\n <Form.Item\n label="Validating"\n hasFeedback\n validateStatus="error"\n help="Something breaks the rule."\n >\n <Cascader placeholder="I\'m Cascader" options={[{ value: \'xx\', label: \'xx\' }]} allowClear />\n </Form.Item>\n\n <Form.Item label="Warning" hasFeedback validateStatus="warning" help="Need to be checked">\n <TreeSelect\n placeholder="I\'m TreeSelect"\n treeData={[{ value: \'xx\', label: \'xx\' }]}\n allowClear\n />\n </Form.Item>\n\n <Form.Item label="inline" style={{ marginBottom: 0 }}>\n <Form.Item\n validateStatus="error"\n help="Please select right date"\n style={{ display: \'inline-block\', width: \'calc(50% - 12px)\' }}\n >\n <DatePicker />\n </Form.Item>\n <span\n style={{ display: \'inline-block\', width: \'24px\', lineHeight: \'32px\', textAlign: \'center\' }}\n >\n -\n </span>\n <Form.Item style={{ display: \'inline-block\', width: \'calc(50% - 12px)\' }}>\n <DatePicker />\n </Form.Item>\n </Form.Item>\n\n <Form.Item label="Success" hasFeedback validateStatus="success">\n <InputNumber style={{ width: \'100%\' }} />\n </Form.Item>\n\n <Form.Item label="Success" hasFeedback validateStatus="success">\n <Input allowClear placeholder="with allowClear" />\n </Form.Item>\n\n <Form.Item label="Warning" hasFeedback validateStatus="warning">\n <Input.Password placeholder="with input password" />\n </Form.Item>\n\n <Form.Item label="Error" hasFeedback validateStatus="error">\n <Input.Password allowClear placeholder="with input password and allowClear" />\n </Form.Item>\n\n <Form.Item label="Success" hasFeedback validateStatus="success">\n <Input.OTP />\n </Form.Item>\n <Form.Item label="Warning" hasFeedback validateStatus="warning">\n <Input.OTP />\n </Form.Item>\n\n <Form.Item label="Error" hasFeedback validateStatus="error">\n <Input.OTP />\n </Form.Item>\n\n <Form.Item label="Fail" validateStatus="error" hasFeedback>\n <Mentions />\n </Form.Item>\n\n <Form.Item label="Fail" validateStatus="error" hasFeedback help="Should have something">\n <Input.TextArea allowClear showCount />\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},"5f5425ef":function(n,e,t){},"5f56afff":function(n,e,t){},"5f5a90f0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f886867c");var o="import React, { useState } from 'react';\nimport { Button, Radio, Slider, Space } from 'antd';\nimport type { ConfigProviderProps } from 'antd';\n\ntype SizeType = ConfigProviderProps['componentSize'];\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<SizeType | [SizeType, SizeType] | 'customize'>('small');\n const [customSize, setCustomSize] = React.useState<number>(0);\n return (\n <>\n <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>\n {['small', 'middle', 'large', 'customize'].map((item) => (\n <Radio key={item} value={item}>\n {item}\n </Radio>\n ))}\n </Radio.Group>\n <br />\n <br />\n {size === 'customize' && (\n <>\n <Slider value={customSize} onChange={setCustomSize} />\n <br />\n </>\n )}\n <Space size={size !== 'customize' ? size : customSize}>\n <Button type=\"primary\">Primary</Button>\n <Button>Default</Button>\n <Button type=\"dashed\">Dashed</Button>\n <Button type=\"link\">Link</Button>\n </Space>\n </>\n );\n};\n\nexport default App;\n";},"5f78353f":function(n,e,t){},"5f7b8dcd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3ccd83ea");var o='import React from \'react\';\nimport { Button, notification } from \'antd\';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = notification;\n\nexport default () => (\n <InternalPanel\n message="Hello World!"\n description="Hello World?"\n type="success"\n actions={\n <Button type="primary" size="small">\n My Button\n </Button>\n }\n />\n);\n';},"5f7f04f3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8c8af42c");var o="import React from 'react';\nimport { Button, notification, Space } from 'antd';\n\ntype NotificationType = 'success' | 'info' | 'warning' | 'error';\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotificationWithIcon = (type: NotificationType) => {\n api[type]({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n });\n };\n\n return (\n <>\n {contextHolder}\n <Space>\n <Button onClick={() => openNotificationWithIcon('success')}>Success</Button>\n <Button onClick={() => openNotificationWithIcon('info')}>Info</Button>\n <Button onClick={() => openNotificationWithIcon('warning')}>Warning</Button>\n <Button onClick={() => openNotificationWithIcon('error')}>Error</Button>\n </Space>\n </>\n );\n};\n\nexport default App;\n";},"5f869ad8":function(n,e,t){},"5f8855a4":function(n,e,t){},"5f8b319e":function(n,e,t){},"5f8d294f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("df98726e");var o="import React from 'react';\nimport { Collapse, Divider } from 'antd';\n\nconst 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`;\n\nconst App: React.FC = () => (\n <>\n <Divider orientation=\"left\">Default Size</Divider>\n <Collapse\n items={[{ key: '1', label: 'This is default size panel header', children: <p>{text}</p> }]}\n />\n <Divider orientation=\"left\">Small Size</Divider>\n <Collapse\n size=\"small\"\n items={[{ key: '1', label: 'This is small size panel header', children: <p>{text}</p> }]}\n />\n <Divider orientation=\"left\">Large Size</Divider>\n <Collapse\n size=\"large\"\n items={[{ key: '1', label: 'This is large size panel header', children: <p>{text}</p> }]}\n />\n </>\n);\n\nexport default App;\n";},"5fc276af":function(n,e,t){},"5fc3eaea":function(n,e,t){},"5fd028c3":function(n,e,t){},"602fb5f5":function(n,e,t){},"603a3ecf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fbf17e09");var o="import React from 'react';\nimport { Calendar, ConfigProvider } from 'antd';\nimport type { CalendarProps } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\n/** Test usage. Do not use in your production. */\nexport default () => {\n const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {\n console.log(value.format('YYYY-MM-DD'), mode);\n };\n\n return (\n <ConfigProvider\n theme={{\n components: {\n Calendar: {\n fullBg: 'red',\n fullPanelBg: 'green',\n itemActiveBg: 'black',\n },\n },\n }}\n >\n <Calendar onPanelChange={onPanelChange} />\n <br />\n <Calendar onPanelChange={onPanelChange} fullscreen={false} />\n </ConfigProvider>\n );\n};\n";},"6042aa7d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9b5e6059");var o='import React from \'react\';\nimport { Button, ConfigProvider, Result } from \'antd\';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Result: {\n titleFontSize: 18,\n subtitleFontSize: 14,\n iconFontSize: 48,\n extraMargin: `12px 0 0 0`,\n },\n },\n }}\n >\n <Result\n status="success"\n title="Successfully Purchased Cloud Server ECS!"\n subTitle="Order number: 2017182818828182881 Cloud server configuration takes 1-5 minutes, please wait."\n extra={[\n <Button type="primary" key="console">\n Go Console\n </Button>,\n <Button key="buy">Buy Again</Button>,\n ]}\n />\n </ConfigProvider>\n);\n\nexport default App;\n';},60525680:function(n,e,t){},60674199:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("780271da");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { TableColumnsType } from 'antd';\nimport { Badge, Dropdown, Space, Table } from 'antd';\n\ninterface ExpandedDataType {\n key: React.Key;\n date: string;\n name: string;\n upgradeNum: string;\n}\n\ninterface DataType {\n key: React.Key;\n name: string;\n platform: string;\n version: string;\n upgradeNum: number;\n creator: string;\n createdAt: string;\n}\n\nconst items = [\n { key: '1', label: 'Action 1' },\n { key: '2', label: 'Action 2' },\n];\n\nconst expandDataSource = Array.from({ length: 3 }).map<ExpandedDataType>((_, i) => ({\n key: i.toString(),\n date: '2014-12-24 23:12:00',\n name: 'This is production name',\n upgradeNum: 'Upgraded: 56',\n}));\n\nconst dataSource = Array.from({ length: 3 }).map<DataType>((_, i) => ({\n key: i.toString(),\n name: 'Screen',\n platform: 'iOS',\n version: '10.3.4.5654',\n upgradeNum: 500,\n creator: 'Jack',\n createdAt: '2014-12-24 23:12:00',\n}));\n\nconst expandColumns: TableColumnsType<ExpandedDataType> = [\n { title: 'Date', dataIndex: 'date', key: 'date' },\n { title: 'Name', dataIndex: 'name', key: 'name' },\n {\n title: 'Status',\n key: 'state',\n render: () => <Badge status=\"success\" text=\"Finished\" />,\n },\n { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n {\n title: 'Action',\n key: 'operation',\n render: () => (\n <Space size=\"middle\">\n <a>Pause</a>\n <a>Stop</a>\n <Dropdown menu={{ items }}>\n <a>\n More <DownOutlined />\n </a>\n </Dropdown>\n </Space>\n ),\n },\n];\n\nconst columns: TableColumnsType<DataType> = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Platform', dataIndex: 'platform', key: 'platform' },\n { title: 'Version', dataIndex: 'version', key: 'version' },\n { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n { title: 'Creator', dataIndex: 'creator', key: 'creator' },\n { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },\n { title: 'Action', key: 'operation', render: () => <a>Publish</a> },\n];\n\nconst expandedRowRender = () => (\n <Table<ExpandedDataType>\n columns={expandColumns}\n dataSource={expandDataSource}\n pagination={false}\n />\n);\n\nconst App: React.FC = () => (\n <>\n <Table<DataType>\n columns={columns}\n expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}\n dataSource={dataSource}\n />\n <Table<DataType>\n columns={columns}\n expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}\n dataSource={dataSource}\n size=\"middle\"\n />\n <Table<DataType>\n columns={columns}\n expandable={{ expandedRowRender, defaultExpandedRowKeys: ['0'] }}\n dataSource={dataSource}\n size=\"small\"\n />\n </>\n);\n\nexport default App;\n";},"60854a5e":function(n,e,t){},"60a7d7fe":function(n,e,t){},"60c82f9e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0a70b260");var o="import React, { useState } from 'react';\nimport { Button, Flex, Segmented } from 'antd';\n\nconst Demo: React.FC = () => {\n const [options, setOptions] = useState(['Daily', 'Weekly', 'Monthly']);\n const [moreLoaded, setMoreLoaded] = useState(false);\n\n const handleLoadOptions = () => {\n setOptions((prev) => [...prev, 'Quarterly', 'Yearly']);\n setMoreLoaded(true);\n };\n\n return (\n <Flex gap=\"small\" align=\"flex-start\" vertical>\n <Segmented options={options} />\n <Button type=\"primary\" disabled={moreLoaded} onClick={handleLoadOptions}>\n Load more options\n </Button>\n </Flex>\n );\n};\n\nexport default Demo;\n";},"60ed14ae":function(n,e,t){},"61017e59":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("16da1f00");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableProps } from 'antd';\n\ninterface DataType {\n key: string;\n name: string;\n money: string;\n address: string;\n}\n\nconst columns: TableProps<DataType>['columns'] = [\n {\n title: 'Name',\n dataIndex: 'name',\n render: (text) => <a>{text}</a>,\n },\n {\n title: 'Cash Assets',\n className: 'column-money',\n dataIndex: 'money',\n align: 'right',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n money: '\uFFE5300,000.00',\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n money: '\uFFE51,256,000.00',\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n money: '\uFFE5120,000.00',\n address: 'Sydney No. 1 Lake Park',\n },\n];\n\nconst App: React.FC = () => (\n <Table<DataType>\n columns={columns}\n dataSource={data}\n bordered\n title={() => 'Header'}\n footer={() => 'Footer'}\n />\n);\n\nexport default App;\n";},"61098f1a":function(n,e,t){},"611f0f5a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6b80b78e");var o="import React from 'react';\nimport { Checkbox, Popover } from 'antd';\n\nconst App: React.FC = () => (\n <div style={{ padding: 56 }}>\n <Popover content=\"xxxx\" trigger=\"hover\">\n <Checkbox disabled checked />\n </Popover>\n </div>\n);\n\nexport default App;\n";},"616a6d18":function(n,e,t){},"618e7964":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("59f42d13");var o='import React, { useState } from \'react\';\nimport { DatePicker, Space } from \'antd\';\nimport type { Dayjs } from \'dayjs\';\n\nconst App: React.FC = () => {\n const [startValue, setStartValue] = useState<Dayjs | null>(null);\n const [endValue, setEndValue] = useState<Dayjs | null>(null);\n const [endOpen, setEndOpen] = useState(false);\n\n const disabledStartDate = (startDate: Dayjs) => {\n if (!startDate || !endValue) {\n return false;\n }\n return startDate.valueOf() > endValue.valueOf();\n };\n\n const disabledEndDate = (endDate: Dayjs) => {\n if (!endDate || !startValue) {\n return false;\n }\n return endDate.valueOf() <= startValue.valueOf();\n };\n\n const handleStartOpenChange = (open: boolean) => {\n if (!open) {\n setEndOpen(true);\n }\n };\n\n const handleEndOpenChange = (open: boolean) => {\n setEndOpen(open);\n };\n\n return (\n <Space>\n <DatePicker\n disabledDate={disabledStartDate}\n showTime\n format="YYYY-MM-DD HH:mm:ss"\n value={startValue}\n placeholder="Start"\n onChange={setStartValue}\n onOpenChange={handleStartOpenChange}\n />\n <DatePicker\n disabledDate={disabledEndDate}\n showTime\n format="YYYY-MM-DD HH:mm:ss"\n value={endValue}\n placeholder="End"\n onChange={setEndValue}\n open={endOpen}\n onOpenChange={handleEndOpenChange}\n />\n </Space>\n );\n};\n\nexport default App;\n';},"6195ed17":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("239e5624");var o="import React, { useState } from 'react';\nimport { LoadingOutlined, PlusOutlined } from '@ant-design/icons';\nimport { Flex, message, Upload } from 'antd';\nimport type { GetProp, UploadProps } from 'antd';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst getBase64 = (img: FileType, callback: (url: string) => void) => {\n const reader = new FileReader();\n reader.addEventListener('load', () => callback(reader.result as string));\n reader.readAsDataURL(img);\n};\n\nconst beforeUpload = (file: FileType) => {\n const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';\n if (!isJpgOrPng) {\n message.error('You can only upload JPG/PNG file!');\n }\n const isLt2M = file.size / 1024 / 1024 < 2;\n if (!isLt2M) {\n message.error('Image must smaller than 2MB!');\n }\n return isJpgOrPng && isLt2M;\n};\n\nconst App: React.FC = () => {\n const [loading, setLoading] = useState(false);\n const [imageUrl, setImageUrl] = useState<string>();\n\n const handleChange: UploadProps['onChange'] = (info) => {\n if (info.file.status === 'uploading') {\n setLoading(true);\n return;\n }\n if (info.file.status === 'done') {\n // Get this url from response in real world.\n getBase64(info.file.originFileObj as FileType, (url) => {\n setLoading(false);\n setImageUrl(url);\n });\n }\n };\n\n const uploadButton = (\n <button style={{ border: 0, background: 'none' }} type=\"button\">\n {loading ? <LoadingOutlined /> : <PlusOutlined />}\n <div style={{ marginTop: 8 }}>Upload</div>\n </button>\n );\n\n return (\n <Flex gap=\"middle\" wrap>\n <Upload\n name=\"avatar\"\n listType=\"picture-card\"\n className=\"avatar-uploader\"\n showUploadList={false}\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n beforeUpload={beforeUpload}\n onChange={handleChange}\n >\n {imageUrl ? <img src={imageUrl} alt=\"avatar\" style={{ width: '100%' }} /> : uploadButton}\n </Upload>\n <Upload\n name=\"avatar\"\n listType=\"picture-circle\"\n className=\"avatar-uploader\"\n showUploadList={false}\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n beforeUpload={beforeUpload}\n onChange={handleChange}\n >\n {imageUrl ? <img src={imageUrl} alt=\"avatar\" style={{ width: '100%' }} /> : uploadButton}\n </Upload>\n </Flex>\n );\n};\n\nexport default App;\n";},"621c41d3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("67259174");var o="import React from 'react';\nimport { Image } from 'antd';\n\nconst App: React.FC = () => (\n <Image.PreviewGroup\n preview={{\n onChange: (current, prev) => console.log(`current index: ${current}, prev index: ${prev}`),\n }}\n >\n <Image width={200} src=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\" />\n <Image\n width={200}\n src=\"https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg\"\n />\n </Image.PreviewGroup>\n);\n\nexport default App;\n";},"622b79c5":function(n,e,t){},"624d091e":function(n,e,t){},"625f4f0a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a068abcd");var o="import React from 'react';\nimport { FloatButton } from 'antd';\n\nconst App: React.FC = () => (\n <div style={{ height: '300vh', padding: 10 }}>\n <div>Scroll to bottom</div>\n <div>Scroll to bottom</div>\n <div>Scroll to bottom</div>\n <div>Scroll to bottom</div>\n <div>Scroll to bottom</div>\n <div>Scroll to bottom</div>\n <div>Scroll to bottom</div>\n <FloatButton.BackTop />\n </div>\n);\n\nexport default App;\n";},"626a3b02":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ea30428b");var o="import React, { useState } from 'react';\nimport { Button, message, Popconfirm, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [condition, setCondition] = useState(true);\n\n const changeCondition = (checked: boolean) => {\n setCondition(checked);\n };\n\n const confirm = () => {\n setOpen(false);\n message.success('Next step.');\n };\n\n const cancel = () => {\n setOpen(false);\n message.error('Click on cancel.');\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n if (!newOpen) {\n setOpen(newOpen);\n return;\n }\n // Determining condition before show the popconfirm.\n console.log(condition);\n if (condition) {\n confirm(); // next step\n } else {\n setOpen(newOpen);\n }\n };\n\n return (\n <div>\n <Popconfirm\n title=\"Delete the task\"\n description=\"Are you sure to delete this task?\"\n open={open}\n onOpenChange={handleOpenChange}\n onConfirm={confirm}\n onCancel={cancel}\n okText=\"Yes\"\n cancelText=\"No\"\n >\n <Button danger>Delete a task</Button>\n </Popconfirm>\n <br />\n <br />\n Whether directly execute\uFF1A\n <Switch defaultChecked onChange={changeCondition} />\n </div>\n );\n};\n\nexport default App;\n";},"630605db":function(n,e,t){},"636f786a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bf47cb83");var o="import React, { useState } from 'react';\nimport { Button, ConfigProvider, Modal, Space } from 'antd';\nimport { createStyles, useTheme } from 'antd-style';\n\nconst useStyle = createStyles(({ token }) => ({\n 'my-modal-body': {\n background: token.blue1,\n padding: token.paddingSM,\n },\n 'my-modal-mask': {\n boxShadow: `inset 0 0 15px #fff`,\n },\n 'my-modal-header': {\n borderBottom: `1px dotted ${token.colorPrimary}`,\n },\n 'my-modal-footer': {\n color: token.colorPrimary,\n },\n 'my-modal-content': {\n border: '1px solid #333',\n },\n}));\n\nconst App: React.FC = () => {\n const [isModalOpen, setIsModalOpen] = useState([false, false]);\n const { styles } = useStyle();\n const token = useTheme();\n\n const toggleModal = (idx: number, target: boolean) => {\n setIsModalOpen((p) => {\n p[idx] = target;\n return [...p];\n });\n };\n\n const classNames = {\n body: styles['my-modal-body'],\n mask: styles['my-modal-mask'],\n header: styles['my-modal-header'],\n footer: styles['my-modal-footer'],\n content: styles['my-modal-content'],\n };\n\n const modalStyles = {\n header: {\n borderLeft: `5px solid ${token.colorPrimary}`,\n borderRadius: 0,\n paddingInlineStart: 5,\n },\n body: {\n boxShadow: 'inset 0 0 5px #999',\n borderRadius: 5,\n },\n mask: {\n backdropFilter: 'blur(10px)',\n },\n footer: {\n borderTop: '1px solid #333',\n },\n content: {\n boxShadow: '0 0 30px #999',\n },\n };\n\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={() => toggleModal(0, true)}>\n Open Modal\n </Button>\n <Button type=\"primary\" onClick={() => toggleModal(1, true)}>\n ConfigProvider\n </Button>\n </Space>\n <Modal\n title=\"Basic Modal\"\n open={isModalOpen[0]}\n onOk={() => toggleModal(0, false)}\n onCancel={() => toggleModal(0, false)}\n footer=\"Footer\"\n classNames={classNames}\n styles={modalStyles}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n <ConfigProvider\n modal={{\n classNames,\n styles: modalStyles,\n }}\n >\n <Modal\n title=\"Basic Modal\"\n open={isModalOpen[1]}\n onOk={() => toggleModal(1, false)}\n onCancel={() => toggleModal(1, false)}\n footer=\"Footer\"\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},"636fb801":function(n,e,t){},"63704cd0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b85d9b21");var o="import React from 'react';\nimport ClockCircleOutlined from '@ant-design/icons/ClockCircleOutlined';\nimport { InputNumber, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <InputNumber status=\"error\" style={{ width: '100%' }} />\n <InputNumber status=\"warning\" style={{ width: '100%' }} />\n <InputNumber status=\"error\" style={{ width: '100%' }} prefix={<ClockCircleOutlined />} />\n <InputNumber status=\"warning\" style={{ width: '100%' }} prefix={<ClockCircleOutlined />} />\n </Space>\n);\n\nexport default App;\n";},"6388458e":function(n,e,t){},"63c25060":function(n,e,t){},"63e5194c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("67b8210d");var o="import React from 'react';\nimport { Tooltip } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20 (\u5305\u542B\u7BAD\u5934\u3001\u5185\u5BB9\u5143\u7D20)',\n body: '\u5185\u5BB9\u5143\u7D20',\n },\n en: {\n root: 'Root element (including arrows, content elements)',\n body: 'Body element',\n },\n};\n\nconst BlockList: React.FC<React.PropsWithChildren> = (props: any) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n\n return (\n <div ref={divRef} style={{ position: 'absolute', marginTop: 60 }}>\n <Tooltip\n title=\"prompt text\"\n open\n placement=\"top\"\n autoAdjustOverflow={false}\n getPopupContainer={() => divRef.current}\n {...props}\n />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Tooltip\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.23.0' },\n { name: 'body', desc: locale.body, version: '5.23.0' },\n ]}\n >\n <BlockList />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},"63ffe012":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("078f22c2");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport { Dropdown, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space>\n <Dropdown.Button icon={<DownOutlined />} menu={{ items: [] }}>\n Submit\n </Dropdown.Button>\n </Space>\n);\n\nexport default App;\n";},"64240c30":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fc27aaa7");var o='import React, { useMemo, useState } from \'react\';\nimport { Button, ConfigProvider, Flex, Segmented, Tooltip } from \'antd\';\nimport type { TooltipProps } from \'antd\';\n\nconst text = <span>prompt text</span>;\n\nconst buttonWidth = 80;\n\nconst App: React.FC = () => {\n const [arrow, setArrow] = useState<\'Show\' | \'Hide\' | \'Center\'>(\'Show\');\n\n const mergedArrow = useMemo<TooltipProps[\'arrow\']>(() => {\n if (arrow === \'Hide\') {\n return false;\n }\n\n if (arrow === \'Show\') {\n return true;\n }\n\n return {\n pointAtCenter: true,\n };\n }, [arrow]);\n\n return (\n <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>\n <Segmented\n value={arrow}\n options={[\'Show\', \'Hide\', \'Center\']}\n onChange={setArrow}\n style={{ marginBottom: 24 }}\n />\n <Flex vertical justify="center" align="center" className="demo">\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Tooltip placement="topLeft" title={text} arrow={mergedArrow}>\n <Button>TL</Button>\n </Tooltip>\n <Tooltip placement="top" title={text} arrow={mergedArrow}>\n <Button>Top</Button>\n </Tooltip>\n <Tooltip placement="topRight" title={text} arrow={mergedArrow}>\n <Button>TR</Button>\n </Tooltip>\n </Flex>\n <Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">\n <Flex align="center" vertical>\n <Tooltip placement="leftTop" title={text} arrow={mergedArrow}>\n <Button>LT</Button>\n </Tooltip>\n <Tooltip placement="left" title={text} arrow={mergedArrow}>\n <Button>Left</Button>\n </Tooltip>\n <Tooltip placement="leftBottom" title={text} arrow={mergedArrow}>\n <Button>LB</Button>\n </Tooltip>\n </Flex>\n <Flex align="center" vertical>\n <Tooltip placement="rightTop" title={text} arrow={mergedArrow}>\n <Button>RT</Button>\n </Tooltip>\n <Tooltip placement="right" title={text} arrow={mergedArrow}>\n <Button>Right</Button>\n </Tooltip>\n <Tooltip placement="rightBottom" title={text} arrow={mergedArrow}>\n <Button>RB</Button>\n </Tooltip>\n </Flex>\n </Flex>\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Tooltip placement="bottomLeft" title={text} arrow={mergedArrow}>\n <Button>BL</Button>\n </Tooltip>\n <Tooltip placement="bottom" title={text} arrow={mergedArrow}>\n <Button>Bottom</Button>\n </Tooltip>\n <Tooltip placement="bottomRight" title={text} arrow={mergedArrow}>\n <Button>BR</Button>\n </Tooltip>\n </Flex>\n </Flex>\n </ConfigProvider>\n );\n};\n\nexport default App;\n';},"644a5c38":function(n,e,t){},"6469c186":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9af0c292");var o="import React from 'react';\nimport { Descriptions } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'UserName',\n children: 'Zhou Maomao',\n },\n {\n key: '2',\n label: 'Telephone',\n children: '1810000000',\n },\n {\n key: '3',\n label: 'Live',\n children: 'Hangzhou, Zhejiang',\n },\n {\n key: '4',\n label: 'Remark',\n children: 'empty',\n },\n {\n key: '5',\n label: 'Address',\n children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',\n },\n];\n\nconst App: React.FC = () => <Descriptions title=\"User Info\" items={items} />;\n\nexport default App;\n";},"6480dfc0":function(n,e,t){},64984701:function(n,e,t){},"64a13c18":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("31952cfe");var o="import React from 'react';\nimport { Anchor } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <div style={{ padding: '20px' }}>\n <Anchor\n direction=\"horizontal\"\n items={[\n {\n key: 'part-1',\n href: '#part-1',\n title: 'Part 1',\n },\n {\n key: 'part-2',\n href: '#part-2',\n title: 'Part 2',\n },\n {\n key: 'part-3',\n href: '#part-3',\n title: 'Part 3',\n },\n ]}\n />\n </div>\n <div>\n <div\n id=\"part-1\"\n style={{\n width: '100vw',\n height: '100vh',\n textAlign: 'center',\n background: 'rgba(0,255,0,0.02)',\n }}\n />\n <div\n id=\"part-2\"\n style={{\n width: '100vw',\n height: '100vh',\n textAlign: 'center',\n background: 'rgba(0,0,255,0.02)',\n }}\n />\n <div\n id=\"part-3\"\n style={{ width: '100vw', height: '100vh', textAlign: 'center', background: '#FFFBE9' }}\n />\n </div>\n </>\n);\n\nexport default App;\n";},"64c7cd5a":function(n,e,t){},"64da9e30":function(n,e,t){},"64fdeb0c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a6e7809e");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, message, Upload } from 'antd';\n\nconst props: UploadProps = {\n beforeUpload: (file) => {\n const isPNG = file.type === 'image/png';\n if (!isPNG) {\n message.error(`${file.name} is not a png file`);\n }\n return isPNG || Upload.LIST_IGNORE;\n },\n onChange: (info) => {\n console.log(info.fileList);\n },\n};\n\nconst App: React.FC = () => (\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Upload png only</Button>\n </Upload>\n);\n\nexport default App;\n";},"64fe9a45":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("94465b23");var o="import React from 'react';\nimport { ConfigProvider, Mentions } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalMentions } = Mentions;\n\nconst options = [\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n];\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: { Mentions: { dropdownHeight: 500, controlItemWidth: 300, zIndexPopup: 1000 } },\n }}\n >\n <InternalMentions style={{ width: '100%' }} value=\"@\" options={options} />\n </ConfigProvider>\n);\n\nexport default App;\n";},"64feee63":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("213e85ac");var o="import React from 'react';\nimport { ConfigProvider, Timeline } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Timeline: {\n tailColor: 'red',\n tailWidth: 10,\n dotBorderWidth: 1,\n dotBg: 'green',\n itemPaddingBottom: 10,\n },\n },\n }}\n >\n <Timeline\n items={[\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n children: 'Solve initial network problems 2015-09-01',\n },\n {\n children: 'Technical testing 2015-09-01',\n },\n {\n children: 'Network problems being solved 2015-09-01',\n },\n ]}\n />\n </ConfigProvider>\n);\n\nexport default App;\n";},"650766cd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3b55336f");var o='import React from \'react\';\nimport { Flex, Splitter, Typography } from \'antd\';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify="center" align="center" style={{ height: \'100%\' }}>\n <Typography.Title type="secondary" level={5} style={{ whiteSpace: \'nowrap\' }}>\n {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => (\n <Splitter style={{ height: 200, boxShadow: \'0 0 10px rgba(0, 0, 0, 0.1)\' }}>\n <Splitter.Panel defaultSize="40%" min="20%" max="70%">\n <Desc text="First" />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text="Second" />\n </Splitter.Panel>\n </Splitter>\n);\n\nexport default App;\n';},"6511c362":function(n,e,t){},"651869ff":function(n,e,t){},"65d724af":function(n,e,t){},"65d9f52f":function(n,e,t){},"6609d0a7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("39d2d9ff");var o='import React, { useState } from \'react\';\nimport {\n BarChartOutlined,\n DotChartOutlined,\n LineChartOutlined,\n PieChartOutlined,\n} from \'@ant-design/icons\';\nimport type { RadioChangeEvent } from \'antd\';\nimport { Flex, Radio } from \'antd\';\n\nconst App: React.FC = () => {\n const [value, setValue] = useState(1);\n\n const onChange = (e: RadioChangeEvent) => {\n setValue(e.target.value);\n };\n\n return (\n <Radio.Group\n onChange={onChange}\n value={value}\n options={[\n {\n value: 1,\n className: \'option-1\',\n label: (\n <Flex gap="small" justify="center" align="center" vertical>\n <LineChartOutlined style={{ fontSize: 18 }} />\n LineChart\n </Flex>\n ),\n },\n {\n value: 2,\n className: \'option-2\',\n label: (\n <Flex gap="small" justify="center" align="center" vertical>\n <DotChartOutlined style={{ fontSize: 18 }} />\n DotChart\n </Flex>\n ),\n },\n {\n value: 3,\n className: \'option-3\',\n label: (\n <Flex gap="small" justify="center" align="center" vertical>\n <BarChartOutlined style={{ fontSize: 18 }} />\n BarChart\n </Flex>\n ),\n },\n {\n value: 4,\n className: \'option-4\',\n label: (\n <Flex gap="small" justify="center" align="center" vertical>\n <PieChartOutlined style={{ fontSize: 18 }} />\n PieChart\n </Flex>\n ),\n },\n ]}\n />\n );\n};\n\nexport default App;\n';},"66544f8f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b4e30579");var o='import React from \'react\';\nimport { SettingOutlined } from \'@ant-design/icons\';\nimport { Cascader, Input, Select, Space } from \'antd\';\n\nconst { Option } = Select;\n\nconst selectBefore = (\n <Select defaultValue="http://">\n <Option value="http://">http://</Option>\n <Option value="https://">https://</Option>\n </Select>\n);\nconst selectAfter = (\n <Select defaultValue=".com">\n <Option value=".com">.com</Option>\n <Option value=".jp">.jp</Option>\n <Option value=".cn">.cn</Option>\n <Option value=".org">.org</Option>\n </Select>\n);\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />\n <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />\n <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />\n <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />\n <Input\n addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}\n defaultValue="mysite"\n />\n </Space>\n);\n\nexport default App;\n';},"665547cc":function(n,e,t){},"6659a724":function(n,e,t){},66700073:function(n,e,t){},"66ad30e3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("50600201");var o="import React from 'react';\nimport { Button, Flex } from 'antd';\n\nconst Demo: React.FC = () => (\n <Flex wrap gap=\"small\">\n {Array.from({ length: 24 }, (_, i) => (\n <Button key={i} type=\"primary\">\n Button\n </Button>\n ))}\n </Flex>\n);\n\nexport default Demo;\n";},"66c0bc2c":function(n,e,t){},"66d9e803":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e46d1346");var o="import React, { useState } from 'react';\nimport { Alert, Button } from 'antd';\n\nconst { ErrorBoundary } = Alert;\nconst ThrowError: React.FC = () => {\n const [error, setError] = useState<Error>();\n const onClick = () => {\n setError(new Error('An Uncaught Error'));\n };\n\n if (error) {\n throw error;\n }\n return (\n <Button danger onClick={onClick}>\n Click me to throw a error\n </Button>\n );\n};\n\nconst App: React.FC = () => (\n <ErrorBoundary>\n <ThrowError />\n </ErrorBoundary>\n);\n\nexport default App;\n";},"66ea5811":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("785c1195");var o='import React from \'react\';\nimport { LoadingOutlined } from \'@ant-design/icons\';\nimport { Flex, Spin } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex align="center" gap="middle">\n <Spin indicator={<LoadingOutlined spin />} size="small" />\n <Spin indicator={<LoadingOutlined spin />} />\n <Spin indicator={<LoadingOutlined spin />} size="large" />\n <Spin indicator={<LoadingOutlined style={{ fontSize: 48 }} spin />} />\n </Flex>\n);\n\nexport default App;\n';},"66ebc567":function(n,e,t){},"66ed8b29":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("54750542");var o="import React from 'react';\nimport { App, Button, Space } from 'antd';\n\n// Sub page\nconst MyPage = () => {\n const { message, modal, notification } = App.useApp();\n\n const showMessage = () => {\n message.success('Success!');\n };\n\n const showModal = () => {\n modal.warning({\n title: 'This is a warning message',\n content: 'some messages...some messages...',\n });\n };\n\n const showNotification = () => {\n notification.info({\n message: 'Notification topLeft',\n description: 'Hello, Ant Design!!',\n placement: 'topLeft',\n });\n };\n\n return (\n <Space wrap>\n <Button type=\"primary\" onClick={showMessage}>\n Open message\n </Button>\n <Button type=\"primary\" onClick={showModal}>\n Open modal\n </Button>\n <Button type=\"primary\" onClick={showNotification}>\n Open notification\n </Button>\n </Space>\n );\n};\n\n// Entry component\nexport default () => (\n <App>\n <MyPage />\n </App>\n);\n";},"66f56c4a":function(n,e,t){},67259174:function(n,e,t){},67277711:function(n,e,t){},"673426ab":function(n,e,t){},"673f509a":function(n,e,t){},"674d423f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c38575de");var o="import React, { useState } from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value?: string | number | null;\n label: React.ReactNode;\n children?: Option[];\n isLeaf?: boolean;\n}\n\nconst optionLists: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n isLeaf: false,\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n isLeaf: false,\n },\n];\n\nconst App: React.FC = () => {\n const [options, setOptions] = useState<Option[]>(optionLists);\n\n const onChange: CascaderProps<Option>['onChange'] = (value, selectedOptions) => {\n console.log(value, selectedOptions);\n };\n\n const loadData = (selectedOptions: Option[]) => {\n const targetOption = selectedOptions[selectedOptions.length - 1];\n\n // load options lazily\n setTimeout(() => {\n targetOption.children = [\n {\n label: `${targetOption.label} Dynamic 1`,\n value: 'dynamic1',\n },\n {\n label: `${targetOption.label} Dynamic 2`,\n value: 'dynamic2',\n },\n ];\n setOptions([...options]);\n }, 1000);\n };\n\n return <Cascader options={options} loadData={loadData} onChange={onChange} changeOnSelect />;\n};\n\nexport default App;\n";},"6762884e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b5aad532");var o="import React from 'react';\nimport { ConfigProvider, Segmented } from 'antd';\n\nconst Demo: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Segmented: {\n itemColor: '#222',\n itemHoverColor: '#333',\n itemHoverBg: 'rgba(0, 0, 0, 0.06)',\n itemSelectedBg: '#aaa',\n itemActiveBg: '#ccc',\n itemSelectedColor: '#fff',\n },\n },\n }}\n >\n <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />\n </ConfigProvider>\n);\n\nexport default Demo;\n";},"676923fa":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d9c24ddb");var o='import React from \'react\';\nimport { FileTextOutlined } from \'@ant-design/icons\';\nimport { FloatButton } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <FloatButton\n icon={<FileTextOutlined />}\n description="HELP INFO"\n shape="square"\n style={{ insetInlineEnd: 24 }}\n />\n <FloatButton description="HELP INFO" shape="square" style={{ insetInlineEnd: 94 }} />\n <FloatButton\n icon={<FileTextOutlined />}\n description="HELP"\n shape="square"\n style={{ insetInlineEnd: 164 }}\n />\n </>\n);\n\nexport default App;\n';},"67ae6b18":function(n,e,t){},"67b8210d":function(n,e,t){},"67f18212":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b12db157");var o="import React, { useState } from 'react';\nimport { Button, InputNumber, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [value, setValue] = useState<string | number | null>('99');\n\n return (\n <Space>\n <InputNumber min={1} max={10} value={value} onChange={setValue} />\n <Button\n type=\"primary\"\n onClick={() => {\n setValue(99);\n }}\n >\n Reset\n </Button>\n </Space>\n );\n};\n\nexport default App;\n";},"683198ca":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("199244ac");var o="import React, { useState } from 'react';\nimport { Checkbox, Divider, Table } from 'antd';\nimport type { CheckboxOptionType, TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n { title: 'Column 1', dataIndex: 'address', key: '1' },\n { title: 'Column 2', dataIndex: 'address', key: '2' },\n { title: 'Column 3', dataIndex: 'address', key: '3' },\n { title: 'Column 4', dataIndex: 'address', key: '4' },\n { title: 'Column 5', dataIndex: 'address', key: '5' },\n { title: 'Column 6', dataIndex: 'address', key: '6' },\n { title: 'Column 7', dataIndex: 'address', key: '7' },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 40,\n address: 'London Park',\n },\n];\n\nconst defaultCheckedList = columns.map((item) => item.key);\n\nconst App: React.FC = () => {\n const [checkedList, setCheckedList] = useState(defaultCheckedList);\n\n const options = columns.map(({ key, title }) => ({\n label: title,\n value: key,\n }));\n\n const newColumns = columns.map((item) => ({\n ...item,\n hidden: !checkedList.includes(item.key as string),\n }));\n\n return (\n <>\n <Divider>Columns displayed</Divider>\n <Checkbox.Group\n value={checkedList}\n options={options as CheckboxOptionType[]}\n onChange={(value) => {\n setCheckedList(value as string[]);\n }}\n />\n <Table<DataType> columns={newColumns} dataSource={data} style={{ marginTop: 24 }} />\n </>\n );\n};\n\nexport default App;\n";},"68425bf8":function(n,e,t){},"684b5a0d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eccfe71d");var o="import React from 'react';\nimport { Carousel } from 'antd';\n\nconst contentStyle: React.CSSProperties = {\n height: '160px',\n color: '#fff',\n lineHeight: '160px',\n textAlign: 'center',\n background: '#364d79',\n};\n\nconst App: React.FC = () => (\n <Carousel autoplay>\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n);\n\nexport default App;\n";},"68785c49":function(n,e,t){},"68d91120":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("68425bf8");var o='import React, { useState } from \'react\';\nimport type { ConfigProviderProps, RadioChangeEvent } from \'antd\';\nimport { DatePicker, Radio, Space } from \'antd\';\n\ntype SizeType = ConfigProviderProps[\'componentSize\'];\n\nconst { RangePicker } = DatePicker;\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<SizeType>(\'middle\');\n\n const handleSizeChange = (e: RadioChangeEvent) => {\n setSize(e.target.value);\n };\n\n return (\n <Space direction="vertical" size={12}>\n <Radio.Group value={size} onChange={handleSizeChange}>\n <Radio.Button value="large">Large</Radio.Button>\n <Radio.Button value="middle">middle</Radio.Button>\n <Radio.Button value="small">Small</Radio.Button>\n </Radio.Group>\n <DatePicker size={size} />\n <DatePicker size={size} picker="month" />\n <RangePicker size={size} />\n <DatePicker size={size} picker="week" />\n </Space>\n );\n};\n\nexport default App;\n';},"6942931d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("04391e00");var o="import React from 'react';\nimport { Button, Form, Input, InputNumber } from 'antd';\n\nconst layout = {\n labelCol: { span: 8 },\n wrapperCol: { span: 16 },\n};\n\nconst validateMessages = {\n required: '${label} is required!',\n types: {\n email: '${label} is not a valid email!',\n number: '${label} is not a valid number!',\n },\n number: {\n range: '${label} must be between ${min} and ${max}',\n },\n};\n\nconst onFinish = (values: any) => {\n console.log(values);\n};\n\nconst App: React.FC = () => (\n <Form\n {...layout}\n name=\"nest-messages\"\n onFinish={onFinish}\n style={{ maxWidth: 600 }}\n validateMessages={validateMessages}\n >\n <Form.Item name={['user', 'name']} label=\"Name\" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item name={['user', 'email']} label=\"Email\" rules={[{ type: 'email' }]}>\n <Input />\n </Form.Item>\n <Form.Item name={['user', 'age']} label=\"Age\" rules={[{ type: 'number', min: 0, max: 99 }]}>\n <InputNumber />\n </Form.Item>\n <Form.Item name={['user', 'website']} label=\"Website\">\n <Input />\n </Form.Item>\n <Form.Item name={['user', 'introduction']} label=\"Introduction\">\n <Input.TextArea />\n </Form.Item>\n <Form.Item label={null}>\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n";},"69627d0f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d8f94afb");var o='import React from \'react\';\nimport { Divider, Flex, Tag, theme } from \'antd\';\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n return (\n <div style={{ backgroundColor: token.colorBgLayout, padding: token.padding }}>\n <Flex gap="4px 0" wrap>\n <Tag bordered={false}>Tag 1</Tag>\n <Tag bordered={false}>Tag 2</Tag>\n <Tag bordered={false} closable>\n Tag 3\n </Tag>\n <Tag bordered={false} closable>\n Tag 4\n </Tag>\n </Flex>\n <Divider />\n <Flex gap="4px 0" wrap>\n <Tag bordered={false} color="magenta">\n magenta\n </Tag>\n <Tag bordered={false} color="red">\n red\n </Tag>\n <Tag bordered={false} color="volcano">\n volcano\n </Tag>\n <Tag bordered={false} color="orange">\n orange\n </Tag>\n <Tag bordered={false} color="gold">\n gold\n </Tag>\n <Tag bordered={false} color="lime">\n lime\n </Tag>\n <Tag bordered={false} color="green">\n green\n </Tag>\n <Tag bordered={false} color="cyan">\n cyan\n </Tag>\n <Tag bordered={false} color="blue">\n blue\n </Tag>\n <Tag bordered={false} color="geekblue">\n geekblue\n </Tag>\n <Tag bordered={false} color="purple">\n purple\n </Tag>\n </Flex>\n </div>\n );\n};\n\nexport default App;\n';},"6981559e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1f129db1");var o="import React from 'react';\nimport { Slider } from 'antd';\n\nconst onChange = (value: number | number[]) => {\n console.log('onChange: ', value);\n};\n\nconst onChangeComplete = (value: number | number[]) => {\n console.log('onChangeComplete: ', value);\n};\n\nconst App: React.FC = () => (\n <>\n <Slider defaultValue={30} onChange={onChange} onChangeComplete={onChangeComplete} />\n <Slider\n range\n step={10}\n defaultValue={[20, 50]}\n onChange={onChange}\n onChangeComplete={onChangeComplete}\n />\n </>\n);\n\nexport default App;\n";},"699a661e":function(n,e,t){},"69aedf09":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fb4d0940");var o="import React, { useState } from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport { ColorPicker, Space } from 'antd';\n\nconst Demo = () => {\n const [open, setOpen] = useState(false);\n return (\n <Space direction=\"vertical\">\n <ColorPicker defaultValue=\"#1677ff\" showText allowClear />\n <ColorPicker\n defaultValue=\"#1677ff\"\n showText={(color) => <span>Custom Text ({color.toHexString()})</span>}\n />\n <ColorPicker\n defaultValue=\"#1677ff\"\n open={open}\n onOpenChange={setOpen}\n showText={() => (\n <DownOutlined\n rotate={open ? 180 : 0}\n style={{\n color: 'rgba(0, 0, 0, 0.25)',\n }}\n />\n )}\n />\n </Space>\n );\n};\n\nexport default Demo;\n";},"69b85beb":function(n,e,t){},"69ea0ccf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("721fb36c");var o="import React from 'react';\nimport { ClockCircleOutlined } from '@ant-design/icons';\nimport { Timeline } from 'antd';\n\nconst App: React.FC = () => (\n <Timeline\n items={[\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n children: 'Solve initial network problems 2015-09-01',\n },\n {\n dot: <ClockCircleOutlined className=\"timeline-clock-icon\" />,\n color: 'red',\n children: 'Technical testing 2015-09-01',\n },\n {\n children: 'Network problems being solved 2015-09-01',\n },\n ]}\n />\n);\n\nexport default App;\n";},"69ea6a1c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("101070f0");var o='import React from \'react\';\nimport { Popconfirm } from \'antd\';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopconfirm } = Popconfirm;\n\nconst App: React.FC = () => (\n <>\n <InternalPopconfirm title="Are you OK?" description="Does this look good?" />\n <InternalPopconfirm\n title="Are you OK?"\n description="Does this look good?"\n placement="bottomRight"\n style={{ width: 250 }}\n />\n <InternalPopconfirm icon={null} title="Are you OK?" />\n <InternalPopconfirm icon={null} title="Are you OK?" description="Does this look good?" />\n </>\n);\n\nexport default App;\n';},"6a020bfe":function(n,e,t){},"6a05fa53":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("877317ca");var o="import React, { useState } from 'react';\nimport { Button, message, Steps, theme } from 'antd';\n\nconst steps = [\n {\n title: 'First',\n content: 'First-content',\n },\n {\n title: 'Second',\n content: 'Second-content',\n },\n {\n title: 'Last',\n content: 'Last-content',\n },\n];\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n const [current, setCurrent] = useState(0);\n\n const next = () => {\n setCurrent(current + 1);\n };\n\n const prev = () => {\n setCurrent(current - 1);\n };\n\n const items = steps.map((item) => ({ key: item.title, title: item.title }));\n\n const contentStyle: React.CSSProperties = {\n lineHeight: '260px',\n textAlign: 'center',\n color: token.colorTextTertiary,\n backgroundColor: token.colorFillAlter,\n borderRadius: token.borderRadiusLG,\n border: `1px dashed ${token.colorBorder}`,\n marginTop: 16,\n };\n\n return (\n <>\n <Steps current={current} items={items} />\n <div style={contentStyle}>{steps[current].content}</div>\n <div style={{ marginTop: 24 }}>\n {current < steps.length - 1 && (\n <Button type=\"primary\" onClick={() => next()}>\n Next\n </Button>\n )}\n {current === steps.length - 1 && (\n <Button type=\"primary\" onClick={() => message.success('Processing complete!')}>\n Done\n </Button>\n )}\n {current > 0 && (\n <Button style={{ margin: '0 8px' }} onClick={() => prev()}>\n Previous\n </Button>\n )}\n </div>\n </>\n );\n};\n\nexport default App;\n";},"6a11fcb1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3b713522");var o="import React, { useState } from 'react';\nimport { Space, Switch } from 'antd';\n\nconst style: React.CSSProperties = {\n width: 150,\n height: 100,\n background: 'red',\n};\n\nconst App: React.FC = () => {\n const [singleCol, setSingleCol] = useState(false);\n\n return (\n <>\n <Switch\n checked={singleCol}\n onChange={() => {\n setSingleCol(!singleCol);\n }}\n />\n <div style={{ boxShadow: '0 0 5px green' }}>\n <Space style={{ width: singleCol ? 307 : 310, background: 'blue' }} size={[8, 8]} wrap>\n <div style={style} />\n <div style={style} />\n <div style={style} />\n <div style={style} />\n </Space>\n </div>\n </>\n );\n};\n\nexport default App;\n";},"6a5a18af":function(n,e,t){},"6a7915c7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("959dc97e");var o="import React, { useState } from 'react';\nimport { ClockCircleOutlined, DownOutlined } from '@ant-design/icons';\nimport {\n Anchor,\n Badge,\n Button,\n Calendar,\n Card,\n Collapse,\n DatePicker,\n Dropdown,\n Modal,\n Slider,\n Switch,\n Table,\n Tabs,\n Timeline,\n Transfer,\n Tree,\n Typography,\n} from 'antd';\nimport type { TableProps, TransferProps } from 'antd';\nimport type { TransferKey } from 'antd/es/transfer/interface';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport difference from 'lodash/difference';\n\ndayjs.extend(customParseFormat);\n\nconst { Panel } = Collapse;\nconst { TreeNode } = Tree;\nconst { TabPane } = Tabs;\nconst { Meta } = Card;\nconst { Link } = Anchor;\nconst { Text } = Typography;\n\nconst 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`;\n\ninterface DataType {\n key: string;\n title: string;\n description: string;\n disabled: boolean;\n}\n\ninterface RecordType {\n key: string;\n name: string;\n age: number;\n address: string;\n}\n\ninterface DataTableType {\n key: string;\n name: string;\n borrow: number;\n repayment: number;\n}\n\ninterface ExpandDataType {\n key: React.Key;\n date: string;\n name: string;\n upgradeNum: string;\n}\n\ninterface NestDataType {\n key: React.Key;\n name: string;\n platform: string;\n version: string;\n upgradeNum: number;\n creator: string;\n createdAt: string;\n}\n\ninterface FixedDataType {\n key: string;\n name: string;\n age: number;\n address: string;\n}\n\nconst mockData = Array.from({ length: 20 }).map<DataType>((_, i) => ({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n disabled: i % 3 < 1,\n}));\n\nconst oriTargetKeys = mockData\n .filter((item) => Number(item.key) % 3 > 1)\n .map<TransferKey>((item) => item.key);\n\nconst dataSource: RecordType[] = [\n { key: '1', name: 'John Brown', age: 32, address: 'New York No. 1 Lake Park' },\n { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },\n { key: '3', name: 'Joe Black', age: 32, address: 'Sydney No. 1 Lake Park' },\n { key: '4', name: 'Jim Red', age: 32, address: 'London No. 2 Lake Park' },\n];\n\nconst columnsTable: TableProps<DataTableType>['columns'] = [\n { title: 'Name', dataIndex: 'name' },\n { title: 'Borrow', dataIndex: 'borrow' },\n { title: 'Repayment', dataIndex: 'repayment' },\n];\n\nconst summaryDataSource: DataTableType[] = [\n { key: '1', name: 'John Brown', borrow: 10, repayment: 33 },\n { key: '2', name: 'Jim Green', borrow: 100, repayment: 0 },\n { key: '3', name: 'Joe Black', borrow: 10, repayment: 10 },\n { key: '4', name: 'Jim Red', borrow: 75, repayment: 45 },\n];\n\nconst expandDataSource = Array.from({ length: 3 }).map<ExpandDataType>((_, i) => ({\n key: i,\n date: '2014-12-24 23:12:00',\n name: 'This is production name',\n upgradeNum: 'Upgraded: 56',\n}));\n\nconst expandColumns: TableProps<ExpandDataType>['columns'] = [\n { title: 'Date', dataIndex: 'date', key: 'date' },\n { title: 'Name', dataIndex: 'name', key: 'name' },\n {\n title: 'Status',\n key: 'state',\n render: () => (\n <span>\n <Badge status=\"success\" />\n Finished\n </span>\n ),\n },\n { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n {\n title: 'Action',\n dataIndex: 'operation',\n key: 'operation',\n render: () => (\n <span className=\"table-operation\">\n <a>Pause</a>\n <a>Stop</a>\n <Dropdown>\n <a>\n More <DownOutlined />\n </a>\n </Dropdown>\n </span>\n ),\n },\n];\n\nconst expandedRowRender = () => (\n <Table<ExpandDataType> columns={expandColumns} dataSource={expandDataSource} pagination={false} />\n);\n\nconst columnsNest: TableProps<NestDataType>['columns'] = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Platform', dataIndex: 'platform', key: 'platform' },\n { title: 'Version', dataIndex: 'version', key: 'version' },\n { title: 'Upgraded', dataIndex: 'upgradeNum', key: 'upgradeNum' },\n { title: 'Creator', dataIndex: 'creator', key: 'creator' },\n { title: 'Date', dataIndex: 'createdAt', key: 'createdAt' },\n { title: 'Action', key: 'operation', render: () => <a>Publish</a> },\n];\n\nconst nestDataSource = Array.from({ length: 3 }).map<NestDataType>((_, i) => ({\n key: i,\n name: 'Screem',\n platform: 'iOS',\n version: '10.3.4.5654',\n upgradeNum: 500,\n creator: 'Jack',\n createdAt: '2014-12-24 23:12:00',\n}));\n\nconst columnsFixed: TableProps<FixedDataType>['columns'] = [\n { title: 'Full Name', width: 100, dataIndex: 'name', key: 'name', fixed: 'left' },\n { title: 'Age', width: 100, dataIndex: 'age', key: 'age', fixed: 'left' },\n { title: 'Column 1', dataIndex: 'address', key: '1' },\n { title: 'Column 2', dataIndex: 'address', key: '2' },\n { title: 'Column 3', dataIndex: 'address', key: '3' },\n { title: 'Column 4', dataIndex: 'address', key: '4' },\n { title: 'Column 5', dataIndex: 'address', key: '5' },\n { title: 'Column 6', dataIndex: 'address', key: '6' },\n { title: 'Column 7', dataIndex: 'address', key: '7' },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n { title: 'Action', key: 'operation', fixed: 'right', width: 100, render: () => <a>action</a> },\n];\n\nconst fixedDataSource: FixedDataType[] = [\n { key: '1', name: 'John Brown', age: 32, address: 'New York Park' },\n { key: '2', name: 'Jim Green', age: 40, address: 'London Park' },\n];\n\nconst TableTransfer: React.FC<\n Readonly<Partial<Record<'leftColumns' | 'rightColumns', TableProps<DataType>['columns']>>> &\n TransferProps<DataType>\n> = (props) => {\n const { leftColumns, rightColumns, ...restProps } = props;\n return (\n <Transfer<DataType> {...restProps} showSelectAll={false}>\n {(transferProps) => {\n const {\n direction,\n filteredItems,\n onItemSelectAll,\n onItemSelect,\n selectedKeys: listSelectedKeys,\n disabled: listDisabled,\n } = transferProps;\n\n const columns = (direction === 'left' ? leftColumns : rightColumns) ?? [];\n\n const rowSelection: TableProps<DataType>['rowSelection'] = {\n getCheckboxProps: (item) => ({ disabled: listDisabled || item.disabled }),\n onSelectAll(selected, selectedRows) {\n const treeSelectedKeys = selectedRows\n .filter((item) => !item.disabled)\n .map(({ key }) => key);\n const diffKeys = selected\n ? difference(treeSelectedKeys, listSelectedKeys)\n : difference(listSelectedKeys, treeSelectedKeys);\n onItemSelectAll(diffKeys, selected);\n },\n onSelect({ key }, selected) {\n onItemSelect(key, selected);\n },\n selectedRowKeys: listSelectedKeys,\n };\n\n return (\n <Table<DataType>\n id=\"components-transfer-table\"\n rowSelection={rowSelection}\n columns={columns}\n dataSource={filteredItems}\n size=\"small\"\n style={{ pointerEvents: listDisabled ? 'none' : 'auto' }}\n onRow={({ key, disabled: itemDisabled }) => ({\n onClick: () => {\n if (itemDisabled || listDisabled) {\n return;\n }\n onItemSelect(key, !listSelectedKeys.includes(key));\n },\n })}\n />\n );\n }}\n </Transfer>\n );\n};\n\nconst columns: TableProps<RecordType>['columns'] = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n filters: [\n { text: 'Joe', value: 'Joe' },\n { text: 'Jim', value: 'Jim' },\n ],\n filteredValue: null,\n onFilter: (value, record) => record.name.includes(value as string),\n sorter: (a, b) => a.name.length - b.name.length,\n sortOrder: 'ascend',\n ellipsis: true,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n sorter: false,\n sortOrder: 'ascend',\n ellipsis: true,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n filters: [\n { text: 'London', value: 'London' },\n { text: 'New York', value: 'New York' },\n ],\n filteredValue: null,\n onFilter: (value, record) => record.address.includes(value as string),\n sorter: false,\n sortOrder: 'ascend',\n ellipsis: true,\n },\n];\n\nconst tableTransferColumns: TableProps<DataType>['columns'] = [\n { dataIndex: 'title', title: 'Name' },\n { dataIndex: 'description', title: 'Description' },\n];\n\nconst Demo: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [targetKeys, setTargetKeys] = useState<TransferKey[]>(oriTargetKeys);\n const [selectedKeys, setSelectedKeys] = useState<TransferKey[]>([]);\n const [disabled, setDisabled] = useState(false);\n const [showSearch, setShowSearch] = useState(false);\n\n const handleDisable = (isDisabled: boolean) => {\n setDisabled(isDisabled);\n };\n\n const handleTableTransferChange = (nextTargetKeys: TransferKey[]) => {\n setTargetKeys(nextTargetKeys);\n };\n\n const triggerDisable = (isDisabled: boolean) => {\n setDisabled(isDisabled);\n };\n\n const triggerShowSearch = (isShowSearch: boolean) => {\n setShowSearch(isShowSearch);\n };\n\n const handleTransferChange = (keys: TransferKey[]) => {\n setTargetKeys(keys);\n };\n\n const handleTransferSelectChange = (\n sourceSelectedKeys: TransferKey[],\n targetSelectedKeys: TransferKey[],\n ) => {\n setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);\n };\n\n const showModal = () => {\n setOpen(true);\n };\n\n const handleOk = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n console.log(e);\n setOpen(false);\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n console.log(e);\n setOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showModal}>\n Open Modal\n </Button>\n <Modal title=\"Basic Modal\" open={open} onOk={handleOk} onCancel={handleCancel}>\n <Switch\n unCheckedChildren=\"disabled\"\n checkedChildren=\"disabled\"\n checked={disabled}\n onChange={handleDisable}\n style={{ marginBottom: 16 }}\n />\n <Card title=\"Card Title\">\n <Card.Grid>Content</Card.Grid>\n <Card.Grid hoverable={false}>Content</Card.Grid>\n <Card.Grid>Content</Card.Grid>\n <Card.Grid>Content</Card.Grid>\n <Card.Grid>Content</Card.Grid>\n <Card.Grid>Content</Card.Grid>\n <Card.Grid>Content</Card.Grid>\n </Card>\n <Collapse>\n <Panel header=\"This is panel header 1\" key=\"1\">\n <Collapse defaultActiveKey=\"1\">\n <Panel header=\"This is panel nest panel\" key=\"1\">\n <p>{text}</p>\n </Panel>\n </Collapse>\n </Panel>\n <Panel header=\"This is panel header 2\" key=\"2\">\n <p>{text}</p>\n </Panel>\n <Panel header=\"This is panel header 3\" key=\"3\">\n <p>{text}</p>\n </Panel>\n </Collapse>\n <Transfer<DataType>\n dataSource={mockData}\n titles={['Source', 'Target']}\n targetKeys={targetKeys}\n selectedKeys={selectedKeys}\n onChange={handleTransferChange}\n onSelectChange={handleTransferSelectChange}\n render={(item) => item.title}\n disabled={disabled}\n />\n <TableTransfer\n dataSource={mockData}\n targetKeys={targetKeys}\n disabled={disabled}\n showSearch={showSearch}\n leftColumns={tableTransferColumns}\n rightColumns={tableTransferColumns}\n onChange={handleTableTransferChange}\n filterOption={(inputValue: string, item: any) =>\n item.title?.includes(inputValue) || item.tag?.includes(inputValue)\n }\n />\n <Switch\n unCheckedChildren=\"disabled\"\n checkedChildren=\"disabled\"\n checked={disabled}\n onChange={triggerDisable}\n style={{ marginTop: 16 }}\n />\n <Switch\n unCheckedChildren=\"showSearch\"\n checkedChildren=\"showSearch\"\n checked={showSearch}\n onChange={triggerShowSearch}\n style={{ marginTop: 16 }}\n />\n <Anchor>\n <Link href=\"#anchor-demo-basic\" title=\"Basic demo\" />\n <Link href=\"#anchor-demo-static\" title=\"Static demo\" />\n <Link href=\"#anchor-demo-basic\" title=\"Basic demo with Target\" target=\"_blank\" />\n <Link href=\"#API\" title=\"API\">\n <Link href=\"#Anchor-Props\" title=\"Anchor Props\" />\n <Link href=\"#Link-Props\" title=\"Link Props\" />\n </Link>\n </Anchor>\n <Tabs type=\"card\">\n <TabPane tab=\"Tab 1\" key=\"1\">\n Content of Tab Pane 1\n </TabPane>\n <TabPane tab=\"Tab 2\" key=\"2\">\n Content of Tab Pane 2\n </TabPane>\n <TabPane tab=\"Tab 3\" key=\"3\">\n Content of Tab Pane 3\n </TabPane>\n </Tabs>\n <Timeline>\n <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>\n <Timeline.Item>Solve initial network problems 2015-09-01</Timeline.Item>\n <Timeline.Item dot={<ClockCircleOutlined style={{ fontSize: '16px' }} />} color=\"red\">\n Technical testing 2015-09-01\n </Timeline.Item>\n <Timeline.Item>Network problems being solved 2015-09-01</Timeline.Item>\n </Timeline>\n <Calendar />\n <Tree showLine switcherIcon={<DownOutlined />} defaultExpandedKeys={['0-0-0']}>\n <TreeNode title=\"parent 1\" key=\"0-0\">\n <TreeNode title=\"parent 1-0\" key=\"0-0-0\">\n <TreeNode title=\"leaf\" key=\"0-0-0-0\" />\n <TreeNode title=\"leaf\" key=\"0-0-0-1\" />\n <TreeNode title=\"leaf\" key=\"0-0-0-2\" />\n </TreeNode>\n <TreeNode title=\"parent 1-1\" key=\"0-0-1\">\n <TreeNode title=\"leaf\" key=\"0-0-1-0\" />\n </TreeNode>\n <TreeNode title=\"parent 1-2\" key=\"0-0-2\">\n <TreeNode title=\"leaf\" key=\"0-0-2-0\" />\n <TreeNode title=\"leaf\" key=\"0-0-2-1\" />\n </TreeNode>\n </TreeNode>\n </Tree>\n <Table<RecordType> columns={columns} dataSource={dataSource} footer={() => 'Footer'} />\n <Table<DataTableType>\n columns={columnsTable}\n dataSource={summaryDataSource}\n pagination={false}\n id=\"table-demo-summary\"\n bordered\n summary={(pageData) => {\n let totalBorrow = 0;\n let totalRepayment = 0;\n pageData.forEach(({ borrow, repayment }) => {\n totalBorrow += borrow;\n totalRepayment += repayment;\n });\n return (\n <>\n <tr>\n <th>Total</th>\n <td>\n <Text type=\"danger\">{totalBorrow}</Text>\n </td>\n <td>\n <Text>{totalRepayment}</Text>\n </td>\n </tr>\n <tr>\n <th>Balance</th>\n <td colSpan={2}>\n <Text type=\"danger\">{totalBorrow - totalRepayment}</Text>\n </td>\n </tr>\n </>\n );\n }}\n />\n <br />\n <Table<NestDataType>\n columns={columnsNest}\n expandable={{ expandedRowRender }}\n dataSource={nestDataSource}\n />\n <Table<FixedDataType>\n columns={columnsFixed}\n dataSource={fixedDataSource}\n scroll={{ x: 1300, y: 100 }}\n />\n <Card\n hoverable\n style={{ width: 240 }}\n cover={\n <img\n draggable={false}\n alt=\"example\"\n src=\"https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png\"\n />\n }\n >\n <Meta title=\"Europe Street beat\" description=\"www.instagram.com\" />\n </Card>\n <Slider defaultValue={30} />\n <DatePicker defaultValue={dayjs('2015/01/01', 'YYYY/MM/DD')} format=\"YYYY/MM/DD\" />\n <Badge count={5}>\n <a href=\"#\" className=\"head-example\" />\n </Badge>\n </Modal>\n </>\n );\n};\n\nexport default Demo;\n";},"6a8a47a8":function(n,e,t){},"6b0df03b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0a2c4e6b");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader, ConfigProvider } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Cascader: {\n optionSelectedColor: 'red',\n },\n },\n }}\n >\n <Cascader options={options} onChange={onChange} placeholder=\"Please select\" />\n </ConfigProvider>\n);\n\nexport default App;\n";},"6b12212b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("84e3087a");var o='import React from \'react\';\nimport { Button, Flex } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap="small" style={{ width: \'100%\' }}>\n <Button type="primary" block>\n Primary\n </Button>\n <Button block>Default</Button>\n <Button type="dashed" block>\n Dashed\n </Button>\n <Button disabled block>\n disabled\n </Button>\n <Button type="text" block>\n text\n </Button>\n <Button type="link" block>\n Link\n </Button>\n </Flex>\n);\n\nexport default App;\n';},"6b1bfaff":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fad89829");var o='import React from \'react\';\nimport { Button, Col, ConfigProvider, Row, Statistic } from \'antd\';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Statistic: {\n titleFontSize: 20,\n contentFontSize: 20,\n },\n },\n }}\n >\n <Row gutter={16}>\n <Col span={12}>\n <Statistic title="Active Users" value={112893} />\n </Col>\n <Col span={12}>\n <Statistic title="Account Balance (CNY)" value={112893} precision={2} />\n <Button style={{ marginTop: 16 }} type="primary">\n Recharge\n </Button>\n </Col>\n <Col span={12}>\n <Statistic title="Active Users" value={112893} loading />\n </Col>\n </Row>\n </ConfigProvider>\n);\n\nexport default App;\n';},"6b1e4993":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e7df8c15");var o="import React from 'react';\nimport { ExclamationCircleFilled } from '@ant-design/icons';\nimport { Button, Modal, Space } from 'antd';\n\nconst { confirm } = Modal;\n\nconst showConfirm = () => {\n confirm({\n title: 'Do you want to delete these items?',\n icon: <ExclamationCircleFilled />,\n content: 'Some descriptions',\n onOk() {\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n },\n });\n};\n\nconst showPromiseConfirm = () => {\n confirm({\n title: 'Do you want to delete these items?',\n icon: <ExclamationCircleFilled />,\n content: 'When clicked the OK button, this dialog will be closed after 1 second',\n onOk() {\n return new Promise((resolve, reject) => {\n setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);\n }).catch(() => console.log('Oops errors!'));\n },\n onCancel() {},\n });\n};\n\nconst showDeleteConfirm = () => {\n confirm({\n title: 'Are you sure delete this task?',\n icon: <ExclamationCircleFilled />,\n content: 'Some descriptions',\n okText: 'Yes',\n okType: 'danger',\n cancelText: 'No',\n onOk() {\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n },\n });\n};\n\nconst showPropsConfirm = () => {\n confirm({\n title: 'Are you sure delete this task?',\n icon: <ExclamationCircleFilled />,\n content: 'Some descriptions',\n okText: 'Yes',\n okType: 'danger',\n okButtonProps: {\n disabled: true,\n },\n cancelText: 'No',\n onOk() {\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n },\n });\n};\n\nconst App: React.FC = () => (\n <Space wrap>\n <Button onClick={showConfirm}>Confirm</Button>\n <Button onClick={showPromiseConfirm}>With promise</Button>\n <Button onClick={showDeleteConfirm} type=\"dashed\">\n Delete\n </Button>\n <Button onClick={showPropsConfirm} type=\"dashed\">\n With extra props\n </Button>\n </Space>\n);\n\nexport default App;\n";},"6b636e9e":function(n,e,t){},"6b6594f6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c9cb1872");var o="import React from 'react';\nimport { AutoComplete } from 'antd';\n\nconst options = [\n { value: 'Burns Bay Road' },\n { value: 'Downing Street' },\n { value: 'Wall Street' },\n];\n\nconst App: React.FC = () => (\n <AutoComplete\n style={{ width: 200 }}\n options={options}\n placeholder=\"try to type `b`\"\n filterOption={(inputValue, option) =>\n option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1\n }\n />\n);\n\nexport default App;\n";},"6b67b8bc":function(n,e,t){},"6b80b78e":function(n,e,t){},"6b84de30":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f5345a08");var o="import React from 'react';\nimport type { TimePickerProps } from 'antd';\nimport { TimePicker } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst onChange: TimePickerProps['onChange'] = (time, timeString) => {\n console.log(time, timeString);\n};\n\nconst App: React.FC = () => (\n <TimePicker onChange={onChange} defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />\n);\n\nexport default App;\n";},"6bba3f8f":function(n,e,t){},"6bc28576":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("23d423e3");var o='import React from \'react\';\nimport { ConfigProvider, Divider, Typography } from \'antd\';\n\nconst { Title, Paragraph, Text, Link } = Typography;\n\nconst blockContent = `AntV \u662F\u8682\u8681\u96C6\u56E2\u5168\u65B0\u4E00\u4EE3\u6570\u636E\u53EF\u89C6\u5316\u89E3\u51B3\u65B9\u6848\uFF0C\u81F4\u529B\u4E8E\u63D0\u4F9B\u4E00\u5957\u7B80\u5355\u65B9\u4FBF\u3001\u4E13\u4E1A\u53EF\u9760\u3001\u4E0D\u9650\u53EF\u80FD\u7684\u6570\u636E\u53EF\u89C6\u5316\u6700\u4F73\u5B9E\u8DF5\u3002\u5F97\u76CA\u4E8E\u4E30\u5BCC\u7684\u4E1A\u52A1\u573A\u666F\u548C\u7528\u6237\u9700\u6C42\u6311\u6218\uFF0CAntV \u7ECF\u5386\u591A\u5E74\u79EF\u7D2F\u4E0E\u4E0D\u65AD\u6253\u78E8\uFF0C\u5DF2\u652F\u6491\u6574\u4E2A\u963F\u91CC\u96C6\u56E2\u5185\u5916 20000+ \u4E1A\u52A1\u7CFB\u7EDF\uFF0C\u901A\u8FC7\u4E86\u65E5\u5747\u5343\u4E07\u7EA7 UV \u4EA7\u54C1\u7684\u4E25\u82DB\u8003\u9A8C\u3002\n\u6211\u4EEC\u6B63\u5728\u57FA\u7840\u56FE\u8868\uFF0C\u56FE\u5206\u6790\uFF0C\u56FE\u7F16\u8F91\uFF0C\u5730\u7406\u7A7A\u95F4\u53EF\u89C6\u5316\uFF0C\u667A\u80FD\u53EF\u89C6\u5316\u7B49\u5404\u4E2A\u53EF\u89C6\u5316\u7684\u9886\u57DF\u8015\u8018\uFF0C\u6B22\u8FCE\u540C\u8DEF\u4EBA\u4E00\u8D77\u524D\u884C\u3002`;\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Typography: {\n fontWeightStrong: 700,\n titleMarginTop: \'2.4em\',\n titleMarginBottom: \'1em\',\n colorSuccessText: \'#FF0000\',\n colorWarningText: \'#00FF00\',\n colorErrorText: \'#0000FF\',\n },\n },\n }}\n >\n <Typography>\n <Title>Introduction</Title>\n <Paragraph>\n After massive project practice and summaries, Ant Design, a design language for background\n applications, is refined by Ant UED Team, which aims to{\' \'}\n <Text strong>\n uniform the user interface specs for internal background projects, lower the unnecessary\n cost of design differences and implementation and liberate the resources of design and\n front-end development\n </Text>\n .\n </Paragraph>\n <Title level={2}>Guidelines and Resources</Title>\n <Paragraph>\n We supply a series of design principles, practical patterns and high quality design\n resources (<Text code>Sketch</Text> and <Text code>Axure</Text>), to help people create\n their product prototypes beautifully and efficiently.\n </Paragraph>\n\n <Paragraph>\n <ul>\n <li>\n <Link href="/docs/spec/proximity">Principles</Link>\n </li>\n <li>\n <Link href="/docs/spec/overview">Patterns</Link>\n </li>\n <li>\n <Link href="/docs/resources">Resource Download</Link>\n </li>\n </ul>\n </Paragraph>\n\n <Paragraph>\n Press <Text keyboard>Esc</Text> to exit...\n </Paragraph>\n\n <Divider />\n\n <Title>\u4ECB\u7ECD</Title>\n <Paragraph>\n \u968F\u7740\u5546\u4E1A\u5316\u7684\u8D8B\u52BF\uFF0C\u8D8A\u6765\u8D8A\u591A\u7684\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u5BF9\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C\u6709\u4E86\u8FDB\u4E00\u6B65\u7684\u8981\u6C42\u3002\u5E26\u7740\u8FD9\u6837\u7684\u4E00\u4E2A\u7EC8\u6781\u76EE\u6807\uFF0C\u6211\u4EEC\uFF08\u8682\u8681\u96C6\u56E2\u4F53\u9A8C\u6280\u672F\u90E8\uFF09\u7ECF\u8FC7\u5927\u91CF\u7684\u9879\u76EE\u5B9E\u8DF5\u548C\u603B\u7ED3\uFF0C\u9010\u6B65\u6253\u78E8\u51FA\u4E00\u4E2A\u670D\u52A1\u4E8E\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u7684\u8BBE\u8BA1\u4F53\u7CFB\n Ant Design\u3002\u57FA\u4E8E<Text mark>\u300E\u786E\u5B9A\u300F\u548C\u300E\u81EA\u7136\u300F</Text>\n \u7684\u8BBE\u8BA1\u4EF7\u503C\u89C2\uFF0C\u901A\u8FC7\u6A21\u5757\u5316\u7684\u89E3\u51B3\u65B9\u6848\uFF0C\u964D\u4F4E\u5197\u4F59\u7684\u751F\u4EA7\u6210\u672C\uFF0C\u8BA9\u8BBE\u8BA1\u8005\u4E13\u6CE8\u4E8E\n <Text strong>\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C</Text>\u3002\n </Paragraph>\n <Title level={2}>\u8BBE\u8BA1\u8D44\u6E90</Title>\n <Paragraph>\n \u6211\u4EEC\u63D0\u4F9B\u5B8C\u5584\u7684\u8BBE\u8BA1\u539F\u5219\u3001\u6700\u4F73\u5B9E\u8DF5\u548C\u8BBE\u8BA1\u8D44\u6E90\u6587\u4EF6\uFF08<Text code>Sketch</Text> \u548C\n <Text code>Axure</Text>\uFF09\uFF0C\u6765\u5E2E\u52A9\u4E1A\u52A1\u5FEB\u901F\u8BBE\u8BA1\u51FA\u9AD8\u8D28\u91CF\u7684\u4EA7\u54C1\u539F\u578B\u3002\n </Paragraph>\n\n <Paragraph>\n <ul>\n <li>\n <Link href="/docs/spec/proximity-cn">\u8BBE\u8BA1\u539F\u5219</Link>\n </li>\n <li>\n <Link href="/docs/spec/overview-cn">\u8BBE\u8BA1\u6A21\u5F0F</Link>\n </li>\n <li>\n <Link href="/docs/resources-cn">\u8BBE\u8BA1\u8D44\u6E90</Link>\n </li>\n </ul>\n </Paragraph>\n\n <Paragraph>\n <blockquote>{blockContent}</blockquote>\n <pre>{blockContent}</pre>\n </Paragraph>\n\n <Paragraph>\n \u6309<Text keyboard>Esc</Text>\u952E\u9000\u51FA\u9605\u8BFB\u2026\u2026\n </Paragraph>\n </Typography>\n\n <Typography.Text type="success">Success but red</Typography.Text>\n <Typography.Text type="warning">Warning but green</Typography.Text>\n <Typography.Text type="danger">Danger but blue</Typography.Text>\n </ConfigProvider>\n);\n\nexport default App;\n';},"6bd842ad":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e66d6ffb");var o="import React from 'react';\nimport { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => (\n <Segmented\n options={[\n { value: 'List', icon: <BarsOutlined /> },\n { value: 'Kanban', icon: <AppstoreOutlined /> },\n ]}\n />\n);\n\nexport default Demo;\n";},"6beaef88":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c70975e5");var o="import React, { useState } from 'react';\nimport { Button, Radio } from 'antd';\n\nconst App: React.FC = () => {\n const [disabled, setDisabled] = useState(true);\n\n const toggleDisabled = () => {\n setDisabled(!disabled);\n };\n\n return (\n <>\n <Radio defaultChecked={false} disabled={disabled}>\n Disabled\n </Radio>\n <Radio defaultChecked disabled={disabled}>\n Disabled\n </Radio>\n <br />\n <Button type=\"primary\" onClick={toggleDisabled} style={{ marginTop: 16 }}>\n Toggle disabled\n </Button>\n </>\n );\n};\n\nexport default App;\n";},"6bfa51a6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d24392bd");var o="import React from 'react';\nimport { Badge, Space } from 'antd';\n\nconst colors = [\n 'pink',\n 'red',\n 'yellow',\n 'orange',\n 'cyan',\n 'green',\n 'blue',\n 'purple',\n 'geekblue',\n 'magenta',\n 'volcano',\n 'gold',\n 'lime',\n];\n\nconst AvatarItem = ({ color }: { color: string }) => (\n <div\n style={{\n width: 90,\n height: 90,\n lineHeight: '90px',\n background: '#ccc',\n textAlign: 'center',\n }}\n >\n {color}\n </div>\n);\n\nconst App: React.FC = () => (\n <>\n <Space wrap size={['large', 'middle']}>\n {colors.map((color) => (\n <Badge color={color} count={44} key={color}>\n <AvatarItem color={color} />\n </Badge>\n ))}\n </Space>\n <Space wrap size={['large', 'middle']}>\n {colors.map((color) => (\n <Badge status=\"processing\" color={color} text=\"loading\" key={color} />\n ))}\n </Space>\n </>\n);\n\nexport default App;\n";},"6c31c2f7":function(n,e,t){},"6c3258dc":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2a2c6ade");var o="import React, { useRef, useState } from 'react';\nimport { EllipsisOutlined } from '@ant-design/icons';\nimport type { GetRef, TourProps } from 'antd';\nimport { Button, Divider, Space, Tour } from 'antd';\n\nconst App: React.FC = () => {\n const ref1 = useRef<GetRef<typeof Button>>(null);\n const ref2 = useRef<GetRef<typeof Button>>(null);\n const ref3 = useRef<GetRef<typeof Button>>(null);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const steps: TourProps['steps'] = [\n {\n title: 'Upload File',\n description: 'Put your files here.',\n target: () => ref1.current!,\n },\n {\n title: 'Save',\n description: 'Save your changes.',\n target: () => ref2.current!,\n },\n {\n title: 'Other Actions',\n description: 'Click to see other actions.',\n target: () => ref3.current!,\n },\n ];\n\n return (\n <>\n <Button type=\"primary\" onClick={() => setOpen(true)}>\n Begin Tour\n </Button>\n <Divider />\n <Space>\n <Button ref={ref1}>Upload</Button>\n <Button ref={ref2} type=\"primary\">\n Save\n </Button>\n <Button ref={ref3} icon={<EllipsisOutlined />} />\n </Space>\n <Tour\n open={open}\n onClose={() => setOpen(false)}\n steps={steps}\n actionsRender={(originNode, { current, total }) => (\n <>\n {current !== total - 1 && (\n <Button\n size=\"small\"\n onClick={() => {\n setOpen(false);\n }}\n >\n Skip\n </Button>\n )}\n {originNode}\n </>\n )}\n />\n </>\n );\n};\n\nexport default App;\n";},"6c5bfed1":function(n,e,t){},"6c6ea251":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1d4273e3");var o="import React, { useState } from 'react';\nimport { Slider, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const [disabled, setDisabled] = useState(false);\n\n const onChange = (checked: boolean) => {\n setDisabled(checked);\n };\n\n return (\n <>\n <Slider defaultValue={30} disabled={disabled} />\n <Slider range defaultValue={[20, 50]} disabled={disabled} />\n Disabled: <Switch size=\"small\" checked={disabled} onChange={onChange} />\n </>\n );\n};\n\nexport default App;\n";},"6c7147b4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5bcf1657");var o="import React from 'react';\nimport {\n AutoComplete,\n Button,\n Cascader,\n DatePicker,\n Input,\n InputNumber,\n Mentions,\n Radio,\n Select,\n TimePicker,\n TreeSelect,\n Typography,\n} from 'antd';\n\nconst { Text } = Typography;\nconst { RangePicker } = DatePicker;\n\nconst narrowStyle: React.CSSProperties = {\n width: 50,\n};\n\nconst options = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst selectOptions = [\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n];\n\nconst App: React.FC = () => (\n <>\n <Mentions style={{ width: 100 }} rows={1} />\n <Input.TextArea rows={1} style={{ width: 100 }} />\n <Button type=\"primary\">Button</Button>\n <Input style={{ width: 100 }} />\n <Text copyable>Ant Design</Text>\n <Input prefix=\"1\" suffix=\"2\" style={{ width: 100 }} />\n <Input addonBefore=\"1\" addonAfter=\"2\" style={{ width: 100 }} />\n <InputNumber style={{ width: 100 }} />\n <DatePicker style={{ width: 100 }} />\n <TimePicker style={{ width: 100 }} />\n <Select style={{ width: 100 }} defaultValue=\"jack\" options={selectOptions} />\n <Select style={{ width: 100 }} defaultValue=\"\" options={selectOptions} />\n <Select style={{ width: 100 }} options={selectOptions} />\n <TreeSelect style={{ width: 100 }} />\n <Cascader defaultValue={['zhejiang', 'hangzhou', 'xihu']} options={options} />\n <RangePicker />\n <DatePicker picker=\"month\" />\n <Radio.Group defaultValue=\"a\">\n <Radio.Button value=\"a\">Hangzhou</Radio.Button>\n <Radio.Button value=\"b\">Shanghai</Radio.Button>\n </Radio.Group>\n <AutoComplete style={{ width: 100 }} placeholder=\"input here\" />\n <br />\n <Input prefix=\"$\" addonBefore=\"Http://\" addonAfter=\".com\" defaultValue=\"mysite\" />\n <Input style={narrowStyle} suffix=\"Y\" />\n <Input style={narrowStyle} />\n <Input style={narrowStyle} defaultValue=\"1\" suffix=\"Y\" />\n </>\n);\n\nexport default App;\n";},"6c8aa323":function(n,e,t){},"6c8ac6b4":function(n,e,t){},"6c95f188":function(n,e,t){},"6c99ae93":function(n,e,t){},"6ca024e7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c09fb9d1");var o='import React, { useRef, useState } from \'react\';\nimport { Button, ConfigProvider, Drawer } from \'antd\';\n\nconst App: React.FC = () => {\n const domRef = useRef<HTMLDivElement>(null);\n const [open, setOpen] = useState(false);\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n return (\n <ConfigProvider getPopupContainer={() => domRef.current!}>\n <div ref={domRef} className="site-drawer-render-in-current-wrapper">\n <Button type="primary" onClick={showDrawer}>\n Open\n </Button>\n <Drawer\n rootStyle={{ position: \'absolute\' }}\n title="ConfigProvider"\n placement="right"\n onClose={onClose}\n open={open}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </div>\n </ConfigProvider>\n );\n};\n\nexport default App;\n';},"6cc0b8db":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9eac78a9");var o="import React, { useState } from 'react';\nimport { Tree } from 'antd';\nimport type { TreeDataNode, TreeProps } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: '0-0',\n key: '0-0',\n children: [\n {\n title: '0-0-0',\n key: '0-0-0',\n children: [\n { title: '0-0-0-0', key: '0-0-0-0' },\n { title: '0-0-0-1', key: '0-0-0-1' },\n { title: '0-0-0-2', key: '0-0-0-2' },\n ],\n },\n {\n title: '0-0-1',\n key: '0-0-1',\n children: [\n { title: '0-0-1-0', key: '0-0-1-0' },\n { title: '0-0-1-1', key: '0-0-1-1' },\n { title: '0-0-1-2', key: '0-0-1-2' },\n ],\n },\n {\n title: '0-0-2',\n key: '0-0-2',\n },\n ],\n },\n {\n title: '0-1',\n key: '0-1',\n children: [\n { title: '0-1-0-0', key: '0-1-0-0' },\n { title: '0-1-0-1', key: '0-1-0-1' },\n { title: '0-1-0-2', key: '0-1-0-2' },\n ],\n },\n {\n title: '0-2',\n key: '0-2',\n },\n];\n\nconst App: React.FC = () => {\n const [expandedKeys, setExpandedKeys] = useState<React.Key[]>(['0-0-0', '0-0-1']);\n const [checkedKeys, setCheckedKeys] = useState<React.Key[]>(['0-0-0']);\n const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);\n const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true);\n\n const onExpand: TreeProps['onExpand'] = (expandedKeysValue) => {\n console.log('onExpand', expandedKeysValue);\n // if not set autoExpandParent to false, if children expanded, parent can not collapse.\n // or, you can remove all expanded children keys.\n setExpandedKeys(expandedKeysValue);\n setAutoExpandParent(false);\n };\n\n const onCheck: TreeProps['onCheck'] = (checkedKeysValue) => {\n console.log('onCheck', checkedKeysValue);\n setCheckedKeys(checkedKeysValue as React.Key[]);\n };\n\n const onSelect: TreeProps['onSelect'] = (selectedKeysValue, info) => {\n console.log('onSelect', info);\n setSelectedKeys(selectedKeysValue);\n };\n\n return (\n <Tree\n checkable\n onExpand={onExpand}\n expandedKeys={expandedKeys}\n autoExpandParent={autoExpandParent}\n onCheck={onCheck}\n checkedKeys={checkedKeys}\n onSelect={onSelect}\n selectedKeys={selectedKeys}\n treeData={treeData}\n />\n );\n};\n\nexport default App;\n";},"6ce6b9ac":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8aecca8f");var o='import React from \'react\';\nimport { Button, ConfigProvider, Flex } from \'antd\';\nimport { createStyles } from \'antd-style\';\n\nconst useSpecStyle = createStyles(({ css }) => ({\n primary: css`\n background: #5794f7;\n border-color: blue;\n color: wheat;\n `,\n default: css`\n border-color: gray;\n background: #f5f5f5;\n color: #313030;\n `,\n dashed: css`\n border-color: gray;\n background: #f5f5f5;\n color: #313030;\n `,\n text: css`\n color: gray;\n `,\n link: css`\n color: blue;\n `,\n}));\n\nconst useOriginalClsStyle = createStyles(({ css }) => ({\n wrapper: css`\n .ant-btn-primary {\n color: #ec5b56;\n }\n .ant-btn-default {\n color: orange;\n }\n .ant-btn-dashed {\n color: #3976f6;\n }\n .ant-btn-text {\n color: green;\n }\n .ant-btn-link {\n color: #0e98aa;\n }\n `,\n}));\n\nconst App: React.FC = () => {\n const { styles: specStyle } = useSpecStyle();\n const { styles: originalClsStyle } = useOriginalClsStyle();\n\n return (\n <Flex vertical gap="small">\n {/* link color */}\n <Flex gap="small">\n <ConfigProvider theme={{ token: { colorLink: \'#FF0000\' } }}>\n <Button type="link">Link Button</Button>\n </ConfigProvider>\n <Button type="link">Link Button</Button>\n </Flex>\n\n {/* css specificity */}\n <Flex gap="small" wrap>\n <Button type="primary" className={specStyle.primary}>\n Primary Button\n </Button>\n <Button type="default" className={specStyle.default}>\n Default Button\n </Button>\n <Button type="dashed" className={specStyle.dashed}>\n Dashed Button\n </Button>\n <Button type="text" className={specStyle.text}>\n Text Button\n </Button>\n <Button type="link" className={specStyle.link}>\n Link Button\n </Button>\n </Flex>\n\n {/* Compatibility: v < 5.20.1 */}\n <Flex gap="small" wrap className={originalClsStyle.wrapper}>\n <Button type="primary">Primary Button</Button>\n <Button type="default">Default Button</Button>\n <Button type="dashed">Dashed Button</Button>\n <Button type="text">Text Button</Button>\n <Button type="link">Link Button</Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default App;\n';},"6d0dbaf0":function(n,e,t){},"6d30ec0d":function(n,e,t){},"6d336c40":function(n,e,t){},"6d3b9f83":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("53e15da5");var o='import React from \'react\';\nimport { Alert } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Alert message="Success Text" type="success" />\n <br />\n <Alert message="Info Text" type="info" />\n <br />\n <Alert message="Warning Text" type="warning" />\n <br />\n <Alert message="Error Text" type="error" />\n </>\n);\n\nexport default App;\n';},"6d3dd64a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b27e956b");var o="import React, { useState } from 'react';\nimport { Avatar, Button } from 'antd';\n\nconst UserList = ['U', 'Lucy', 'Tom', 'Edward'];\nconst ColorList = ['#f56a00', '#7265e6', '#ffbf00', '#00a2ae'];\nconst GapList = [4, 3, 2, 1];\n\nconst App: React.FC = () => {\n const [user, setUser] = useState(UserList[0]);\n const [color, setColor] = useState(ColorList[0]);\n const [gap, setGap] = useState(GapList[0]);\n\n const changeUser = () => {\n const index = UserList.indexOf(user);\n setUser(index < UserList.length - 1 ? UserList[index + 1] : UserList[0]);\n setColor(index < ColorList.length - 1 ? ColorList[index + 1] : ColorList[0]);\n };\n\n const changeGap = () => {\n const index = GapList.indexOf(gap);\n setGap(index < GapList.length - 1 ? GapList[index + 1] : GapList[0]);\n };\n\n return (\n <>\n <Avatar style={{ backgroundColor: color, verticalAlign: 'middle' }} size=\"large\" gap={gap}>\n {user}\n </Avatar>\n <Button\n size=\"small\"\n style={{ margin: '0 16px', verticalAlign: 'middle' }}\n onClick={changeUser}\n >\n ChangeUser\n </Button>\n <Button size=\"small\" style={{ verticalAlign: 'middle' }} onClick={changeGap}>\n changeGap\n </Button>\n </>\n );\n};\n\nexport default App;\n";},"6d874398":function(n,e,t){},"6d8e304e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("463065d4");var o="import React, { useState } from 'react';\nimport { SettingOutlined } from '@ant-design/icons';\nimport type { CollapseProps } from 'antd';\nimport { Collapse, Select } from 'antd';\n\nconst { Option } = Select;\n\nconst 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`;\n\ntype ExpandIconPosition = 'start' | 'end';\n\nconst App: React.FC = () => {\n const [expandIconPosition, setExpandIconPosition] = useState<ExpandIconPosition>('start');\n\n const onPositionChange = (newExpandIconPosition: ExpandIconPosition) => {\n setExpandIconPosition(newExpandIconPosition);\n };\n\n const onChange = (key: string | string[]) => {\n console.log(key);\n };\n\n const genExtra = () => (\n <SettingOutlined\n onClick={(event) => {\n // If you don't want click extra trigger collapse, you can prevent this:\n event.stopPropagation();\n }}\n />\n );\n\n const items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header 1',\n children: <div>{text}</div>,\n extra: genExtra(),\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: <div>{text}</div>,\n extra: genExtra(),\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: <div>{text}</div>,\n extra: genExtra(),\n },\n ];\n\n return (\n <>\n <Collapse\n defaultActiveKey={['1']}\n onChange={onChange}\n expandIconPosition={expandIconPosition}\n items={items}\n />\n <br />\n <span>Expand Icon Position: </span>\n <Select value={expandIconPosition} style={{ margin: '0 8px' }} onChange={onPositionChange}>\n <Option value=\"start\">start</Option>\n <Option value=\"end\">end</Option>\n </Select>\n </>\n );\n};\n\nexport default App;\n";},"6d8f303f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("20f66d77");var o="import React from 'react';\nimport { Calendar } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Calendar fullscreen showWeek />\n <br />\n <Calendar fullscreen={false} showWeek />\n </>\n);\n\nexport default App;\n";},"6da59cb2":function(n,e,t){},"6de50251":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8e9ba2f6");var o="import React from 'react';\nimport { Watermark } from 'antd';\n\nconst App: React.FC = () => (\n <Watermark content=\"Ant Design\">\n <div style={{ height: 500 }} />\n </Watermark>\n);\n\nexport default App;\n";},"6dea8bb1":function(n,e,t){},"6e344bc6":function(n,e,t){},"6e37e703":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2136eb46");var o='import React from \'react\';\nimport { Button, Flex } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" align="flex-start" vertical>\n <Flex gap="small">\n <Button type="primary">Primary</Button>\n <Button type="primary" disabled>\n Primary(disabled)\n </Button>\n </Flex>\n <Flex gap="small">\n <Button>Default</Button>\n <Button disabled>Default(disabled)</Button>\n </Flex>\n <Flex gap="small">\n <Button type="dashed">Dashed</Button>\n <Button type="dashed" disabled>\n Dashed(disabled)\n </Button>\n </Flex>\n <Flex gap="small">\n <Button type="text">Text</Button>\n <Button type="text" disabled>\n Text(disabled)\n </Button>\n </Flex>\n <Flex gap="small">\n <Button type="link">Link</Button>\n <Button type="link" disabled>\n Link(disabled)\n </Button>\n </Flex>\n <Flex gap="small">\n <Button type="primary" href="https://ant.design/index-cn">\n Href Primary\n </Button>\n <Button type="primary" href="https://ant.design/index-cn" disabled>\n Href Primary(disabled)\n </Button>\n </Flex>\n <Flex gap="small">\n <Button danger>Danger Default</Button>\n <Button danger disabled>\n Danger Default(disabled)\n </Button>\n </Flex>\n <Flex gap="small">\n <Button danger type="text">\n Danger Text\n </Button>\n <Button danger type="text" disabled>\n Danger Text(disabled)\n </Button>\n </Flex>\n <Flex gap="small">\n <Button type="link" danger>\n Danger Link\n </Button>\n <Button type="link" danger disabled>\n Danger Link(disabled)\n </Button>\n </Flex>\n <Flex gap="small" className="site-button-ghost-wrapper">\n <Button ghost>Ghost</Button>\n <Button ghost disabled>\n Ghost(disabled)\n </Button>\n </Flex>\n </Flex>\n);\n\nexport default App;\n';},"6e40b954":function(n,e,t){},"6e78d301":function(n,e,t){},"6ecd0adb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1b62efa0");var o="import React from 'react';\nimport { Cascader } from 'antd';\nimport type { CascaderProps, GetProp } from 'antd';\n\ntype DefaultOptionType = GetProp<CascaderProps, 'options'>[number];\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n disabled?: boolean;\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n {\n value: 'xiasha',\n label: 'Xia Sha',\n disabled: true,\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value, selectedOptions) => {\n console.log(value, selectedOptions);\n};\n\nconst filter = (inputValue: string, path: DefaultOptionType[]) =>\n path.some(\n (option) => (option.label as string).toLowerCase().indexOf(inputValue.toLowerCase()) > -1,\n );\n\nconst App: React.FC = () => (\n <Cascader\n options={options}\n onChange={onChange}\n placeholder=\"Please select\"\n showSearch={{ filter }}\n onSearch={(value) => console.log(value)}\n />\n);\n\nexport default App;\n";},"6ed9092f":function(n,e,t){},"6edcac8f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("07712d4a");var o="import React from 'react';\nimport type { TabsProps } from 'antd';\nimport { Tabs, theme } from 'antd';\nimport StickyBox from 'react-sticky-box';\n\nconst items = Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab ${id}`,\n key: id,\n children: `Content of Tab Pane ${id}`,\n style: i === 0 ? { height: 200 } : undefined,\n };\n});\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer },\n } = theme.useToken();\n const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (\n <StickyBox offsetTop={64} offsetBottom={20} style={{ zIndex: 1 }}>\n <DefaultTabBar {...props} style={{ background: colorBgContainer }} />\n </StickyBox>\n );\n return <Tabs defaultActiveKey=\"1\" renderTabBar={renderTabBar} items={items} />;\n};\n\nexport default App;\n";},"6ee9ae25":function(n,e,t){},"6eead573":function(n,e,t){},"6f45adaa":function(n,e,t){},"6f89ef84":function(n,e,t){},"6fb30674":function(n,e,t){},"6fd6fca1":function(n,e,t){},"7018a581":function(n,e,t){},70492669:function(n,e,t){},"7062acac":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7eaf15dd");var o="import React from 'react';\nimport { ConfigProvider, Form, Input } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Form: {\n labelRequiredMarkColor: 'pink',\n labelColor: 'green',\n labelFontSize: 16,\n labelHeight: 34,\n labelColonMarginInlineStart: 4,\n labelColonMarginInlineEnd: 12,\n itemMarginBottom: 18,\n inlineItemMarginBottom: 18,\n },\n },\n }}\n >\n <Form\n name=\"component-token\"\n labelCol={{ span: 8 }}\n wrapperCol={{ span: 16 }}\n style={{ maxWidth: 600 }}\n initialValues={{ remember: true }}\n autoComplete=\"off\"\n >\n <Form.Item\n label=\"Username\"\n name=\"username\"\n rules={[{ required: true, message: 'Please input your username!' }]}\n >\n <Input />\n </Form.Item>\n\n <Form.Item\n label=\"Password\"\n name=\"password\"\n rules={[{ required: true, message: 'Please input your password!' }]}\n >\n <Input.Password />\n </Form.Item>\n </Form>\n </ConfigProvider>\n);\n\nexport default App;\n";},"7089f9a2":function(n,e,t){},"70a019f2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4528d28d");var o="import React from 'react';\nimport { Select, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Select status=\"error\" style={{ width: '100%' }} />\n <Select status=\"warning\" style={{ width: '100%' }} />\n </Space>\n);\n\nexport default App;\n";},"70aec9d6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ffca0073");var o='import React from \'react\';\nimport ClockCircleOutlined from \'@ant-design/icons/ClockCircleOutlined\';\nimport { Input, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Input status="error" placeholder="Error" />\n <Input status="warning" placeholder="Warning" />\n <Input status="error" prefix={<ClockCircleOutlined />} placeholder="Error with prefix" />\n <Input status="warning" prefix={<ClockCircleOutlined />} placeholder="Warning with prefix" />\n </Space>\n);\n\nexport default App;\n';},"70c30c76":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("59b72563");var o="import React from 'react';\nimport type { TimeRangePickerProps } from 'antd';\nimport { DatePicker, Space } from 'antd';\nimport dayjs from 'dayjs';\nimport type { Dayjs } from 'dayjs';\n\nconst { RangePicker } = DatePicker;\n\nconst onChange = (date: Dayjs) => {\n if (date) {\n console.log('Date: ', date);\n } else {\n console.log('Clear');\n }\n};\nconst onRangeChange = (dates: null | (Dayjs | null)[], dateStrings: string[]) => {\n if (dates) {\n console.log('From: ', dates[0], ', to: ', dates[1]);\n console.log('From: ', dateStrings[0], ', to: ', dateStrings[1]);\n } else {\n console.log('Clear');\n }\n};\n\nconst rangePresets: TimeRangePickerProps['presets'] = [\n { label: 'Last 7 Days', value: [dayjs().add(-7, 'd'), dayjs()] },\n { label: 'Last 14 Days', value: [dayjs().add(-14, 'd'), dayjs()] },\n { label: 'Last 30 Days', value: [dayjs().add(-30, 'd'), dayjs()] },\n { label: 'Last 90 Days', value: [dayjs().add(-90, 'd'), dayjs()] },\n];\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <DatePicker\n presets={[\n { label: 'Yesterday', value: dayjs().add(-1, 'd') },\n { label: 'Last Week', value: dayjs().add(-7, 'd') },\n { label: 'Last Month', value: dayjs().add(-1, 'month') },\n ]}\n onChange={onChange}\n />\n <RangePicker presets={rangePresets} onChange={onRangeChange} />\n <RangePicker\n presets={[\n {\n label: <span aria-label=\"Current Time to End of Day\">Now ~ EOD</span>,\n value: () => [dayjs(), dayjs().endOf('day')], // 5.8.0+ support function\n },\n ...rangePresets,\n ]}\n showTime\n format=\"YYYY/MM/DD HH:mm:ss\"\n onChange={onRangeChange}\n />\n </Space>\n);\n\nexport default App;\n";},"70f8b765":function(n,e,t){},"710599f4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("19d89045");var o="import React from 'react';\nimport { Divider, Steps } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Steps\n progressDot\n current={1}\n size=\"small\"\n items={[\n {\n title: 'Finished',\n description: 'This is a description.',\n },\n {\n title: 'In Progress',\n description: 'This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n ]}\n />\n <Divider />\n <Steps\n progressDot\n current={1}\n direction=\"vertical\"\n size=\"small\"\n items={[\n {\n title: 'Finished',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'Finished',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'In Progress',\n description: 'This is a description. This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n ]}\n />\n </>\n);\n\nexport default App;\n";},"710d5289":function(n,e,t){},71109133:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("293f4f22");var o="import React from 'react';\nimport { Anchor, Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <Row>\n <Col span={16}>\n <div id=\"part-1\" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />\n <div id=\"part-2\" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />\n <div id=\"part-3\" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />\n </Col>\n <Col span={8}>\n <Anchor\n items={[\n {\n key: 'part-1',\n href: '#part-1',\n title: 'Part 1',\n },\n {\n key: 'part-2',\n href: '#part-2',\n title: 'Part 2',\n },\n {\n key: 'part-3',\n href: '#part-3',\n title: 'Part 3',\n },\n ]}\n />\n </Col>\n </Row>\n);\n\nexport default App;\n";},"71da1883":function(n,e,t){},"71e1779c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("167b685b");var o='import React from \'react\';\nimport { SettingOutlined } from \'@ant-design/icons\';\nimport { Button, Input, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n Input addon Button:\n <Input addonAfter={<Button type="primary">Submit</Button>} defaultValue="mysite" />\n <Input addonAfter={<Button>Submit</Button>} defaultValue="mysite" />\n <br />\n <br />\n Input addon Button icon:\n <Input\n addonAfter={\n <Button>\n <SettingOutlined />\n </Button>\n }\n defaultValue="mysite"\n />\n </Space>\n);\n\nexport default App;\n';},"71e37e53":function(n,e,t){},"721fb36c":function(n,e,t){},"7261042f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("82471f67");var o="import React from 'react';\nimport { Carousel } from 'antd';\n\nconst contentStyle: React.CSSProperties = {\n margin: 0,\n height: '160px',\n color: '#fff',\n lineHeight: '160px',\n textAlign: 'center',\n background: '#364d79',\n};\n\nconst App: React.FC = () => {\n const onChange = (currentSlide: number) => {\n console.log(currentSlide);\n };\n\n return (\n <Carousel afterChange={onChange}>\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n );\n};\n\nexport default App;\n";},"72a11508":function(n,e,t){},"72f251ae":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7abf516c");var o="import React, { useState } from 'react';\nimport { Button, Modal } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const showModal = () => {\n setOpen(true);\n };\n\n const handleOk = (e: React.MouseEvent<HTMLElement>) => {\n console.log(e);\n setOpen(false);\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLElement>) => {\n console.log(e);\n setOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showModal}>\n Open Modal with customized button props\n </Button>\n <Modal\n title=\"Basic Modal\"\n open={open}\n onOk={handleOk}\n onCancel={handleCancel}\n okButtonProps={{ disabled: true }}\n cancelButtonProps={{ disabled: true }}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n";},"7305d219":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("def12182");var o="import React from 'react';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\n\nconst 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`;\n\nconst items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header 1',\n children: <p>{text}</p>,\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: <p>{text}</p>,\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: <p>{text}</p>,\n },\n];\n\nconst App: React.FC = () => <Collapse defaultActiveKey={['1']} ghost items={items} />;\n\nexport default App;\n";},"73215ae0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t("5b220c3d");},73736582:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a5ec73c1");var o="import React, { useMemo, useState } from 'react';\nimport { Button, ColorPicker } from 'antd';\nimport type { ColorPickerProps, GetProp } from 'antd';\n\ntype Color = Extract<GetProp<ColorPickerProps, 'value'>, string | { cleared: any }>;\n\nconst Demo: React.FC = () => {\n const [color, setColor] = useState<Color>('#1677ff');\n\n const bgColor = useMemo<string>(\n () => (typeof color === 'string' ? color : color!.toHexString()),\n [color],\n );\n\n const btnStyle: React.CSSProperties = {\n backgroundColor: bgColor,\n };\n\n return (\n <ColorPicker value={color} onChange={setColor}>\n <Button type=\"primary\" style={btnStyle}>\n open\n </Button>\n </ColorPicker>\n );\n};\n\nexport default Demo;\n";},"73a47452":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("04eccd47");var o="import React from 'react';\nimport { Flex, Layout } from 'antd';\n\nconst { Header, Footer, Sider, Content } = Layout;\n\nconst headerStyle: React.CSSProperties = {\n textAlign: 'center',\n color: '#fff',\n height: 64,\n paddingInline: 48,\n lineHeight: '64px',\n backgroundColor: '#4096ff',\n};\n\nconst contentStyle: React.CSSProperties = {\n textAlign: 'center',\n minHeight: 120,\n lineHeight: '120px',\n color: '#fff',\n backgroundColor: '#0958d9',\n};\n\nconst siderStyle: React.CSSProperties = {\n textAlign: 'center',\n lineHeight: '120px',\n color: '#fff',\n backgroundColor: '#1677ff',\n};\n\nconst footerStyle: React.CSSProperties = {\n textAlign: 'center',\n color: '#fff',\n backgroundColor: '#4096ff',\n};\n\nconst layoutStyle = {\n borderRadius: 8,\n overflow: 'hidden',\n width: 'calc(50% - 8px)',\n maxWidth: 'calc(50% - 8px)',\n};\n\nconst App: React.FC = () => (\n <Flex gap=\"middle\" wrap>\n <Layout style={layoutStyle}>\n <Header style={headerStyle}>Header</Header>\n <Content style={contentStyle}>Content</Content>\n <Footer style={footerStyle}>Footer</Footer>\n </Layout>\n\n <Layout style={layoutStyle}>\n <Header style={headerStyle}>Header</Header>\n <Layout>\n <Sider width=\"25%\" style={siderStyle}>\n Sider\n </Sider>\n <Content style={contentStyle}>Content</Content>\n </Layout>\n <Footer style={footerStyle}>Footer</Footer>\n </Layout>\n\n <Layout style={layoutStyle}>\n <Header style={headerStyle}>Header</Header>\n <Layout>\n <Content style={contentStyle}>Content</Content>\n <Sider width=\"25%\" style={siderStyle}>\n Sider\n </Sider>\n </Layout>\n <Footer style={footerStyle}>Footer</Footer>\n </Layout>\n\n <Layout style={layoutStyle}>\n <Sider width=\"25%\" style={siderStyle}>\n Sider\n </Sider>\n <Layout>\n <Header style={headerStyle}>Header</Header>\n <Content style={contentStyle}>Content</Content>\n <Footer style={footerStyle}>Footer</Footer>\n </Layout>\n </Layout>\n </Flex>\n);\n\nexport default App;\n";},"73f316bd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("36881db2");var o="import React from 'react';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\n\nconst text = (\n <p style={{ paddingInlineStart: 24 }}>\n A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found\n as a welcome guest in many households across the world.\n </p>\n);\n\nconst items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header 1',\n children: text,\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: text,\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: text,\n },\n];\n\nconst App: React.FC = () => <Collapse items={items} bordered={false} defaultActiveKey={['1']} />;\n\nexport default App;\n";},"73f951cb":function(n,e,t){},"73f9ed99":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8fab0c91");var o="import React from 'react';\nimport { DatePicker, Flex } from 'antd';\n\nconst { RangePicker } = DatePicker;\n\nconst App: React.FC = () => (\n <Flex vertical gap={12}>\n <Flex gap={8}>\n <DatePicker placeholder=\"Outlined\" />\n <RangePicker placeholder={['Outlined Start', 'Outlined End']} />\n </Flex>\n <Flex gap={8}>\n <DatePicker placeholder=\"Filled\" variant=\"filled\" />\n <RangePicker placeholder={['Filled Start', 'Filled End']} variant=\"filled\" />\n </Flex>\n <Flex gap={8}>\n <DatePicker placeholder=\"Borderless\" variant=\"borderless\" />\n <RangePicker placeholder={['Borderless Start', 'Borderless End']} variant=\"borderless\" />\n </Flex>\n <Flex gap={8}>\n <DatePicker placeholder=\"Underlined\" variant=\"underlined\" />\n <RangePicker placeholder={['Underlined Start', 'Underlined End']} variant=\"underlined\" />\n </Flex>\n </Flex>\n);\n\nexport default App;\n";},"743a0c3a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1dac9968");var o="import React from 'react';\nimport { Space, TimePicker } from 'antd';\nimport dayjs from 'dayjs';\n\nconst App: React.FC = () => (\n <Space wrap>\n <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size=\"large\" />\n <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} />\n <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size=\"small\" />\n </Space>\n);\n\nexport default App;\n";},"743c8239":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("02b8fe80");var o='import React from \'react\';\nimport type { MenuProps } from \'antd\';\nimport { Button, Dropdown, Space } from \'antd\';\n\nconst items: MenuProps[\'items\'] = [\n {\n key: \'1\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">\n 1st menu item\n </a>\n ),\n },\n {\n key: \'2\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">\n 2nd menu item\n </a>\n ),\n },\n {\n key: \'3\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">\n 3rd menu item\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Space wrap>\n <Dropdown menu={{ items }} placement="bottomLeft" arrow={{ pointAtCenter: true }}>\n <Button>bottomLeft</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="bottom" arrow={{ pointAtCenter: true }}>\n <Button>bottom</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="bottomRight" arrow={{ pointAtCenter: true }}>\n <Button>bottomRight</Button>\n </Dropdown>\n </Space>\n <Space wrap>\n <Dropdown menu={{ items }} placement="topLeft" arrow={{ pointAtCenter: true }}>\n <Button>topLeft</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="top" arrow={{ pointAtCenter: true }}>\n <Button>top</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="topRight" arrow={{ pointAtCenter: true }}>\n <Button>topRight</Button>\n </Dropdown>\n </Space>\n </Space>\n);\n\nexport default App;\n';},"744c418e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("11710614");var o='import React from \'react\';\nimport { Badge, Card, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical" size="middle" style={{ width: \'100%\' }}>\n <Badge.Ribbon text="Hippies">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="Hippies" color="pink">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="Hippies" color="red">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="Hippies" color="cyan">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="Hippies" color="green">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="Hippies" color="purple">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="Hippies" color="volcano">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n <Badge.Ribbon text="Hippies" color="magenta">\n <Card title="Pushes open the window" size="small">\n and raises the spyglass.\n </Card>\n </Badge.Ribbon>\n </Space>\n);\n\nexport default App;\n';},"745ca6ee":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("57f96f79");var o="import React from 'react';\nimport { Button, Flex, Segmented } from 'antd';\nimport type { FlexProps } from 'antd';\n\nconst boxStyle: React.CSSProperties = {\n width: '100%',\n height: 120,\n borderRadius: 6,\n border: '1px solid #40a9ff',\n};\n\nconst justifyOptions = [\n 'flex-start',\n 'center',\n 'flex-end',\n 'space-between',\n 'space-around',\n 'space-evenly',\n];\n\nconst alignOptions = ['flex-start', 'center', 'flex-end'];\n\nconst App: React.FC = () => {\n const [justify, setJustify] = React.useState<FlexProps['justify']>(justifyOptions[0]);\n const [alignItems, setAlignItems] = React.useState<FlexProps['align']>(alignOptions[0]);\n return (\n <Flex gap=\"middle\" align=\"start\" vertical>\n <p>Select justify :</p>\n <Segmented options={justifyOptions} onChange={setJustify} />\n <p>Select align :</p>\n <Segmented options={alignOptions} onChange={setAlignItems} />\n <Flex style={boxStyle} justify={justify} align={alignItems}>\n <Button type=\"primary\">Primary</Button>\n <Button type=\"primary\">Primary</Button>\n <Button type=\"primary\">Primary</Button>\n <Button type=\"primary\">Primary</Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default App;\n";},"7483ba91":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return l;}});var o=t("777fffbe"),a=t("f19d2b93"),r=t("a9d1a279"),i=o._(t("0a03b273")),l=n=>(0,a.jsx)(i.default,{component:r.Button,...n});},"749640d5":function(n,e,t){},"74cf00c5":function(n,e,t){},"74ea42c1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c6543381");var o="import React from 'react';\nimport { Tooltip, Tree } from 'antd';\nimport type { TreeDataNode } from 'antd';\n\nconst dig = (path = '0', level = 3) => {\n const list = [];\n for (let i = 0; i < 10; i += 1) {\n const key = `${path}-${i}`;\n const treeNode: TreeDataNode = {\n title: key,\n key,\n };\n\n if (level > 0) {\n treeNode.children = dig(key, level - 1);\n }\n\n list.push(treeNode);\n }\n return list;\n};\n\nconst treeData = dig();\n\nconst MemoTooltip = Tooltip || React.memo(Tooltip);\n\nconst App: React.FC = () => (\n <Tree\n treeData={treeData}\n height={233}\n defaultExpandAll\n titleRender={(item) => {\n const title = item.title as React.ReactNode;\n return <MemoTooltip title={title}>{title}</MemoTooltip>;\n }}\n />\n);\n\nexport default App;\n";},"753fa0bd":function(n,e,t){},"7558e1c3":function(n,e,t){},"75844fdf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}});var o={placeholder:"\u8BF7\u9009\u62E9\u65F6\u95F4",rangePlaceholder:["\u5F00\u59CB\u65F6\u95F4","\u7ED3\u675F\u65F6\u95F4"]};},"75cff06f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3fa0aba1");var o="import React, { useState } from 'react';\nimport { Button, Flex, Modal } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [openResponsive, setOpenResponsive] = useState(false);\n\n return (\n <Flex vertical gap=\"middle\" align=\"flex-start\">\n {/* Basic */}\n <Button type=\"primary\" onClick={() => setOpen(true)}>\n Open Modal of 1000px width\n </Button>\n <Modal\n title=\"Modal 1000px width\"\n centered\n open={open}\n onOk={() => setOpen(false)}\n onCancel={() => setOpen(false)}\n width={1000}\n >\n <p>some contents...</p>\n <p>some contents...</p>\n <p>some contents...</p>\n </Modal>\n\n {/* Responsive */}\n <Button type=\"primary\" onClick={() => setOpenResponsive(true)}>\n Open Modal of responsive width\n </Button>\n <Modal\n title=\"Modal responsive width\"\n centered\n open={openResponsive}\n onOk={() => setOpenResponsive(false)}\n onCancel={() => setOpenResponsive(false)}\n width={{\n xs: '90%',\n sm: '80%',\n md: '70%',\n lg: '60%',\n xl: '50%',\n xxl: '40%',\n }}\n >\n <p>some contents...</p>\n <p>some contents...</p>\n <p>some contents...</p>\n </Modal>\n </Flex>\n );\n};\n\nexport default App;\n";},"75fd5efd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fd2a6204");var o="import React from 'react';\nimport { Calendar, theme } from 'antd';\nimport type { CalendarProps } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\nconst onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {\n console.log(value.format('YYYY-MM-DD'), mode);\n};\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n\n const wrapperStyle: React.CSSProperties = {\n width: 300,\n border: `1px solid ${token.colorBorderSecondary}`,\n borderRadius: token.borderRadiusLG,\n };\n\n return (\n <div style={wrapperStyle}>\n <Calendar fullscreen={false} onPanelChange={onPanelChange} />\n </div>\n );\n};\n\nexport default App;\n";},"76122a66":function(n,e,t){},"76264deb":function(n,e,t){},"7682b3f3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("102cac6c");var o="import React from 'react';\nimport { Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <Row>\n {Array.from({ length: 10 }).map((_, index) => {\n const key = `col-${index}`;\n return (\n <Col\n key={key}\n xs={{ flex: '100%' }}\n sm={{ flex: '50%' }}\n md={{ flex: '40%' }}\n lg={{ flex: '20%' }}\n xl={{ flex: '10%' }}\n >\n Col\n </Col>\n );\n })}\n </Row>\n);\n\nexport default App;\n";},76841470:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("12584de4");var o="import React from 'react';\nimport { DownOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n label: 'My Account',\n disabled: true,\n },\n {\n type: 'divider',\n },\n {\n key: '2',\n label: 'Profile',\n extra: '\u2318P',\n },\n {\n key: '3',\n label: 'Billing',\n extra: '\u2318B',\n },\n {\n key: '4',\n label: 'Settings',\n icon: <SettingOutlined />,\n extra: '\u2318S',\n },\n];\n\nconst App: React.FC = () => (\n <Dropdown menu={{ items }}>\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Hover me\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n);\n\nexport default App;\n";},"769eb070":function(n,e,t){},"76d5c2c6":function(n,e,t){},"76d914db":function(n,e,t){},"7727c322":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("699a661e");var o="import React, { useState } from 'react';\nimport { Affix, Button } from 'antd';\n\nconst App: React.FC = () => {\n const [top, setTop] = useState(10);\n\n return (\n <div style={{ height: 10000 }}>\n <div>Top</div>\n <Affix offsetTop={top}>\n <div style={{ background: 'red' }}>\n <Button type=\"primary\" onClick={() => setTop(top + 10)}>\n Affix top\n </Button>\n </div>\n </Affix>\n <div>Bottom</div>\n </div>\n );\n};\n\nexport default App;\n";},"772d3966":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("65d9f52f");var o="import React from 'react';\nimport { Anchor } from 'antd';\n\nconst handleClick = (\n e: React.MouseEvent<HTMLElement>,\n link: {\n title: React.ReactNode;\n href: string;\n },\n) => {\n e.preventDefault();\n console.log(link);\n};\n\nconst App: React.FC = () => (\n <Anchor\n affix={false}\n onClick={handleClick}\n items={[\n {\n key: '1',\n href: '#anchor-demo-basic',\n title: 'Basic demo',\n },\n {\n key: '2',\n href: '#anchor-demo-static',\n title: 'Static demo',\n },\n {\n key: '3',\n href: '#api',\n title: 'API',\n children: [\n {\n key: '4',\n href: '#anchor-props',\n title: 'Anchor Props',\n },\n {\n key: '5',\n href: '#link-props',\n title: 'Link Props',\n },\n ],\n },\n ]}\n />\n);\n\nexport default App;\n";},"7750a949":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e3663228");var o='import React, { useState } from \'react\';\nimport { Button, Modal } from \'antd\';\n\nconst App: React.FC = () => {\n const [modal1Open, setModal1Open] = useState(false);\n const [modal2Open, setModal2Open] = useState(false);\n\n return (\n <>\n <Button type="primary" onClick={() => setModal1Open(true)}>\n Display a modal dialog at 20px to Top\n </Button>\n <Modal\n title="20px to Top"\n style={{ top: 20 }}\n open={modal1Open}\n onOk={() => setModal1Open(false)}\n onCancel={() => setModal1Open(false)}\n >\n <p>some contents...</p>\n <p>some contents...</p>\n <p>some contents...</p>\n </Modal>\n <br />\n <br />\n <Button type="primary" onClick={() => setModal2Open(true)}>\n Vertically centered modal dialog\n </Button>\n <Modal\n title="Vertically centered modal dialog"\n centered\n open={modal2Open}\n onOk={() => setModal2Open(false)}\n onCancel={() => setModal2Open(false)}\n >\n <p>some contents...</p>\n <p>some contents...</p>\n <p>some contents...</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n';},"7774ed6f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a5777f2d");var o="import React from 'react';\nimport { Tree } from 'antd';\nimport type { TreeDataNode, TreeProps } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 1',\n key: '0-0',\n children: [\n {\n title: 'parent 1-0',\n key: '0-0-0',\n disabled: true,\n children: [\n {\n title: 'leaf',\n key: '0-0-0-0',\n disableCheckbox: true,\n },\n {\n title: 'leaf',\n key: '0-0-0-1',\n },\n ],\n },\n {\n title: 'parent 1-1',\n key: '0-0-1',\n children: [{ title: <span style={{ color: '#1677ff' }}>sss</span>, key: '0-0-1-0' }],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const onSelect: TreeProps['onSelect'] = (selectedKeys, info) => {\n console.log('selected', selectedKeys, info);\n };\n\n const onCheck: TreeProps['onCheck'] = (checkedKeys, info) => {\n console.log('onCheck', checkedKeys, info);\n };\n\n return (\n <Tree\n checkable\n defaultExpandedKeys={['0-0-0', '0-0-1']}\n defaultSelectedKeys={['0-0-1']}\n defaultCheckedKeys={['0-0-0', '0-0-1']}\n onSelect={onSelect}\n onCheck={onCheck}\n treeData={treeData}\n />\n );\n};\n\nexport default App;\n";},"77a0aca2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("169d676f");var o="import React from 'react';\nimport dayjs from 'dayjs';\n\nimport 'dayjs/locale/zh-cn';\n\nimport { Calendar, Col, Radio, Row, Select, theme, Typography } from 'antd';\nimport type { CalendarProps } from 'antd';\nimport type { Dayjs } from 'dayjs';\nimport dayLocaleData from 'dayjs/plugin/localeData';\n\ndayjs.extend(dayLocaleData);\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n\n const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {\n console.log(value.format('YYYY-MM-DD'), mode);\n };\n\n const wrapperStyle: React.CSSProperties = {\n width: 300,\n border: `1px solid ${token.colorBorderSecondary}`,\n borderRadius: token.borderRadiusLG,\n };\n\n return (\n <div style={wrapperStyle}>\n <Calendar\n fullscreen={false}\n headerRender={({ value, type, onChange, onTypeChange }) => {\n const start = 0;\n const end = 12;\n const monthOptions = [];\n\n let current = value.clone();\n const localeData = value.localeData();\n const months = [];\n for (let i = 0; i < 12; i++) {\n current = current.month(i);\n months.push(localeData.monthsShort(current));\n }\n\n for (let i = start; i < end; i++) {\n monthOptions.push(\n <Select.Option key={i} value={i} className=\"month-item\">\n {months[i]}\n </Select.Option>,\n );\n }\n\n const year = value.year();\n const month = value.month();\n const options = [];\n for (let i = year - 10; i < year + 10; i += 1) {\n options.push(\n <Select.Option key={i} value={i} className=\"year-item\">\n {i}\n </Select.Option>,\n );\n }\n return (\n <div style={{ padding: 8 }}>\n <Typography.Title level={4}>Custom header</Typography.Title>\n <Row gutter={8}>\n <Col>\n <Radio.Group\n size=\"small\"\n onChange={(e) => onTypeChange(e.target.value)}\n value={type}\n >\n <Radio.Button value=\"month\">Month</Radio.Button>\n <Radio.Button value=\"year\">Year</Radio.Button>\n </Radio.Group>\n </Col>\n <Col>\n <Select\n size=\"small\"\n popupMatchSelectWidth={false}\n className=\"my-year-select\"\n value={year}\n onChange={(newYear) => {\n const now = value.clone().year(newYear);\n onChange(now);\n }}\n >\n {options}\n </Select>\n </Col>\n <Col>\n <Select\n size=\"small\"\n popupMatchSelectWidth={false}\n value={month}\n onChange={(newMonth) => {\n const now = value.clone().month(newMonth);\n onChange(now);\n }}\n >\n {monthOptions}\n </Select>\n </Col>\n </Row>\n </div>\n );\n }}\n onPanelChange={onPanelChange}\n />\n </div>\n );\n};\n\nexport default App;\n";},"77aeed82":function(n,e,t){},"77cfdf0c":function(n,e,t){},"77ef6ed5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("97256acc");var o='import React from \'react\';\nimport { Button, notification, Space } from \'antd\';\n\nconst close = () => {\n console.log(\n \'Notification was closed. Either the close button was clicked or duration time elapsed.\',\n );\n};\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotification = () => {\n const key = `open${Date.now()}`;\n const btn = (\n <Space>\n <Button type="link" size="small" onClick={() => api.destroy()}>\n Destroy All\n </Button>\n <Button type="primary" size="small" onClick={() => api.destroy(key)}>\n Confirm\n </Button>\n </Space>\n );\n api.open({\n message: \'Notification Title\',\n description:\n \'A function will be be called after the notification is closed (automatically after the "duration" time of manually).\',\n btn,\n key,\n onClose: close,\n });\n };\n\n return (\n <>\n {contextHolder}\n <Button type="primary" onClick={openNotification}>\n Open the notification box\n </Button>\n </>\n );\n};\n\nexport default App;\n';},"77fa22f2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8f75fd04");var o="import React from 'react';\nimport { Button, QRCode, Segmented, Space } from 'antd';\nimport type { QRCodeProps } from 'antd';\n\nfunction doDownload(url: string, fileName: string) {\n const a = document.createElement('a');\n a.download = fileName;\n a.href = url;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n}\n\nconst downloadCanvasQRCode = () => {\n const canvas = document.getElementById('myqrcode')?.querySelector<HTMLCanvasElement>('canvas');\n if (canvas) {\n const url = canvas.toDataURL();\n doDownload(url, 'QRCode.png');\n }\n};\n\nconst downloadSvgQRCode = () => {\n const svg = document.getElementById('myqrcode')?.querySelector<SVGElement>('svg');\n const svgData = new XMLSerializer().serializeToString(svg!);\n const blob = new Blob([svgData], { type: 'image/svg+xml;charset=utf-8' });\n const url = URL.createObjectURL(blob);\n\n doDownload(url, 'QRCode.svg');\n};\n\nconst App: React.FC = () => {\n const [renderType, setRenderType] = React.useState<QRCodeProps['type']>('canvas');\n return (\n <Space id=\"myqrcode\" direction=\"vertical\">\n <Segmented options={['canvas', 'svg']} value={renderType} onChange={setRenderType} />\n <div>\n <QRCode\n type={renderType}\n value=\"https://ant.design/\"\n bgColor=\"#fff\"\n style={{ marginBottom: 16 }}\n icon=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\"\n />\n <Button\n type=\"primary\"\n onClick={renderType === 'canvas' ? downloadCanvasQRCode : downloadSvgQRCode}\n >\n Download\n </Button>\n </div>\n </Space>\n );\n};\n\nexport default App;\n";},"780271da":function(n,e,t){},"78080b3d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("362dfc85");var o='import React from \'react\';\nimport { Button, ConfigProvider, Flex, Tooltip } from \'antd\';\n\nconst text = <span>prompt text</span>;\n\nconst buttonWidth = 80;\n\nconst App: React.FC = () => (\n <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>\n <Flex vertical justify="center" align="center" className="demo">\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Tooltip placement="topLeft" title={text}>\n <Button>TL</Button>\n </Tooltip>\n <Tooltip placement="top" title={text}>\n <Button>Top</Button>\n </Tooltip>\n <Tooltip placement="topRight" title={text}>\n <Button>TR</Button>\n </Tooltip>\n </Flex>\n <Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">\n <Flex align="center" vertical>\n <Tooltip placement="leftTop" title={text}>\n <Button>LT</Button>\n </Tooltip>\n <Tooltip placement="left" title={text}>\n <Button>Left</Button>\n </Tooltip>\n <Tooltip placement="leftBottom" title={text}>\n <Button>LB</Button>\n </Tooltip>\n </Flex>\n <Flex align="center" vertical>\n <Tooltip placement="rightTop" title={text}>\n <Button>RT</Button>\n </Tooltip>\n <Tooltip placement="right" title={text}>\n <Button>Right</Button>\n </Tooltip>\n <Tooltip placement="rightBottom" title={text}>\n <Button>RB</Button>\n </Tooltip>\n </Flex>\n </Flex>\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Tooltip placement="bottomLeft" title={text}>\n <Button>BL</Button>\n </Tooltip>\n <Tooltip placement="bottom" title={text}>\n <Button>Bottom</Button>\n </Tooltip>\n <Tooltip placement="bottomRight" title={text}>\n <Button>BR</Button>\n </Tooltip>\n </Flex>\n </Flex>\n </ConfigProvider>\n);\n\nexport default App;\n';},"78086bd0":function(n,e,t){},"7820d96c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2a7b5674");var o='import React from \'react\';\nimport { Anchor } from \'antd\';\n\nconst { Link } = Anchor;\n\nconst App: React.FC = () => (\n <Anchor affix={false}>\n <Link href="#anchor-demo-basic" title="Basic demo" />\n <Link href="#anchor-demo-static" title="Static demo" />\n <Link href="#api" title="API">\n <Link href="#anchor-props" title="Anchor Props" />\n <Link href="#link-props" title="Link Props" />\n </Link>\n </Anchor>\n);\n\nexport default App;\n';},"785302aa":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cd88d0bb");var o='import React from \'react\';\nimport { Button, Drawer } from \'antd\';\n\nconst App: React.FC = () => {\n const [open, setOpen] = React.useState<boolean>(false);\n const [loading, setLoading] = React.useState<boolean>(true);\n\n const showLoading = () => {\n setOpen(true);\n setLoading(true);\n\n // Simple loading mock. You should add cleanup logic in real world.\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n return (\n <>\n <Button type="primary" onClick={showLoading}>\n Open Drawer\n </Button>\n <Drawer\n closable\n destroyOnHidden\n title={<p>Loading Drawer</p>}\n placement="right"\n open={open}\n loading={loading}\n onClose={() => setOpen(false)}\n >\n <Button type="primary" style={{ marginBottom: 16 }} onClick={showLoading}>\n Reload\n </Button>\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n';},"785c1195":function(n,e,t){},"7884e1f9":function(n,e,t){},"78b4f0f8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8d6ea8ed");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space, Typography } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n label: 'Item 1',\n },\n {\n key: '2',\n label: 'Item 2',\n },\n {\n key: '3',\n label: 'Item 3',\n },\n];\n\nconst App: React.FC = () => (\n <Dropdown\n menu={{\n items,\n selectable: true,\n defaultSelectedKeys: ['3'],\n }}\n >\n <Typography.Link>\n <Space>\n Selectable\n <DownOutlined />\n </Space>\n </Typography.Link>\n </Dropdown>\n);\n\nexport default App;\n";},"78bb70d6":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("215315e2");var o="import React from 'react';\nimport { Button, message } from 'antd';\n\nconst App: React.FC = () => {\n const [messageApi, contextHolder] = message.useMessage();\n const key = 'updatable';\n\n const openMessage = () => {\n messageApi.open({\n key,\n type: 'loading',\n content: 'Loading...',\n });\n setTimeout(() => {\n messageApi.open({\n key,\n type: 'success',\n content: 'Loaded!',\n duration: 2,\n });\n }, 1000);\n };\n\n return (\n <>\n {contextHolder}\n <Button type=\"primary\" onClick={openMessage}>\n Open the message box\n </Button>\n </>\n );\n};\n\nexport default App;\n";},"78c4dd78":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6d874398");var o="import React from 'react';\nimport { DatePicker, Space } from 'antd';\nimport type { GetProps } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ntype RangePickerProps = GetProps<typeof DatePicker.RangePicker>;\n\ndayjs.extend(customParseFormat);\n\nconst { RangePicker } = DatePicker;\n\nconst range = (start: number, end: number) => {\n const result = [];\n for (let i = start; i < end; i++) {\n result.push(i);\n }\n return result;\n};\n\nconst disabledDate: RangePickerProps['disabledDate'] = (current) => {\n // Can not select days before today and today\n return current && current < dayjs().endOf('day');\n};\n\nconst disabledDateTime = () => ({\n disabledHours: () => range(0, 24).splice(4, 20),\n disabledMinutes: () => range(30, 60),\n disabledSeconds: () => [55, 56],\n});\n\nconst disabledRangeTime: RangePickerProps['disabledTime'] = (_, type) => {\n if (type === 'start') {\n return {\n disabledHours: () => range(0, 60).splice(4, 20),\n disabledMinutes: () => range(30, 60),\n disabledSeconds: () => [55, 56],\n };\n }\n return {\n disabledHours: () => range(0, 60).splice(20, 4),\n disabledMinutes: () => range(0, 31),\n disabledSeconds: () => [55, 56],\n };\n};\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <DatePicker\n format=\"YYYY-MM-DD HH:mm:ss\"\n disabledDate={disabledDate}\n disabledTime={disabledDateTime}\n showTime={{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }}\n />\n <DatePicker picker=\"month\" disabledDate={disabledDate} />\n <RangePicker disabledDate={disabledDate} />\n <RangePicker\n disabledDate={disabledDate}\n disabledTime={disabledRangeTime}\n showTime={{\n hideDisabledOptions: true,\n defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],\n }}\n format=\"YYYY-MM-DD HH:mm:ss\"\n />\n </Space>\n);\n\nexport default App;\n";},"78f20a15":function(n,e,t){},"78ffa78c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e71dd64b");var o="import React from 'react';\nimport { Button, Popover } from 'antd';\n\nconst content = (\n <div>\n <p>Content</p>\n <p>Content</p>\n </div>\n);\n\nconst App: React.FC = () => (\n <Popover content={content} title=\"Title\">\n <Button type=\"primary\">Hover me</Button>\n </Popover>\n);\n\nexport default App;\n";},"790fd61b":function(n,e,t){},"793549a3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cb036311");var o="import React from 'react';\nimport { Select, Tag } from 'antd';\nimport type { SelectProps } from 'antd';\n\ntype TagRender = SelectProps['tagRender'];\n\nconst options: SelectProps['options'] = [\n { value: 'gold' },\n { value: 'lime' },\n { value: 'green' },\n { value: 'cyan' },\n];\n\nconst tagRender: TagRender = (props) => {\n const { label, value, closable, onClose } = props;\n const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {\n event.preventDefault();\n event.stopPropagation();\n };\n return (\n <Tag\n color={value}\n onMouseDown={onPreventMouseDown}\n closable={closable}\n onClose={onClose}\n style={{ marginInlineEnd: 4 }}\n >\n {label}\n </Tag>\n );\n};\n\nconst App: React.FC = () => (\n <Select\n mode=\"multiple\"\n tagRender={tagRender}\n defaultValue={['gold', 'cyan']}\n style={{ width: '100%' }}\n options={options}\n />\n);\n\nexport default App;\n";},"7964b65b":function(n,e,t){},"796cba4f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4e14771f");var o='import React from \'react\';\nimport { SmileOutlined } from \'@ant-design/icons\';\nimport { DatePicker, Space } from \'antd\';\nimport type { Dayjs } from \'dayjs\';\n\nconst smileIcon = <SmileOutlined />;\nconst { RangePicker } = DatePicker;\n\nconst onChange = (date: Dayjs | (Dayjs | null)[] | null, dateString: string | string[]) => {\n console.log(date, dateString);\n};\n\nconst App: React.FC = () => (\n <Space direction="vertical" size={12}>\n <DatePicker suffixIcon={smileIcon} onChange={onChange} />\n <DatePicker suffixIcon={smileIcon} onChange={onChange} picker="month" />\n <RangePicker suffixIcon={smileIcon} onChange={onChange} />\n <DatePicker suffixIcon={smileIcon} onChange={onChange} picker="week" />\n <DatePicker suffixIcon="ab" onChange={onChange} />\n <DatePicker suffixIcon="ab" onChange={onChange} picker="month" />\n <RangePicker suffixIcon="ab" onChange={onChange} />\n <DatePicker suffixIcon="ab" onChange={onChange} picker="week" />\n <DatePicker prefix={smileIcon} onChange={onChange} picker="week" />\n <DatePicker prefix="Event Period" onChange={onChange} picker="week" />\n <RangePicker prefix={smileIcon} onChange={onChange} picker="week" />\n <RangePicker prefix="Event Period" onChange={onChange} picker="week" />\n </Space>\n);\n\nexport default App;\n';},"7972ce61":function(n,e,t){},"797d711c":function(n,e,t){},"79c56bc5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b641b1a6");var o='import React from \'react\';\nimport { Flex, Progress, Tooltip } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" vertical>\n <Tooltip title="3 done / 3 in progress / 4 to do">\n <Progress percent={60} success={{ percent: 30 }} />\n </Tooltip>\n <Flex gap="small" wrap>\n <Tooltip title="3 done / 3 in progress / 4 to do">\n <Progress percent={60} success={{ percent: 30 }} type="circle" />\n </Tooltip>\n <Tooltip title="3 done / 3 in progress / 4 to do">\n <Progress percent={60} success={{ percent: 30 }} type="dashboard" />\n </Tooltip>\n </Flex>\n </Flex>\n);\n\nexport default App;\n';},"7a0a3148":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("493398f3");var o="import React from 'react';\nimport { InputNumber } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalInputNumber } = InputNumber;\n\nexport default () => (\n <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>\n <InternalInputNumber style={{ width: '100%' }} />\n </div>\n);\n";},"7a0c6385":function(n,e,t){},"7a16c562":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("40cfb626");var o="import React, { useState } from 'react';\nimport { Button, Flex, Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ntype TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n { title: 'Name', dataIndex: 'name' },\n { title: 'Age', dataIndex: 'age' },\n { title: 'Address', dataIndex: 'address' },\n];\n\nconst dataSource = Array.from<DataType>({ length: 46 }).map<DataType>((_, i) => ({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n}));\n\nconst App: React.FC = () => {\n const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);\n const [loading, setLoading] = useState(false);\n\n const start = () => {\n setLoading(true);\n // ajax request after empty completing\n setTimeout(() => {\n setSelectedRowKeys([]);\n setLoading(false);\n }, 1000);\n };\n\n const onSelectChange = (newSelectedRowKeys: React.Key[]) => {\n console.log('selectedRowKeys changed: ', newSelectedRowKeys);\n setSelectedRowKeys(newSelectedRowKeys);\n };\n\n const rowSelection: TableRowSelection<DataType> = {\n selectedRowKeys,\n onChange: onSelectChange,\n };\n\n const hasSelected = selectedRowKeys.length > 0;\n\n return (\n <Flex gap=\"middle\" vertical>\n <Flex align=\"center\" gap=\"middle\">\n <Button type=\"primary\" onClick={start} disabled={!hasSelected} loading={loading}>\n Reload\n </Button>\n {hasSelected ? `Selected ${selectedRowKeys.length} items` : null}\n </Flex>\n <Table<DataType> rowSelection={rowSelection} columns={columns} dataSource={dataSource} />\n </Flex>\n );\n};\n\nexport default App;\n";},"7a5c44bf":function(n,e,t){},"7a6a8e90":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5fc276af");var o="import React from 'react';\nimport type { InputRef } from 'antd';\nimport { Button, Form, Input } from 'antd';\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const ref = React.useRef<InputRef>(null);\n\n return (\n <Form form={form} initialValues={{ list: ['light'] }} style={{ maxWidth: 600 }}>\n <Form.Item name=\"test\" label=\"test\">\n <Input ref={ref} />\n </Form.Item>\n\n <Form.List name=\"list\">\n {(fields) =>\n fields.map((field) => (\n <Form.Item {...field} key={field.key}>\n <Input ref={ref} />\n </Form.Item>\n ))\n }\n </Form.List>\n\n <Button\n htmlType=\"button\"\n onClick={() => {\n form.getFieldInstance('test').focus();\n }}\n >\n Focus Form.Item\n </Button>\n <Button\n onClick={() => {\n form.getFieldInstance(['list', 0]).focus();\n }}\n >\n Focus Form.List\n </Button>\n </Form>\n );\n};\n\nexport default App;\n";},"7a6c8d4a":function(n,e,t){},"7abf516c":function(n,e,t){},"7ad91b75":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eba13139");var o='import React from \'react\';\nimport { EyeInvisibleOutlined, EyeTwoTone } from \'@ant-design/icons\';\nimport { Button, Input, Space } from \'antd\';\n\nconst App: React.FC = () => {\n const [passwordVisible, setPasswordVisible] = React.useState(false);\n\n return (\n <Space direction="vertical">\n <Input.Password placeholder="input password" />\n <Input.Password\n placeholder="input password"\n iconRender={(visible) => (visible ? <EyeTwoTone /> : <EyeInvisibleOutlined />)}\n />\n <Space direction="horizontal">\n <Input.Password\n placeholder="input password"\n visibilityToggle={{ visible: passwordVisible, onVisibleChange: setPasswordVisible }}\n />\n <Button style={{ width: 80 }} onClick={() => setPasswordVisible((prevState) => !prevState)}>\n {passwordVisible ? \'Hide\' : \'Show\'}\n </Button>\n </Space>\n <Input.Password disabled placeholder="disabled input password" />\n </Space>\n );\n};\n\nexport default App;\n';},"7aff61d2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1624d22b");var o="import React, { useState } from 'react';\nimport { Space, Switch, Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ntype TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];\n\ninterface DataType {\n key: React.ReactNode;\n name: string;\n age: number;\n address: string;\n children?: DataType[];\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: '12%',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n width: '30%',\n key: 'address',\n },\n];\n\nconst data: DataType[] = [\n {\n key: 1,\n name: 'John Brown sr.',\n age: 60,\n address: 'New York No. 1 Lake Park',\n children: [\n {\n key: 11,\n name: 'John Brown',\n age: 42,\n address: 'New York No. 2 Lake Park',\n },\n {\n key: 12,\n name: 'John Brown jr.',\n age: 30,\n address: 'New York No. 3 Lake Park',\n children: [\n {\n key: 121,\n name: 'Jimmy Brown',\n age: 16,\n address: 'New York No. 3 Lake Park',\n },\n ],\n },\n {\n key: 13,\n name: 'Jim Green sr.',\n age: 72,\n address: 'London No. 1 Lake Park',\n children: [\n {\n key: 131,\n name: 'Jim Green',\n age: 42,\n address: 'London No. 2 Lake Park',\n children: [\n {\n key: 1311,\n name: 'Jim Green jr.',\n age: 25,\n address: 'London No. 3 Lake Park',\n },\n {\n key: 1312,\n name: 'Jimmy Green sr.',\n age: 18,\n address: 'London No. 4 Lake Park',\n },\n ],\n },\n ],\n },\n ],\n },\n {\n key: 2,\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n];\n\n// rowSelection objects indicates the need for row selection\nconst rowSelection: TableRowSelection<DataType> = {\n onChange: (selectedRowKeys, selectedRows) => {\n console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);\n },\n onSelect: (record, selected, selectedRows) => {\n console.log(record, selected, selectedRows);\n },\n onSelectAll: (selected, selectedRows, changeRows) => {\n console.log(selected, selectedRows, changeRows);\n },\n};\n\nconst App: React.FC = () => {\n const [checkStrictly, setCheckStrictly] = useState(false);\n\n return (\n <>\n <Space align=\"center\" style={{ marginBottom: 16 }}>\n CheckStrictly: <Switch checked={checkStrictly} onChange={setCheckStrictly} />\n </Space>\n <Table<DataType>\n columns={columns}\n rowSelection={{ ...rowSelection, checkStrictly }}\n dataSource={data}\n />\n </>\n );\n};\n\nexport default App;\n";},"7b2ce810":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4588c86c");var o="import React, { useState } from 'react';\nimport { Button, Popconfirm } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [confirmLoading, setConfirmLoading] = useState(false);\n\n const showPopconfirm = () => {\n setOpen(true);\n };\n\n const handleOk = () => {\n setConfirmLoading(true);\n\n setTimeout(() => {\n setOpen(false);\n setConfirmLoading(false);\n }, 2000);\n };\n\n const handleCancel = () => {\n console.log('Clicked cancel button');\n setOpen(false);\n };\n\n return (\n <Popconfirm\n title=\"Title\"\n description=\"Open Popconfirm with async logic\"\n open={open}\n onConfirm={handleOk}\n okButtonProps={{ loading: confirmLoading }}\n onCancel={handleCancel}\n >\n <Button type=\"primary\" onClick={showPopconfirm}>\n Open Popconfirm with async logic\n </Button>\n </Popconfirm>\n );\n};\n\nexport default App;\n";},"7b2eb1ad":function(n,e,t){},"7b3b6b05":function(n,e,t){},"7b4060e1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f4bc1c8e");var o='import React from \'react\';\nimport { Flex, Space, Splitter, Typography } from \'antd\';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify="center" align="center" style={{ height: \'100%\' }}>\n <Typography.Title type="secondary" level={5} style={{ whiteSpace: \'nowrap\' }}>\n {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => (\n <Space direction="vertical" style={{ width: \'100%\' }}>\n <Splitter lazy style={{ height: 200, boxShadow: \'0 0 10px rgba(0, 0, 0, 0.1)\' }}>\n <Splitter.Panel defaultSize="40%" min="20%" max="70%">\n <Desc text="First" />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text="Second" />\n </Splitter.Panel>\n </Splitter>\n <Splitter\n lazy\n layout="vertical"\n style={{ height: 200, boxShadow: \'0 0 10px rgba(0, 0, 0, 0.1)\' }}\n >\n <Splitter.Panel defaultSize="40%" min="30%" max="70%">\n <Desc text="First" />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text="Second" />\n </Splitter.Panel>\n </Splitter>\n </Space>\n);\n\nexport default App;\n';},"7b449b2e":function(n,e,t){},"7b5d1826":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1f48e536");var o='import React from \'react\';\nimport { Pagination } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Pagination align="start" defaultCurrent={1} total={50} />\n <br />\n <Pagination align="center" defaultCurrent={1} total={50} />\n <br />\n <Pagination align="end" defaultCurrent={1} total={50} />\n </>\n);\n\nexport default App;\n';},"7b7514e1":function(n,e,t){},"7baabe25":function(n,e,t){},"7bacade2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("121a71ca");var o="import React from 'react';\nimport { Steps } from 'antd';\n\nconst description = 'This is a description.';\nconst items = [\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n];\nconst App: React.FC = () => (\n <>\n <Steps current={1} labelPlacement=\"vertical\" items={items} />\n <br />\n <Steps current={1} percent={60} labelPlacement=\"vertical\" items={items} />\n <br />\n <Steps current={1} percent={80} size=\"small\" labelPlacement=\"vertical\" items={items} />\n </>\n);\n\nexport default App;\n";},"7bcbb822":function(n,e,t){},"7be31577":function(n,e,t){},"7bed81e4":function(n,e,t){},"7bfa279c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3ed144ab");var o="import React from 'react';\nimport { Button, Popover } from 'antd';\n\nconst style: React.CSSProperties = {\n width: '300vw',\n height: '300vh',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst App: React.FC = () => {\n React.useEffect(() => {\n document.documentElement.scrollTop = document.documentElement.clientHeight;\n document.documentElement.scrollLeft = document.documentElement.clientWidth;\n }, []);\n return (\n <div style={style}>\n <Popover content=\"Thanks for using antd. Have a nice day !\" open>\n <Button type=\"primary\">Scroll The Window</Button>\n </Popover>\n </div>\n );\n};\n\nexport default App;\n";},"7c350a51":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("35601abe");var o='import React from \'react\';\nimport { Avatar, Badge, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space size="large">\n <Badge count={99}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={100}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={99} overflowCount={10}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={1000} overflowCount={999}>\n <Avatar shape="square" size="large" />\n </Badge>\n </Space>\n);\n\nexport default App;\n';},"7c37d539":function(n,e,t){},"7c4d8f9b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f09ee802");var o="import React from 'react';\nimport { Space, Switch, Tabs } from 'antd';\n\nconst App: React.FC = () => {\n const [inkBar, setInkBar] = React.useState(true);\n const [tabPane, setTabPane] = React.useState(true);\n\n return (\n <>\n <Space>\n <Switch\n checkedChildren=\"inkBar\"\n unCheckedChildren=\"inkBar\"\n checked={inkBar}\n onChange={() => setInkBar(!inkBar)}\n />\n <Switch\n checkedChildren=\"tabPane\"\n unCheckedChildren=\"tabPane\"\n checked={tabPane}\n onChange={() => setTabPane(!tabPane)}\n />\n </Space>\n\n <Tabs\n animated={{ inkBar, tabPane }}\n items={[\n {\n label: 'Bamboo',\n key: '1',\n children: 'Hello Bamboo!',\n style: {\n height: 200,\n boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)',\n },\n },\n {\n label: 'Little',\n key: '2',\n children: 'Hi Little!',\n style: {\n height: 300,\n boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)',\n },\n },\n {\n label: 'Light',\n key: '3',\n children: 'Welcome Light!',\n style: {\n height: 100,\n boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)',\n },\n },\n ]}\n />\n </>\n );\n};\n\nexport default App;\n";},"7c525f2b":function(n,e,t){},"7c766ae2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c59262c2");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableProps } from 'antd';\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n tel: string;\n phone: number;\n address: string;\n}\n\n// In the fifth row, other columns are merged into first column\n// by setting it's colSpan to be 0\nconst sharedOnCell = (_: DataType, index?: number) => {\n if (index === 1) {\n return { colSpan: 0 };\n }\n\n return {};\n};\n\nconst columns: TableProps<DataType>['columns'] = [\n {\n title: 'RowHead',\n dataIndex: 'key',\n rowScope: 'row',\n },\n {\n title: 'Name',\n dataIndex: 'name',\n render: (text) => <a>{text}</a>,\n onCell: (_, index) => ({\n colSpan: index === 1 ? 5 : 1,\n }),\n },\n {\n title: 'Age',\n dataIndex: 'age',\n onCell: sharedOnCell,\n },\n {\n title: 'Home phone',\n colSpan: 2,\n dataIndex: 'tel',\n onCell: (_, index) => {\n if (index === 3) {\n return { rowSpan: 2 };\n }\n // These two are merged into above cell\n if (index === 4) {\n return { rowSpan: 0 };\n }\n if (index === 1) {\n return { colSpan: 0 };\n }\n\n return {};\n },\n },\n {\n title: 'Phone',\n colSpan: 0,\n dataIndex: 'phone',\n onCell: sharedOnCell,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n onCell: sharedOnCell,\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n tel: '0571-22098909',\n phone: 18889898989,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n tel: '0571-22098333',\n phone: 18889898888,\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Sydney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'London No. 2 Lake Park',\n },\n {\n key: '5',\n name: 'Jake White',\n age: 18,\n tel: '0575-22098909',\n phone: 18900010002,\n address: 'Dublin No. 2 Lake Park',\n },\n];\n\nconst App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} bordered />;\n\nexport default App;\n";},"7cec48dd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8915fd24");var o='import React from \'react\';\nimport { ColorPicker, Space } from \'antd\';\n\nconst Demo = () => (\n <Space>\n <Space direction="vertical">\n <ColorPicker defaultValue="#1677ff" size="small" />\n <ColorPicker defaultValue="#1677ff" />\n <ColorPicker defaultValue="#1677ff" size="large" />\n </Space>\n <Space direction="vertical">\n <ColorPicker defaultValue="#1677ff" size="small" showText />\n <ColorPicker defaultValue="#1677ff" showText />\n <ColorPicker defaultValue="#1677ff" size="large" showText />\n </Space>\n </Space>\n);\n\nexport default Demo;\n';},"7cfb1cfe":function(n,e,t){},"7d0b8ee5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ba5173db");var o="import React, { useState } from 'react';\nimport { Switch, Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Full Name',\n width: 100,\n dataIndex: 'name',\n key: 'name',\n fixed: 'left',\n },\n {\n title: 'Age',\n width: 100,\n dataIndex: 'age',\n key: 'age',\n fixed: 'left',\n },\n {\n title: 'Column 1',\n dataIndex: 'address',\n key: '1',\n width: 150,\n },\n {\n title: 'Column 2',\n dataIndex: 'address',\n key: '2',\n width: 150,\n },\n {\n title: 'Column 3',\n dataIndex: 'address',\n key: '3',\n width: 150,\n },\n {\n title: 'Column 4',\n dataIndex: 'address',\n key: '4',\n width: 150,\n },\n {\n title: 'Column 5',\n dataIndex: 'address',\n key: '5',\n width: 150,\n },\n {\n title: 'Column 6',\n dataIndex: 'address',\n key: '6',\n width: 150,\n },\n {\n title: 'Column 7',\n dataIndex: 'address',\n key: '7',\n width: 150,\n },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n {\n title: 'Action',\n key: 'operation',\n fixed: 'right',\n width: 100,\n render: () => <a>action</a>,\n },\n];\n\nconst dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({\n key: i,\n name: `Edward ${i}`,\n age: 32,\n address: `London Park no. ${i}`,\n}));\n\nconst App: React.FC = () => {\n const [fixedTop, setFixedTop] = useState(false);\n return (\n <Table<DataType>\n columns={columns}\n dataSource={dataSource}\n scroll={{ x: 1500 }}\n summary={() => (\n <Table.Summary fixed={fixedTop ? 'top' : 'bottom'}>\n <Table.Summary.Row>\n <Table.Summary.Cell index={0} colSpan={2}>\n <Switch\n checkedChildren=\"Fixed Top\"\n unCheckedChildren=\"Fixed Top\"\n checked={fixedTop}\n onChange={() => {\n setFixedTop(!fixedTop);\n }}\n />\n </Table.Summary.Cell>\n <Table.Summary.Cell index={2} colSpan={8}>\n Scroll Context\n </Table.Summary.Cell>\n <Table.Summary.Cell index={10}>Fix Right</Table.Summary.Cell>\n </Table.Summary.Row>\n </Table.Summary>\n )}\n // antd site header height\n sticky={{ offsetHeader: 64 }}\n />\n );\n};\n\nexport default App;\n";},"7d450439":function(n,e,t){},"7d4c4fb0":function(n,e,t){},"7dce939d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3c8af02e");var o='import React from \'react\';\nimport { Space, Typography } from \'antd\';\n\nconst { Text, Link } = Typography;\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Text>Ant Design (default)</Text>\n <Text type="secondary">Ant Design (secondary)</Text>\n <Text type="success">Ant Design (success)</Text>\n <Text type="warning">Ant Design (warning)</Text>\n <Text type="danger">Ant Design (danger)</Text>\n <Text disabled>Ant Design (disabled)</Text>\n <Text mark>Ant Design (mark)</Text>\n <Text code>Ant Design (code)</Text>\n <Text keyboard>Ant Design (keyboard)</Text>\n <Text underline>Ant Design (underline)</Text>\n <Text delete>Ant Design (delete)</Text>\n <Text strong>Ant Design (strong)</Text>\n <Text italic>Ant Design (italic)</Text>\n <Link href="https://ant.design" target="_blank">\n Ant Design (Link)\n </Link>\n </Space>\n);\n\nexport default App;\n';},"7dd39b55":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4cc29ff5");var o="import React from 'react';\nimport { Flex, Input } from 'antd';\n\nconst { TextArea } = Input;\n\nconst onChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n console.log('Change:', e.target.value);\n};\n\nconst App: React.FC = () => (\n <Flex vertical gap={32}>\n <Input showCount maxLength={20} onChange={onChange} />\n <TextArea showCount maxLength={100} onChange={onChange} placeholder=\"can resize\" />\n <TextArea\n showCount\n maxLength={100}\n onChange={onChange}\n placeholder=\"disable resize\"\n style={{ height: 120, resize: 'none' }}\n />\n </Flex>\n);\n\nexport default App;\n";},"7dd4b982":function(n,e,t){},"7df65db8":function(n,e,t){},"7e035eb1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("970b23c8");var o="import React from 'react';\nimport { ConfigProvider, DatePicker, Divider, Flex, Space, TimePicker } from 'antd';\nimport dayjs from 'dayjs';\n\n/** Test usage. Do not use in your production. */\n\nconst { RangePicker } = DatePicker;\n\nconst App: React.FC = () => (\n <>\n <ConfigProvider\n theme={{\n components: {\n DatePicker: {\n presetsWidth: 160,\n zIndexPopup: 888,\n cellHoverWithRangeBg: '#f0f0f0',\n cellActiveWithRangeBg: '#e6bbff',\n cellRangeBorderColor: 'green',\n timeColumnWidth: 80,\n timeColumnHeight: 250,\n timeCellHeight: 30,\n cellWidth: 64,\n cellHeight: 40,\n textHeight: 45,\n withoutTimeCellHeight: 70,\n },\n },\n }}\n >\n <Space direction=\"vertical\">\n <DatePicker\n presets={[\n { label: 'Yesterday', value: dayjs().add(-1, 'd') },\n { label: 'Last Week', value: dayjs().add(-7, 'd') },\n { label: 'Last Month', value: dayjs().add(-1, 'month') },\n ]}\n />\n <RangePicker />\n <TimePicker />\n <DatePicker picker=\"month\" />\n </Space>\n </ConfigProvider>\n\n <Divider />\n\n <ConfigProvider\n theme={{\n components: {\n DatePicker: {\n controlHeightSM: 32,\n controlHeight: 40,\n },\n },\n }}\n >\n <Flex vertical gap={8}>\n <DatePicker multiple size=\"small\" />\n <DatePicker multiple />\n <DatePicker multiple size=\"large\" />\n </Flex>\n </ConfigProvider>\n </>\n);\n\nexport default App;\n";},"7e2cc86d":function(n,e,t){},"7e3c42ce":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3ff550fd");var o="import React from 'react';\nimport { Button, Modal, Space } from 'antd';\n\nconst info = () => {\n Modal.info({\n title: 'This is a notification message',\n content: (\n <div>\n <p>some messages...some messages...</p>\n <p>some messages...some messages...</p>\n </div>\n ),\n onOk() {},\n });\n};\n\nconst success = () => {\n Modal.success({\n content: 'some messages...some messages...',\n });\n};\n\nconst error = () => {\n Modal.error({\n title: 'This is an error message',\n content: 'some messages...some messages...',\n });\n};\n\nconst warning = () => {\n Modal.warning({\n title: 'This is a warning message',\n content: 'some messages...some messages...',\n });\n};\n\nconst App: React.FC = () => (\n <Space wrap>\n <Button onClick={info}>Info</Button>\n <Button onClick={success}>Success</Button>\n <Button onClick={error}>Error</Button>\n <Button onClick={warning}>Warning</Button>\n </Space>\n);\n\nexport default App;\n";},"7e500464":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a3f7f3d9");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n type: 'group',\n label: 'Group title',\n children: [\n {\n key: '1-1',\n label: '1st menu item',\n },\n {\n key: '1-2',\n label: '2nd menu item',\n },\n ],\n },\n {\n key: '2',\n label: 'sub menu',\n children: [\n {\n key: '2-1',\n label: '3rd menu item',\n },\n {\n key: '2-2',\n label: '4th menu item',\n },\n ],\n },\n {\n key: '3',\n label: 'disabled sub menu',\n disabled: true,\n children: [\n {\n key: '3-1',\n label: '5d menu item',\n },\n {\n key: '3-2',\n label: '6th menu item',\n },\n ],\n },\n];\n\nconst App: React.FC = () => (\n <div style={{ height: 200 }}>\n <Dropdown menu={{ items, openKeys: ['2'] }} open autoAdjustOverflow={false}>\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Cascading menu\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n </div>\n);\n\nexport default App;\n";},"7e6597d1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7c525f2b");var o="import React from 'react';\nimport { Empty } from 'antd';\n\nconst App: React.FC = () => <Empty description={false} />;\n\nexport default App;\n";},"7eaf15dd":function(n,e,t){},"7eb75643":function(n,e,t){},"7eba4d04":function(n,e,t){},"7ebe5e0c":function(n,e,t){},"7ed9b33d":function(n,e,t){},"7efb50f5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b03e9810");var o="import React from 'react';\nimport { Alert } from 'antd';\nimport Marquee from 'react-fast-marquee';\n\nconst App: React.FC = () => (\n <Alert\n banner\n message={\n <Marquee pauseOnHover gradient={false}>\n I can be a React component, multiple React components, or just some text.\n </Marquee>\n }\n />\n);\n\nexport default App;\n";},"7f2cff90":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("44756fa8");var o="import React from 'react';\nimport { ExclamationCircleOutlined } from '@ant-design/icons';\nimport { Button, Modal } from 'antd';\n\nconst { confirm } = Modal;\n\nconst destroyAll = () => {\n Modal.destroyAll();\n};\n\nconst showConfirm = () => {\n for (let i = 0; i < 3; i += 1) {\n setTimeout(() => {\n confirm({\n icon: <ExclamationCircleOutlined />,\n content: <Button onClick={destroyAll}>Click to destroy all</Button>,\n onOk() {\n console.log('OK');\n },\n onCancel() {\n console.log('Cancel');\n },\n });\n }, i * 500);\n }\n};\n\nconst App: React.FC = () => <Button onClick={showConfirm}>Confirm</Button>;\n\nexport default App;\n";},"7f31ebab":function(n,e,t){},"7f46b144":function(n,e,t){},"7f6037a2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8971af96");var o="import React from 'react';\nimport { Anchor } from 'antd';\n\nconst onChange = (link: string) => {\n console.log('Anchor:OnChange', link);\n};\n\nconst App: React.FC = () => (\n <Anchor\n affix={false}\n onChange={onChange}\n items={[\n {\n key: '1',\n href: '#anchor-demo-basic',\n title: 'Basic demo',\n },\n {\n key: '2',\n href: '#anchor-demo-static',\n title: 'Static demo',\n },\n {\n key: '3',\n href: '#api',\n title: 'API',\n children: [\n {\n key: '4',\n href: '#anchor-props',\n title: 'Anchor Props',\n },\n {\n key: '5',\n href: '#link-props',\n title: 'Link Props',\n },\n ],\n },\n ]}\n />\n);\n\nexport default App;\n";},"7f6cae7d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4a805458");var o="import React from 'react';\nimport { Cascader } from 'antd';\nimport type { CascaderProps, GetProp } from 'antd';\n\ntype DefaultOptionType = GetProp<CascaderProps, 'options'>[number];\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n code?: number;\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n code: 752100,\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n code: 453400,\n },\n ],\n },\n ],\n },\n];\n\nconst handleAreaClick = (\n e: React.MouseEvent<HTMLAnchorElement>,\n label: string,\n option: DefaultOptionType,\n) => {\n e.stopPropagation();\n console.log('clicked', label, option);\n};\n\nconst displayRender: CascaderProps<Option>['displayRender'] = (labels, selectedOptions = []) =>\n labels.map((label, i) => {\n const option = selectedOptions[i];\n if (i === labels.length - 1) {\n return (\n <span key={option.value}>\n {label} (<a onClick={(e) => handleAreaClick(e, label, option)}>{option.code}</a>)\n </span>\n );\n }\n return <span key={option.value}>{label} / </span>;\n });\n\nconst App: React.FC = () => (\n <Cascader\n options={options}\n defaultValue={['zhejiang', 'hangzhou', 'xihu']}\n displayRender={displayRender}\n style={{ width: '100%' }}\n />\n);\n\nexport default App;\n";},"7f7b9068":function(n,e,t){},"7fcf3ca8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c5cef641");var o='import React from \'react\';\nimport type { RadioChangeEvent } from \'antd\';\nimport { Flex, Radio } from \'antd\';\n\nconst onChange = (e: RadioChangeEvent) => {\n console.log(`radio checked:${e.target.value}`);\n};\n\nconst App: React.FC = () => (\n <Flex vertical gap="middle">\n <Radio.Group onChange={onChange} defaultValue="a">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n <Radio.Group onChange={onChange} defaultValue="a">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b" disabled>\n Shanghai\n </Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n <Radio.Group disabled onChange={onChange} defaultValue="a">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n </Flex>\n);\n\nexport default App;\n';},"7fd2978e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7884e1f9");var o='import React from \'react\';\nimport { Button, Form, Input } from \'antd\';\n\nconst App: React.FC = () => (\n <Form\n name="wrap"\n labelCol={{ flex: \'110px\' }}\n labelAlign="left"\n labelWrap\n wrapperCol={{ flex: 1 }}\n colon={false}\n style={{ maxWidth: 600 }}\n >\n <Form.Item label="Normal label" name="username" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n\n <Form.Item label="A super long label text" name="password" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n\n <Form.Item label="A super long label text" name="password1">\n <Input />\n </Form.Item>\n\n <Form.Item label=" ">\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},"7fdaa757":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f1585c1d");var o="import React from 'react';\nimport { AutoComplete, Flex, Select } from 'antd';\n\nconst AutoCompleteAndSelect = () => {\n return (\n <Flex vertical gap={16}>\n {(['small', 'middle', 'large'] as const).map((size) => (\n <Flex key={size}>\n <Select\n value=\"centered\"\n size={size}\n style={{ width: 200 }}\n searchValue=\"centered\"\n showSearch\n />\n <AutoComplete value=\"centered\" size={size} style={{ width: 200 }} />\n </Flex>\n ))}\n </Flex>\n );\n};\n\nexport default AutoCompleteAndSelect;\n";},"801ae27e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ea21a2ad");var o="import React from 'react';\nimport { ColorPicker } from 'antd';\n\nconst Demo = () => <ColorPicker defaultValue=\"#1677ff\" trigger=\"hover\" />;\n\nexport default Demo;\n";},"802de6a8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7cfb1cfe");var o="import React, { useState } from 'react';\nimport { Tree } from 'antd';\n\ninterface DataNode {\n title: string;\n key: string;\n isLeaf?: boolean;\n children?: DataNode[];\n}\n\nconst initTreeData: DataNode[] = [\n { title: 'Expand to load', key: '0' },\n { title: 'Expand to load', key: '1' },\n { title: 'Tree Node', key: '2', isLeaf: true },\n];\n\n// It's just a simple demo. You can use tree map to optimize update perf.\nconst updateTreeData = (list: DataNode[], key: React.Key, children: DataNode[]): DataNode[] =>\n list.map((node) => {\n if (node.key === key) {\n return {\n ...node,\n children,\n };\n }\n if (node.children) {\n return {\n ...node,\n children: updateTreeData(node.children, key, children),\n };\n }\n return node;\n });\n\nconst App: React.FC = () => {\n const [treeData, setTreeData] = useState(initTreeData);\n\n const onLoadData = ({ key, children }: any) =>\n new Promise<void>((resolve) => {\n if (children) {\n resolve();\n return;\n }\n setTimeout(() => {\n setTreeData((origin) =>\n updateTreeData(origin, key, [\n { title: 'Child Node', key: `${key}-0` },\n { title: 'Child Node', key: `${key}-1` },\n ]),\n );\n\n resolve();\n }, 1000);\n });\n\n return <Tree loadData={onLoadData} treeData={treeData} />;\n};\n\nexport default App;\n";},"8048b9b3":function(n,e,t){},"8076b1e7":function(n,e,t){},"80a5f034":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c73f3474");var o='import React, { useState } from \'react\';\nimport { Button, Divider, Image, Modal } from \'antd\';\n\nconst App: React.FC = () => {\n const [show1, setShow1] = useState(false);\n const [show2, setShow2] = useState(false);\n const [show3, setShow3] = useState(false);\n return (\n <>\n <Button\n onClick={() => {\n setShow1(true);\n }}\n >\n showModal\n </Button>\n <Modal\n open={show1}\n afterOpenChange={(open) => {\n setShow1(open);\n }}\n onCancel={() => {\n setShow1(false);\n }}\n onOk={() => setShow1(false)}\n >\n <Button\n onClick={() => {\n setShow2(true);\n }}\n >\n test2\n </Button>\n <Modal\n open={show2}\n afterOpenChange={(open) => {\n setShow2(open);\n }}\n onCancel={() => {\n setShow2(false);\n }}\n onOk={() => setShow2(false)}\n >\n <Button\n onClick={() => {\n setShow3(true);\n }}\n >\n test3\n </Button>\n <Modal\n open={show3}\n afterOpenChange={(open) => {\n setShow3(open);\n }}\n onCancel={() => {\n setShow3(false);\n }}\n onOk={() => setShow3(false)}\n >\n <Image\n width={200}\n src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"\n />\n <Divider />\n <Image.PreviewGroup\n preview={{\n onChange: (current, prev) =>\n console.log(`current index: ${current}, prev index: ${prev}`),\n }}\n >\n <Image\n width={200}\n src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"\n />\n <Image\n width={200}\n src="https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg"\n />\n </Image.PreviewGroup>\n </Modal>\n </Modal>\n </Modal>\n </>\n );\n};\n\nexport default App;\n';},"80a5f60f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("45555f38");var o="import React from 'react';\nimport {\n CommentOutlined,\n DownOutlined,\n LeftOutlined,\n RightOutlined,\n UpOutlined,\n} from '@ant-design/icons';\nimport { Flex, FloatButton } from 'antd';\n\nconst BOX_SIZE = 100;\nconst BUTTON_SIZE = 40;\n\nconst wrapperStyle: React.CSSProperties = {\n width: '100%',\n height: '100vh',\n overflow: 'hidden',\n position: 'relative',\n};\n\nconst boxStyle: React.CSSProperties = {\n width: BOX_SIZE,\n height: BOX_SIZE,\n position: 'relative',\n};\n\nconst insetInlineEnd: React.CSSProperties['insetInlineEnd'][] = [\n (BOX_SIZE - BUTTON_SIZE) / 2,\n -(BUTTON_SIZE / 2),\n (BOX_SIZE - BUTTON_SIZE) / 2,\n BOX_SIZE - BUTTON_SIZE / 2,\n];\n\nconst bottom: React.CSSProperties['bottom'][] = [\n BOX_SIZE - BUTTON_SIZE / 2,\n (BOX_SIZE - BUTTON_SIZE) / 2,\n -BUTTON_SIZE / 2,\n (BOX_SIZE - BUTTON_SIZE) / 2,\n];\n\nconst icons = [\n <UpOutlined key=\"up\" />,\n <RightOutlined key=\"right\" />,\n <DownOutlined key=\"down\" />,\n <LeftOutlined key=\"left\" />,\n];\n\nconst App: React.FC = () => (\n <Flex justify=\"space-evenly\" align=\"center\" style={wrapperStyle}>\n <div style={boxStyle}>\n {(['top', 'right', 'bottom', 'left'] as const).map((placement, i) => {\n const style: React.CSSProperties = {\n position: 'absolute',\n insetInlineEnd: insetInlineEnd[i],\n bottom: bottom[i],\n };\n return (\n <FloatButton.Group\n key={placement}\n trigger=\"click\"\n placement={placement}\n style={style}\n icon={icons[i]}\n >\n <FloatButton />\n <FloatButton icon={<CommentOutlined />} />\n </FloatButton.Group>\n );\n })}\n </div>\n </Flex>\n);\n\nexport default App;\n";},"80a9a74d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("18450704");var o="import React from 'react';\nimport { Card } from 'antd';\n\nconst App: React.FC = () => (\n <Card title=\"Card title\" variant=\"borderless\" style={{ width: 300 }}>\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n);\n\nexport default App;\n";},"80fe647a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eadaa92b");var o="import { useLocale as useDumiLocale } from 'dumi';\n\nexport interface LocaleMap<\n K extends PropertyKey = PropertyKey,\n V extends string | ((...params: any[]) => string) = string,\n> {\n cn: Record<K, V>;\n en: Record<K, V>;\n}\n\nconst useLocale = <\n K extends PropertyKey = PropertyKey,\n V extends string | ((...params: any[]) => string) = string,\n>(\n localeMap?: LocaleMap<K, V>,\n): [Record<K, V>, 'cn' | 'en'] => {\n const { id } = useDumiLocale();\n const localeType = id === 'zh-CN' ? 'cn' : 'en';\n return [localeMap?.[localeType]!, localeType] as const;\n};\n\nexport default useLocale;\n";},"814731a4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fa26253e");var o="import React from 'react';\nimport { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Menu } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n key: 'sub1',\n label: 'Navigation One',\n icon: <MailOutlined />,\n children: [\n {\n key: 'g1',\n label: 'Item 1',\n type: 'group',\n children: [\n { key: '1', label: 'Option 1' },\n { key: '2', label: 'Option 2' },\n ],\n },\n {\n key: 'g2',\n label: 'Item 2',\n type: 'group',\n children: [\n { key: '3', label: 'Option 3' },\n { key: '4', label: 'Option 4' },\n ],\n },\n ],\n },\n {\n key: 'sub2',\n label: 'Navigation Two',\n icon: <AppstoreOutlined />,\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n {\n key: 'sub3',\n label: 'Submenu',\n children: [\n { key: '7', label: 'Option 7' },\n { key: '8', label: 'Option 8' },\n ],\n },\n ],\n },\n {\n type: 'divider',\n },\n {\n key: 'sub4',\n label: 'Navigation Three',\n icon: <SettingOutlined />,\n children: [\n { key: '9', label: 'Option 9' },\n { key: '10', label: 'Option 10' },\n { key: '11', label: 'Option 11' },\n { key: '12', label: 'Option 12' },\n ],\n },\n {\n key: 'grp',\n label: 'Group',\n type: 'group',\n children: [\n { key: '13', label: 'Option 13' },\n { key: '14', label: 'Option 14' },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const onClick: MenuProps['onClick'] = (e) => {\n console.log('click ', e);\n };\n\n return (\n <Menu\n onClick={onClick}\n style={{ width: 256 }}\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n mode=\"inline\"\n items={items}\n />\n );\n};\n\nexport default App;\n";},"817e6e70":function(n,e,t){},"81c39f47":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b4310f30");var o="import React from 'react';\nimport { CloseOutlined } from '@ant-design/icons';\nimport { Button, Card, Form, Input, Space, Typography } from 'antd';\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n\n return (\n <Form\n labelCol={{ span: 6 }}\n wrapperCol={{ span: 18 }}\n form={form}\n name=\"dynamic_form_complex\"\n style={{ maxWidth: 600 }}\n autoComplete=\"off\"\n initialValues={{ items: [{}] }}\n >\n <Form.List name=\"items\">\n {(fields, { add, remove }) => (\n <div style={{ display: 'flex', rowGap: 16, flexDirection: 'column' }}>\n {fields.map((field) => (\n <Card\n size=\"small\"\n title={`Item ${field.name + 1}`}\n key={field.key}\n extra={\n <CloseOutlined\n onClick={() => {\n remove(field.name);\n }}\n />\n }\n >\n <Form.Item label=\"Name\" name={[field.name, 'name']}>\n <Input />\n </Form.Item>\n\n {/* Nest Form.List */}\n <Form.Item label=\"List\">\n <Form.List name={[field.name, 'list']}>\n {(subFields, subOpt) => (\n <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>\n {subFields.map((subField) => (\n <Space key={subField.key}>\n <Form.Item noStyle name={[subField.name, 'first']}>\n <Input placeholder=\"first\" />\n </Form.Item>\n <Form.Item noStyle name={[subField.name, 'second']}>\n <Input placeholder=\"second\" />\n </Form.Item>\n <CloseOutlined\n onClick={() => {\n subOpt.remove(subField.name);\n }}\n />\n </Space>\n ))}\n <Button type=\"dashed\" onClick={() => subOpt.add()} block>\n + Add Sub Item\n </Button>\n </div>\n )}\n </Form.List>\n </Form.Item>\n </Card>\n ))}\n\n <Button type=\"dashed\" onClick={() => add()} block>\n + Add Item\n </Button>\n </div>\n )}\n </Form.List>\n\n <Form.Item noStyle shouldUpdate>\n {() => (\n <Typography>\n <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>\n </Typography>\n )}\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n";},"81db2fd3":function(n,e,t){},"81ff247d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ff31a468");var o="import React from 'react';\nimport type { PaginationProps } from 'antd';\nimport { Pagination } from 'antd';\n\nconst itemRender: PaginationProps['itemRender'] = (_, type, originalElement) => {\n if (type === 'prev') {\n return <a>Previous</a>;\n }\n if (type === 'next') {\n return <a>Next</a>;\n }\n return originalElement;\n};\n\nconst App: React.FC = () => <Pagination total={500} itemRender={itemRender} />;\n\nexport default App;\n";},"82471f67":function(n,e,t){},"82da89f2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a2ef1103");var o="import React from 'react';\nimport { QuestionCircleOutlined } from '@ant-design/icons';\nimport { Button, Popconfirm } from 'antd';\n\nconst App: React.FC = () => (\n <Popconfirm\n title=\"Delete the task\"\n description=\"Are you sure to delete this task?\"\n icon={<QuestionCircleOutlined style={{ color: 'red' }} />}\n >\n <Button danger>Delete</Button>\n </Popconfirm>\n);\n\nexport default App;\n";},83070921:function(n,e,t){},"834c6ec9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("892aecc9");var o="import React from 'react';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nimport { Avatar, List, Space } from 'antd';\nimport { LikeOutlined, MessageOutlined, StarOutlined } from '@ant-design/icons';\n\nconst locales = {\n cn: {\n extra: '\u8BBE\u7F6E\u989D\u5916\u5185\u5BB9',\n actions: '\u8BBE\u7F6E\u5217\u8868\u64CD\u4F5C\u7EC4',\n },\n en: {\n extra: 'set `extra` of List.Item',\n actions: 'set `actions` of List.Item',\n },\n};\n\nconst IconText = ({ icon, text }: { icon: React.FC; text: string }) => (\n <Space>\n {React.createElement(icon)}\n {text}\n </Space>\n);\n\nconst data = Array.from({ length: 1 }).map((_, i) => ({\n href: 'https://ant.design',\n title: `ant design part ${i}`,\n avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,\n description:\n 'Ant Design, a design language for background applications, is refined by Ant UED Team.',\n content:\n '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.',\n}));\n\nconst BlockList: React.FC<React.PropsWithChildren> = (props) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n\n return (\n <div ref={divRef} style={{ position: 'absolute', inset: 0, height: 300 }}>\n <List\n itemLayout=\"vertical\"\n size=\"large\"\n dataSource={data}\n renderItem={(item) => (\n <List.Item\n {...props}\n key={item.title}\n actions={[\n <IconText icon={StarOutlined} text=\"156\" key=\"list-vertical-star-o\" />,\n <IconText icon={LikeOutlined} text=\"156\" key=\"list-vertical-like-o\" />,\n <IconText icon={MessageOutlined} text=\"2\" key=\"list-vertical-message\" />,\n ]}\n extra={\n <img\n width={272}\n alt=\"logo\"\n src=\"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png\"\n />\n }\n >\n <List.Item.Meta\n avatar={<Avatar src={item.avatar} />}\n title={<a href={item.href}>{item.title}</a>}\n description={item.description}\n />\n {item.content}\n </List.Item>\n )}\n />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"List\"\n height={300}\n semantics={[\n { name: 'extra', desc: locale.extra, version: '5.18.0' },\n { name: 'actions', desc: locale.actions, version: '5.18.0' },\n ]}\n >\n <BlockList />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},"83599d8c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f23c9668");var o="import React, { useRef, useState } from 'react';\nimport { Button, Tabs } from 'antd';\n\ntype TargetKey = React.MouseEvent | React.KeyboardEvent | string;\n\nconst defaultPanes = Array.from({ length: 2 }).map((_, index) => {\n const id = String(index + 1);\n return { label: `Tab ${id}`, children: `Content of Tab Pane ${index + 1}`, key: id };\n});\n\nconst App: React.FC = () => {\n const [activeKey, setActiveKey] = useState(defaultPanes[0].key);\n const [items, setItems] = useState(defaultPanes);\n const newTabIndex = useRef(0);\n\n const onChange = (key: string) => {\n setActiveKey(key);\n };\n\n const add = () => {\n const newActiveKey = `newTab${newTabIndex.current++}`;\n setItems([...items, { label: 'New Tab', children: 'New Tab Pane', key: newActiveKey }]);\n setActiveKey(newActiveKey);\n };\n\n const remove = (targetKey: TargetKey) => {\n const targetIndex = items.findIndex((pane) => pane.key === targetKey);\n const newPanes = items.filter((pane) => pane.key !== targetKey);\n if (newPanes.length && targetKey === activeKey) {\n const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];\n setActiveKey(key);\n }\n setItems(newPanes);\n };\n\n const onEdit = (targetKey: TargetKey, action: 'add' | 'remove') => {\n if (action === 'add') {\n add();\n } else {\n remove(targetKey);\n }\n };\n\n return (\n <div>\n <div style={{ marginBottom: 16 }}>\n <Button onClick={add}>ADD</Button>\n </div>\n <Tabs\n hideAdd\n onChange={onChange}\n activeKey={activeKey}\n type=\"editable-card\"\n onEdit={onEdit}\n items={items}\n />\n </div>\n );\n};\n\nexport default App;\n";},"8387cf54":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e8363941");var o="import React from 'react';\nimport { Breadcrumb } from 'antd';\n\nconst App: React.FC = () => (\n <Breadcrumb\n separator=\">\"\n items={[\n {\n title: 'Home',\n },\n {\n title: 'Application Center',\n href: '',\n },\n {\n title: 'Application List',\n href: '',\n },\n {\n title: 'An Application',\n },\n ]}\n />\n);\n\nexport default App;\n";},"838b7192":function(n,e,t){},"83def3bd":function(n,e,t){},"83fd7691":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f3cf9558");var o="import React from 'react';\nimport { Cascader, Divider } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst popupRender = (menus: React.ReactNode) => (\n <div>\n {menus}\n <Divider style={{ margin: 0 }} />\n <div style={{ padding: 8 }}>The footer is not very short.</div>\n </div>\n);\n\nconst App: React.FC = () => (\n <Cascader options={options} popupRender={popupRender} placeholder=\"Please select\" />\n);\n\nexport default App;\n";},"83fda0bb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8ead0a1b");var o="import React, { useState } from 'react';\nimport { DatePicker, Space } from 'antd';\nimport type { DatePickerProps, GetProps } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\ntype RangePickerProps = GetProps<typeof DatePicker.RangePicker>;\n\nconst { RangePicker } = DatePicker;\n\ntype RangeValue = [Dayjs | null | undefined, Dayjs | null | undefined] | null;\n\nconst ControlledDatePicker = () => {\n const [mode, setMode] = useState<DatePickerProps['mode']>('time');\n\n const handleOpenChange = (open: boolean) => {\n if (open) {\n setMode('time');\n }\n };\n\n const handlePanelChange: DatePickerProps['onPanelChange'] = (_, newMode) => {\n setMode(newMode);\n };\n\n return (\n <DatePicker\n mode={mode}\n showTime\n onOpenChange={handleOpenChange}\n onPanelChange={handlePanelChange}\n />\n );\n};\n\nconst ControlledRangePicker = () => {\n const [mode, setMode] = useState<RangePickerProps['mode']>(['month', 'month']);\n const [value, setValue] = useState<RangeValue>([null, null]);\n\n const handlePanelChange: RangePickerProps['onPanelChange'] = (newValue, newModes) => {\n setValue(newValue);\n setMode([\n newModes[0] === 'date' ? 'month' : newModes[0],\n newModes[1] === 'date' ? 'month' : newModes[1],\n ]);\n };\n\n return (\n <RangePicker\n placeholder={['Start month', 'End month']}\n format=\"YYYY-MM\"\n value={value}\n mode={mode}\n onChange={setValue}\n onPanelChange={handlePanelChange}\n />\n );\n};\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <ControlledDatePicker />\n <ControlledRangePicker />\n </Space>\n);\n\nexport default App;\n";},"84029d4f":function(n,e,t){},"843dfdd4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("60525680");var o="import { Tooltip } from 'antd';\nimport React from 'react';\n\nconst ComponentWithEvents: React.FC<React.HTMLAttributes<HTMLSpanElement>> = (props) => (\n <span {...props}>This text is inside a component with the necessary events exposed.</span>\n);\n\nconst App: React.FC = () => (\n <Tooltip title=\"prompt text\">\n <ComponentWithEvents />\n </Tooltip>\n);\n\nexport default App;\n";},"84807a29":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0cea2589");var o="import React from 'react';\nimport { Card } from 'antd';\n\nconst App: React.FC = () => (\n <Card style={{ width: 300 }}>\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n);\n\nexport default App;\n";},"84958dda":function(n,e,t){},"849d8109":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2a4395dd");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap="middle">\n <Flex vertical gap="small" style={{ width: 300 }}>\n <Progress percent={50} />\n <Progress percent={50} size="small" />\n <Progress percent={50} size={[300, 20]} />\n </Flex>\n <Flex align="center" wrap gap={30}>\n <Progress type="circle" percent={50} />\n <Progress type="circle" percent={50} size="small" />\n <Progress type="circle" percent={50} size={20} />\n </Flex>\n <Flex align="center" wrap gap={30}>\n <Progress type="dashboard" percent={50} />\n <Progress type="dashboard" percent={50} size="small" />\n <Progress type="dashboard" percent={50} size={20} />\n </Flex>\n <Flex align="center" wrap gap={30}>\n <Progress steps={3} percent={50} />\n <Progress steps={3} percent={50} size="small" />\n <Progress steps={3} percent={50} size={20} />\n <Progress steps={3} percent={50} size={[20, 30]} />\n </Flex>\n </Flex>\n);\n\nexport default App;\n';},"84e3087a":function(n,e,t){},"84e3b8d2":function(n,e,t){},"8504749a":function(n,e,t){},"8506c7e3":function(n,e,t){},"85236f6d":function(n,e,t){},"853ad754":function(n,e,t){},85532076:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6f45adaa");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent } from 'antd';\nimport { Radio, Timeline } from 'antd';\n\nconst App: React.FC = () => {\n const [mode, setMode] = useState<'left' | 'alternate' | 'right'>('left');\n\n const onChange = (e: RadioChangeEvent) => {\n setMode(e.target.value);\n };\n\n return (\n <>\n <Radio.Group\n onChange={onChange}\n value={mode}\n style={{\n marginBottom: 20,\n }}\n >\n <Radio value=\"left\">Left</Radio>\n <Radio value=\"right\">Right</Radio>\n <Radio value=\"alternate\">Alternate</Radio>\n </Radio.Group>\n <Timeline\n mode={mode}\n items={[\n {\n label: '2015-09-01',\n children: 'Create a services',\n },\n {\n label: '2015-09-01 09:12:11',\n children: 'Solve initial network problems',\n },\n {\n children: 'Technical testing',\n },\n {\n label: '2015-09-01 09:12:11',\n children: 'Network problems being solved',\n },\n ]}\n />\n </>\n );\n};\n\nexport default App;\n";},"858dcf3e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e339bdf1");var o="import React, { useState } from 'react';\nimport { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Menu } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n label: 'Navigation One',\n key: 'mail',\n icon: <MailOutlined />,\n },\n {\n label: 'Navigation Two',\n key: 'app',\n icon: <AppstoreOutlined />,\n disabled: true,\n },\n {\n label: 'Navigation Three - Submenu',\n key: 'SubMenu',\n icon: <SettingOutlined />,\n children: [\n {\n type: 'group',\n label: 'Item 1',\n children: [\n { label: 'Option 1', key: 'setting:1' },\n { label: 'Option 2', key: 'setting:2' },\n ],\n },\n {\n type: 'group',\n label: 'Item 2',\n children: [\n { label: 'Option 3', key: 'setting:3' },\n { label: 'Option 4', key: 'setting:4' },\n ],\n },\n ],\n },\n {\n key: 'alipay',\n label: (\n <a href=\"https://ant.design\" target=\"_blank\" rel=\"noopener noreferrer\">\n Navigation Four - Link\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => {\n const [current, setCurrent] = useState('mail');\n\n const onClick: MenuProps['onClick'] = (e) => {\n console.log('click ', e);\n setCurrent(e.key);\n };\n\n return <Menu onClick={onClick} selectedKeys={[current]} mode=\"horizontal\" items={items} />;\n};\n\nexport default App;\n";},"85a63b01":function(n,e,t){},"85ea8d82":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fdeb5381");var o="import React from 'react';\nimport { CheckCircleTwoTone, HeartTwoTone, SmileTwoTone } from '@ant-design/icons';\nimport { Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space>\n <SmileTwoTone />\n <HeartTwoTone twoToneColor=\"#eb2f96\" />\n <CheckCircleTwoTone twoToneColor=\"#52c41a\" />\n </Space>\n);\n\nexport default App;\n";},"85ff1ad2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d704d01c");var o='import React from \'react\';\nimport { SmileOutlined } from \'@ant-design/icons\';\nimport { Dropdown } from \'antd\';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalDropdown } = Dropdown;\n\nconst menu = [\n {\n key: \'1\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">\n 1st menu item\n </a>\n ),\n },\n {\n key: \'2\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">\n 2nd menu item (disabled)\n </a>\n ),\n icon: <SmileOutlined />,\n disabled: true,\n },\n {\n key: \'3\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">\n 3rd menu item (disabled)\n </a>\n ),\n disabled: true,\n },\n {\n key: \'4\',\n danger: true,\n label: \'a danger item\',\n },\n];\n\nconst App: React.FC = () => <InternalDropdown menu={{ items: menu }} />;\n\nexport default App;\n';},"85ff5b5c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9e7920c4");var o="import React, { useState } from 'react';\nimport type { GetProp, RadioChangeEvent, TreeSelectProps } from 'antd';\nimport { Radio, TreeSelect } from 'antd';\n\ntype SelectCommonPlacement = GetProp<TreeSelectProps, 'placement'>;\n\nconst treeData = [\n {\n value: 'parent 1',\n title: 'parent 1',\n children: [\n {\n value: 'parent 1-0',\n title: 'parent 1-0',\n children: [\n {\n value: 'leaf1',\n title: 'leaf1',\n },\n {\n value: 'leaf2',\n title: 'leaf2',\n },\n ],\n },\n {\n value: 'parent 1-1',\n title: 'parent 1-1',\n children: [\n {\n value: 'leaf3',\n title: <b style={{ color: '#08c' }}>leaf3</b>,\n },\n ],\n },\n ],\n },\n];\nconst App: React.FC = () => {\n const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');\n\n const placementChange = (e: RadioChangeEvent) => {\n SetPlacement(e.target.value);\n };\n\n return (\n <>\n <Radio.Group value={placement} onChange={placementChange}>\n <Radio.Button value=\"topLeft\">topLeft</Radio.Button>\n <Radio.Button value=\"topRight\">topRight</Radio.Button>\n <Radio.Button value=\"bottomLeft\">bottomLeft</Radio.Button>\n <Radio.Button value=\"bottomRight\">bottomRight</Radio.Button>\n </Radio.Group>\n <br />\n <br />\n\n <TreeSelect\n showSearch\n styles={{\n popup: { root: { maxHeight: 400, overflow: 'auto', minWidth: 300 } },\n }}\n placeholder=\"Please select\"\n popupMatchSelectWidth={false}\n placement={placement}\n allowClear\n treeDefaultExpandAll\n treeData={treeData}\n />\n </>\n );\n};\n\nexport default App;\n";},86038762:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8d8610a3");var o="import React, { useState } from 'react';\nimport type { QRCodeProps } from 'antd';\nimport { QRCode, Segmented } from 'antd';\n\nconst App: React.FC = () => {\n const [level, setLevel] = useState<QRCodeProps['errorLevel']>('L');\n return (\n <>\n <QRCode\n style={{ marginBottom: 16 }}\n errorLevel={level}\n value=\"https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg\"\n />\n <Segmented options={['L', 'M', 'Q', 'H']} value={level} onChange={setLevel} />\n </>\n );\n};\n\nexport default App;\n";},86251019:function(n,e,t){},"863aa85c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("32a4e1d5");var o="import React, { useState } from 'react';\nimport { AppstoreOutlined, MailOutlined } from '@ant-design/icons';\nimport type { MenuProps, MenuTheme } from 'antd';\nimport { Menu, Switch } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n key: 'sub1',\n label: 'Navigation One Long Long Long Long',\n icon: <MailOutlined />,\n children: [\n { key: '1', label: 'Option 1' },\n { key: '2', label: 'Option 2' },\n { key: '3', label: 'Option 3' },\n { key: '4', label: 'Option 4' },\n ],\n },\n {\n key: 'sub2',\n label: 'Navigation Two',\n icon: <AppstoreOutlined />,\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n {\n key: 'sub3',\n label: 'Submenu',\n children: [\n { key: '7', label: 'Option 7' },\n { key: '8', label: 'Option 8' },\n ],\n },\n ],\n },\n { key: '11', label: 'Option 11' },\n { key: '12', label: 'Option 12' },\n];\n\nconst App: React.FC = () => {\n const [menuTheme, setMenuTheme] = useState<MenuTheme>('dark');\n const [current, setCurrent] = useState('1');\n\n const changeTheme = (value: boolean) => {\n setMenuTheme(value ? 'dark' : 'light');\n };\n\n const onClick: MenuProps['onClick'] = (e) => {\n console.log('click ', e);\n setCurrent(e.key);\n };\n\n return (\n <>\n <Switch\n checked={menuTheme === 'dark'}\n onChange={changeTheme}\n checkedChildren=\"Dark\"\n unCheckedChildren=\"Light\"\n />\n <br />\n <br />\n <Menu\n theme={menuTheme}\n onClick={onClick}\n selectedKeys={[current]}\n mode=\"inline\"\n items={items}\n inlineCollapsed\n // Test only. Remove in future.\n _internalRenderMenuItem={(node) =>\n React.cloneElement<any>(node, {\n style: {\n ...(node as any).props.style,\n textDecoration: 'underline',\n },\n })\n }\n // Test only. Remove in future.\n _internalRenderSubMenuItem={(node) =>\n React.cloneElement<any>(node, {\n style: {\n ...(node as any).props.style,\n background: 'rgba(255, 255, 255, 0.3)',\n },\n })\n }\n // Test only. Remove in future.\n _internalDisableMenuItemTitleTooltip\n />\n </>\n );\n};\n\nexport default App;\n";},"8641b258":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a19aaa48");var o="import React, { useRef, useState } from 'react';\nimport { SearchOutlined } from '@ant-design/icons';\nimport type { InputRef, TableColumnsType, TableColumnType } from 'antd';\nimport { Button, Input, Space, Table } from 'antd';\nimport type { FilterDropdownProps } from 'antd/es/table/interface';\nimport Highlighter from 'react-highlight-words';\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n address: string;\n}\n\ntype DataIndex = keyof DataType;\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Joe Black',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Jim Green',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'Jim Red',\n age: 32,\n address: 'London No. 2 Lake Park',\n },\n];\n\nconst App: React.FC = () => {\n const [searchText, setSearchText] = useState('');\n const [searchedColumn, setSearchedColumn] = useState('');\n const searchInput = useRef<InputRef>(null);\n\n const handleSearch = (\n selectedKeys: string[],\n confirm: FilterDropdownProps['confirm'],\n dataIndex: DataIndex,\n ) => {\n confirm();\n setSearchText(selectedKeys[0]);\n setSearchedColumn(dataIndex);\n };\n\n const handleReset = (clearFilters: () => void) => {\n clearFilters();\n setSearchText('');\n };\n\n const getColumnSearchProps = (dataIndex: DataIndex): TableColumnType<DataType> => ({\n filterDropdown: ({ setSelectedKeys, selectedKeys, confirm, clearFilters, close }) => (\n <div style={{ padding: 8 }} onKeyDown={(e) => e.stopPropagation()}>\n <Input\n ref={searchInput}\n placeholder={`Search ${dataIndex}`}\n value={selectedKeys[0]}\n onChange={(e) => setSelectedKeys(e.target.value ? [e.target.value] : [])}\n onPressEnter={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}\n style={{ marginBottom: 8, display: 'block' }}\n />\n <Space>\n <Button\n type=\"primary\"\n onClick={() => handleSearch(selectedKeys as string[], confirm, dataIndex)}\n icon={<SearchOutlined />}\n size=\"small\"\n style={{ width: 90 }}\n >\n Search\n </Button>\n <Button\n onClick={() => clearFilters && handleReset(clearFilters)}\n size=\"small\"\n style={{ width: 90 }}\n >\n Reset\n </Button>\n <Button\n type=\"link\"\n size=\"small\"\n onClick={() => {\n confirm({ closeDropdown: false });\n setSearchText((selectedKeys as string[])[0]);\n setSearchedColumn(dataIndex);\n }}\n >\n Filter\n </Button>\n <Button\n type=\"link\"\n size=\"small\"\n onClick={() => {\n close();\n }}\n >\n close\n </Button>\n </Space>\n </div>\n ),\n filterIcon: (filtered: boolean) => (\n <SearchOutlined style={{ color: filtered ? '#1677ff' : undefined }} />\n ),\n onFilter: (value, record) =>\n record[dataIndex]\n .toString()\n .toLowerCase()\n .includes((value as string).toLowerCase()),\n filterDropdownProps: {\n onOpenChange(open) {\n if (open) {\n setTimeout(() => searchInput.current?.select(), 100);\n }\n },\n },\n render: (text) =>\n searchedColumn === dataIndex ? (\n <Highlighter\n highlightStyle={{ backgroundColor: '#ffc069', padding: 0 }}\n searchWords={[searchText]}\n autoEscape\n textToHighlight={text ? text.toString() : ''}\n />\n ) : (\n text\n ),\n });\n\n const columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: '30%',\n ...getColumnSearchProps('name'),\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: '20%',\n ...getColumnSearchProps('age'),\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n ...getColumnSearchProps('address'),\n sorter: (a, b) => a.address.length - b.address.length,\n sortDirections: ['descend', 'ascend'],\n },\n ];\n\n return <Table<DataType> columns={columns} dataSource={data} />;\n};\n\nexport default App;\n";},"864e2da2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("301fecea");var o="import React from 'react';\nimport { Button, message } from 'antd';\n\nconst App: React.FC = () => {\n const [messageApi, contextHolder] = message.useMessage();\n\n const info = () => {\n messageApi.info('Hello, Ant Design!');\n };\n\n return (\n <>\n {contextHolder}\n <Button type=\"primary\" onClick={info}>\n Display normal message\n </Button>\n </>\n );\n};\n\nexport default App;\n";},"86a79444":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d881d2f9");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ css, token }) => {\n const { antCls } = token;\n return {\n customTable: css`\n ${antCls}-table {\n ${antCls}-table-container {\n ${antCls}-table-body,\n ${antCls}-table-content {\n scrollbar-width: thin;\n scrollbar-color: #eaeaea transparent;\n scrollbar-gutter: stable;\n }\n }\n }\n `,\n };\n});\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n street: string;\n building: string;\n number: number;\n companyAddress: string;\n companyName: string;\n gender: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: 100,\n fixed: 'left',\n filters: [\n {\n text: 'Joe',\n value: 'Joe',\n },\n {\n text: 'John',\n value: 'John',\n },\n ],\n onFilter: (value, record) => record.name.indexOf(value as string) === 0,\n },\n {\n title: 'Other',\n children: [\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 150,\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n children: [\n {\n title: 'Street',\n dataIndex: 'street',\n key: 'street',\n width: 150,\n },\n {\n title: 'Block',\n children: [\n {\n title: 'Building',\n dataIndex: 'building',\n key: 'building',\n width: 100,\n },\n {\n title: 'Door No.',\n dataIndex: 'number',\n key: 'number',\n width: 100,\n },\n ],\n },\n ],\n },\n ],\n },\n {\n title: 'Company',\n children: [\n {\n title: 'Company Address',\n dataIndex: 'companyAddress',\n key: 'companyAddress',\n width: 200,\n },\n {\n title: 'Company Name',\n dataIndex: 'companyName',\n key: 'companyName',\n },\n ],\n },\n {\n title: 'Gender',\n dataIndex: 'gender',\n key: 'gender',\n width: 80,\n fixed: 'right',\n },\n];\n\nconst dataSource = Array.from({ length: 100 }).map<DataType>((_, i) => ({\n key: i,\n name: 'John Brown',\n age: i + 1,\n street: 'Lake Park',\n building: 'C',\n number: 2035,\n companyAddress: 'Lake Street 42',\n companyName: 'SoftLake Co',\n gender: 'M',\n}));\n\nconst App: React.FC = () => {\n const { styles } = useStyle();\n return (\n <Table<DataType>\n className={styles.customTable}\n columns={columns}\n dataSource={dataSource}\n bordered\n size=\"middle\"\n scroll={{ x: 'calc(700px + 50%)', y: 47 * 5 }}\n />\n );\n};\n\nexport default App;\n";},"86a8ea48":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("192c090d");var o="import React from 'react';\nimport { ColorPicker, Space } from 'antd';\n\nconst DEFAULT_COLOR = [\n {\n color: 'rgb(16, 142, 233)',\n percent: 0,\n },\n {\n color: 'rgb(135, 208, 104)',\n percent: 100,\n },\n];\n\nconst Demo = () => (\n <Space direction=\"vertical\">\n <ColorPicker\n defaultValue={DEFAULT_COLOR}\n allowClear\n showText\n mode={['single', 'gradient']}\n onChangeComplete={(color) => {\n console.log(color.toCssString());\n }}\n />\n <ColorPicker\n defaultValue={DEFAULT_COLOR}\n allowClear\n showText\n mode=\"gradient\"\n onChangeComplete={(color) => {\n console.log(color.toCssString());\n }}\n />\n </Space>\n);\n\nexport default Demo;\n";},"86c36ee7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("39de706c");var o="import React from 'react';\nimport { Collapse, Space } from 'antd';\n\nconst 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`;\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\">\n <Collapse\n collapsible=\"header\"\n defaultActiveKey={['1']}\n items={[\n {\n key: '1',\n label: 'This panel can only be collapsed by clicking text',\n children: <p>{text}</p>,\n },\n ]}\n />\n <Collapse\n collapsible=\"icon\"\n defaultActiveKey={['1']}\n items={[\n {\n key: '1',\n label: 'This panel can only be collapsed by clicking icon',\n children: <p>{text}</p>,\n },\n ]}\n />\n <Collapse\n collapsible=\"disabled\"\n items={[\n {\n key: '1',\n label: \"This panel can't be collapsed\",\n children: <p>{text}</p>,\n },\n ]}\n />\n </Space>\n);\n\nexport default App;\n";},"86dbcec5":function(n,e,t){},"86e66c40":function(n,e,t){},"8724f5b1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("31a5aae3");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n type: 'group',\n label: 'Group title',\n children: [\n {\n key: '1-1',\n label: '1st menu item',\n },\n {\n key: '1-2',\n label: '2nd menu item',\n },\n ],\n },\n {\n key: '2',\n label: 'sub menu',\n children: [\n {\n key: '2-1',\n label: '3rd menu item',\n },\n {\n key: '2-2',\n label: '4th menu item',\n },\n ],\n },\n {\n key: '3',\n label: 'disabled sub menu',\n disabled: true,\n children: [\n {\n key: '3-1',\n label: '5d menu item',\n },\n {\n key: '3-2',\n label: '6th menu item',\n },\n ],\n },\n];\n\nconst App: React.FC = () => (\n <Dropdown menu={{ items }}>\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Cascading menu\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n);\n\nexport default App;\n";},"873a7567":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ef31b4fd");var o="import React from 'react';\nimport { Grid, Tag } from 'antd';\n\nconst { useBreakpoint } = Grid;\n\nconst App: React.FC = () => {\n const screens = useBreakpoint();\n\n return (\n <>\n Current break point:{' '}\n {Object.entries(screens)\n .filter((screen) => !!screen[1])\n .map((screen) => (\n <Tag color=\"blue\" key={screen[0]}>\n {screen[0]}\n </Tag>\n ))}\n </>\n );\n};\n\nexport default App;\n";},"874e2b58":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9e8dabe4");var o="import React, { useCallback, useRef, useState } from 'react';\nimport { Mentions } from 'antd';\nimport debounce from 'lodash/debounce';\n\nconst App: React.FC = () => {\n const [loading, setLoading] = useState(false);\n const [users, setUsers] = useState<{ login: string; avatar_url: string }[]>([]);\n const ref = useRef<string>(null);\n\n const loadGithubUsers = (key: string) => {\n if (!key) {\n setUsers([]);\n return;\n }\n\n fetch(`https://api.github.com/search/users?q=${key}`)\n .then((res) => res.json())\n .then(({ items = [] }) => {\n if (ref.current !== key) return;\n\n setLoading(false);\n setUsers(items.slice(0, 10));\n });\n };\n\n const debounceLoadGithubUsers = useCallback(debounce(loadGithubUsers, 800), []);\n\n const onSearch = (search: string) => {\n console.log('Search:', search);\n ref.current = search;\n setLoading(!!search);\n setUsers([]);\n\n debounceLoadGithubUsers(search);\n };\n\n return (\n <Mentions\n style={{ width: '100%' }}\n loading={loading}\n onSearch={onSearch}\n options={users.map(({ login, avatar_url: avatar }) => ({\n key: login,\n value: login,\n className: 'antd-demo-dynamic-option',\n label: (\n <>\n <img src={avatar} alt={login} />\n <span>{login}</span>\n </>\n ),\n }))}\n />\n );\n};\n\nexport default App;\n";},"8762dcb9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e3422a96");var o="import React from 'react';\nimport { Breadcrumb, Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Footer } = Layout;\n\nconst items = Array.from({ length: 15 }).map((_, index) => ({\n key: index + 1,\n label: `nav ${index + 1}`,\n}));\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout>\n <Header style={{ display: 'flex', alignItems: 'center' }}>\n <div className=\"demo-logo\" />\n <Menu\n theme=\"dark\"\n mode=\"horizontal\"\n defaultSelectedKeys={['2']}\n items={items}\n style={{ flex: 1, minWidth: 0 }}\n />\n </Header>\n <Content style={{ padding: '0 48px' }}>\n <Breadcrumb\n style={{ margin: '16px 0' }}\n items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}\n />\n <div\n style={{\n background: colorBgContainer,\n minHeight: 280,\n padding: 24,\n borderRadius: borderRadiusLG,\n }}\n >\n Content\n </div>\n </Content>\n <Footer style={{ textAlign: 'center' }}>\n Ant Design \xa9{new Date().getFullYear()} Created by Ant UED\n </Footer>\n </Layout>\n );\n};\n\nexport default App;\n";},87706812:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9956efd9");var o="import React from 'react';\nimport { AntDesignOutlined, UserOutlined } from '@ant-design/icons';\nimport { Avatar, Divider, Tooltip } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Avatar.Group>\n <Avatar src=\"https://api.dicebear.com/7.x/miniavs/svg?seed=1\" />\n <a href=\"https://ant.design\">\n <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n </a>\n <Tooltip title=\"Ant User\" placement=\"top\">\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n </Tooltip>\n <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />\n </Avatar.Group>\n <Divider />\n <Avatar.Group\n max={{\n count: 2,\n style: { color: '#f56a00', backgroundColor: '#fde3cf' },\n }}\n >\n <Avatar src=\"https://api.dicebear.com/7.x/miniavs/svg?seed=2\" />\n <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n <Tooltip title=\"Ant User\" placement=\"top\">\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n </Tooltip>\n <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />\n </Avatar.Group>\n <Divider />\n <Avatar.Group\n size=\"large\"\n max={{\n count: 2,\n style: { color: '#f56a00', backgroundColor: '#fde3cf' },\n }}\n >\n <Avatar src=\"https://api.dicebear.com/7.x/miniavs/svg?seed=3\" />\n <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n <Tooltip title=\"Ant User\" placement=\"top\">\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n </Tooltip>\n <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />\n </Avatar.Group>\n <Divider />\n <Avatar.Group\n size=\"large\"\n max={{\n count: 2,\n style: { color: '#f56a00', backgroundColor: '#fde3cf', cursor: 'pointer' },\n popover: { trigger: 'click' },\n }}\n >\n <Avatar src=\"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\" />\n <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n <Tooltip title=\"Ant User\" placement=\"top\">\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n </Tooltip>\n <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />\n </Avatar.Group>\n <Divider />\n <Avatar.Group shape=\"square\">\n <Avatar style={{ backgroundColor: '#fde3cf' }}>A</Avatar>\n <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n <Avatar style={{ backgroundColor: '#1677ff' }} icon={<AntDesignOutlined />} />\n </Avatar.Group>\n </>\n);\n\nexport default App;\n";},"877317ca":function(n,e,t){},"87bf54ce":function(n,e,t){},"87c61b8f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b21d1b7e");var o="import React from 'react';\nimport { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => (\n <Segmented\n vertical\n options={[\n { value: 'List', icon: <BarsOutlined /> },\n { value: 'Kanban', icon: <AppstoreOutlined /> },\n ]}\n />\n);\n\nexport default Demo;\n";},"882f04a7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("00389016");var o="import React from 'react';\nimport type { DatePickerProps } from 'antd';\nimport { DatePicker, Flex } from 'antd';\nimport dayjs from 'dayjs';\nimport type { Dayjs } from 'dayjs';\n\nconst onChange: DatePickerProps<Dayjs[]>['onChange'] = (date, dateString) => {\n console.log(date, dateString);\n};\n\nconst defaultValue = [dayjs('2000-01-01'), dayjs('2000-01-03'), dayjs('2000-01-05')];\n\nconst App: React.FC = () => (\n <Flex vertical gap=\"small\">\n <DatePicker\n multiple\n onChange={onChange}\n maxTagCount=\"responsive\"\n defaultValue={defaultValue}\n size=\"small\"\n />\n <DatePicker multiple onChange={onChange} maxTagCount=\"responsive\" defaultValue={defaultValue} />\n <DatePicker\n multiple\n onChange={onChange}\n maxTagCount=\"responsive\"\n defaultValue={defaultValue}\n size=\"large\"\n />\n </Flex>\n);\n\nexport default App;\n";},"88459ff3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b0311274");var o="import React from 'react';\nimport { InboxOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { message, Upload } from 'antd';\n\nconst { Dragger } = Upload;\n\nconst props: UploadProps = {\n name: 'file',\n multiple: true,\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n onChange(info) {\n const { status } = info.file;\n if (status !== 'uploading') {\n console.log(info.file, info.fileList);\n }\n if (status === 'done') {\n message.success(`${info.file.name} file uploaded successfully.`);\n } else if (status === 'error') {\n message.error(`${info.file.name} file upload failed.`);\n }\n },\n onDrop(e) {\n console.log('Dropped files', e.dataTransfer.files);\n },\n};\n\nconst App: React.FC = () => (\n <Dragger {...props}>\n <p className=\"ant-upload-drag-icon\">\n <InboxOutlined />\n </p>\n <p className=\"ant-upload-text\">Click or drag file to this area to upload</p>\n <p className=\"ant-upload-hint\">\n Support for a single or bulk upload. Strictly prohibited from uploading company data or other\n banned files.\n </p>\n </Dragger>\n);\n\nexport default App;\n";},88746497:function(n,e,t){},"8888c994":function(n,e,t){},"8898dd42":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ddb788d5");var o="import React from 'react';\nimport { HomeOutlined, UserOutlined } from '@ant-design/icons';\nimport { Breadcrumb } from 'antd';\n\nconst App: React.FC = () => (\n <Breadcrumb\n items={[\n {\n href: '',\n title: <HomeOutlined />,\n },\n {\n href: '',\n title: (\n <>\n <UserOutlined />\n <span>Application List</span>\n </>\n ),\n },\n {\n title: 'Application',\n },\n ]}\n />\n);\n\nexport default App;\n";},"88a2dd0d":function(n,e,t){},"8912de97":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("91d8f2b8");var o='import React, { useState } from \'react\';\nimport { MinusOutlined, PlusOutlined } from \'@ant-design/icons\';\nimport { Button, Flex, Progress, Space } from \'antd\';\n\nconst App: React.FC = () => {\n const [percent, setPercent] = useState<number>(0);\n\n const increase = () => {\n setPercent((prevPercent) => {\n const newPercent = prevPercent + 10;\n if (newPercent > 100) {\n return 100;\n }\n return newPercent;\n });\n };\n\n const decline = () => {\n setPercent((prevPercent) => {\n const newPercent = prevPercent - 10;\n if (newPercent < 0) {\n return 0;\n }\n return newPercent;\n });\n };\n\n return (\n <Flex vertical gap="small">\n <Flex vertical gap="small">\n <Progress percent={percent} type="line" />\n <Progress percent={percent} type="circle" />\n </Flex>\n <Space.Compact>\n <Button onClick={decline} icon={<MinusOutlined />} />\n <Button onClick={increase} icon={<PlusOutlined />} />\n </Space.Compact>\n </Flex>\n );\n};\n\nexport default App;\n';},"8915fd24":function(n,e,t){},"891a1e03":function(n,e,t){},"892aecc9":function(n,e,t){},"893af73d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6eead573");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, message, Space } from 'antd';\n\nconst onClick: MenuProps['onClick'] = ({ key }) => {\n message.info(`Click on item ${key}`);\n};\n\nconst items: MenuProps['items'] = [\n {\n label: '1st menu item',\n key: '1',\n },\n {\n label: '2nd menu item',\n key: '2',\n },\n {\n label: '3rd menu item',\n key: '3',\n },\n];\n\nconst App: React.FC = () => (\n <Dropdown menu={{ items, onClick }}>\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Hover me, Click menu item\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n);\n\nexport default App;\n";},"8951f7bf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9416d6c7");var o="import React from 'react';\nimport { Flex, Table, Typography } from 'antd';\nimport type { TableColumnsType } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ css, token }) => {\n const { antCls } = token;\n return {\n customTable: css`\n ${antCls}-table {\n ${antCls}-table-container {\n ${antCls}-table-body,\n ${antCls}-table-content {\n scrollbar-width: thin;\n scrollbar-color: #eaeaea transparent;\n scrollbar-gutter: stable;\n }\n }\n }\n `,\n };\n});\n\nconst { Text } = Typography;\n\ninterface DataType {\n key: string;\n name: string;\n borrow: number;\n repayment: number;\n}\n\ninterface FixedDataType {\n key: React.Key;\n name: string;\n description: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Borrow',\n dataIndex: 'borrow',\n },\n {\n title: 'Repayment',\n dataIndex: 'repayment',\n },\n];\n\nconst dataSource: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n borrow: 10,\n repayment: 33,\n },\n {\n key: '2',\n name: 'Jim Green',\n borrow: 100,\n repayment: 0,\n },\n {\n key: '3',\n name: 'Joe Black',\n borrow: 10,\n repayment: 10,\n },\n {\n key: '4',\n name: 'Jim Red',\n borrow: 75,\n repayment: 45,\n },\n];\n\nconst fixedColumns: TableColumnsType<FixedDataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n fixed: true,\n width: 100,\n },\n {\n title: 'Description',\n dataIndex: 'description',\n },\n];\n\nconst fixedDataSource = Array.from({ length: 20 }).map<FixedDataType>((_, i) => ({\n key: i,\n name: ['Light', 'Bamboo', 'Little'][i % 3],\n description: 'Everything that has a beginning, has an end.',\n}));\n\nconst App: React.FC = () => {\n const { styles } = useStyle();\n return (\n <Flex vertical gap=\"small\">\n <Table<DataType>\n bordered\n className={styles.customTable}\n columns={columns}\n dataSource={dataSource}\n pagination={false}\n summary={(pageData) => {\n let totalBorrow = 0;\n let totalRepayment = 0;\n pageData.forEach(({ borrow, repayment }) => {\n totalBorrow += borrow;\n totalRepayment += repayment;\n });\n return (\n <>\n <Table.Summary.Row>\n <Table.Summary.Cell index={0}>Total</Table.Summary.Cell>\n <Table.Summary.Cell index={1}>\n <Text type=\"danger\">{totalBorrow}</Text>\n </Table.Summary.Cell>\n <Table.Summary.Cell index={2}>\n <Text>{totalRepayment}</Text>\n </Table.Summary.Cell>\n </Table.Summary.Row>\n <Table.Summary.Row>\n <Table.Summary.Cell index={0}>Balance</Table.Summary.Cell>\n <Table.Summary.Cell index={1} colSpan={2}>\n <Text type=\"danger\">{totalBorrow - totalRepayment}</Text>\n </Table.Summary.Cell>\n </Table.Summary.Row>\n </>\n );\n }}\n />\n <Table<FixedDataType>\n className={styles.customTable}\n columns={fixedColumns}\n dataSource={fixedDataSource}\n pagination={false}\n scroll={{ x: 2000, y: 500 }}\n bordered\n summary={() => (\n <Table.Summary fixed>\n <Table.Summary.Row>\n <Table.Summary.Cell index={0}>Summary</Table.Summary.Cell>\n <Table.Summary.Cell index={1}>This is a summary content</Table.Summary.Cell>\n </Table.Summary.Row>\n </Table.Summary>\n )}\n />\n </Flex>\n );\n};\n\nexport default App;\n";},"896c27f0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f092456a");var o='import React from \'react\';\nimport { ConfigProvider, Popconfirm } from \'antd\';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopconfirm } = Popconfirm;\n\nconst App: React.FC = () => (\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <InternalPopconfirm title="Are you OK?" />\n <InternalPopconfirm title="Are you OK?" placement="bottomRight" style={{ width: 250 }} />\n </ConfigProvider>\n);\n\nexport default App;\n';},"8971af96":function(n,e,t){},"897efb89":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6fb30674");var o="import React, { useState } from 'react';\nimport { CarryOutOutlined, CheckOutlined, FormOutlined } from '@ant-design/icons';\nimport { Select, Switch, Tree } from 'antd';\nimport type { TreeDataNode } from 'antd';\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 1',\n key: '0-0',\n icon: <CarryOutOutlined />,\n children: [\n {\n title: 'parent 1-0',\n key: '0-0-0',\n icon: <CarryOutOutlined />,\n children: [\n { title: 'leaf', key: '0-0-0-0', icon: <CarryOutOutlined /> },\n {\n title: (\n <>\n <div>multiple line title</div>\n <div>multiple line title</div>\n </>\n ),\n key: '0-0-0-1',\n icon: <CarryOutOutlined />,\n },\n { title: 'leaf', key: '0-0-0-2', icon: <CarryOutOutlined /> },\n ],\n },\n {\n title: 'parent 1-1',\n key: '0-0-1',\n icon: <CarryOutOutlined />,\n children: [{ title: 'leaf', key: '0-0-1-0', icon: <CarryOutOutlined /> }],\n },\n {\n title: 'parent 1-2',\n key: '0-0-2',\n icon: <CarryOutOutlined />,\n children: [\n { title: 'leaf', key: '0-0-2-0', icon: <CarryOutOutlined /> },\n {\n title: 'leaf',\n key: '0-0-2-1',\n icon: <CarryOutOutlined />,\n switcherIcon: <FormOutlined />,\n },\n ],\n },\n ],\n },\n {\n title: 'parent 2',\n key: '0-1',\n icon: <CarryOutOutlined />,\n children: [\n {\n title: 'parent 2-0',\n key: '0-1-0',\n icon: <CarryOutOutlined />,\n children: [\n { title: 'leaf', key: '0-1-0-0', icon: <CarryOutOutlined /> },\n { title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [showLine, setShowLine] = useState<boolean>(true);\n const [showIcon, setShowIcon] = useState<boolean>(false);\n const [showLeafIcon, setShowLeafIcon] = useState<React.ReactNode>(true);\n\n const onSelect = (selectedKeys: React.Key[], info: any) => {\n console.log('selected', selectedKeys, info);\n };\n\n const handleLeafIconChange = (value: 'true' | 'false' | 'custom') => {\n if (value === 'custom') {\n return setShowLeafIcon(<CheckOutlined />);\n }\n\n if (value === 'true') {\n return setShowLeafIcon(true);\n }\n\n return setShowLeafIcon(false);\n };\n\n return (\n <div>\n <div style={{ marginBottom: 16 }}>\n showLine: <Switch checked={!!showLine} onChange={setShowLine} />\n <br />\n <br />\n showIcon: <Switch checked={showIcon} onChange={setShowIcon} />\n <br />\n <br />\n showLeafIcon:{' '}\n <Select defaultValue=\"true\" onChange={handleLeafIconChange}>\n <Select.Option value=\"true\">True</Select.Option>\n <Select.Option value=\"false\">False</Select.Option>\n <Select.Option value=\"custom\">Custom icon</Select.Option>\n </Select>\n </div>\n <Tree\n showLine={showLine ? { showLeafIcon } : false}\n showIcon={showIcon}\n defaultExpandedKeys={['0-0-0']}\n onSelect={onSelect}\n treeData={treeData}\n />\n </div>\n );\n};\n\nexport default App;\n";},"89a68844":function(n,e,t){},"89b0ca08":function(n,e,t){},"89b66867":function(n,e,t){},"89b826e3":function(n,e,t){},"8a07c3a8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("91ff2504");var o="import React from 'react';\nimport { Button, notification } from 'antd';\n\nconst key = 'updatable';\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n const openNotification = () => {\n api.open({\n key,\n message: 'Notification Title',\n description: 'description.',\n });\n\n setTimeout(() => {\n api.open({\n key,\n message: 'New Title',\n description: 'New description.',\n });\n }, 1000);\n };\n\n return (\n <>\n {contextHolder}\n <Button type=\"primary\" onClick={openNotification}>\n Open the notification box\n </Button>\n </>\n );\n};\n\nexport default App;\n";},"8a146945":function(n,e,t){},"8a4b2bdd":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9ed2e865");var o='import React, { useEffect, useState } from \'react\';\nimport { Button, Checkbox, Form, Input } from \'antd\';\n\nconst formItemLayout = {\n labelCol: { span: 4 },\n wrapperCol: { span: 8 },\n};\n\nconst formTailLayout = {\n labelCol: { span: 4 },\n wrapperCol: { span: 8, offset: 4 },\n};\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const [checkNick, setCheckNick] = useState(false);\n\n useEffect(() => {\n form.validateFields([\'nickname\']);\n }, [checkNick, form]);\n\n const onCheckboxChange = (e: { target: { checked: boolean } }) => {\n setCheckNick(e.target.checked);\n };\n\n const onCheck = async () => {\n try {\n const values = await form.validateFields();\n console.log(\'Success:\', values);\n } catch (errorInfo) {\n console.log(\'Failed:\', errorInfo);\n }\n };\n\n return (\n <Form form={form} name="dynamic_rule" style={{ maxWidth: 600 }}>\n <Form.Item\n {...formItemLayout}\n name="username"\n label="Name"\n rules={[{ required: true, message: \'Please input your name\' }]}\n >\n <Input placeholder="Please input your name" />\n </Form.Item>\n <Form.Item\n {...formItemLayout}\n name="nickname"\n label="Nickname"\n rules={[{ required: checkNick, message: \'Please input your nickname\' }]}\n >\n <Input placeholder="Please input your nickname" />\n </Form.Item>\n <Form.Item {...formTailLayout}>\n <Checkbox checked={checkNick} onChange={onCheckboxChange}>\n Nickname is required\n </Checkbox>\n </Form.Item>\n <Form.Item {...formTailLayout}>\n <Button type="primary" onClick={onCheck}>\n Check\n </Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"8a90cc79":function(n,e,t){},"8a9685fe":function(n,e,t){},"8aa7bd83":function(n,e,t){},"8aba7481":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("602fb5f5");var o='import React from \'react\';\nimport { Cascader, Flex } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap="middle">\n <Cascader placeholder="Please select" variant="borderless" />\n <Cascader placeholder="Please select" variant="filled" />\n <Cascader placeholder="Please select" variant="outlined" />\n <Cascader placeholder="Please select" variant="underlined" />\n </Flex>\n);\n\nexport default App;\n';},"8aecca8f":function(n,e,t){},"8b166e29":function(n,e,t){},"8b4b9f48":function(n,e,t){},"8b627bc3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2078ca0d");var o="import React from 'react';\nimport { Descriptions, Flex } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'long',\n children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',\n },\n {\n key: '2',\n label: 'long',\n children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',\n },\n {\n key: '3',\n label: 'long',\n children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',\n },\n {\n key: '4',\n label: 'long',\n children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',\n },\n {\n key: '5',\n label: 'long',\n children: 'loooooooooooooooooooooooooooooooooooooooooooooooong',\n },\n];\n\nconst App: React.FC = () => (\n <Flex gap={8} vertical>\n <div style={{ width: 600, border: '1px solid', padding: 20 }}>\n <Descriptions title=\"User Info\" column={2} items={items} />\n </div>\n <div style={{ width: 600, border: '1px solid', padding: 20 }}>\n <Descriptions layout=\"vertical\" title=\"User Info\" column={2} items={items} />\n </div>\n </Flex>\n);\n\nexport default App;\n";},"8b836c72":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0e9dbb48");var o="import React from 'react';\nimport type { DatePickerProps } from 'antd';\nimport { DatePicker, Space } from 'antd';\n\nconst onChange: DatePickerProps['onChange'] = (date, dateString) => {\n console.log(date, dateString);\n};\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\">\n <DatePicker\n format={{\n format: 'YYYY-MM-DD',\n type: 'mask',\n }}\n onChange={onChange}\n />\n <DatePicker\n format={{\n format: 'YYYY-MM-DD HH:mm:ss',\n type: 'mask',\n }}\n onChange={onChange}\n />\n </Space>\n);\n\nexport default App;\n";},"8b8908f0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7972ce61");var o="import React from 'react';\nimport { Mentions } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalMentions } = Mentions;\n\nconst options = [\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n];\n\nconst App: React.FC = () => (\n <InternalMentions style={{ width: '100%' }} value=\"@\" options={options} />\n);\n\nexport default App;\n";},"8ba669a8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0aa94798");var o="import React from 'react';\nimport { Button, Popconfirm } from 'antd';\n\nconst style: React.CSSProperties = {\n width: '300vw',\n height: '300vh',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst App: React.FC = () => {\n React.useEffect(() => {\n document.documentElement.scrollTop = document.documentElement.clientHeight;\n document.documentElement.scrollLeft = document.documentElement.clientWidth;\n }, []);\n return (\n <div style={style}>\n <Popconfirm title=\"Thanks for using antd. Have a nice day !\" open>\n <Button type=\"primary\">Scroll The Window</Button>\n </Popconfirm>\n </div>\n );\n};\n\nexport default App;\n";},"8bb6000c":function(n,e,t){},"8bb9a1c8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7a5c44bf");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name (all screens)',\n dataIndex: 'name',\n key: 'name',\n render: (text) => <a>{text}</a>,\n },\n {\n title: 'Age (medium screen or bigger)',\n dataIndex: 'age',\n key: 'age',\n responsive: ['md'],\n },\n {\n title: 'Address (large screen or bigger)',\n dataIndex: 'address',\n key: 'address',\n responsive: ['lg'],\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n];\n\nconst App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;\n\nexport default App;\n";},"8c060999":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("216a3a86");var o="import React, { useMemo, useState } from 'react';\nimport { Button, Checkbox, Divider, Tabs } from 'antd';\n\nconst CheckboxGroup = Checkbox.Group;\n\nconst operations = <Button>Extra Action</Button>;\n\nconst OperationsSlot: Record<PositionType, React.ReactNode> = {\n left: <Button className=\"tabs-extra-demo-button\">Left Extra Action</Button>,\n right: <Button>Right Extra Action</Button>,\n};\n\nconst options = ['left', 'right'];\n\ntype PositionType = 'left' | 'right';\n\nconst items = Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab ${id}`,\n key: id,\n children: `Content of tab ${id}`,\n };\n});\n\nconst App: React.FC = () => {\n const [position, setPosition] = useState<PositionType[]>(['left', 'right']);\n\n const slot = useMemo(() => {\n if (position.length === 0) {\n return null;\n }\n return position.reduce(\n (acc, direction) => ({ ...acc, [direction]: OperationsSlot[direction] }),\n {},\n );\n }, [position]);\n\n return (\n <>\n <Tabs tabBarExtraContent={operations} items={items} />\n <br />\n <br />\n <br />\n <div>You can also specify its direction or both side</div>\n <Divider />\n <CheckboxGroup\n options={options}\n value={position}\n onChange={(value) => {\n setPosition(value as PositionType[]);\n }}\n />\n <br />\n <br />\n <Tabs tabBarExtraContent={slot} items={items} />\n </>\n );\n};\n\nexport default App;\n";},"8c170178":function(n,e,t){},"8c1eed3f":function(n,e,t){},"8c20ef1a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f48232d4");var o='import React from \'react\';\nimport { CloseCircleOutlined } from \'@ant-design/icons\';\nimport { Button, Result, Typography } from \'antd\';\n\nconst { Paragraph, Text } = Typography;\n\nconst App: React.FC = () => (\n <Result\n status="error"\n title="Submission Failed"\n subTitle="Please check and modify the following information before resubmitting."\n extra={[\n <Button type="primary" key="console">\n Go Console\n </Button>,\n <Button key="buy">Buy Again</Button>,\n ]}\n >\n <div className="desc">\n <Paragraph>\n <Text\n strong\n style={{\n fontSize: 16,\n }}\n >\n The content you submitted has the following error:\n </Text>\n </Paragraph>\n <Paragraph>\n <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account has been\n frozen. <a>Thaw immediately ></a>\n </Paragraph>\n <Paragraph>\n <CloseCircleOutlined className="site-result-demo-error-icon" /> Your account is not yet\n eligible to apply. <a>Apply Unlock ></a>\n </Paragraph>\n </div>\n </Result>\n);\n\nexport default App;\n';},"8c2d75b3":function(n,e,t){},"8c3b5dba":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9e8397d2");var o="import React from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { Timeline } from 'antd';\n\nconst App: React.FC = () => (\n <Timeline\n items={[\n {\n color: 'green',\n children: 'Create a services site 2015-09-01',\n },\n {\n color: 'green',\n children: 'Create a services site 2015-09-01',\n },\n {\n color: 'red',\n children: (\n <>\n <p>Solve initial network problems 1</p>\n <p>Solve initial network problems 2</p>\n <p>Solve initial network problems 3 2015-09-01</p>\n </>\n ),\n },\n {\n children: (\n <>\n <p>Technical testing 1</p>\n <p>Technical testing 2</p>\n <p>Technical testing 3 2015-09-01</p>\n </>\n ),\n },\n {\n color: 'gray',\n children: (\n <>\n <p>Technical testing 1</p>\n <p>Technical testing 2</p>\n <p>Technical testing 3 2015-09-01</p>\n </>\n ),\n },\n {\n color: 'gray',\n children: (\n <>\n <p>Technical testing 1</p>\n <p>Technical testing 2</p>\n <p>Technical testing 3 2015-09-01</p>\n </>\n ),\n },\n {\n color: '#00CCFF',\n dot: <SmileOutlined />,\n children: <p>Custom color testing</p>,\n },\n ]}\n />\n);\n\nexport default App;\n";},"8c703eb8":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("06697b1c");var o='import React from \'react\';\nimport { Badge, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Space>\n <Badge status="success" />\n <Badge status="error" />\n <Badge status="default" />\n <Badge status="processing" />\n <Badge status="warning" />\n </Space>\n <br />\n <Space direction="vertical">\n <Badge status="success" text="Success" />\n <Badge status="error" text="Error" />\n <Badge status="default" text="Default" />\n <Badge status="processing" text="Processing" />\n <Badge status="warning" text="Warning" />\n </Space>\n </>\n);\n\nexport default App;\n';},"8c811450":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b1befca1");var o="import React from 'react';\nimport { AndroidOutlined, AppleOutlined } from '@ant-design/icons';\nimport { Tabs } from 'antd';\n\nconst App: React.FC = () => (\n <Tabs\n defaultActiveKey=\"2\"\n items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {\n const id = String(i + 1);\n return {\n key: id,\n label: `Tab ${id}`,\n children: `Tab ${id}`,\n icon: <Icon />,\n };\n })}\n />\n);\n\nexport default App;\n";},"8c8af42c":function(n,e,t){},"8cf78974":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0fef50f8");var o="import React, { useState } from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n label: 'Submit and continue',\n key: '1',\n },\n];\n\nconst App: React.FC = () => {\n const [loadings, setLoadings] = useState<boolean[]>([]);\n\n const enterLoading = (index: number) => {\n setLoadings((state) => {\n const newLoadings = [...state];\n newLoadings[index] = true;\n return newLoadings;\n });\n\n setTimeout(() => {\n setLoadings((state) => {\n const newLoadings = [...state];\n newLoadings[index] = false;\n return newLoadings;\n });\n }, 6000);\n };\n\n return (\n <Space direction=\"vertical\">\n <Dropdown.Button type=\"primary\" loading menu={{ items }}>\n Submit\n </Dropdown.Button>\n <Dropdown.Button type=\"primary\" size=\"small\" loading menu={{ items }}>\n Submit\n </Dropdown.Button>\n <Dropdown.Button\n type=\"primary\"\n loading={loadings[0]}\n menu={{ items }}\n onClick={() => enterLoading(0)}\n >\n Submit\n </Dropdown.Button>\n <Dropdown.Button\n icon={<DownOutlined />}\n loading={loadings[1]}\n menu={{ items }}\n onClick={() => enterLoading(1)}\n >\n Submit\n </Dropdown.Button>\n </Space>\n );\n};\n\nexport default App;\n";},"8d16eacb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ffd5f38c");var o="import React from 'react';\nimport type { MenuProps } from 'antd';\nimport { Button, Dropdown, Flex } from 'antd';\n\nconst onMenuClick: MenuProps['onClick'] = (e) => {\n console.log('click', e);\n};\n\nconst items = [\n {\n key: '1',\n label: '1st item',\n },\n {\n key: '2',\n label: '2nd item',\n },\n {\n key: '3',\n label: '3rd item',\n },\n];\n\nconst App: React.FC = () => (\n <Flex align=\"flex-start\" gap=\"small\" vertical>\n <Button type=\"primary\">primary</Button>\n <Button>secondary</Button>\n <Dropdown.Button menu={{ items, onClick: onMenuClick }}>Actions</Dropdown.Button>\n </Flex>\n);\n\nexport default App;\n";},"8d1a78b9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8aa7bd83");var o='import React from \'react\';\nimport { Alert } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Alert message="Success Tips" type="success" showIcon />\n <br />\n <Alert message="Informational Notes" type="info" showIcon />\n <br />\n <Alert message="Warning" type="warning" showIcon closable />\n <br />\n <Alert message="Error" type="error" showIcon />\n <br />\n <Alert\n message="Success Tips"\n description="Detailed description and advice about successful copywriting."\n type="success"\n showIcon\n />\n <br />\n <Alert\n message="Informational Notes"\n description="Additional description and information about copywriting."\n type="info"\n showIcon\n />\n <br />\n <Alert\n message="Warning"\n description="This is a warning notice about copywriting."\n type="warning"\n showIcon\n closable\n />\n <br />\n <Alert\n message="Error"\n description="This is an error message about copywriting."\n type="error"\n showIcon\n />\n </>\n);\n\nexport default App;\n';},"8d1be930":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("65d724af");var o="import React from 'react';\nimport { AntDesignOutlined } from '@ant-design/icons';\nimport { Button, ConfigProvider, Space } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ prefixCls, css }) => ({\n linearGradientButton: css`\n &.${prefixCls}-btn-primary:not([disabled]):not(.${prefixCls}-btn-dangerous) {\n > span {\n position: relative;\n }\n\n &::before {\n content: '';\n background: linear-gradient(135deg, #6253e1, #04befe);\n position: absolute;\n inset: -1px;\n opacity: 1;\n transition: all 0.3s;\n border-radius: inherit;\n }\n\n &:hover::before {\n opacity: 0;\n }\n }\n `,\n}));\n\nconst App: React.FC = () => {\n const { styles } = useStyle();\n\n return (\n <ConfigProvider\n button={{\n className: styles.linearGradientButton,\n }}\n >\n <Space>\n <Button type=\"primary\" size=\"large\" icon={<AntDesignOutlined />}>\n Gradient Button\n </Button>\n <Button size=\"large\">Button</Button>\n </Space>\n </ConfigProvider>\n );\n};\n\nexport default App;\n";},"8d1c3a29":function(n,e,t){},"8d6ea8ed":function(n,e,t){},"8d8610a3":function(n,e,t){},"8dde5d52":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c7d6c184");var o="import React, { useRef, useState } from 'react';\nimport { EllipsisOutlined } from '@ant-design/icons';\nimport { Button, Divider, Space, Tour } from 'antd';\nimport type { TourProps } from 'antd';\n\nconst App: React.FC = () => {\n const ref1 = useRef(null);\n const ref2 = useRef(null);\n const ref3 = useRef(null);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const steps: TourProps['steps'] = [\n {\n title: 'Upload File',\n description: 'Put your files here.',\n cover: (\n <img\n alt=\"tour.png\"\n src=\"https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png\"\n />\n ),\n target: () => ref1.current,\n },\n {\n title: 'Save',\n description: 'Save your changes.',\n target: () => ref2.current,\n },\n {\n title: 'Other Actions',\n description: 'Click to see other actions.',\n target: () => ref3.current,\n },\n ];\n return (\n <>\n <Button type=\"primary\" onClick={() => setOpen(true)}>\n Begin Tour\n </Button>\n <Divider />\n <Space>\n <Button ref={ref1}>Upload</Button>\n <Button ref={ref2} type=\"primary\">\n Save\n </Button>\n <Button ref={ref3} icon={<EllipsisOutlined />} />\n </Space>\n <Tour open={open} onClose={() => setOpen(false)} steps={steps} />\n </>\n );\n};\n\nexport default App;\n";},"8ded7880":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e7640705");var o='import React, { useState } from \'react\';\nimport { Button, Modal } from \'antd\';\n\nconst App: React.FC = () => {\n const [loading, setLoading] = useState(false);\n const [open, setOpen] = useState(false);\n\n const showModal = () => {\n setOpen(true);\n };\n\n const handleOk = () => {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n setOpen(false);\n }, 3000);\n };\n\n const handleCancel = () => {\n setOpen(false);\n };\n\n return (\n <>\n <Button type="primary" onClick={showModal}>\n Open Modal with customized footer\n </Button>\n <Modal\n open={open}\n title="Title"\n onOk={handleOk}\n onCancel={handleCancel}\n footer={[\n <Button key="back" onClick={handleCancel}>\n Return\n </Button>,\n <Button key="submit" type="primary" loading={loading} onClick={handleOk}>\n Submit\n </Button>,\n <Button\n key="link"\n href="https://google.com"\n target="_blank"\n type="primary"\n loading={loading}\n onClick={handleOk}\n >\n Search on Google\n </Button>,\n ]}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n';},"8dedf947":function(n,e,t){},"8e5cd754":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("71e37e53");var o="import React, { useState } from 'react';\nimport { Button, InputNumber } from 'antd';\n\nconst App: React.FC = () => {\n const [disabled, setDisabled] = useState(true);\n\n const toggle = () => {\n setDisabled(!disabled);\n };\n\n return (\n <>\n <InputNumber min={1} max={10} disabled={disabled} defaultValue={3} />\n <div style={{ marginTop: 20 }}>\n <Button onClick={toggle} type=\"primary\">\n Toggle disabled\n </Button>\n </div>\n </>\n );\n};\n\nexport default App;\n";},"8e9ba2f6":function(n,e,t){},"8e9e0f42":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8bb6000c");var o="import React from 'react';\nimport { Divider } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider />\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider dashed />\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n </>\n);\n\nexport default App;\n";},"8ead0a1b":function(n,e,t){},"8eb76012":function(n,e,t){},"8ec59db5":function(n,e,t){},"8ed3fde3":function(n,e,t){},"8f172e36":function(n,e,t){},"8f3da331":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eede51f3");var o="import React, { useMemo, useState } from 'react';\nimport { Input, Tree } from 'antd';\nimport type { TreeDataNode } from 'antd';\n\nconst { Search } = Input;\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst defaultData: TreeDataNode[] = [];\n\nconst generateData = (_level: number, _preKey?: React.Key, _tns?: TreeDataNode[]) => {\n const preKey = _preKey || '0';\n const tns = _tns || defaultData;\n\n const children: React.Key[] = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst dataList: { key: React.Key; title: string }[] = [];\nconst generateList = (data: TreeDataNode[]) => {\n for (let i = 0; i < data.length; i++) {\n const node = data[i];\n const { key } = node;\n dataList.push({ key, title: key as string });\n if (node.children) {\n generateList(node.children);\n }\n }\n};\ngenerateList(defaultData);\n\nconst getParentKey = (key: React.Key, tree: TreeDataNode[]): React.Key => {\n let parentKey: React.Key;\n for (let i = 0; i < tree.length; i++) {\n const node = tree[i];\n if (node.children) {\n if (node.children.some((item) => item.key === key)) {\n parentKey = node.key;\n } else if (getParentKey(key, node.children)) {\n parentKey = getParentKey(key, node.children);\n }\n }\n }\n return parentKey!;\n};\n\nconst App: React.FC = () => {\n const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([]);\n const [searchValue, setSearchValue] = useState('');\n const [autoExpandParent, setAutoExpandParent] = useState(true);\n\n const onExpand = (newExpandedKeys: React.Key[]) => {\n setExpandedKeys(newExpandedKeys);\n setAutoExpandParent(false);\n };\n\n const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const { value } = e.target;\n const newExpandedKeys = dataList\n .map((item) => {\n if (item.title.indexOf(value) > -1) {\n return getParentKey(item.key, defaultData);\n }\n return null;\n })\n .filter((item, i, self): item is React.Key => !!(item && self.indexOf(item) === i));\n setExpandedKeys(newExpandedKeys);\n setSearchValue(value);\n setAutoExpandParent(true);\n };\n\n const treeData = useMemo(() => {\n const loop = (data: TreeDataNode[]): TreeDataNode[] =>\n data.map((item) => {\n const strTitle = item.title as string;\n const index = strTitle.indexOf(searchValue);\n const beforeStr = strTitle.substring(0, index);\n const afterStr = strTitle.slice(index + searchValue.length);\n const title =\n index > -1 ? (\n <span key={item.key}>\n {beforeStr}\n <span className=\"site-tree-search-value\">{searchValue}</span>\n {afterStr}\n </span>\n ) : (\n <span key={item.key}>{strTitle}</span>\n );\n if (item.children) {\n return { title, key: item.key, children: loop(item.children) };\n }\n\n return {\n title,\n key: item.key,\n };\n });\n\n return loop(defaultData);\n }, [searchValue]);\n\n return (\n <div>\n <Search style={{ marginBottom: 8 }} placeholder=\"Search\" onChange={onChange} />\n <Tree\n onExpand={onExpand}\n expandedKeys={expandedKeys}\n autoExpandParent={autoExpandParent}\n treeData={treeData}\n />\n </div>\n );\n};\n\nexport default App;\n";},"8f75fd04":function(n,e,t){},"8f7d8567":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9fab4a88");var o="import React from 'react';\nimport { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Breadcrumb, Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Sider } = Layout;\n\nconst items1: MenuProps['items'] = ['1', '2', '3'].map((key) => ({\n key,\n label: `nav ${key}`,\n}));\n\nconst items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(\n (icon, index) => {\n const key = String(index + 1);\n\n return {\n key: `sub${key}`,\n icon: React.createElement(icon),\n label: `subnav ${key}`,\n children: Array.from({ length: 4 }).map((_, j) => {\n const subKey = index * 4 + j + 1;\n return {\n key: subKey,\n label: `option${subKey}`,\n };\n }),\n };\n },\n);\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout>\n <Header style={{ display: 'flex', alignItems: 'center' }}>\n <div className=\"demo-logo\" />\n <Menu\n theme=\"dark\"\n mode=\"horizontal\"\n defaultSelectedKeys={['2']}\n items={items1}\n style={{ flex: 1, minWidth: 0 }}\n />\n </Header>\n <Layout>\n <Sider width={200} style={{ background: colorBgContainer }}>\n <Menu\n mode=\"inline\"\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n style={{ height: '100%', borderRight: 0 }}\n items={items2}\n />\n </Sider>\n <Layout style={{ padding: '0 24px 24px' }}>\n <Breadcrumb\n items={[{ title: 'Home' }, { title: 'List' }, { title: 'App' }]}\n style={{ margin: '16px 0' }}\n />\n <Content\n style={{\n padding: 24,\n margin: 0,\n minHeight: 280,\n background: colorBgContainer,\n borderRadius: borderRadiusLG,\n }}\n >\n Content\n </Content>\n </Layout>\n </Layout>\n </Layout>\n );\n};\n\nexport default App;\n";},"8fab0c91":function(n,e,t){},"8fd29451":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d91ec980");var o="import React from 'react';\nimport { ConfigProvider, Drawer } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;\n\nexport default () => (\n <ConfigProvider\n theme={{ components: { Drawer: { footerPaddingBlock: 0, footerPaddingInline: 0 } } }}\n >\n <div style={{ padding: 32, background: '#e6e6e6' }}>\n <InternalDrawer title=\"Hello Title\" style={{ height: 300 }} footer=\"Footer!\">\n Hello Content\n </InternalDrawer>\n </div>\n </ConfigProvider>\n);\n";},"8fe65220":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("557008f3");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => (\n <>\n <Cascader size=\"large\" options={options} onChange={onChange} />\n <br />\n <br />\n <Cascader options={options} onChange={onChange} />\n <br />\n <br />\n <Cascader size=\"small\" options={options} onChange={onChange} />\n <br />\n <br />\n </>\n);\n\nexport default App;\n";},"8fff5278":function(n,e,t){},"9032c339":function(n,e,t){},"9079d1f5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bb0092a9");var o="import React from 'react';\nimport { ConfigProvider, Radio } from 'antd';\nimport type { CheckboxGroupProps } from 'antd/es/checkbox';\n\nconst options: CheckboxGroupProps<string | number>['options'] = [\n { value: 1, label: 'A' },\n { value: 2, label: 'B' },\n { value: 3, label: 'C' },\n { value: 4, label: 'D' },\n];\n\nconst App: React.FC = () => (\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <Radio.Group value={1} options={options} />\n <br />\n <Radio.Group value={1} options={options} disabled />\n </ConfigProvider>\n);\n\nexport default App;\n";},"909ae6f4":function(n,e,t){},"909d528d":function(n,e,t){},"90c6ce29":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("abff1ef7");var o="import React, { useState } from 'react';\nimport {\n DesktopOutlined,\n FileOutlined,\n MenuFoldOutlined,\n MenuUnfoldOutlined,\n PieChartOutlined,\n TeamOutlined,\n UserOutlined,\n} from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Button, Layout, Menu, theme } from 'antd';\n\nconst { Header, Sider, Content } = Layout;\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n icon: <PieChartOutlined />,\n label: 'Option 1',\n },\n {\n key: '2',\n icon: <DesktopOutlined />,\n label: 'Option 2',\n },\n {\n key: 'sub1',\n icon: <UserOutlined />,\n label: 'User',\n children: [\n {\n key: '3',\n label: 'Tom',\n },\n {\n key: '4',\n label: 'Bill',\n },\n {\n key: '5',\n label: 'Alex',\n },\n ],\n },\n {\n key: 'sub2',\n icon: <TeamOutlined />,\n label: 'Team',\n children: [\n {\n key: '6',\n label: 'Team 1',\n },\n {\n key: '7',\n label: 'Team 2',\n },\n ],\n },\n {\n key: '9',\n icon: <FileOutlined />,\n },\n];\n\nconst App: React.FC = () => {\n const [collapsed, setCollapsed] = useState(true);\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout>\n <Sider trigger={null} collapsible collapsed={collapsed}>\n <div className=\"demo-logo-vertical\" />\n <Menu\n theme=\"dark\"\n mode=\"inline\"\n defaultSelectedKeys={['3']}\n defaultOpenKeys={['sub1']}\n items={items}\n />\n </Sider>\n <Layout>\n <Header style={{ padding: 0, background: colorBgContainer }}>\n <Button\n type=\"text\"\n icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}\n onClick={() => setCollapsed(!collapsed)}\n style={{\n fontSize: '16px',\n width: 64,\n height: 64,\n }}\n />\n </Header>\n <Content\n style={{\n margin: '24px 16px',\n padding: 24,\n minHeight: 280,\n background: colorBgContainer,\n borderRadius: borderRadiusLG,\n }}\n >\n Content\n </Content>\n </Layout>\n </Layout>\n );\n};\n\nexport default App;\n";},"91288e8d":function(n,e,t){},"9197ac67":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a4925229");var o="import React from 'react';\nimport { Cascader } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n 'popup.root': '\u5F39\u51FA\u83DC\u5355\u5143\u7D20',\n },\n en: {\n root: 'Root element',\n 'popup.root': 'Popup element',\n },\n};\nconst options = [\n {\n value: 'contributors',\n label: 'contributors',\n children: [\n {\n value: 'aojunhao123',\n label: 'aojunhao123',\n },\n {\n value: 'thinkasany',\n label: 'thinkasany',\n },\n ],\n },\n];\n\nconst Block = (props: any) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n const [value, setValue] = React.useState<string[]>(['contributors', 'aojunhao123']);\n const onChange = (newValue: string[]) => {\n setValue(newValue);\n };\n return (\n <div ref={divRef} style={{ marginBottom: 60 }}>\n <Cascader\n {...props}\n open\n styles={{\n popup: {\n root: {\n zIndex: 1,\n height: 70,\n },\n },\n }}\n getPopupContainer={() => divRef.current}\n value={value}\n onChange={onChange}\n options={options}\n placement=\"bottomLeft\"\n />\n </div>\n );\n};\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n\n return (\n <SemanticPreview\n componentName=\"Cascader\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.25.0' },\n { name: 'popup.root', desc: locale['popup.root'], version: '5.25.0' },\n ]}\n >\n <Block />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},"91d7d6a5":function(n,e,t){},"91d8f2b8":function(n,e,t){},"91ff2504":function(n,e,t){},"9223539d":function(n,e,t){},"9240dee0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("236bead4");var o='import React from \'react\';\nimport { NotificationOutlined } from \'@ant-design/icons\';\nimport { Avatar, Badge, ConfigProvider, Space } from \'antd\';\n\n/** Test usage. Do not use in your production. */\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Badge: {\n indicatorHeight: 24,\n indicatorHeightSM: 18,\n dotSize: 4,\n textFontWeight: \'bold\',\n statusSize: 8,\n },\n },\n }}\n >\n <Space direction="vertical">\n <Badge count={5}>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={26} />\n <Badge dot>\n <NotificationOutlined />\n </Badge>\n <Badge status="success" text="Success" />\n <Badge size="small" count={0} showZero />\n </Space>\n </ConfigProvider>\n);\n';},"9278dee2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0850e5b9");var o='import React from \'react\';\nimport { UserOutlined } from \'@ant-design/icons\';\nimport { AutoComplete, Flex, Input } from \'antd\';\n\nconst Title: React.FC<Readonly<{ title?: string }>> = (props) => (\n <Flex align="center" justify="space-between">\n {props.title}\n <a href="https://www.google.com/search?q=antd" target="_blank" rel="noopener noreferrer">\n more\n </a>\n </Flex>\n);\n\nconst renderItem = (title: string, count: number) => ({\n value: title,\n label: (\n <Flex align="center" justify="space-between">\n {title}\n <span>\n <UserOutlined /> {count}\n </span>\n </Flex>\n ),\n});\n\nconst options = [\n {\n label: <Title title="Libraries" />,\n options: [renderItem(\'AntDesign\', 10000), renderItem(\'AntDesign UI\', 10600)],\n },\n {\n label: <Title title="Solutions" />,\n options: [renderItem(\'AntDesign UI FAQ\', 60100), renderItem(\'AntDesign FAQ\', 30010)],\n },\n {\n label: <Title title="Articles" />,\n options: [renderItem(\'AntDesign design language\', 100000)],\n },\n];\n\nconst App: React.FC = () => (\n <AutoComplete\n classNames={{ popup: { root: \'certain-category-search-dropdown\' } }}\n popupMatchSelectWidth={500}\n style={{ width: 250 }}\n options={options}\n >\n <Input.Search size="large" placeholder="input here" />\n </AutoComplete>\n);\n\nexport default App;\n';},"9304e17a":function(n,e,t){},"934699f4":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8c170178");var o="import React from 'react';\nimport { Divider, Space, Typography } from 'antd';\n\nconst App: React.FC = () => (\n <Space split={<Divider type=\"vertical\" />}>\n <Typography.Link>Link</Typography.Link>\n <Typography.Link>Link</Typography.Link>\n <Typography.Link>Link</Typography.Link>\n </Space>\n);\n\nexport default App;\n";},"934cb0b7":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8504749a");var o="import React, { useRef, useState } from 'react';\nimport { Tabs } from 'antd';\n\ntype TargetKey = React.MouseEvent | React.KeyboardEvent | string;\n\nconst initialItems = [\n { label: 'Tab 1', children: 'Content of Tab 1', key: '1' },\n { label: 'Tab 2', children: 'Content of Tab 2', key: '2' },\n {\n label: 'Tab 3',\n children: 'Content of Tab 3',\n key: '3',\n closable: false,\n },\n];\n\nconst App: React.FC = () => {\n const [activeKey, setActiveKey] = useState(initialItems[0].key);\n const [items, setItems] = useState(initialItems);\n const newTabIndex = useRef(0);\n\n const onChange = (newActiveKey: string) => {\n setActiveKey(newActiveKey);\n };\n\n const add = () => {\n const newActiveKey = `newTab${newTabIndex.current++}`;\n const newPanes = [...items];\n newPanes.push({ label: 'New Tab', children: 'Content of new Tab', key: newActiveKey });\n setItems(newPanes);\n setActiveKey(newActiveKey);\n };\n\n const remove = (targetKey: TargetKey) => {\n let newActiveKey = activeKey;\n let lastIndex = -1;\n items.forEach((item, i) => {\n if (item.key === targetKey) {\n lastIndex = i - 1;\n }\n });\n const newPanes = items.filter((item) => item.key !== targetKey);\n if (newPanes.length && newActiveKey === targetKey) {\n if (lastIndex >= 0) {\n newActiveKey = newPanes[lastIndex].key;\n } else {\n newActiveKey = newPanes[0].key;\n }\n }\n setItems(newPanes);\n setActiveKey(newActiveKey);\n };\n\n const onEdit = (\n targetKey: React.MouseEvent | React.KeyboardEvent | string,\n action: 'add' | 'remove',\n ) => {\n if (action === 'add') {\n add();\n } else {\n remove(targetKey);\n }\n };\n\n return (\n <Tabs\n type=\"editable-card\"\n onChange={onChange}\n activeKey={activeKey}\n onEdit={onEdit}\n items={items}\n />\n );\n};\n\nexport default App;\n";},"93bdabf1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d0c7ebe8");var o="import React from 'react';\nimport type { InputNumberProps } from 'antd';\nimport { InputNumber, Space } from 'antd';\n\nconst onChange: InputNumberProps['onChange'] = (value) => {\n console.log('changed', value);\n};\n\nconst App: React.FC = () => (\n <Space>\n <InputNumber<number>\n defaultValue={1000}\n formatter={(value) => `$ ${value}`.replace(/\\B(?=(\\d{3})+(?!\\d))/g, ',')}\n parser={(value) => value?.replace(/\\$\\s?|(,*)/g, '') as unknown as number}\n onChange={onChange}\n />\n <InputNumber<number>\n defaultValue={100}\n min={0}\n max={100}\n formatter={(value) => `${value}%`}\n parser={(value) => value?.replace('%', '') as unknown as number}\n onChange={onChange}\n />\n </Space>\n);\n\nexport default App;\n";},"93c45ef3":function(n,e,t){},"93f4d884":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("24480da7");var o="import React, { useState } from 'react';\nimport { Button, TimePicker } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n return (\n <TimePicker\n open={open}\n onOpenChange={setOpen}\n renderExtraFooter={() => (\n <Button size=\"small\" type=\"primary\" onClick={() => setOpen(false)}>\n OK\n </Button>\n )}\n />\n );\n};\n\nexport default App;\n";},"9416d6c7":function(n,e,t){},"94465b23":function(n,e,t){},"945825ca":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9b541cbe");var o="import React from 'react';\nimport { ConfigProvider, Timeline } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <Timeline\n items={[\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n children: 'Solve initial network problems 2015-09-01',\n },\n {\n children: 'Technical testing 2015-09-01',\n },\n {\n children: 'Network problems being solved 2015-09-01',\n },\n ]}\n />\n </ConfigProvider>\n);\n\nexport default App;\n";},94609452:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("098c8906");var o="import React, { useState } from 'react';\nimport { Divider, Steps } from 'antd';\n\nconst App: React.FC = () => {\n const [current, setCurrent] = useState(0);\n\n const onChange = (value: number) => {\n console.log('onChange:', value);\n setCurrent(value);\n };\n const description = 'This is a description.';\n\n return (\n <>\n <Steps\n current={current}\n onChange={onChange}\n items={[\n {\n title: 'Step 1',\n description,\n },\n {\n title: 'Step 2',\n description,\n },\n {\n title: 'Step 3',\n description,\n },\n ]}\n />\n\n <Divider />\n\n <Steps\n current={current}\n onChange={onChange}\n direction=\"vertical\"\n items={[\n {\n title: 'Step 1',\n description,\n },\n {\n title: 'Step 2',\n description,\n },\n {\n title: 'Step 3',\n description,\n },\n ]}\n />\n </>\n );\n};\n\nexport default App;\n";},"946c6ffa":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7baabe25");var o="import React, { useState } from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { Button, Checkbox, ConfigProvider, Radio, Select } from 'antd';\n\n// Ant Design site use `es` module for view\n// but do not replace related lib `lib` with `es`\n// which do not show correct in site.\n// We may need do convert in site also.\nconst App: React.FC = () => {\n const [prefixCls, setPrefixCls] = useState('light');\n return (\n <>\n <Button\n style={{ marginBottom: 12 }}\n type=\"primary\"\n onClick={() => setPrefixCls(prefixCls === 'light' ? 'dark' : 'light')}\n >\n toggle prefixCls\n </Button>\n <br />\n <ConfigProvider prefixCls={prefixCls} iconPrefixCls=\"bamboo\">\n <SmileOutlined />\n <Select style={{ width: 120 }} />\n <Radio>test</Radio>\n <Checkbox>test</Checkbox>\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},"9472149a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3d61f594");var o="import React from 'react';\nimport { Select } from 'antd';\nimport type { SelectProps } from 'antd';\n\nconst options: SelectProps['options'] = [];\n\nfor (let i = 10; i < 36; i++) {\n options.push({\n value: i.toString(36) + i,\n label: i.toString(36) + i,\n });\n}\n\nconst handleChange = (value: string[]) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <Select\n mode=\"tags\"\n style={{ width: '100%' }}\n onChange={handleChange}\n tokenSeparators={[',']}\n options={options}\n />\n);\n\nexport default App;\n";},"94bae124":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0f1d0b1d");var o="import React from 'react';\nimport { Calendar, Col, Radio, Row, Select } from 'antd';\nimport type { CalendarProps } from 'antd';\nimport { createStyles } from 'antd-style';\nimport classNames from 'classnames';\nimport dayjs from 'dayjs';\nimport type { Dayjs } from 'dayjs';\nimport { HolidayUtil, Lunar } from 'lunar-typescript';\n\nconst useStyle = createStyles(({ token, css, cx }) => {\n const lunar = css`\n color: ${token.colorTextTertiary};\n font-size: ${token.fontSizeSM}px;\n `;\n const weekend = css`\n color: ${token.colorError};\n &.gray {\n opacity: 0.4;\n }\n `;\n return {\n wrapper: css`\n width: 450px;\n border: 1px solid ${token.colorBorderSecondary};\n border-radius: ${token.borderRadiusOuter};\n padding: 5px;\n `,\n dateCell: css`\n position: relative;\n &:before {\n content: '';\n position: absolute;\n inset-inline-start: 0;\n inset-inline-end: 0;\n top: 0;\n bottom: 0;\n margin: auto;\n max-width: 40px;\n max-height: 40px;\n background: transparent;\n transition: background-color 300ms;\n border-radius: ${token.borderRadiusOuter}px;\n border: 1px solid transparent;\n box-sizing: border-box;\n }\n &:hover:before {\n background: rgba(0, 0, 0, 0.04);\n }\n `,\n today: css`\n &:before {\n border: 1px solid ${token.colorPrimary};\n }\n `,\n text: css`\n position: relative;\n z-index: 1;\n `,\n lunar,\n current: css`\n color: ${token.colorTextLightSolid};\n &:before {\n background: ${token.colorPrimary};\n }\n &:hover:before {\n background: ${token.colorPrimary};\n opacity: 0.8;\n }\n .${cx(lunar)} {\n color: ${token.colorTextLightSolid};\n opacity: 0.9;\n }\n .${cx(weekend)} {\n color: ${token.colorTextLightSolid};\n }\n `,\n monthCell: css`\n width: 120px;\n color: ${token.colorTextBase};\n border-radius: ${token.borderRadiusOuter}px;\n padding: 5px 0;\n &:hover {\n background: rgba(0, 0, 0, 0.04);\n }\n `,\n monthCellCurrent: css`\n color: ${token.colorTextLightSolid};\n background: ${token.colorPrimary};\n &:hover {\n background: ${token.colorPrimary};\n opacity: 0.8;\n }\n `,\n weekend,\n };\n});\n\nconst App: React.FC = () => {\n const { styles } = useStyle({ test: true });\n\n const [selectDate, setSelectDate] = React.useState<Dayjs>(() => dayjs());\n const [panelDateDate, setPanelDate] = React.useState<Dayjs>(() => dayjs());\n\n const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {\n console.log(value.format('YYYY-MM-DD'), mode);\n setPanelDate(value);\n };\n\n const onDateChange: CalendarProps<Dayjs>['onSelect'] = (value, selectInfo) => {\n if (selectInfo.source === 'date') {\n setSelectDate(value);\n }\n };\n\n const cellRender: CalendarProps<Dayjs>['fullCellRender'] = (date, info) => {\n const d = Lunar.fromDate(date.toDate());\n const lunar = d.getDayInChinese();\n const solarTerm = d.getJieQi();\n const isWeekend = date.day() === 6 || date.day() === 0;\n const h = HolidayUtil.getHoliday(date.get('year'), date.get('month') + 1, date.get('date'));\n const displayHoliday = h?.getTarget() === h?.getDay() ? h?.getName() : undefined;\n if (info.type === 'date') {\n return React.cloneElement(info.originNode, {\n ...(info.originNode as React.ReactElement<any>).props,\n className: classNames(styles.dateCell, {\n [styles.current]: selectDate.isSame(date, 'date'),\n [styles.today]: date.isSame(dayjs(), 'date'),\n }),\n children: (\n <div className={styles.text}>\n <span\n className={classNames({\n [styles.weekend]: isWeekend,\n gray: !panelDateDate.isSame(date, 'month'),\n })}\n >\n {date.get('date')}\n </span>\n {info.type === 'date' && (\n <div className={styles.lunar}>{displayHoliday || solarTerm || lunar}</div>\n )}\n </div>\n ),\n });\n }\n\n if (info.type === 'month') {\n // Due to the fact that a solar month is part of the lunar month X and part of the lunar month X+1,\n // when rendering a month, always take X as the lunar month of the month\n const d2 = Lunar.fromDate(new Date(date.get('year'), date.get('month')));\n const month = d2.getMonthInChinese();\n return (\n <div\n className={classNames(styles.monthCell, {\n [styles.monthCellCurrent]: selectDate.isSame(date, 'month'),\n })}\n >\n {date.get('month') + 1}\u6708\uFF08{month}\u6708\uFF09\n </div>\n );\n }\n };\n\n const getYearLabel = (year: number) => {\n const d = Lunar.fromDate(new Date(year + 1, 0));\n return `${d.getYearInChinese()}\u5E74\uFF08${d.getYearInGanZhi()}${d.getYearShengXiao()}\u5E74\uFF09`;\n };\n\n const getMonthLabel = (month: number, value: Dayjs) => {\n const d = Lunar.fromDate(new Date(value.year(), month));\n const lunar = d.getMonthInChinese();\n return `${month + 1}\u6708\uFF08${lunar}\u6708\uFF09`;\n };\n\n return (\n <div className={styles.wrapper}>\n <Calendar\n fullCellRender={cellRender}\n fullscreen={false}\n onPanelChange={onPanelChange}\n onSelect={onDateChange}\n headerRender={({ value, type, onChange, onTypeChange }) => {\n const start = 0;\n const end = 12;\n const monthOptions = [];\n\n let current = value.clone();\n const localeData = value.localeData();\n const months = [];\n for (let i = 0; i < 12; i++) {\n current = current.month(i);\n months.push(localeData.monthsShort(current));\n }\n\n for (let i = start; i < end; i++) {\n monthOptions.push({\n label: getMonthLabel(i, value),\n value: i,\n });\n }\n\n const year = value.year();\n const month = value.month();\n const options = [];\n for (let i = year - 10; i < year + 10; i += 1) {\n options.push({\n label: getYearLabel(i),\n value: i,\n });\n }\n return (\n <Row justify=\"end\" gutter={8} style={{ padding: 8 }}>\n <Col>\n <Select\n size=\"small\"\n popupMatchSelectWidth={false}\n className=\"my-year-select\"\n value={year}\n options={options}\n onChange={(newYear) => {\n const now = value.clone().year(newYear);\n onChange(now);\n }}\n />\n </Col>\n <Col>\n <Select\n size=\"small\"\n popupMatchSelectWidth={false}\n value={month}\n options={monthOptions}\n onChange={(newMonth) => {\n const now = value.clone().month(newMonth);\n onChange(now);\n }}\n />\n </Col>\n <Col>\n <Radio.Group\n size=\"small\"\n onChange={(e) => onTypeChange(e.target.value)}\n value={type}\n >\n <Radio.Button value=\"month\">\u6708</Radio.Button>\n <Radio.Button value=\"year\">\u5E74</Radio.Button>\n </Radio.Group>\n </Col>\n </Row>\n );\n }}\n />\n </div>\n );\n};\n\nexport default App;\n";},"94bca524":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6bba3f8f");var o="import React, { useState } from 'react';\nimport { Button, Space, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const [disabled, setDisabled] = useState(true);\n\n const toggle = () => {\n setDisabled(!disabled);\n };\n\n return (\n <Space direction=\"vertical\">\n <Switch disabled={disabled} defaultChecked />\n <Button type=\"primary\" onClick={toggle}>\n Toggle disabled\n </Button>\n </Space>\n );\n};\n\nexport default App;\n";},"94c78fcf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9fe53e6f");var o='import React from \'react\';\nimport { Flex, Rate } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="middle" vertical>\n <Flex gap="middle">\n <Rate defaultValue={3} />\n <span>allowClear: true</span>\n </Flex>\n <Flex gap="middle">\n <Rate defaultValue={3} allowClear={false} />\n <span>allowClear: false</span>\n </Flex>\n </Flex>\n);\n\nexport default App;\n';},"952b0c89":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("91d7d6a5");var o="import React from 'react';\nimport { Mentions } from 'antd';\n\nconst App: React.FC = () => (\n <Mentions\n autoSize\n style={{ width: '100%' }}\n options={[\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n {\n value: 'yesmeck',\n label: 'yesmeck',\n },\n ]}\n />\n);\n\nexport default App;\n";},"952c3290":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e9732b9d");var o="import React from 'react';\nimport { Switch } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Switch loading defaultChecked />\n <br />\n <Switch size=\"small\" loading />\n </>\n);\n\nexport default App;\n";},"959dc97e":function(n,e,t){},"9674f15c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("997f5b24");var o="import React from 'react';\nimport { Select } from 'antd';\nimport type { SelectProps } from 'antd';\n\nconst options: SelectProps['options'] = [];\n\nfor (let i = 10; i < 36; i++) {\n options.push({\n value: i.toString(36) + i,\n label: i.toString(36) + i,\n });\n}\n\nconst handleChange = (value: string[]) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <Select\n mode=\"tags\"\n style={{ width: '100%' }}\n placeholder=\"Tags Mode\"\n onChange={handleChange}\n options={options}\n />\n);\n\nexport default App;\n";},"96a57354":function(n,e,t){},"96a8b7e7":function(n,e,t){},"96cd345f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3b2f1ffc");var o="import React from 'react';\nimport type { TimePickerProps } from 'antd';\nimport { TimePicker } from 'antd';\n\nconst onChange: TimePickerProps['onChange'] = (time, timeString) => {\n console.log(time, timeString);\n};\n\nconst App: React.FC = () => <TimePicker onChange={onChange} needConfirm />;\n\nexport default App;\n";},"96f763d1":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("36a4159e");var o="import React from 'react';\nimport { DownOutlined, UserOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Button, Dropdown, message, Space, Tooltip } from 'antd';\n\nconst handleButtonClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n message.info('Click on left button.');\n console.log('click left button', e);\n};\n\nconst handleMenuClick: MenuProps['onClick'] = (e) => {\n message.info('Click on menu item.');\n console.log('click', e);\n};\n\nconst items: MenuProps['items'] = [\n {\n label: '1st menu item',\n key: '1',\n icon: <UserOutlined />,\n },\n {\n label: '2nd menu item',\n key: '2',\n icon: <UserOutlined />,\n },\n {\n label: '3rd menu item',\n key: '3',\n icon: <UserOutlined />,\n danger: true,\n },\n {\n label: '4rd menu item',\n key: '4',\n icon: <UserOutlined />,\n danger: true,\n disabled: true,\n },\n];\n\nconst menuProps = {\n items,\n onClick: handleMenuClick,\n};\n\nconst App: React.FC = () => (\n <Space wrap>\n <Dropdown.Button menu={menuProps} onClick={handleButtonClick}>\n Dropdown\n </Dropdown.Button>\n <Dropdown.Button menu={menuProps} placement=\"bottom\" icon={<UserOutlined />}>\n Dropdown\n </Dropdown.Button>\n <Dropdown.Button menu={menuProps} onClick={handleButtonClick} disabled>\n Dropdown\n </Dropdown.Button>\n <Dropdown.Button\n menu={menuProps}\n buttonsRender={([leftButton, rightButton]) => [\n <Tooltip title=\"tooltip\" key=\"leftButton\">\n {leftButton}\n </Tooltip>,\n React.cloneElement(rightButton as React.ReactElement<any, string>, { loading: true }),\n ]}\n >\n With Tooltip\n </Dropdown.Button>\n <Dropdown menu={menuProps}>\n <Button>\n <Space>\n Button\n <DownOutlined />\n </Space>\n </Button>\n </Dropdown>\n <Dropdown.Button menu={menuProps} onClick={handleButtonClick} danger>\n Danger\n </Dropdown.Button>\n </Space>\n);\n\nexport default App;\n";},"970b23c8":function(n,e,t){},"97256acc":function(n,e,t){},"9726fdb9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("673f509a");var o="import React from 'react';\nimport { AutoComplete } from 'antd';\n\nimport SelectSemanticTemplate from '../../../.dumi/theme/common/SelectSemanticTemplate';\n\nconst mockVal = (str: string, repeat = 1) => ({\n value: str.repeat(repeat),\n label: str.repeat(repeat),\n});\n\nconst getPanelValue = (searchText: string) =>\n !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];\n\nconst App: React.FC = () => {\n const [options, setOptions] = React.useState([\n { value: 'aojunhao123', label: 'aojunhao123' },\n { value: 'thinkasany', label: 'thinkasany' },\n ]);\n\n return (\n <SelectSemanticTemplate\n component={AutoComplete}\n componentName=\"AutoComplete\"\n style={{ width: 200 }}\n options={options}\n onSearch={(text: string) => setOptions(getPanelValue(text))}\n placeholder=\"input here\"\n />\n );\n};\n\nexport default App;\n";},"974a1a8c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3e681b45");var o='import React, { useState } from \'react\';\nimport { Button, Form, Input, Modal, Radio } from \'antd\';\n\ninterface Values {\n title?: string;\n description?: string;\n modifier?: string;\n}\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const [formValues, setFormValues] = useState<Values>();\n const [open, setOpen] = useState(false);\n\n const onCreate = (values: Values) => {\n console.log(\'Received values of form: \', values);\n setFormValues(values);\n setOpen(false);\n };\n\n return (\n <>\n <Button type="primary" onClick={() => setOpen(true)}>\n New Collection\n </Button>\n <pre>{JSON.stringify(formValues, null, 2)}</pre>\n <Modal\n open={open}\n title="Create a new collection"\n okText="Create"\n cancelText="Cancel"\n okButtonProps={{ autoFocus: true, htmlType: \'submit\' }}\n onCancel={() => setOpen(false)}\n destroyOnHidden\n modalRender={(dom) => (\n <Form\n layout="vertical"\n form={form}\n name="form_in_modal"\n initialValues={{ modifier: \'public\' }}\n clearOnDestroy\n onFinish={(values) => onCreate(values)}\n >\n {dom}\n </Form>\n )}\n >\n <Form.Item\n name="title"\n label="Title"\n rules={[{ required: true, message: \'Please input the title of collection!\' }]}\n >\n <Input />\n </Form.Item>\n <Form.Item name="description" label="Description">\n <Input type="textarea" />\n </Form.Item>\n <Form.Item name="modifier" className="collection-create-form_last-form-item">\n <Radio.Group>\n <Radio value="public">Public</Radio>\n <Radio value="private">Private</Radio>\n </Radio.Group>\n </Form.Item>\n </Modal>\n </>\n );\n};\n\nexport default App;\n';},"976a30a0":function(n,e,t){},"976c1512":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("66700073");var o='import React from \'react\';\nimport { CloseSquareOutlined } from \'@ant-design/icons\';\nimport { Alert } from \'antd\';\n\nconst onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {\n console.log(e, \'I was closed.\');\n};\n\nconst App: React.FC = () => (\n <>\n <Alert\n message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"\n type="warning"\n closable\n onClose={onClose}\n />\n <br />\n <Alert\n message="Error Text"\n description="Error Description Error Description Error Description Error Description Error Description Error Description"\n type="error"\n closable\n onClose={onClose}\n />\n <br />\n <Alert\n message="Error Text"\n description="Error Description Error Description Error Description Error Description Error Description Error Description"\n type="error"\n onClose={onClose}\n closable={{\n \'aria-label\': \'close\',\n closeIcon: <CloseSquareOutlined />,\n }}\n />\n </>\n);\n\nexport default App;\n';},"97731a41":function(n,e,t){},97890791:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1d97c650");var o='import React, { useState } from \'react\';\nimport { InfoCircleOutlined } from \'@ant-design/icons\';\nimport { Button, Form, Input, Radio, Tag } from \'antd\';\n\ntype RequiredMark = boolean | \'optional\' | \'customize\';\n\nconst customizeRequiredMark = (label: React.ReactNode, { required }: { required: boolean }) => (\n <>\n {required ? <Tag color="error">Required</Tag> : <Tag color="warning">optional</Tag>}\n {label}\n </>\n);\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const [requiredMark, setRequiredMarkType] = useState<RequiredMark>(\'optional\');\n\n const onRequiredTypeChange = ({ requiredMarkValue }: { requiredMarkValue: RequiredMark }) => {\n setRequiredMarkType(requiredMarkValue);\n };\n\n return (\n <Form\n form={form}\n layout="vertical"\n initialValues={{ requiredMarkValue: requiredMark }}\n onValuesChange={onRequiredTypeChange}\n requiredMark={requiredMark === \'customize\' ? customizeRequiredMark : requiredMark}\n >\n <Form.Item label="Required Mark" name="requiredMarkValue">\n <Radio.Group>\n <Radio.Button value>Default</Radio.Button>\n <Radio.Button value="optional">Optional</Radio.Button>\n <Radio.Button value={false}>Hidden</Radio.Button>\n <Radio.Button value="customize">Customize</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label="Field A" required tooltip="This is a required field">\n <Input placeholder="input placeholder" />\n </Form.Item>\n <Form.Item\n label="Field B"\n tooltip={{ title: \'Tooltip with customize icon\', icon: <InfoCircleOutlined /> }}\n >\n <Input placeholder="input placeholder" />\n </Form.Item>\n <Form.Item>\n <Button type="primary">Submit</Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},"97cf9820":function(n,e,t){},"97d0512d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e78e0358");var o="import React, { useState } from 'react';\nimport { TimePicker } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\nconst App: React.FC = () => {\n const [value, setValue] = useState<Dayjs | null>(null);\n\n const onChange = (time: Dayjs) => {\n setValue(time);\n };\n\n return <TimePicker value={value} onChange={onChange} />;\n};\n\nexport default App;\n";},"97e5bb1c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("acc4b651");var o="import React from 'react';\nimport { DatePicker, Space } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst { RangePicker } = DatePicker;\n\nconst dateFormat = 'YYYY-MM-DD';\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <DatePicker variant=\"filled\" defaultValue={dayjs('2015-06-06', dateFormat)} disabled />\n <DatePicker\n variant=\"filled\"\n picker=\"month\"\n defaultValue={dayjs('2015-06', 'YYYY-MM')}\n disabled\n />\n <RangePicker\n variant=\"filled\"\n defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}\n disabled\n />\n <RangePicker\n variant=\"filled\"\n defaultValue={[dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]}\n disabled={[false, true]}\n />\n <DatePicker\n defaultValue={dayjs('2023-12-25')}\n variant=\"filled\"\n status=\"error\"\n style={{ width: '100%' }}\n />\n <DatePicker variant=\"filled\" status=\"warning\" style={{ width: '100%' }} />\n <RangePicker variant=\"filled\" status=\"error\" style={{ width: '100%' }} />\n <RangePicker variant=\"filled\" status=\"warning\" style={{ width: '100%' }} />\n </Space>\n);\n\nexport default App;\n";},"97ee947c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e7397233");var o="import React from 'react';\nimport { ColorPicker } from 'antd';\n\nconst Demo = () => <ColorPicker defaultValue=\"#1677ff\" />;\n\nexport default Demo;\n";},"97f159d2":function(n,e,t){},"97f30088":function(n,e,t){},"97fc1c95":function(n,e,t){},"9807f03d":function(n,e,t){},"98206a9e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b1f6f3ee");var o="import React from 'react';\nimport { Select, Space } from 'antd';\n\nconst handleChange = (value: string) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <Space wrap>\n <Select\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n onChange={handleChange}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n { value: 'disabled', label: 'Disabled', disabled: true },\n ]}\n />\n <Select\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n disabled\n options={[{ value: 'lucy', label: 'Lucy' }]}\n />\n <Select\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n loading\n options={[{ value: 'lucy', label: 'Lucy' }]}\n />\n <Select\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n allowClear\n options={[{ value: 'lucy', label: 'Lucy' }]}\n placeholder=\"select it\"\n />\n </Space>\n);\n\nexport default App;\n";},"98413fbf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0e892cec");var o='import React from \'react\';\nimport { Tour } from \'antd\';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Tour;\n\nexport default () => (\n <div\n style={{\n display: \'flex\',\n flexDirection: \'column\',\n rowGap: 16,\n background: \'rgba(50,0,0,0.65)\',\n padding: 8,\n }}\n >\n <InternalPanel title="Hello World!" description="Hello World?!" />\n <InternalPanel\n title="Hello World!"\n description="Hello World?!"\n cover={\n <img\n alt="tour.png"\n src="https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png"\n />\n }\n current={5}\n total={7}\n />\n <InternalPanel\n title="Hello World!"\n description="Hello World?!"\n type="primary"\n current={4}\n total={5}\n />\n </div>\n);\n';},"984f7db5":function(n,e,t){},"985296cb":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("644a5c38");var o="import React from 'react';\nimport { Button, notification } from 'antd';\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotification = () => {\n api.open({\n message: 'Notification Title',\n description:\n 'I will never close automatically. This is a purposely very very long description that has many many characters and words.',\n duration: 0,\n });\n };\n\n return (\n <>\n {contextHolder}\n <Button type=\"primary\" onClick={openNotification}>\n Open the notification box\n </Button>\n </>\n );\n};\n\nexport default App;\n";},"98541ebc":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5e3a704b");var o="import React from 'react';\nimport { Select, Space } from 'antd';\n\nconst handleChange = (value: string[]) => {\n console.log(`selected ${value}`);\n};\n\nconst options = [\n {\n label: 'China',\n value: 'china',\n emoji: '\u{1F1E8}\u{1F1F3}',\n desc: 'China (\u4E2D\u56FD)',\n },\n {\n label: 'USA',\n value: 'usa',\n emoji: '\u{1F1FA}\u{1F1F8}',\n desc: 'USA (\u7F8E\u56FD)',\n },\n {\n label: 'Japan',\n value: 'japan',\n emoji: '\u{1F1EF}\u{1F1F5}',\n desc: 'Japan (\u65E5\u672C)',\n },\n {\n label: 'Korea',\n value: 'korea',\n emoji: '\u{1F1F0}\u{1F1F7}',\n desc: 'Korea (\u97E9\u56FD)',\n },\n];\n\nconst App: React.FC = () => (\n <Select\n mode=\"multiple\"\n style={{ width: '100%' }}\n placeholder=\"select one country\"\n defaultValue={['china']}\n onChange={handleChange}\n options={options}\n optionRender={(option) => (\n <Space>\n <span role=\"img\" aria-label={option.data.label}>\n {option.data.emoji}\n </span>\n {option.data.desc}\n </Space>\n )}\n />\n);\n\nexport default App;\n";},"98c07847":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("59f285d3");var o="import React from 'react';\nimport { Tooltip } from 'antd';\n\nconst App: React.FC = () => (\n <Tooltip destroyOnHidden title=\"prompt text\">\n <span>Dom will destroyed when Tooltip close</span>\n </Tooltip>\n);\n\nexport default App;\n";},"98ea1c91":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a90b2d48");var o='import React from \'react\';\nimport { Checkbox, ConfigProvider, Radio, Space } from \'antd\';\n\nconst sharedStyle: React.CSSProperties = {\n border: \'1px solid red\',\n marginBottom: 16,\n};\n\nconst App: React.FC = () => (\n <div>\n <Space style={sharedStyle} align="center">\n <Checkbox value="light" />\n <div>Bamboo</div>\n <Checkbox value="little">Little</Checkbox>\n </Space>\n\n <Space style={sharedStyle} align="center">\n <Radio value="light" />\n <div>Bamboo</div>\n <Radio value="little">Little</Radio>\n </Space>\n\n <div\n style={{\n ...sharedStyle,\n display: \'flex\',\n alignItems: \'center\',\n }}\n >\n <Checkbox value="light" />\n <div>Bamboo</div>\n <Checkbox value="little">Little</Checkbox>\n </div>\n\n <div\n style={{\n ...sharedStyle,\n display: \'flex\',\n alignItems: \'center\',\n }}\n >\n <Radio value="light" />\n <div>Bamboo</div>\n <Radio value="little">Little</Radio>\n </div>\n\n <div>\n <ConfigProvider\n theme={{\n token: {\n controlHeight: 48,\n },\n }}\n >\n <Checkbox>Aligned</Checkbox>\n </ConfigProvider>\n </div>\n\n <div>\n <Checkbox>\n <span style={{ fontSize: 32 }}>Aligned</span>\n </Checkbox>\n </div>\n </div>\n);\n\nexport default App;\n';},"9911d56e":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d18732fa");var o="import React from 'react';\nimport { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';\nimport { Button, Form, Input } from 'antd';\n\nconst formItemLayout = {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 4 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 20 },\n },\n};\n\nconst formItemLayoutWithOutLabel = {\n wrapperCol: {\n xs: { span: 24, offset: 0 },\n sm: { span: 20, offset: 4 },\n },\n};\n\nconst App: React.FC = () => {\n const onFinish = (values: any) => {\n console.log('Received values of form:', values);\n };\n\n return (\n <Form\n name=\"dynamic_form_item\"\n {...formItemLayoutWithOutLabel}\n onFinish={onFinish}\n style={{ maxWidth: 600 }}\n >\n <Form.List\n name=\"names\"\n rules={[\n {\n validator: async (_, names) => {\n if (!names || names.length < 2) {\n return Promise.reject(new Error('At least 2 passengers'));\n }\n },\n },\n ]}\n >\n {(fields, { add, remove }, { errors }) => (\n <>\n {fields.map((field, index) => (\n <Form.Item\n {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}\n label={index === 0 ? 'Passengers' : ''}\n required={false}\n key={field.key}\n >\n <Form.Item\n {...field}\n validateTrigger={['onChange', 'onBlur']}\n rules={[\n {\n required: true,\n whitespace: true,\n message: \"Please input passenger's name or delete this field.\",\n },\n ]}\n noStyle\n >\n <Input placeholder=\"passenger name\" style={{ width: '60%' }} />\n </Form.Item>\n {fields.length > 1 ? (\n <MinusCircleOutlined\n className=\"dynamic-delete-button\"\n onClick={() => remove(field.name)}\n />\n ) : null}\n </Form.Item>\n ))}\n <Form.Item>\n <Button\n type=\"dashed\"\n onClick={() => add()}\n style={{ width: '60%' }}\n icon={<PlusOutlined />}\n >\n Add field\n </Button>\n <Button\n type=\"dashed\"\n onClick={() => {\n add('The head item', 0);\n }}\n style={{ width: '60%', marginTop: '20px' }}\n icon={<PlusOutlined />}\n >\n Add field at head\n </Button>\n <Form.ErrorList errors={errors} />\n </Form.Item>\n </>\n )}\n </Form.List>\n <Form.Item>\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n";},"9956efd9":function(n,e,t){},"995a7c45":function(n,e,t){},"997f5b24":function(n,e,t){},"998ad620":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("84029d4f");var o="import React from 'react';\nimport { Avatar, Badge } from 'antd';\n\nconst App: React.FC = () => (\n <Badge count={5} offset={[10, 10]}>\n <Avatar shape=\"square\" size=\"large\" />\n </Badge>\n);\n\nexport default App;\n";},"99b41502":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8ed3fde3");var o="import React, { useState } from 'react';\nimport { Button, Timeline } from 'antd';\n\nconst App: React.FC = () => {\n const [reverse, setReverse] = useState(false);\n\n const handleClick = () => {\n setReverse(!reverse);\n };\n\n return (\n <div>\n <Timeline\n pending=\"Recording...\"\n reverse={reverse}\n items={[\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n children: 'Solve initial network problems 2015-09-01',\n },\n {\n children: 'Technical testing 2015-09-01',\n },\n ]}\n />\n <Button type=\"primary\" style={{ marginTop: 16 }} onClick={handleClick}>\n Toggle Reverse\n </Button>\n </div>\n );\n};\n\nexport default App;\n";},"9a3afa00":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("630605db");var o='import React from \'react\';\nimport { Button, Form, Input } from \'antd\';\nimport type { FormItemProps } from \'antd\';\n\nconst MyFormItemContext = React.createContext<(string | number)[]>([]);\n\ninterface MyFormItemGroupProps {\n prefix: string | number | (string | number)[];\n}\n\nfunction toArr(str: string | number | (string | number)[]): (string | number)[] {\n return Array.isArray(str) ? str : [str];\n}\n\nconst MyFormItemGroup: React.FC<React.PropsWithChildren<MyFormItemGroupProps>> = ({\n prefix,\n children,\n}) => {\n const prefixPath = React.useContext(MyFormItemContext);\n const concatPath = React.useMemo(() => [...prefixPath, ...toArr(prefix)], [prefixPath, prefix]);\n\n return <MyFormItemContext.Provider value={concatPath}>{children}</MyFormItemContext.Provider>;\n};\n\nconst MyFormItem = ({ name, ...props }: FormItemProps) => {\n const prefixPath = React.useContext(MyFormItemContext);\n const concatName = name !== undefined ? [...prefixPath, ...toArr(name)] : undefined;\n\n return <Form.Item name={concatName} {...props} />;\n};\n\nconst App: React.FC = () => {\n const onFinish = (value: object) => {\n console.log(value);\n };\n\n return (\n <Form name="form_item_path" layout="vertical" onFinish={onFinish}>\n <MyFormItemGroup prefix={[\'user\']}>\n <MyFormItemGroup prefix={[\'name\']}>\n <MyFormItem name="firstName" label="First Name">\n <Input />\n </MyFormItem>\n <MyFormItem name="lastName" label="Last Name">\n <Input />\n </MyFormItem>\n </MyFormItemGroup>\n\n <MyFormItem name="age" label="Age">\n <Input />\n </MyFormItem>\n </MyFormItemGroup>\n\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form>\n );\n};\n\nexport default App;\n';},"9a420ac9":function(n,e,t){},"9a42d662":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("28fb3ec0");var o="import React, { useState } from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader, Flex, Switch } from 'antd';\n\ninterface Option {\n value: string | number;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst onMultipleChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => {\n const [disabled, setDisabled] = useState(false);\n\n return (\n <Flex vertical gap=\"small\" align=\"flex-start\">\n <Switch\n checked={disabled}\n checkedChildren=\"Enabled\"\n unCheckedChildren=\"Disabled\"\n onChange={setDisabled}\n aria-label=\"disabled switch\"\n />\n <Cascader.Panel options={options} onChange={onChange} disabled={disabled} />\n <Cascader.Panel multiple options={options} onChange={onMultipleChange} disabled={disabled} />\n <Cascader.Panel />\n </Flex>\n );\n};\n\nexport default App;\n";},"9a44978c":function(n,e,t){},"9a7048f9":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1a91387e");var o="import React from 'react';\nimport { Select } from 'antd';\n\nimport SelectSemanticTemplate from '../../../.dumi/theme/common/SelectSemanticTemplate';\n\nconst App: React.FC = () => {\n return (\n <SelectSemanticTemplate\n component={Select}\n componentName=\"Select\"\n style={{ width: 200 }}\n defaultValue=\"aojunhao123\"\n options={[\n { value: 'aojunhao123', label: 'aojunhao123' },\n { value: 'thinkasany', label: 'thinkasany' },\n ]}\n />\n );\n};\n\nexport default App;\n";},"9a75322c":function(n,e,t){},"9a81608c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("24279cb1");var o='import React from \'react\';\nimport { Card, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical" size={16}>\n <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n <Card size="small" title="Small size card" extra={<a href="#">More</a>} style={{ width: 300 }}>\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n </Space>\n);\n\nexport default App;\n';},"9a88c99b":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("108c25ad");var o="import React from 'react';\nimport { Flex, Tag } from 'antd';\n\nconst tagsData = ['Movies', 'Books', 'Music', 'Sports'];\n\nconst App: React.FC = () => {\n const [selectedTags, setSelectedTags] = React.useState<string[]>(['Movies']);\n const handleChange = (tag: string, checked: boolean) => {\n const nextSelectedTags = checked\n ? [...selectedTags, tag]\n : selectedTags.filter((t) => t !== tag);\n console.log('You are interested in: ', nextSelectedTags);\n setSelectedTags(nextSelectedTags);\n };\n\n return (\n <Flex gap={4} wrap align=\"center\">\n <span>Categories:</span>\n {tagsData.map<React.ReactNode>((tag) => (\n <Tag.CheckableTag\n key={tag}\n checked={selectedTags.includes(tag)}\n onChange={(checked) => handleChange(tag, checked)}\n >\n {tag}\n </Tag.CheckableTag>\n ))}\n </Flex>\n );\n};\n\nexport default App;\n";},"9aa83c1d":function(n,e,t){},"9ae89232":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0012a91b");var o="import React from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { Button, Result } from 'antd';\n\nconst App: React.FC = () => (\n <Result\n icon={<SmileOutlined />}\n title=\"Great, we have done all the operations!\"\n extra={<Button type=\"primary\">Next</Button>}\n />\n);\n\nexport default App;\n";},"9af0c292":function(n,e,t){},"9afa3ca0":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3c04ace0");var o="import React from 'react';\nimport { NotificationOutlined } from '@ant-design/icons';\nimport { Badge, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space>\n <Badge dot>\n <NotificationOutlined style={{ fontSize: 16 }} />\n </Badge>\n <Badge dot>\n <a href=\"#\">Link something</a>\n </Badge>\n </Space>\n);\n\nexport default App;\n";},"9b043b98":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("96a8b7e7");var o='import React from \'react\';\nimport type { MenuProps } from \'antd\';\nimport { Button, Dropdown, Space } from \'antd\';\n\nconst items: MenuProps[\'items\'] = [\n {\n key: \'1\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">\n 1st menu item\n </a>\n ),\n },\n {\n key: \'2\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">\n 2nd menu item\n </a>\n ),\n },\n {\n key: \'3\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">\n 3rd menu item\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Space wrap>\n <Dropdown menu={{ items }} placement="bottomLeft">\n <Button>bottomLeft</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="bottom">\n <Button>bottom</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="bottomRight">\n <Button>bottomRight</Button>\n </Dropdown>\n </Space>\n <Space wrap>\n <Dropdown menu={{ items }} placement="topLeft">\n <Button>topLeft</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="top">\n <Button>top</Button>\n </Dropdown>\n <Dropdown menu={{ items }} placement="topRight">\n <Button>topRight</Button>\n </Dropdown>\n </Space>\n </Space>\n);\n\nexport default App;\n';},"9b142daf":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7d450439");var o="import React from 'react';\nimport { Select } from 'antd';\n\nconst App: React.FC = () => (\n <Select\n showSearch\n placeholder=\"Select a person\"\n filterOption={(input, option) =>\n (option?.label ?? '').toLowerCase().includes(input.toLowerCase())\n }\n options={[\n { value: '1', label: 'Jack' },\n { value: '2', label: 'Lucy' },\n { value: '3', label: 'Tom' },\n ]}\n />\n);\n\nexport default App;\n";},"9b161ea7":function(n,e,t){},"9b1c034a":function(n,e,t){},"9b2d33b4":function(n,e,t){},"9b541cbe":function(n,e,t){},"9b5e6059":function(n,e,t){},"9bbe7d50":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c83002cc");var o='import React from \'react\';\nimport { Button, Popconfirm } from \'antd\';\n\nconst App: React.FC = () => (\n <Popconfirm\n title="Delete the task"\n description="Are you sure to delete this task?"\n okText="Yes"\n cancelText="No"\n >\n <Button danger>Delete</Button>\n </Popconfirm>\n);\n\nexport default App;\n';},"9bc7845a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7b2eb1ad");var o="import React from 'react';\nimport { Spin } from 'antd';\n\nconst App: React.FC = () => <Spin />;\n\nexport default App;\n";},"9bd50edc":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d32cb46d");var o="import React from 'react';\nimport { Pagination } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Pagination\n total={85}\n showTotal={(total) => `Total ${total} items`}\n defaultPageSize={20}\n defaultCurrent={1}\n />\n <br />\n <Pagination\n total={85}\n showTotal={(total, range) => `${range[0]}-${range[1]} of ${total} items`}\n defaultPageSize={20}\n defaultCurrent={1}\n />\n </>\n);\n\nexport default App;\n";},"9bff27b3":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8c2d75b3");var o="import React from 'react';\nimport { TreeSelect } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalTreeSelect } = TreeSelect;\n\nconst treeData = [\n {\n title: 'Node1',\n value: '0-0',\n children: [\n {\n title: 'Child Node1',\n value: '0-0-1',\n },\n {\n title: 'Child Node2',\n value: '0-0-2',\n },\n ],\n },\n {\n title: 'Node2',\n value: '0-1',\n },\n];\n\nconst App: React.FC = () => (\n <InternalTreeSelect defaultValue=\"lucy\" style={{ width: '100%' }} treeData={treeData} />\n);\n\nexport default App;\n";},"9c05edf1":function(n,e,t){},"9c3bf91d":function(n,e,t){},"9c599ae5":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3a82fbc7");var o="import React from 'react';\nimport { Image } from 'antd';\n\nconst App: React.FC = () => (\n <Image\n width={200}\n height={200}\n src=\"error\"\n fallback=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMIAAADDCAYAAADQvc6UAAABRWlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGASSSwoyGFhYGDIzSspCnJ3UoiIjFJgf8LAwSDCIMogwMCcmFxc4BgQ4ANUwgCjUcG3awyMIPqyLsis7PPOq3QdDFcvjV3jOD1boQVTPQrgSkktTgbSf4A4LbmgqISBgTEFyFYuLykAsTuAbJEioKOA7DkgdjqEvQHEToKwj4DVhAQ5A9k3gGyB5IxEoBmML4BsnSQk8XQkNtReEOBxcfXxUQg1Mjc0dyHgXNJBSWpFCYh2zi+oLMpMzyhRcASGUqqCZ16yno6CkYGRAQMDKMwhqj/fAIcloxgHQqxAjIHBEugw5sUIsSQpBobtQPdLciLEVJYzMPBHMDBsayhILEqEO4DxG0txmrERhM29nYGBddr//5/DGRjYNRkY/l7////39v///y4Dmn+LgeHANwDrkl1AuO+pmgAAADhlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAAqACAAQAAAABAAAAwqADAAQAAAABAAAAwwAAAAD9b/HnAAAHlklEQVR4Ae3dP3PTWBSGcbGzM6GCKqlIBRV0dHRJFarQ0eUT8LH4BnRU0NHR0UEFVdIlFRV7TzRksomPY8uykTk/zewQfKw/9znv4yvJynLv4uLiV2dBoDiBf4qP3/ARuCRABEFAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghggQAQZQKAnYEaQBAQaASKIAQJEkAEEegJmBElAoBEgghgg0Aj8i0JO4OzsrPv69Wv+hi2qPHr0qNvf39+iI97soRIh4f3z58/u7du3SXX7Xt7Z2enevHmzfQe+oSN2apSAPj09TSrb+XKI/f379+08+A0cNRE2ANkupk+ACNPvkSPcAAEibACyXUyfABGm3yNHuAECRNgAZLuYPgEirKlHu7u7XdyytGwHAd8jjNyng4OD7vnz51dbPT8/7z58+NB9+/bt6jU/TI+AGWHEnrx48eJ/EsSmHzx40L18+fLyzxF3ZVMjEyDCiEDjMYZZS5wiPXnyZFbJaxMhQIQRGzHvWR7XCyOCXsOmiDAi1HmPMMQjDpbpEiDCiL358eNHurW/5SnWdIBbXiDCiA38/Pnzrce2YyZ4//59F3ePLNMl4PbpiL2J0L979+7yDtHDhw8vtzzvdGnEXdvUigSIsCLAWavHp/+qM0BcXMd/q25n1vF57TYBp0a3mUzilePj4+7k5KSLb6gt6ydAhPUzXnoPR0dHl79WGTNCfBnn1uvSCJdegQhLI1vvCk+fPu2ePXt2tZOYEV6/fn31dz+shwAR1sP1cqvLntbEN9MxA9xcYjsxS1jWR4AIa2Ibzx0tc44fYX/16lV6NDFLXH+YL32jwiACRBiEbf5KcXoTIsQSpzXx4N28Ja4BQoK7rgXiydbHjx/P25TaQAJEGAguWy0+2Q8PD6/Ki4R8EVl+bzBOnZY95fq9rj9zAkTI2SxdidBHqG9+skdw43borCXO/ZcJdraPWdv22uIEiLA4q7nvvCug8WTqzQveOH26fodo7g6uFe/a17W3+nFBAkRYENRdb1vkkz1CH9cPsVy/jrhr27PqMYvENYNlHAIesRiBYwRy0V+8iXP8+/fvX11Mr7L7ECueb/r48eMqm7FuI2BGWDEG8cm+7G3NEOfmdcTQw4h9/55lhm7DekRYKQPZF2ArbXTAyu4kDYB2YxUzwg0gi/41ztHnfQG26HbGel/crVrm7tNY+/1btkOEAZ2M05r4FB7r9GbAIdxaZYrHdOsgJ/wCEQY0J74TmOKnbxxT9n3FgGGWWsVdowHtjt9Nnvf7yQM2aZU/TIAIAxrw6dOnAWtZZcoEnBpNuTuObWMEiLAx1HY0ZQJEmHJ3HNvGCBBhY6jtaMoEiJB0Z29vL6ls58vxPcO8/zfrdo5qvKO+d3Fx8Wu8zf1dW4p/cPzLly/dtv9Ts/EbcvGAHhHyfBIhZ6NSiIBTo0LNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiECRCjUbEPNCRAhZ6NSiAARCjXbUHMCRMjZqBQiQIRCzTbUnAARcjYqhQgQoVCzDTUnQIScjUohAkQo1GxDzQkQIWejUogAEQo121BzAkTI2agUIkCEQs021JwAEXI2KoUIEKFQsw01J0CEnI1KIQJEKNRsQ80JECFno1KIABEKNdtQcwJEyNmoFCJAhELNNtScABFyNiqFCBChULMNNSdAhJyNSiEC/wGgKKC4YMA4TAAAAABJRU5ErkJggg==\"\n />\n);\n\nexport default App;\n";},"9c78f34a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("53187b57");var o="import React, { useState } from 'react';\nimport { Col, Row, Slider } from 'antd';\n\nconst gutters: Record<PropertyKey, number> = {};\nconst vgutters: Record<PropertyKey, number> = {};\nconst colCounts: Record<PropertyKey, number> = {};\n\n[8, 16, 24, 32, 40, 48].forEach((value, i) => {\n gutters[i] = value;\n});\n[8, 16, 24, 32, 40, 48].forEach((value, i) => {\n vgutters[i] = value;\n});\n[2, 3, 4, 6, 8, 12].forEach((value, i) => {\n colCounts[i] = value;\n});\n\nconst App: React.FC = () => {\n const [gutterKey, setGutterKey] = useState(1);\n const [vgutterKey, setVgutterKey] = useState(1);\n const [colCountKey, setColCountKey] = useState(2);\n\n const cols = [];\n const colCount = colCounts[colCountKey];\n let colCode = '';\n for (let i = 0; i < colCount; i++) {\n cols.push(\n <Col key={i.toString()} span={24 / colCount}>\n <div>Column</div>\n </Col>,\n );\n colCode += ` <Col span={${24 / colCount}} />\\n`;\n }\n\n return (\n <>\n <span>Horizontal Gutter (px): </span>\n <div style={{ width: '50%' }}>\n <Slider\n min={0}\n max={Object.keys(gutters).length - 1}\n value={gutterKey}\n onChange={setGutterKey}\n marks={gutters}\n step={null}\n tooltip={{ formatter: (value) => gutters[value as number] }}\n />\n </div>\n <span>Vertical Gutter (px): </span>\n <div style={{ width: '50%' }}>\n <Slider\n min={0}\n max={Object.keys(vgutters).length - 1}\n value={vgutterKey}\n onChange={setVgutterKey}\n marks={vgutters}\n step={null}\n tooltip={{ formatter: (value) => vgutters[value as number] }}\n />\n </div>\n <span>Column Count:</span>\n <div style={{ width: '50%', marginBottom: 48 }}>\n <Slider\n min={0}\n max={Object.keys(colCounts).length - 1}\n value={colCountKey}\n onChange={setColCountKey}\n marks={colCounts}\n step={null}\n tooltip={{ formatter: (value) => colCounts[value as number] }}\n />\n </div>\n <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>\n {cols}\n {cols}\n </Row>\n Another Row:\n <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>{cols}</Row>\n <pre className=\"demo-code\">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\\n${colCode}\\n${colCode}</Row>`}</pre>\n <pre className=\"demo-code\">{`<Row gutter={[${gutters[gutterKey]}, ${vgutters[vgutterKey]}]}>\\n${colCode}</Row>`}</pre>\n </>\n );\n};\n\nexport default App;\n";},"9cb53b4f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("356ea786");var o="import React from 'react';\nimport { Button, message, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [messageApi, contextHolder] = message.useMessage();\n\n const success = () => {\n messageApi.open({\n type: 'success',\n content: 'This is a success message',\n });\n };\n\n const error = () => {\n messageApi.open({\n type: 'error',\n content: 'This is an error message',\n });\n };\n\n const warning = () => {\n messageApi.open({\n type: 'warning',\n content: 'This is a warning message',\n });\n };\n\n return (\n <>\n {contextHolder}\n <Space>\n <Button onClick={success}>Success</Button>\n <Button onClick={error}>Error</Button>\n <Button onClick={warning}>Warning</Button>\n </Space>\n </>\n );\n};\n\nexport default App;\n";},"9cb54c25":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0cc943b2");var o="import React, { useState } from 'react';\nimport { Slider, Typography } from 'antd';\n\nconst { Paragraph } = Typography;\n\nconst App: React.FC = () => {\n const [rows, setRows] = useState(1);\n\n const article =\n \"To be, or not to be, that is the question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life\";\n\n return (\n <>\n <Slider value={rows} min={1} max={10} onChange={setRows} />\n <Paragraph\n ellipsis={{\n rows,\n expandable: true,\n suffix: '--William Shakespeare',\n onEllipsis: (ellipsis) => {\n console.log('Ellipsis changed:', ellipsis);\n },\n }}\n title={`${article}--William Shakespeare`}\n >\n {article}\n </Paragraph>\n </>\n );\n};\n\nexport default App;\n";},"9d260d4f":function(n,e,t){},"9d4034d0":function(n,e,t){},"9d411d6f":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("26412f56");var o="import React, { useState } from 'react';\nimport { Button, ConfigProvider, Drawer, Space } from 'antd';\nimport { createStyles, useTheme } from 'antd-style';\nimport type { DrawerClassNames, DrawerStyles } from 'antd/es/drawer/DrawerPanel';\n\nconst useStyle = createStyles(({ token }) => ({\n 'my-drawer-body': {\n background: token.blue1,\n },\n 'my-drawer-mask': {\n boxShadow: `inset 0 0 15px #fff`,\n },\n 'my-drawer-header': {\n background: token.green1,\n },\n 'my-drawer-footer': {\n color: token.colorPrimary,\n },\n 'my-drawer-content': {\n borderLeft: '2px dotted #333',\n },\n}));\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState([false, false]);\n const { styles } = useStyle();\n const token = useTheme();\n\n const toggleDrawer = (idx: number, target: boolean) => {\n setOpen((p) => {\n p[idx] = target;\n return [...p];\n });\n };\n\n const classNames: DrawerClassNames = {\n body: styles['my-drawer-body'],\n mask: styles['my-drawer-mask'],\n header: styles['my-drawer-header'],\n footer: styles['my-drawer-footer'],\n content: styles['my-drawer-content'],\n };\n\n const drawerStyles: DrawerStyles = {\n mask: {\n backdropFilter: 'blur(10px)',\n },\n content: {\n boxShadow: '-10px 0 10px #666',\n },\n header: {\n borderBottom: `1px solid ${token.colorPrimary}`,\n },\n body: {\n fontSize: token.fontSizeLG,\n },\n footer: {\n borderTop: `1px solid ${token.colorBorder}`,\n },\n };\n\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={() => toggleDrawer(0, true)}>\n Open\n </Button>\n <Button type=\"primary\" onClick={() => toggleDrawer(1, true)}>\n ConfigProvider\n </Button>\n </Space>\n <Drawer\n title=\"Basic Drawer\"\n placement=\"right\"\n footer=\"Footer\"\n onClose={() => toggleDrawer(0, false)}\n open={open[0]}\n classNames={classNames}\n styles={drawerStyles}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n <ConfigProvider\n drawer={{\n classNames,\n styles: drawerStyles,\n }}\n >\n <Drawer\n title=\"Basic Drawer\"\n placement=\"right\"\n footer=\"Footer\"\n onClose={() => toggleDrawer(1, false)}\n open={open[1]}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},"9d568652":function(n,e,t){},"9d635506":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("126c75a7");var o="import React from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { Button, notification } from 'antd';\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotification = () => {\n api.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n icon: <SmileOutlined style={{ color: '#108ee9' }} />,\n });\n };\n\n return (\n <>\n {contextHolder}\n <Button type=\"primary\" onClick={openNotification}>\n Open the notification box\n </Button>\n </>\n );\n};\n\nexport default App;\n";},"9d71179d":function(n,e,t){},"9d7846c6":function(n,e,t){},"9db0e8c2":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("55a5a3c0");var o="import React from 'react';\nimport { HeartOutlined } from '@ant-design/icons';\nimport { Flex, Rate } from 'antd';\n\nconst App: React.FC = () => (\n <Flex vertical gap=\"middle\">\n <Rate character={<HeartOutlined />} allowHalf />\n <Rate character=\"A\" allowHalf style={{ fontSize: 36 }} />\n <Rate character=\"\u597D\" allowHalf />\n </Flex>\n);\n\nexport default App;\n";},"9db5f1e3":function(n,e,t){},"9dcdf535":function(n,e,t){},"9e13634a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("86dbcec5");var o="import React from 'react';\n\nimport useLocale from '../../hooks/useLocale';\nimport SemanticPreview from './SemanticPreview';\n\nexport const locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n 'popup.root': '\u5F39\u51FA\u83DC\u5355\u5143\u7D20',\n },\n en: {\n root: 'Root element',\n 'popup.root': 'Popup element',\n },\n};\n\ninterface BlockProps {\n component: React.ComponentType<any>;\n options?: { value: string; label: string }[];\n defaultValue?: string;\n style?: React.CSSProperties;\n [key: string]: any;\n}\n\nconst Block: React.FC<BlockProps> = ({ component: Component, options, defaultValue, ...props }) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n return (\n <div ref={divRef} style={{ position: 'absolute', marginBottom: 80 }}>\n <Component\n {...props}\n open\n placement=\"bottomLeft\"\n defaultValue={defaultValue}\n getPopupContainer={() => divRef.current}\n options={options}\n styles={{\n popup: { zIndex: 1 },\n }}\n />\n </div>\n );\n};\n\nexport interface SelectSemanticTemplateProps {\n component: React.ComponentType<any>;\n componentName: string;\n defaultValue?: string;\n options?: { value: string; label: string }[];\n height?: number;\n onSearch?: (text: string) => void;\n placeholder?: string;\n style?: React.CSSProperties;\n [key: string]: any;\n}\n\nconst SelectSemanticTemplate: React.FC<SelectSemanticTemplateProps> = ({\n component,\n defaultValue,\n options,\n height,\n style,\n componentName,\n ...restProps\n}) => {\n const [locale] = useLocale(locales);\n\n return (\n <SemanticPreview\n componentName={componentName}\n semantics={[\n { name: 'root', desc: locale.root, version: '5.25.0' },\n { name: 'popup.root', desc: locale['popup.root'], version: '5.25.0' },\n ]}\n height={height}\n >\n <Block\n component={component}\n defaultValue={defaultValue}\n options={options}\n style={style}\n {...restProps}\n />\n </SemanticPreview>\n );\n};\n\nexport default SelectSemanticTemplate;\n";},"9e5252fe":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fd99bc6e");var o="import React from 'react';\nimport { Button, message } from 'antd';\n\nconst App: React.FC = () => {\n const [messageApi, contextHolder] = message.useMessage();\n\n const success = () => {\n messageApi\n .open({\n type: 'loading',\n content: 'Action in progress..',\n duration: 2.5,\n })\n .then(() => message.success('Loading finished', 2.5))\n .then(() => message.info('Loading finished', 2.5));\n };\n\n return (\n <>\n {contextHolder}\n <Button onClick={success}>Display sequential messages</Button>\n </>\n );\n};\n\nexport default App;\n";},"9e592e2d":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ce305767");var o="import React from 'react';\nimport { Checkbox, ConfigProvider } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <ConfigProvider\n theme={{\n components: {\n Checkbox: {\n lineWidth: 6,\n },\n },\n }}\n >\n <Checkbox checked />\n <Checkbox />\n </ConfigProvider>\n <Checkbox checked />\n <Checkbox />\n </>\n);\n\nexport default App;\n";},"9e7244ea":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f7ed2e1f");var o="import React from 'react';\nimport { Input } from 'antd';\n\nconst App: React.FC = () => <Input placeholder=\"Basic usage\" />;\n\nexport default App;\n";},"9e7920c4":function(n,e,t){},"9e8397d2":function(n,e,t){},"9e8dabe4":function(n,e,t){},"9e9e3d1a":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d747d3e6");var o="import React from 'react';\nimport { TimePicker } from 'antd';\n\nimport { PickerSemanticTemplate } from '../../date-picker/demo/_semantic';\n\nconst App: React.FC = () => {\n return (\n <PickerSemanticTemplate\n singleComponent={['TimePicker', TimePicker]}\n multipleComponent={['TimePicker.RangePicker', TimePicker.RangePicker]}\n />\n );\n};\n\nexport default App;\n";},"9eac78a9":function(n,e,t){},"9eae2916":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fa051789");var o="import React from 'react';\nimport { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';\nimport { Card, ConfigProvider } from 'antd';\n\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Card: {\n headerBg: '#e6f4ff',\n bodyPaddingSM: 22,\n headerPaddingSM: 20,\n headerPadding: 18,\n bodyPadding: 26,\n headerFontSize: 20,\n headerFontSizeSM: 20,\n headerHeight: 60,\n headerHeightSM: 60,\n actionsBg: '#e6f4ff',\n actionsLiMargin: `2px 0`,\n tabsMarginBottom: 0,\n extraColor: 'rgba(0,0,0,0.25)',\n },\n },\n }}\n >\n <Card\n title=\"Card title\"\n actions={[\n <SettingOutlined key=\"setting\" />,\n <EditOutlined key=\"edit\" />,\n <EllipsisOutlined key=\"ellipsis\" />,\n ]}\n extra=\"More\"\n tabList={[\n {\n key: 'tab1',\n label: 'tab1',\n },\n {\n key: 'tab2',\n label: 'tab2',\n },\n ]}\n >\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n <Card size=\"small\" title=\"Small size card\" extra={<a href=\"#\">More</a>} style={{ width: 300 }}>\n <p>Card content</p>\n <p>Card content</p>\n <p>Card content</p>\n </Card>\n </ConfigProvider>\n);\n";},"9ed2e865":function(n,e,t){},"9ee52b6e":function(n,e,t){},"9efda530":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f329f517");var o="import React from 'react';\nimport { Carousel } from 'antd';\n\nconst contentStyle: React.CSSProperties = {\n height: '160px',\n color: '#fff',\n lineHeight: '160px',\n textAlign: 'center',\n background: '#364d79',\n};\n\nconst App: React.FC = () => (\n <Carousel effect=\"fade\">\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n);\n\nexport default App;\n";},"9f1c814b":function(n,e,t){},"9f34ca83":function(n,e,t){},"9f57658b":function(n,e,t){},"9f5ee73a":function(n,e,t){},"9f61635c":function(n,e,t){},"9f73cc0c":function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return m;}});var o=t("777fffbe"),a=t("852bbaa9"),r=t("f19d2b93"),i=a._(t("5b220c3d")),l=t("a9d1a279"),s=t("3835a2b7"),c=o._(t("600aabe0")),d=o._(t("714a8bde")),u=o._(t("cd4f0a98"));let p=(0,s.createStyles)(({css:n,token:e})=>({box:n`
|
|
position: relative;
|
|
transition: all ${e.motionDurationSlow};
|
|
`,marginStyle:n`
|
|
max-width: 1208px;
|
|
margin-inline: auto;
|
|
box-sizing: border-box;
|
|
padding-inline: ${e.marginXXL}px;
|
|
`,withoutChildren:n`
|
|
min-height: 300px;
|
|
border-radius: ${e.borderRadiusLG}px;
|
|
background-color: '#e9e9e9';
|
|
`}));var m=n=>{let{id:e,title:t,titleColor:o,description:a,children:m,decoration:f,background:g,collapse:h}=n,b=(0,s.useTheme)(),{styles:y}=p(),{isMobile:v}=i.use(d.default),C=(0,r.jsxs)(r.Fragment,{children:[(0,r.jsxs)("div",{style:{textAlign:"center"},children:[(0,r.jsx)(l.Typography.Title,{id:e,level:1,style:{fontWeight:900,color:o,fontFamily:`AliPuHui, ${b.fontFamily}`,fontSize:v?b.fontSizeHeading2:b.fontSizeHeading1},children:t}),(0,r.jsx)(l.Typography.Paragraph,{style:{color:o,marginBottom:v?b.marginXXL:b.marginFarXS},children:a})]}),(0,r.jsx)("div",{className:(0,c.default)({[y.marginStyle]:!h}),children:m?(0,r.jsx)("div",{children:m}):(0,r.jsx)("div",{className:y.withoutChildren})})]});return(0,r.jsxs)("div",{style:{backgroundColor:g},className:y.box,children:[(0,r.jsx)("div",{style:{position:"absolute",inset:0},children:f}),(0,r.jsx)(u.default,{style:{paddingBlock:b.marginFarSM},children:C})]});};},"9fab4a88":function(n,e,t){},"9fbf2509":function(n,e,t){},"9fe53e6f":function(n,e,t){},a00364bb:function(n,e,t){},a006591d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2e0cdfcc");var o="import React from 'react';\nimport { Steps } from 'antd';\n\nconst description = 'This is a description.';\nconst App: React.FC = () => (\n <Steps\n direction=\"vertical\"\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\n\nexport default App;\n";},a00b1622:function(n,e,t){},a014730a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.e(e,{BannerRecommendsFallback:function(){return f;},default:function(){return g;}});var o=t("777fffbe"),a=t("f19d2b93"),r=o._(t("5b220c3d")),i=t("a9d1a279"),l=t("3835a2b7"),s=o._(t("600aabe0")),c=o._(t("23546486")),d=o._(t("714a8bde")),u=t("b055b5cb");let p=(0,l.createStyles)(({token:n,css:e,cx:t})=>{let{carousel:o}=(0,u.getCarouselStyle)(),a=e`
|
|
display: flex;
|
|
flex: 1 1 0;
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
text-decoration: none;
|
|
background: ${n.colorBgContainer};
|
|
border: ${n.lineWidth}px solid ${n.colorBorderSecondary};
|
|
border-radius: ${n.borderRadiusLG}px;
|
|
transition: all ${n.motionDurationSlow};
|
|
padding-block: ${n.paddingMD}px;
|
|
padding-inline: ${n.paddingLG}px;
|
|
box-sizing: border-box;
|
|
`;return{itemBase:a,ribbon:e`
|
|
& > .${t(a)} {
|
|
height: 100%;
|
|
}
|
|
`,cardItem:e`
|
|
&:hover {
|
|
box-shadow: ${n.boxShadowCard};
|
|
border-color: transparent;
|
|
}
|
|
`,sliderItem:e`
|
|
margin: 0 ${n.margin}px;
|
|
text-align: start;
|
|
`,container:e`
|
|
display: flex;
|
|
width: 100%;
|
|
max-width: 100%;
|
|
margin-inline: auto;
|
|
box-sizing: border-box;
|
|
column-gap: ${2*n.paddingMD}px;
|
|
align-items: stretch;
|
|
text-align: start;
|
|
min-height: 178px;
|
|
> * {
|
|
width: calc((100% - ${2*n.marginXXL}px) / 3);
|
|
}
|
|
`,carousel:o,bannerBg:e`
|
|
height: ${n.fontSize}px;
|
|
`};}),m=({extra:n,index:e,icons:t,className:o})=>{let{styles:r}=p();if(!n)return(0,a.jsx)(i.Skeleton,{},e);let l=t.find(e=>e.name===n.source),c=(0,a.jsxs)("a",{href:n.href,target:"_blank",className:(0,s.default)(r.itemBase,o),rel:"noreferrer",children:[(0,a.jsx)(i.Typography.Title,{level:5,children:null==n?void 0:n.title}),(0,a.jsx)(i.Typography.Paragraph,{type:"secondary",style:{flex:"auto"},children:n.description}),(0,a.jsxs)(i.Flex,{justify:"space-between",align:"center",children:[(0,a.jsx)(i.Typography.Text,{children:n.date}),l&&(0,a.jsx)("img",{src:l.href,draggable:!1,className:r.bannerBg,alt:"banner"})]})]},null==n?void 0:n.title);return 0===e?(0,a.jsx)(i.Badge.Ribbon,{text:"HOT",color:"red",rootClassName:r.ribbon,children:c}):c;},f=()=>{let{isMobile:n}=r.default.use(d.default),{styles:e}=p(),t=Array.from({length:3});return n?(0,a.jsx)(i.Carousel,{className:e.carousel,children:t.map((n,t)=>(0,a.jsx)("div",{className:e.itemBase,children:(0,a.jsx)(i.Skeleton,{active:!0,style:{padding:"0 24px"}})},t))}):(0,a.jsx)("div",{className:e.container,children:t.map((n,t)=>(0,a.jsx)("div",{className:e.itemBase,children:(0,a.jsx)(i.Skeleton,{active:!0})},t))});};var g=()=>{var n;let{styles:e}=p(),[,t]=(0,c.default)(),{isMobile:o}=r.default.use(d.default),l=(0,u.useSiteData)(),s=null==l?void 0:null===(n=l.extras)||void 0===n?void 0:n[t],g=(null==l?void 0:l.icons)||[],h=s&&0!==s.length?s.slice(0,3):Array.from({length:3});return l?o?(0,a.jsx)(i.Carousel,{className:e.carousel,children:h.map((n,t)=>(0,a.jsx)("div",{children:(0,a.jsx)(m,{extra:n,index:t,icons:g,className:e.sliderItem})},t))}):(0,a.jsx)("div",{className:e.container,children:h.map((n,t)=>(0,a.jsx)(m,{extra:n,index:t,icons:g,className:e.cardItem},t))}):(0,a.jsx)(f,{});};},a0159d79:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7df65db8");var o="import React, { useState } from 'react';\nimport { Button, Drawer } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showDrawer}>\n Open\n </Button>\n <Drawer\n title=\"Basic Drawer\"\n closable={{ 'aria-label': 'Close Button' }}\n onClose={onClose}\n open={open}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n";},a068abcd:function(n,e,t){},a0aa3acc:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("37e007c8");var o="import React, { useState } from 'react';\nimport { Switch, Typography } from 'antd';\n\nconst { Paragraph, Text } = Typography;\n\nconst App: React.FC = () => {\n const [ellipsis, setEllipsis] = useState(true);\n\n return (\n <>\n <Switch\n checked={ellipsis}\n onChange={() => {\n setEllipsis(!ellipsis);\n }}\n />\n\n <Paragraph ellipsis={ellipsis}>\n Ant Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team.\n </Paragraph>\n\n <Paragraph ellipsis={ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false}>\n Ant Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team. Ant\n Design, a design language for background applications, is refined by Ant UED Team.\n </Paragraph>\n\n <Text\n style={ellipsis ? { width: 200 } : undefined}\n ellipsis={ellipsis ? { tooltip: 'I am ellipsis now!' } : false}\n >\n Ant Design, a design language for background applications, is refined by Ant UED Team.\n </Text>\n\n <Text\n code\n style={ellipsis ? { width: 200 } : undefined}\n ellipsis={ellipsis ? { tooltip: 'I am ellipsis now!' } : false}\n >\n Ant Design, a design language for background applications, is refined by Ant UED Team.\n </Text>\n </>\n );\n};\n\nexport default App;\n";},a0f7c627:function(n,e,t){},a0fb7dae:function(n,e,t){},a12099a4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("05af7948");var o='import React from \'react\';\nimport { Divider, Typography } from \'antd\';\n\nconst { Title, Paragraph, Text, Link } = Typography;\n\nconst blockContent = `AntV \u662F\u8682\u8681\u96C6\u56E2\u5168\u65B0\u4E00\u4EE3\u6570\u636E\u53EF\u89C6\u5316\u89E3\u51B3\u65B9\u6848\uFF0C\u81F4\u529B\u4E8E\u63D0\u4F9B\u4E00\u5957\u7B80\u5355\u65B9\u4FBF\u3001\u4E13\u4E1A\u53EF\u9760\u3001\u4E0D\u9650\u53EF\u80FD\u7684\u6570\u636E\u53EF\u89C6\u5316\u6700\u4F73\u5B9E\u8DF5\u3002\u5F97\u76CA\u4E8E\u4E30\u5BCC\u7684\u4E1A\u52A1\u573A\u666F\u548C\u7528\u6237\u9700\u6C42\u6311\u6218\uFF0CAntV \u7ECF\u5386\u591A\u5E74\u79EF\u7D2F\u4E0E\u4E0D\u65AD\u6253\u78E8\uFF0C\u5DF2\u652F\u6491\u6574\u4E2A\u963F\u91CC\u96C6\u56E2\u5185\u5916 20000+ \u4E1A\u52A1\u7CFB\u7EDF\uFF0C\u901A\u8FC7\u4E86\u65E5\u5747\u5343\u4E07\u7EA7 UV \u4EA7\u54C1\u7684\u4E25\u82DB\u8003\u9A8C\u3002\n\u6211\u4EEC\u6B63\u5728\u57FA\u7840\u56FE\u8868\uFF0C\u56FE\u5206\u6790\uFF0C\u56FE\u7F16\u8F91\uFF0C\u5730\u7406\u7A7A\u95F4\u53EF\u89C6\u5316\uFF0C\u667A\u80FD\u53EF\u89C6\u5316\u7B49\u5404\u4E2A\u53EF\u89C6\u5316\u7684\u9886\u57DF\u8015\u8018\uFF0C\u6B22\u8FCE\u540C\u8DEF\u4EBA\u4E00\u8D77\u524D\u884C\u3002`;\n\nconst App: React.FC = () => (\n <Typography>\n <Title>Introduction</Title>\n\n <Paragraph>\n In the process of internal desktop applications development, many different design specs and\n implementations would be involved, which might cause designers and developers difficulties and\n duplication and reduce the efficiency of development.\n </Paragraph>\n\n <Paragraph>\n After massive project practice and summaries, Ant Design, a design language for background\n applications, is refined by Ant UED Team, which aims to{\' \'}\n <Text strong>\n uniform the user interface specs for internal background projects, lower the unnecessary\n cost of design differences and implementation and liberate the resources of design and\n front-end development\n </Text>\n .\n </Paragraph>\n\n <Title level={2}>Guidelines and Resources</Title>\n\n <Paragraph>\n We supply a series of design principles, practical patterns and high quality design resources\n (<Text code>Sketch</Text> and <Text code>Axure</Text>), to help people create their product\n prototypes beautifully and efficiently.\n </Paragraph>\n\n <Paragraph>\n <ul>\n <li>\n <Link href="/docs/spec/proximity">Principles</Link>\n </li>\n <li>\n <Link href="/docs/spec/overview">Patterns</Link>\n </li>\n <li>\n <Link href="/docs/resources">Resource Download</Link>\n </li>\n </ul>\n </Paragraph>\n\n <Paragraph>\n Press <Text keyboard>Esc</Text> to exit...\n </Paragraph>\n\n <Divider />\n\n <Title>\u4ECB\u7ECD</Title>\n\n <Paragraph>\n \u8682\u8681\u7684\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u662F\u4E00\u4E2A\u5E9E\u5927\u4E14\u590D\u6742\u7684\u4F53\u7CFB\u3002\u8FD9\u7C7B\u4EA7\u54C1\u4E0D\u4EC5\u91CF\u7EA7\u5DE8\u5927\u4E14\u529F\u80FD\u590D\u6742\uFF0C\u800C\u4E14\u53D8\u52A8\u548C\u5E76\u53D1\u9891\u7E41\uFF0C\u5E38\u5E38\u9700\u8981\u8BBE\u8BA1\u4E0E\u5F00\u53D1\u80FD\u591F\u5FEB\u901F\u7684\u505A\u51FA\u54CD\u5E94\u3002\u540C\u65F6\u8FD9\u7C7B\u4EA7\u54C1\u4E2D\u6709\u5B58\u5728\u5F88\u591A\u7C7B\u4F3C\u7684\u9875\u9762\u4EE5\u53CA\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u62BD\u8C61\u5F97\u5230\u4E00\u4E9B\u7A33\u5B9A\u4E14\u9AD8\u590D\u7528\u6027\u7684\u5185\u5BB9\u3002\n </Paragraph>\n\n <Paragraph>\n \u968F\u7740\u5546\u4E1A\u5316\u7684\u8D8B\u52BF\uFF0C\u8D8A\u6765\u8D8A\u591A\u7684\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u5BF9\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C\u6709\u4E86\u8FDB\u4E00\u6B65\u7684\u8981\u6C42\u3002\u5E26\u7740\u8FD9\u6837\u7684\u4E00\u4E2A\u7EC8\u6781\u76EE\u6807\uFF0C\u6211\u4EEC\uFF08\u8682\u8681\u96C6\u56E2\u4F53\u9A8C\u6280\u672F\u90E8\uFF09\u7ECF\u8FC7\u5927\u91CF\u7684\u9879\u76EE\u5B9E\u8DF5\u548C\u603B\u7ED3\uFF0C\u9010\u6B65\u6253\u78E8\u51FA\u4E00\u4E2A\u670D\u52A1\u4E8E\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u7684\u8BBE\u8BA1\u4F53\u7CFB\n Ant Design\u3002\u57FA\u4E8E<Text mark>\u300E\u786E\u5B9A\u300F\u548C\u300E\u81EA\u7136\u300F</Text>\n \u7684\u8BBE\u8BA1\u4EF7\u503C\u89C2\uFF0C\u901A\u8FC7\u6A21\u5757\u5316\u7684\u89E3\u51B3\u65B9\u6848\uFF0C\u964D\u4F4E\u5197\u4F59\u7684\u751F\u4EA7\u6210\u672C\uFF0C\u8BA9\u8BBE\u8BA1\u8005\u4E13\u6CE8\u4E8E\n <Text strong>\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C</Text>\u3002\n </Paragraph>\n\n <Title level={2}>\u8BBE\u8BA1\u8D44\u6E90</Title>\n\n <Paragraph>\n \u6211\u4EEC\u63D0\u4F9B\u5B8C\u5584\u7684\u8BBE\u8BA1\u539F\u5219\u3001\u6700\u4F73\u5B9E\u8DF5\u548C\u8BBE\u8BA1\u8D44\u6E90\u6587\u4EF6\uFF08<Text code>Sketch</Text> \u548C\n <Text code>Axure</Text>\uFF09\uFF0C\u6765\u5E2E\u52A9\u4E1A\u52A1\u5FEB\u901F\u8BBE\u8BA1\u51FA\u9AD8\u8D28\u91CF\u7684\u4EA7\u54C1\u539F\u578B\u3002\n </Paragraph>\n\n <Paragraph>\n <ul>\n <li>\n <Link href="/docs/spec/proximity-cn">\u8BBE\u8BA1\u539F\u5219</Link>\n </li>\n <li>\n <Link href="/docs/spec/overview-cn">\u8BBE\u8BA1\u6A21\u5F0F</Link>\n </li>\n <li>\n <Link href="/docs/resources-cn">\u8BBE\u8BA1\u8D44\u6E90</Link>\n </li>\n </ul>\n </Paragraph>\n\n <Paragraph>\n <blockquote>{blockContent}</blockquote>\n <pre>{blockContent}</pre>\n </Paragraph>\n\n <Paragraph>\n \u6309<Text keyboard>Esc</Text>\u952E\u9000\u51FA\u9605\u8BFB\u2026\u2026\n </Paragraph>\n </Typography>\n);\n\nexport default App;\n';},a19aaa48:function(n,e,t){},a1c538c3:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dcc1b873");var o='import React from \'react\';\nimport { Button, Card, Flex, Typography } from \'antd\';\n\nconst cardStyle: React.CSSProperties = {\n width: 620,\n};\n\nconst imgStyle: React.CSSProperties = {\n display: \'block\',\n width: 273,\n};\n\nconst App: React.FC = () => (\n <Card hoverable style={cardStyle} styles={{ body: { padding: 0, overflow: \'hidden\' } }}>\n <Flex justify="space-between">\n <img\n alt="avatar"\n src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"\n style={imgStyle}\n />\n <Flex vertical align="flex-end" justify="space-between" style={{ padding: 32 }}>\n <Typography.Title level={3}>\n \u201Cantd is an enterprise-class UI design language and React UI library.\u201D\n </Typography.Title>\n <Button type="primary" href="https://ant.design" target="_blank">\n Get Started\n </Button>\n </Flex>\n </Flex>\n </Card>\n);\n\nexport default App;\n';},a21960ed:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("00aa5115");var o='import React, { useState } from \'react\';\nimport { Button, Drawer, Radio, Space } from \'antd\';\nimport type { DrawerProps, RadioChangeEvent } from \'antd\';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [placement, setPlacement] = useState<DrawerProps[\'placement\']>(\'right\');\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onChange = (e: RadioChangeEvent) => {\n setPlacement(e.target.value);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n return (\n <>\n <Space>\n <Radio.Group value={placement} onChange={onChange}>\n <Radio value="top">top</Radio>\n <Radio value="right">right</Radio>\n <Radio value="bottom">bottom</Radio>\n <Radio value="left">left</Radio>\n </Radio.Group>\n <Button type="primary" onClick={showDrawer}>\n Open\n </Button>\n </Space>\n <Drawer\n title="Drawer with extra actions"\n placement={placement}\n width={500}\n onClose={onClose}\n open={open}\n extra={\n <Space>\n <Button onClick={onClose}>Cancel</Button>\n <Button type="primary" onClick={onClose}>\n OK\n </Button>\n </Space>\n }\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n';},a2ef1103:function(n,e,t){},a37d4718:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6a020bfe");var o="import React from 'react';\nimport { Slider } from 'antd';\n\nconst App: React.FC = () => <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />;\n\nexport default App;\n";},a3b7d55e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5413bb30");var o='import React from \'react\';\nimport { Popover } from \'antd\';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPopover } = Popover;\n\nconst content = (\n <div>\n <p>Content</p>\n <p>Content</p>\n </div>\n);\n\nconst App: React.FC = () => (\n <>\n <InternalPopover content={content} title="Title" />\n <InternalPopover\n content={content}\n title="Title"\n placement="bottomLeft"\n style={{ width: 250 }}\n />\n </>\n);\n\nexport default App;\n';},a3bd400c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("797d711c");var o="import React, { useRef, useState } from 'react';\nimport { Button, Tour } from 'antd';\nimport type { TourProps } from 'antd';\n\nconst App: React.FC = () => {\n const ref = useRef(null);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const steps: TourProps['steps'] = [\n {\n title: 'Center',\n description: 'Displayed in the center of screen.',\n target: null,\n },\n {\n title: 'Right',\n description: 'On the right of target.',\n placement: 'right',\n target: () => ref.current,\n },\n {\n title: 'Top',\n description: 'On the top of target.',\n placement: 'top',\n target: () => ref.current,\n },\n ];\n\n return (\n <>\n <Button type=\"primary\" onClick={() => setOpen(true)} ref={ref}>\n Begin Tour\n </Button>\n\n <Tour open={open} onClose={() => setOpen(false)} steps={steps} />\n </>\n );\n};\n\nexport default App;\n";},a3d831de:function(n,e,t){},a3f7f3d9:function(n,e,t){},a412d087:function(n,e,t){},a48c871d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("093fb432");var o="import React, { useState } from 'react';\nimport { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps, MenuTheme } from 'antd';\nimport { Menu, Switch } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n key: 'sub1',\n label: 'Navigation One',\n icon: <MailOutlined />,\n children: [\n { key: '1', label: 'Option 1' },\n { key: '2', label: 'Option 2' },\n { key: '3', label: 'Option 3' },\n { key: '4', label: 'Option 4' },\n ],\n },\n {\n key: 'sub2',\n label: 'Navigation Two',\n icon: <AppstoreOutlined />,\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n {\n key: 'sub3',\n label: 'Submenu',\n children: [\n { key: '7', label: 'Option 7' },\n { key: '8', label: 'Option 8' },\n ],\n },\n ],\n },\n {\n key: 'sub4',\n label: 'Navigation Three',\n icon: <SettingOutlined />,\n children: [\n { key: '9', label: 'Option 9' },\n { key: '10', label: 'Option 10' },\n { key: '11', label: 'Option 11' },\n { key: '12', label: 'Option 12' },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [theme, setTheme] = useState<MenuTheme>('dark');\n const [current, setCurrent] = useState('1');\n\n const changeTheme = (value: boolean) => {\n setTheme(value ? 'dark' : 'light');\n };\n\n const onClick: MenuProps['onClick'] = (e) => {\n console.log('click ', e);\n setCurrent(e.key);\n };\n\n return (\n <>\n <Switch\n checked={theme === 'dark'}\n onChange={changeTheme}\n checkedChildren=\"Dark\"\n unCheckedChildren=\"Light\"\n />\n <br />\n <br />\n <Menu\n theme={theme}\n onClick={onClick}\n style={{ width: 256 }}\n defaultOpenKeys={['sub1']}\n selectedKeys={[current]}\n mode=\"inline\"\n items={items}\n />\n </>\n );\n};\n\nexport default App;\n";},a4925229:function(n,e,t){},a495f53f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1110c9c4");var o="import React from 'react';\nimport { DatePicker, Space } from 'antd';\n\nconst { RangePicker } = DatePicker;\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <RangePicker />\n <RangePicker showTime />\n <RangePicker picker=\"week\" />\n <RangePicker picker=\"month\" />\n <RangePicker picker=\"quarter\" />\n <RangePicker\n picker=\"year\"\n id={{\n start: 'startInput',\n end: 'endInput',\n }}\n onFocus={(_, info) => {\n console.log('Focus:', info.range);\n }}\n onBlur={(_, info) => {\n console.log('Blur:', info.range);\n }}\n />\n </Space>\n);\n\nexport default App;\n";},a4d7d998:function(n,e,t){},a5165518:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a00b1622");var o="import React from 'react';\nimport { Collapse, ConfigProvider } from 'antd';\n/** Test usage. Do not use in your production. */\nimport type { CollapseProps } from 'antd';\n\nconst text = `Ant Design! `.repeat(26);\n\nconst items: CollapseProps['items'] = [\n { key: '1', label: `This is panel header 1, (${text})`, children: text },\n { key: '2', label: `This is panel header 2, (${text})`, children: text },\n { key: '3', label: `This is panel header 3, (${text})`, children: text },\n];\n\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Collapse: {\n headerPadding: '0px 10px 20px 30px',\n headerBg: '#eaeeff',\n contentPadding: '0px 10px 20px 30px',\n contentBg: '#e6f7ff',\n },\n },\n }}\n >\n <Collapse items={items} />\n </ConfigProvider>\n);\n";},a54a22bf:function(n,e,t){},a555fe4d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fd61fa80");var o="import React from 'react';\nimport { ClockCircleOutlined } from '@ant-design/icons';\nimport { Timeline } from 'antd';\n\nconst App: React.FC = () => (\n <Timeline\n mode=\"right\"\n items={[\n {\n children: 'Create a services site 2015-09-01',\n },\n {\n children: 'Solve initial network problems 2015-09-01',\n },\n {\n dot: <ClockCircleOutlined style={{ fontSize: '16px' }} />,\n color: 'red',\n children: 'Technical testing 2015-09-01',\n },\n {\n children: 'Network problems being solved 2015-09-01',\n },\n ]}\n />\n);\n\nexport default App;\n";},a5668354:function(n,e,t){},a576ddd4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.e(e,{PickerSemanticTemplate:function(){return p;},default:function(){return m;}});var o=t("777fffbe"),a=t("f19d2b93"),r=o._(t("5b220c3d")),i=t("e22febe0"),l=t("a9d1a279"),s=o._(t("f4312251")),c=o._(t("23546486"));let d={cn:{root:"\u6839\u5143\u7D20","popup.root":"\u5F39\u51FA\u6846\u6839\u5143\u7D20"},en:{root:"Root element","popup.root":"Popup root element"}},u=n=>{let{singleComponent:e,multipleComponent:t,type:o,setType:s,...c}=n,d=r.default.useRef(null),u={...c,prefix:(0,a.jsx)(i.SmileOutlined,{}),zIndex:1,open:!0,getPopupContainer:()=>d.current,needConfirm:!0,styles:{popup:{root:{zIndex:1}}}},p="Single"===o?(0,a.jsx)(e,{...u}):(0,a.jsx)(t,{...u});return(0,a.jsxs)(l.Flex,{vertical:!0,ref:d,style:{alignSelf:"flex-start"},gap:"middle",align:"center",children:[(0,a.jsx)(l.Segmented,{options:["Single","Multiple"],value:o,onChange:s}),p]});};function p(n){let{singleComponent:e,multipleComponent:t,ignoreSemantics:o=[]}=n,[i,l]=r.default.useState("Single"),[p]=(0,c.default)(d);return(0,a.jsx)(s.default,{componentName:"Single"===i?e[0]:t[0],height:500,semantics:[{name:"root",desc:p.root,version:"5.25.0"},{name:"popup.root",desc:p["popup.root"],version:"5.25.0"}].filter(n=>!o.includes(n.name)),children:(0,a.jsx)(u,{singleComponent:e[1],multipleComponent:t[1],type:i,setType:l})});}var m=()=>(0,a.jsx)(p,{singleComponent:["DatePicker",l.DatePicker],multipleComponent:["DatePicker.RangePicker",l.DatePicker.RangePicker]});},a5777f2d:function(n,e,t){},a5882dd4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("70492669");var o='import React from \'react\';\nimport { CommentOutlined, CustomerServiceOutlined } from \'@ant-design/icons\';\nimport { FloatButton } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <FloatButton.Group\n trigger="click"\n type="primary"\n style={{ insetInlineEnd: 24 }}\n icon={<CustomerServiceOutlined />}\n >\n <FloatButton />\n <FloatButton icon={<CommentOutlined />} />\n </FloatButton.Group>\n <FloatButton.Group\n trigger="hover"\n type="primary"\n style={{ insetInlineEnd: 94 }}\n icon={<CustomerServiceOutlined />}\n >\n <FloatButton />\n <FloatButton icon={<CommentOutlined />} />\n </FloatButton.Group>\n </>\n);\n\nexport default App;\n';},a5aaa80f:function(n,e,t){},a5d21675:function(n,e,t){},a5ec73c1:function(n,e,t){},a5ee2ee8:function(n,e,t){},a625ad20:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("026f22db");var o="import React from 'react';\nimport { AppstoreOutlined, DownOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nfunction getItem(\n label: React.ReactNode,\n key: React.Key,\n icon?: React.ReactNode,\n children?: MenuItem[],\n type?: 'group',\n): MenuItem {\n return {\n key,\n icon,\n children,\n label,\n type,\n } as MenuItem;\n}\n\nconst items: MenuItem[] = [\n getItem(\n 'Item Group',\n 'group',\n null,\n [getItem('Option 0', '01'), getItem('Option 0', '02')],\n 'group',\n ),\n getItem('Navigation One', 'sub1', <MailOutlined />, [\n getItem('Item 1', 'g1', null, [getItem('Option 1', '1'), getItem('Option 2', '2')], 'group'),\n getItem('Item 2', 'g2', null, [getItem('Option 3', '3'), getItem('Option 4', '4')], 'group'),\n ]),\n getItem('Navigation Two', 'sub2', <AppstoreOutlined />, [\n getItem('Option 5', '5'),\n getItem('Option 6', '6'),\n getItem('Submenu', 'sub3', null, [getItem('Option 7', '7'), getItem('Option 8', '8')]),\n ]),\n getItem('Navigation Three', 'sub4', <SettingOutlined />, [\n getItem('Option 9', '9'),\n getItem('Option 10', '10'),\n getItem('Option 11', '11'),\n getItem('Option 12', '12'),\n ]),\n // Not crash\n null as any,\n];\n\nconst App: React.FC = () => (\n <Dropdown\n menu={{\n items,\n selectedKeys: ['1'],\n openKeys: ['sub1'],\n }}\n >\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Hover to check menu style\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n);\n\nexport default App;\n";},a651d3dd:function(n,e,t){},a65a2a18:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c78df6e4");var o="import React from 'react';\nimport { Badge, Radio } from 'antd';\n\nconst App: React.FC = () => (\n <Radio.Group buttonStyle=\"solid\">\n <Badge count={1}>\n <Radio.Button value={1}>Click Me</Radio.Button>\n </Badge>\n <Badge count={2}>\n <Radio.Button value={2}>Not Me</Radio.Button>\n </Badge>\n </Radio.Group>\n);\n\nexport default App;\n";},a6b5fa0a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cb46b507");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string | number;\n label: string;\n children?: Option[];\n disableCheckbox?: boolean;\n}\n\nconst options: Option[] = [\n {\n label: 'Light',\n value: 'light',\n children: Array.from({ length: 20 }).map((_, index) => ({\n label: `Number ${index}`,\n value: index,\n })),\n },\n {\n label: 'Bamboo',\n value: 'bamboo',\n children: [\n {\n label: 'Little',\n value: 'little',\n children: [\n {\n label: 'Toy Fish',\n value: 'fish',\n disableCheckbox: true,\n },\n {\n label: 'Toy Cards',\n value: 'cards',\n },\n {\n label: 'Toy Bird',\n value: 'bird',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => (\n <Cascader\n style={{ width: '100%' }}\n options={options}\n onChange={onChange}\n multiple\n maxTagCount=\"responsive\"\n />\n);\n\nexport default App;\n";},a6e7809e:function(n,e,t){},a70f61aa:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("89b66867");var o="import React from 'react';\nimport { Descriptions } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst items: DescriptionsProps['items'] = [\n {\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n label: 'Billing',\n children: 'Prepaid',\n },\n {\n label: 'Time',\n children: '18:00:00',\n },\n {\n label: 'Amount',\n children: '$80.00',\n },\n {\n label: 'Discount',\n span: { xl: 2, xxl: 2 },\n children: '$20.00',\n },\n {\n label: 'Official',\n span: { xl: 2, xxl: 2 },\n children: '$60.00',\n },\n {\n label: 'Config Info',\n span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },\n children: (\n <>\n Data disk type: MongoDB\n <br />\n Database version: 3.4\n <br />\n Package: dds.mongo.mid\n </>\n ),\n },\n {\n label: 'Hardware Info',\n span: { xs: 1, sm: 2, md: 3, lg: 3, xl: 2, xxl: 2 },\n children: (\n <>\n CPU: 6 Core 3.5 GHz\n <br />\n Storage space: 10 GB\n <br />\n Replication factor: 3\n <br />\n Region: East China 1\n </>\n ),\n },\n];\n\nconst App: React.FC = () => (\n <Descriptions\n title=\"Responsive Descriptions\"\n bordered\n column={{ xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}\n items={items}\n />\n);\n\nexport default App;\n";},a72fc5fe:function(n,e,t){},a7688432:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("29b35957");var o='import React from \'react\';\nimport { Flex, Transfer } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="middle" vertical>\n <Transfer status="error" />\n <Transfer status="warning" showSearch />\n </Flex>\n);\n\nexport default App;\n';},a7736470:function(n,e,t){},a78d566b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e60bc177");var o='import React, { useState } from \'react\';\nimport {\n DownloadOutlined,\n LeftOutlined,\n MinusOutlined,\n PlusOutlined,\n RightOutlined,\n SearchOutlined as SearchIcon,\n SmileOutlined,\n} from \'@ant-design/icons\';\nimport type { ConfigProviderProps, RadioChangeEvent } from \'antd\';\nimport {\n Badge,\n Button,\n Cascader,\n Col,\n ConfigProvider,\n Divider,\n Input,\n InputNumber,\n Modal,\n Pagination,\n Radio,\n Rate,\n Row,\n Select,\n Space,\n Steps,\n Switch,\n Tree,\n TreeSelect,\n} from \'antd\';\n\ntype DirectionType = ConfigProviderProps[\'direction\'];\n\nconst InputGroup = Input.Group;\nconst ButtonGroup = Button.Group;\n\nconst { Option } = Select;\nconst { TreeNode } = Tree;\nconst { Search } = Input;\n\nconst cascaderOptions = [\n {\n value: \'tehran\',\n label: \'\u062A\u0647\u0631\u0627\u0646\',\n children: [\n {\n value: \'tehran-c\',\n label: \'\u062A\u0647\u0631\u0627\u0646\',\n children: [\n {\n value: \'saadat-abad\',\n label: \'\u0633\u0639\u0627\u062F\u062A \u0622\u06CC\u0627\u062F\',\n },\n ],\n },\n ],\n },\n {\n value: \'ardabil\',\n label: \'\u0627\u0631\u062F\u0628\u06CC\u0644\',\n children: [\n {\n value: \'ardabil-c\',\n label: \'\u0627\u0631\u062F\u0628\u06CC\u0644\',\n children: [\n {\n value: \'primadar\',\n label: \'\u067E\u06CC\u0631\u0645\u0627\u062F\u0631\',\n },\n ],\n },\n ],\n },\n {\n value: \'gilan\',\n label: \'\u06AF\u06CC\u0644\u0627\u0646\',\n children: [\n {\n value: \'rasht\',\n label: \'\u0631\u0634\u062A\',\n children: [\n {\n value: \'district-3\',\n label: \'\u0645\u0646\u0637\u0642\u0647 \u06F3\',\n },\n ],\n },\n ],\n },\n];\n\ntype Placement = \'bottomLeft\' | \'bottomRight\' | \'topLeft\' | \'topRight\';\n\nconst Page: React.FC<{ placement: Placement }> = ({ placement }) => {\n const [currentStep, setCurrentStep] = useState(0);\n const [modalOpen, setModalOpen] = useState(false);\n const [badgeCount, setBadgeCount] = useState(5);\n const [showBadge, setShowBadge] = useState(true);\n\n const selectBefore = (\n <Select defaultValue="Http://" style={{ width: 90 }}>\n <Option value="Http://">Http://</Option>\n <Option value="Https://">Https://</Option>\n </Select>\n );\n\n const selectAfter = (\n <Select defaultValue=".com" style={{ width: 80 }}>\n <Option value=".com">.com</Option>\n <Option value=".jp">.jp</Option>\n <Option value=".cn">.cn</Option>\n <Option value=".org">.org</Option>\n </Select>\n );\n\n // ==== Cascader ====\n const cascaderFilter = (inputValue: string, path: { label: string }[]) =>\n path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));\n\n const onCascaderChange = (value: any) => {\n console.log(value);\n };\n // ==== End Cascader ====\n\n // ==== Modal ====\n const showModal = () => {\n setModalOpen(true);\n };\n\n const handleOk = (e: React.MouseEvent<HTMLElement>) => {\n console.log(e);\n setModalOpen(false);\n };\n\n const handleCancel = (e: React.MouseEvent<HTMLElement>) => {\n console.log(e);\n setModalOpen(false);\n };\n\n // ==== End Modal ====\n const onStepsChange = (newCurrentStep: number) => {\n console.log(\'onChange:\', newCurrentStep);\n setCurrentStep(newCurrentStep);\n };\n\n // ==== Badge ====\n const increaseBadge = () => {\n setBadgeCount(badgeCount + 1);\n };\n\n const declineBadge = () => {\n setBadgeCount((prev) => (prev - 1 < 0 ? 0 : prev - 1));\n };\n\n const onChangeBadge = (checked: boolean) => {\n setShowBadge(checked);\n };\n // ==== End Badge ====\n\n return (\n <div className="direction-components">\n <Row>\n <Col span={24}>\n <Divider orientation="left">Cascader example</Divider>\n <Cascader\n suffixIcon={<SearchIcon />}\n options={cascaderOptions}\n onChange={onCascaderChange}\n placeholder="\u06CC\u06A9 \u0645\u0648\u0631\u062F \u0627\u0646\u062A\u062E\u0627\u0628 \u06A9\u0646\u06CC\u062F"\n placement={placement}\n />\n With search: \n <Cascader\n suffixIcon={<SmileOutlined />}\n options={cascaderOptions}\n onChange={onCascaderChange}\n placeholder="Select an item"\n placement={placement}\n showSearch={{ filter: cascaderFilter }}\n />\n </Col>\n </Row>\n <br />\n <Row>\n <Col span={12}>\n <Divider orientation="left">Switch example</Divider>\n \n <Switch defaultChecked />\n \n <Switch loading defaultChecked />\n \n <Switch size="small" loading />\n </Col>\n <Col span={12}>\n <Divider orientation="left">Radio Group example</Divider>\n <Radio.Group defaultValue="c" buttonStyle="solid">\n <Radio.Button value="a">\u062A\u0647\u0631\u0627\u0646</Radio.Button>\n <Radio.Button value="b" disabled>\n \u0627\u0635\u0641\u0647\u0627\u0646\n </Radio.Button>\n <Radio.Button value="c">\u0641\u0627\u0631\u0633</Radio.Button>\n <Radio.Button value="d">\u062E\u0648\u0632\u0633\u062A\u0627\u0646</Radio.Button>\n </Radio.Group>\n </Col>\n </Row>\n <br />\n <Row>\n <Col span={12}>\n <Divider orientation="left">Button example</Divider>\n <div className="button-demo">\n <Button type="primary" icon={<DownloadOutlined />} />\n <Button type="primary" shape="circle" icon={<DownloadOutlined />} />\n <Button type="primary" shape="round" icon={<DownloadOutlined />} />\n <Button type="primary" shape="round" icon={<DownloadOutlined />}>\n Download\n </Button>\n <Button type="primary" icon={<DownloadOutlined />}>\n Download\n </Button>\n <br />\n <Button.Group>\n <Button type="primary">\n <LeftOutlined />\n Backward\n </Button>\n <Button type="primary">\n Forward\n <RightOutlined />\n </Button>\n </Button.Group>\n <Button type="primary" loading>\n Loading\n </Button>\n <Button type="primary" size="small" loading>\n Loading\n </Button>\n </div>\n </Col>\n <Col span={12}>\n <Divider orientation="left">Tree example</Divider>\n <Tree\n showLine\n checkable\n defaultExpandedKeys={[\'0-0-0\', \'0-0-1\']}\n defaultSelectedKeys={[\'0-0-0\', \'0-0-1\']}\n defaultCheckedKeys={[\'0-0-0\', \'0-0-1\']}\n >\n <TreeNode title="parent 1" key="0-0">\n <TreeNode title="parent 1-0" key="0-0-0" disabled>\n <TreeNode title="leaf" key="0-0-0-0" disableCheckbox />\n <TreeNode title="leaf" key="0-0-0-1" />\n </TreeNode>\n <TreeNode title="parent 1-1" key="0-0-1">\n <TreeNode title={<span style={{ color: \'#1677ff\' }}>sss</span>} key="0-0-1-0" />\n </TreeNode>\n </TreeNode>\n </Tree>\n </Col>\n </Row>\n <br />\n <Row>\n <Col span={24}>\n <Divider orientation="left">Input (Input Group) example</Divider>\n <InputGroup size="large">\n <Row gutter={8}>\n <Col span={5}>\n <Input defaultValue="0571" />\n </Col>\n <Col span={8}>\n <Input defaultValue="26888888" />\n </Col>\n </Row>\n </InputGroup>\n <br />\n <InputGroup compact>\n <Input style={{ width: \'20%\' }} defaultValue="0571" />\n <Input style={{ width: \'30%\' }} defaultValue="26888888" />\n </InputGroup>\n <br />\n <InputGroup compact>\n <Select defaultValue="Option1">\n <Option value="Option1">Option1</Option>\n <Option value="Option2">Option2</Option>\n </Select>\n <Input style={{ width: \'50%\' }} defaultValue="input content" />\n <InputNumber />\n </InputGroup>\n <br />\n <Search placeholder="input search text" enterButton="Search" size="large" />\n <br />\n <br />\n <div style={{ marginBottom: 16 }}>\n <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />\n </div>\n <br />\n <Row>\n <Col span={12}>\n <Divider orientation="left">Select example</Divider>\n <Space wrap>\n <Select mode="multiple" defaultValue="\u0645\u0648\u0631\u0686\u0647" style={{ width: 120 }}>\n <Option value="jack">Jack</Option>\n <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n <Option value="disabled" disabled>\n Disabled\n </Option>\n <Option value="Yiminghe">yiminghe</Option>\n </Select>\n <Select defaultValue="\u0645\u0648\u0631\u0686\u0647" style={{ width: 120 }} disabled>\n <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n </Select>\n <Select defaultValue="\u0645\u0648\u0631\u0686\u0647" style={{ width: 120 }} loading>\n <Option value="\u0645\u0648\u0631\u0686\u0647">\u0645\u0648\u0631\u0686\u0647</Option>\n </Select>\n <Select showSearch style={{ width: 200 }} placeholder="Select a person">\n <Option value="jack">Jack</Option>\n <Option value="\u0633\u0639\u06CC\u062F">\u0633\u0639\u06CC\u062F</Option>\n <Option value="tom">Tom</Option>\n </Select>\n </Space>\n </Col>\n <Col span={12}>\n <Divider orientation="left">TreeSelect example</Divider>\n <TreeSelect\n showSearch\n style={{ width: \'100%\' }}\n dropdownStyle={{ maxHeight: 400, overflow: \'auto\' }}\n placeholder="Please select"\n allowClear\n treeDefaultExpandAll\n >\n <TreeNode title="parent 1" key="0-1">\n <TreeNode title="parent 1-0" key="0-1-1">\n <TreeNode title="my leaf" key="random" />\n <TreeNode title="your leaf" key="random1" />\n </TreeNode>\n <TreeNode title="parent 1-1" key="random2">\n <TreeNode title={<b style={{ color: \'#08c\' }}>sss</b>} key="random3" />\n </TreeNode>\n </TreeNode>\n </TreeSelect>\n </Col>\n </Row>\n <br />\n <Row>\n <Col span={24}>\n <Divider orientation="left">Modal example</Divider>\n <Button type="primary" onClick={showModal}>\n Open Modal\n </Button>\n <Modal title="\u067E\u0646\u0686\u0631\u0647 \u0633\u0627\u062F\u0647" open={modalOpen} onOk={handleOk} onCancel={handleCancel}>\n <p>\u0646\u06AF\u0627\u0634\u062A\u0647\u200C\u0647\u0627\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u06CC\u0646\u062C\u0627 \u0642\u0631\u0627\u0631\u062F\u0647\u06CC\u062F</p>\n <p>\u0646\u06AF\u0627\u0634\u062A\u0647\u200C\u0647\u0627\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u06CC\u0646\u062C\u0627 \u0642\u0631\u0627\u0631\u062F\u0647\u06CC\u062F</p>\n <p>\u0646\u06AF\u0627\u0634\u062A\u0647\u200C\u0647\u0627\u06CC \u062E\u0648\u062F \u0631\u0627 \u0627\u06CC\u0646\u062C\u0627 \u0642\u0631\u0627\u0631\u062F\u0647\u06CC\u062F</p>\n </Modal>\n </Col>\n </Row>\n <br />\n <Row>\n <Col span={24}>\n <Divider orientation="left">Steps example</Divider>\n <Steps\n progressDot\n current={currentStep}\n items={[\n {\n title: \'Finished\',\n description: \'This is a description.\',\n },\n {\n title: \'In Progress\',\n description: \'This is a description.\',\n },\n {\n title: \'Waiting\',\n description: \'This is a description.\',\n },\n ]}\n />\n <br />\n <Steps\n current={currentStep}\n onChange={onStepsChange}\n items={[\n {\n title: \'Step 1\',\n description: \'This is a description.\',\n },\n {\n title: \'Step 2\',\n description: \'This is a description.\',\n },\n {\n title: \'Step 3\',\n description: \'This is a description.\',\n },\n ]}\n />\n </Col>\n </Row>\n <br />\n <Row>\n <Col span={12}>\n <Divider orientation="left">Rate example</Divider>\n <Rate defaultValue={2.5} />\n <br />\n <strong>* Note:</strong> Half star not implemented in RTL direction, it will be\n supported after{\' \'}\n <a href="https://github.com/react-component/rate" target="_blank" rel="noreferrer">\n rc-rate\n </a>{\' \'}\n implement rtl support.\n </Col>\n <Col span={12}>\n <Divider orientation="left">Badge example</Divider>\n <Badge count={badgeCount}>\n <a href="#" className="head-example" />\n </Badge>\n <ButtonGroup>\n <Button onClick={declineBadge}>\n <MinusOutlined />\n </Button>\n <Button onClick={increaseBadge}>\n <PlusOutlined />\n </Button>\n </ButtonGroup>\n <div style={{ marginTop: 12 }}>\n <Badge dot={showBadge}>\n <a href="#" className="head-example" />\n </Badge>\n <Switch onChange={onChangeBadge} checked={showBadge} />\n </div>\n </Col>\n </Row>\n </Col>\n </Row>\n <br />\n <br />\n <Row>\n <Col span={24}>\n <Divider orientation="left">Pagination example</Divider>\n <Pagination showSizeChanger defaultCurrent={3} total={500} />\n </Col>\n </Row>\n <br />\n <Row>\n <Col span={24}>\n <Divider orientation="left">Grid System example</Divider>\n <div className="grid-demo">\n <div className="code-box-demo">\n <p>\n <strong>* Note:</strong> Every calculation in RTL grid system is from right side\n (offset, push, etc.)\n </p>\n <Row>\n <Col span={8}>col-8</Col>\n <Col span={8} offset={8}>\n col-8\n </Col>\n </Row>\n <Row>\n <Col span={6} offset={6}>\n col-6 col-offset-6\n </Col>\n <Col span={6} offset={6}>\n col-6 col-offset-6\n </Col>\n </Row>\n <Row>\n <Col span={12} offset={6}>\n col-12 col-offset-6\n </Col>\n </Row>\n <Row>\n <Col span={18} push={6}>\n col-18 col-push-6\n </Col>\n <Col span={6} pull={18}>\n col-6 col-pull-18\n </Col>\n </Row>\n </div>\n </div>\n </Col>\n </Row>\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [direction, setDirection] = useState<DirectionType>(\'ltr\');\n const [placement, setPlacement] = useState<Placement>(\'bottomLeft\');\n\n const changeDirection = (e: RadioChangeEvent) => {\n const directionValue = e.target.value;\n setDirection(directionValue);\n setPlacement(directionValue === \'rtl\' ? \'bottomRight\' : \'bottomLeft\');\n };\n\n return (\n <>\n <div style={{ marginBottom: 16 }}>\n <span style={{ marginInlineEnd: 16 }}>Change direction of components:</span>\n <Radio.Group defaultValue="ltr" onChange={changeDirection}>\n <Radio.Button key="ltr" value="ltr">\n LTR\n </Radio.Button>\n <Radio.Button key="rtl" value="rtl">\n RTL\n </Radio.Button>\n </Radio.Group>\n </div>\n <ConfigProvider direction={direction}>\n <Page placement={placement} />\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n';},a7d13089:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("57fa1310");var o="import React from 'react';\nimport { Avatar, List } from 'antd';\n\nconst data = [\n {\n title: 'Ant Design Title 1',\n },\n {\n title: 'Ant Design Title 2',\n },\n {\n title: 'Ant Design Title 3',\n },\n {\n title: 'Ant Design Title 4',\n },\n];\n\nconst App: React.FC = () => (\n <List\n itemLayout=\"horizontal\"\n dataSource={data}\n renderItem={(item, index) => (\n <List.Item>\n <List.Item.Meta\n avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}\n title={<a href=\"https://ant.design\">{item.title}</a>}\n description=\"Ant Design, a design language for background applications, is refined by Ant UED Team\"\n />\n </List.Item>\n )}\n />\n);\n\nexport default App;\n";},a7f16d96:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5bd3b645");var o="import React from 'react';\nimport { Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <Row>\n <Col xs={2} sm={4} md={6} lg={8} xl={10}>\n Col\n </Col>\n <Col xs={20} sm={16} md={12} lg={8} xl={4}>\n Col\n </Col>\n <Col xs={2} sm={4} md={6} lg={8} xl={10}>\n Col\n </Col>\n </Row>\n);\n\nexport default App;\n";},a7f78e6a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ce088801");var o="import React from 'react';\nimport { Typography } from 'antd';\n\nconst { Title } = Typography;\n\nconst App: React.FC = () => (\n <>\n <Title>h1. Ant Design</Title>\n <Title level={2}>h2. Ant Design</Title>\n <Title level={3}>h3. Ant Design</Title>\n <Title level={4}>h4. Ant Design</Title>\n <Title level={5}>h5. Ant Design</Title>\n </>\n);\n\nexport default App;\n";},a8427aa4:function(n,e,t){},a8517d36:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("64da9e30");var o="import React from 'react';\nimport { Carousel, ConfigProvider } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst contentStyle: React.CSSProperties = {\n margin: 0,\n height: '160px',\n color: '#fff',\n lineHeight: '160px',\n textAlign: 'center',\n background: '#364d79',\n};\n\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Carousel: {\n dotWidth: 50,\n dotHeight: 50,\n dotActiveWidth: 80,\n },\n },\n }}\n >\n <Carousel>\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n </ConfigProvider>\n);\n";},a8a21de1:function(n,e,t){},a8c201c8:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("77aeed82");var o="import React from 'react';\nimport { Space, Table, Tag } from 'antd';\n\nconst { Column, ColumnGroup } = Table;\n\ninterface DataType {\n key: React.Key;\n firstName: string;\n lastName: string;\n age: number;\n address: string;\n tags: string[];\n}\n\nconst data: DataType[] = [\n {\n key: '1',\n firstName: 'John',\n lastName: 'Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n tags: ['nice', 'developer'],\n },\n {\n key: '2',\n firstName: 'Jim',\n lastName: 'Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n tags: ['loser'],\n },\n {\n key: '3',\n firstName: 'Joe',\n lastName: 'Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n tags: ['cool', 'teacher'],\n },\n];\n\nconst App: React.FC = () => (\n <Table<DataType> dataSource={data}>\n <ColumnGroup title=\"Name\">\n <Column title=\"First Name\" dataIndex=\"firstName\" key=\"firstName\" />\n <Column title=\"Last Name\" dataIndex=\"lastName\" key=\"lastName\" />\n </ColumnGroup>\n <Column title=\"Age\" dataIndex=\"age\" key=\"age\" />\n <Column title=\"Address\" dataIndex=\"address\" key=\"address\" />\n <Column\n title=\"Tags\"\n dataIndex=\"tags\"\n key=\"tags\"\n render={(tags: string[]) => (\n <>\n {tags.map((tag) => {\n let color = tag.length > 5 ? 'geekblue' : 'green';\n if (tag === 'loser') {\n color = 'volcano';\n }\n return (\n <Tag color={color} key={tag}>\n {tag.toUpperCase()}\n </Tag>\n );\n })}\n </>\n )}\n />\n <Column\n title=\"Action\"\n key=\"action\"\n render={(_: any, record: DataType) => (\n <Space size=\"middle\">\n <a>Invite {record.lastName}</a>\n <a>Delete</a>\n </Space>\n )}\n />\n </Table>\n);\n\nexport default App;\n";},a8c29f05:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e87e46d3");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent, TabsProps } from 'antd';\nimport { Radio, Tabs } from 'antd';\n\ntype TargetKey = React.MouseEvent | React.KeyboardEvent | string;\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<'small' | 'middle' | 'large'>('small');\n const [activeKey, setActiveKey] = useState('1');\n const [items, setItems] = useState<TabsProps['items']>([\n {\n label: 'Tab 1',\n key: '1',\n children: 'Content of editable tab 1',\n },\n {\n label: 'Tab 2',\n key: '2',\n children: 'Content of editable tab 2',\n },\n {\n label: 'Tab 3',\n key: '3',\n children: 'Content of editable tab 3',\n },\n ]);\n\n const add = () => {\n const newKey = String((items || []).length + 1);\n setItems([\n ...(items || []),\n {\n label: `Tab ${newKey}`,\n key: newKey,\n children: `Content of editable tab ${newKey}`,\n },\n ]);\n setActiveKey(newKey);\n };\n\n const remove = (targetKey: TargetKey) => {\n if (!items) return;\n const targetIndex = items.findIndex((item) => item.key === targetKey);\n const newItems = items.filter((item) => item.key !== targetKey);\n\n if (newItems.length && targetKey === activeKey) {\n const newActiveKey =\n newItems[targetIndex === newItems.length ? targetIndex - 1 : targetIndex].key;\n setActiveKey(newActiveKey);\n }\n\n setItems(newItems);\n };\n\n const onEdit = (targetKey: TargetKey, action: 'add' | 'remove') => {\n if (action === 'add') {\n add();\n } else {\n remove(targetKey);\n }\n };\n\n const onChange = (e: RadioChangeEvent) => {\n setSize(e.target.value);\n };\n\n return (\n <div>\n <Radio.Group value={size} onChange={onChange} style={{ marginBottom: 16 }}>\n <Radio.Button value=\"small\">Small</Radio.Button>\n <Radio.Button value=\"middle\">Middle</Radio.Button>\n <Radio.Button value=\"large\">Large</Radio.Button>\n </Radio.Group>\n <Tabs\n defaultActiveKey=\"1\"\n size={size}\n style={{ marginBottom: 32 }}\n items={Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab ${id}`,\n key: id,\n children: `Content of tab ${id}`,\n };\n })}\n />\n <Tabs\n defaultActiveKey=\"1\"\n type=\"card\"\n size={size}\n style={{ marginBottom: 32 }}\n items={Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Card Tab ${id}`,\n key: id,\n children: `Content of card tab ${id}`,\n };\n })}\n />\n <Tabs\n type=\"editable-card\"\n size={size}\n activeKey={activeKey}\n onChange={setActiveKey}\n onEdit={onEdit}\n items={items}\n />\n </div>\n );\n};\n\nexport default App;\n";},a8d3e582:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7bcbb822");var o='import React from \'react\';\nimport { Button, Form, Input, Select, Space } from \'antd\';\n\nconst { Option } = Select;\n\nconst layout = {\n labelCol: { span: 8 },\n wrapperCol: { span: 16 },\n};\n\nconst tailLayout = {\n wrapperCol: { offset: 8, span: 16 },\n};\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n\n const onGenderChange = (value: string) => {\n switch (value) {\n case \'male\':\n form.setFieldsValue({ note: \'Hi, man!\' });\n break;\n case \'female\':\n form.setFieldsValue({ note: \'Hi, lady!\' });\n break;\n case \'other\':\n form.setFieldsValue({ note: \'Hi there!\' });\n break;\n default:\n }\n };\n\n const onFinish = (values: any) => {\n console.log(values);\n };\n\n const onReset = () => {\n form.resetFields();\n };\n\n const onFill = () => {\n form.setFieldsValue({ note: \'Hello world!\', gender: \'male\' });\n };\n\n return (\n <Form\n {...layout}\n form={form}\n name="control-hooks"\n onFinish={onFinish}\n style={{ maxWidth: 600 }}\n >\n <Form.Item name="note" label="Note" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n <Form.Item name="gender" label="Gender" rules={[{ required: true }]}>\n <Select\n placeholder="Select a option and change input text above"\n onChange={onGenderChange}\n allowClear\n >\n <Option value="male">male</Option>\n <Option value="female">female</Option>\n <Option value="other">other</Option>\n </Select>\n </Form.Item>\n <Form.Item\n noStyle\n shouldUpdate={(prevValues, currentValues) => prevValues.gender !== currentValues.gender}\n >\n {({ getFieldValue }) =>\n getFieldValue(\'gender\') === \'other\' ? (\n <Form.Item name="customizeGender" label="Customize Gender" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n ) : null\n }\n </Form.Item>\n <Form.Item {...tailLayout}>\n <Space>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n <Button htmlType="button" onClick={onReset}>\n Reset\n </Button>\n <Button type="link" htmlType="button" onClick={onFill}>\n Fill form\n </Button>\n </Space>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},a8ebc918:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cb63a126");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\nconst dataSource = Array.from({ length: 200 }).map<DataType>((_, key) => ({\n key,\n name: 'Sample Name',\n age: 30 + (key % 5),\n address: `Sample Address ${key}`,\n}));\n\nconst App: React.FC = () => (\n <div style={{ width: 300 }}>\n <Table<DataType>\n columns={columns}\n dataSource={dataSource}\n size=\"small\"\n pagination={{ defaultCurrent: 13 }}\n />\n </div>\n);\n\nexport default App;\n";},a8f9897e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ef611f74");var o='import React from \'react\';\nimport { Button, ConfigProvider, Flex } from \'antd\';\nimport { useResponsive } from \'antd-style\';\n\nconst App: React.FC = () => {\n const { xxl } = useResponsive();\n\n return (\n <ConfigProvider componentSize={xxl ? \'middle\' : \'small\'}>\n <Flex vertical gap="small">\n <Flex gap="small" wrap>\n <Button color="default" variant="solid">\n Solid\n </Button>\n <Button color="default" variant="outlined">\n Outlined\n </Button>\n <Button color="default" variant="dashed">\n Dashed\n </Button>\n <Button color="default" variant="filled">\n Filled\n </Button>\n <Button color="default" variant="text">\n Text\n </Button>\n <Button color="default" variant="link">\n Link\n </Button>\n </Flex>\n <Flex gap="small" wrap>\n <Button color="primary" variant="solid">\n Solid\n </Button>\n <Button color="primary" variant="outlined">\n Outlined\n </Button>\n <Button color="primary" variant="dashed">\n Dashed\n </Button>\n <Button color="primary" variant="filled">\n Filled\n </Button>\n <Button color="primary" variant="text">\n Text\n </Button>\n <Button color="primary" variant="link">\n Link\n </Button>\n </Flex>\n <Flex gap="small" wrap>\n <Button color="danger" variant="solid">\n Solid\n </Button>\n <Button color="danger" variant="outlined">\n Outlined\n </Button>\n <Button color="danger" variant="dashed">\n Dashed\n </Button>\n <Button color="danger" variant="filled">\n Filled\n </Button>\n <Button color="danger" variant="text">\n Text\n </Button>\n <Button color="danger" variant="link">\n Link\n </Button>\n </Flex>\n <Flex gap="small" wrap>\n <Button color="pink" variant="solid">\n Solid\n </Button>\n <Button color="pink" variant="outlined">\n Outlined\n </Button>\n <Button color="pink" variant="dashed">\n Dashed\n </Button>\n <Button color="pink" variant="filled">\n Filled\n </Button>\n <Button color="pink" variant="text">\n Text\n </Button>\n <Button color="pink" variant="link">\n Link\n </Button>\n </Flex>\n <Flex gap="small" wrap>\n <Button color="purple" variant="solid">\n Solid\n </Button>\n <Button color="purple" variant="outlined">\n Outlined\n </Button>\n <Button color="purple" variant="dashed">\n Dashed\n </Button>\n <Button color="purple" variant="filled">\n Filled\n </Button>\n <Button color="purple" variant="text">\n Text\n </Button>\n <Button color="purple" variant="link">\n Link\n </Button>\n </Flex>\n <Flex gap="small" wrap>\n <Button color="cyan" variant="solid">\n Solid\n </Button>\n <Button color="cyan" variant="outlined">\n Outlined\n </Button>\n <Button color="cyan" variant="dashed">\n Dashed\n </Button>\n <Button color="cyan" variant="filled">\n Filled\n </Button>\n <Button color="cyan" variant="text">\n Text\n </Button>\n <Button color="cyan" variant="link">\n Link\n </Button>\n </Flex>\n </Flex>\n </ConfigProvider>\n );\n};\n\nexport default App;\n';},a90a689e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("891a1e03");var o='import React from \'react\';\nimport { ConfigProvider, Divider } from \'antd\';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n token: {\n margin: 24,\n marginLG: 48,\n lineWidth: 5,\n colorSplit: \'#1677ff\',\n },\n components: {\n Divider: {\n verticalMarginInline: 16,\n textPaddingInline: 16,\n orientationMargin: 0.2,\n },\n },\n }}\n >\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider>Text</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="left">Left Text</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="right">Right Text</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="left" orientationMargin="0">\n Left Text with 0 orientationMargin\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation="right" orientationMargin={50}>\n Right Text with 50px orientationMargin\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n </ConfigProvider>\n);\n\nexport default App;\n';},a90b2d48:function(n,e,t){},a9722adc:function(n,e,t){},a9756cc5:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6d0dbaf0");var o='import React from \'react\';\nimport { Card } from \'antd\';\n\nconst { Meta } = Card;\n\nconst App: React.FC = () => (\n <Card\n hoverable\n style={{ width: 240 }}\n cover={<img alt="example" src="https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" />}\n >\n <Meta title="Europe Street beat" description="www.instagram.com" />\n </Card>\n);\n\nexport default App;\n';},a98a7432:function(n,e,t){},a9ab41f2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7558e1c3");var o="import React from 'react';\nimport type { InputNumberProps } from 'antd';\nimport { InputNumber, Space } from 'antd';\n\nconst onChange: InputNumberProps['onChange'] = (value) => {\n console.log('changed', value);\n};\n\nconst App: React.FC = () => (\n <Space wrap>\n <InputNumber size=\"large\" min={1} max={100000} defaultValue={3} onChange={onChange} />\n <InputNumber min={1} max={100000} defaultValue={3} onChange={onChange} />\n <InputNumber size=\"small\" min={1} max={100000} defaultValue={3} onChange={onChange} />\n </Space>\n);\n\nexport default App;\n";},a9b54e74:function(n,e,t){},a9fd0597:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("19bcfe66");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, Upload } from 'antd';\n\nconst props: UploadProps = {\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n listType: 'picture',\n beforeUpload(file) {\n return new Promise((resolve) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => {\n const img = document.createElement('img');\n img.src = reader.result as string;\n img.onload = () => {\n const canvas = document.createElement('canvas');\n canvas.width = img.naturalWidth;\n canvas.height = img.naturalHeight;\n const ctx = canvas.getContext('2d')!;\n ctx.drawImage(img, 0, 0);\n ctx.fillStyle = 'red';\n ctx.textBaseline = 'middle';\n ctx.font = '33px Arial';\n ctx.fillText('Ant Design', 20, 20);\n canvas.toBlob((result) => resolve(result as Blob));\n };\n };\n });\n },\n};\n\nconst App: React.FC = () => (\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Upload</Button>\n </Upload>\n);\n\nexport default App;\n";},aa6f96b2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9b1c034a");var o="import React, { useState } from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport { Button, Col, Form, Input, Row, Select, Space, theme } from 'antd';\n\nconst { Option } = Select;\n\nconst AdvancedSearchForm = () => {\n const { token } = theme.useToken();\n const [form] = Form.useForm();\n const [expand, setExpand] = useState(false);\n\n const formStyle: React.CSSProperties = {\n maxWidth: 'none',\n background: token.colorFillAlter,\n borderRadius: token.borderRadiusLG,\n padding: 24,\n };\n\n const getFields = () => {\n const count = expand ? 10 : 6;\n const children = [];\n for (let i = 0; i < count; i++) {\n children.push(\n <Col span={8} key={i}>\n {i % 3 !== 1 ? (\n <Form.Item\n name={`field-${i}`}\n label={`Field ${i}`}\n rules={[\n {\n required: true,\n message: 'Input something!',\n },\n ]}\n >\n <Input placeholder=\"placeholder\" />\n </Form.Item>\n ) : (\n <Form.Item\n name={`field-${i}`}\n label={`Field ${i}`}\n rules={[\n {\n required: true,\n message: 'Select something!',\n },\n ]}\n initialValue=\"1\"\n >\n <Select>\n <Option value=\"1\">\n longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong\n </Option>\n <Option value=\"2\">222</Option>\n </Select>\n </Form.Item>\n )}\n </Col>,\n );\n }\n return children;\n };\n\n const onFinish = (values: any) => {\n console.log('Received values of form: ', values);\n };\n\n return (\n <Form form={form} name=\"advanced_search\" style={formStyle} onFinish={onFinish}>\n <Row gutter={24}>{getFields()}</Row>\n <div style={{ textAlign: 'right' }}>\n <Space size=\"small\">\n <Button type=\"primary\" htmlType=\"submit\">\n Search\n </Button>\n <Button\n onClick={() => {\n form.resetFields();\n }}\n >\n Clear\n </Button>\n <a\n style={{ fontSize: 12 }}\n onClick={() => {\n setExpand(!expand);\n }}\n >\n <DownOutlined rotate={expand ? 180 : 0} /> Collapse\n </a>\n </Space>\n </div>\n </Form>\n );\n};\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n\n const listStyle: React.CSSProperties = {\n lineHeight: '200px',\n textAlign: 'center',\n background: token.colorFillAlter,\n borderRadius: token.borderRadiusLG,\n marginTop: 16,\n };\n\n return (\n <>\n <AdvancedSearchForm />\n <div style={listStyle}>Search Result List</div>\n </>\n );\n};\n\nexport default App;\n";},aac93bf1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3d8b5c5b");var o="import React, { useState } from 'react';\nimport { closestCenter, DndContext, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport {\n arrayMove,\n horizontalListSortingStrategy,\n SortableContext,\n useSortable,\n} from '@dnd-kit/sortable';\nimport { Flex, Tag } from 'antd';\n\ninterface Item {\n id: number;\n text: string;\n}\n\ninterface DraggableTagProps {\n tag: Item;\n}\n\nconst commonStyle: React.CSSProperties = {\n cursor: 'move',\n transition: 'unset', // Prevent element from shaking after drag\n};\n\nconst DraggableTag: React.FC<DraggableTagProps> = (props) => {\n const { tag } = props;\n const { listeners, transform, transition, isDragging, setNodeRef } = useSortable({ id: tag.id });\n\n const style = transform\n ? {\n ...commonStyle,\n transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,\n transition: isDragging ? 'unset' : transition, // Improve performance/visual effect when dragging\n }\n : commonStyle;\n\n return (\n <Tag style={style} ref={setNodeRef} {...listeners}>\n {tag.text}\n </Tag>\n );\n};\n\nconst App: React.FC = () => {\n const [items, setItems] = useState<Item[]>([\n { id: 1, text: 'Tag 1' },\n { id: 2, text: 'Tag 2' },\n { id: 3, text: 'Tag 3' },\n ]);\n\n const sensors = useSensors(useSensor(PointerSensor));\n\n const handleDragEnd = (event: DragEndEvent) => {\n const { active, over } = event;\n if (!over) {\n return;\n }\n if (active.id !== over.id) {\n setItems((data) => {\n const oldIndex = data.findIndex((item) => item.id === active.id);\n const newIndex = data.findIndex((item) => item.id === over.id);\n return arrayMove(data, oldIndex, newIndex);\n });\n }\n };\n\n return (\n <DndContext sensors={sensors} onDragEnd={handleDragEnd} collisionDetection={closestCenter}>\n <SortableContext items={items} strategy={horizontalListSortingStrategy}>\n <Flex gap=\"4px 0\" wrap>\n {items.map<React.ReactNode>((item) => (\n <DraggableTag tag={item} key={item.id} />\n ))}\n </Flex>\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default App;\n";},ab0c3c60:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ed2d2bdd");var o="import React from 'react';\nimport { UploadOutlined, UserOutlined, VideoCameraOutlined } from '@ant-design/icons';\nimport { Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Footer, Sider } = Layout;\n\nconst items = [UserOutlined, VideoCameraOutlined, UploadOutlined, UserOutlined].map(\n (icon, index) => ({\n key: String(index + 1),\n icon: React.createElement(icon),\n label: `nav ${index + 1}`,\n }),\n);\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout>\n <Sider\n breakpoint=\"lg\"\n collapsedWidth=\"0\"\n onBreakpoint={(broken) => {\n console.log(broken);\n }}\n onCollapse={(collapsed, type) => {\n console.log(collapsed, type);\n }}\n >\n <div className=\"demo-logo-vertical\" />\n <Menu theme=\"dark\" mode=\"inline\" defaultSelectedKeys={['4']} items={items} />\n </Sider>\n <Layout>\n <Header style={{ padding: 0, background: colorBgContainer }} />\n <Content style={{ margin: '24px 16px 0' }}>\n <div\n style={{\n padding: 24,\n minHeight: 360,\n background: colorBgContainer,\n borderRadius: borderRadiusLG,\n }}\n >\n content\n </div>\n </Content>\n <Footer style={{ textAlign: 'center' }}>\n Ant Design \xa9{new Date().getFullYear()} Created by Ant UED\n </Footer>\n </Layout>\n </Layout>\n );\n};\n\nexport default App;\n";},ab3a465c:function(n,e,t){},ab49c621:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8888c994");var o="import React from 'react';\nimport { ConfigProvider, message } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = message;\n\nexport default () => (\n <>\n <ConfigProvider\n theme={{\n components: {\n Message: {\n contentPadding: 40,\n contentBg: '#e6f4ff',\n },\n },\n }}\n >\n <InternalPanel content=\"Hello World!\" type=\"error\" />\n </ConfigProvider>\n <ConfigProvider\n theme={{\n components: {\n Message: {\n colorBgElevated: '#e6f4ff',\n },\n },\n }}\n >\n <InternalPanel content=\"Hello World!\" type=\"error\" />\n </ConfigProvider>\n </>\n);\n";},ab7a96a6:function(n,e,t){},abc1bc89:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2c027fa2");var o="import React, { useRef } from 'react';\nimport { Button, InputNumber, Space } from 'antd';\nimport type { InputNumberRef } from 'rc-input-number';\n\nconst App: React.FC = () => {\n const inputRef = useRef<InputNumberRef>(null);\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Space wrap>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n cursor: 'start',\n });\n }}\n >\n Focus at first\n </Button>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n cursor: 'end',\n });\n }}\n >\n Focus at last\n </Button>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n cursor: 'all',\n });\n }}\n >\n Focus to select all\n </Button>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n preventScroll: true,\n });\n }}\n >\n Focus prevent scroll\n </Button>\n </Space>\n <InputNumber style={{ width: '100%' }} defaultValue={999} ref={inputRef} />\n </Space>\n );\n};\n\nexport default App;\n";},abd0f2bf:function(n,e,t){},abdc3b37:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("769eb070");var o="import React, { useState } from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { DropdownProps, MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const handleMenuClick: MenuProps['onClick'] = (e) => {\n if (e.key === '3') {\n setOpen(false);\n }\n };\n\n const handleOpenChange: DropdownProps['onOpenChange'] = (nextOpen, info) => {\n if (info.source === 'trigger' || nextOpen) {\n setOpen(nextOpen);\n }\n };\n\n const items: MenuProps['items'] = [\n {\n label: 'Clicking me will not close the menu.',\n key: '1',\n },\n {\n label: 'Clicking me will not close the menu also.',\n key: '2',\n },\n {\n label: 'Clicking me will close the menu.',\n key: '3',\n },\n ];\n\n return (\n <Dropdown\n menu={{\n items,\n onClick: handleMenuClick,\n }}\n onOpenChange={handleOpenChange}\n open={open}\n >\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Hover me\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n );\n};\n\nexport default App;\n";},abe46c05:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("59b43840");var o="import React from 'react';\nimport { Space, TreeSelect } from 'antd';\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <TreeSelect status=\"error\" style={{ width: '100%' }} placeholder=\"Error\" />\n <TreeSelect\n status=\"warning\"\n style={{ width: '100%' }}\n multiple\n placeholder=\"Warning multiple\"\n />\n </Space>\n);\n\nexport default App;\n";},abeae473:function(n,e,t){},abff1ef7:function(n,e,t){},ac284386:function(n,e,t){},ac49f69e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1686cebe");var o='import React from \'react\';\nimport { CopyOutlined } from \'@ant-design/icons\';\nimport {\n AutoComplete,\n Button,\n Cascader,\n ColorPicker,\n DatePicker,\n Input,\n InputNumber,\n Select,\n Space,\n TimePicker,\n Tooltip,\n TreeSelect,\n} from \'antd\';\n\nconst { Option } = Select;\nconst { TreeNode } = TreeSelect;\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Space.Compact block>\n <Input style={{ width: \'20%\' }} defaultValue="0571" />\n <Input style={{ width: \'30%\' }} defaultValue="26888888" />\n </Space.Compact>\n <Space.Compact block size="small">\n <Input style={{ width: \'calc(100% - 200px)\' }} defaultValue="https://ant.design" />\n <Button type="primary">Submit</Button>\n </Space.Compact>\n <Space.Compact block>\n <Input style={{ width: \'calc(100% - 200px)\' }} defaultValue="https://ant.design" />\n <Button type="primary">Submit</Button>\n </Space.Compact>\n <Space.Compact block>\n <Input\n style={{ width: \'calc(100% - 200px)\' }}\n defaultValue="git@github.com:ant-design/ant-design.git"\n />\n <Tooltip title="copy git url">\n <Button icon={<CopyOutlined />} />\n </Tooltip>\n </Space.Compact>\n <Space.Compact block>\n <Select defaultValue="Zhejiang" allowClear>\n <Option value="Zhejiang">Zhejiang</Option>\n <Option value="Jiangsu">Jiangsu</Option>\n </Select>\n <Input style={{ width: \'50%\' }} defaultValue="Xihu District, Hangzhou" />\n </Space.Compact>\n <Space.Compact block>\n <Select allowClear mode="multiple" defaultValue="Zhejianggggg" style={{ width: \'50%\' }}>\n <Option value="Zhejianggggg">Zhejianggggg</Option>\n <Option value="Jiangsu">Jiangsu</Option>\n </Select>\n <Input style={{ width: \'50%\' }} defaultValue="Xihu District, Hangzhou" />\n </Space.Compact>\n <Space.Compact block>\n <Input.Search style={{ width: \'30%\' }} defaultValue="0571" />\n <Input.Search allowClear style={{ width: \'50%\' }} defaultValue="26888888" />\n <Input.Search style={{ width: \'20%\' }} defaultValue="+1" />\n </Space.Compact>\n <Space.Compact block>\n <Select defaultValue="Option1">\n <Option value="Option1">Option1</Option>\n <Option value="Option2">Option2</Option>\n </Select>\n <Input style={{ width: \'50%\' }} defaultValue="input content" />\n <InputNumber defaultValue={12} />\n </Space.Compact>\n <Space.Compact block>\n <Input style={{ width: \'50%\' }} defaultValue="input content" />\n <DatePicker style={{ width: \'50%\' }} />\n </Space.Compact>\n <Space.Compact block>\n <DatePicker.RangePicker style={{ width: \'70%\' }} />\n <Input style={{ width: \'30%\' }} defaultValue="input content" />\n <Button type="primary">\u67E5\u8BE2</Button>\n </Space.Compact>\n <Space.Compact block>\n <Input style={{ width: \'30%\' }} defaultValue="input content" />\n <DatePicker.RangePicker style={{ width: \'70%\' }} />\n </Space.Compact>\n <Space.Compact block>\n <Select defaultValue="Option1-1">\n <Option value="Option1-1">Option1-1</Option>\n <Option value="Option1-2">Option1-2</Option>\n </Select>\n <Select defaultValue="Option2-2">\n <Option value="Option2-1">Option2-1</Option>\n <Option value="Option2-2">Option2-2</Option>\n </Select>\n </Space.Compact>\n <Space.Compact block>\n <Select defaultValue="1">\n <Option value="1">Between</Option>\n <Option value="2">Except</Option>\n </Select>\n <Input style={{ width: 100, textAlign: \'center\' }} placeholder="Minimum" />\n <Input\n className="site-input-split"\n style={{\n width: 30,\n borderLeft: 0,\n borderRight: 0,\n pointerEvents: \'none\',\n }}\n placeholder="~"\n disabled\n />\n <Input\n className="site-input-right"\n style={{\n width: 100,\n textAlign: \'center\',\n }}\n placeholder="Maximum"\n />\n </Space.Compact>\n <Space.Compact block>\n <Select defaultValue="Sign Up" style={{ width: \'30%\' }}>\n <Option value="Sign Up">Sign Up</Option>\n <Option value="Sign In">Sign In</Option>\n </Select>\n <AutoComplete\n style={{ width: \'70%\' }}\n placeholder="Email"\n options={[{ value: \'text 1\' }, { value: \'text 2\' }]}\n />\n </Space.Compact>\n <Space.Compact block>\n <TimePicker style={{ width: \'70%\' }} />\n <Cascader\n style={{ width: \'70%\' }}\n options={[\n {\n value: \'zhejiang\',\n label: \'Zhejiang\',\n children: [\n {\n value: \'hangzhou\',\n label: \'Hangzhou\',\n children: [\n {\n value: \'xihu\',\n label: \'West Lake\',\n },\n ],\n },\n ],\n },\n {\n value: \'jiangsu\',\n label: \'Jiangsu\',\n children: [\n {\n value: \'nanjing\',\n label: \'Nanjing\',\n children: [\n {\n value: \'zhonghuamen\',\n label: \'Zhong Hua Men\',\n },\n ],\n },\n ],\n },\n ]}\n placeholder="Select Address"\n />\n </Space.Compact>\n <Space.Compact block>\n <TimePicker.RangePicker />\n <TreeSelect\n showSearch\n style={{ width: \'60%\' }}\n value="leaf1"\n styles={{\n popup: { root: { maxHeight: 400, overflow: \'auto\' } },\n }}\n placeholder="Please select"\n allowClear\n treeDefaultExpandAll\n onChange={() => {}}\n >\n <TreeNode value="parent 1" title="parent 1">\n <TreeNode value="parent 1-0" title="parent 1-0">\n <TreeNode value="leaf1" title="leaf1" />\n <TreeNode value="leaf2" title="leaf2" />\n </TreeNode>\n <TreeNode value="parent 1-1" title="parent 1-1">\n <TreeNode value="leaf3" title={<b style={{ color: \'#08c\' }}>leaf3</b>} />\n </TreeNode>\n </TreeNode>\n </TreeSelect>\n <Button type="primary">Submit</Button>\n </Space.Compact>\n <Space.Compact>\n <Input placeholder="input here" />\n <InputNumber placeholder="another input" addonBefore="$" />\n <InputNumber placeholder="another input" addonAfter="$" />\n </Space.Compact>\n <Space.Compact>\n <Input placeholder="input here" />\n <ColorPicker />\n </Space.Compact>\n <Space.Compact>\n <Button type="primary">Button</Button>\n <Input placeholder="input here" addonAfter="$" />\n </Space.Compact>\n </Space>\n);\n\nexport default App;\n';},ac5d562f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8a9685fe");var o='import React from \'react\';\nimport {\n AutoComplete,\n Cascader,\n Flex,\n Form,\n Input,\n Select,\n Space,\n TreeSelect,\n Typography,\n} from \'antd\';\n\nconst options = [\n { value: \'long\', label: <Typography>long, long, long piece of text</Typography> },\n { value: \'short\', label: <Typography>short</Typography> },\n { value: \'normal\', label: <div>normal</div> },\n];\n\nconst App: React.FC = () => (\n <>\n <Space wrap>\n <Select\n defaultValue="long, long, long piece of text"\n style={{ width: 120 }}\n allowClear\n options={options}\n />\n\n <Select\n placeholder="Select a option"\n style={{ width: 120, height: 60 }}\n allowClear\n options={options}\n />\n\n <Select\n defaultValue="normal"\n placeholder="Select a option"\n style={{ width: 120 }}\n allowClear\n options={options}\n />\n\n <Select\n defaultValue={[\'normal\']}\n mode="multiple"\n placeholder="Select a option"\n style={{ width: 120 }}\n allowClear\n options={options}\n />\n\n <Select\n mode="multiple"\n placeholder="Select a option"\n style={{ width: 120, height: 60 }}\n allowClear\n options={options}\n />\n\n <Cascader\n placeholder="Select a option"\n style={{ width: 120, height: 60 }}\n allowClear\n options={options}\n />\n\n <TreeSelect\n showSearch\n style={{ width: 120, height: 60 }}\n placeholder="Please select"\n allowClear\n popupMatchSelectWidth={false}\n treeDefaultExpandAll\n treeData={[\n {\n value: \'parent 1\',\n title: \'parent 1\',\n children: options,\n },\n ]}\n />\n <Select\n prefix="Hello World"\n mode="multiple"\n allowClear\n placeholder="Select"\n style={{ minWidth: 200, height: 200 }}\n defaultValue={[\'long\']}\n options={options}\n />\n <Select\n mode="multiple"\n style={{ width: 200 }}\n placeholder="\u8BF7\u9009\u62E9"\n maxTagCount="responsive"\n prefix="\u57CE\u5E02"\n options={options}\n />\n <Select\n style={{ width: 200 }}\n placeholder="\u8BF7\u9009\u62E9"\n prefix="\u57CE\u5E02"\n options={options}\n showSearch\n allowClear\n status="error"\n />\n <Select\n style={{ width: 100 }}\n prefix="Hi"\n options={options}\n showSearch\n allowClear\n status="warning"\n variant="filled"\n defaultValue="Bamboo"\n />\n <Select\n style={{ width: 100 }}\n prefix="Hi"\n options={options}\n showSearch\n allowClear\n status="error"\n variant="borderless"\n defaultValue="Bamboo"\n />\n <Form style={{ width: 200 }} layout="vertical">\n <Form.Item\n label="Label"\n name="bamboo"\n initialValue="Bamboo"\n style={{\n boxShadow: \'0 0 0 1px red\',\n }}\n >\n <Select options={options} allowClear placeholder="bamboo" />\n </Form.Item>\n <Form.Item\n label="Label"\n name="bamboo"\n initialValue="Bamboo"\n style={{\n boxShadow: \'0 0 0 1px red\',\n }}\n >\n <AutoComplete options={options} allowClear placeholder="bamboo" />\n </Form.Item>\n </Form>\n </Space>\n\n {/* Test for align */}\n <Flex vertical style={{ width: 200 }}>\n {/* Single */}\n <Input prefix="Hi" placeholder="Input" allowClear />\n <Select prefix="Hi" placeholder="Single" options={options} allowClear showSearch />\n <Select\n prefix="Hi"\n placeholder="Single"\n options={options}\n allowClear\n showSearch\n defaultValue="Bamboo"\n />\n {/* Multiple */}\n <Select placeholder="Multiple" options={options} allowClear mode="multiple" />\n <Select prefix="Hi" placeholder="Multiple" options={options} allowClear mode="multiple" />\n <Select\n prefix="Hi"\n placeholder="Multiple"\n options={options}\n allowClear\n mode="multiple"\n defaultValue={[\'Bamboo\']}\n />\n <Select\n placeholder="Multiple"\n options={options}\n allowClear\n mode="multiple"\n defaultValue={[\'Bamboo\']}\n />\n </Flex>\n </>\n);\n\nexport default App;\n';},acbf89f1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6659a724");var o="import React from 'react';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport { Space } from 'antd';\n\nconst IconFont = createFromIconfontCN({\n scriptUrl: [\n '//at.alicdn.com/t/font_1788044_0dwu4guekcwr.js', // icon-javascript, icon-java, icon-shoppingcart (overridden)\n '//at.alicdn.com/t/font_1788592_a5xf2bdic3u.js', // icon-shoppingcart, icon-python\n ],\n});\n\nconst App: React.FC = () => (\n <Space>\n <IconFont type=\"icon-javascript\" />\n <IconFont type=\"icon-java\" />\n <IconFont type=\"icon-shoppingcart\" />\n <IconFont type=\"icon-python\" />\n </Space>\n);\n\nexport default App;\n";},acc4b651:function(n,e,t){},accce528:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1f8a4eed");var o="import React from 'react';\nimport { Flex, Progress } from 'antd';\nimport type { ProgressProps } from 'antd';\n\nconst twoColors: ProgressProps['strokeColor'] = {\n '0%': '#108ee9',\n '100%': '#87d068',\n};\n\nconst conicColors: ProgressProps['strokeColor'] = {\n '0%': '#87d068',\n '50%': '#ffe58f',\n '100%': '#ffccc7',\n};\n\nconst App: React.FC = () => (\n <Flex vertical gap=\"middle\">\n <Progress percent={99.9} strokeColor={twoColors} />\n <Progress percent={50} status=\"active\" strokeColor={{ from: '#108ee9', to: '#87d068' }} />\n <Flex gap=\"small\" wrap>\n <Progress type=\"circle\" percent={90} strokeColor={twoColors} />\n <Progress type=\"circle\" percent={100} strokeColor={twoColors} />\n <Progress type=\"circle\" percent={93} strokeColor={conicColors} />\n </Flex>\n <Flex gap=\"small\" wrap>\n <Progress type=\"dashboard\" percent={90} strokeColor={twoColors} />\n <Progress type=\"dashboard\" percent={100} strokeColor={twoColors} />\n <Progress type=\"dashboard\" percent={93} strokeColor={conicColors} />\n </Flex>\n </Flex>\n);\n\nexport default App;\n";},acd771c8:function(n,e,t){},ad30e2b3:function(n,e,t){},ad48af86:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("beb2342a");var o="import React from 'react';\nimport { Alert } from 'antd';\n\nconst App: React.FC = () => <Alert message=\"Success Text\" type=\"success\" />;\n\nexport default App;\n";},ad640b4f:function(n,e,t){},ad8caf10:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("581bf200");var o="import React, { useState } from 'react';\nimport type { StepsProps } from 'antd';\nimport { Card, Radio, Steps } from 'antd';\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<StepsProps['size']>('default');\n const description = 'This is a description.';\n const horizontalSteps = (\n <Card>\n <Steps\n size={size}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n </Card>\n );\n\n return (\n <>\n <Radio.Group\n style={{ marginBottom: 16 }}\n value={size}\n onChange={(e) => setSize(e.target.value)}\n >\n <Radio value=\"small\">Small</Radio>\n <Radio value=\"default\">Default</Radio>\n </Radio.Group>\n <Steps\n size={size}\n direction=\"vertical\"\n items={[\n {\n title: 'Finished',\n description: horizontalSteps,\n },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n </>\n );\n};\n\nexport default App;\n";},adb07765:function(n,e,t){},adcc052f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fd9b3e6b");var o='import React from \'react\';\nimport { UserOutlined } from \'@ant-design/icons\';\nimport { Input } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Input size="large" placeholder="large size" prefix={<UserOutlined />} />\n <br />\n <br />\n <Input placeholder="default size" prefix={<UserOutlined />} />\n <br />\n <br />\n <Input size="small" placeholder="small size" prefix={<UserOutlined />} />\n </>\n);\n\nexport default App;\n';},ae03357c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("96a57354");var o='import React from \'react\';\nimport type { StatisticTimerProps } from \'antd\';\nimport { Col, Row, Statistic } from \'antd\';\n\nconst { Timer } = Statistic;\n\nconst deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK\nconst before = Date.now() - 1000 * 60 * 60 * 24 * 2 + 1000 * 30;\n\nconst onFinish: StatisticTimerProps[\'onFinish\'] = () => {\n console.log(\'finished!\');\n};\n\nconst onChange: StatisticTimerProps[\'onChange\'] = (val) => {\n if (typeof val === \'number\' && 4.95 * 1000 < val && val < 5 * 1000) {\n console.log(\'changed!\');\n }\n};\n\nconst App: React.FC = () => (\n <Row gutter={16}>\n <Col span={12}>\n <Timer type="countdown" value={deadline} onFinish={onFinish} />\n </Col>\n <Col span={12}>\n <Timer type="countdown" title="Million Seconds" value={deadline} format="HH:mm:ss:SSS" />\n </Col>\n <Col span={12}>\n <Timer\n type="countdown"\n title="Countdown"\n value={Date.now() + 10 * 1000}\n onChange={onChange}\n />\n </Col>\n <Col span={12}>\n <Timer type="countup" title="Countup" value={before} onChange={onChange} />\n </Col>\n <Col span={24} style={{ marginTop: 32 }}>\n <Timer\n type="countdown"\n title="Day Level (Countdown)"\n value={deadline}\n format="D \u5929 H \u65F6 m \u5206 s \u79D2"\n />\n </Col>\n <Col span={24} style={{ marginTop: 32 }}>\n <Timer\n type="countup"\n title="Day Level (Countup)"\n value={before}\n format="D \u5929 H \u65F6 m \u5206 s \u79D2"\n />\n </Col>\n </Row>\n);\n\nexport default App;\n';},ae1ee3e7:function(n,e,t){},ae3c5a0e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return r;}});var o=t("f19d2b93");t("e8363941");var a=t("a9d1a279"),r=()=>(0,o.jsx)(a.Breadcrumb,{separator:">",items:[{title:"Home"},{title:"Application Center",href:""},{title:"Application List",href:""},{title:"An Application"}]});},ae46ac80:function(n,e,t){},ae5284f9:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8f172e36");var o="import React from 'react';\nimport { CloseCircleOutlined, DeleteOutlined } from '@ant-design/icons';\nimport { Tag } from 'antd';\n\nconst preventDefault = (e: React.MouseEvent<HTMLElement>) => {\n e.preventDefault();\n console.log('Clicked! But prevent default.');\n};\n\nconst App: React.FC = () => (\n <>\n <Tag>Tag 1</Tag>\n <Tag>\n <a\n href=\"https://github.com/ant-design/ant-design/issues/1862\"\n target=\"_blank\"\n rel=\"noopener noreferrer\"\n >\n Link\n </a>\n </Tag>\n <Tag closeIcon onClose={preventDefault}>\n Prevent Default\n </Tag>\n <Tag closeIcon={<CloseCircleOutlined />} onClose={console.log}>\n Tag 2\n </Tag>\n <Tag\n closable={{\n closeIcon: <DeleteOutlined />,\n 'aria-label': 'Close Button',\n }}\n onClose={console.log}\n >\n Tag 3\n </Tag>\n </>\n);\n\nexport default App;\n";},aeb62104:function(n,e,t){},aed2bd67:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c0d5aca1");var o="import React, { useState } from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { TreeSelect } from 'antd';\n\nconst icon = <SmileOutlined />;\nconst treeData = [\n {\n value: 'parent 1',\n title: 'parent 1',\n children: [\n {\n value: 'parent 1-0',\n title: 'parent 1-0',\n children: [\n {\n value: 'leaf1',\n title: 'my leaf',\n },\n {\n value: 'leaf2',\n title: 'your leaf',\n },\n ],\n },\n {\n value: 'parent 1-1',\n title: 'parent 1-1',\n children: [\n {\n value: 'sss',\n title: <b style={{ color: '#08c' }}>sss</b>,\n },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [value, setValue] = useState<string>();\n\n const onChange = (newValue: string) => {\n console.log(newValue);\n setValue(newValue);\n };\n\n return (\n <>\n <TreeSelect\n showSearch\n suffixIcon={icon}\n style={{ width: '100%' }}\n value={value}\n styles={{\n popup: { root: { maxHeight: 400, overflow: 'auto' } },\n }}\n placeholder=\"Please select\"\n allowClear\n treeDefaultExpandAll\n onChange={onChange}\n treeData={treeData}\n />\n <br />\n <br />\n <TreeSelect\n showSearch\n prefix=\"Prefix\"\n style={{ width: '100%' }}\n value={value}\n styles={{\n popup: { root: { maxHeight: 400, overflow: 'auto' } },\n }}\n placeholder=\"Please select\"\n allowClear\n treeDefaultExpandAll\n onChange={onChange}\n treeData={treeData}\n />\n </>\n );\n};\n\nexport default App;\n";},af2b80b1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c52d1fb7");var o='import React, { useState } from \'react\';\nimport type Icon from \'@ant-design/icons\';\nimport { LikeOutlined, MessageOutlined, StarOutlined } from \'@ant-design/icons\';\nimport { Avatar, List, Skeleton, Switch } from \'antd\';\n\ninterface IconTextProps {\n icon: typeof Icon;\n text: React.ReactNode;\n}\n\nconst listData = Array.from({ length: 3 }).map((_, i) => ({\n href: \'https://ant.design\',\n title: `ant design part ${i + 1}`,\n avatar: `https://api.dicebear.com/7.x/miniavs/svg?seed=${i}`,\n description:\n \'Ant Design, a design language for background applications, is refined by Ant UED Team.\',\n content:\n \'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.\',\n}));\n\nconst IconText: React.FC<IconTextProps> = ({ icon, text }) => (\n <>\n {React.createElement(icon, { style: { marginInlineEnd: 8 } })}\n {text}\n </>\n);\n\nconst App: React.FC = () => {\n const [loading, setLoading] = useState(true);\n\n const onChange = (checked: boolean) => {\n setLoading(!checked);\n };\n\n return (\n <>\n <Switch checked={!loading} onChange={onChange} style={{ marginBottom: 16 }} />\n <List\n itemLayout="vertical"\n size="large"\n dataSource={listData}\n renderItem={(item) => (\n <List.Item\n key={item.title}\n actions={\n !loading\n ? [\n <IconText icon={StarOutlined} text="156" key="list-vertical-star-o" />,\n <IconText icon={LikeOutlined} text="156" key="list-vertical-like-o" />,\n <IconText icon={MessageOutlined} text="2" key="list-vertical-message" />,\n ]\n : undefined\n }\n extra={\n !loading && (\n <img\n width={272}\n alt="logo"\n src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"\n />\n )\n }\n >\n <Skeleton loading={loading} active avatar>\n <List.Item.Meta\n avatar={<Avatar src={item.avatar} />}\n title={<a href={item.href}>{item.title}</a>}\n description={item.description}\n />\n {item.content}\n </Skeleton>\n </List.Item>\n )}\n />\n </>\n );\n};\n\nexport default App;\n';},af480fae:function(n,e,t){},af7cb012:function(n,e,t){},af7fce56:function(n,e,t){},af87477b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("87bf54ce");var o="import React from 'react';\nimport { DatePicker, Space } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst { RangePicker } = DatePicker;\n\nconst dateFormat = 'YYYY-MM-DD';\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <DatePicker defaultValue={dayjs('2015-06-06', dateFormat)} disabled />\n <DatePicker picker=\"month\" defaultValue={dayjs('2015-06', 'YYYY-MM')} disabled />\n <RangePicker\n defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}\n disabled\n />\n <RangePicker\n defaultValue={[dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]}\n disabled={[false, true]}\n />\n <DatePicker\n defaultValue={dayjs('2019-09-03', dateFormat)}\n minDate={dayjs('2019-06-01', dateFormat)}\n maxDate={dayjs('2020-06-30', dateFormat)}\n />\n </Space>\n);\n\nexport default App;\n";},af95493e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ce8f50a5");var o="import React from 'react';\nimport { AntDesignOutlined } from '@ant-design/icons';\nimport { Button } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n icon: '\u56FE\u6807\u5143\u7D20',\n },\n en: {\n icon: 'Icon element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Button\"\n semantics={[{ name: 'icon', desc: locale.icon, version: '5.5.0' }]}\n >\n <Button type=\"primary\" icon={<AntDesignOutlined />}>\n Ant Design\n </Button>\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},aff6d9db:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("af480fae");var o="import React from 'react';\nimport { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';\nimport { ConfigProvider, Steps } from 'antd';\n\nconst description = 'This is a description.';\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Steps: {\n titleLineHeight: 20,\n customIconSize: 40,\n customIconTop: 0,\n customIconFontSize: 32,\n iconSize: 20,\n iconTop: 0, // magic for ui experience\n iconFontSize: 12,\n iconSizeSM: 16,\n dotSize: 20,\n dotCurrentSize: 24,\n navArrowColor: '#163CFF',\n navContentMaxWidth: 100,\n descriptionMaxWidth: 100,\n },\n },\n }}\n >\n <Steps\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n subTitle: 'Left 00:00:08',\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n <Steps\n size=\"small\"\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n subTitle: 'Left 00:00:08',\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n <Steps\n items={[\n {\n title: 'Login',\n status: 'finish',\n icon: <UserOutlined />,\n },\n {\n title: 'Verification',\n status: 'finish',\n icon: <SolutionOutlined />,\n },\n {\n title: 'Pay',\n status: 'process',\n icon: <LoadingOutlined />,\n },\n {\n title: 'Done',\n status: 'wait',\n icon: <SmileOutlined />,\n },\n ]}\n />\n <Steps\n progressDot\n current={1}\n items={[\n {\n title: 'Finished',\n description: 'This is a description.',\n },\n {\n title: 'In Progress',\n description: 'This is a description.',\n },\n {\n title: 'Waiting',\n description: 'This is a description.',\n },\n ]}\n />\n <Steps\n type=\"navigation\"\n current={1}\n items={[\n {\n title: 'Step 1',\n subTitle: '00:00:05',\n status: 'finish',\n description: 'This is a description.',\n },\n {\n title: 'Step 2',\n subTitle: '00:01:02',\n status: 'process',\n description: 'This is a description.',\n },\n {\n title: 'Step 3',\n subTitle: 'waiting for longlong time',\n status: 'wait',\n description: 'This is a description.',\n },\n ]}\n />\n </ConfigProvider>\n);\n\nexport default App;\n";},b0311274:function(n,e,t){},b0382f40:function(n,e,t){},b03e9810:function(n,e,t){},b05df42c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7964b65b");var o="import React from 'react';\nimport { HappyProvider } from '@ant-design/happy-work-theme';\nimport { Button, ConfigProvider, Space } from 'antd';\nimport type { ConfigProviderProps, GetProp } from 'antd';\n\ntype WaveConfig = GetProp<ConfigProviderProps, 'wave'>;\n\n// Prepare effect holder\nconst createHolder = (node: HTMLElement) => {\n const { borderWidth } = getComputedStyle(node);\n const borderWidthNum = parseInt(borderWidth, 10);\n\n const div = document.createElement('div');\n div.style.position = 'absolute';\n div.style.inset = `-${borderWidthNum}px`;\n div.style.borderRadius = 'inherit';\n div.style.background = 'transparent';\n div.style.zIndex = '999';\n div.style.pointerEvents = 'none';\n div.style.overflow = 'hidden';\n node.appendChild(div);\n\n return div;\n};\n\nconst createDot = (holder: HTMLElement, color: string, left: number, top: number, size = 0) => {\n const dot = document.createElement('div');\n dot.style.position = 'absolute';\n dot.style.left = `${left}px`;\n dot.style.top = `${top}px`;\n dot.style.width = `${size}px`;\n dot.style.height = `${size}px`;\n dot.style.borderRadius = '50%';\n dot.style.background = color;\n dot.style.transform = 'translate(-50%, -50%)';\n dot.style.transition = 'all 1s ease-out';\n holder.appendChild(dot);\n\n return dot;\n};\n\n// Inset Effect\nconst showInsetEffect: WaveConfig['showEffect'] = (node, { event, component }) => {\n if (component !== 'Button') {\n return;\n }\n\n const holder = createHolder(node);\n\n const rect = holder.getBoundingClientRect();\n\n const left = event.clientX - rect.left;\n const top = event.clientY - rect.top;\n\n const dot = createDot(holder, 'rgba(255, 255, 255, 0.65)', left, top);\n\n // Motion\n requestAnimationFrame(() => {\n dot.ontransitionend = () => {\n holder.remove();\n };\n\n dot.style.width = '200px';\n dot.style.height = '200px';\n dot.style.opacity = '0';\n });\n};\n\n// Shake Effect\nconst showShakeEffect: WaveConfig['showEffect'] = (node, { component }) => {\n if (component !== 'Button') {\n return;\n }\n\n const seq = [0, -15, 15, -5, 5, 0];\n const itv = 10;\n\n let steps = 0;\n\n function loop() {\n cancelAnimationFrame((node as any).effectTimeout);\n\n (node as any).effectTimeout = requestAnimationFrame(() => {\n const currentStep = Math.floor(steps / itv);\n const current = seq[currentStep];\n const next = seq[currentStep + 1];\n\n if (!next) {\n node.style.transform = '';\n node.style.transition = '';\n return;\n }\n\n // Trans from current to next by itv\n const angle = current + ((next - current) / itv) * (steps % itv);\n\n node.style.transform = `rotate(${angle}deg)`;\n node.style.transition = 'none';\n\n steps += 1;\n loop();\n });\n }\n\n loop();\n};\n\n// Component\nconst Wrapper = ({ name, ...wave }: WaveConfig & { name: string }) => (\n <ConfigProvider wave={wave}>\n <Button type=\"primary\">{name}</Button>\n </ConfigProvider>\n);\n\nconst App = () => (\n <Space style={{ padding: 24 }} size=\"large\">\n <Wrapper name=\"Disabled\" disabled />\n <Wrapper name=\"Default\" />\n <Wrapper name=\"Inset\" showEffect={showInsetEffect} />\n <Wrapper name=\"Shake\" showEffect={showShakeEffect} />\n <HappyProvider>\n <Button type=\"primary\">Happy Work</Button>\n </HappyProvider>\n </Space>\n);\n\nexport default App;\n";},b085c5f7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("63c25060");var o="import React, { useState } from 'react';\nimport { Button, Image, InputNumber } from 'antd';\n\nconst App: React.FC = () => {\n const [visible, setVisible] = useState(false);\n const [scaleStep, setScaleStep] = useState(0.5);\n\n return (\n <>\n <div>\n scaleStep:{' '}\n <InputNumber\n min={0.1}\n max={5}\n defaultValue={0.5}\n step={0.1}\n onChange={(val) => setScaleStep(val!)}\n />\n </div>\n <br />\n <Button type=\"primary\" onClick={() => setVisible(true)}>\n show image preview\n </Button>\n <Image\n width={200}\n style={{ display: 'none' }}\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png?x-oss-process=image/blur,r_50,s_50/quality,q_1/resize,m_mfit,h_200,w_200\"\n preview={{\n visible,\n scaleStep,\n src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n onVisibleChange: (value) => {\n setVisible(value);\n },\n }}\n />\n </>\n );\n};\n\nexport default App;\n";},b0860cc0:function(n,e,t){},b0abed05:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b275ecf3");var o="import React, { useState } from 'react';\nimport { CarryOutOutlined } from '@ant-design/icons';\nimport { Space, Switch, TreeSelect } from 'antd';\n\nconst treeData = [\n {\n value: 'parent 1',\n title: 'parent 1',\n icon: <CarryOutOutlined />,\n children: [\n {\n value: 'parent 1-0',\n title: 'parent 1-0',\n icon: <CarryOutOutlined />,\n children: [\n {\n value: 'leaf1',\n title: 'leaf1',\n icon: <CarryOutOutlined />,\n },\n {\n value: 'leaf2',\n title: 'leaf2',\n icon: <CarryOutOutlined />,\n },\n ],\n },\n {\n value: 'parent 1-1',\n title: 'parent 1-1',\n icon: <CarryOutOutlined />,\n children: [\n {\n value: 'sss',\n title: 'sss',\n icon: <CarryOutOutlined />,\n },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [treeLine, setTreeLine] = useState(true);\n const [showLeafIcon, setShowLeafIcon] = useState(false);\n const [showIcon, setShowIcon] = useState<boolean>(false);\n\n return (\n <Space direction=\"vertical\">\n <Switch\n checkedChildren=\"showIcon\"\n unCheckedChildren=\"showIcon\"\n checked={showIcon}\n onChange={() => setShowIcon(!showIcon)}\n />\n <Switch\n checkedChildren=\"treeLine\"\n unCheckedChildren=\"treeLine\"\n checked={treeLine}\n onChange={() => setTreeLine(!treeLine)}\n />\n <Switch\n disabled={!treeLine}\n checkedChildren=\"showLeafIcon\"\n unCheckedChildren=\"showLeafIcon\"\n checked={showLeafIcon}\n onChange={() => setShowLeafIcon(!showLeafIcon)}\n />\n <TreeSelect\n treeLine={treeLine && { showLeafIcon }}\n style={{ width: 300 }}\n treeData={treeData}\n treeIcon={showIcon}\n />\n </Space>\n );\n};\n\nexport default App;\n";},b1098fe5:function(n,e,t){},b12db157:function(n,e,t){},b1448d10:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4bb51a32");var o="import React, { useState } from 'react';\nimport { Button, Modal, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const showModal = () => {\n setOpen(true);\n };\n const handleOk = () => {\n setOpen(false);\n };\n\n const handleCancel = () => {\n setOpen(false);\n };\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={showModal}>\n Open Modal\n </Button>\n <Button\n type=\"primary\"\n onClick={() => {\n Modal.confirm({\n title: 'Confirm',\n content: 'Bla bla ...',\n footer: (_, { OkBtn, CancelBtn }) => (\n <>\n <Button>Custom Button</Button>\n <CancelBtn />\n <OkBtn />\n </>\n ),\n });\n }}\n >\n Open Modal Confirm\n </Button>\n </Space>\n <Modal\n open={open}\n title=\"Title\"\n onOk={handleOk}\n onCancel={handleCancel}\n footer={(_, { OkBtn, CancelBtn }) => (\n <>\n <Button>Custom Button</Button>\n <CancelBtn />\n <OkBtn />\n </>\n )}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n";},b15059b7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4ccd0c13");var o="import React from 'react';\nimport { CloseCircleOutlined } from '@ant-design/icons';\nimport { Flex, Tag } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"4px 0\" wrap>\n <Tag closable closeIcon=\"\u5173 \u95ED\">\n Tag1\n </Tag>\n <Tag closable closeIcon={<CloseCircleOutlined />}>\n Tag2\n </Tag>\n </Flex>\n);\n\nexport default App;\n";},b1528252:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cb917cce");var o='import React from \'react\';\nimport { Avatar, Badge, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space size="middle" wrap>\n <Space size="middle" wrap>\n <Badge count={5} status="success">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={5} status="warning">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={5} color="blue">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={5} color="#fa541c">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge dot status="success">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge dot status="warning">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge dot status="processing">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge dot color="blue">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge dot color="#fa541c">\n <Avatar shape="square" size="large" />\n </Badge>\n </Space>\n\n <Space size="middle" wrap>\n <Badge count={0} showZero />\n <Badge count={0} showZero color="blue" />\n <Badge count={0} showZero color="#f0f" />\n <Badge count={0} showZero>\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={0} showZero color="blue">\n <Avatar shape="square" size="large" />\n </Badge>\n </Space>\n </Space>\n);\n\nexport default App;\n';},b191146c:function(n,e,t){},b1befca1:function(n,e,t){},b1cf4b9c:function(n,e,t){},b1f6f3ee:function(n,e,t){},b21d1b7e:function(n,e,t){},b23375da:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("aeb62104");var o="import React from 'react';\nimport { Flex, Progress } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"small\" vertical>\n <Progress\n percent={0}\n percentPosition={{ align: 'center', type: 'inner' }}\n size={[200, 20]}\n strokeColor=\"#E6F4FF\"\n />\n <Progress percent={10} percentPosition={{ align: 'center', type: 'inner' }} size={[300, 20]} />\n <Progress\n percent={50}\n percentPosition={{ align: 'start', type: 'inner' }}\n size={[300, 20]}\n strokeColor=\"#B7EB8F\"\n />\n <Progress\n percent={60}\n percentPosition={{ align: 'end', type: 'inner' }}\n size={[300, 20]}\n strokeColor=\"#001342\"\n />\n <Progress percent={100} percentPosition={{ align: 'center', type: 'inner' }} size={[400, 20]} />\n <Progress percent={60} percentPosition={{ align: 'start', type: 'outer' }} />\n <Progress percent={100} percentPosition={{ align: 'start', type: 'outer' }} />\n <Progress percent={60} percentPosition={{ align: 'center', type: 'outer' }} size=\"small\" />\n <Progress percent={100} percentPosition={{ align: 'center', type: 'outer' }} />\n </Flex>\n);\n\nexport default App;\n";},b275ecf3:function(n,e,t){},b27e956b:function(n,e,t){},b2966226:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ebf6d374");var o="import React from 'react';\nimport { green, red } from '@ant-design/colors';\nimport { Flex, Progress } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"small\" vertical>\n <Progress percent={50} steps={3} />\n <Progress percent={30} steps={5} />\n <Progress percent={100} steps={5} size=\"small\" strokeColor={green[6]} />\n <Progress percent={60} steps={5} strokeColor={[green[6], green[6], red[5]]} />\n </Flex>\n);\n\nexport default App;\n";},b2b903e1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a0fb7dae");var o="import React, { useState } from 'react';\nimport { Alert, Calendar } from 'antd';\nimport type { Dayjs } from 'dayjs';\nimport dayjs from 'dayjs';\n\nconst App: React.FC = () => {\n const [value, setValue] = useState(() => dayjs('2017-01-25'));\n const [selectedValue, setSelectedValue] = useState(() => dayjs('2017-01-25'));\n\n const onSelect = (newValue: Dayjs) => {\n setValue(newValue);\n setSelectedValue(newValue);\n };\n\n const onPanelChange = (newValue: Dayjs) => {\n setValue(newValue);\n };\n\n return (\n <>\n <Alert message={`You selected date: ${selectedValue?.format('YYYY-MM-DD')}`} />\n <Calendar value={value} onSelect={onSelect} onPanelChange={onPanelChange} />\n </>\n );\n};\n\nexport default App;\n";},b3014fc1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("25b6374b");var o="import React from 'react';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nimport { EditOutlined, EllipsisOutlined, SettingOutlined } from '@ant-design/icons';\nimport { Avatar, Card } from 'antd';\n\nconst { Meta } = Card;\n\nconst locales = {\n cn: {\n header: '\u8BBE\u7F6E\u5361\u7247\u5934\u90E8\u533A\u57DF',\n body: '\u8BBE\u7F6E\u5361\u7247\u5185\u5BB9\u533A\u57DF',\n extra: '\u8BBE\u7F6E\u5361\u7247\u53F3\u4E0A\u89D2\u7684\u64CD\u4F5C\u533A\u57DF',\n title: '\u8BBE\u7F6E\u5361\u7247\u6807\u9898',\n actions: '\u8BBE\u7F6E\u5361\u7247\u5E95\u90E8\u64CD\u4F5C\u7EC4',\n cover: '\u8BBE\u7F6E\u6807\u9898\u5C01\u9762',\n },\n en: {\n header: 'set `header` of card',\n body: 'set `body` of card',\n extra: 'set `extra` of card',\n title: 'set `title` of card',\n actions: 'set `actions` of card',\n cover: 'set `cover` of card',\n },\n};\n\nconst BlockCard: React.FC<React.PropsWithChildren> = (props) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n\n return (\n <div ref={divRef} style={{ position: 'absolute', inset: 0 }}>\n <Card\n {...props}\n title=\"Card title\"\n extra=\"More\"\n style={{ width: 300 }}\n cover={\n <img\n alt=\"example\"\n src=\"https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png\"\n />\n }\n actions={[\n <SettingOutlined key=\"setting\" />,\n <EditOutlined key=\"edit\" />,\n <EllipsisOutlined key=\"ellipsis\" />,\n ]}\n />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Card\"\n semantics={[\n { name: 'header', desc: locale.header, version: '5.14.0' },\n { name: 'title', desc: locale.title, version: '5.14.0' },\n { name: 'extra', desc: locale.extra, version: '5.14.0' },\n { name: 'cover', desc: locale.cover, version: '5.14.0' },\n { name: 'body', desc: locale.body, version: '5.14.0' },\n { name: 'actions', desc: locale.actions, version: '5.14.0' },\n ]}\n >\n <BlockCard>\n <Meta\n avatar={<Avatar src=\"https://api.dicebear.com/7.x/miniavs/svg?seed=8\" />}\n title=\"Card Meta title\"\n description=\"This is the description\"\n />\n </BlockCard>\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},b3160a88:function(n,e,t){},b32ffe9a:function(n,e,t){},b35b93ba:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("abd0f2bf");var o="import React, { useState } from 'react';\nimport { Input, Tooltip } from 'antd';\n\ninterface NumericInputProps {\n style: React.CSSProperties;\n value: string;\n onChange: (value: string) => void;\n}\n\nconst formatNumber = (value: number) => new Intl.NumberFormat().format(value);\n\nconst NumericInput = (props: NumericInputProps) => {\n const { value, onChange } = props;\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n const { value: inputValue } = e.target;\n const reg = /^-?\\d*(\\.\\d*)?$/;\n if (reg.test(inputValue) || inputValue === '' || inputValue === '-') {\n onChange(inputValue);\n }\n };\n\n // '.' at the end or only '-' in the input box.\n const handleBlur = () => {\n let valueTemp = value;\n if (value.charAt(value.length - 1) === '.' || value === '-') {\n valueTemp = value.slice(0, -1);\n }\n onChange(valueTemp.replace(/0*(\\d+)/, '$1'));\n };\n\n const title = value ? (\n <span className=\"numeric-input-title\">{value !== '-' ? formatNumber(Number(value)) : '-'}</span>\n ) : (\n 'Input a number'\n );\n\n return (\n <Tooltip\n trigger={['focus']}\n title={title}\n placement=\"topLeft\"\n classNames={{ root: 'numeric-input' }}\n >\n <Input\n {...props}\n onChange={handleChange}\n onBlur={handleBlur}\n placeholder=\"Input a number\"\n maxLength={16}\n />\n </Tooltip>\n );\n};\n\nconst App: React.FC = () => {\n const [value, setValue] = useState('');\n\n return <NumericInput style={{ width: 120 }} value={value} onChange={setValue} />;\n};\n\nexport default App;\n";},b363ca1f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9d7846c6");var o='import React from \'react\';\nimport { Alert, Flex, Spin } from \'antd\';\n\nconst contentStyle: React.CSSProperties = {\n padding: 50,\n background: \'rgba(0, 0, 0, 0.05)\',\n borderRadius: 4,\n};\n\nconst content = <div style={contentStyle} />;\n\nconst App: React.FC = () => (\n <Flex gap="middle" vertical>\n <Flex gap="middle">\n <Spin tip="Loading" size="small">\n {content}\n </Spin>\n <Spin tip="Loading">{content}</Spin>\n <Spin tip="Loading" size="large">\n {content}\n </Spin>\n </Flex>\n <Spin tip="Loading...">\n <Alert\n message="Alert message title"\n description="Further details about the context of this alert."\n type="info"\n />\n </Spin>\n </Flex>\n);\n\nexport default App;\n';},b366ab56:function(n,e,t){},b3a77fe3:function(n,e,t){},b3f78fe2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9223539d");var o='import React from \'react\';\nimport {\n Button,\n ColorPicker,\n ConfigProvider,\n Divider,\n Form,\n Input,\n InputNumber,\n Space,\n Switch,\n} from \'antd\';\nimport type { ColorPickerProps, GetProp } from \'antd\';\n\ntype Color = Extract<GetProp<ColorPickerProps, \'value\'>, { cleared: any }>;\n\ntype ThemeData = {\n borderRadius: number;\n colorPrimary: string;\n Button?: {\n colorPrimary: string;\n algorithm?: boolean;\n };\n};\n\nconst defaultData: ThemeData = {\n borderRadius: 6,\n colorPrimary: \'#1677ff\',\n Button: {\n colorPrimary: \'#00B96B\',\n },\n};\n\nexport default () => {\n const [form] = Form.useForm();\n\n const [data, setData] = React.useState<ThemeData>(defaultData);\n\n return (\n <div>\n <ConfigProvider\n theme={{\n token: {\n colorPrimary: data.colorPrimary,\n borderRadius: data.borderRadius,\n },\n components: {\n Button: {\n colorPrimary: data.Button?.colorPrimary,\n algorithm: data.Button?.algorithm,\n },\n },\n }}\n >\n <Space>\n <Input />\n <Button type="primary">Button</Button>\n </Space>\n </ConfigProvider>\n <Divider />\n <Form\n form={form}\n onValuesChange={(_, allValues) => {\n setData({\n ...allValues,\n });\n }}\n name="theme"\n initialValues={defaultData}\n labelCol={{ span: 4 }}\n wrapperCol={{ span: 20 }}\n >\n <Form.Item\n name="colorPrimary"\n label="Primary Color"\n trigger="onChangeComplete"\n getValueFromEvent={(color: Color) => color.toHexString()}\n >\n <ColorPicker />\n </Form.Item>\n <Form.Item name="borderRadius" label="Border Radius">\n <InputNumber />\n </Form.Item>\n <Form.Item label="Button">\n <Form.Item name={[\'Button\', \'algorithm\']} valuePropName="checked" label="algorithm">\n <Switch />\n </Form.Item>\n <Form.Item\n name={[\'Button\', \'colorPrimary\']}\n label="Primary Color"\n trigger="onChangeComplete"\n getValueFromEvent={(color: Color) => color.toHexString()}\n >\n <ColorPicker />\n </Form.Item>\n </Form.Item>\n <Form.Item name="submit" wrapperCol={{ offset: 4, span: 20 }}>\n <Button type="primary">Submit</Button>\n </Form.Item>\n </Form>\n </div>\n );\n};\n';},b407145f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c9ef84a2");var o="import React from 'react';\nimport { Button, Popover, QRCode } from 'antd';\n\nconst App: React.FC = () => (\n <Popover content={<QRCode value=\"https://ant.design\" bordered={false} />}>\n <Button type=\"primary\">Hover me</Button>\n </Popover>\n);\n\nexport default App;\n";},b4310f30:function(n,e,t){},b45b7a1f:function(n,e,t){},b4643e1b:function(n,e,t){},b46f6326:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5cea4667");var o="import React, { useRef, useState } from 'react';\nimport { EllipsisOutlined } from '@ant-design/icons';\nimport { Button, Divider, Space, Tour } from 'antd';\nimport type { TourProps } from 'antd';\n\nconst App: React.FC = () => {\n const ref1 = useRef(null);\n const ref2 = useRef(null);\n const ref3 = useRef(null);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const steps: TourProps['steps'] = [\n {\n title: 'Upload File',\n description: 'Put your files here.',\n cover: (\n <img\n alt=\"tour.png\"\n src=\"https://user-images.githubusercontent.com/5378891/197385811-55df8480-7ff4-44bd-9d43-a7dade598d70.png\"\n />\n ),\n target: () => ref1.current,\n },\n {\n title: 'Save',\n description: 'Save your changes.',\n target: () => ref2.current,\n mask: {\n style: {\n boxShadow: 'inset 0 0 15px #fff',\n },\n color: 'rgba(40, 0, 255, .4)',\n },\n },\n {\n title: 'Other Actions',\n description: 'Click to see other actions.',\n target: () => ref3.current,\n mask: false,\n },\n ];\n\n return (\n <>\n <Button type=\"primary\" onClick={() => setOpen(true)}>\n Begin Tour\n </Button>\n\n <Divider />\n\n <Space>\n <Button ref={ref1}>Upload</Button>\n <Button ref={ref2} type=\"primary\">\n Save\n </Button>\n <Button ref={ref3} icon={<EllipsisOutlined />} />\n </Space>\n\n <Tour\n open={open}\n onClose={() => setOpen(false)}\n steps={steps}\n mask={{\n style: {\n boxShadow: 'inset 0 0 15px #333',\n },\n color: 'rgba(80, 255, 255, .4)',\n }}\n />\n </>\n );\n};\n\nexport default App;\n";},b4729640:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("20627d2c");var o='import React from \'react\';\nimport { Form, Input } from \'antd\';\n\nconst App: React.FC = () => (\n <Form style={{ maxWidth: 600 }}>\n <Form.Item label="Normal0">\n <Input placeholder="unavailable choice" value="Buggy!" />\n </Form.Item>\n <Form.Item label="Fail0" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" value="Buggy!" />\n </Form.Item>\n <Form.Item label="FailDisabled0" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" disabled value="Buggy!" />\n </Form.Item>\n <Form.Item label="Normal1">\n <Input placeholder="unavailable choice" value="Buggy!" />\n </Form.Item>\n <Form.Item label="Fail1" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" value="Buggy!" />\n </Form.Item>\n <Form.Item label="FailDisabled1" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" disabled value="Buggy!" />\n </Form.Item>\n <Form.Item label="Normal2">\n <Input placeholder="unavailable choice" addonBefore="Buggy!" />\n </Form.Item>\n <Form.Item label="Fail2" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" addonBefore="Buggy!" />\n </Form.Item>\n <Form.Item label="FailDisabled2" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" disabled addonBefore="Buggy!" />\n </Form.Item>\n <Form.Item label="Normal3">\n <Input placeholder="unavailable choice" prefix="\u4EBA\u6C11\u5E01" value="50" />\n </Form.Item>\n <Form.Item label="Fail3" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" prefix="\u4EBA\u6C11\u5E01" value="50" />\n </Form.Item>\n <Form.Item label="FailDisabled3" validateStatus="error" help="Buggy!">\n <Input placeholder="unavailable choice" disabled prefix="\u4EBA\u6C11\u5E01" value="50" />\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},b49a4304:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fa6f80f4");var o="import React, { useContext, useMemo } from 'react';\nimport { HolderOutlined } from '@ant-design/icons';\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport { DndContext } from '@dnd-kit/core';\nimport type { SyntheticListenerMap } from '@dnd-kit/core/dist/hooks/utilities';\nimport { restrictToVerticalAxis } from '@dnd-kit/modifiers';\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Button, Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n address: string;\n}\n\ninterface RowContextProps {\n setActivatorNodeRef?: (element: HTMLElement | null) => void;\n listeners?: SyntheticListenerMap;\n}\n\nconst RowContext = React.createContext<RowContextProps>({});\n\nconst DragHandle: React.FC = () => {\n const { setActivatorNodeRef, listeners } = useContext(RowContext);\n return (\n <Button\n type=\"text\"\n size=\"small\"\n icon={<HolderOutlined />}\n style={{ cursor: 'move' }}\n ref={setActivatorNodeRef}\n {...listeners}\n />\n );\n};\n\nconst columns: TableColumnsType<DataType> = [\n { key: 'sort', align: 'center', width: 80, render: () => <DragHandle /> },\n { title: 'Name', dataIndex: 'name' },\n { title: 'Age', dataIndex: 'age' },\n { title: 'Address', dataIndex: 'address' },\n];\n\nconst initialData: DataType[] = [\n { key: '1', name: 'John Brown', age: 32, address: 'Long text Long' },\n { key: '2', name: 'Jim Green', age: 42, address: 'London No. 1 Lake Park' },\n { key: '3', name: 'Joe Black', age: 32, address: 'Sidney No. 1 Lake Park' },\n];\n\ninterface RowProps extends React.HTMLAttributes<HTMLTableRowElement> {\n 'data-row-key': string;\n}\n\nconst Row: React.FC<RowProps> = (props) => {\n const {\n attributes,\n listeners,\n setNodeRef,\n setActivatorNodeRef,\n transform,\n transition,\n isDragging,\n } = useSortable({ id: props['data-row-key'] });\n\n const style: React.CSSProperties = {\n ...props.style,\n transform: CSS.Translate.toString(transform),\n transition,\n ...(isDragging ? { position: 'relative', zIndex: 9999 } : {}),\n };\n\n const contextValue = useMemo<RowContextProps>(\n () => ({ setActivatorNodeRef, listeners }),\n [setActivatorNodeRef, listeners],\n );\n\n return (\n <RowContext.Provider value={contextValue}>\n <tr {...props} ref={setNodeRef} style={style} {...attributes} />\n </RowContext.Provider>\n );\n};\n\nconst App: React.FC = () => {\n const [dataSource, setDataSource] = React.useState<DataType[]>(initialData);\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n setDataSource((prevState) => {\n const activeIndex = prevState.findIndex((record) => record.key === active?.id);\n const overIndex = prevState.findIndex((record) => record.key === over?.id);\n return arrayMove(prevState, activeIndex, overIndex);\n });\n }\n };\n\n return (\n <DndContext modifiers={[restrictToVerticalAxis]} onDragEnd={onDragEnd}>\n <SortableContext items={dataSource.map((i) => i.key)} strategy={verticalListSortingStrategy}>\n <Table<DataType>\n rowKey=\"key\"\n components={{ body: { row: Row } }}\n columns={columns}\n dataSource={dataSource}\n />\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default App;\n";},b4a108c7:function(n,e,t){},b4c0095a:function(n,e,t){},b4de0246:function(n,e,t){},b4e30579:function(n,e,t){},b4ecb395:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ad640b4f");var o='import React from \'react\';\nimport { SearchOutlined } from \'@ant-design/icons\';\nimport { Button, Input, Select, Space } from \'antd\';\n\nconst { Search } = Input;\n\nconst options = [\n {\n value: \'zhejiang\',\n label: \'Zhejiang\',\n },\n {\n value: \'jiangsu\',\n label: \'Jiangsu\',\n },\n];\n\nconst App: React.FC = () => (\n <Space direction="vertical" size="middle">\n <Space.Compact>\n <Input defaultValue="26888888" />\n </Space.Compact>\n <Space.Compact>\n <Input style={{ width: \'20%\' }} defaultValue="0571" />\n <Input style={{ width: \'80%\' }} defaultValue="26888888" />\n </Space.Compact>\n <Space.Compact>\n <Search addonBefore="https://" placeholder="input search text" allowClear />\n </Space.Compact>\n <Space.Compact style={{ width: \'100%\' }}>\n <Input defaultValue="Combine input and button" />\n <Button type="primary">Submit</Button>\n </Space.Compact>\n <Space.Compact>\n <Select defaultValue="Zhejiang" options={options} />\n <Input defaultValue="Xihu District, Hangzhou" />\n </Space.Compact>\n <Space.Compact size="large">\n <Input addonBefore={<SearchOutlined />} placeholder="large size" />\n <Input placeholder="another input" />\n </Space.Compact>\n </Space>\n);\n\nexport default App;\n';},b50a2fbc:function(n,e,t){},b5282d6c:function(n,e,t){},b529e592:function(n,e,t){},b54e5036:function(n,e,t){},b587b8a6:function(n,e,t){},b5aa0ff5:function(n,e,t){},b5aad532:function(n,e,t){},b5b7750d:function(n,e,t){},b5e15e8d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("11d7ebd8");var o="import React from 'react';\nimport { FloatButton } from 'antd';\n\nconst App: React.FC = () => <FloatButton onClick={() => console.log('onClick')} />;\n\nexport default App;\n";},b5e7f403:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a5668354");var o='import React from \'react\';\nimport { Flex, InputNumber } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap={12}>\n <Flex gap={12}>\n <InputNumber placeholder="Filled" variant="filled" />\n <InputNumber placeholder="Filled" variant="filled" disabled />\n <InputNumber placeholder="Filled" variant="filled" status="error" />\n </Flex>\n <Flex gap={12}>\n <InputNumber prefix="$" placeholder="Filled" variant="filled" />\n <InputNumber prefix="$" placeholder="Filled" variant="filled" disabled />\n <InputNumber prefix="$" placeholder="Filled" variant="filled" status="error" />\n </Flex>\n <Flex gap={12}>\n <InputNumber addonBefore="http://" addonAfter=".com" placeholder="Filled" variant="filled" />\n <InputNumber\n addonBefore="http://"\n addonAfter=".com"\n placeholder="Filled"\n variant="filled"\n disabled\n />\n <InputNumber\n addonBefore="http://"\n addonAfter=".com"\n placeholder="Filled"\n variant="filled"\n status="error"\n />\n </Flex>\n <Flex gap={12}>\n <InputNumber addonAfter=".com" placeholder="Filled" variant="filled" />\n <InputNumber addonAfter=".com" placeholder="Filled" variant="filled" disabled />\n <InputNumber addonAfter=".com" placeholder="Filled" variant="filled" status="error" />\n </Flex>\n <Flex gap={12}>\n <InputNumber addonBefore="http://" placeholder="Filled" variant="filled" />\n <InputNumber addonBefore="http://" placeholder="Filled" variant="filled" disabled />\n <InputNumber addonBefore="http://" placeholder="Filled" variant="filled" status="error" />\n </Flex>\n </Flex>\n);\n\nexport default App;\n';},b612f025:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5ec13616");var o="import React from 'react';\nimport { Anchor, Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <Row>\n <Col span={16}>\n <div id=\"part-1\" style={{ height: '100vh', background: 'rgba(255,0,0,0.02)' }} />\n <div id=\"part-2\" style={{ height: '100vh', background: 'rgba(0,255,0,0.02)' }} />\n <div id=\"part-3\" style={{ height: '100vh', background: 'rgba(0,0,255,0.02)' }} />\n </Col>\n <Col span={8}>\n <Anchor\n replace\n items={[\n {\n key: 'part-1',\n href: '#part-1',\n title: 'Part 1',\n },\n {\n key: 'part-2',\n href: '#part-2',\n title: 'Part 2',\n },\n {\n key: 'part-3',\n href: '#part-3',\n title: 'Part 3',\n },\n ]}\n />\n </Col>\n </Row>\n);\n\nexport default App;\n";},b627cbb5:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9a44978c");var o="import React from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { Alert, ConfigProvider } from 'antd';\n\nconst icon = <SmileOutlined />;\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Alert: {\n withDescriptionIconSize: 32,\n withDescriptionPadding: 16,\n },\n },\n }}\n >\n <Alert\n icon={icon}\n message=\"Success Tips\"\n description=\"Detailed description and advice about successful copywriting.\"\n type=\"success\"\n showIcon\n />\n </ConfigProvider>\n);\n\nexport default App;\n";},b62d2ca9:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("019b2ff2");var o='import React, { useMemo, useState } from \'react\';\nimport { Button, ConfigProvider, Flex, Popover, Segmented } from \'antd\';\nimport type { PopoverProps } from \'antd\';\n\nconst text = <span>Title</span>;\n\nconst buttonWidth = 80;\n\nconst content = (\n <div>\n <p>Content</p>\n <p>Content</p>\n </div>\n);\n\nconst App: React.FC = () => {\n const [arrow, setArrow] = useState<\'Show\' | \'Hide\' | \'Center\'>(\'Show\');\n\n const mergedArrow = useMemo<PopoverProps[\'arrow\']>(() => {\n if (arrow === \'Hide\') {\n return false;\n }\n\n if (arrow === \'Show\') {\n return true;\n }\n\n return {\n pointAtCenter: true,\n };\n }, [arrow]);\n\n return (\n <ConfigProvider button={{ style: { width: buttonWidth, margin: 4 } }}>\n <Segmented\n options={[\'Show\', \'Hide\', \'Center\']}\n onChange={setArrow}\n style={{ marginBottom: 24 }}\n />\n <Flex vertical justify="center" align="center" className="demo">\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Popover placement="topLeft" title={text} content={content} arrow={mergedArrow}>\n <Button>TL</Button>\n </Popover>\n <Popover placement="top" title={text} content={content} arrow={mergedArrow}>\n <Button>Top</Button>\n </Popover>\n <Popover placement="topRight" title={text} content={content} arrow={mergedArrow}>\n <Button>TR</Button>\n </Popover>\n </Flex>\n <Flex style={{ width: buttonWidth * 5 + 32 }} justify="space-between" align="center">\n <Flex align="center" vertical>\n <Popover placement="leftTop" title={text} content={content} arrow={mergedArrow}>\n <Button>LT</Button>\n </Popover>\n <Popover placement="left" title={text} content={content} arrow={mergedArrow}>\n <Button>Left</Button>\n </Popover>\n <Popover placement="leftBottom" title={text} content={content} arrow={mergedArrow}>\n <Button>LB</Button>\n </Popover>\n </Flex>\n <Flex align="center" vertical>\n <Popover placement="rightTop" title={text} content={content} arrow={mergedArrow}>\n <Button>RT</Button>\n </Popover>\n <Popover placement="right" title={text} content={content} arrow={mergedArrow}>\n <Button>Right</Button>\n </Popover>\n <Popover placement="rightBottom" title={text} content={content} arrow={mergedArrow}>\n <Button>RB</Button>\n </Popover>\n </Flex>\n </Flex>\n <Flex justify="center" align="center" style={{ whiteSpace: \'nowrap\' }}>\n <Popover placement="bottomLeft" title={text} content={content} arrow={mergedArrow}>\n <Button>BL</Button>\n </Popover>\n <Popover placement="bottom" title={text} content={content} arrow={mergedArrow}>\n <Button>Bottom</Button>\n </Popover>\n <Popover placement="bottomRight" title={text} content={content} arrow={mergedArrow}>\n <Button>BR</Button>\n </Popover>\n </Flex>\n </Flex>\n </ConfigProvider>\n );\n};\n\nexport default App;\n';},b641b1a6:function(n,e,t){},b64684ef:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8fff5278");var o="import React from 'react';\nimport { Button, Descriptions, DescriptionsProps, Divider, Switch } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n header: '\u5934\u90E8\u5143\u7D20',\n title: '\u6807\u9898\u5143\u7D20',\n extra: '\u989D\u5916\u5185\u5BB9',\n label: '\u6807\u7B7E\u5143\u7D20',\n content: '\u5185\u5BB9\u5143\u7D20',\n },\n en: {\n root: 'root element',\n header: 'header element',\n title: 'title element',\n extra: 'extra element',\n label: 'label element',\n content: 'content element',\n },\n};\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Telephone',\n children: '1810000000',\n },\n];\n\nconst BlockList: React.FC<React.PropsWithChildren> = (props: any) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n const [bordered, setBordered] = React.useState(false);\n\n const handleBorderChange = (checked: boolean) => {\n setBordered(checked);\n };\n\n return (\n <div ref={divRef} style={{ width: '100%', height: '100%' }}>\n <Switch checked={bordered} onChange={handleBorderChange} /> Toggle Border\n <Divider />\n <Descriptions\n title=\"User Info\"\n items={items}\n extra={<Button type=\"primary\">Edit</Button>}\n bordered={bordered}\n {...props}\n />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Descriptions\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.23.0' },\n { name: 'header', desc: locale.header, version: '5.23.0' },\n { name: 'title', desc: locale.title, version: '5.23.0' },\n { name: 'extra', desc: locale.extra, version: '5.23.0' },\n { name: 'label', desc: locale.label, version: '5.23.0' },\n { name: 'content', desc: locale.content, version: '5.23.0' },\n ]}\n >\n <BlockList />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},b64d61e0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7b449b2e");var o="import React from 'react';\nimport { Pagination } from 'antd';\n\nconst App: React.FC = () => <Pagination defaultCurrent={1} total={50} />;\n\nexport default App;\n";},b64fae25:function(n,e,t){},b6664b19:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2d4c5ad8");var o="import React, { useState } from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport { Button, message, Upload } from 'antd';\nimport type { GetProp, UploadFile, UploadProps } from 'antd';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst App: React.FC = () => {\n const [fileList, setFileList] = useState<UploadFile[]>([]);\n const [uploading, setUploading] = useState(false);\n\n const handleUpload = () => {\n const formData = new FormData();\n fileList.forEach((file) => {\n formData.append('files[]', file as FileType);\n });\n setUploading(true);\n // You can use any AJAX library you like\n fetch('https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload', {\n method: 'POST',\n body: formData,\n })\n .then((res) => res.json())\n .then(() => {\n setFileList([]);\n message.success('upload successfully.');\n })\n .catch(() => {\n message.error('upload failed.');\n })\n .finally(() => {\n setUploading(false);\n });\n };\n\n const props: UploadProps = {\n onRemove: (file) => {\n const index = fileList.indexOf(file);\n const newFileList = fileList.slice();\n newFileList.splice(index, 1);\n setFileList(newFileList);\n },\n beforeUpload: (file) => {\n setFileList([...fileList, file]);\n\n return false;\n },\n fileList,\n };\n\n return (\n <>\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Select File</Button>\n </Upload>\n <Button\n type=\"primary\"\n onClick={handleUpload}\n disabled={fileList.length === 0}\n loading={uploading}\n style={{ marginTop: 16 }}\n >\n {uploading ? 'Uploading' : 'Start Upload'}\n </Button>\n </>\n );\n};\n\nexport default App;\n";},b67a657d:function(n,e,t){},b68b9580:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f66e75ae");var o="import React, { useState } from 'react';\nimport { Button, Drawer, Space } from 'antd';\nimport type { DrawerProps } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [size, setSize] = useState<DrawerProps['size']>();\n\n const showDefaultDrawer = () => {\n setSize('default');\n setOpen(true);\n };\n\n const showLargeDrawer = () => {\n setSize('large');\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n return (\n <>\n <Space>\n <Button type=\"primary\" onClick={showDefaultDrawer}>\n Open Default Size (378px)\n </Button>\n <Button type=\"primary\" onClick={showLargeDrawer}>\n Open Large Size (736px)\n </Button>\n </Space>\n <Drawer\n title={`${size} Drawer`}\n placement=\"right\"\n size={size}\n onClose={onClose}\n open={open}\n extra={\n <Space>\n <Button onClick={onClose}>Cancel</Button>\n <Button type=\"primary\" onClick={onClose}>\n OK\n </Button>\n </Space>\n }\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Drawer>\n </>\n );\n};\n\nexport default App;\n";},b69ed472:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("13e2f7ca");var o="import React, { useState } from 'react';\nimport { MailOutlined } from '@ant-design/icons';\nimport type { MenuProps, MenuTheme } from 'antd';\nimport { Menu, Switch } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst App: React.FC = () => {\n const [menuTheme, setMenuTheme] = useState<MenuTheme>('light');\n const [current, setCurrent] = useState('1');\n\n const changeTheme = (value: boolean) => {\n setMenuTheme(value ? 'dark' : 'light');\n };\n\n const onClick: MenuProps['onClick'] = (e) => {\n setCurrent(e.key);\n };\n\n const items: MenuItem[] = [\n {\n key: 'sub1',\n icon: <MailOutlined />,\n label: 'Navigation One',\n theme: menuTheme,\n children: [\n { key: '1', label: 'Option 1' },\n { key: '2', label: 'Option 2' },\n { key: '3', label: 'Option 3' },\n ],\n },\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n ];\n\n return (\n <>\n <Switch\n checked={menuTheme === 'dark'}\n onChange={changeTheme}\n checkedChildren=\"Dark\"\n unCheckedChildren=\"Light\"\n />\n <br />\n <br />\n <Menu\n onClick={onClick}\n style={{ width: 256 }}\n openKeys={['sub1']}\n selectedKeys={[current]}\n mode=\"vertical\"\n theme=\"dark\"\n items={items}\n getPopupContainer={(node) => node.parentNode as HTMLElement}\n />\n </>\n );\n};\n\nexport default App;\n";},b6d13fe0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("48147498");var o="import React from 'react';\nimport { Button, Tooltip } from 'antd';\n\nconst style: React.CSSProperties = {\n width: '300vw',\n height: '300vh',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n};\n\nconst App: React.FC = () => {\n React.useEffect(() => {\n document.documentElement.scrollTop = document.documentElement.clientHeight;\n document.documentElement.scrollLeft = document.documentElement.clientWidth;\n }, []);\n return (\n <div style={style}>\n <Tooltip title=\"Thanks for using antd. Have a nice day !\" open>\n <Button type=\"primary\">Scroll The Window</Button>\n </Tooltip>\n </div>\n );\n};\n\nexport default App;\n";},b6f1a1a6:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c249487a");var o="import React from 'react';\nimport { Badge, Descriptions } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: 'Billing Mode',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Automatic Renewal',\n children: 'YES',\n },\n {\n key: '4',\n label: 'Order time',\n children: '2018-04-24 18:00:00',\n },\n {\n key: '5',\n label: 'Usage Time',\n span: 2,\n children: '2019-04-24 18:00:00',\n },\n {\n key: '6',\n label: 'Status',\n span: 3,\n children: <Badge status=\"processing\" text=\"Running\" />,\n },\n {\n key: '7',\n label: 'Negotiated Amount',\n children: '$80.00',\n },\n {\n key: '8',\n label: 'Discount',\n children: '$20.00',\n },\n {\n key: '9',\n label: 'Official Receipts',\n children: '$60.00',\n },\n {\n key: '10',\n label: 'Config Info',\n children: (\n <>\n Data disk type: MongoDB\n <br />\n Database version: 3.4\n <br />\n Package: dds.mongo.mid\n <br />\n Storage space: 10 GB\n <br />\n Replication factor: 3\n <br />\n Region: East China 1\n <br />\n </>\n ),\n },\n];\n\nconst App: React.FC = () => (\n <Descriptions title=\"User Info\" layout=\"vertical\" bordered items={items} />\n);\n\nexport default App;\n";},b70b4420:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("db86ba00");var o="import React from 'react';\nimport { Flex, Radio } from 'antd';\nimport type { CheckboxGroupProps } from 'antd/es/checkbox';\n\nconst options: CheckboxGroupProps<string>['options'] = [\n { label: 'Apple', value: 'Apple' },\n { label: 'Pear', value: 'Pear' },\n { label: 'Orange', value: 'Orange' },\n];\n\nconst App: React.FC = () => (\n <Flex vertical gap=\"middle\">\n <Radio.Group block options={options} defaultValue=\"Apple\" />\n <Radio.Group\n block\n options={options}\n defaultValue=\"Apple\"\n optionType=\"button\"\n buttonStyle=\"solid\"\n />\n <Radio.Group block options={options} defaultValue=\"Pear\" optionType=\"button\" />\n </Flex>\n);\n\nexport default App;\n";},b72386f7:function(n,e,t){},b75525dd:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7eba4d04");var o="import React, { useState } from 'react';\nimport { Select } from 'antd';\n\nconst OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];\n\nconst App: React.FC = () => {\n const [selectedItems, setSelectedItems] = useState<string[]>([]);\n\n const filteredOptions = OPTIONS.filter((o) => !selectedItems.includes(o));\n\n return (\n <Select\n mode=\"multiple\"\n placeholder=\"Inserted are removed\"\n value={selectedItems}\n onChange={setSelectedItems}\n style={{ width: '100%' }}\n options={filteredOptions.map((item) => ({\n value: item,\n label: item,\n }))}\n />\n );\n};\n\nexport default App;\n";},b79fdc3a:function(n,e,t){},b7d39d86:function(n,e,t){},b8248a30:function(n,e,t){},b833bded:function(n,e,t){},b83529d0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("817e6e70");var o='import React from \'react\';\nimport { Alert, Form, Input } from \'antd\';\n\nconst App: React.FC = () => (\n <Form name="trigger" style={{ maxWidth: 600 }} layout="vertical" autoComplete="off">\n <Alert message="Use \'max\' rule, continue type chars to see it" />\n\n <Form.Item\n hasFeedback\n label="Field A"\n name="field_a"\n validateTrigger="onBlur"\n rules={[{ max: 3 }]}\n >\n <Input placeholder="Validate required onBlur" />\n </Form.Item>\n\n <Form.Item\n hasFeedback\n label="Field B"\n name="field_b"\n validateDebounce={1000}\n rules={[{ max: 3 }]}\n >\n <Input placeholder="Validate required debounce after 1s" />\n </Form.Item>\n\n <Form.Item\n hasFeedback\n label="Field C"\n name="field_c"\n validateFirst\n rules={[{ max: 6 }, { max: 3, message: \'Continue input to exceed 6 chars\' }]}\n >\n <Input placeholder="Validate one by one" />\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},b8383807:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6ee9ae25");var o="import React, { useState } from 'react';\nimport type { DatePickerProps, RadioChangeEvent } from 'antd';\nimport { DatePicker, Radio } from 'antd';\n\nconst { RangePicker } = DatePicker;\n\nconst App: React.FC = () => {\n const [placement, SetPlacement] = useState<DatePickerProps['placement']>('topLeft');\n\n const placementChange = (e: RadioChangeEvent) => {\n SetPlacement(e.target.value);\n };\n\n return (\n <>\n <Radio.Group value={placement} onChange={placementChange}>\n <Radio.Button value=\"topLeft\">topLeft</Radio.Button>\n <Radio.Button value=\"topRight\">topRight</Radio.Button>\n <Radio.Button value=\"bottomLeft\">bottomLeft</Radio.Button>\n <Radio.Button value=\"bottomRight\">bottomRight</Radio.Button>\n </Radio.Group>\n <br />\n <br />\n <DatePicker placement={placement} />\n <br />\n <br />\n <RangePicker placement={placement} />\n </>\n );\n};\n\nexport default App;\n";},b84673cf:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ca48c88c");var o="import React, { useState } from 'react';\nimport { EllipsisOutlined } from '@ant-design/icons';\nimport type {\n ConfigProviderProps,\n RadioChangeEvent,\n TableProps,\n TourProps,\n UploadFile,\n} from 'antd';\nimport {\n Button,\n Calendar,\n ConfigProvider,\n DatePicker,\n Divider,\n Form,\n Image,\n Input,\n InputNumber,\n Modal,\n Pagination,\n Popconfirm,\n QRCode,\n Radio,\n Select,\n Space,\n Table,\n theme,\n TimePicker,\n Tour,\n Transfer,\n Upload,\n} from 'antd';\nimport enUS from 'antd/locale/en_US';\nimport zhCN from 'antd/locale/zh_CN';\nimport dayjs from 'dayjs';\n\nimport 'dayjs/locale/zh-cn';\n\ntype Locale = ConfigProviderProps['locale'];\n\ndayjs.locale('en');\n\nconst { Option } = Select;\nconst { RangePicker } = DatePicker;\n\nconst columns: TableProps['columns'] = [\n {\n title: 'Name',\n dataIndex: 'name',\n filters: [{ text: 'filter1', value: 'filter1' }],\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n];\n\nconst Page: React.FC = () => {\n const { token } = theme.useToken();\n\n const [open, setOpen] = useState(false);\n const [tourOpen, setTourOpen] = useState(false);\n const tourRefs = React.useRef<HTMLElement[]>([]);\n\n const showModal = () => {\n setOpen(true);\n };\n\n const hideModal = () => {\n setOpen(false);\n };\n\n const info = () => {\n Modal.info({\n title: 'some info',\n content: 'some info',\n });\n };\n\n const confirm = () => {\n Modal.confirm({\n title: 'some info',\n content: 'some info',\n });\n };\n\n const steps: TourProps['steps'] = [\n {\n title: 'Upload File',\n description: 'Put your files here.',\n target: () => tourRefs.current[0],\n },\n {\n title: 'Save',\n description: 'Save your changes.',\n target: () => tourRefs.current[1],\n },\n {\n title: 'Other Actions',\n description: 'Click to see other actions.',\n target: () => tourRefs.current[2],\n },\n ];\n\n const fileList: UploadFile[] = [\n {\n uid: '-1',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-2',\n percent: 50,\n name: 'image.png',\n status: 'uploading',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-3',\n name: 'image.png',\n status: 'error',\n },\n ];\n\n return (\n <Space\n direction=\"vertical\"\n size={[0, 16]}\n style={{ width: '100%', paddingTop: 16, borderTop: `1px solid ${token.colorBorder}` }}\n >\n <Pagination defaultCurrent={1} total={50} showSizeChanger />\n <Space wrap>\n <Select showSearch style={{ width: 200 }}>\n <Option value=\"jack\">jack</Option>\n <Option value=\"lucy\">lucy</Option>\n </Select>\n <DatePicker />\n <TimePicker />\n <RangePicker />\n </Space>\n <Space wrap>\n <Button type=\"primary\" onClick={showModal}>\n Show Modal\n </Button>\n <Button onClick={info}>Show info</Button>\n <Button onClick={confirm}>Show confirm</Button>\n <Popconfirm title=\"Question?\">\n <a href=\"#\">Click to confirm</a>\n </Popconfirm>\n </Space>\n <Transfer dataSource={[]} showSearch targetKeys={[]} />\n <div style={{ width: 320, border: `1px solid ${token.colorBorder}`, borderRadius: 8 }}>\n <Calendar fullscreen={false} value={dayjs()} />\n </div>\n <Form name=\"basic\" autoComplete=\"off\" labelCol={{ sm: { span: 4 } }} wrapperCol={{ span: 6 }}>\n <Form.Item label=\"Username\" name=\"username\" rules={[{ required: true }]}>\n <Input width={200} />\n </Form.Item>\n <Form.Item\n label=\"Age\"\n name=\"age\"\n rules={[{ type: 'number', min: 0, max: 99 }]}\n initialValue={100}\n >\n <InputNumber width={200} />\n </Form.Item>\n <Form.Item wrapperCol={{ offset: 2, span: 6 }}>\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n </Form.Item>\n </Form>\n <Table dataSource={[]} columns={columns} />\n <Modal title=\"Locale Modal\" open={open} onCancel={hideModal}>\n <p>Locale Modal</p>\n </Modal>\n <Space wrap size={80}>\n <QRCode\n value=\"https://ant.design/\"\n status=\"expired\"\n onRefresh={() => console.log('refresh')}\n />\n <Image\n width={160}\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n />\n </Space>\n <Upload listType=\"picture-card\" fileList={fileList} />\n <Divider orientation=\"left\">Tour</Divider>\n <Button type=\"primary\" onClick={() => setTourOpen(true)}>\n Begin Tour\n </Button>\n <Space>\n <Button\n ref={(node) => {\n node && tourRefs.current.splice(0, 0, node);\n }}\n >\n {' '}\n Upload\n </Button>\n <Button\n ref={(node) => {\n node && tourRefs.current.splice(1, 0, node);\n }}\n type=\"primary\"\n >\n Save\n </Button>\n <Button\n ref={(node) => {\n node && tourRefs.current.splice(2, 0, node);\n }}\n icon={<EllipsisOutlined />}\n />\n </Space>\n <Tour open={tourOpen} steps={steps} onClose={() => setTourOpen(false)} />\n </Space>\n );\n};\n\nconst App: React.FC = () => {\n const [locale, setLocal] = useState<Locale>(enUS);\n\n const changeLocale = (e: RadioChangeEvent) => {\n const localeValue = e.target.value;\n setLocal(localeValue);\n if (!localeValue) {\n dayjs.locale('en');\n } else {\n dayjs.locale('zh-cn');\n }\n };\n\n return (\n <>\n <div style={{ marginBottom: 16 }}>\n <span style={{ marginInlineEnd: 16 }}>Change locale of components:</span>\n <Radio.Group value={locale} onChange={changeLocale}>\n <Radio.Button key=\"en\" value={enUS}>\n English\n </Radio.Button>\n <Radio.Button key=\"cn\" value={zhCN}>\n \u4E2D\u6587\n </Radio.Button>\n </Radio.Group>\n </div>\n <ConfigProvider locale={locale}>\n <Page />\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},b849b681:function(n,e,t){},b85d9b21:function(n,e,t){},b86c6132:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e3c09e2b");var o="import React from 'react';\nimport { Tree } from 'antd';\nimport type { GetProps, TreeDataNode } from 'antd';\n\ntype DirectoryTreeProps = GetProps<typeof Tree.DirectoryTree>;\n\nconst { DirectoryTree } = Tree;\n\nconst treeData: TreeDataNode[] = [\n {\n title: 'parent 0',\n key: '0-0',\n children: [\n { title: 'leaf 0-0', key: '0-0-0', isLeaf: true },\n { title: 'leaf 0-1', key: '0-0-1', isLeaf: true },\n ],\n },\n {\n title: 'parent 1',\n key: '0-1',\n children: [\n { title: 'leaf 1-0', key: '0-1-0', isLeaf: true },\n { title: 'leaf 1-1', key: '0-1-1', isLeaf: true },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const onSelect: DirectoryTreeProps['onSelect'] = (keys, info) => {\n console.log('Trigger Select', keys, info);\n };\n\n const onExpand: DirectoryTreeProps['onExpand'] = (keys, info) => {\n console.log('Trigger Expand', keys, info);\n };\n\n return (\n <DirectoryTree\n multiple\n draggable\n defaultExpandAll\n onSelect={onSelect}\n onExpand={onExpand}\n treeData={treeData}\n />\n );\n};\n\nexport default App;\n";},b8956abc:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b3a77fe3");var o="import React from 'react';\nimport { Alert, ConfigProvider, Input, Typography } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Typography.Title level={4}>Open single page to check the console</Typography.Title>\n <ConfigProvider warning={{ strict: false }}>\n <Alert closeText=\"deprecated\" />\n <Input.Group />\n </ConfigProvider>\n </>\n);\n\nexport default App;\n";},b8a23b88:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1e1edef3");var o='import React from \'react\';\nimport { InfoCircleOutlined, UserOutlined } from \'@ant-design/icons\';\nimport { Input, Tooltip } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Input\n placeholder="Enter your username"\n prefix={<UserOutlined style={{ color: \'rgba(0,0,0,.25)\' }} />}\n suffix={\n <Tooltip title="Extra information">\n <InfoCircleOutlined style={{ color: \'rgba(0,0,0,.45)\' }} />\n </Tooltip>\n }\n />\n <br />\n <br />\n <Input prefix="\uFFE5" suffix="RMB" />\n <br />\n <br />\n <Input prefix="\uFFE5" suffix="RMB" disabled />\n </>\n);\n\nexport default App;\n';},b8a4c676:function(n,e,t){},b8b0839b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("78086bd0");var o="import React from 'react';\nimport { ConfigProvider, Pagination } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <Pagination showSizeChanger defaultCurrent={3} total={500} />\n <br />\n <Pagination showSizeChanger defaultCurrent={3} total={500} disabled />\n <br />\n <Pagination size=\"small\" defaultCurrent={50} total={500} />\n <br />\n <Pagination disabled size=\"small\" defaultCurrent={50} total={500} />\n </ConfigProvider>\n);\n\nexport default App;\n";},b8b8c62f:function(n,e,t){},b8c1d814:function(n,e,t){},b9500f32:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("15b75b35");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex wrap gap="small">\n <Progress type="circle" percent={30} size={80} />\n <Progress type="circle" percent={70} size={80} status="exception" />\n <Progress type="circle" percent={100} size={80} />\n </Flex>\n);\n\nexport default App;\n';},b962974f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("31220063");var o="import React from 'react';\nimport { TreeSelect } from 'antd';\nimport type { TreeSelectProps } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n 'popup.root': '\u5F39\u51FA\u83DC\u5355\u5143\u7D20',\n },\n en: {\n root: 'Root element',\n 'popup.root': 'Popup element',\n },\n};\nconst treeData = [\n {\n value: 'contributors',\n title: 'contributors',\n children: [\n {\n value: 'thinkasany',\n title: 'thinkasany',\n },\n {\n value: 'aojunhao123',\n title: 'aojunhao123',\n },\n ],\n },\n];\n\nconst Block: React.FC<Readonly<TreeSelectProps>> = (props) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n const [value, setValue] = React.useState<string>();\n return (\n <div ref={divRef}>\n <TreeSelect\n {...props}\n getPopupContainer={() => divRef.current!}\n showSearch\n placement=\"bottomLeft\"\n open\n style={{ width: 200, marginBottom: 80, marginTop: -10 }}\n styles={{ popup: { root: { zIndex: 1, height: 90 } } }}\n value={value}\n placeholder=\"Please select\"\n treeDefaultExpandAll\n onChange={setValue}\n treeData={treeData}\n />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"TreeSelect\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.25.0' },\n { name: 'popup.root', desc: locale['popup.root'], version: '5.25.0' },\n ]}\n >\n <Block />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},b9cc4c30:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("479180ec");var o='import React from \'react\';\nimport { Alert } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Alert\n message="Success Text"\n description="Success Description Success Description Success Description"\n type="success"\n />\n <br />\n <Alert\n message="Info Text"\n description="Info Description Info Description Info Description Info Description"\n type="info"\n />\n <br />\n <Alert\n message="Warning Text"\n description="Warning Description Warning Description Warning Description Warning Description"\n type="warning"\n />\n <br />\n <Alert\n message="Error Text"\n description="Error Description Error Description Error Description Error Description"\n type="error"\n />\n </>\n);\n\nexport default App;\n';},b9d76efc:function(n,e,t){},ba0b3f02:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0366fe8d");var o="import React, { useState } from 'react';\nimport { Button, Slider, Switch, Typography } from 'antd';\n\nconst { Text, Paragraph } = Typography;\n\nconst templateStr =\n '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.';\n\nconst text = `this is a multiline\n text that has many\n lines and \n - render like this\n - and this\n \n and that`;\n\nconst App: React.FC = () => {\n const [rows, setRows] = useState(1);\n const [longText, setLongText] = useState(true);\n const [copyable, setCopyable] = useState(false);\n const [editable, setEditable] = useState(false);\n const [expandable, setExpandable] = useState(false);\n const [display, setDisplay] = useState('none');\n\n React.useEffect(() => {\n setTimeout(() => {\n setDisplay('block');\n }, 100);\n }, []);\n\n return (\n <>\n <Switch checked={longText} checkedChildren=\"Long Text\" onChange={setLongText} />\n <Switch checked={copyable} onChange={setCopyable} />\n <Switch checked={editable} onChange={setEditable} />\n <Switch checked={expandable} onChange={setExpandable} />\n <Slider value={rows} min={1} max={10} onChange={setRows} />\n {longText ? (\n <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>\n Ant Design, a design language for background applications, is refined by Ant UED Team.\n This is a nest sample{' '}\n <Text code strong delete>\n Test\n </Text>{' '}\n case. Bnt Design, a design language for background applications, is refined by Ant UED\n Team. Cnt Design, a design language for background applications, is refined by Ant UED\n Team. Dnt Design, a design language for background applications, is refined by Ant UED\n Team. Ent Design, a design language for background applications, is refined by Ant UED\n Team.\n </Paragraph>\n ) : (\n <Paragraph ellipsis={{ rows, expandable }} copyable={copyable} editable={editable}>\n Hello World\n </Paragraph>\n )}\n\n <Text style={{ maxWidth: 400, fontSize: 24 }} copyable ellipsis>\n {templateStr}\n </Text>\n\n <br />\n\n <Text style={{ maxWidth: 400, fontSize: 12 }} copyable ellipsis>\n {templateStr}\n </Text>\n\n <br />\n\n <Text style={{ width: 400, fontSize: 24 }} copyable ellipsis>\n {templateStr}\n </Text>\n\n <br />\n\n <Text style={{ width: 100 }} ellipsis copyable>\n Ant Design is a design language for background applications, is refined by Ant UED Team.\n </Text>\n\n <p>\n [Before]<Text ellipsis>not ellipsis</Text>[After]\n </p>\n\n <div style={{ display }}>\n <Text style={{ width: 100 }} ellipsis={{ tooltip: 'I am ellipsis now!' }}>\n \u9ED8\u8BA4display none \u6837\u5F0F\u7684\u8D85\u957F\u6587\u5B57\uFF0C \u60AC\u505Ctooltip\u5931\u6548\u4E86\n </Text>\n </div>\n\n <Typography.Paragraph\n style={{ width: 300 }}\n ellipsis={{\n rows: 3,\n expandable: true,\n symbol: <Button>Open</Button>,\n }}\n >\n {templateStr.slice(0, 60)}\n <span style={{ fontSize: '5em' }}>ANTD</span>\n {templateStr.slice(60)}\n </Typography.Paragraph>\n\n <pre>\n <Typography.Paragraph ellipsis={{ rows: 2, expandable: true }}>{text}</Typography.Paragraph>\n </pre>\n\n <br />\n\n <Text style={{ width: 100, whiteSpace: 'nowrap' }} ellipsis copyable>\n {templateStr}\n </Text>\n </>\n );\n};\n\nexport default App;\n";},ba3d7b80:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a00364bb");var o="import React from 'react';\nimport { Button, Space } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n item: '\u5305\u88F9\u7684\u5B50\u7EC4\u4EF6',\n },\n en: {\n item: 'Wrapped item element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Space\"\n semantics={[{ name: 'item', desc: locale.item, version: '5.6.0' }]}\n >\n <Space>\n <Button type=\"primary\">Primary</Button>\n <Button>Default</Button>\n <Button type=\"dashed\">Dashed</Button>\n </Space>\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},ba45390e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1b8afa9d");var o="import React from 'react';\nimport { Badge, Divider, Space } from 'antd';\n\nconst colors = [\n 'pink',\n 'red',\n 'yellow',\n 'orange',\n 'cyan',\n 'green',\n 'blue',\n 'purple',\n 'geekblue',\n 'magenta',\n 'volcano',\n 'gold',\n 'lime',\n];\n\nconst App: React.FC = () => (\n <>\n <Divider orientation=\"left\">Presets</Divider>\n <Space direction=\"vertical\">\n {colors.map((color) => (\n <Badge key={color} color={color} text={color} />\n ))}\n </Space>\n <Divider orientation=\"left\">Custom</Divider>\n <Space direction=\"vertical\">\n <Badge color=\"#f50\" text=\"#f50\" />\n <Badge color=\"rgb(45, 183, 245)\" text=\"rgb(45, 183, 245)\" />\n <Badge color=\"hsl(102, 53%, 61%)\" text=\"hsl(102, 53%, 61%)\" />\n <Badge color=\"hwb(205 6% 9%)\" text=\"hwb(205 6% 9%)\" />\n </Space>\n </>\n);\n\nexport default App;\n";},ba5173db:function(n,e,t){},bacab65a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3f681966");var o='import React from \'react\';\nimport { Alert, Form, Input, Typography } from \'antd\';\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n return (\n <Form\n form={form}\n name="dependencies"\n autoComplete="off"\n style={{ maxWidth: 600 }}\n layout="vertical"\n >\n <Alert message=" Try modify `Password2` and then modify `Password`" type="info" showIcon />\n\n <Form.Item label="Password" name="password" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n\n {/* Field */}\n <Form.Item\n label="Confirm Password"\n name="password2"\n dependencies={[\'password\']}\n rules={[\n {\n required: true,\n },\n ({ getFieldValue }) => ({\n validator(_, value) {\n if (!value || getFieldValue(\'password\') === value) {\n return Promise.resolve();\n }\n return Promise.reject(new Error(\'The new password that you entered do not match!\'));\n },\n }),\n ]}\n >\n <Input />\n </Form.Item>\n\n {/* Render Props */}\n <Form.Item noStyle dependencies={[\'password2\']}>\n {() => (\n <Typography>\n <p>\n Only Update when <code>password2</code> updated:\n </p>\n <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>\n </Typography>\n )}\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},bb0092a9:function(n,e,t){},bb3f846a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e1f70775");var o="import React from 'react';\nimport { QRCode, Space, theme } from 'antd';\n\nconst { useToken } = theme;\n\nconst App: React.FC = () => {\n const { token } = useToken();\n return (\n <Space>\n <QRCode value=\"https://ant.design/\" color={token.colorSuccessText} />\n <QRCode\n value=\"https://ant.design/\"\n color={token.colorInfoText}\n bgColor={token.colorBgLayout}\n />\n </Space>\n );\n};\n\nexport default App;\n";},bb417813:function(n,e,t){},bb6e29bc:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c69f3792");var o='import React from \'react\';\nimport { Flex, Splitter, Typography } from \'antd\';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify="center" align="center" style={{ height: \'100%\' }}>\n <Typography.Title type="secondary" level={5} style={{ whiteSpace: \'nowrap\' }}>\n {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => (\n <Splitter style={{ height: 300, boxShadow: \'0 0 10px rgba(0, 0, 0, 0.1)\' }}>\n <Splitter.Panel collapsible>\n <Desc text="Left" />\n </Splitter.Panel>\n <Splitter.Panel>\n <Splitter layout="vertical">\n <Splitter.Panel>\n <Desc text="Top" />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text="Bottom" />\n </Splitter.Panel>\n </Splitter>\n </Splitter.Panel>\n </Splitter>\n);\n\nexport default App;\n';},bbca90b2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("11d08909");var o="import React, { useState } from 'react';\nimport {\n AppstoreOutlined,\n CalendarOutlined,\n LinkOutlined,\n MailOutlined,\n SettingOutlined,\n} from '@ant-design/icons';\nimport { Divider, Menu, Switch } from 'antd';\nimport type { GetProp, MenuProps } from 'antd';\n\ntype MenuTheme = GetProp<MenuProps, 'theme'>;\n\ntype MenuItem = GetProp<MenuProps, 'items'>[number];\n\nconst items: MenuItem[] = [\n {\n key: '1',\n icon: <MailOutlined />,\n label: 'Navigation One',\n },\n {\n key: '2',\n icon: <CalendarOutlined />,\n label: 'Navigation Two',\n },\n {\n key: 'sub1',\n label: 'Navigation Two',\n icon: <AppstoreOutlined />,\n children: [\n { key: '3', label: 'Option 3' },\n { key: '4', label: 'Option 4' },\n {\n key: 'sub1-2',\n label: 'Submenu',\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n ],\n },\n ],\n },\n {\n key: 'sub2',\n label: 'Navigation Three',\n icon: <SettingOutlined />,\n children: [\n { key: '7', label: 'Option 7' },\n { key: '8', label: 'Option 8' },\n { key: '9', label: 'Option 9' },\n { key: '10', label: 'Option 10' },\n ],\n },\n {\n key: 'link',\n icon: <LinkOutlined />,\n label: (\n <a href=\"https://ant.design\" target=\"_blank\" rel=\"noopener noreferrer\">\n Ant Design\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => {\n const [mode, setMode] = useState<'vertical' | 'inline'>('inline');\n const [theme, setTheme] = useState<MenuTheme>('light');\n\n const changeMode = (value: boolean) => {\n setMode(value ? 'vertical' : 'inline');\n };\n\n const changeTheme = (value: boolean) => {\n setTheme(value ? 'dark' : 'light');\n };\n\n return (\n <>\n <Switch onChange={changeMode} /> Change Mode\n <Divider type=\"vertical\" />\n <Switch onChange={changeTheme} /> Change Style\n <br />\n <br />\n <Menu\n style={{ width: 256 }}\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n mode={mode}\n theme={theme}\n items={items}\n />\n </>\n );\n};\n\nexport default App;\n";},bbef1f86:function(n,e,t){},bbf1fe22:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("246067e2");var o="import React, { useState } from 'react';\nimport { AutoComplete, Space } from 'antd';\nimport type { AutoCompleteProps } from 'antd';\n\nconst mockVal = (str: string, repeat = 1) => ({\n value: str.repeat(repeat),\n});\n\nconst App: React.FC = () => {\n const [options, setOptions] = useState<AutoCompleteProps['options']>([]);\n const [anotherOptions, setAnotherOptions] = useState<AutoCompleteProps['options']>([]);\n\n const getPanelValue = (searchText: string) =>\n !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <AutoComplete\n options={options}\n onSearch={(text) => setOptions(getPanelValue(text))}\n status=\"error\"\n style={{ width: 200 }}\n />\n <AutoComplete\n options={anotherOptions}\n onSearch={(text) => setAnotherOptions(getPanelValue(text))}\n status=\"warning\"\n style={{ width: 200 }}\n />\n </Space>\n );\n};\n\nexport default App;\n";},bc6c0e9c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2ba6e97d");var o="import React from 'react';\nimport { Col, Divider, Row } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Divider orientation=\"left\">Normal</Divider>\n <Row>\n <Col span={6} order={4}>\n 1 col-order-4\n </Col>\n <Col span={6} order={3}>\n 2 col-order-3\n </Col>\n <Col span={6} order={2}>\n 3 col-order-2\n </Col>\n <Col span={6} order={1}>\n 4 col-order-1\n </Col>\n </Row>\n <Divider orientation=\"left\">Responsive</Divider>\n <Row>\n <Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>\n 1 col-order-responsive\n </Col>\n <Col span={6} xs={{ order: 2 }} sm={{ order: 1 }} md={{ order: 4 }} lg={{ order: 3 }}>\n 2 col-order-responsive\n </Col>\n <Col span={6} xs={{ order: 3 }} sm={{ order: 4 }} md={{ order: 2 }} lg={{ order: 1 }}>\n 3 col-order-responsive\n </Col>\n <Col span={6} xs={{ order: 4 }} sm={{ order: 3 }} md={{ order: 1 }} lg={{ order: 2 }}>\n 4 col-order-responsive\n </Col>\n </Row>\n </>\n);\n\nexport default App;\n";},bc7bbfb0:function(n,e,t){},bc89042d:function(n,e,t){},bca319a4:function(n,e,t){},bcdce76b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("36d9e09f");var o="import React from 'react';\nimport { Steps } from 'antd';\n\nconst description = 'This is a description.';\nconst App: React.FC = () => (\n <Steps\n direction=\"vertical\"\n size=\"small\"\n current={1}\n items={[\n { title: 'Finished', description },\n {\n title: 'In Progress',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\n\nexport default App;\n";},bcfda361:function(n,e,t){},bd0f2bb9:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e77f1b4a");var o="import React, { useState } from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { DragEndEvent } from '@dnd-kit/core';\nimport { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';\nimport {\n arrayMove,\n SortableContext,\n useSortable,\n verticalListSortingStrategy,\n} from '@dnd-kit/sortable';\nimport { CSS } from '@dnd-kit/utilities';\nimport { Button, Upload } from 'antd';\nimport type { UploadFile, UploadProps } from 'antd';\n\ninterface DraggableUploadListItemProps {\n originNode: React.ReactElement<any, string | React.JSXElementConstructor<any>>;\n file: UploadFile<any>;\n}\n\nconst DraggableUploadListItem = ({ originNode, file }: DraggableUploadListItemProps) => {\n const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({\n id: file.uid,\n });\n\n const style: React.CSSProperties = {\n transform: CSS.Translate.toString(transform),\n transition,\n cursor: 'move',\n };\n\n return (\n <div\n ref={setNodeRef}\n style={style}\n // prevent preview event when drag end\n className={isDragging ? 'is-dragging' : ''}\n {...attributes}\n {...listeners}\n >\n {/* hide error tooltip when dragging */}\n {file.status === 'error' && isDragging ? originNode.props.children : originNode}\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [fileList, setFileList] = useState<UploadFile[]>([\n {\n uid: '-1',\n name: 'image1.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-2',\n name: 'image2.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-3',\n name: 'image3.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-4',\n name: 'image4.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-5',\n name: 'image.png',\n status: 'error',\n },\n ]);\n\n const sensor = useSensor(PointerSensor, {\n activationConstraint: { distance: 10 },\n });\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n setFileList((prev) => {\n const activeIndex = prev.findIndex((i) => i.uid === active.id);\n const overIndex = prev.findIndex((i) => i.uid === over?.id);\n return arrayMove(prev, activeIndex, overIndex);\n });\n }\n };\n\n const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {\n setFileList(newFileList);\n };\n\n return (\n <DndContext sensors={[sensor]} onDragEnd={onDragEnd}>\n <SortableContext items={fileList.map((i) => i.uid)} strategy={verticalListSortingStrategy}>\n <Upload\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n fileList={fileList}\n onChange={onChange}\n itemRender={(originNode, file) => (\n <DraggableUploadListItem originNode={originNode} file={file} />\n )}\n >\n <Button icon={<UploadOutlined />}>Click to Upload</Button>\n </Upload>\n </SortableContext>\n </DndContext>\n );\n};\n\nexport default App;\n";},bd7c6b21:function(n,e,t){},bd86365d:function(n,e,t){},bdbb2b00:function(n,e,t){},be49ffab:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a98a7432");var o="import React from 'react';\nimport { TimePicker } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalTimePicker } = TimePicker;\n\nconst App: React.FC = () => <InternalTimePicker />;\n\nexport default App;\n";},be5cdaca:function(n,e,t){},be8eb1d2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5e6aac99");var o='import React, { useState } from \'react\';\nimport { DownloadOutlined } from \'@ant-design/icons\';\nimport { Button, Divider, Flex, Radio } from \'antd\';\nimport type { ConfigProviderProps } from \'antd\';\n\ntype SizeType = ConfigProviderProps[\'componentSize\'];\n\nconst App: React.FC = () => {\n const [size, setSize] = useState<SizeType>(\'large\'); // default is \'middle\'\n return (\n <>\n <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>\n <Radio.Button value="large">Large</Radio.Button>\n <Radio.Button value="default">Default</Radio.Button>\n <Radio.Button value="small">Small</Radio.Button>\n </Radio.Group>\n <Divider orientation="left" plain>\n Preview\n </Divider>\n <Flex gap="small" align="flex-start" vertical>\n <Flex gap="small" wrap>\n <Button type="primary" size={size}>\n Primary\n </Button>\n <Button size={size}>Default</Button>\n <Button type="dashed" size={size}>\n Dashed\n </Button>\n </Flex>\n <Button type="link" size={size}>\n Link\n </Button>\n <Flex gap="small" wrap>\n <Button type="primary" icon={<DownloadOutlined />} size={size} />\n <Button type="primary" shape="circle" icon={<DownloadOutlined />} size={size} />\n <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size} />\n <Button type="primary" shape="round" icon={<DownloadOutlined />} size={size}>\n Download\n </Button>\n <Button type="primary" icon={<DownloadOutlined />} size={size}>\n Download\n </Button>\n </Flex>\n </Flex>\n </>\n );\n};\n\nexport default App;\n';},bea67a69:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("995a7c45");var o="import React from 'react';\nimport { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';\nimport { Button, Form, Input, Space } from 'antd';\n\nconst onFinish = (values: any) => {\n console.log('Received values of form:', values);\n};\n\nconst App: React.FC = () => (\n <Form\n name=\"dynamic_form_nest_item\"\n onFinish={onFinish}\n style={{ maxWidth: 600 }}\n autoComplete=\"off\"\n >\n <Form.List name=\"users\">\n {(fields, { add, remove }) => (\n <>\n {fields.map(({ key, name, ...restField }) => (\n <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align=\"baseline\">\n <Form.Item\n {...restField}\n name={[name, 'first']}\n rules={[{ required: true, message: 'Missing first name' }]}\n >\n <Input placeholder=\"First Name\" />\n </Form.Item>\n <Form.Item\n {...restField}\n name={[name, 'last']}\n rules={[{ required: true, message: 'Missing last name' }]}\n >\n <Input placeholder=\"Last Name\" />\n </Form.Item>\n <MinusCircleOutlined onClick={() => remove(name)} />\n </Space>\n ))}\n <Form.Item>\n <Button type=\"dashed\" onClick={() => add()} block icon={<PlusOutlined />}>\n Add field\n </Button>\n </Form.Item>\n </>\n )}\n </Form.List>\n <Form.Item>\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n";},bea9f5a4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3206fb1b");var o='import React from \'react\';\nimport { MinusSquareOutlined, SearchOutlined } from \'@ant-design/icons\';\nimport { Button, ConfigProvider, Divider, Flex, Radio, Tooltip, Input } from \'antd\';\nimport type { ConfigProviderProps } from \'antd\';\nimport { FiColumns } from \'react-icons/fi\';\n\ntype SizeType = ConfigProviderProps[\'componentSize\'];\n\n/**12px \u56FE\u6807 */\nconst Icon12Size = () => <div style={{ background: \'red\', width: 12, height: 12 }} />;\n/**16px \u56FE\u6807 */\nconst Icon16Size = () => <div style={{ background: \'green\', width: 16, height: 16 }} />;\n/**\u4E0D\u89C4\u5219\u5BBD\u9AD8 */\nconst IconIrregularSize = () => <div style={{ background: \'blue\', width: 14, height: 16 }} />;\n\nconst App: React.FC = () => {\n const [size, setSize] = React.useState<SizeType>(\'large\');\n return (\n <>\n <Radio.Group value={size} onChange={(e) => setSize(e.target.value)}>\n <Radio.Button value="large">Large</Radio.Button>\n <Radio.Button value="default">Default</Radio.Button>\n <Radio.Button value="small">Small</Radio.Button>\n </Radio.Group>\n <Divider orientation="left" plain>\n Preview\n </Divider>\n <ConfigProvider componentSize={size}>\n <Flex gap="small" vertical>\n <Flex gap="small" wrap>\n <Tooltip title="search">\n <Button type="primary" shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button type="primary" shape="circle">\n A\n </Button>\n <Button type="primary" icon={<SearchOutlined />}>\n Search\n </Button>\n <Tooltip title="search">\n <Button shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button icon={<SearchOutlined />}>Search</Button>\n </Flex>\n <Flex gap="small" wrap>\n <Tooltip title="search">\n <Button shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button icon={<SearchOutlined />}>Search</Button>\n <Tooltip title="search">\n <Button type="dashed" shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button type="dashed" icon={<SearchOutlined />}>\n Search\n </Button>\n <Button icon={<SearchOutlined />} href="https://www.google.com" target="_blank" />\n <Button>\n <SearchOutlined />\n Search\n </Button>\n </Flex>\n <Divider plain> https://github.com/ant-design/ant-design/issues/51811 </Divider>\n <div>\n <Button>without icon</Button>\n <Button icon={<SearchOutlined />}>with icon</Button>\n </div>\n <Divider plain> https://github.com/ant-design/ant-design/issues/52124 </Divider>\n <div>\n <Button\n style={{\n height: 60,\n }}\n >\n without icon\n </Button>\n <Button\n icon={<SearchOutlined />}\n style={{\n height: 60,\n }}\n >\n with icon\n </Button>\n </div>\n <Divider plain> https://github.com/ant-design/ant-design/issues/51380 </Divider>\n <div>\n <Button size="large" icon={<FiColumns className="my-class-name" />} />\n <Button size="large" icon={<FiColumns />}>\n custom icon\n </Button>\n <Button icon={<SearchOutlined />} />\n <Button icon={<SearchOutlined />}>with icon</Button>\n <Button size="large">without icon</Button>\n <Input.Search style={{ width: 100 }} />\n </div>\n <Divider plain> https://github.com/ant-design/ant-design/issues/51380 </Divider>\n <Flex\n gap="small"\n style={{\n transform: \'scale(3)\',\n transformOrigin: \'left top\',\n }}\n >\n <Button icon={<MinusSquareOutlined />} />\n <Button icon={<Icon12Size />} />\n <Button icon={<Icon16Size />} />\n <Button icon={<IconIrregularSize />} />\n </Flex>\n </Flex>\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n';},beb2342a:function(n,e,t){},bed1e6a7:function(n,e,t){},befc0f39:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("15b9b13b");var o='import React from \'react\';\nimport { Space, TimePicker } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <TimePicker status="error" />\n <TimePicker status="warning" />\n <TimePicker.RangePicker status="error" />\n <TimePicker.RangePicker status="warning" />\n </Space>\n);\n\nexport default App;\n';},bf31150e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("570736e1");var o="import React from 'react';\nimport { Empty } from 'antd';\n\nconst App: React.FC = () => <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />;\n\nexport default App;\n";},bf47cb83:function(n,e,t){},bf66f085:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3a2cefac");var o="import React from 'react';\nimport { Divider } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider plain>Text</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation=\"left\" plain>\n Left Text\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider orientation=\"right\" plain>\n Right Text\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n </>\n);\n\nexport default App;\n";},c033a4c3:function(n,e,t){},c03a2a56:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9ee52b6e");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent, SelectProps } from 'antd';\nimport { Radio, Select } from 'antd';\n\ntype SelectCommonPlacement = SelectProps['placement'];\n\nconst App: React.FC = () => {\n const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');\n\n const placementChange = (e: RadioChangeEvent) => {\n SetPlacement(e.target.value);\n };\n\n return (\n <>\n <Radio.Group value={placement} onChange={placementChange}>\n <Radio.Button value=\"topLeft\">topLeft</Radio.Button>\n <Radio.Button value=\"topRight\">topRight</Radio.Button>\n <Radio.Button value=\"bottomLeft\">bottomLeft</Radio.Button>\n <Radio.Button value=\"bottomRight\">bottomRight</Radio.Button>\n </Radio.Group>\n <br />\n <br />\n <Select\n defaultValue=\"HangZhou\"\n style={{ width: 120 }}\n popupMatchSelectWidth={false}\n placement={placement}\n options={[\n {\n value: 'HangZhou',\n label: 'HangZhou #310000',\n },\n {\n value: 'NingBo',\n label: 'NingBo #315000',\n },\n {\n value: 'WenZhou',\n label: 'WenZhou #325000',\n },\n ]}\n />\n </>\n );\n};\n\nexport default App;\n";},c05538e1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("34366397");var o="import React from 'react';\nimport { TimePicker } from 'antd';\nimport dayjs from 'dayjs';\n\nconst format = 'HH:mm';\n\nconst App: React.FC = () => <TimePicker defaultValue={dayjs('12:08', format)} format={format} />;\n\nexport default App;\n";},c06193f4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e8708933");var o="import React from 'react';\nimport { Radio } from 'antd';\n\nconst App: React.FC = () => <Radio>Radio</Radio>;\n\nexport default App;\n";},c079c68d:function(n,e,t){},c08e0e64:function(n,e,t){},c09c587e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8048b9b3");var o="import React from 'react';\nimport { ConfigProvider, DatePicker, Space, Typography } from 'antd';\nimport type { DatePickerProps } from 'antd';\nimport en from 'antd/es/date-picker/locale/en_US';\nimport enUS from 'antd/es/locale/en_US';\nimport dayjs from 'dayjs';\nimport buddhistEra from 'dayjs/plugin/buddhistEra';\n\ndayjs.extend(buddhistEra);\n\nconst { Title } = Typography;\n\n// Component level locale\nconst buddhistLocale: typeof en = {\n ...en,\n lang: {\n ...en.lang,\n fieldDateFormat: 'BBBB-MM-DD',\n fieldDateTimeFormat: 'BBBB-MM-DD HH:mm:ss',\n yearFormat: 'BBBB',\n cellYearFormat: 'BBBB',\n },\n};\n\n// ConfigProvider level locale\nconst globalBuddhistLocale: typeof enUS = {\n ...enUS,\n DatePicker: {\n ...enUS.DatePicker!,\n lang: buddhistLocale.lang,\n },\n};\n\nconst defaultValue = dayjs('2024-01-01');\n\nconst App: React.FC = () => {\n const onChange: DatePickerProps['onChange'] = (_, dateStr) => {\n console.log('onChange:', dateStr);\n };\n\n return (\n <Space direction=\"vertical\">\n <Title level={4}>By locale props</Title>\n <DatePicker defaultValue={defaultValue} locale={buddhistLocale} onChange={onChange} />\n <DatePicker\n defaultValue={defaultValue}\n showTime\n locale={buddhistLocale}\n onChange={onChange}\n />\n\n <Title level={4}>By ConfigProvider</Title>\n <ConfigProvider locale={globalBuddhistLocale}>\n <Space direction=\"vertical\">\n <DatePicker defaultValue={defaultValue} onChange={onChange} />\n <DatePicker defaultValue={defaultValue} showTime onChange={onChange} />\n </Space>\n </ConfigProvider>\n </Space>\n );\n};\n\nexport default App;\n";},c09fb9d1:function(n,e,t){},c0ae139b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ac284386");var o="import React from 'react';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => (\n <Segmented<string> options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} name=\"group\" />\n);\n\nexport default Demo;\n";},c0b352c7:function(n,e,t){},c0d5aca1:function(n,e,t){},c12a190d:function(n,e,t){},c140c8c4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f32ecf9e");var o="import React, { useState } from 'react';\nimport { Transfer } from 'antd';\nimport type { TransferProps } from 'antd';\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n}\n\nconst mockData = Array.from({ length: 10 }).map<RecordType>((_, i) => ({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n}));\n\nconst oriTargetKeys = mockData.filter((item) => Number(item.key) % 3 > 1).map((item) => item.key);\n\nconst selectAllLabels: TransferProps['selectAllLabels'] = [\n 'Select All',\n ({ selectedCount, totalCount }) => `${selectedCount}/${totalCount}`,\n];\n\nconst App: React.FC = () => {\n const [targetKeys, setTargetKeys] = useState<React.Key[]>(oriTargetKeys);\n return (\n <Transfer\n dataSource={mockData}\n targetKeys={targetKeys}\n onChange={setTargetKeys}\n render={(item) => item.title}\n selectAllLabels={selectAllLabels}\n />\n );\n};\n\nexport default App;\n";},c1454ce6:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("24a8e5c3");var o="import React from 'react';\nimport { TimePicker } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst App: React.FC = () => <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} disabled />;\n\nexport default App;\n";},c14f6f75:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4f1b7c61");var o="import React from 'react';\nimport { Anchor } from 'antd';\n\nconst App: React.FC = () => (\n <Anchor\n affix={false}\n items={[\n {\n key: '1',\n href: '#anchor-demo-basic',\n title: 'Basic demo',\n },\n {\n key: '2',\n href: '#anchor-demo-static',\n title: 'Static demo',\n },\n {\n key: '3',\n href: '#api',\n title: 'API',\n children: [\n {\n key: '4',\n href: '#anchor-props',\n title: 'Anchor Props',\n },\n {\n key: '5',\n href: '#link-props',\n title: 'Link Props',\n },\n ],\n },\n ]}\n />\n);\n\nexport default App;\n";},c1777bbe:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dcf190fc");var o="import React from 'react';\nimport { MehOutlined, SmileOutlined } from '@ant-design/icons';\nimport { Select, Space } from 'antd';\n\nconst smileIcon = <SmileOutlined />;\nconst mehIcon = <MehOutlined />;\n\nconst handleChange = (value: string | string[]) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <Space wrap>\n <Select\n prefix=\"User\"\n defaultValue=\"lucy\"\n style={{ width: 200 }}\n onChange={handleChange}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n { value: 'disabled', label: 'Disabled', disabled: true },\n ]}\n />\n <Select\n suffixIcon={smileIcon}\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n onChange={handleChange}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n { value: 'disabled', label: 'Disabled', disabled: true },\n ]}\n />\n <Select\n suffixIcon={mehIcon}\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n disabled\n options={[{ value: 'lucy', label: 'Lucy' }]}\n />\n <br />\n <Select\n prefix=\"User\"\n defaultValue={['lucy']}\n mode=\"multiple\"\n style={{ width: 200 }}\n onChange={handleChange}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n { value: 'disabled', label: 'Disabled', disabled: true },\n ]}\n />\n <Select\n suffixIcon={smileIcon}\n defaultValue={['lucy']}\n mode=\"multiple\"\n style={{ width: 120 }}\n onChange={handleChange}\n options={[\n { value: 'jack', label: 'Jack' },\n { value: 'lucy', label: 'Lucy' },\n { value: 'Yiminghe', label: 'yiminghe' },\n { value: 'disabled', label: 'Disabled', disabled: true },\n ]}\n />\n <Select\n suffixIcon={mehIcon}\n defaultValue={['lucy']}\n mode=\"multiple\"\n style={{ width: 120 }}\n disabled\n options={[{ value: 'lucy', label: 'Lucy' }]}\n />\n </Space>\n);\n\nexport default App;\n";},c1fbc568:function(n,e,t){},c222e954:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("515ef171");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, ConfigProvider, Upload } from 'antd';\n\nconst props: UploadProps = {\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n onChange({ file, fileList }) {\n if (file.status !== 'uploading') {\n console.log(file, fileList);\n }\n },\n defaultFileList: [\n {\n uid: '1',\n name: 'xxx.png',\n status: 'uploading',\n url: 'http://www.baidu.com/xxx.png',\n percent: 33,\n },\n {\n uid: '2',\n name: 'yyy.png',\n status: 'done',\n url: 'http://www.baidu.com/yyy.png',\n },\n {\n uid: '3',\n name: 'zzz.png',\n status: 'error',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/zzz.png',\n },\n ],\n};\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Upload: {\n actionsColor: 'yellow',\n },\n },\n }}\n >\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Upload</Button>\n </Upload>\n </ConfigProvider>\n);\n\nexport default App;\n";},c22cd924:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3a3ea101");var o="import React from 'react';\nimport { ConfigProvider, Slider } from 'antd';\n\nconst style: React.CSSProperties = {\n display: 'inline-block',\n height: 300,\n marginInlineStart: 70,\n};\n\nconst marks = {\n 0: '0\xb0C',\n 26: '26\xb0C',\n 37: '37\xb0C',\n 100: {\n style: { color: '#f50' },\n label: <strong>100\xb0C</strong>,\n },\n};\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Slider: {\n controlSize: 20,\n railSize: 4,\n handleSize: 22,\n handleSizeHover: 18,\n dotSize: 8,\n handleLineWidth: 6,\n handleLineWidthHover: 2,\n railBg: '#9f3434',\n railHoverBg: '#8d2424',\n trackBg: '#b0b0ef',\n trackHoverBg: '#c77195',\n handleColor: '#e6f6a2',\n handleActiveColor: '#d22bc4',\n dotBorderColor: '#303030',\n dotActiveBorderColor: '#918542',\n trackBgDisabled: '#1a1b80',\n },\n },\n }}\n >\n <Slider defaultValue={30} disabled />\n <Slider range={{ draggableTrack: true }} defaultValue={[20, 50]} />\n <div style={style}>\n <Slider vertical defaultValue={30} />\n </div>\n <div style={style}>\n <Slider vertical range step={10} defaultValue={[20, 50]} />\n </div>\n <div style={style}>\n <Slider vertical range marks={marks} defaultValue={[26, 37]} />\n </div>\n </ConfigProvider>\n);\n\nexport default App;\n";},c249487a:function(n,e,t){},c27a2a3b:function(n,e,t){},c2ae325a:function(n,e,t){},c2e79dbc:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3097a4fa");var o='import React from \'react\';\nimport { UserOutlined } from \'@ant-design/icons\';\nimport { ConfigProvider, Input } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <ConfigProvider theme={{ token: { controlHeight: 28 } }}>\n <Input placeholder="Basic usage" />\n </ConfigProvider>\n <ConfigProvider\n componentSize="small"\n theme={{ token: {}, components: { Input: { inputFontSizeSM: 12 } } }}\n >\n <Input placeholder="Basic usage" />\n </ConfigProvider>\n <ConfigProvider theme={{ components: { Input: { inputFontSize: 10 } } }}>\n <Input placeholder="With prefix" prefix={<UserOutlined />} />\n </ConfigProvider>\n </>\n);\n\nexport default App;\n';},c3805e31:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("da0742a2");var o="import React from 'react';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => (\n <Segmented options={[123, 456, 'longtext-longtext-longtext-longtext']} block />\n);\n\nexport default Demo;\n";},c38575de:function(n,e,t){},c38a0520:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("07fedc13");var o="import React from 'react';\nimport { Empty } from 'antd';\n\nconst App: React.FC = () => <Empty />;\n\nexport default App;\n";},c3a72d92:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("838b7192");var o="import React from 'react';\nimport { Card } from 'antd';\n\nconst gridStyle: React.CSSProperties = {\n width: '25%',\n textAlign: 'center',\n};\n\nconst App: React.FC = () => (\n <Card title=\"Card Title\">\n <Card.Grid style={gridStyle}>Content</Card.Grid>\n <Card.Grid hoverable={false} style={gridStyle}>\n Content\n </Card.Grid>\n <Card.Grid style={gridStyle}>Content</Card.Grid>\n <Card.Grid style={gridStyle}>Content</Card.Grid>\n <Card.Grid style={gridStyle}>Content</Card.Grid>\n <Card.Grid style={gridStyle}>Content</Card.Grid>\n <Card.Grid style={gridStyle}>Content</Card.Grid>\n </Card>\n);\n\nexport default App;\n";},c3d3dd0c:function(n,e,t){},c413e601:function(n,e,t){},c4689dbf:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5001d5bb");var o='import React from \'react\';\nimport { Button, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space>\n <Space.Compact direction="vertical">\n <Button>Button 1</Button>\n <Button>Button 2</Button>\n <Button>Button 3</Button>\n </Space.Compact>\n <Space.Compact direction="vertical">\n <Button type="dashed">Button 1</Button>\n <Button type="dashed">Button 2</Button>\n <Button type="dashed">Button 3</Button>\n </Space.Compact>\n <Space.Compact direction="vertical">\n <Button type="primary">Button 1</Button>\n <Button type="primary">Button 2</Button>\n <Button type="primary">Button 3</Button>\n </Space.Compact>\n </Space>\n);\n\nexport default App;\n';},c47d4513:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("437b09ed");var o="import React from 'react';\nimport { Calendar } from 'antd';\nimport type { CalendarProps } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\nconst App: React.FC = () => {\n const onPanelChange = (value: Dayjs, mode: CalendarProps<Dayjs>['mode']) => {\n console.log(value.format('YYYY-MM-DD'), mode);\n };\n\n return <Calendar onPanelChange={onPanelChange} />;\n};\n\nexport default App;\n";},c49f2745:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e3a2c367");var o="import React, { useEffect, useRef, useState } from 'react';\nimport { PlusOutlined } from '@ant-design/icons';\nimport type { InputRef } from 'antd';\nimport { Input, Tag, theme } from 'antd';\nimport { TweenOneGroup } from 'rc-tween-one';\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n const [tags, setTags] = useState(['Tag 1', 'Tag 2', 'Tag 3']);\n const [inputVisible, setInputVisible] = useState(false);\n const [inputValue, setInputValue] = useState('');\n const inputRef = useRef<InputRef>(null);\n\n useEffect(() => {\n if (inputVisible) {\n inputRef.current?.focus();\n }\n }, [inputVisible]);\n\n const handleClose = (removedTag: string) => {\n const newTags = tags.filter((tag) => tag !== removedTag);\n console.log(newTags);\n setTags(newTags);\n };\n\n const showInput = () => {\n setInputVisible(true);\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value);\n };\n\n const handleInputConfirm = () => {\n if (inputValue && tags.indexOf(inputValue) === -1) {\n setTags([...tags, inputValue]);\n }\n setInputVisible(false);\n setInputValue('');\n };\n\n const forMap = (tag: string) => (\n <span key={tag} style={{ display: 'inline-block' }}>\n <Tag\n closable\n onClose={(e) => {\n e.preventDefault();\n handleClose(tag);\n }}\n >\n {tag}\n </Tag>\n </span>\n );\n\n const tagChild = tags.map(forMap);\n\n const tagPlusStyle: React.CSSProperties = {\n background: token.colorBgContainer,\n borderStyle: 'dashed',\n };\n\n return (\n <>\n <div style={{ marginBottom: 16 }}>\n <TweenOneGroup\n appear={false}\n enter={{ scale: 0.8, opacity: 0, type: 'from', duration: 100 }}\n leave={{ opacity: 0, width: 0, scale: 0, duration: 200 }}\n onEnd={(e) => {\n if (e.type === 'appear' || e.type === 'enter') {\n (e.target as any).style = 'display: inline-block';\n }\n }}\n >\n {tagChild}\n </TweenOneGroup>\n </div>\n {inputVisible ? (\n <Input\n ref={inputRef}\n type=\"text\"\n size=\"small\"\n style={{ width: 78 }}\n value={inputValue}\n onChange={handleInputChange}\n onBlur={handleInputConfirm}\n onPressEnter={handleInputConfirm}\n />\n ) : (\n <Tag onClick={showInput} style={tagPlusStyle}>\n <PlusOutlined /> New Tag\n </Tag>\n )}\n </>\n );\n};\n\nexport default App;\n";},c52d1fb7:function(n,e,t){},c558236a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b191146c");var o="import React from 'react';\nimport type { StepsProps } from 'antd';\nimport { Avatar, List, Steps } from 'antd';\n\nconst data = [\n {\n title: 'Ant Design Title 1',\n current: 0,\n },\n {\n title: 'Ant Design Title 2',\n current: 1,\n status: 'error',\n },\n {\n title: 'Ant Design Title 3',\n current: 2,\n },\n {\n title: 'Ant Design Title 4',\n current: 1,\n },\n];\n\nconst items = [\n {\n title: 'Step 1',\n description: 'This is a Step 1.',\n },\n {\n title: 'Step 2',\n description: 'This is a Step 2.',\n },\n {\n title: 'Step 3',\n description: 'This is a Step 3.',\n },\n];\n\nconst App: React.FC = () => (\n <div>\n <List\n itemLayout=\"horizontal\"\n dataSource={data}\n renderItem={(item, index) => (\n <List.Item>\n <List.Item.Meta\n avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}\n title={<a href=\"https://ant.design\">{item.title}</a>}\n description=\"Ant Design, a design language for background applications, is refined by Ant UED Team\"\n />\n <Steps\n style={{ marginTop: 8 }}\n type=\"inline\"\n current={item.current}\n status={item.status as StepsProps['status']}\n items={items}\n />\n </List.Item>\n )}\n />\n </div>\n);\n\nexport default App;\n";},c55fff7d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("019e0ec3");var o='import React, { useState } from \'react\';\nimport { Drawer, Modal, Space, Switch } from \'antd\';\n\nconst App: React.FC = () => {\n const [drawer, setDrawer] = useState(false);\n const [drawer2, setDrawer2] = useState(false);\n const [modal, setModal] = useState(false);\n const [modal2, setModal2] = useState(false);\n\n return (\n <div style={{ position: \'relative\', zIndex: 999999 }}>\n <Space>\n <Switch\n checkedChildren="Drawer"\n unCheckedChildren="Drawer"\n checked={drawer}\n onChange={() => setDrawer(!drawer)}\n />\n <Switch\n checkedChildren="Drawer2"\n unCheckedChildren="Drawer2"\n checked={drawer2}\n onChange={() => setDrawer2(!drawer2)}\n />\n <Switch\n checkedChildren="Modal"\n unCheckedChildren="Modal"\n checked={modal}\n onChange={() => setModal(!modal)}\n />\n <Switch\n checkedChildren="Modal2"\n unCheckedChildren="Modal2"\n checked={modal2}\n onChange={() => setModal2(!modal2)}\n />\n </Space>\n <Drawer title="Drawer" open={drawer}>\n Some contents...\n <Drawer title="Drawer Sub" open={drawer}>\n Sub contents...\n </Drawer>\n </Drawer>\n <Drawer title="Drawer2" open={drawer2}>\n Some contents...\n </Drawer>\n <Modal title="Modal" open={modal}>\n Some contents...\n </Modal>\n <Modal title="Modal2" open={modal2}>\n Some contents...\n </Modal>\n </div>\n );\n};\n\nexport default App;\n';},c59262c2:function(n,e,t){},c5a59ccf:function(n,e,t){},c5cef641:function(n,e,t){},c5d7f6ed:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3868ee65");var o="import React from 'react';\nimport { Watermark } from 'antd';\n\nconst App: React.FC = () => (\n <Watermark content={['Ant Design', 'Happy Working']}>\n <div style={{ height: 500 }} />\n </Watermark>\n);\n\nexport default App;\n";},c60df4f1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("083338b7");var o="import React, { useRef, useState } from 'react';\nimport type { InputRef } from 'antd';\nimport { Button, Input, Space, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const inputRef = useRef<InputRef>(null);\n const [input, setInput] = useState(true);\n\n const sharedProps = {\n style: { width: '100%' },\n defaultValue: 'Ant Design love you!',\n ref: inputRef,\n };\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Space wrap>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n cursor: 'start',\n });\n }}\n >\n Focus at first\n </Button>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n cursor: 'end',\n });\n }}\n >\n Focus at last\n </Button>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n cursor: 'all',\n });\n }}\n >\n Focus to select all\n </Button>\n <Button\n onClick={() => {\n inputRef.current!.focus({\n preventScroll: true,\n });\n }}\n >\n Focus prevent scroll\n </Button>\n <Switch\n checked={input}\n checkedChildren=\"Input\"\n unCheckedChildren=\"TextArea\"\n onChange={() => {\n setInput(!input);\n }}\n />\n </Space>\n <br />\n {input ? <Input {...sharedProps} /> : <Input.TextArea {...sharedProps} />}\n </Space>\n );\n};\n\nexport default App;\n";},c610d4fd:function(n,e,t){},c61a1b01:function(n,e,t){},c6543381:function(n,e,t){},c67329c0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("52beeb78");var o='import React from \'react\';\nimport { Flex, Spin } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex align="center" gap="middle">\n <Spin size="small" />\n <Spin />\n <Spin size="large" />\n </Flex>\n);\n\nexport default App;\n';},c69f3792:function(n,e,t){},c6dd677d:function(n,e,t){},c70975e5:function(n,e,t){},c717b596:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("af7fce56");var o="import React from 'react';\nimport { Breadcrumb } from 'antd';\n\nconst App: React.FC = () => (\n <Breadcrumb\n items={[\n {\n title: 'Users',\n },\n {\n title: ':id',\n href: '',\n },\n ]}\n params={{ id: 1 }}\n />\n);\n\nexport default App;\n";},c726da90:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6a5a18af");var o="import React from 'react';\nimport { Switch } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Switch defaultChecked />\n <br />\n <Switch size=\"small\" defaultChecked />\n </>\n);\n\nexport default App;\n";},c7280243:function(n,e,t){},c73f3474:function(n,e,t){},c74bea28:function(n,e,t){},c756b856:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6c8aa323");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent } from 'antd';\nimport { Input, Radio } from 'antd';\n\nconst style: React.CSSProperties = {\n display: 'flex',\n flexDirection: 'column',\n gap: 8,\n};\n\nconst App: React.FC = () => {\n const [value, setValue] = useState(1);\n\n const onChange = (e: RadioChangeEvent) => {\n setValue(e.target.value);\n };\n\n return (\n <Radio.Group\n style={style}\n onChange={onChange}\n value={value}\n options={[\n { value: 1, label: 'Option A' },\n { value: 2, label: 'Option B' },\n { value: 3, label: 'Option C' },\n {\n value: 4,\n label: (\n <>\n More...\n {value === 4 && (\n <Input\n variant=\"filled\"\n placeholder=\"please input\"\n style={{ width: 120, marginInlineStart: 12 }}\n />\n )}\n </>\n ),\n },\n ]}\n />\n );\n};\n\nexport default App;\n";},c765368b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b5aa0ff5");var o="import React from 'react';\nimport { DatePicker } from 'antd';\n\nconst App: React.FC = () => (\n <DatePicker.RangePicker\n placeholder={['Allow Empty', 'Till Now']}\n allowEmpty={[false, true]}\n onChange={(date, dateString) => {\n console.log(date, dateString);\n }}\n />\n);\n\nexport default App;\n";},c788d9bb:function(n,e,t){},c78df6e4:function(n,e,t){},c7b40131:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9f1c814b");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n description: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n Table.EXPAND_COLUMN,\n { title: 'Age', dataIndex: 'age', key: 'age' },\n Table.SELECTION_COLUMN,\n { title: 'Address', dataIndex: 'address', key: 'address' },\n];\n\nconst data: DataType[] = [\n {\n key: 1,\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',\n },\n {\n key: 2,\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',\n },\n {\n key: 3,\n name: 'Not Expandable',\n age: 29,\n address: 'Jiangsu No. 1 Lake Park',\n description: 'This not expandable',\n },\n {\n key: 4,\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',\n },\n];\n\nconst App: React.FC = () => (\n <Table<DataType>\n columns={columns}\n rowSelection={{}}\n expandable={{\n expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>,\n }}\n dataSource={data}\n />\n);\n\nexport default App;\n";},c7d6c184:function(n,e,t){},c7e85fbf:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("11cc0831");var o="import React from 'react';\nimport type { InputNumberProps } from 'antd';\nimport { InputNumber } from 'antd';\n\nconst onChange: InputNumberProps['onChange'] = (value) => {\n console.log('changed', value);\n};\n\nconst App: React.FC = () => (\n <InputNumber min={1} max={10} defaultValue={3} onChange={onChange} changeOnWheel />\n);\n\nexport default App;\n";},c80b78f9:function(n,e,t){},c80f76b4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("efc44d5e");var o="import React from 'react';\nimport { Rate } from 'antd';\n\nconst App: React.FC = () => <Rate />;\n\nexport default App;\n";},c819c467:function(n,e,t){},c825164e:function(n,e,t){},c83002cc:function(n,e,t){},c851b2a3:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("89a68844");var o="import React from 'react';\nimport { Anchor } from 'antd';\n\nconst getCurrentAnchor = () => '#anchor-demo-static';\n\nconst App: React.FC = () => (\n <Anchor\n affix={false}\n getCurrentAnchor={getCurrentAnchor}\n items={[\n {\n key: '1',\n href: '#anchor-demo-basic',\n title: 'Basic demo',\n },\n {\n key: '2',\n href: '#anchor-demo-static',\n title: 'Static demo',\n },\n {\n key: '3',\n href: '#api',\n title: 'API',\n children: [\n {\n key: '4',\n href: '#anchor-props',\n title: 'Anchor Props',\n },\n {\n key: '5',\n href: '#link-props',\n title: 'Link Props',\n },\n ],\n },\n ]}\n />\n);\n\nexport default App;\n";},c86fb4da:function(n,e,t){},c87ee19b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0450981e");var o='import React from \'react\';\nimport { Button, Modal, Space, Typography } from \'antd\';\nimport type { ModalFuncProps } from \'antd\';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;\n\nconst customFooterFn: ModalFuncProps[\'footer\'] = (originNode, { OkBtn, CancelBtn }) => (\n <Space direction="vertical">\n <Space>{originNode}</Space>\n <Space>\n <CancelBtn />\n <Button danger type="primary">\n Custom\n </Button>\n <OkBtn />\n </Space>\n </Space>\n);\n\nexport default () => (\n <div style={{ display: \'flex\', flexDirection: \'column\', rowGap: 16 }}>\n <InternalPanel title="Hello World!" style={{ width: \'100%\', height: 200 }}>\n Hello World?!\n </InternalPanel>\n <InternalPanel type="success" style={{ width: 200, height: 150 }}>\n A good news!\n </InternalPanel>\n <InternalPanel title="Confirm This?" type="confirm" style={{ width: 300, height: 200 }}>\n Some descriptions.\n </InternalPanel>\n\n <InternalPanel\n title="Custom Footer Render"\n style={{ width: 380, height: 200 }}\n footer={customFooterFn}\n >\n <Typography.Paragraph>\n <Typography.Link href="https://github.com/ant-design/ant-design/pull/44318">\n Feature #44318\n </Typography.Link>\n </Typography.Paragraph>\n </InternalPanel>\n </div>\n);\n';},c8c5c2d9:function(n,e,t){},c8cb757b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("89b826e3");var o='import React from \'react\';\nimport { Button, Form, Input, message, Space } from \'antd\';\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n\n const onFinish = () => {\n message.success(\'Submit success!\');\n };\n\n const onFinishFailed = () => {\n message.error(\'Submit failed!\');\n };\n\n const onFill = () => {\n form.setFieldsValue({\n url: \'https://taobao.com/\',\n });\n };\n\n return (\n <Form\n form={form}\n layout="vertical"\n onFinish={onFinish}\n onFinishFailed={onFinishFailed}\n autoComplete="off"\n >\n <Form.Item\n name="url"\n label="URL"\n rules={[{ required: true }, { type: \'url\', warningOnly: true }, { type: \'string\', min: 6 }]}\n >\n <Input placeholder="input placeholder" />\n </Form.Item>\n <Form.Item>\n <Space>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n <Button htmlType="button" onClick={onFill}>\n Fill\n </Button>\n </Space>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n';},c8e59433:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("10e347f8");var o='import React, { useState } from \'react\';\nimport { Checkbox, ConfigProvider, Divider, Form, Input, Radio, Space } from \'antd\';\nimport type { ConfigProviderProps } from \'antd\';\n\ntype SizeType = ConfigProviderProps[\'componentSize\'];\n\nconst ConfigDisplay = () => {\n const { componentDisabled, componentSize } = ConfigProvider.useConfig();\n\n return (\n <>\n <Form.Item label="componentSize value">\n <Input value={componentSize} />\n </Form.Item>\n <Form.Item label="componentDisabled value">\n <Input value={String(componentDisabled)} disabled={componentDisabled} />\n </Form.Item>\n </>\n );\n};\n\nconst App: React.FC = () => {\n const [componentSize, setComponentSize] = useState<SizeType>(\'small\');\n const [disabled, setDisabled] = useState<boolean>(true);\n\n return (\n <div>\n <Space>\n <Radio.Group\n value={componentSize}\n onChange={(e) => {\n setComponentSize(e.target.value);\n }}\n >\n <Radio.Button value="small">Small</Radio.Button>\n <Radio.Button value="middle">Middle</Radio.Button>\n <Radio.Button value="large">Large</Radio.Button>\n </Radio.Group>\n <Checkbox checked={disabled} onChange={(e) => setDisabled(e.target.checked)}>\n Form disabled\n </Checkbox>\n </Space>\n <Divider />\n <ConfigProvider componentSize={componentSize}>\n <div className="example">\n <Form disabled={disabled}>\n <ConfigDisplay />\n </Form>\n </div>\n </ConfigProvider>\n </div>\n );\n};\n\nexport default App;\n';},c905d523:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4cbdcdd7");var o="import React from 'react';\nimport { Tabs } from 'antd';\n\nconst App: React.FC = () => (\n <Tabs\n defaultActiveKey=\"1\"\n items={[\n {\n label: 'Tab 1',\n key: '1',\n children: 'Tab 1',\n },\n {\n label: 'Tab 2',\n key: '2',\n children: 'Tab 2',\n disabled: true,\n },\n {\n label: 'Tab 3',\n key: '3',\n children: 'Tab 3',\n },\n ]}\n />\n);\n\nexport default App;\n";},c920c4c8:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("790fd61b");var o="import React from 'react';\nimport { Mentions } from 'antd';\n\nconst App: React.FC = () => (\n <Mentions\n style={{ width: '100%' }}\n placement=\"top\"\n options={[\n {\n value: 'afc163',\n label: 'afc163',\n },\n {\n value: 'zombieJ',\n label: 'zombieJ',\n },\n {\n value: 'yesmeck',\n label: 'yesmeck',\n },\n ]}\n />\n);\n\nexport default App;\n";},c92203f4:function(n,e,t){},c92e4fdb:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0e8e8a0f");var o='import React from \'react\';\nimport { SearchOutlined } from \'@ant-design/icons\';\nimport {\n AutoComplete,\n Button,\n Cascader,\n Col,\n DatePicker,\n Input,\n InputNumber,\n Row,\n Select,\n Tooltip,\n} from \'antd\';\n\nconst { Option } = Select;\n\nconst options = [\n {\n value: \'zhejiang\',\n label: \'Zhejiang\',\n children: [\n {\n value: \'hangzhou\',\n label: \'Hangzhou\',\n children: [\n {\n value: \'xihu\',\n label: \'West Lake\',\n },\n ],\n },\n ],\n },\n {\n value: \'jiangsu\',\n label: \'Jiangsu\',\n children: [\n {\n value: \'nanjing\',\n label: \'Nanjing\',\n children: [\n {\n value: \'zhonghuamen\',\n label: \'Zhong Hua Men\',\n },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => (\n <div className="site-input-group-wrapper">\n <Input.Group size="large">\n <Row gutter={8}>\n <Col span={5}>\n <Input defaultValue="0571" />\n </Col>\n <Col span={8}>\n <Input defaultValue="26888888" />\n </Col>\n </Row>\n </Input.Group>\n <br />\n <Input.Group compact>\n <Input style={{ width: \'20%\' }} defaultValue="0571" />\n <Input style={{ width: \'30%\' }} defaultValue="26888888" />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Input style={{ width: \'calc(100% - 200px)\' }} defaultValue="https://ant.design" />\n <Button type="primary">Submit</Button>\n </Input.Group>\n <br />\n <Input.Group compact>\n <Input\n style={{ width: \'calc(100% - 200px)\' }}\n defaultValue="git@github.com:ant-design/ant-design.git"\n />\n <Tooltip title="search git url">\n <Button icon={<SearchOutlined />} />\n </Tooltip>\n </Input.Group>\n <br />\n <Input.Group compact>\n <Select defaultValue="Zhejiang">\n <Option value="Zhejiang">Zhejiang</Option>\n <Option value="Jiangsu">Jiangsu</Option>\n </Select>\n <Input style={{ width: \'50%\' }} defaultValue="Xihu District, Hangzhou" />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Input.Search allowClear style={{ width: \'40%\' }} defaultValue="0571" />\n <Input.Search allowClear style={{ width: \'40%\' }} defaultValue="26888888" />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Select defaultValue="Option1">\n <Option value="Option1">Option1</Option>\n <Option value="Option2">Option2</Option>\n </Select>\n <Input style={{ width: \'50%\' }} defaultValue="input content" />\n <InputNumber prefix="@" />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Input style={{ width: \'50%\' }} defaultValue="input content" />\n <DatePicker style={{ width: \'50%\' }} />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Input style={{ width: \'30%\' }} defaultValue="input content" />\n <DatePicker.RangePicker style={{ width: \'70%\' }} />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Select defaultValue="Option1-1">\n <Option value="Option1-1">Option1-1</Option>\n <Option value="Option1-2">Option1-2</Option>\n </Select>\n <Select defaultValue="Option2-2">\n <Option value="Option2-1">Option2-1</Option>\n <Option value="Option2-2">Option2-2</Option>\n </Select>\n </Input.Group>\n <br />\n <Input.Group compact>\n <Select defaultValue="1">\n <Option value="1">Between</Option>\n <Option value="2">Except</Option>\n </Select>\n <Input style={{ width: 100, textAlign: \'center\' }} placeholder="Minimum" />\n <Input\n className="site-input-split"\n style={{\n width: 30,\n borderLeft: 0,\n borderRight: 0,\n pointerEvents: \'none\',\n }}\n placeholder="~"\n disabled\n />\n <Input\n className="site-input-right"\n style={{\n width: 100,\n textAlign: \'center\',\n }}\n placeholder="Maximum"\n />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Select defaultValue="Sign Up" style={{ width: \'30%\' }}>\n <Option value="Sign Up">Sign Up</Option>\n <Option value="Sign In">Sign In</Option>\n </Select>\n <AutoComplete\n style={{ width: \'70%\' }}\n placeholder="Email"\n options={[{ value: \'text 1\' }, { value: \'text 2\' }]}\n />\n </Input.Group>\n <br />\n <Input.Group compact>\n <Select style={{ width: \'30%\' }} defaultValue="Home">\n <Option value="Home">Home</Option>\n <Option value="Company">Company</Option>\n </Select>\n <Cascader style={{ width: \'70%\' }} options={options} placeholder="Select Address" />\n </Input.Group>\n </div>\n);\n\nexport default App;\n';},c93fd84a:function(n,e,t){},c972681b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("60a7d7fe");var o="import React from 'react';\nimport { Flex, Segmented } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"small\" align=\"flex-start\" vertical>\n <Segmented options={['Map', 'Transit', 'Satellite']} disabled />\n <Segmented\n options={[\n 'Daily',\n { label: 'Weekly', value: 'Weekly', disabled: true },\n 'Monthly',\n { label: 'Quarterly', value: 'Quarterly', disabled: true },\n 'Yearly',\n ]}\n />\n </Flex>\n);\n\nexport default App;\n";},c976c39e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7a6c8d4a");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="small" vertical>\n <Progress percent={30} />\n <Progress percent={50} status="active" />\n <Progress percent={70} status="exception" />\n <Progress percent={100} />\n <Progress percent={50} showInfo={false} />\n </Flex>\n);\n\nexport default App;\n';},c97f1285:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ad30e2b3");var o="import React, { useState } from 'react';\nimport { Radio, Space, Table, Tag } from 'antd';\nimport type { TableProps } from 'antd';\n\ntype ColumnsType<T extends object> = TableProps<T>['columns'];\ntype TablePagination<T extends object> = NonNullable<Exclude<TableProps<T>['pagination'], boolean>>;\ntype TablePaginationPosition<T extends object> = NonNullable<\n TablePagination<T>['position']\n>[number];\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n address: string;\n tags: string[];\n}\n\nconst topOptions = [\n { label: 'topLeft', value: 'topLeft' },\n { label: 'topCenter', value: 'topCenter' },\n { label: 'topRight', value: 'topRight' },\n { label: 'none', value: 'none' },\n];\n\nconst bottomOptions = [\n { label: 'bottomLeft', value: 'bottomLeft' },\n { label: 'bottomCenter', value: 'bottomCenter' },\n { label: 'bottomRight', value: 'bottomRight' },\n { label: 'none', value: 'none' },\n];\n\nconst columns: ColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n render: (text) => <a>{text}</a>,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n },\n {\n title: 'Tags',\n key: 'tags',\n dataIndex: 'tags',\n render: (tags: string[]) => (\n <span>\n {tags.map((tag) => {\n let color = tag.length > 5 ? 'geekblue' : 'green';\n if (tag === 'loser') {\n color = 'volcano';\n }\n return (\n <Tag color={color} key={tag}>\n {tag.toUpperCase()}\n </Tag>\n );\n })}\n </span>\n ),\n },\n {\n title: 'Action',\n key: 'action',\n render: (_, record) => (\n <Space size=\"middle\">\n <a>Invite {record.name}</a>\n <a>Delete</a>\n </Space>\n ),\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n tags: ['nice', 'developer'],\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n tags: ['loser'],\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n tags: ['cool', 'teacher'],\n },\n];\n\nconst App: React.FC = () => {\n const [top, setTop] = useState<TablePaginationPosition<DataType>>('topLeft');\n const [bottom, setBottom] = useState<TablePaginationPosition<DataType>>('bottomRight');\n return (\n <div>\n <div>\n <Radio.Group\n style={{ marginBottom: 10 }}\n options={topOptions}\n value={top}\n onChange={(e) => {\n setTop(e.target.value);\n }}\n />\n </div>\n <Radio.Group\n style={{ marginBottom: 10 }}\n options={bottomOptions}\n value={bottom}\n onChange={(e) => {\n setBottom(e.target.value);\n }}\n />\n <Table<DataType>\n columns={columns}\n pagination={{ position: [top, bottom] }}\n dataSource={data}\n />\n </div>\n );\n};\n\nexport default App;\n";},c9a35390:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0819c524");var o="import React from 'react';\nimport { ConfigProvider, Modal } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalPanel } = Modal;\n\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Modal: {\n footerBg: '#f6ffed',\n contentBg: '#e6fffb',\n headerBg: '#f9f0ff',\n titleLineHeight: 3,\n titleFontSize: 12,\n titleColor: '#1d39c4',\n },\n },\n }}\n >\n <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>\n <InternalPanel title=\"Hello World!\" style={{ width: '100%' }}>\n Hello World?!\n </InternalPanel>\n <ConfigProvider theme={{ token: { wireframe: true } }}>\n <InternalPanel title=\"Hello World!\" style={{ width: '100%' }}>\n Hello World?!\n </InternalPanel>\n </ConfigProvider>\n <InternalPanel type=\"success\" style={{ width: 200 }}>\n A good news!\n </InternalPanel>\n <InternalPanel title=\"Confirm This?\" type=\"confirm\" style={{ width: 300 }}>\n Some descriptions.\n </InternalPanel>\n </div>\n </ConfigProvider>\n);\n";},c9a6789a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7c37d539");var o="import React from 'react';\nimport type { ModalProps } from 'antd';\nimport { Modal } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n mask: '\u906E\u7F69\u5C42\u5143\u7D20',\n wrapper: '\u5305\u88F9\u5C42\u5143\u7D20\uFF0C\u4E00\u822C\u7528\u4E8E\u52A8\u753B\u5BB9\u5668',\n content: 'Modal \u5BB9\u5668\u5143\u7D20',\n header: '\u5934\u90E8\u5143\u7D20',\n body: '\u5185\u5BB9\u5143\u7D20',\n footer: '\u5E95\u90E8\u5143\u7D20',\n },\n en: {\n mask: 'Mask element',\n wrapper: 'Wrapper element. Used for motion container',\n content: 'Modal container element',\n header: 'Header element',\n body: 'Body element',\n footer: 'Footer element',\n },\n};\n\nconst BlockModal = (props: ModalProps) => {\n const divRef = React.useRef<HTMLDivElement>(null);\n\n return (\n <div ref={divRef} style={{ position: 'absolute', inset: 0 }}>\n <Modal\n getContainer={() => divRef.current!}\n {...props}\n styles={{\n mask: {\n position: 'absolute',\n zIndex: 1,\n },\n wrapper: {\n position: 'absolute',\n zIndex: 1,\n },\n }}\n style={{\n top: '50%',\n transform: 'translateY(-50%)',\n marginBottom: 0,\n paddingBottom: 0,\n }}\n />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Modal\"\n semantics={[\n { name: 'mask', desc: locale.mask, version: '5.13.0' },\n { name: 'content', desc: locale.content, version: '5.13.0' },\n { name: 'wrapper', desc: locale.wrapper, version: '5.13.0' },\n { name: 'header', desc: locale.header, version: '5.13.0' },\n { name: 'body', desc: locale.body, version: '5.13.0' },\n { name: 'footer', desc: locale.footer, version: '5.13.0' },\n ]}\n >\n <BlockModal title=\"Title\" closable={false} open getContainer={false} width={400}>\n <p>Some contents...</p>\n </BlockModal>\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},c9cb1872:function(n,e,t){},c9d11905:function(n,e,t){},c9ef84a2:function(n,e,t){},ca48c88c:function(n,e,t){},ca6fb7ce:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("da5b0a74");var o="import React, { useState } from 'react';\nimport { Form, Input, Typography } from 'antd';\n\nconst { Paragraph } = Typography;\n\ninterface FieldData {\n name: string | number | (string | number)[];\n value?: any;\n touched?: boolean;\n validating?: boolean;\n errors?: string[];\n}\n\ninterface CustomizedFormProps {\n onChange: (fields: FieldData[]) => void;\n fields: FieldData[];\n}\n\nconst CustomizedForm: React.FC<CustomizedFormProps> = ({ onChange, fields }) => (\n <Form\n name=\"global_state\"\n layout=\"inline\"\n fields={fields}\n onFieldsChange={(_, allFields) => {\n onChange(allFields);\n }}\n >\n <Form.Item\n name=\"username\"\n label=\"Username\"\n rules={[{ required: true, message: 'Username is required!' }]}\n >\n <Input />\n </Form.Item>\n </Form>\n);\n\nconst App: React.FC = () => {\n const [fields, setFields] = useState<FieldData[]>([{ name: ['username'], value: 'Ant Design' }]);\n\n return (\n <>\n <CustomizedForm\n fields={fields}\n onChange={(newFields) => {\n setFields(newFields);\n }}\n />\n <Paragraph style={{ maxWidth: 440, marginTop: 24 }}>\n <pre style={{ border: 'none' }}>{JSON.stringify(fields, null, 2)}</pre>\n </Paragraph>\n </>\n );\n};\n\nexport default App;\n";},ca8da506:function(n,e,t){},ca9d5cfe:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5395f4a8");var o='import React, { useState } from \'react\';\nimport { PoweroffOutlined, SyncOutlined } from \'@ant-design/icons\';\nimport { Button, Flex } from \'antd\';\n\nconst App: React.FC = () => {\n const [loadings, setLoadings] = useState<boolean[]>([]);\n\n const enterLoading = (index: number) => {\n setLoadings((prevLoadings) => {\n const newLoadings = [...prevLoadings];\n newLoadings[index] = true;\n return newLoadings;\n });\n\n setTimeout(() => {\n setLoadings((prevLoadings) => {\n const newLoadings = [...prevLoadings];\n newLoadings[index] = false;\n return newLoadings;\n });\n }, 3000);\n };\n\n return (\n <Flex gap="small" vertical>\n <Flex gap="small" align="center" wrap>\n <Button type="primary" loading>\n Loading\n </Button>\n <Button type="primary" size="small" loading>\n Loading\n </Button>\n <Button type="primary" icon={<PoweroffOutlined />} loading />\n <Button type="primary" loading={{ icon: <SyncOutlined spin /> }}>\n Loading Icon\n </Button>\n </Flex>\n <Flex gap="small" wrap>\n <Button type="primary" loading={loadings[0]} onClick={() => enterLoading(0)}>\n Icon Start\n </Button>\n <Button\n type="primary"\n loading={loadings[2]}\n onClick={() => enterLoading(2)}\n iconPosition="end"\n >\n Icon End\n </Button>\n <Button\n type="primary"\n icon={<PoweroffOutlined />}\n loading={loadings[1]}\n onClick={() => enterLoading(1)}\n >\n Icon Replace\n </Button>\n <Button\n type="primary"\n icon={<PoweroffOutlined />}\n loading={loadings[3]}\n onClick={() => enterLoading(3)}\n />\n <Button\n type="primary"\n icon={<PoweroffOutlined />}\n loading={loadings[3] && { icon: <SyncOutlined spin /> }}\n onClick={() => enterLoading(3)}\n >\n Loading Icon\n </Button>\n </Flex>\n </Flex>\n );\n};\n\nexport default App;\n';},cabf7788:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ec0d919d");var o="import React from 'react';\nimport { TimePicker } from 'antd';\n\nconst App: React.FC = () => <TimePicker minuteStep={15} secondStep={10} hourStep={1} />;\n\nexport default App;\n";},cb036311:function(n,e,t){},cb20a2f4:function(n,e,t){},cb306379:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("27953283");var o="import React from 'react';\nimport { Flex, QRCode } from 'antd';\n\nconst value = 'https://ant.design';\n\nconst App: React.FC = () => (\n <Flex gap=\"middle\" wrap>\n <QRCode value={value} status=\"loading\" />\n <QRCode value={value} status=\"expired\" onRefresh={() => console.log('refresh')} />\n <QRCode value={value} status=\"scanned\" />\n </Flex>\n);\n\nexport default App;\n";},cb3618f0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c08e0e64");var o='import React from \'react\';\nimport { Divider, Flex, Tag } from \'antd\';\n\nconst App: React.FC = () => (\n <>\n <Divider orientation="left">Presets</Divider>\n <Flex gap="4px 0" wrap>\n <Tag color="magenta">magenta</Tag>\n <Tag color="red">red</Tag>\n <Tag color="volcano">volcano</Tag>\n <Tag color="orange">orange</Tag>\n <Tag color="gold">gold</Tag>\n <Tag color="lime">lime</Tag>\n <Tag color="green">green</Tag>\n <Tag color="cyan">cyan</Tag>\n <Tag color="blue">blue</Tag>\n <Tag color="geekblue">geekblue</Tag>\n <Tag color="purple">purple</Tag>\n </Flex>\n <Divider orientation="left">Custom</Divider>\n <Flex gap="4px 0" wrap>\n <Tag color="#f50">#f50</Tag>\n <Tag color="#2db7f5">#2db7f5</Tag>\n <Tag color="#87d068">#87d068</Tag>\n <Tag color="#108ee9">#108ee9</Tag>\n </Flex>\n </>\n);\n\nexport default App;\n';},cb46b507:function(n,e,t){},cb63a126:function(n,e,t){},cb917cce:function(n,e,t){},cb9bddba:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3dab6cb1");var o="import React, { useState } from 'react';\nimport { Button, Modal } from 'antd';\n\nconst App: React.FC = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const showModal = () => {\n setIsModalOpen(true);\n };\n\n const handleOk = () => {\n setIsModalOpen(false);\n };\n\n const handleCancel = () => {\n setIsModalOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showModal}>\n Open Modal\n </Button>\n <Modal\n title=\"Basic Modal\"\n open={isModalOpen}\n onOk={handleOk}\n onCancel={handleCancel}\n mousePosition={{ x: 300, y: 300 }}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n";},cbc268bd:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1e47807d");var o="import React, { useState } from 'react';\nimport { Tree } from 'antd';\nimport type { TreeDataNode, TreeProps } from 'antd';\n\nconst x = 3;\nconst y = 2;\nconst z = 1;\nconst defaultData: TreeDataNode[] = [];\n\nconst generateData = (_level: number, _preKey?: React.Key, _tns?: TreeDataNode[]) => {\n const preKey = _preKey || '0';\n const tns = _tns || defaultData;\n\n const children: React.Key[] = [];\n for (let i = 0; i < x; i++) {\n const key = `${preKey}-${i}`;\n tns.push({ title: key, key });\n if (i < y) {\n children.push(key);\n }\n }\n if (_level < 0) {\n return tns;\n }\n const level = _level - 1;\n children.forEach((key, index) => {\n tns[index].children = [];\n return generateData(level, key, tns[index].children);\n });\n};\ngenerateData(z);\n\nconst App: React.FC = () => {\n const [gData, setGData] = useState(defaultData);\n const [expandedKeys] = useState(['0-0', '0-0-0', '0-0-0-0']);\n\n const onDragEnter: TreeProps['onDragEnter'] = (info) => {\n console.log(info);\n // expandedKeys, set it when controlled is needed\n // setExpandedKeys(info.expandedKeys)\n };\n\n const onDrop: TreeProps['onDrop'] = (info) => {\n console.log(info);\n const dropKey = info.node.key;\n const dragKey = info.dragNode.key;\n const dropPos = info.node.pos.split('-');\n const dropPosition = info.dropPosition - Number(dropPos[dropPos.length - 1]); // the drop position relative to the drop node, inside 0, top -1, bottom 1\n\n const loop = (\n data: TreeDataNode[],\n key: React.Key,\n callback: (node: TreeDataNode, i: number, data: TreeDataNode[]) => void,\n ) => {\n for (let i = 0; i < data.length; i++) {\n if (data[i].key === key) {\n return callback(data[i], i, data);\n }\n if (data[i].children) {\n loop(data[i].children!, key, callback);\n }\n }\n };\n const data = [...gData];\n\n // Find dragObject\n let dragObj: TreeDataNode;\n loop(data, dragKey, (item, index, arr) => {\n arr.splice(index, 1);\n dragObj = item;\n });\n\n if (!info.dropToGap) {\n // Drop on the content\n loop(data, dropKey, (item) => {\n item.children = item.children || [];\n // where to insert. New item was inserted to the start of the array in this example, but can be anywhere\n item.children.unshift(dragObj);\n });\n } else {\n let ar: TreeDataNode[] = [];\n let i: number;\n loop(data, dropKey, (_item, index, arr) => {\n ar = arr;\n i = index;\n });\n if (dropPosition === -1) {\n // Drop on the top of the drop node\n ar.splice(i!, 0, dragObj!);\n } else {\n // Drop on the bottom of the drop node\n ar.splice(i! + 1, 0, dragObj!);\n }\n }\n setGData(data);\n };\n\n return (\n <Tree\n className=\"draggable-tree\"\n defaultExpandedKeys={expandedKeys}\n draggable\n blockNode\n onDragEnter={onDragEnter}\n onDrop={onDrop}\n treeData={gData}\n />\n );\n};\n\nexport default App;\n";},cc9450ca:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("58ef23fc");var o="import React, { useState } from 'react';\nimport {\n DesktopOutlined,\n FileOutlined,\n PieChartOutlined,\n TeamOutlined,\n UserOutlined,\n} from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Breadcrumb, Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Footer, Sider } = Layout;\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nfunction getItem(\n label: React.ReactNode,\n key: React.Key,\n icon?: React.ReactNode,\n children?: MenuItem[],\n): MenuItem {\n return {\n key,\n icon,\n children,\n label,\n } as MenuItem;\n}\n\nconst items: MenuItem[] = [\n getItem('Option 1', '1', <PieChartOutlined />),\n getItem('Option 2', '2', <DesktopOutlined />),\n getItem('User', 'sub1', <UserOutlined />, [\n getItem('Tom', '3'),\n getItem('Bill', '4'),\n getItem('Alex', '5'),\n ]),\n getItem('Team', 'sub2', <TeamOutlined />, [getItem('Team 1', '6'), getItem('Team 2', '8')]),\n getItem('Files', '9', <FileOutlined />),\n];\n\nconst App: React.FC = () => {\n const [collapsed, setCollapsed] = useState(false);\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout style={{ minHeight: '100vh' }}>\n <Sider collapsible collapsed={collapsed} onCollapse={(value) => setCollapsed(value)}>\n <div className=\"demo-logo-vertical\" />\n <Menu theme=\"dark\" defaultSelectedKeys={['1']} mode=\"inline\" items={items} />\n </Sider>\n <Layout>\n <Header style={{ padding: 0, background: colorBgContainer }} />\n <Content style={{ margin: '0 16px' }}>\n <Breadcrumb style={{ margin: '16px 0' }} items={[{ title: 'User' }, { title: 'Bill' }]} />\n <div\n style={{\n padding: 24,\n minHeight: 360,\n background: colorBgContainer,\n borderRadius: borderRadiusLG,\n }}\n >\n Bill is a cat.\n </div>\n </Content>\n <Footer style={{ textAlign: 'center' }}>\n Ant Design \xa9{new Date().getFullYear()} Created by Ant UED\n </Footer>\n </Layout>\n </Layout>\n );\n};\n\nexport default App;\n";},cc9e01bc:function(n,e,t){},ccde24ea:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e0b1d625");var o="import React from 'react';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\n\nconst 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`;\n\nconst itemsNest: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel nest panel',\n children: <p>{text}</p>,\n },\n];\n\nconst items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header 1',\n children: <Collapse defaultActiveKey=\"1\" items={itemsNest} />,\n },\n {\n key: '2',\n label: 'This is panel header 2',\n children: <p>{text}</p>,\n },\n {\n key: '3',\n label: 'This is panel header 3',\n children: <p>{text}</p>,\n },\n];\n\nconst App: React.FC = () => {\n const onChange = (key: string | string[]) => {\n console.log(key);\n };\n\n return <Collapse onChange={onChange} items={items} />;\n};\n\nexport default App;\n";},cd041de2:function(n,e,t){},cd08c09a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("20f4e7de");var o="import React from 'react';\nimport {\n AppstoreOutlined,\n BarChartOutlined,\n CloudOutlined,\n ShopOutlined,\n TeamOutlined,\n UploadOutlined,\n UserOutlined,\n VideoCameraOutlined,\n} from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Footer, Sider } = Layout;\n\nconst siderStyle: React.CSSProperties = {\n overflow: 'auto',\n height: '100vh',\n position: 'sticky',\n insetInlineStart: 0,\n top: 0,\n bottom: 0,\n scrollbarWidth: 'thin',\n scrollbarGutter: 'stable',\n};\n\nconst items: MenuProps['items'] = [\n UserOutlined,\n VideoCameraOutlined,\n UploadOutlined,\n BarChartOutlined,\n CloudOutlined,\n AppstoreOutlined,\n TeamOutlined,\n ShopOutlined,\n].map((icon, index) => ({\n key: String(index + 1),\n icon: React.createElement(icon),\n label: `nav ${index + 1}`,\n}));\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout hasSider>\n <Sider style={siderStyle}>\n <div className=\"demo-logo-vertical\" />\n <Menu theme=\"dark\" mode=\"inline\" defaultSelectedKeys={['4']} items={items} />\n </Sider>\n <Layout>\n <Header style={{ padding: 0, background: colorBgContainer }} />\n <Content style={{ margin: '24px 16px 0', overflow: 'initial' }}>\n <div\n style={{\n padding: 24,\n textAlign: 'center',\n background: colorBgContainer,\n borderRadius: borderRadiusLG,\n }}\n >\n <p>long content</p>\n {\n // indicates very long content\n Array.from({ length: 100 }, (_, index) => (\n <React.Fragment key={index}>\n {index % 20 === 0 && index ? 'more' : '...'}\n <br />\n </React.Fragment>\n ))\n }\n </div>\n </Content>\n <Footer style={{ textAlign: 'center' }}>\n Ant Design \xa9{new Date().getFullYear()} Created by Ant UED\n </Footer>\n </Layout>\n </Layout>\n );\n};\n\nexport default App;\n";},cd33e0c0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("54e626bc");var o="import React from 'react';\nimport { QuestionCircleOutlined } from '@ant-design/icons';\nimport { FloatButton } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <FloatButton icon={<QuestionCircleOutlined />} type=\"primary\" style={{ insetInlineEnd: 24 }} />\n <FloatButton icon={<QuestionCircleOutlined />} type=\"default\" style={{ insetInlineEnd: 94 }} />\n </>\n);\n\nexport default App;\n";},cd4f0a98:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return s;}});var o=t("777fffbe"),a=t("f19d2b93"),r=t("3835a2b7"),i=o._(t("600aabe0"));let l=(0,r.createStyles)(({css:n})=>({siteMask:n`
|
|
z-index: 1;
|
|
position: relative;
|
|
`}));var s=n=>{let{children:e,className:t,style:o,onMouseMove:r,onMouseEnter:s,onMouseLeave:c}=n,{styles:d}=l();return(0,a.jsx)("div",{style:o,className:(0,i.default)(t,d.siteMask),onMouseMove:r,onMouseEnter:s,onMouseLeave:c,children:e});};},cd88d0bb:function(n,e,t){},cddd4b2b:function(n,e,t){},ce088801:function(n,e,t){},ce20da60:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("19147b76");var o="import React from 'react';\nimport { Steps } from 'antd';\n\nconst description = 'This is a description.';\nconst App: React.FC = () => (\n <Steps\n current={1}\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n description,\n subTitle: 'Left 00:00:08',\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\n\nexport default App;\n";},ce305767:function(n,e,t){},ce5304a3:function(n,e,t){},ce722d8d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d95556d3");var o="import React from 'react';\nimport { Flex, Splitter, Typography } from 'antd';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify=\"center\" align=\"center\" style={{ height: '100%' }}>\n <Typography.Title type=\"secondary\" level={5} style={{ whiteSpace: 'nowrap' }}>\n Panel {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => (\n <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>\n <Splitter.Panel collapsible>\n <Desc text={1} />\n </Splitter.Panel>\n <Splitter.Panel collapsible={{ start: true }}>\n <Desc text={2} />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text={3} />\n </Splitter.Panel>\n </Splitter>\n);\n\nexport default App;\n";},ce8f50a5:function(n,e,t){},ce900e2c:function(n,e,t){},ced1471f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("97f159d2");var o="import React from 'react';\nimport { Image } from 'antd';\n\nconst App: React.FC = () => (\n <Image.PreviewGroup\n items={[\n 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',\n 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',\n 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',\n ]}\n >\n <Image\n width={200}\n src=\"https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp\"\n />\n </Image.PreviewGroup>\n);\n\nexport default App;\n";},cf01d623:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("08214589");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, message, Upload } from 'antd';\n\nconst props: UploadProps = {\n name: 'file',\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n headers: {\n authorization: 'authorization-text',\n },\n onChange(info) {\n if (info.file.status !== 'uploading') {\n console.log(info.file, info.fileList);\n }\n if (info.file.status === 'done') {\n message.success(`${info.file.name} file uploaded successfully`);\n } else if (info.file.status === 'error') {\n message.error(`${info.file.name} file upload failed.`);\n }\n },\n};\n\nconst App: React.FC = () => (\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Click to Upload</Button>\n </Upload>\n);\n\nexport default App;\n";},cf1108c9:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("569236ad");var o="import React from 'react';\nimport { Select, Space, Switch } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalSelect } = Select;\n\nconst App: React.FC = () => {\n const [open, setOpen] = React.useState(true);\n\n return (\n <Space direction=\"vertical\" style={{ display: 'flex' }}>\n <Switch checked={open} onChange={() => setOpen(!open)} />\n <InternalSelect\n defaultValue=\"lucy\"\n style={{ width: 120 }}\n open={open}\n options={[\n { label: 'Jack', value: 'jack' },\n { label: 'Lucy', value: 'lucy' },\n { label: 'Disabled', value: 'disabled' },\n { label: 'Bamboo', value: 'bamboo' },\n ]}\n virtual={false}\n />\n </Space>\n );\n};\n\nexport default App;\n";},cf3050d7:function(n,e,t){},cf43ff2c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f9c8a4b0");var o="import React from 'react';\nimport { Watermark } from 'antd';\n\nconst App: React.FC = () => (\n <Watermark\n height={30}\n width={130}\n image=\"https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*lkAoRbywo0oAAAAAAAAAAAAADrJ8AQ/original\"\n >\n <div style={{ height: 500 }} />\n </Watermark>\n);\n\nexport default App;\n";},cf5c29e1:function(n,e,t){},cf674508:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("76d5c2c6");var o="import React from 'react';\nimport { Tabs } from 'antd';\n\nconst onChange = (key: string) => {\n console.log(key);\n};\n\nconst App: React.FC = () => (\n <Tabs\n onChange={onChange}\n type=\"card\"\n items={Array.from({ length: 3 }).map((_, i) => {\n const id = String(i + 1);\n return {\n label: `Tab ${id}`,\n key: id,\n children: `Content of Tab Pane ${id}`,\n };\n })}\n />\n);\n\nexport default App;\n";},cf982296:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cd041de2");var o="import React from 'react';\nimport { Drawer } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalDrawer } = Drawer;\n\nexport default () => (\n <div style={{ padding: 32, background: '#e6e6e6' }}>\n <InternalDrawer title=\"Hello Title\" style={{ height: 300 }} footer=\"Footer!\">\n Hello Content\n </InternalDrawer>\n </div>\n);\n";},cf9c0635:function(n,e,t){},cfadc0b6:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("055465cc");var o='import React from \'react\';\nimport { Card, Col, Row } from \'antd\';\n\nconst App: React.FC = () => (\n <Row gutter={16}>\n <Col span={8}>\n <Card title="Card title" variant="borderless">\n Card content\n </Card>\n </Col>\n <Col span={8}>\n <Card title="Card title" variant="borderless">\n Card content\n </Card>\n </Col>\n <Col span={8}>\n <Card title="Card title" variant="borderless">\n Card content\n </Card>\n </Col>\n </Row>\n);\n\nexport default App;\n';},cfe8e665:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eacd1443");var o="import React, { useState } from 'react';\nimport { Space, Switch, Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.ReactNode;\n name: string;\n age: number;\n address: string;\n children?: DataType[];\n}\n\nconst data: DataType[] = [\n {\n key: 1,\n name: 'John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.',\n age: 60,\n address: 'New York No. 1 Lake Park',\n children: [\n {\n key: 11,\n name: 'John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.',\n age: 42,\n address: 'New York No. 2 Lake Park',\n },\n {\n key: 12,\n name: 'John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.',\n age: 30,\n address: 'New York No. 3 Lake Park',\n children: [\n {\n key: 121,\n name: 'John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr. John Brown sr.',\n age: 16,\n address: 'New York No. 3 Lake Park',\n },\n ],\n },\n {\n key: 13,\n name: 'Jim Green sr. Jim Green sr. Jim Green sr. Jim Green sr.',\n age: 72,\n address: 'London No. 1 Lake Park',\n children: [\n {\n key: 131,\n name: 'Jim Green. Jim Green. Jim Green. Jim Green. Jim Green. Jim Green.',\n age: 42,\n address: 'London No. 2 Lake Park',\n children: [\n {\n key: 1311,\n name: 'Jim Green jr. Jim Green jr. Jim Green jr. Jim Green jr.',\n age: 25,\n address: 'London No. 3 Lake Park',\n },\n {\n key: 1312,\n name: 'Jimmy Green sr. Jimmy Green sr. Jimmy Green sr.',\n age: 18,\n address: 'London No. 4 Lake Park',\n },\n ],\n },\n ],\n },\n ],\n },\n {\n key: 2,\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n];\n\nconst App: React.FC = () => {\n const [fixed, setFixed] = useState(true);\n\n const columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n width: '30%',\n ellipsis: true,\n fixed,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: '12%',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address',\n },\n ];\n\n return (\n <>\n <Space align=\"center\" style={{ marginBottom: 16 }}>\n Fixed first column: <Switch checked={fixed} onChange={setFixed} />\n </Space>\n <Table<DataType>\n columns={columns}\n rowSelection={{ columnWidth: 100 }}\n expandable={{ defaultExpandAllRows: true }}\n dataSource={data}\n />\n </>\n );\n};\n\nexport default App;\n";},cff4b747:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("adb07765");var o="import React from 'react';\nimport { Button, Empty, Typography } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n image: '\u56FE\u6807\u5143\u7D20',\n description: '\u63CF\u8FF0\u5143\u7D20',\n footer: '\u5E95\u90E8\u5143\u7D20',\n },\n en: {\n root: 'Root element',\n image: 'Image element',\n description: 'Description element',\n footer: 'Footer element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Empty\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.23.0' },\n { name: 'image', desc: locale.image, version: '5.23.0' },\n { name: 'description', desc: locale.description, version: '5.23.0' },\n { name: 'footer', desc: locale.footer, version: '5.23.0' },\n ]}\n >\n <Empty\n image={Empty.PRESENTED_IMAGE_SIMPLE}\n styles={{ image: { height: 60 } }}\n description={\n <Typography.Text>\n Customize <a href=\"#API\">Description</a>\n </Typography.Text>\n }\n >\n <Button type=\"primary\">Create Now</Button>\n </Empty>\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},d029a475:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("da03a010");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n },\n {\n title: 'Address',\n dataIndex: 'address',\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n },\n];\n\nconst App: React.FC = () => (\n <Table<DataType>\n bordered\n rowSelection={{ type: 'checkbox', selections: true }}\n columns={columns}\n dataSource={data}\n />\n);\n\nexport default App;\n";},d03f40b5:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("577b8b3c");var o="import React from 'react';\nimport { Button, message } from 'antd';\n\nconst App: React.FC = () => {\n const [messageApi, contextHolder] = message.useMessage();\n\n const success = () => {\n messageApi.open({\n type: 'success',\n content: 'This is a prompt message with custom className and style',\n className: 'custom-class',\n style: {\n marginTop: '20vh',\n },\n });\n };\n\n return (\n <>\n {contextHolder}\n <Button onClick={success}>Customized style</Button>\n </>\n );\n};\n\nexport default App;\n";},d06046c4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f258084c");var o='import React from \'react\';\nimport { Breadcrumb } from \'antd\';\n\nconst menuItems = [\n {\n key: \'1\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">\n General\n </a>\n ),\n },\n {\n key: \'2\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="http://www.taobao.com/">\n Layout\n </a>\n ),\n },\n {\n key: \'3\',\n label: (\n <a target="_blank" rel="noopener noreferrer" href="http://www.tmall.com/">\n Navigation\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => (\n <Breadcrumb\n items={[\n {\n title: \'Ant Design\',\n },\n {\n title: <a href="">Component</a>,\n },\n {\n title: <a href="">General</a>,\n menu: { items: menuItems },\n },\n {\n title: \'Button\',\n },\n ]}\n />\n);\n\nexport default App;\n';},d063db36:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("209168cd");var o='import React, { useState } from \'react\';\nimport { AutoComplete, Flex } from \'antd\';\nimport type { AutoCompleteProps } from \'antd\';\n\nconst mockVal = (str: string, repeat = 1) => ({\n value: str.repeat(repeat),\n});\n\nconst App: React.FC = () => {\n const [options, setOptions] = useState<AutoCompleteProps[\'options\']>([]);\n\n const getPanelValue = (searchText: string) =>\n !searchText ? [] : [mockVal(searchText), mockVal(searchText, 2), mockVal(searchText, 3)];\n\n return (\n <Flex vertical gap={12}>\n <AutoComplete\n options={options}\n style={{ width: 200 }}\n placeholder="Outlined"\n onSearch={(text) => setOptions(getPanelValue(text))}\n onSelect={globalThis.console.log}\n />\n <AutoComplete\n options={options}\n style={{ width: 200 }}\n placeholder="Filled"\n onSearch={(text) => setOptions(getPanelValue(text))}\n onSelect={globalThis.console.log}\n variant="filled"\n />\n <AutoComplete\n options={options}\n style={{ width: 200 }}\n placeholder="Borderless"\n onSearch={(text) => setOptions(getPanelValue(text))}\n onSelect={globalThis.console.log}\n variant="borderless"\n />\n </Flex>\n );\n};\n\nexport default App;\n';},d0b4e761:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("753fa0bd");var o='import React from \'react\';\nimport { Button, Result } from \'antd\';\n\nconst App: React.FC = () => (\n <Result\n status="404"\n title="404"\n subTitle="Sorry, the page you visited does not exist."\n extra={<Button type="primary">Back Home</Button>}\n />\n);\n\nexport default App;\n';},d0bb2d73:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("24ea9bf3");var o="import React from 'react';\nimport { DatePicker, Space } from 'antd';\nimport type { DatePickerProps, GetProps } from 'antd';\n\ntype RangePickerProps = GetProps<typeof DatePicker.RangePicker>;\n\nconst { RangePicker } = DatePicker;\n\nconst onOk = (value: DatePickerProps['value'] | RangePickerProps['value']) => {\n console.log('onOk: ', value);\n};\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" size={12}>\n <DatePicker\n showTime\n onChange={(value, dateString) => {\n console.log('Selected Time: ', value);\n console.log('Formatted Selected Time: ', dateString);\n }}\n onOk={onOk}\n />\n <RangePicker\n showTime={{ format: 'HH:mm' }}\n format=\"YYYY-MM-DD HH:mm\"\n onChange={(value, dateString) => {\n console.log('Selected Time: ', value);\n console.log('Formatted Selected Time: ', dateString);\n }}\n onOk={onOk}\n />\n </Space>\n);\n\nexport default App;\n";},d0c7ebe8:function(n,e,t){},d0e45f9d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("db03af60");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\nimport { createStyles } from 'antd-style';\n\nconst useStyle = createStyles(({ css, token }) => {\n const { antCls } = token;\n return {\n customTable: css`\n ${antCls}-table {\n ${antCls}-table-container {\n ${antCls}-table-body,\n ${antCls}-table-content {\n scrollbar-width: thin;\n scrollbar-color: #eaeaea transparent;\n scrollbar-gutter: stable;\n }\n }\n }\n `,\n };\n});\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Full Name',\n width: 100,\n dataIndex: 'name',\n fixed: 'left',\n },\n {\n title: 'Age',\n width: 100,\n dataIndex: 'age',\n },\n { title: 'Column 1', dataIndex: 'address', key: '1', fixed: 'left' },\n { title: 'Column 2', dataIndex: 'address', key: '2' },\n { title: 'Column 3', dataIndex: 'address', key: '3' },\n { title: 'Column 4', dataIndex: 'address', key: '4' },\n { title: 'Column 5', dataIndex: 'address', key: '5' },\n { title: 'Column 6', dataIndex: 'address', key: '6' },\n { title: 'Column 7', dataIndex: 'address', key: '7' },\n { title: 'Column 8', dataIndex: 'address', key: '8' },\n { title: 'Column 9', dataIndex: 'address', key: '9' },\n { title: 'Column 10', dataIndex: 'address', key: '10' },\n { title: 'Column 11', dataIndex: 'address', key: '11' },\n { title: 'Column 12', dataIndex: 'address', key: '12' },\n { title: 'Column 13', dataIndex: 'address', key: '13' },\n { title: 'Column 14', dataIndex: 'address', key: '14' },\n { title: 'Column 15', dataIndex: 'address', key: '15' },\n { title: 'Column 16', dataIndex: 'address', key: '16' },\n { title: 'Column 17', dataIndex: 'address', key: '17' },\n { title: 'Column 18', dataIndex: 'address', key: '18' },\n { title: 'Column 19', dataIndex: 'address', key: '19' },\n { title: 'Column 20', dataIndex: 'address', key: '20' },\n {\n title: 'Action 1',\n fixed: 'right',\n width: 90,\n render: () => <a>action</a>,\n },\n {\n title: 'Action 2',\n width: 90,\n render: () => <a>action</a>,\n },\n {\n title: 'Action 3',\n fixed: 'right',\n width: 90,\n render: () => <a>action</a>,\n },\n];\n\nconst dataSource: DataType[] = [\n { key: '1', name: 'Olivia', age: 32, address: 'New York Park' },\n { key: '2', name: 'Ethan', age: 40, address: 'London Park' },\n];\n\nconst App: React.FC = () => {\n const { styles } = useStyle();\n return (\n <Table<DataType>\n bordered\n className={styles.customTable}\n columns={columns}\n dataSource={dataSource}\n scroll={{ x: 'max-content' }}\n pagination={false}\n />\n );\n};\n\nexport default App;\n";},d0e9ebb7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0592f27c");var o="import React, { useState } from 'react';\nimport { Flex, Rate } from 'antd';\n\nconst desc = ['terrible', 'bad', 'normal', 'good', 'wonderful'];\n\nconst App: React.FC = () => {\n const [value, setValue] = useState(3);\n return (\n <Flex gap=\"middle\" vertical>\n <Rate tooltips={desc} onChange={setValue} value={value} />\n {value ? <span>{desc[value - 1]}</span> : null}\n </Flex>\n );\n};\n\nexport default App;\n";},d0f54e20:function(n,e,t){},d0fb868b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ef1a0a10");var o="import React, { useState } from 'react';\nimport { Button, Drawer, theme } from 'antd';\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n const [open, setOpen] = useState(false);\n\n const showDrawer = () => {\n setOpen(true);\n };\n\n const onClose = () => {\n setOpen(false);\n };\n\n const containerStyle: React.CSSProperties = {\n position: 'relative',\n height: 200,\n padding: 48,\n overflow: 'hidden',\n background: token.colorFillAlter,\n border: `1px solid ${token.colorBorderSecondary}`,\n borderRadius: token.borderRadiusLG,\n };\n\n return (\n <div style={containerStyle}>\n Render in this\n <div style={{ marginTop: 16 }}>\n <Button type=\"primary\" onClick={showDrawer}>\n Open\n </Button>\n </div>\n <Drawer\n title=\"Basic Drawer\"\n placement=\"right\"\n closable={false}\n onClose={onClose}\n open={open}\n getContainer={false}\n >\n <p>Some contents...</p>\n </Drawer>\n </div>\n );\n};\n\nexport default App;\n";},d18732fa:function(n,e,t){},d1a57fea:function(n,e,t){},d1b1fadc:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b833bded");var o='import React from \'react\';\nimport { Button, Form, Input, Select, Space, Tooltip, Typography } from \'antd\';\n\nconst { Option } = Select;\n\nconst onFinish = (values: any) => {\n console.log(\'Received values of form: \', values);\n};\n\nconst App: React.FC = () => (\n <Form\n name="complex-form"\n onFinish={onFinish}\n labelCol={{ span: 8 }}\n wrapperCol={{ span: 16 }}\n style={{ maxWidth: 600 }}\n >\n <Form.Item label="Username">\n <Space>\n <Form.Item\n name="username"\n noStyle\n rules={[{ required: true, message: \'Username is required\' }]}\n >\n <Input style={{ width: 160 }} placeholder="Please input" />\n </Form.Item>\n <Tooltip title="Useful information">\n <Typography.Link href="#API">Need Help?</Typography.Link>\n </Tooltip>\n </Space>\n </Form.Item>\n <Form.Item label="Address">\n <Space.Compact>\n <Form.Item\n name={[\'address\', \'province\']}\n noStyle\n rules={[{ required: true, message: \'Province is required\' }]}\n >\n <Select placeholder="Select province">\n <Option value="Zhejiang">Zhejiang</Option>\n <Option value="Jiangsu">Jiangsu</Option>\n </Select>\n </Form.Item>\n <Form.Item\n name={[\'address\', \'street\']}\n noStyle\n rules={[{ required: true, message: \'Street is required\' }]}\n >\n <Input style={{ width: \'50%\' }} placeholder="Input street" />\n </Form.Item>\n </Space.Compact>\n </Form.Item>\n <Form.Item label="BirthDate" style={{ marginBottom: 0 }}>\n <Form.Item\n name="year"\n rules={[{ required: true }]}\n style={{ display: \'inline-block\', width: \'calc(50% - 8px)\' }}\n >\n <Input placeholder="Input birth year" />\n </Form.Item>\n <Form.Item\n name="month"\n rules={[{ required: true }]}\n style={{ display: \'inline-block\', width: \'calc(50% - 8px)\', margin: \'0 8px\' }}\n >\n <Input placeholder="Input birth month" />\n </Form.Item>\n </Form.Item>\n <Form.Item label={null}>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},d1ca3a82:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5c8d266f");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent } from 'antd';\nimport { Radio, Tabs } from 'antd';\n\ntype TabPosition = 'left' | 'right' | 'top' | 'bottom';\n\nconst App: React.FC = () => {\n const [mode, setMode] = useState<TabPosition>('top');\n\n const handleModeChange = (e: RadioChangeEvent) => {\n setMode(e.target.value);\n };\n\n return (\n <div>\n <Radio.Group onChange={handleModeChange} value={mode} style={{ marginBottom: 8 }}>\n <Radio.Button value=\"top\">Horizontal</Radio.Button>\n <Radio.Button value=\"left\">Vertical</Radio.Button>\n </Radio.Group>\n <Tabs\n defaultActiveKey=\"1\"\n tabPosition={mode}\n style={{ height: 220 }}\n items={Array.from({ length: 30 }, (_, i) => {\n const id = String(i);\n return {\n label: `Tab-${id}`,\n key: id,\n disabled: i === 28,\n children: `Content of tab ${id}`,\n };\n })}\n />\n </div>\n );\n};\n\nexport default App;\n";},d1cea296:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("20e4e3d7");var o='import React from \'react\';\nimport { Col, Divider, Row } from \'antd\';\n\nconst DemoBox: React.FC<React.PropsWithChildren<{ value: number }>> = (props) => (\n <p className={`height-${props.value}`}>{props.children}</p>\n);\n\nconst App: React.FC = () => (\n <>\n <Divider orientation="left">Align Top</Divider>\n <Row justify="center" align="top">\n <Col span={4}>\n <DemoBox value={100}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={50}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={120}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={80}>col-4</DemoBox>\n </Col>\n </Row>\n\n <Divider orientation="left">Align Middle</Divider>\n <Row justify="space-around" align="middle">\n <Col span={4}>\n <DemoBox value={100}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={50}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={120}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={80}>col-4</DemoBox>\n </Col>\n </Row>\n\n <Divider orientation="left">Align Bottom</Divider>\n <Row justify="space-between" align="bottom">\n <Col span={4}>\n <DemoBox value={100}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={50}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={120}>col-4</DemoBox>\n </Col>\n <Col span={4}>\n <DemoBox value={80}>col-4</DemoBox>\n </Col>\n </Row>\n </>\n);\n\nexport default App;\n';},d1eecb58:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("67277711");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap="small" style={{ width: 180 }}>\n <Progress percent={30} size="small" />\n <Progress percent={50} size="small" status="active" />\n <Progress percent={70} size="small" status="exception" />\n <Progress percent={100} size="small" />\n </Flex>\n);\n\nexport default App;\n';},d211a50b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bd7c6b21");var o="import React from 'react';\nimport { Select, Space } from 'antd';\nimport type { SelectProps } from 'antd';\n\nconst options: SelectProps['options'] = [];\n\nfor (let i = 10; i < 36; i++) {\n options.push({\n label: i.toString(36) + i,\n value: i.toString(36) + i,\n });\n}\n\nconst handleChange = (value: string[]) => {\n console.log(`selected ${value}`);\n};\n\nconst App: React.FC = () => (\n <Space style={{ width: '100%' }} direction=\"vertical\">\n <Select\n mode=\"multiple\"\n allowClear\n style={{ width: '100%' }}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n onChange={handleChange}\n options={options}\n />\n <Select\n mode=\"multiple\"\n disabled\n style={{ width: '100%' }}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n onChange={handleChange}\n options={options}\n />\n </Space>\n);\n\nexport default App;\n";},d21f630e:function(n,e,t){},d24392bd:function(n,e,t){},d27288c5:function(n,e,t){},d2bdcbd7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bc7bbfb0");var o="import React from 'react';\nimport { Rate } from 'antd';\n\nconst App: React.FC = () => <Rate disabled defaultValue={2} />;\n\nexport default App;\n";},d2ee8272:function(n,e,t){},d2f7a76e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("51a26c19");var o='import React from \'react\';\nimport Icon, { HomeOutlined } from \'@ant-design/icons\';\nimport { Space } from \'antd\';\nimport type { GetProps } from \'antd\';\n\ntype CustomIconComponentProps = GetProps<typeof Icon>;\n\nconst HeartSvg = () => (\n <svg width="1em" height="1em" fill="currentColor" viewBox="0 0 1024 1024">\n <title>heart icon</title>\n <path d="M923 283.6c-13.4-31.1-32.6-58.9-56.9-82.8-24.3-23.8-52.5-42.4-84-55.5-32.5-13.5-66.9-20.3-102.4-20.3-49.3 0-97.4 13.5-139.2 39-10 6.1-19.5 12.8-28.5 20.1-9-7.3-18.5-14-28.5-20.1-41.8-25.5-89.9-39-139.2-39-35.5 0-69.9 6.8-102.4 20.3-31.4 13-59.7 31.7-84 55.5-24.4 23.9-43.5 51.7-56.9 82.8-13.9 32.3-21 66.6-21 101.9 0 33.3 6.8 68 20.3 103.3 11.3 29.5 27.5 60.1 48.2 91 32.8 48.9 77.9 99.9 133.9 151.6 92.8 85.7 184.7 144.9 188.6 147.3l23.7 15.2c10.5 6.7 24 6.7 34.5 0l23.7-15.2c3.9-2.5 95.7-61.6 188.6-147.3 56-51.7 101.1-102.7 133.9-151.6 20.7-30.9 37-61.5 48.2-91 13.5-35.3 20.3-70 20.3-103.3 0.1-35.3-7-69.6-20.9-101.9z" />\n </svg>\n);\n\nconst PandaSvg = () => (\n <svg viewBox="0 0 1024 1024" width="1em" height="1em" fill="currentColor">\n <title>Panda icon</title>\n <path\n d="M99.096 315.634s-82.58-64.032-82.58-132.13c0-66.064 33.032-165.162 148.646-148.646 83.37 11.91 99.096 165.162 99.096 165.162l-165.162 115.614zM924.906 315.634s82.58-64.032 82.58-132.13c0-66.064-33.032-165.162-148.646-148.646-83.37 11.91-99.096 165.162-99.096 165.162l165.162 115.614z"\n fill="#6B676E"\n />\n <path\n d="M1024 561.548c0 264.526-229.23 429.42-512.002 429.42S0 826.076 0 561.548 283.96 66.064 512.002 66.064 1024 297.022 1024 561.548z"\n fill="#FFEBD2"\n />\n <path\n d="M330.324 842.126c0 82.096 81.34 148.646 181.678 148.646s181.678-66.55 181.678-148.646H330.324z"\n fill="#E9D7C3"\n />\n <path\n d="M644.13 611.098C594.582 528.516 561.55 512 512.002 512c-49.548 0-82.58 16.516-132.13 99.096-42.488 70.814-78.73 211.264-49.548 247.742 66.064 82.58 165.162 33.032 181.678 33.032 16.516 0 115.614 49.548 181.678-33.032 29.18-36.476-7.064-176.93-49.55-247.74z"\n fill="#FFFFFF"\n />\n <path\n d="M611.098 495.484c0-45.608 36.974-82.58 82.58-82.58 49.548 0 198.194 99.098 198.194 165.162s-79.934 144.904-148.646 99.096c-49.548-33.032-132.128-148.646-132.128-181.678zM412.904 495.484c0-45.608-36.974-82.58-82.58-82.58-49.548 0-198.194 99.098-198.194 165.162s79.934 144.904 148.646 99.096c49.548-33.032 132.128-148.646 132.128-181.678z"\n fill="#6B676E"\n />\n <path\n d="M512.002 726.622c-30.06 0-115.614 5.668-115.614 33.032 0 49.638 105.484 85.24 115.614 82.58 10.128 2.66 115.614-32.944 115.614-82.58-0.002-27.366-85.556-33.032-115.614-33.032z"\n fill="#464655"\n />\n <path\n d="M330.324 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"\n fill="#464655"\n />\n <path\n d="M693.678 495.484m-33.032 0a33.032 33.032 0 1 0 66.064 0 33.032 33.032 0 1 0-66.064 0Z"\n fill="#464655"\n />\n </svg>\n);\n\nconst HeartIcon = (props: Partial<CustomIconComponentProps>) => (\n <Icon component={HeartSvg} {...props} />\n);\n\nconst PandaIcon = (props: Partial<CustomIconComponentProps>) => (\n <Icon component={PandaSvg} {...props} />\n);\n\nconst App: React.FC = () => (\n <Space>\n <HeartIcon style={{ color: \'hotpink\' }} />\n <PandaIcon style={{ fontSize: \'32px\' }} />\n <Icon component={HomeOutlined as React.ForwardRefExoticComponent<any>} />\n <HomeOutlined />\n </Space>\n);\n\nexport default App;\n';},d30d944b:function(n,e,t){},d31352be:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f0823588");var o='import React from \'react\';\nimport { Flex, Radio } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap="middle">\n <Radio.Group defaultValue="a" size="large">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n <Radio.Group defaultValue="a">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n <Radio.Group defaultValue="a" size="small">\n <Radio.Button value="a">Hangzhou</Radio.Button>\n <Radio.Button value="b">Shanghai</Radio.Button>\n <Radio.Button value="c">Beijing</Radio.Button>\n <Radio.Button value="d">Chengdu</Radio.Button>\n </Radio.Group>\n </Flex>\n);\n\nexport default App;\n';},d322e434:function(n,e,t){},d32cb46d:function(n,e,t){},d35c52e0:function(n,e,t){},d3ccbddb:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c079c68d");var o="import React, { useState } from 'react';\nimport { MoonOutlined, SunOutlined } from '@ant-design/icons';\nimport { Flex, Segmented } from 'antd';\nimport type { SizeType } from '../../config-provider/SizeContext';\n\nconst Demo: React.FC = () => {\n const [size, setSize] = useState<SizeType>('middle');\n return (\n <Flex gap=\"small\" align=\"flex-start\" vertical>\n <Segmented\n options={['small', 'middle', 'large']}\n value={size}\n onChange={(value) => setSize(value as SizeType)}\n />\n <Segmented\n size={size}\n shape=\"round\"\n options={[\n { value: 'light', icon: <SunOutlined /> },\n { value: 'dark', icon: <MoonOutlined /> },\n ]}\n />\n </Flex>\n );\n};\n\nexport default Demo;\n";},d437cf67:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return i;}});var o=t("f19d2b93");t("ddb788d5");var a=t("e22febe0"),r=t("a9d1a279"),i=()=>(0,o.jsx)(r.Breadcrumb,{items:[{href:"",title:(0,o.jsx)(a.HomeOutlined,{})},{href:"",title:(0,o.jsxs)(o.Fragment,{children:[(0,o.jsx)(a.UserOutlined,{}),(0,o.jsx)("span",{children:"Application List"})]})},{title:"Application"}]});},d4b2e917:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eb32e09c");var o="import React from 'react';\nimport { Badge, Descriptions } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'Product',\n children: 'Cloud Database',\n },\n {\n key: '2',\n label: 'Billing Mode',\n children: 'Prepaid',\n },\n {\n key: '3',\n label: 'Automatic Renewal',\n children: 'YES',\n },\n {\n key: '4',\n label: 'Order time',\n children: '2018-04-24 18:00:00',\n },\n {\n key: '5',\n label: 'Usage Time',\n children: '2019-04-24 18:00:00',\n span: 2,\n },\n {\n key: '6',\n label: 'Status',\n children: <Badge status=\"processing\" text=\"Running\" />,\n span: 3,\n },\n {\n key: '7',\n label: 'Negotiated Amount',\n children: '$80.00',\n },\n {\n key: '8',\n label: 'Discount',\n children: '$20.00',\n },\n {\n key: '9',\n label: 'Official Receipts',\n children: '$60.00',\n },\n {\n key: '10',\n label: 'Config Info',\n children: (\n <>\n Data disk type: MongoDB\n <br />\n Database version: 3.4\n <br />\n Package: dds.mongo.mid\n <br />\n Storage space: 10 GB\n <br />\n Replication factor: 3\n <br />\n Region: East China 1\n <br />\n </>\n ),\n },\n];\n\nconst App: React.FC = () => <Descriptions title=\"User Info\" bordered items={items} />;\n\nexport default App;\n";},d4d5401b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("710d5289");var o="import React, { useState } from 'react';\nimport { Avatar, List, Radio, Space } from 'antd';\n\ntype PaginationPosition = 'top' | 'bottom' | 'both';\n\ntype PaginationAlign = 'start' | 'center' | 'end';\n\nconst data = [\n {\n title: 'Ant Design Title 1',\n },\n {\n title: 'Ant Design Title 2',\n },\n {\n title: 'Ant Design Title 3',\n },\n {\n title: 'Ant Design Title 4',\n },\n];\n\nconst positionOptions = ['top', 'bottom', 'both'];\n\nconst alignOptions = ['start', 'center', 'end'];\n\nconst App: React.FC = () => {\n const [position, setPosition] = useState<PaginationPosition>('bottom');\n const [align, setAlign] = useState<PaginationAlign>('center');\n\n return (\n <>\n <Space direction=\"vertical\" style={{ marginBottom: '20px' }} size=\"middle\">\n <Space>\n <span>Pagination Position:</span>\n <Radio.Group\n optionType=\"button\"\n value={position}\n onChange={(e) => {\n setPosition(e.target.value);\n }}\n >\n {positionOptions.map((item) => (\n <Radio.Button key={item} value={item}>\n {item}\n </Radio.Button>\n ))}\n </Radio.Group>\n </Space>\n <Space>\n <span>Pagination Align:</span>\n <Radio.Group\n optionType=\"button\"\n value={align}\n onChange={(e) => {\n setAlign(e.target.value);\n }}\n >\n {alignOptions.map((item) => (\n <Radio.Button key={item} value={item}>\n {item}\n </Radio.Button>\n ))}\n </Radio.Group>\n </Space>\n </Space>\n <List\n pagination={{ position, align }}\n dataSource={data}\n renderItem={(item, index) => (\n <List.Item>\n <List.Item.Meta\n avatar={<Avatar src={`https://api.dicebear.com/7.x/miniavs/svg?seed=${index}`} />}\n title={<a href=\"https://ant.design\">{item.title}</a>}\n description=\"Ant Design, a design language for background applications, is refined by Ant UED Team\"\n />\n </List.Item>\n )}\n />\n </>\n );\n};\n\nexport default App;\n";},d507e1e4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("de800674");var o="import React, { useState } from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [text, setText] = useState('Unselect');\n\n const onChange: CascaderProps<Option>['onChange'] = (_, selectedOptions) => {\n setText(selectedOptions.map((o) => o.label).join(', '));\n };\n\n return (\n <span>\n {text}\n \n <Cascader options={options} onChange={onChange}>\n <a>Change city</a>\n </Cascader>\n </span>\n );\n};\n\nexport default App;\n";},d516bf61:function(n,e,t){},d5306b9f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7d4c4fb0");var o="import React from 'react';\nimport { Tabs } from 'antd';\nimport type { TabsProps } from 'antd';\n\nconst onChange = (key: string) => {\n console.log(key);\n};\n\nconst items: TabsProps['items'] = [\n {\n key: '1',\n label: 'Tab 1',\n children: 'Content of Tab Pane 1',\n },\n {\n key: '2',\n label: 'Tab 2',\n children: 'Content of Tab Pane 2',\n },\n {\n key: '3',\n label: 'Tab 3',\n children: 'Content of Tab Pane 3',\n },\n];\n\nconst App: React.FC = () => <Tabs defaultActiveKey=\"1\" items={items} onChange={onChange} />;\n\nexport default App;\n";},d551da9f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c3d3dd0c");var o="import React, { useState } from 'react';\nimport { Button, Skeleton, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [loading, setLoading] = useState<boolean>(false);\n\n const showSkeleton = () => {\n setLoading(true);\n setTimeout(() => {\n setLoading(false);\n }, 3000);\n };\n\n return (\n <Space direction=\"vertical\" style={{ width: '100%' }} size={16}>\n <Skeleton loading={loading}>\n <h4 style={{ marginBottom: 16 }}>Ant Design, a design language</h4>\n <p>\n We supply a series of design principles, practical patterns and high quality design\n resources (Sketch and Axure), to help people create their product prototypes beautifully\n and efficiently.\n </p>\n </Skeleton>\n <Button onClick={showSkeleton} disabled={loading}>\n Show Skeleton\n </Button>\n </Space>\n );\n};\n\nexport default App;\n";},d566e942:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("522aada4");var o='import React from \'react\';\nimport { Form, Input, Typography } from \'antd\';\n\nconst App: React.FC = () => (\n <Form\n name="label-ellipsis"\n labelCol={{ span: 8 }}\n wrapperCol={{ span: 16 }}\n style={{ maxWidth: 600 }}\n >\n <Form.Item\n label={\n <Typography.Text ellipsis>\n longtextlongtextlongtextlongtextlongtextlongtextlongtext\n </Typography.Text>\n }\n name="username"\n >\n <Input />\n </Form.Item>\n\n <Form.Item\n label={\n <Typography.Text ellipsis>\n longtext longtext longtext longtext longtext longtext longtext\n </Typography.Text>\n }\n name="password"\n >\n <Input.Password />\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},d57e5cc7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("43b1a101");var o="import React, { useState } from 'react';\nimport { ColorPicker, Space } from 'antd';\nimport type { ColorPickerProps, GetProp } from 'antd';\n\ntype Color = GetProp<ColorPickerProps, 'value'>;\n\nconst Demo: React.FC = () => {\n const [color, setColor] = useState<Color>('#1677ff');\n\n return (\n <Space>\n <ColorPicker value={color} onChange={setColor} />\n <ColorPicker value={color} onChangeComplete={setColor} />\n </Space>\n );\n};\n\nexport default Demo;\n";},d59dc02e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("32effae9");var o="import React, { useState } from 'react';\nimport { InputNumber, Table } from 'antd';\nimport type { TableColumnsType, TableProps } from 'antd';\n\ntype TableRowSelection<T extends object = object> = TableProps<T>['rowSelection'];\n\nconst RenderTimes: React.FC = () => {\n const timesRef = React.useRef(0);\n timesRef.current += 1;\n return <span>{timesRef.current}</span>;\n};\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst shouldCellUpdate = (record: DataType, prevRecord: DataType) => record !== prevRecord;\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n shouldCellUpdate,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n shouldCellUpdate,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n shouldCellUpdate,\n render: (addr) => (\n <>\n {addr}\n <RenderTimes />\n </>\n ),\n },\n];\n\nfunction genData(length: number) {\n return Array.from({ length }).map<DataType>((_, i) => ({\n key: i,\n name: `Edward King ${i}`,\n age: 32,\n address: `London, Park Lane no. ${i}`,\n }));\n}\n\nconst App: React.FC = () => {\n const [data, setData] = useState<DataType[]>(() => genData(50));\n const [selectedRowKeys, setSelectedRowKeys] = useState<React.Key[]>([]);\n\n const onSelectChange = (newSelectedRowKeys: React.Key[]) => {\n console.log('selectedRowKeys changed: ', newSelectedRowKeys);\n setSelectedRowKeys(newSelectedRowKeys);\n };\n\n const rowSelection: TableRowSelection<DataType> = {\n selectedRowKeys,\n onChange: onSelectChange,\n };\n\n return (\n <>\n <InputNumber\n value={data.length}\n onChange={(cnt) => {\n setData(genData(cnt || 0));\n }}\n />\n <Table<DataType>\n rowSelection={rowSelection}\n columns={columns}\n dataSource={data}\n pagination={false}\n />\n </>\n );\n};\n\nexport default App;\n";},d5ea1db2:function(n,e,t){},d60b5937:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("00afcce7");var o='import React from \'react\';\nimport { Descriptions } from \'antd\';\n\nconst App: React.FC = () => (\n <Descriptions title="User Info">\n <Descriptions.Item label="UserName">Zhou Maomao</Descriptions.Item>\n <Descriptions.Item label="Telephone">1810000000</Descriptions.Item>\n <Descriptions.Item label="Live">Hangzhou, Zhejiang</Descriptions.Item>\n <Descriptions.Item label="Remark">empty</Descriptions.Item>\n <Descriptions.Item label="Address">\n No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China\n </Descriptions.Item>\n </Descriptions>\n);\n\nexport default App;\n';},d60c5974:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b72386f7");var o="import React from 'react';\nimport { Button, Modal } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = React.useState<boolean>(false);\n const [loading, setLoading] = React.useState<boolean>(true);\n\n const showLoading = () => {\n setOpen(true);\n setLoading(true);\n\n // Simple loading mock. You should add cleanup logic in real world.\n setTimeout(() => {\n setLoading(false);\n }, 2000);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showLoading}>\n Open Modal\n </Button>\n <Modal\n title={<p>Loading Modal</p>}\n footer={\n <Button type=\"primary\" onClick={showLoading}>\n Reload\n </Button>\n }\n loading={loading}\n open={open}\n onCancel={() => setOpen(false)}\n >\n <p>Some contents...</p>\n <p>Some contents...</p>\n <p>Some contents...</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n";},d6205eeb:function(n,e,t){},d63282cb:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("efb171a4");var o='import React from \'react\';\nimport { SettingOutlined } from \'@ant-design/icons\';\nimport { Cascader, InputNumber, Select, Space } from \'antd\';\n\nconst { Option } = Select;\n\nconst selectBefore = (\n <Select defaultValue="add" style={{ width: 60 }}>\n <Option value="add">+</Option>\n <Option value="minus">-</Option>\n </Select>\n);\nconst selectAfter = (\n <Select defaultValue="USD" style={{ width: 60 }}>\n <Option value="USD">$</Option>\n <Option value="EUR">\u20AC</Option>\n <Option value="GBP">\xa3</Option>\n <Option value="CNY">\xa5</Option>\n </Select>\n);\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />\n <InputNumber addonBefore={selectBefore} addonAfter={selectAfter} defaultValue={100} />\n <InputNumber addonAfter={<SettingOutlined />} defaultValue={100} />\n <InputNumber\n addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}\n defaultValue={100}\n />\n <InputNumber\n addonBefore="+"\n addonAfter={<SettingOutlined />}\n defaultValue={100}\n disabled\n controls\n />\n <InputNumber\n prefix="\xa5"\n addonBefore="+"\n addonAfter={<SettingOutlined />}\n defaultValue={100}\n disabled\n controls\n />\n </Space>\n);\n\nexport default App;\n';},d647ad96:function(n,e,t){},d6610356:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1b556025");var o="import React from 'react';\nimport { TimePicker } from 'antd';\nimport dayjs from 'dayjs';\n\nconst format = 'HH:mm:ss';\n\nconst App: React.FC = () => {\n const startTime = dayjs('12:08:23', 'HH:mm:ss');\n const endTime = dayjs('12:08:23', 'HH:mm:ss');\n\n return <TimePicker.RangePicker defaultValue={[startTime, endTime]} format={format} />;\n};\n\nexport default App;\n";},d6a9f41a:function(n,e,t){},d6c3d38d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ab3a465c");var o="import React, { useEffect, useState } from 'react';\nimport { Transfer } from 'antd';\nimport type { TransferProps } from 'antd';\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n chosen: boolean;\n}\n\nconst App: React.FC = () => {\n const [mockData, setMockData] = useState<RecordType[]>([]);\n const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);\n\n const getMock = () => {\n const tempTargetKeys = [];\n const tempMockData = [];\n for (let i = 0; i < 20; i++) {\n const data = {\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n chosen: i % 2 === 0,\n };\n if (data.chosen) {\n tempTargetKeys.push(data.key);\n }\n tempMockData.push(data);\n }\n setMockData(tempMockData);\n setTargetKeys(tempTargetKeys);\n };\n\n useEffect(() => {\n getMock();\n }, []);\n\n const filterOption = (inputValue: string, option: RecordType) =>\n option.description.indexOf(inputValue) > -1;\n\n const handleChange: TransferProps['onChange'] = (newTargetKeys) => {\n setTargetKeys(newTargetKeys);\n };\n\n const handleSearch: TransferProps['onSearch'] = (dir, value) => {\n console.log('search:', dir, value);\n };\n\n return (\n <Transfer\n dataSource={mockData}\n showSearch\n filterOption={filterOption}\n targetKeys={targetKeys}\n onChange={handleChange}\n onSearch={handleSearch}\n render={(item) => item.title}\n />\n );\n};\n\nexport default App;\n";},d6f11633:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("169e6dd3");var o="import React, { useState } from 'react';\nimport {\n AppstoreOutlined,\n CalendarOutlined,\n LinkOutlined,\n MailOutlined,\n SettingOutlined,\n} from '@ant-design/icons';\nimport { ConfigProvider, Menu, Switch, Typography } from 'antd';\nimport type { MenuProps } from 'antd';\n\ntype MenuItem = Required<MenuProps>['items'][number];\n\nconst items: MenuItem[] = [\n {\n key: '1',\n icon: <MailOutlined />,\n label: 'Navigation One',\n },\n {\n key: '2',\n icon: <CalendarOutlined />,\n label: 'Navigation Two',\n },\n {\n key: 'sub1',\n icon: <AppstoreOutlined />,\n label: 'Navigation Two',\n children: [\n {\n key: '3',\n label: (\n <Typography.Text ellipsis>\n Ant Design, a design language for background applications, is refined by Ant UED Team\n </Typography.Text>\n ),\n },\n {\n key: '4',\n label: 'Option 4',\n },\n {\n key: 'sub1-2',\n label: 'Submenu',\n children: [\n { key: '5', label: 'Option 5' },\n { key: '6', label: 'Option 6' },\n ],\n },\n ],\n },\n {\n key: 'sub2',\n label: 'Navigation Three',\n icon: <SettingOutlined />,\n children: [\n { label: 'Option 7', key: '7' },\n { label: 'Option 8', key: '8' },\n { label: 'Option 9', key: '9' },\n { label: 'Option 10', key: '10' },\n ],\n },\n {\n key: 'link',\n icon: <LinkOutlined />,\n label: (\n <a href=\"https://ant.design\" target=\"_blank\" rel=\"noopener noreferrer\">\n Ant Design\n </a>\n ),\n },\n];\n\nconst App: React.FC = () => {\n const [mode, setMode] = useState<'vertical' | 'inline'>('inline');\n\n const changeMode = (value: boolean) => {\n setMode(value ? 'vertical' : 'inline');\n };\n\n return (\n <>\n <Switch onChange={changeMode} /> Change Mode\n <br />\n <br />\n <ConfigProvider\n theme={{\n components: {\n Menu: {\n itemBorderRadius: 0,\n subMenuItemBorderRadius: 0,\n itemHoverColor: '#1890ff',\n itemSelectedColor: '#1890ff',\n itemSelectedBg: '#e6f7ff',\n activeBarWidth: 3,\n itemMarginInline: 0,\n itemHoverBg: 'transparent',\n },\n },\n }}\n >\n <Menu\n style={{ width: 256 }}\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n mode={mode}\n items={items}\n />\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},d704d01c:function(n,e,t){},d731e311:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("30f40a89");var o='import React from \'react\';\nimport { Button, Col, Row, Statistic } from \'antd\';\n\nconst App: React.FC = () => (\n <Row gutter={16}>\n <Col span={12}>\n <Statistic title="Active Users" value={112893} />\n </Col>\n <Col span={12}>\n <Statistic title="Account Balance (CNY)" value={112893} precision={2} />\n <Button style={{ marginTop: 16 }} type="primary">\n Recharge\n </Button>\n </Col>\n <Col span={12}>\n <Statistic title="Active Users" value={112893} loading />\n </Col>\n </Row>\n);\n\nexport default App;\n';},d747d3e6:function(n,e,t){},d77d225c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3c463529");var o="import React from 'react';\nimport { Button, Checkbox, Input, InputNumber, Select, Space, Tooltip } from 'antd';\n\nconst WrapperTooltip: React.FC<React.PropsWithChildren> = (props) => (\n <Tooltip title=\"Thanks for using antd. Have a nice day !\" {...props} />\n);\n\nconst App: React.FC = () => (\n <Space>\n <WrapperTooltip>\n <Button disabled>Disabled</Button>\n </WrapperTooltip>\n <WrapperTooltip>\n <Input disabled placeholder=\"disabled\" />\n </WrapperTooltip>\n <WrapperTooltip>\n <InputNumber disabled />\n </WrapperTooltip>\n <WrapperTooltip>\n <Checkbox disabled />\n </WrapperTooltip>\n <WrapperTooltip>\n <Select disabled />\n </WrapperTooltip>\n </Space>\n);\n\nexport default App;\n";},d7eebbc1:function(n,e,t){},d7f7f501:function(n,e,t){},d86761ef:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8eb76012");var o='import React, { useEffect, useState } from \'react\';\nimport { Avatar, Button, List, Skeleton } from \'antd\';\n\ninterface DataType {\n gender?: string;\n name?: string;\n email?: string;\n avatar?: string;\n loading: boolean;\n}\n\nconst PAGE_SIZE = 3;\n\nconst App: React.FC = () => {\n const [initLoading, setInitLoading] = useState(true);\n const [loading, setLoading] = useState(false);\n const [data, setData] = useState<DataType[]>([]);\n const [list, setList] = useState<DataType[]>([]);\n const [page, setPage] = useState(1);\n\n const fetchData = (currentPage: number) => {\n const fakeDataUrl = `https://660d2bd96ddfa2943b33731c.mockapi.io/api/users?page=${currentPage}&limit=${PAGE_SIZE}`;\n return fetch(fakeDataUrl).then((res) => res.json());\n };\n\n useEffect(() => {\n fetchData(page).then((res) => {\n const results = Array.isArray(res) ? res : [];\n setInitLoading(false);\n setData(results);\n setList(results);\n });\n }, []);\n\n const onLoadMore = () => {\n setLoading(true);\n setList(data.concat(Array.from({ length: PAGE_SIZE }).map(() => ({ loading: true }))));\n const nextPage = page + 1;\n setPage(nextPage);\n fetchData(nextPage).then((res) => {\n const results = Array.isArray(res) ? res : [];\n const newData = data.concat(results);\n setData(newData);\n setList(newData);\n setLoading(false);\n // Resetting window\'s offsetTop so as to display react-virtualized demo underfloor.\n // In real scene, you can using public method of react-virtualized:\n // https://stackoverflow.com/questions/46700726/how-to-use-public-method-updateposition-of-react-virtualized\n window.dispatchEvent(new Event(\'resize\'));\n });\n };\n\n const loadMore =\n !initLoading && !loading ? (\n <div\n style={{\n textAlign: \'center\',\n marginTop: 12,\n height: 32,\n lineHeight: \'32px\',\n }}\n >\n <Button onClick={onLoadMore}>loading more</Button>\n </div>\n ) : null;\n\n return (\n <List\n className="demo-loadmore-list"\n loading={initLoading}\n itemLayout="horizontal"\n loadMore={loadMore}\n dataSource={list}\n renderItem={(item) => (\n <List.Item\n actions={[<a key="list-loadmore-edit">edit</a>, <a key="list-loadmore-more">more</a>]}\n >\n <Skeleton avatar title={false} loading={item.loading} active>\n <List.Item.Meta\n avatar={<Avatar src={item.avatar} />}\n title={<a href="https://ant.design">{item.name}</a>}\n description="Ant Design, a design language for background applications, is refined by Ant UED Team"\n />\n <div>content</div>\n </Skeleton>\n </List.Item>\n )}\n />\n );\n};\n\nexport default App;\n';},d874e87f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("544591b1");var o="import React from 'react';\nimport { AppstoreOutlined, BarsOutlined } from '@ant-design/icons';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => (\n <Segmented\n options={[\n { label: 'List', value: 'List', icon: <BarsOutlined /> },\n { label: 'Kanban', value: 'Kanban', icon: <AppstoreOutlined /> },\n ]}\n />\n);\n\nexport default Demo;\n";},d881d2f9:function(n,e,t){},d8e48bc0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("05425902");var o='import React from \'react\';\nimport { Flex, Input } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap={12}>\n <Input placeholder="Outlined" />\n <Input placeholder="Filled" variant="filled" />\n <Input placeholder="Borderless" variant="borderless" />\n <Input placeholder="Underlined" variant="underlined" />\n <Input.Search placeholder="Filled" variant="filled" />\n </Flex>\n);\n\nexport default App;\n';},d8f94afb:function(n,e,t){},d9146333:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("86e66c40");var o='import React, { useState } from \'react\';\nimport { Button, Popover } from \'antd\';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n\n const hide = () => {\n setOpen(false);\n };\n\n const handleOpenChange = (newOpen: boolean) => {\n setOpen(newOpen);\n };\n\n return (\n <Popover\n content={<a onClick={hide}>Close</a>}\n title="Title"\n trigger="click"\n open={open}\n onOpenChange={handleOpenChange}\n >\n <Button type="primary">Click me</Button>\n </Popover>\n );\n};\n\nexport default App;\n';},d91ec980:function(n,e,t){},d9277485:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6f89ef84");var o="import React from 'react';\nimport { Divider } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider style={{ borderColor: '#7cb305' }}>Solid</Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider variant=\"dotted\" style={{ borderColor: '#7cb305' }}>\n Dotted\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n <Divider variant=\"dashed\" style={{ borderColor: '#7cb305' }} dashed>\n Dashed\n </Divider>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista\n probare, quae sunt a te dicta? Refert tamen, quo modo.\n </p>\n </>\n);\n\nexport default App;\n";},d942245a:function(n,e,t){},d94bcd53:function(n,e,t){},d95556d3:function(n,e,t){},d96c9e59:function(n,e,t){},d98e07b3:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("21061131");var o="import React from 'react';\nimport { Radio } from 'antd';\n\nconst App: React.FC = () => (\n <Radio.Group\n name=\"radiogroup\"\n defaultValue={1}\n options={[\n { value: 1, label: 'A' },\n { value: 2, label: 'B' },\n { value: 3, label: 'C' },\n { value: 4, label: 'D' },\n ]}\n />\n);\n\nexport default App;\n";},d9c24ddb:function(n,e,t){},d9f71c26:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("54a4af1b");var o="import React, { useState } from 'react';\nimport { Transfer } from 'antd';\nimport type { TransferProps } from 'antd';\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n}\n\nconst mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n}));\n\nconst initialTargetKeys = mockData.filter((item) => Number(item.key) > 10).map((item) => item.key);\n\nconst App: React.FC = () => {\n const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>(initialTargetKeys);\n const [selectedKeys, setSelectedKeys] = useState<TransferProps['targetKeys']>([]);\n\n const onChange: TransferProps['onChange'] = (nextTargetKeys, direction, moveKeys) => {\n console.log('targetKeys:', nextTargetKeys);\n console.log('direction:', direction);\n console.log('moveKeys:', moveKeys);\n setTargetKeys(nextTargetKeys);\n };\n\n const onSelectChange: TransferProps['onSelectChange'] = (\n sourceSelectedKeys,\n targetSelectedKeys,\n ) => {\n console.log('sourceSelectedKeys:', sourceSelectedKeys);\n console.log('targetSelectedKeys:', targetSelectedKeys);\n setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);\n };\n\n const onScroll: TransferProps['onScroll'] = (direction, e) => {\n console.log('direction:', direction);\n console.log('target:', e.target);\n };\n\n return (\n <Transfer\n dataSource={mockData}\n titles={['Source', 'Target']}\n targetKeys={targetKeys}\n selectedKeys={selectedKeys}\n onChange={onChange}\n onSelectChange={onSelectChange}\n onScroll={onScroll}\n render={(item) => item.title}\n />\n );\n};\n\nexport default App;\n";},d9f7fdc2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("246eed01");var o="import React, { useState } from 'react';\nimport { Slider, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const [reverse, setReverse] = useState(true);\n\n return (\n <>\n <Slider defaultValue={30} reverse={reverse} />\n <Slider range defaultValue={[20, 50]} reverse={reverse} />\n Reversed: <Switch size=\"small\" checked={reverse} onChange={setReverse} />\n </>\n );\n};\n\nexport default App;\n";},da03a010:function(n,e,t){},da0742a2:function(n,e,t){},da3fec68:function(n,e,t){},da5b0a74:function(n,e,t){},da885cb7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9032c339");var o="import React from 'react';\nimport { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Breadcrumb, ConfigProvider, Layout, Menu, theme } from 'antd';\n\nconst { Header, Content, Sider } = Layout;\n\nconst items2: MenuProps['items'] = [UserOutlined, LaptopOutlined, NotificationOutlined].map(\n (icon, index) => {\n const key = String(index + 1);\n\n return {\n key: `sub${key}`,\n icon: React.createElement(icon),\n label: `subnav ${key}`,\n children: Array.from({ length: 4 }).map((_, j) => {\n const subKey = index * 4 + j + 1;\n return {\n key: subKey,\n label: `option${subKey}`,\n };\n }),\n };\n },\n);\n\nconst App: React.FC = () => {\n const {\n token: { colorBgContainer, colorBgLayout, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <ConfigProvider\n theme={{\n components: {\n Layout: {\n bodyBg: '#fff',\n headerBg: '#1677ff',\n headerHeight: 64,\n headerPadding: `0 24px`,\n headerColor: colorBgContainer,\n siderBg: '#800080',\n },\n },\n }}\n >\n <Layout>\n <Header style={{ display: 'flex', alignItems: 'center' }}>\n <div className=\"demo-logo\" />\n <div style={{ marginInlineStart: 24, fontSize: 24 }}>Ant Design</div>\n </Header>\n <Layout>\n <ConfigProvider\n theme={{\n components: {\n Layout: {\n siderBg: 'red',\n },\n },\n }}\n >\n <Sider width={32} />\n </ConfigProvider>\n <Sider width={200}>\n <Menu\n mode=\"inline\"\n defaultSelectedKeys={['1']}\n defaultOpenKeys={['sub1']}\n style={{ borderRight: 0 }}\n items={items2}\n />\n </Sider>\n <Layout style={{ padding: '0 24px 24px' }}>\n <Breadcrumb style={{ margin: '16px 0' }}>\n <Breadcrumb.Item>Home</Breadcrumb.Item>\n <Breadcrumb.Item>List</Breadcrumb.Item>\n <Breadcrumb.Item>App</Breadcrumb.Item>\n </Breadcrumb>\n <Content\n style={{\n padding: 24,\n margin: 0,\n minHeight: 280,\n background: colorBgLayout,\n borderRadius: borderRadiusLG,\n }}\n >\n Content\n </Content>\n </Layout>\n </Layout>\n </Layout>\n </ConfigProvider>\n );\n};\n\nexport default App;\n";},dae3e5ac:function(n,e,t){},daeddc2e:function(n,e,t){},daf4f843:function(n,e,t){},db03af60:function(n,e,t){},db0ecc18:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("89b0ca08");var o="import React from 'react';\nimport { Descriptions } from 'antd';\nimport type { DescriptionsProps } from 'antd';\n\nconst items: DescriptionsProps['items'] = [\n {\n key: '1',\n label: 'UserName',\n children: 'Zhou Maomao',\n },\n {\n key: '2',\n label: 'Telephone',\n children: '1810000000',\n },\n {\n key: '3',\n label: 'Live',\n children: 'Hangzhou, Zhejiang',\n },\n {\n key: '4',\n label: 'Address',\n span: 2,\n children: 'No. 18, Wantang Road, Xihu District, Hangzhou, Zhejiang, China',\n },\n {\n key: '5',\n label: 'Remark',\n children: 'empty',\n },\n];\n\nconst App: React.FC = () => <Descriptions title=\"User Info\" layout=\"vertical\" items={items} />;\n\nexport default App;\n";},db13afa1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c12a190d");var o='import React from \'react\';\nimport { Cascader, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Cascader status="error" placeholder="Error" />\n <Cascader status="warning" multiple placeholder="Warning multiple" />\n </Space>\n);\n\nexport default App;\n';},db86ba00:function(n,e,t){},dc5489d6:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1705d06c");var o="import React, { useState } from 'react';\nimport { PlusOutlined } from '@ant-design/icons';\nimport { Image, Upload } from 'antd';\nimport type { GetProp, UploadFile, UploadProps } from 'antd';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst getBase64 = (file: FileType): Promise<string> =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = (error) => reject(error);\n });\n\nconst App: React.FC = () => {\n const [previewOpen, setPreviewOpen] = useState(false);\n const [previewImage, setPreviewImage] = useState('');\n const [fileList, setFileList] = useState<UploadFile[]>([\n {\n uid: '-1',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-xxx',\n percent: 50,\n name: 'image.png',\n status: 'uploading',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-5',\n name: 'image.png',\n status: 'error',\n },\n ]);\n\n const handlePreview = async (file: UploadFile) => {\n if (!file.url && !file.preview) {\n file.preview = await getBase64(file.originFileObj as FileType);\n }\n\n setPreviewImage(file.url || (file.preview as string));\n setPreviewOpen(true);\n };\n\n const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>\n setFileList(newFileList);\n\n const uploadButton = (\n <button style={{ border: 0, background: 'none' }} type=\"button\">\n <PlusOutlined />\n <div style={{ marginTop: 8 }}>Upload</div>\n </button>\n );\n return (\n <>\n <Upload\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n listType=\"picture-circle\"\n fileList={fileList}\n onPreview={handlePreview}\n onChange={handleChange}\n >\n {fileList.length >= 8 ? null : uploadButton}\n </Upload>\n {previewImage && (\n <Image\n wrapperStyle={{ display: 'none' }}\n preview={{\n visible: previewOpen,\n onVisibleChange: (visible) => setPreviewOpen(visible),\n afterOpenChange: (visible) => !visible && setPreviewImage(''),\n }}\n src={previewImage}\n />\n )}\n </>\n );\n};\n\nexport default App;\n";},dc6b9fca:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ebd0bb37");var o="import React, { useRef, useState } from 'react';\nimport { EllipsisOutlined } from '@ant-design/icons';\nimport type { GetRef, TourProps } from 'antd';\nimport { Button, Divider, Space, Tour } from 'antd';\n\nconst App: React.FC = () => {\n const ref1 = useRef<GetRef<typeof Button>>(null);\n const ref2 = useRef<GetRef<typeof Button>>(null);\n const ref3 = useRef<GetRef<typeof Button>>(null);\n\n const [open, setOpen] = useState<boolean>(false);\n\n const steps: TourProps['steps'] = [\n {\n title: 'Upload File',\n description: 'Put your files here.',\n target: () => ref1.current!,\n },\n {\n title: 'Save',\n description: 'Save your changes.',\n target: () => ref2.current!,\n },\n {\n title: 'Other Actions',\n description: 'Click to see other actions.',\n target: () => ref3.current!,\n },\n ];\n\n return (\n <>\n <Button type=\"primary\" onClick={() => setOpen(true)}>\n Begin Tour\n </Button>\n <Divider />\n <Space>\n <Button ref={ref1}>Upload</Button>\n <Button ref={ref2} type=\"primary\">\n Save\n </Button>\n <Button ref={ref3} icon={<EllipsisOutlined />} />\n </Space>\n <Tour\n open={open}\n onClose={() => setOpen(false)}\n steps={steps}\n indicatorsRender={(current, total) => (\n <span>\n {current + 1} / {total}\n </span>\n )}\n />\n </>\n );\n};\n\nexport default App;\n";},dc81ea04:function(n,e,t){},dc8cb8f0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6a8a47a8");var o="import React, { useState } from 'react';\nimport { TreeSelect } from 'antd';\n\nconst treeData = [\n {\n value: 'parent 1',\n title: 'parent 1',\n children: [\n {\n value: 'parent 1-0',\n title: 'parent 1-0',\n children: [\n {\n value: 'leaf1',\n title: 'my leaf',\n },\n {\n value: 'leaf2',\n title: 'your leaf',\n },\n ],\n },\n {\n value: 'parent 1-1',\n title: 'parent 1-1',\n children: [\n {\n value: 'sss',\n title: <b style={{ color: '#08c' }}>sss</b>,\n },\n ],\n },\n ],\n },\n];\nconst App: React.FC = () => {\n const [value, setValue] = useState<string>();\n\n const onChange = (newValue: string) => {\n console.log(newValue);\n setValue(newValue);\n };\n\n return (\n <TreeSelect\n showSearch\n style={{ width: '100%' }}\n value={value}\n styles={{\n popup: { root: { maxHeight: 400, overflow: 'auto' } },\n }}\n placeholder=\"Please select\"\n allowClear\n multiple\n treeDefaultExpandAll\n onChange={onChange}\n treeData={treeData}\n />\n );\n};\n\nexport default App;\n";},dcaca8e4:function(n,e,t){},dcc1b873:function(n,e,t){},dcd98aca:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4eaa09de");var o='import React from \'react\';\nimport { CheckOutlined, CloseOutlined } from \'@ant-design/icons\';\nimport { Space, Switch } from \'antd\';\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Switch checkedChildren="\u5F00\u542F" unCheckedChildren="\u5173\u95ED" defaultChecked />\n <Switch checkedChildren="1" unCheckedChildren="0" />\n <Switch\n checkedChildren={<CheckOutlined />}\n unCheckedChildren={<CloseOutlined />}\n defaultChecked\n />\n </Space>\n);\n\nexport default App;\n';},dcf190fc:function(n,e,t){},dcfa992d:function(n,e,t){},dd1605c8:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3f74e845");var o="import React from 'react';\nimport { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons';\nimport { Button, Space, Upload } from 'antd';\nimport type { UploadFile } from 'antd';\n\nconst { Dragger } = Upload;\n\nconst fileList: UploadFile[] = [\n {\n uid: '-1',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-2',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-xxx',\n percent: 50,\n name: 'image.png',\n status: 'uploading',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-5',\n name: 'image.png',\n status: 'error',\n },\n];\n\nconst App: React.FC = () => {\n const uploadButton = (\n <button\n style={{ color: 'inherit', cursor: 'inherit', border: 0, background: 'none' }}\n type=\"button\"\n >\n <PlusOutlined />\n <div style={{ marginTop: 8 }}>Upload</div>\n </button>\n );\n\n return (\n <Space direction=\"vertical\">\n <Upload disabled>Click Text to Upload</Upload>\n <Upload disabled>\n <Button icon={<UploadOutlined />}>Click to Upload</Button>\n </Upload>\n <Upload name=\"avatar\" listType=\"picture-card\" fileList={fileList} disabled>\n {uploadButton}\n </Upload>\n <Upload name=\"avatar\" listType=\"picture-circle\" fileList={fileList} disabled>\n {uploadButton}\n </Upload>\n <Dragger disabled>\n <p className=\"ant-upload-drag-icon\">\n <InboxOutlined />\n </p>\n <p className=\"ant-upload-text\">Click or drag file to this area to upload</p>\n <p className=\"ant-upload-hint\">\n Support for a single or bulk upload. Strictly prohibited from uploading company data or\n other banned files.\n </p>\n </Dragger>\n </Space>\n );\n};\n\nexport default App;\n";},dd29d7a2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c93fd84a");var o='import React from \'react\';\nimport { Flex, Splitter, Typography } from \'antd\';\nimport type { SplitterProps } from \'antd\';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify="center" align="center" style={{ height: \'100%\' }}>\n <Typography.Title type="secondary" level={5} style={{ whiteSpace: \'nowrap\' }}>\n {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst CustomSplitter: React.FC<Readonly<SplitterProps>> = ({ style, ...restProps }) => (\n <Splitter style={{ boxShadow: \'0 0 10px rgba(0, 0, 0, 0.1)\', ...style }} {...restProps}>\n <Splitter.Panel collapsible min="20%">\n <Desc text="First" />\n </Splitter.Panel>\n <Splitter.Panel collapsible>\n <Desc text="Second" />\n </Splitter.Panel>\n </Splitter>\n);\n\nconst App: React.FC = () => (\n <Flex gap="middle" vertical>\n <CustomSplitter style={{ height: 200 }} />\n <CustomSplitter style={{ height: 300 }} layout="vertical" />\n </Flex>\n);\n\nexport default App;\n';},dd5fdd97:function(n,e,t){},dd89f5ad:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a5d21675");var o="import React from 'react';\nimport { Breadcrumb } from 'antd';\n\nconst App: React.FC = () => (\n <Breadcrumb\n separator=\"\"\n items={[\n {\n title: 'Location',\n },\n {\n type: 'separator',\n separator: ':',\n },\n {\n href: '',\n title: 'Application Center',\n },\n {\n type: 'separator',\n },\n {\n href: '',\n title: 'Application List',\n },\n {\n type: 'separator',\n },\n {\n title: 'An Application',\n },\n ]}\n />\n);\n\nexport default App;\n";},dd95699f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9f61635c");var o="import React from 'react';\nimport { Table, Tooltip } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n render: (text) => <a>{text}</a>,\n width: 150,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 80,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address 1',\n ellipsis: {\n showTitle: false,\n },\n render: (address) => (\n <Tooltip placement=\"topLeft\" title={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column Long Column',\n dataIndex: 'address',\n key: 'address 2',\n ellipsis: {\n showTitle: false,\n },\n render: (address) => (\n <Tooltip placement=\"topLeft\" title={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column Long Column',\n dataIndex: 'address',\n key: 'address 3',\n ellipsis: {\n showTitle: false,\n },\n render: (address) => (\n <Tooltip placement=\"topLeft\" title={address}>\n {address}\n </Tooltip>\n ),\n },\n {\n title: 'Long Column',\n dataIndex: 'address',\n key: 'address 4',\n ellipsis: {\n showTitle: false,\n },\n render: (address) => (\n <Tooltip placement=\"topLeft\" title={address}>\n {address}\n </Tooltip>\n ),\n },\n];\n\nconst data: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 2 Lake Park, London No. 2 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',\n },\n];\n\nconst App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;\n\nexport default App;\n";},dda487af:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f749f928");var o="import React from 'react';\nimport { Slider } from 'antd';\n\nconst App: React.FC = () => {\n const [value, setValue] = React.useState([20, 80]);\n\n return (\n <Slider\n range={{ editable: true, minCount: 1, maxCount: 5 }}\n value={value}\n onChange={setValue}\n />\n );\n};\n\nexport default App;\n";},ddb788d5:function(n,e,t){},ddb8493b:function(n,e,t){},ddd2ff7d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2a262d81");var o="import React from 'react';\nimport { Button, message } from 'antd';\n\nconst App: React.FC = () => {\n const [messageApi, contextHolder] = message.useMessage();\n\n const success = () => {\n messageApi.open({\n type: 'success',\n content: 'This is a prompt message for success, and it will disappear in 10 seconds',\n duration: 10,\n });\n };\n\n return (\n <>\n {contextHolder}\n <Button onClick={success}>Customized display duration</Button>\n </>\n );\n};\n\nexport default App;\n";},de1a922a:function(n,e,t){},de1d4d29:function(n,e,t){},de2ae90e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e50524ba");var o="import React, { useState } from 'react';\nimport {\n Button,\n Card,\n ConfigProvider,\n DatePicker,\n Divider,\n Input,\n Radio,\n Select,\n Space,\n Table,\n Tabs,\n} from 'antd';\nimport type { ConfigProviderProps } from 'antd';\n\ntype SizeType = ConfigProviderProps['componentSize'];\n\nconst App: React.FC = () => {\n const [componentSize, setComponentSize] = useState<SizeType>('small');\n\n return (\n <>\n <Radio.Group\n value={componentSize}\n onChange={(e) => {\n setComponentSize(e.target.value);\n }}\n >\n <Radio.Button value=\"small\">Small</Radio.Button>\n <Radio.Button value=\"middle\">Middle</Radio.Button>\n <Radio.Button value=\"large\">Large</Radio.Button>\n </Radio.Group>\n <Divider />\n <ConfigProvider componentSize={componentSize}>\n <Space size={[0, 16]} style={{ width: '100%' }} direction=\"vertical\">\n <Input />\n <Tabs\n defaultActiveKey=\"1\"\n items={[\n {\n label: 'Tab 1',\n key: '1',\n children: 'Content of Tab Pane 1',\n },\n {\n label: 'Tab 2',\n key: '2',\n children: 'Content of Tab Pane 2',\n },\n {\n label: 'Tab 3',\n key: '3',\n children: 'Content of Tab Pane 3',\n },\n ]}\n />\n <Input.Search allowClear />\n <Input.TextArea allowClear />\n <Select defaultValue=\"demo\" options={[{ value: 'demo' }]} />\n <DatePicker />\n <DatePicker.RangePicker />\n <Button>Button</Button>\n <Card title=\"Card\">\n <Table\n columns={[\n { title: 'Name', dataIndex: 'name' },\n { title: 'Age', dataIndex: 'age' },\n ]}\n dataSource={[\n { key: '1', name: 'John Brown', age: 32 },\n { key: '2', name: 'Jim Green', age: 42 },\n { key: '3', name: 'Joe Black', age: 32 },\n ]}\n />\n </Card>\n </Space>\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},de2d61bb:function(n,e,t){},de59b550:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("37e76120");var o="import React from 'react';\nimport { StarOutlined, UploadOutlined } from '@ant-design/icons';\nimport type { UploadProps } from 'antd';\nimport { Button, Upload } from 'antd';\n\nconst props: UploadProps = {\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n onChange({ file, fileList }) {\n if (file.status !== 'uploading') {\n console.log(file, fileList);\n }\n },\n defaultFileList: [\n {\n uid: '1',\n name: 'xxx.png',\n size: 1234567,\n status: 'done',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/xxx.png',\n },\n {\n uid: '2',\n name: 'yyy.png',\n size: 1234567,\n status: 'done',\n url: 'http://www.baidu.com/yyy.png',\n },\n {\n uid: '3',\n name: 'zzz.png',\n size: 1234567,\n status: 'error',\n response: 'Server Error 500', // custom error message to show\n url: 'http://www.baidu.com/zzz.png',\n },\n ],\n showUploadList: {\n extra: ({ size = 0 }) => (\n <span style={{ color: '#cccccc' }}>({(size / 1024 / 1024).toFixed(2)}MB)</span>\n ),\n showDownloadIcon: true,\n downloadIcon: 'Download',\n showRemoveIcon: true,\n removeIcon: <StarOutlined onClick={(e) => console.log(e, 'custom removeIcon event')} />,\n },\n};\n\nconst App: React.FC = () => (\n <Upload {...props}>\n <Button icon={<UploadOutlined />}>Upload</Button>\n </Upload>\n);\n\nexport default App;\n";},de800674:function(n,e,t){},de90a1a1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bbef1f86");var o="import React, { useState } from 'react';\nimport type { RadioChangeEvent, SelectProps } from 'antd';\nimport { Button, Radio, Select, Space, Switch } from 'antd';\n\ntype SelectCommonPlacement = SelectProps['placement'];\n\nconst randomOptions = (count?: number) => {\n const length = count ?? Math.floor(Math.random() * 5) + 1;\n\n // Random 1 ~ 5 options\n return Array.from({ length }).map((_, index) => ({\n value: index,\n label: `Option ${index}`,\n }));\n};\n\nconst App: React.FC = () => {\n const [placement, SetPlacement] = useState<SelectCommonPlacement>('topLeft');\n const [open, setOpen] = useState(false);\n const [options, setOptions] = useState(() => randomOptions(3));\n\n const placementChange = (e: RadioChangeEvent) => {\n SetPlacement(e.target.value);\n };\n\n return (\n <div\n style={{\n height: '100%',\n minHeight: 500,\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n alignItems: 'center',\n position: 'relative',\n }}\n >\n <Space\n style={{\n position: 'absolute',\n top: 0,\n insetInlineStart: '50%',\n transform: 'translateX(-50%)',\n }}\n >\n <Radio.Group value={placement} onChange={placementChange}>\n <Radio.Button value=\"topLeft\">TL</Radio.Button>\n <Radio.Button value=\"topRight\">TR</Radio.Button>\n <Radio.Button value=\"bottomLeft\">BL</Radio.Button>\n <Radio.Button value=\"bottomRight\">BR</Radio.Button>\n </Radio.Group>\n\n <Switch checked={open} onChange={() => setOpen((o) => !o)} />\n <Button onClick={() => setOptions(randomOptions())}>Random</Button>\n </Space>\n <Select\n open={open}\n style={{ width: 120 }}\n placement={placement}\n options={options}\n popupMatchSelectWidth={200}\n />\n </div>\n );\n};\n\nexport default App;\n";},decc971b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b67a657d");var o='import React, { useState } from \'react\';\nimport { Button, Popover } from \'antd\';\n\nconst App: React.FC = () => {\n const [clicked, setClicked] = useState(false);\n const [hovered, setHovered] = useState(false);\n\n const hide = () => {\n setClicked(false);\n setHovered(false);\n };\n\n const handleHoverChange = (open: boolean) => {\n setHovered(open);\n setClicked(false);\n };\n\n const handleClickChange = (open: boolean) => {\n setHovered(false);\n setClicked(open);\n };\n\n const hoverContent = <div>This is hover content.</div>;\n const clickContent = <div>This is click content.</div>;\n return (\n <Popover\n style={{ width: 500 }}\n content={hoverContent}\n title="Hover title"\n trigger="hover"\n open={hovered}\n onOpenChange={handleHoverChange}\n >\n <Popover\n content={\n <div>\n {clickContent}\n <a onClick={hide}>Close</a>\n </div>\n }\n title="Click title"\n trigger="click"\n open={clicked}\n onOpenChange={handleClickChange}\n >\n <Button>Hover and click / \u60AC\u505C\u5E76\u5355\u51FB</Button>\n </Popover>\n </Popover>\n );\n};\n\nexport default App;\n';},deec5436:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cb20a2f4");var o="import React, { useState } from 'react';\nimport { Button, message, Modal, notification, Select, Space, Switch } from 'antd';\n\nconst options = [\n {\n label: 'Option 1',\n value: '1',\n },\n {\n label: 'Option 2',\n value: '2',\n },\n];\n\nconst Demo: React.FC = () => {\n const [messageInstance, messageHolder] = message.useMessage();\n const [notificationInstance, notificationHolder] = notification.useNotification();\n\n const [isModalOpen, setIsModalOpen] = useState<boolean>(false);\n\n const onShowStatic = () => {\n Modal.confirm({\n content: <Select open value=\"1\" options={options} />,\n });\n };\n\n return (\n <Space>\n <Switch\n style={{ position: 'relative', zIndex: isModalOpen ? 4000 : 0 }}\n checkedChildren=\"Open\"\n unCheckedChildren=\"Close\"\n onChange={(open) => setIsModalOpen(open)}\n />\n <Button onClick={onShowStatic}>Static</Button>\n <Modal\n title=\"Basic Modal\"\n open={isModalOpen}\n footer={null}\n destroyOnHidden\n onCancel={() => setIsModalOpen(false)}\n maskClosable={false}\n closable={false}\n styles={{\n content: {\n marginBlockStart: 100,\n },\n }}\n >\n <Select open value=\"1\" options={options} />\n <Modal\n title=\"Nested Modal\"\n open={isModalOpen}\n footer={null}\n destroyOnHidden\n mask={false}\n onCancel={() => setIsModalOpen(false)}\n maskClosable={false}\n closable={false}\n styles={{\n content: {\n marginBlockStart: 250,\n },\n body: {\n display: 'flex',\n justifyContent: 'center',\n },\n }}\n >\n <Select open value=\"1\" options={options} />\n\n <Modal\n title=\"Nested Modal\"\n open={isModalOpen}\n footer={null}\n destroyOnHidden\n mask={false}\n maskClosable={false}\n onCancel={() => setIsModalOpen(false)}\n closable={false}\n styles={{\n content: {\n marginBlockStart: 400,\n },\n body: {\n display: 'flex',\n justifyContent: 'flex-end',\n },\n }}\n >\n <Space wrap>\n <Button\n onClick={() => {\n Modal.confirm({\n title: 'Are you OK?',\n content: 'I am OK',\n });\n }}\n >\n Static Confirm\n </Button>\n\n <Button\n onClick={() => {\n message.success('Hello World');\n notification.success({\n message: 'Hello World',\n });\n }}\n >\n Static Message, Notification\n </Button>\n\n <Button\n onClick={() => {\n messageInstance.success('Hello World');\n notificationInstance.success({\n message: 'Hello World',\n });\n }}\n >\n Hook Message, Notification\n </Button>\n\n <Select open value=\"1\" options={options} />\n </Space>\n </Modal>\n </Modal>\n </Modal>\n\n {messageHolder}\n {notificationHolder}\n </Space>\n );\n};\n\nexport default Demo;\n";},def12182:function(n,e,t){},df558091:function(n,e,t){},df98726e:function(n,e,t){},dfb4d758:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b8c1d814");var o="import React from 'react';\nimport type { TimePickerProps } from 'antd';\nimport { Space, TimePicker } from 'antd';\n\nconst onChange: TimePickerProps['onChange'] = (time, timeString) => {\n console.log(time, timeString);\n};\n\nconst App: React.FC = () => (\n <Space wrap>\n <TimePicker use12Hours onChange={onChange} />\n <TimePicker use12Hours format=\"h:mm:ss A\" onChange={onChange} />\n <TimePicker use12Hours format=\"h:mm a\" onChange={onChange} />\n </Space>\n);\n\nexport default App;\n";},dfbfc7fc:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ddb8493b");var o='import React, { useState } from \'react\';\nimport { CopyOutlined, DownloadOutlined, SettingOutlined } from \'@ant-design/icons\';\nimport {\n Button,\n Cascader,\n DatePicker,\n Divider,\n Drawer,\n Dropdown,\n Input,\n InputNumber,\n Modal,\n Popover,\n Select,\n Space,\n Tooltip,\n} from \'antd\';\n\nconst { Option } = Select;\n\nconst selectBefore = (\n <Select defaultValue="http://" className="select-before">\n <Option value="http://">http://</Option>\n <Option value="https://">https://</Option>\n </Select>\n);\nconst selectAfter = (\n <Select defaultValue=".com" className="select-after">\n <Option value=".com">.com</Option>\n <Option value=".jp">.jp</Option>\n <Option value=".cn">.cn</Option>\n <Option value=".org">.org</Option>\n </Select>\n);\n\nconst App: React.FC = () => {\n const [showModal, setShowModal] = useState(false);\n const [showDrawer, setShowDrawer] = useState(false);\n return (\n <Space direction="vertical">\n <Space.Compact block>\n <Button>default Button</Button>\n <Button danger>danger Button</Button>\n <Button type="dashed">dashed Button</Button>\n <Button type="text">text Button</Button>\n <Button type="link">Link Button</Button>\n <Tooltip title="Tooltip">\n <Button icon={<DownloadOutlined />} disabled />\n </Tooltip>\n </Space.Compact>\n <br />\n <Space.Compact>\n <Button>Prefix</Button>\n <Input addonBefore="http://" addonAfter=".com" defaultValue="mysite" />\n <Button type="primary">Submit</Button>\n </Space.Compact>\n <Space.Compact>\n <Input placeholder="prefix" />\n <Input addonBefore={selectBefore} addonAfter={selectAfter} defaultValue="mysite" />\n <Button icon={<CopyOutlined />} />\n </Space.Compact>\n <Space.Compact>\n <Input.Search />\n <Input.Search />\n <Button icon={<CopyOutlined />} />\n </Space.Compact>\n <Space.Compact>\n <Input addonAfter={<SettingOutlined />} defaultValue="mysite" />\n <Button type="primary">Submit</Button>\n <Input placeholder="suffix" addonAfter={<SettingOutlined />} />\n </Space.Compact>\n <Space.Compact>\n <Input addonBefore="http://" suffix=".com" defaultValue="mysite" />\n <Button type="primary">Submit</Button>\n </Space.Compact>\n <Space.Compact>\n <Button>Prefix</Button>\n <Input\n addonBefore={<Cascader placeholder="cascader" style={{ width: 150 }} />}\n defaultValue="mysite"\n />\n <Button type="primary">Submit</Button>\n </Space.Compact>\n <Space.Compact>\n <Input addonBefore="Prefix" defaultValue="mysite" showCount />\n <Button type="primary">Submit</Button>\n <Input\n addonBefore="Prefix"\n defaultValue="mysite"\n showCount\n addonAfter={<SettingOutlined />}\n />\n <Input addonBefore="Prefix" defaultValue="mysite" showCount />\n </Space.Compact>\n <br />\n <Space.Compact>\n <Button onClick={() => setShowModal(true)}>debug Modal context</Button>\n {showModal && (\n <Modal title="Basic Modal" open={showModal} onCancel={() => setShowModal(false)}>\n <Button>normal button A</Button>\n <Button>normal button B</Button>\n <br />\n <br />\n <Input />\n <br />\n <br />\n <Space.Compact>\n <Button>compact button A</Button>\n <Button>compact button B</Button>\n </Space.Compact>\n </Modal>\n )}\n </Space.Compact>\n <Space.Compact>\n <Dropdown.Button\n menu={{\n items: [\n {\n key: \'1\',\n label: <Button>menu button</Button>,\n },\n {\n key: \'2\',\n label: \'normal menu item\',\n },\n ],\n }}\n >\n debug Dropdown.Button context\n </Dropdown.Button>\n </Space.Compact>\n <Space.Compact>\n <Button onClick={() => setShowDrawer(true)}>debug Drawer context</Button>\n {showDrawer && (\n <Drawer\n title="Basic Drawer"\n placement="right"\n onClose={() => setShowDrawer(false)}\n open={showDrawer}\n >\n <Button>normal button A</Button>\n <Button>normal button B</Button>\n <br />\n <br />\n <Space.Compact>\n <Button>compact button A</Button>\n <Button>compact button B</Button>\n </Space.Compact>\n </Drawer>\n )}\n </Space.Compact>\n <Space.Compact>\n <Input placeholder="Debug Popover context" />\n <Popover\n content={\n <>\n <Input placeholder="Left Border" />\n <Divider />\n <DatePicker />\n <Divider />\n <InputNumber />\n <Divider />\n <Select />\n </>\n }\n trigger={[\'click\']}\n placement="bottom"\n >\n <Button>Settings</Button>\n </Popover>\n </Space.Compact>\n <Space.Compact>\n <InputNumber addonBefore="+" addonAfter="$" defaultValue={100} />\n </Space.Compact>\n <Space.Compact>\n <Select defaultValue="Sign Up">\n <Option value="Sign Up">Sign Up</Option>\n <Option value="Sign In">Sign In</Option>\n </Select>\n </Space.Compact>\n <Space.Compact>\n <DatePicker.RangePicker style={{ width: \'70%\' }} />\n </Space.Compact>\n <Space.Compact>\n <InputNumber defaultValue={12} />\n </Space.Compact>\n <Space.Compact>\n <Cascader\n style={{ width: \'70%\' }}\n options={[\n {\n value: \'zhejiang\',\n label: \'Zhejiang\',\n children: [\n {\n value: \'hangzhou\',\n label: \'Hangzhou\',\n children: [\n {\n value: \'xihu\',\n label: \'West Lake\',\n },\n ],\n },\n ],\n },\n {\n value: \'jiangsu\',\n label: \'Jiangsu\',\n children: [\n {\n value: \'nanjing\',\n label: \'Nanjing\',\n children: [\n {\n value: \'zhonghuamen\',\n label: \'Zhong Hua Men\',\n },\n ],\n },\n ],\n },\n ]}\n placeholder="Select Address"\n />\n </Space.Compact>\n <Space.Compact direction="vertical">\n <Button>vertical compact button A</Button>\n </Space.Compact>\n </Space>\n );\n};\n\nexport default App;\n';},dfe66250:function(n,e,t){},dfeda5a6:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e17c722c");var o="import React from 'react';\nimport { Button, notification, Space } from 'antd';\n\nconst App: React.FC = () => {\n const [api, contextHolder] = notification.useNotification();\n\n const openNotification = (pauseOnHover: boolean) => () => {\n api.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n showProgress: true,\n pauseOnHover,\n });\n };\n\n return (\n <>\n {contextHolder}\n <Space>\n <Button type=\"primary\" onClick={openNotification(true)}>\n Pause on hover\n </Button>\n <Button type=\"primary\" onClick={openNotification(false)}>\n Don't pause on hover\n </Button>\n </Space>\n </>\n );\n};\n\nexport default App;\n";},dff62091:function(n,e,t){},e05fec15:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6480dfc0");var o="import React from 'react';\nimport { Checkbox, Col, Row } from 'antd';\nimport type { GetProp } from 'antd';\n\nconst onChange: GetProp<typeof Checkbox.Group, 'onChange'> = (checkedValues) => {\n console.log('checked = ', checkedValues);\n};\n\nconst App: React.FC = () => (\n <Checkbox.Group style={{ width: '100%' }} onChange={onChange}>\n <Row>\n <Col span={8}>\n <Checkbox value=\"A\">A</Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value=\"B\">B</Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value=\"C\">C</Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value=\"D\">D</Checkbox>\n </Col>\n <Col span={8}>\n <Checkbox value=\"E\">E</Checkbox>\n </Col>\n </Row>\n </Checkbox.Group>\n);\n\nexport default App;\n";},e0b1d625:function(n,e,t){},e0c0b4d2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("88a2dd0d");var o="import React from 'react';\nimport { AutoComplete } from 'antd';\nimport type { AutoCompleteProps } from 'antd';\n\nconst App: React.FC = () => {\n const [options, setOptions] = React.useState<AutoCompleteProps['options']>([]);\n const handleSearch = (value: string) => {\n setOptions(() => {\n if (!value || value.includes('@')) {\n return [];\n }\n return ['gmail.com', '163.com', 'qq.com'].map((domain) => ({\n label: `${value}@${domain}`,\n value: `${value}@${domain}`,\n }));\n });\n };\n return (\n <AutoComplete\n style={{ width: 200 }}\n onSearch={handleSearch}\n placeholder=\"input here\"\n options={options}\n />\n );\n};\n\nexport default App;\n";},e0e1127a:function(n,e,t){},e0e2c825:function(n,e,t){},e15e14cb:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return c;}});var o=t("777fffbe"),a=o._(t("264d46f7")),r=o._(t("e5cf38de")),i=o._(t("1f09bcb9")),l=o._(t("75844fdf"));let s="${label}\u4E0D\u662F\u4E00\u4E2A\u6709\u6548\u7684${type}";var c={locale:"zh-cn",Pagination:a.default,DatePicker:i.default,TimePicker:l.default,Calendar:r.default,global:{placeholder:"\u8BF7\u9009\u62E9",close:"\u5173\u95ED"},Table:{filterTitle:"\u7B5B\u9009",filterConfirm:"\u786E\u5B9A",filterReset:"\u91CD\u7F6E",filterEmptyText:"\u65E0\u7B5B\u9009\u9879",filterCheckAll:"\u5168\u9009",filterSearchPlaceholder:"\u5728\u7B5B\u9009\u9879\u4E2D\u641C\u7D22",emptyText:"\u6682\u65E0\u6570\u636E",selectAll:"\u5168\u9009\u5F53\u9875",selectInvert:"\u53CD\u9009\u5F53\u9875",selectNone:"\u6E05\u7A7A\u6240\u6709",selectionAll:"\u5168\u9009\u6240\u6709",sortTitle:"\u6392\u5E8F",expand:"\u5C55\u5F00\u884C",collapse:"\u5173\u95ED\u884C",triggerDesc:"\u70B9\u51FB\u964D\u5E8F",triggerAsc:"\u70B9\u51FB\u5347\u5E8F",cancelSort:"\u53D6\u6D88\u6392\u5E8F"},Modal:{okText:"\u786E\u5B9A",cancelText:"\u53D6\u6D88",justOkText:"\u77E5\u9053\u4E86"},Tour:{Next:"\u4E0B\u4E00\u6B65",Previous:"\u4E0A\u4E00\u6B65",Finish:"\u7ED3\u675F\u5BFC\u89C8"},Popconfirm:{cancelText:"\u53D6\u6D88",okText:"\u786E\u5B9A"},Transfer:{titles:["",""],searchPlaceholder:"\u8BF7\u8F93\u5165\u641C\u7D22\u5185\u5BB9",itemUnit:"\u9879",itemsUnit:"\u9879",remove:"\u5220\u9664",selectCurrent:"\u5168\u9009\u5F53\u9875",removeCurrent:"\u5220\u9664\u5F53\u9875",selectAll:"\u5168\u9009\u6240\u6709",deselectAll:"\u53D6\u6D88\u5168\u9009",removeAll:"\u5220\u9664\u5168\u90E8",selectInvert:"\u53CD\u9009\u5F53\u9875"},Upload:{uploading:"\u6587\u4EF6\u4E0A\u4F20\u4E2D",removeFile:"\u5220\u9664\u6587\u4EF6",uploadError:"\u4E0A\u4F20\u9519\u8BEF",previewFile:"\u9884\u89C8\u6587\u4EF6",downloadFile:"\u4E0B\u8F7D\u6587\u4EF6"},Empty:{description:"\u6682\u65E0\u6570\u636E"},Icon:{icon:"\u56FE\u6807"},Text:{edit:"\u7F16\u8F91",copy:"\u590D\u5236",copied:"\u590D\u5236\u6210\u529F",expand:"\u5C55\u5F00",collapse:"\u6536\u8D77"},Form:{optional:"\uFF08\u53EF\u9009\uFF09",defaultValidateMessages:{default:"\u5B57\u6BB5\u9A8C\u8BC1\u9519\u8BEF${label}",required:"\u8BF7\u8F93\u5165${label}",enum:"${label}\u5FC5\u987B\u662F\u5176\u4E2D\u4E00\u4E2A[${enum}]",whitespace:"${label}\u4E0D\u80FD\u4E3A\u7A7A\u5B57\u7B26",date:{format:"${label}\u65E5\u671F\u683C\u5F0F\u65E0\u6548",parse:"${label}\u4E0D\u80FD\u8F6C\u6362\u4E3A\u65E5\u671F",invalid:"${label}\u662F\u4E00\u4E2A\u65E0\u6548\u65E5\u671F"},types:{string:s,method:s,array:s,object:s,number:s,date:s,boolean:s,integer:s,float:s,regexp:s,email:s,url:s,hex:s},string:{len:"${label}\u987B\u4E3A${len}\u4E2A\u5B57\u7B26",min:"${label}\u6700\u5C11${min}\u4E2A\u5B57\u7B26",max:"${label}\u6700\u591A${max}\u4E2A\u5B57\u7B26",range:"${label}\u987B\u5728${min}-${max}\u5B57\u7B26\u4E4B\u95F4"},number:{len:"${label}\u5FC5\u987B\u7B49\u4E8E${len}",min:"${label}\u6700\u5C0F\u503C\u4E3A${min}",max:"${label}\u6700\u5927\u503C\u4E3A${max}",range:"${label}\u987B\u5728${min}-${max}\u4E4B\u95F4"},array:{len:"\u987B\u4E3A${len}\u4E2A${label}",min:"\u6700\u5C11${min}\u4E2A${label}",max:"\u6700\u591A${max}\u4E2A${label}",range:"${label}\u6570\u91CF\u987B\u5728${min}-${max}\u4E4B\u95F4"},pattern:{mismatch:"${label}\u4E0E\u6A21\u5F0F\u4E0D\u5339\u914D${pattern}"}}},Image:{preview:"\u9884\u89C8"},QRCode:{expired:"\u4E8C\u7EF4\u7801\u8FC7\u671F",refresh:"\u70B9\u51FB\u5237\u65B0",scanned:"\u5DF2\u626B\u63CF"},ColorPicker:{presetEmpty:"\u6682\u65E0",transparent:"\u65E0\u8272",singleColor:"\u5355\u8272",gradientColor:"\u6E10\u53D8\u8272"}};},e174f9c2:function(n,e,t){},e17c722c:function(n,e,t){},e1a70461:function(n,e,t){},e1abac99:function(n,e,t){},e1f70775:function(n,e,t){},e2055858:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f56e0a70");var o="import React from 'react';\nimport { Steps } from 'antd';\n\nconst description = 'This is a description';\nconst App: React.FC = () => (\n <Steps\n current={1}\n status=\"error\"\n items={[\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Process',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ]}\n />\n);\n\nexport default App;\n";},e20e11df:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0a205ee5");var o="import React from 'react';\nimport { QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';\nimport { FloatButton } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <FloatButton.Group shape=\"circle\" style={{ insetInlineEnd: 24 }}>\n <FloatButton icon={<QuestionCircleOutlined />} />\n <FloatButton />\n <FloatButton.BackTop visibilityHeight={0} />\n </FloatButton.Group>\n <FloatButton.Group shape=\"square\" style={{ insetInlineEnd: 94 }}>\n <FloatButton icon={<QuestionCircleOutlined />} />\n <FloatButton />\n <FloatButton icon={<SyncOutlined />} />\n <FloatButton.BackTop visibilityHeight={0} />\n </FloatButton.Group>\n </>\n);\n\nexport default App;\n";},e21de074:function(n,e,t){},e224ebfa:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("daeddc2e");var o='import React, { useState } from \'react\';\nimport { SearchOutlined } from \'@ant-design/icons\';\nimport { Button, Divider, Flex, Radio, Space, Tooltip } from \'antd\';\n\nconst App: React.FC = () => {\n const [position, setPosition] = useState<\'start\' | \'end\'>(\'end\');\n\n return (\n <>\n <Space>\n <Radio.Group value={position} onChange={(e) => setPosition(e.target.value)}>\n <Radio.Button value="start">start</Radio.Button>\n <Radio.Button value="end">end</Radio.Button>\n </Radio.Group>\n </Space>\n <Divider orientation="left" plain>\n Preview\n </Divider>\n <Flex gap="small" vertical>\n <Flex wrap gap="small">\n <Tooltip title="search">\n <Button type="primary" shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button type="primary" shape="circle">\n A\n </Button>\n <Button type="primary" icon={<SearchOutlined />} iconPosition={position}>\n Search\n </Button>\n <Tooltip title="search">\n <Button shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button icon={<SearchOutlined />} iconPosition={position}>\n Search\n </Button>\n </Flex>\n <Flex wrap gap="small">\n <Tooltip title="search">\n <Button shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button icon={<SearchOutlined />} type="text" iconPosition={position}>\n Search\n </Button>\n <Tooltip title="search">\n <Button type="dashed" shape="circle" icon={<SearchOutlined />} />\n </Tooltip>\n <Button type="dashed" icon={<SearchOutlined />} iconPosition={position}>\n Search\n </Button>\n <Button\n icon={<SearchOutlined />}\n href="https://www.google.com"\n target="_blank"\n iconPosition={position}\n />\n <Button type="primary" loading iconPosition={position}>\n Loading\n </Button>\n </Flex>\n </Flex>\n </>\n );\n};\n\nexport default App;\n';},e246be8b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b64fae25");var o='import React from \'react\';\nimport { Avatar, Badge, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <Space size="large">\n <Badge count={5} title="Custom hover text">\n <Avatar shape="square" size="large" />\n </Badge>\n <Badge count={-5} title="Negative">\n <Avatar shape="square" size="large" />\n </Badge>\n </Space>\n);\n\nexport default App;\n';},e265420e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3fbcf87e");var o='import React from \'react\';\nimport { Flex, Progress } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex align="center" gap="small">\n <Progress\n type="circle"\n trailColor="#e6f4ff"\n percent={60}\n strokeWidth={20}\n size={14}\n format={(number) => `\u8FDB\u884C\u4E2D\uFF0C\u5DF2\u5B8C\u6210${number}%`}\n />\n <span>\u4EE3\u7801\u53D1\u5E03</span>\n </Flex>\n);\n\nexport default App;\n';},e278545d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bc89042d");var o='import React from \'react\';\nimport { AudioOutlined } from \'@ant-design/icons\';\nimport { Input, Space } from \'antd\';\nimport type { GetProps } from \'antd\';\n\ntype SearchProps = GetProps<typeof Input.Search>;\n\nconst { Search } = Input;\n\nconst suffix = (\n <AudioOutlined\n style={{\n fontSize: 16,\n color: \'#1677ff\',\n }}\n />\n);\n\nconst onSearch: SearchProps[\'onSearch\'] = (value, _e, info) => console.log(info?.source, value);\n\nconst App: React.FC = () => (\n <Space direction="vertical">\n <Search placeholder="input search text" onSearch={onSearch} style={{ width: 200 }} />\n <Search placeholder="input search text" allowClear onSearch={onSearch} style={{ width: 200 }} />\n <Search\n addonBefore="https://"\n placeholder="input search text"\n allowClear\n onSearch={onSearch}\n style={{ width: 304 }}\n />\n <Search placeholder="input search text" onSearch={onSearch} enterButton />\n <Search\n placeholder="input search text"\n allowClear\n enterButton="Search"\n size="large"\n onSearch={onSearch}\n />\n <Search\n placeholder="input search text"\n enterButton="Search"\n size="large"\n suffix={suffix}\n onSearch={onSearch}\n />\n </Space>\n);\n\nexport default App;\n';},e2ab4cfa:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("984f7db5");var o='import React from \'react\';\nimport { Input } from \'antd\';\n\nconst { Search } = Input;\n\nconst App: React.FC = () => (\n <>\n <Search placeholder="input search loading default" loading />\n <br />\n <br />\n <Search placeholder="input search loading with enterButton" loading enterButton />\n <br />\n <br />\n <Search placeholder="input search text" enterButton="Search" size="large" loading />\n </>\n);\n\nexport default App;\n';},e302a606:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b849b681");var o="import React from 'react';\nimport { CustomerServiceOutlined, QuestionCircleOutlined, SyncOutlined } from '@ant-design/icons';\nimport { FloatButton } from 'antd';\n\n/** Test usage. Do not use in your production. */\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalFloatButton } = FloatButton;\n\nconst App: React.FC = () => (\n <div style={{ display: 'flex', columnGap: 16, alignItems: 'center' }}>\n <InternalFloatButton backTop />\n <InternalFloatButton icon={<CustomerServiceOutlined />} />\n <InternalFloatButton\n icon={<QuestionCircleOutlined />}\n description=\"HELP\"\n shape=\"square\"\n type=\"primary\"\n />\n <InternalFloatButton\n shape=\"square\"\n items={[\n { icon: <QuestionCircleOutlined /> },\n { icon: <CustomerServiceOutlined /> },\n { icon: <SyncOutlined /> },\n ]}\n />\n <InternalFloatButton\n open\n icon={<CustomerServiceOutlined />}\n trigger=\"click\"\n items={[\n { icon: <QuestionCircleOutlined /> },\n { icon: <CustomerServiceOutlined /> },\n { icon: <SyncOutlined /> },\n ]}\n />\n </div>\n);\n\nexport default App;\n";},e339bdf1:function(n,e,t){},e3422a96:function(n,e,t){},e359a5b5:function(n,e,t){},e35d0e3f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("082dc265");var o="import React, { useState } from 'react';\nimport type { CascaderProps } from 'antd';\nimport {\n AutoComplete,\n Button,\n Cascader,\n Checkbox,\n Col,\n Form,\n Input,\n InputNumber,\n Row,\n Select,\n} from 'antd';\n\nconst { Option } = Select;\n\ninterface DataNodeType {\n value: string;\n label: string;\n children?: DataNodeType[];\n}\n\nconst residences: CascaderProps<DataNodeType>['options'] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst formItemLayout = {\n labelCol: {\n xs: { span: 24 },\n sm: { span: 8 },\n },\n wrapperCol: {\n xs: { span: 24 },\n sm: { span: 16 },\n },\n};\n\nconst tailFormItemLayout = {\n wrapperCol: {\n xs: {\n span: 24,\n offset: 0,\n },\n sm: {\n span: 16,\n offset: 8,\n },\n },\n};\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n\n const onFinish = (values: any) => {\n console.log('Received values of form: ', values);\n };\n\n const prefixSelector = (\n <Form.Item name=\"prefix\" noStyle>\n <Select style={{ width: 70 }}>\n <Option value=\"86\">+86</Option>\n <Option value=\"87\">+87</Option>\n </Select>\n </Form.Item>\n );\n\n const suffixSelector = (\n <Form.Item name=\"suffix\" noStyle>\n <Select style={{ width: 70 }}>\n <Option value=\"USD\">$</Option>\n <Option value=\"CNY\">\xa5</Option>\n </Select>\n </Form.Item>\n );\n\n const [autoCompleteResult, setAutoCompleteResult] = useState<string[]>([]);\n\n const onWebsiteChange = (value: string) => {\n if (!value) {\n setAutoCompleteResult([]);\n } else {\n setAutoCompleteResult(['.com', '.org', '.net'].map((domain) => `${value}${domain}`));\n }\n };\n\n const websiteOptions = autoCompleteResult.map((website) => ({\n label: website,\n value: website,\n }));\n\n return (\n <Form\n {...formItemLayout}\n form={form}\n name=\"register\"\n onFinish={onFinish}\n initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}\n style={{ maxWidth: 600 }}\n scrollToFirstError\n >\n <Form.Item\n name=\"email\"\n label=\"E-mail\"\n rules={[\n {\n type: 'email',\n message: 'The input is not valid E-mail!',\n },\n {\n required: true,\n message: 'Please input your E-mail!',\n },\n ]}\n >\n <Input />\n </Form.Item>\n\n <Form.Item\n name=\"password\"\n label=\"Password\"\n rules={[\n {\n required: true,\n message: 'Please input your password!',\n },\n ]}\n hasFeedback\n >\n <Input.Password />\n </Form.Item>\n\n <Form.Item\n name=\"confirm\"\n label=\"Confirm Password\"\n dependencies={['password']}\n hasFeedback\n rules={[\n {\n required: true,\n message: 'Please confirm your password!',\n },\n ({ getFieldValue }) => ({\n validator(_, value) {\n if (!value || getFieldValue('password') === value) {\n return Promise.resolve();\n }\n return Promise.reject(new Error('The new password that you entered do not match!'));\n },\n }),\n ]}\n >\n <Input.Password />\n </Form.Item>\n\n <Form.Item\n name=\"nickname\"\n label=\"Nickname\"\n tooltip=\"What do you want others to call you?\"\n rules={[{ required: true, message: 'Please input your nickname!', whitespace: true }]}\n >\n <Input />\n </Form.Item>\n\n <Form.Item\n name=\"residence\"\n label=\"Habitual Residence\"\n rules={[\n { type: 'array', required: true, message: 'Please select your habitual residence!' },\n ]}\n >\n <Cascader options={residences} />\n </Form.Item>\n\n <Form.Item\n name=\"phone\"\n label=\"Phone Number\"\n rules={[{ required: true, message: 'Please input your phone number!' }]}\n >\n <Input addonBefore={prefixSelector} style={{ width: '100%' }} />\n </Form.Item>\n\n <Form.Item\n name=\"donation\"\n label=\"Donation\"\n rules={[{ required: true, message: 'Please input donation amount!' }]}\n >\n <InputNumber addonAfter={suffixSelector} style={{ width: '100%' }} />\n </Form.Item>\n\n <Form.Item\n name=\"website\"\n label=\"Website\"\n rules={[{ required: true, message: 'Please input website!' }]}\n >\n <AutoComplete options={websiteOptions} onChange={onWebsiteChange} placeholder=\"website\">\n <Input />\n </AutoComplete>\n </Form.Item>\n\n <Form.Item\n name=\"intro\"\n label=\"Intro\"\n rules={[{ required: true, message: 'Please input Intro' }]}\n >\n <Input.TextArea showCount maxLength={100} />\n </Form.Item>\n\n <Form.Item\n name=\"gender\"\n label=\"Gender\"\n rules={[{ required: true, message: 'Please select gender!' }]}\n >\n <Select placeholder=\"select your gender\">\n <Option value=\"male\">Male</Option>\n <Option value=\"female\">Female</Option>\n <Option value=\"other\">Other</Option>\n </Select>\n </Form.Item>\n\n <Form.Item label=\"Captcha\" extra=\"We must make sure that your are a human.\">\n <Row gutter={8}>\n <Col span={12}>\n <Form.Item\n name=\"captcha\"\n noStyle\n rules={[{ required: true, message: 'Please input the captcha you got!' }]}\n >\n <Input />\n </Form.Item>\n </Col>\n <Col span={12}>\n <Button>Get captcha</Button>\n </Col>\n </Row>\n </Form.Item>\n\n <Form.Item\n name=\"agreement\"\n valuePropName=\"checked\"\n rules={[\n {\n validator: (_, value) =>\n value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),\n },\n ]}\n {...tailFormItemLayout}\n >\n <Checkbox>\n I have read the <a href=\"\">agreement</a>\n </Checkbox>\n </Form.Item>\n <Form.Item {...tailFormItemLayout}>\n <Button type=\"primary\" htmlType=\"submit\">\n Register\n </Button>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n";},e3663228:function(n,e,t){},e3a2c367:function(n,e,t){},e3c09e2b:function(n,e,t){},e3c1c32a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cf3050d7");var o="import React, { useState } from 'react';\nimport { Button, Modal } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState(false);\n const [confirmLoading, setConfirmLoading] = useState(false);\n const [modalText, setModalText] = useState('Content of the modal');\n\n const showModal = () => {\n setOpen(true);\n };\n\n const handleOk = () => {\n setModalText('The modal will be closed after two seconds');\n setConfirmLoading(true);\n setTimeout(() => {\n setOpen(false);\n setConfirmLoading(false);\n }, 2000);\n };\n\n const handleCancel = () => {\n console.log('Clicked cancel button');\n setOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showModal}>\n Open Modal with async logic\n </Button>\n <Modal\n title=\"Title\"\n open={open}\n onOk={handleOk}\n confirmLoading={confirmLoading}\n onCancel={handleCancel}\n >\n <p>{modalText}</p>\n </Modal>\n </>\n );\n};\n\nexport default App;\n";},e4022d1e:function(n,e,t){},e463a93d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("622b79c5");var o='import React from \'react\';\nimport { MinusCircleOutlined, PlusOutlined } from \'@ant-design/icons\';\nimport { Button, Form, Input, Space } from \'antd\';\n\nconst onFinish = (values: any) => {\n console.log(\'Received values of form:\', values);\n};\n\nconst App: React.FC = () => (\n <Form\n name="dynamic_form_no_style"\n onFinish={onFinish}\n style={{ maxWidth: 600 }}\n autoComplete="off"\n >\n <Form.Item label="Users">\n <Form.List name="users">\n {(fields, { add, remove }) => (\n <>\n {fields.map((field) => (\n <Space key={field.key} style={{ marginBottom: 16 }}>\n <Form.Item noStyle name={[field.name, \'lastName\']} rules={[{ required: true }]}>\n <Input placeholder="Last Name" />\n </Form.Item>\n <Form.Item noStyle name={[field.name, \'firstName\']} rules={[{ required: true }]}>\n <Input placeholder="First Name" />\n </Form.Item>\n <MinusCircleOutlined\n onClick={() => {\n remove(field.name);\n }}\n />\n </Space>\n ))}\n <Form.Item>\n <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>\n Add field\n </Button>\n </Form.Item>\n </>\n )}\n </Form.List>\n </Form.Item>\n <Form.Item>\n <Button type="primary" htmlType="submit">\n Submit\n </Button>\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},e46d1346:function(n,e,t){},e49b5594:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9b2d33b4");var o="import React from 'react';\nimport { Breadcrumb } from 'antd';\n\nexport default () => (\n <Breadcrumb\n routes={[\n {\n path: '/home',\n breadcrumbName: 'Home',\n },\n {\n path: '/user',\n breadcrumbName: 'User',\n children: [\n {\n path: '/user1',\n breadcrumbName: 'User1',\n },\n {\n path: '/user2',\n breadcrumbName: 'User2',\n },\n ],\n },\n ]}\n />\n);\n";},e50524ba:function(n,e,t){},e50d8b51:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e92e192a");var o="import React, { useState } from 'react';\nimport type { StepsProps } from 'antd';\nimport { Button, Space, Steps } from 'antd';\n\nconst App: React.FC = () => {\n const [percent, setPercentage] = useState<number | undefined>(0);\n const [current, setCurrent] = useState(1);\n const [status, setStatus] = useState<StepsProps['status']>('process');\n const description = 'This is a description.';\n const items = [\n {\n title: 'Finished',\n description,\n },\n {\n title: 'In Progress',\n subTitle: 'Left 00:00:08',\n description,\n },\n {\n title: 'Waiting',\n description,\n },\n ];\n return (\n <>\n <Space.Compact block>\n <Button onClick={() => setPercentage(undefined)}>Percentage to undefined</Button>\n <Button onClick={() => setPercentage((prev) => ((prev ?? 0) + 10) % 100)}>\n Percentage +\n </Button>\n <Button onClick={() => setCurrent((prev) => (prev + 1) % 3)}>Current +</Button>\n <Button onClick={() => setStatus('wait')}>Status Wait</Button>\n <Button onClick={() => setStatus('process')}>Status Process</Button>\n <Button onClick={() => setStatus('finish')}>Status Finish</Button>\n <Button onClick={() => setStatus('error')}>Status Error</Button>\n </Space.Compact>\n <br />\n <Steps current={current} percent={percent} status={status} items={items} />\n <Steps current={current} percent={percent} status={status} size=\"small\" items={items} />\n <Steps\n current={current}\n percent={percent}\n status={status}\n direction=\"vertical\"\n items={items}\n />\n <Steps\n current={current}\n percent={percent}\n status={status}\n size=\"small\"\n direction=\"vertical\"\n items={items}\n />\n </>\n );\n};\n\nexport default App;\n";},e578ecec:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("61098f1a");var o='/* eslint-disable react-dom/no-dangerously-set-innerhtml */\nimport React from \'react\';\nimport { Flex } from \'antd\';\n\nconst styleTxt = `\n @scope (.blog-css-tricks-a) to (span) {\n color: red;\n }\n\n .blog-css-tricks-b {\n color: blue;\n }\n`;\n\nexport default () => (\n <Flex vertical gap="middle">\n <style>{styleTxt}</style>\n <div className="blog-css-tricks-a">\n <span>Should be red</span>\n </div>\n <div className="blog-css-tricks-a">\n <span>\n <div className="blog-css-tricks-b">\n <span>Should be blue</span>\n </div>\n </span>\n </div>\n </Flex>\n);\n';},e5cf38de:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}});var o=t("777fffbe")._(t("1f09bcb9")).default;},e60bc177:function(n,e,t){},e62ffd1d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6388458e");var o="import React, { useState } from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\nimport type { ResizeCallbackData } from 'react-resizable';\nimport { Resizable } from 'react-resizable';\n\ninterface DataType {\n key: React.Key;\n date: string;\n amount: number;\n type: string;\n note: string;\n}\n\ninterface TitlePropsType {\n width: number;\n onResize: (e: React.SyntheticEvent<Element>, data: ResizeCallbackData) => void;\n}\n\nconst ResizableTitle: React.FC<Readonly<React.HTMLAttributes<any> & TitlePropsType>> = (props) => {\n const { onResize, width, ...restProps } = props;\n\n if (!width) {\n return <th {...restProps} />;\n }\n\n return (\n <Resizable\n width={width}\n height={0}\n handle={<span className=\"react-resizable-handle\" onClick={(e) => e.stopPropagation()} />}\n onResize={onResize}\n draggableOpts={{ enableUserSelectHack: false }}\n >\n <th {...restProps} />\n </Resizable>\n );\n};\n\nconst data: DataType[] = [\n {\n key: 0,\n date: '2018-02-11',\n amount: 120,\n type: 'income',\n note: 'transfer',\n },\n {\n key: 1,\n date: '2018-03-11',\n amount: 243,\n type: 'income',\n note: 'transfer',\n },\n {\n key: 2,\n date: '2018-04-11',\n amount: 98,\n type: 'income',\n note: 'transfer',\n },\n];\n\nconst App: React.FC = () => {\n const [columns, setColumns] = useState<TableColumnsType<DataType>>([\n {\n title: 'Date',\n dataIndex: 'date',\n width: 200,\n },\n {\n title: 'Amount',\n dataIndex: 'amount',\n width: 100,\n sorter: (a, b) => a.amount - b.amount,\n },\n {\n title: 'Type',\n dataIndex: 'type',\n width: 100,\n },\n {\n title: 'Note',\n dataIndex: 'note',\n width: 100,\n },\n {\n title: 'Action',\n key: 'action',\n render: () => <a>Delete</a>,\n },\n ]);\n\n const handleResize =\n (index: number) =>\n (_: React.SyntheticEvent<Element>, { size }: ResizeCallbackData) => {\n const newColumns = [...columns];\n newColumns[index] = {\n ...newColumns[index],\n width: size.width,\n };\n setColumns(newColumns);\n };\n\n const mergedColumns = columns.map<TableColumnsType<DataType>[number]>((col, index) => ({\n ...col,\n onHeaderCell: (column: TableColumnsType<DataType>[number]) => ({\n width: column.width,\n onResize: handleResize(index) as React.ReactEventHandler<any>,\n }),\n }));\n\n return (\n <Table<DataType>\n bordered\n components={{ header: { cell: ResizableTitle } }}\n columns={mergedColumns}\n dataSource={data}\n />\n );\n};\n\nexport default App;\n";},e6501296:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b0860cc0");var o="import React from 'react';\nimport { Col, Row } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Row>\n <Col span={24}>col</Col>\n </Row>\n <Row>\n <Col span={12}>col-12</Col>\n <Col span={12}>col-12</Col>\n </Row>\n <Row>\n <Col span={8}>col-8</Col>\n <Col span={8}>col-8</Col>\n <Col span={8}>col-8</Col>\n </Row>\n <Row>\n <Col span={6}>col-6</Col>\n <Col span={6}>col-6</Col>\n <Col span={6}>col-6</Col>\n <Col span={6}>col-6</Col>\n </Row>\n </>\n);\n\nexport default App;\n";},e66d6ffb:function(n,e,t){},e6864570:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6b636e9e");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.antgroup.com\">\n 1st menu item\n </a>\n ),\n key: '0',\n },\n {\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.aliyun.com\">\n 2nd menu item\n </a>\n ),\n key: '1',\n },\n {\n type: 'divider',\n },\n {\n label: '3rd menu item\uFF08disabled\uFF09',\n key: '3',\n disabled: true,\n },\n];\n\nconst App: React.FC = () => (\n <Dropdown menu={{ items }}>\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Hover me\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n);\n\nexport default App;\n";},e6a98dee:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("48eac933");var o='import React from \'react\';\nimport { Flex, Tag } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex gap="4px 0" wrap>\n <Tag color="magenta-inverse">magenta</Tag>\n <Tag color="red-inverse">red</Tag>\n <Tag color="volcano-inverse">volcano</Tag>\n <Tag color="orange-inverse">orange</Tag>\n <Tag color="gold-inverse">gold</Tag>\n <Tag color="lime-inverse">lime</Tag>\n <Tag color="green-inverse">green</Tag>\n <Tag color="cyan-inverse">cyan</Tag>\n <Tag color="blue-inverse">blue</Tag>\n <Tag color="geekblue-inverse">geekblue</Tag>\n <Tag color="purple-inverse">purple</Tag>\n </Flex>\n);\n\nexport default App;\n';},e6d8019a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("3ab26a77");var o="import React from 'react';\nimport type { StatisticProps } from 'antd';\nimport { Col, Row, Statistic } from 'antd';\nimport CountUp from 'react-countup';\n\nconst formatter: StatisticProps['formatter'] = (value) => (\n <CountUp end={value as number} separator=\",\" />\n);\n\nconst App: React.FC = () => (\n <Row gutter={16}>\n <Col span={12}>\n <Statistic title=\"Active Users\" value={112893} formatter={formatter} />\n </Col>\n <Col span={12}>\n <Statistic title=\"Account Balance (CNY)\" value={112893} precision={2} formatter={formatter} />\n </Col>\n </Row>\n);\n\nexport default App;\n";},e6da8cbc:function(n,e,t){},e71122e7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("68785c49");var o="import React from 'react';\nimport { Card, List } from 'antd';\n\nconst data = [\n {\n title: 'Title 1',\n },\n {\n title: 'Title 2',\n },\n {\n title: 'Title 3',\n },\n {\n title: 'Title 4',\n },\n {\n title: 'Title 5',\n },\n {\n title: 'Title 6',\n },\n];\n\nconst App: React.FC = () => (\n <List\n grid={{\n gutter: 16,\n xs: 1,\n sm: 2,\n md: 4,\n lg: 4,\n xl: 6,\n xxl: 3,\n }}\n dataSource={data}\n renderItem={(item) => (\n <List.Item>\n <Card title={item.title}>Card content</Card>\n </List.Item>\n )}\n />\n);\n\nexport default App;\n";},e71dd64b:function(n,e,t){},e7397233:function(n,e,t){},e7640705:function(n,e,t){},e77f1b4a:function(n,e,t){},e78e0358:function(n,e,t){},e78f2701:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1b67b506");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n key: 'name',\n render: (text) => <a>{text}</a>,\n width: 150,\n },\n {\n title: 'Age',\n dataIndex: 'age',\n key: 'age',\n width: 80,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n key: 'address 1',\n ellipsis: true,\n },\n {\n title: 'Long Column Long Column Long Column',\n dataIndex: 'address',\n key: 'address 2',\n ellipsis: true,\n },\n {\n title: 'Long Column Long Column',\n dataIndex: 'address',\n key: 'address 3',\n ellipsis: true,\n },\n {\n title: 'Long Column',\n dataIndex: 'address',\n key: 'address 4',\n ellipsis: true,\n },\n];\n\nconst data = [\n {\n key: '1',\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',\n tags: ['nice', 'developer'],\n },\n {\n key: '2',\n name: 'Jim Green',\n age: 42,\n address: 'London No. 2 Lake Park, London No. 2 Lake Park',\n tags: ['loser'],\n },\n {\n key: '3',\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park, Sydney No. 1 Lake Park',\n tags: ['cool', 'teacher'],\n },\n];\n\nconst App: React.FC = () => <Table<DataType> columns={columns} dataSource={data} />;\n\nexport default App;\n";},e7a9fd37:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f619d2c3");var o="import React from 'react';\nimport { PoweroffOutlined } from '@ant-design/icons';\nimport { Button, Flex } from 'antd';\n\nconst Text1 = () => <>\u90E8\u7F72</>;\nconst Text2 = () => <span>\u90E8\u7F72</span>;\nconst Text3 = () => <>Submit</>;\n\nconst App: React.FC = () => (\n <Flex wrap gap=\"small\">\n <Button>\n <span>\n <span>\u90E8\u7F72</span>\n </span>\n </Button>\n <Button loading>\u90E8\u7F72</Button>\n <Button loading>\n <Text1 />\n </Button>\n <Button loading>\n <Text2 />\n </Button>\n <Button loading>\n <Text3 />\n </Button>\n <Button loading icon={<PoweroffOutlined />}>\n <Text1 />\n </Button>\n <Button loading>\u6309\u94AE</Button>\n </Flex>\n);\n\nexport default App;\n";},e7df8c15:function(n,e,t){},e7ffe439:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5f78353f");var o="import React from 'react';\nimport { Flex, Splitter, Typography } from 'antd';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify=\"center\" align=\"center\" style={{ height: '100%' }}>\n <Typography.Title type=\"secondary\" level={5} style={{ whiteSpace: 'nowrap' }}>\n Panel {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => (\n <Flex vertical gap=\"middle\">\n <Typography.Title level={3}>[true, 0, false]</Typography.Title>\n <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>\n <Splitter.Panel>\n <Desc text={1} />\n </Splitter.Panel>\n <Splitter.Panel defaultSize={0}>\n <Desc text={2} />\n </Splitter.Panel>\n <Splitter.Panel resizable={false}>\n <Desc text={3} />\n </Splitter.Panel>\n </Splitter>\n <Typography.Title level={3}>[false, 0, true]</Typography.Title>\n <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>\n <Splitter.Panel resizable={false}>\n <Desc text={1} />\n </Splitter.Panel>\n <Splitter.Panel defaultSize={0}>\n <Desc text={2} />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text={3} />\n </Splitter.Panel>\n </Splitter>\n <Typography.Title level={3}>Start have min & max</Typography.Title>\n <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>\n <Splitter.Panel min={50} max={100}>\n <Desc text={1} />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text={2} />\n </Splitter.Panel>\n </Splitter>\n <Typography.Title level={3}>End have min & max</Typography.Title>\n <Splitter style={{ height: 200, boxShadow: '0 0 10px rgba(0, 0, 0, 0.1)' }}>\n <Splitter.Panel>\n <Desc text={1} />\n </Splitter.Panel>\n <Splitter.Panel min=\"20%\" max=\"70%\">\n <Desc text={2} />\n </Splitter.Panel>\n </Splitter>\n </Flex>\n);\n\nexport default App;\n";},e8363941:function(n,e,t){},e8708933:function(n,e,t){},e87e46d3:function(n,e,t){},e8ba8158:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6d336c40");var o="import React from 'react';\nimport type { CollapseProps } from 'antd';\nimport { Collapse } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n header: '\u5934\u90E8\u5143\u7D20',\n body: '\u5185\u5BB9\u5143\u7D20',\n },\n en: {\n header: 'Header element',\n body: 'Body element',\n },\n};\n\nconst BlockCollapse: React.FC = (props) => {\n const items: CollapseProps['items'] = [\n {\n key: '1',\n label: 'This is panel header',\n children: <p>This is panel body</p>,\n ...props,\n },\n ];\n\n return (\n <div style={{ position: 'absolute', inset: 0 }}>\n <Collapse {...props} items={items} defaultActiveKey={['1']} />\n </div>\n );\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Collapse\"\n semantics={[\n { name: 'header', desc: locale.header, version: '5.21.0' },\n { name: 'body', desc: locale.body, version: '5.21.0' },\n ]}\n >\n <BlockCollapse />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},e8f78f52:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0298622e");var o="import React, { useMemo, useState } from 'react';\nimport { CheckOutlined, HighlightOutlined } from '@ant-design/icons';\nimport { Radio, Typography } from 'antd';\n\nconst { Paragraph } = Typography;\n\nconst App: React.FC = () => {\n const [editableStr, setEditableStr] = useState('This is an editable text.');\n const [editableStrWithSuffix, setEditableStrWithSuffix] = useState(\n 'This is a loooooooooooooooooooooooooooooooong editable text with suffix.',\n );\n const [editableStrWithSuffixStartPart, editableStrWithSuffixSuffixPart] = useMemo(\n () => [editableStrWithSuffix.slice(0, -12), editableStrWithSuffix.slice(-12)],\n [editableStrWithSuffix],\n );\n const [customIconStr, setCustomIconStr] = useState('Custom Edit icon and replace tooltip text.');\n const [clickTriggerStr, setClickTriggerStr] = useState(\n 'Text or icon as trigger - click to start editing.',\n );\n const [chooseTrigger, setChooseTrigger] = useState<('icon' | 'text')[]>(['icon']);\n const [customEnterIconStr, setCustomEnterIconStr] = useState(\n 'Editable text with a custom enter icon in edit field.',\n );\n const [noEnterIconStr, setNoEnterIconStr] = useState(\n 'Editable text with no enter icon in edit field.',\n );\n const [hideTooltipStr, setHideTooltipStr] = useState('Hide Edit tooltip.');\n const [lengthLimitedStr, setLengthLimitedStr] = useState(\n 'This is an editable text with limited length.',\n );\n\n const radioToState = (input: string): ('icon' | 'text')[] => {\n switch (input) {\n case 'text':\n return ['text'];\n case 'both':\n return ['icon', 'text'];\n case 'icon':\n return ['icon'];\n default:\n return ['icon'];\n }\n };\n\n const stateToRadio = useMemo<string>(() => {\n if (chooseTrigger.includes('text')) {\n return chooseTrigger.includes('icon') ? 'both' : 'text';\n }\n return 'icon';\n }, [chooseTrigger]);\n\n return (\n <>\n <Paragraph editable={{ onChange: setEditableStr }}>{editableStr}</Paragraph>\n <Paragraph\n editable={{\n onChange: setEditableStrWithSuffix,\n text: editableStrWithSuffix,\n }}\n ellipsis={{\n suffix: editableStrWithSuffixSuffixPart,\n }}\n >\n {editableStrWithSuffixStartPart}\n </Paragraph>\n <Paragraph\n editable={{\n icon: <HighlightOutlined />,\n tooltip: 'click to edit text',\n onChange: setCustomIconStr,\n }}\n >\n {customIconStr}\n </Paragraph>\n Trigger edit with:{' '}\n <Radio.Group\n onChange={(e) => setChooseTrigger(radioToState(e.target.value))}\n value={stateToRadio}\n >\n <Radio value=\"icon\">icon</Radio>\n <Radio value=\"text\">text</Radio>\n <Radio value=\"both\">both</Radio>\n </Radio.Group>\n <Paragraph\n editable={{\n tooltip: 'click to edit text',\n onChange: setClickTriggerStr,\n triggerType: chooseTrigger,\n }}\n >\n {clickTriggerStr}\n </Paragraph>\n <Paragraph\n editable={{\n icon: <HighlightOutlined />,\n tooltip: 'click to edit text',\n onChange: setCustomEnterIconStr,\n enterIcon: <CheckOutlined />,\n }}\n >\n {customEnterIconStr}\n </Paragraph>\n <Paragraph\n editable={{\n icon: <HighlightOutlined />,\n tooltip: 'click to edit text',\n onChange: setNoEnterIconStr,\n enterIcon: null,\n }}\n >\n {noEnterIconStr}\n </Paragraph>\n <Paragraph editable={{ tooltip: false, onChange: setHideTooltipStr }}>\n {hideTooltipStr}\n </Paragraph>\n <Paragraph\n editable={{\n onChange: setLengthLimitedStr,\n maxLength: 50,\n autoSize: { maxRows: 5, minRows: 3 },\n }}\n >\n {lengthLimitedStr}\n </Paragraph>\n <Typography.Title editable level={1} style={{ margin: 0 }}>\n h1. Ant Design\n </Typography.Title>\n <Typography.Title editable level={2} style={{ margin: 0 }}>\n h2. Ant Design\n </Typography.Title>\n <Typography.Title editable level={3} style={{ margin: 0 }}>\n h3. Ant Design\n </Typography.Title>\n <Typography.Title editable level={4} style={{ margin: 0 }}>\n h4. Ant Design\n </Typography.Title>\n <Typography.Title editable level={5} style={{ margin: 0 }}>\n h5. Ant Design\n </Typography.Title>\n </>\n );\n};\n\nexport default App;\n";},e92e192a:function(n,e,t){},e93cd8ff:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eaeb029f");var o="import React from 'react';\nimport type { TimePickerProps } from 'antd';\nimport { TimePicker } from 'antd';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\n\ndayjs.extend(customParseFormat);\n\nconst onChange: TimePickerProps['onChange'] = (time, timeString) => {\n console.log(time, timeString);\n};\n\nconst App: React.FC = () => (\n <TimePicker\n onChange={onChange}\n defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}\n classNames={{ popup: { root: 'myCustomClassName' } }}\n />\n);\n\nexport default App;\n";},e947e370:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1c8b6224");var o="import React from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport { DatePicker, Flex, Segmented } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n 'popup.root': '\u5F39\u51FA\u6846\u6839\u5143\u7D20',\n },\n en: {\n root: 'Root element',\n 'popup.root': 'Popup root element',\n },\n};\n\ninterface BlockProps {\n singleComponent: React.ComponentType<any>;\n multipleComponent: React.ComponentType<any>;\n type: 'Single' | 'Multiple';\n setType: (type: 'Single' | 'Multiple') => void;\n}\n\nconst Block = (props: BlockProps) => {\n const {\n singleComponent: SingleComponent,\n multipleComponent: MultipleComponent,\n type,\n setType,\n ...restProps\n } = props;\n\n const divRef = React.useRef<HTMLDivElement>(null);\n const config = {\n ...restProps,\n prefix: <SmileOutlined />,\n zIndex: 1,\n open: true,\n getPopupContainer: () => divRef!.current!,\n needConfirm: true,\n styles: { popup: { root: { zIndex: 1 } } },\n };\n const picker =\n type === 'Single' ? <SingleComponent {...config} /> : <MultipleComponent {...config} />;\n\n return (\n <Flex\n vertical\n ref={divRef}\n style={{\n alignSelf: 'flex-start',\n }}\n gap=\"middle\"\n align=\"center\"\n >\n <Segmented options={['Single', 'Multiple'] as const} value={type} onChange={setType} />\n {picker}\n </Flex>\n );\n};\n\nexport interface PickerSemanticTemplateProps {\n singleComponent: [string, React.ComponentType<any>];\n multipleComponent: [string, React.ComponentType<any>];\n ignoreSemantics?: string[];\n}\n\nexport function PickerSemanticTemplate(props: PickerSemanticTemplateProps) {\n const { singleComponent, multipleComponent, ignoreSemantics = [] } = props;\n\n const [type, setType] = React.useState<'Single' | 'Multiple'>('Single');\n const [locale] = useLocale(locales);\n\n return (\n <SemanticPreview\n componentName={type === 'Single' ? singleComponent[0] : multipleComponent[0]}\n height={500}\n semantics={[\n { name: 'root', desc: locale.root, version: '5.25.0' },\n { name: 'popup.root', desc: locale['popup.root'], version: '5.25.0' },\n ].filter((semantic) => !ignoreSemantics.includes(semantic.name))}\n >\n <Block\n singleComponent={singleComponent[1]}\n multipleComponent={multipleComponent[1]}\n type={type}\n setType={setType}\n />\n </SemanticPreview>\n );\n}\n\nconst App: React.FC = () => {\n return (\n <PickerSemanticTemplate\n singleComponent={['DatePicker', DatePicker]}\n multipleComponent={['DatePicker.RangePicker', DatePicker.RangePicker]}\n />\n );\n};\n\nexport default App;\n";},e9732b9d:function(n,e,t){},e9ff1e76:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ee74ddff");var o='import React from \'react\';\nimport { Flex, Splitter, Typography } from \'antd\';\n\nconst Desc: React.FC<Readonly<{ text?: string | number }>> = (props) => (\n <Flex justify="center" align="center" style={{ height: \'100%\' }}>\n <Typography.Title type="secondary" level={5} style={{ whiteSpace: \'nowrap\' }}>\n {props.text}\n </Typography.Title>\n </Flex>\n);\n\nconst App: React.FC = () => (\n <Splitter layout="vertical" style={{ height: 300, boxShadow: \'0 0 10px rgba(0, 0, 0, 0.1)\' }}>\n <Splitter.Panel>\n <Desc text="First" />\n </Splitter.Panel>\n <Splitter.Panel>\n <Desc text="Second" />\n </Splitter.Panel>\n </Splitter>\n);\n\nexport default App;\n';},ea21a2ad:function(n,e,t){},ea21a441:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("cddd4b2b");var o="import React, { createContext, useContext, useState } from 'react';\nimport type { DragEndEvent, DragOverEvent, UniqueIdentifier } from '@dnd-kit/core';\nimport {\n closestCenter,\n DndContext,\n DragOverlay,\n PointerSensor,\n useSensor,\n useSensors,\n} from '@dnd-kit/core';\nimport { restrictToHorizontalAxis } from '@dnd-kit/modifiers';\nimport {\n arrayMove,\n horizontalListSortingStrategy,\n SortableContext,\n useSortable,\n} from '@dnd-kit/sortable';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: string;\n name: string;\n gender: string;\n age: number;\n email: string;\n address: string;\n}\n\ninterface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {\n id: string;\n}\n\ninterface BodyCellProps extends React.HTMLAttributes<HTMLTableCellElement> {\n id: string;\n}\n\ninterface DragIndexState {\n active: UniqueIdentifier;\n over: UniqueIdentifier | undefined;\n direction?: 'left' | 'right';\n}\n\nconst DragIndexContext = createContext<DragIndexState>({ active: -1, over: -1 });\n\nconst dragActiveStyle = (dragState: DragIndexState, id: string) => {\n const { active, over, direction } = dragState;\n // drag active style\n let style: React.CSSProperties = {};\n if (active && active === id) {\n style = { backgroundColor: 'gray', opacity: 0.5 };\n }\n // dragover dashed style\n else if (over && id === over && active !== over) {\n style =\n direction === 'right'\n ? { borderRight: '1px dashed gray' }\n : { borderLeft: '1px dashed gray' };\n }\n return style;\n};\n\nconst TableBodyCell: React.FC<BodyCellProps> = (props) => {\n const dragState = useContext<DragIndexState>(DragIndexContext);\n return <td {...props} style={{ ...props.style, ...dragActiveStyle(dragState, props.id) }} />;\n};\n\nconst TableHeaderCell: React.FC<HeaderCellProps> = (props) => {\n const dragState = useContext(DragIndexContext);\n const { attributes, listeners, setNodeRef, isDragging } = useSortable({ id: props.id });\n const style: React.CSSProperties = {\n ...props.style,\n cursor: 'move',\n ...(isDragging ? { position: 'relative', zIndex: 9999, userSelect: 'none' } : {}),\n ...dragActiveStyle(dragState, props.id),\n };\n return <th {...props} ref={setNodeRef} style={style} {...attributes} {...listeners} />;\n};\n\nconst dataSource: DataType[] = [\n {\n key: '1',\n name: 'John Brown',\n gender: 'male',\n age: 32,\n email: 'John Brown@example.com',\n address: 'London No. 1 Lake Park',\n },\n {\n key: '2',\n name: 'Jim Green',\n gender: 'female',\n age: 42,\n email: 'jimGreen@example.com',\n address: 'London No. 1 Lake Park',\n },\n {\n key: '3',\n name: 'Joe Black',\n gender: 'female',\n age: 32,\n email: 'JoeBlack@example.com',\n address: 'Sidney No. 1 Lake Park',\n },\n {\n key: '4',\n name: 'George Hcc',\n gender: 'male',\n age: 20,\n email: 'george@example.com',\n address: 'Sidney No. 1 Lake Park',\n },\n];\n\nconst baseColumns: TableColumnsType<DataType> = [\n { title: 'Name', dataIndex: 'name' },\n { title: 'Gender', dataIndex: 'gender' },\n { title: 'Age', dataIndex: 'age' },\n { title: 'Email', dataIndex: 'email' },\n { title: 'Address', dataIndex: 'address' },\n];\n\nconst App: React.FC = () => {\n const [dragIndex, setDragIndex] = useState<DragIndexState>({ active: -1, over: -1 });\n\n const [columns, setColumns] = useState(() =>\n baseColumns.map((column, i) => ({\n ...column,\n key: `${i}`,\n onHeaderCell: () => ({ id: `${i}` }),\n onCell: () => ({ id: `${i}` }),\n })),\n );\n\n const sensors = useSensors(\n useSensor(PointerSensor, {\n activationConstraint: {\n // https://docs.dndkit.com/api-documentation/sensors/pointer#activation-constraints\n distance: 1,\n },\n }),\n );\n\n const onDragEnd = ({ active, over }: DragEndEvent) => {\n if (active.id !== over?.id) {\n setColumns((prevState) => {\n const activeIndex = prevState.findIndex((i) => i.key === active?.id);\n const overIndex = prevState.findIndex((i) => i.key === over?.id);\n return arrayMove(prevState, activeIndex, overIndex);\n });\n }\n setDragIndex({ active: -1, over: -1 });\n };\n\n const onDragOver = ({ active, over }: DragOverEvent) => {\n const activeIndex = columns.findIndex((i) => i.key === active.id);\n const overIndex = columns.findIndex((i) => i.key === over?.id);\n setDragIndex({\n active: active.id,\n over: over?.id,\n direction: overIndex > activeIndex ? 'right' : 'left',\n });\n };\n\n return (\n <DndContext\n sensors={sensors}\n modifiers={[restrictToHorizontalAxis]}\n onDragEnd={onDragEnd}\n onDragOver={onDragOver}\n collisionDetection={closestCenter}\n >\n <SortableContext items={columns.map((i) => i.key)} strategy={horizontalListSortingStrategy}>\n <DragIndexContext.Provider value={dragIndex}>\n <Table<DataType>\n rowKey=\"key\"\n columns={columns}\n dataSource={dataSource}\n components={{\n header: { cell: TableHeaderCell },\n body: { cell: TableBodyCell },\n }}\n />\n </DragIndexContext.Provider>\n </SortableContext>\n <DragOverlay>\n <th style={{ backgroundColor: 'gray', padding: 16 }}>\n {columns[columns.findIndex((i) => i.key === dragIndex.active)]?.title as React.ReactNode}\n </th>\n </DragOverlay>\n </DndContext>\n );\n};\n\nexport default App;\n";},ea30428b:function(n,e,t){},ea31b41b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d1a57fea");var o='import React from \'react\';\nimport { UploadOutlined } from \'@ant-design/icons\';\nimport { Button, Popconfirm, Space, Upload } from \'antd\';\n\nconst App: React.FC = () => (\n <Space>\n Space\n <Button type="primary">Button</Button>\n <Upload>\n <Button icon={<UploadOutlined />}>Click to Upload</Button>\n </Upload>\n <Popconfirm title="Are you sure delete this task?" okText="Yes" cancelText="No">\n <Button>Confirm</Button>\n </Popconfirm>\n </Space>\n);\n\nexport default App;\n';},ea873eb0:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("81db2fd3");var o='import React from \'react\';\nimport { Flex, Spin, Switch } from \'antd\';\n\nconst App: React.FC = () => {\n const [auto, setAuto] = React.useState(false);\n const [percent, setPercent] = React.useState(-50);\n const timerRef = React.useRef<ReturnType<typeof setTimeout>>(null);\n\n React.useEffect(() => {\n timerRef.current = setTimeout(() => {\n setPercent((v) => {\n const nextPercent = v + 5;\n return nextPercent > 150 ? -50 : nextPercent;\n });\n }, 100);\n return () => clearTimeout(timerRef.current!);\n }, [percent]);\n\n const mergedPercent = auto ? \'auto\' : percent;\n\n return (\n <Flex align="center" gap="middle">\n <Switch\n checkedChildren="Auto"\n unCheckedChildren="Auto"\n checked={auto}\n onChange={() => {\n setAuto(!auto);\n setPercent(-50);\n }}\n />\n <Spin percent={mergedPercent} size="small" />\n <Spin percent={mergedPercent} />\n <Spin percent={mergedPercent} size="large" />\n </Flex>\n );\n};\n\nexport default App;\n';},ea933a00:function(n,e,t){},ea9a6962:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("185ee01c");var o='import React from \'react\';\nimport { Typography } from \'antd\';\n\nconst { Title, Paragraph, Text } = Typography;\n\nconst App: React.FC = () => (\n <>\n <Title>Introduction</Title>\n <Paragraph>\n In the process of internal desktop applications development, many different design specs and\n implementations would be involved, which might cause designers and developers difficulties and\n duplication and reduce the efficiency of development.\n </Paragraph>\n <Paragraph>\n After massive project practice and summaries, Ant Design, a design language for background\n applications, is refined by Ant UED Team, which aims to\n <Text strong>\n uniform the user interface specs for internal background projects, lower the unnecessary\n cost of design differences and implementation and liberate the resources of design and\n front-end development\n </Text>\n .\n </Paragraph>\n <Title level={2}>Guidelines and Resources</Title>\n <Paragraph>\n We supply a series of design principles, practical patterns and high quality design resources\n (<Text code>Sketch</Text> and <Text code>Axure</Text>), to help people create their product\n prototypes beautifully and efficiently.\n </Paragraph>\n\n <Paragraph>\n <ul>\n <li>\n <a href="/docs/spec/proximity">Principles</a>\n </li>\n <li>\n <a href="/docs/pattern/navigation">Patterns</a>\n </li>\n <li>\n <a href="/docs/resource/download">Resource Download</a>\n </li>\n </ul>\n </Paragraph>\n\n <Title id="intro">\u4ECB\u7ECD</Title>\n <Paragraph>\n \u8682\u8681\u7684\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u662F\u4E00\u4E2A\u5E9E\u5927\u4E14\u590D\u6742\u7684\u4F53\u7CFB\u3002\u8FD9\u7C7B\u4EA7\u54C1\u4E0D\u4EC5\u91CF\u7EA7\u5DE8\u5927\u4E14\u529F\u80FD\u590D\u6742\uFF0C\u800C\u4E14\u53D8\u52A8\u548C\u5E76\u53D1\u9891\u7E41\uFF0C\u5E38\u5E38\u9700\u8981\u8BBE\u8BA1\u4E0E\u5F00\u53D1\u80FD\u591F\u5FEB\u901F\u7684\u505A\u51FA\u54CD\u5E94\u3002\u540C\u65F6\u8FD9\u7C7B\u4EA7\u54C1\u4E2D\u6709\u5B58\u5728\u5F88\u591A\u7C7B\u4F3C\u7684\u9875\u9762\u4EE5\u53CA\u7EC4\u4EF6\uFF0C\u53EF\u4EE5\u901A\u8FC7\u62BD\u8C61\u5F97\u5230\u4E00\u4E9B\u7A33\u5B9A\u4E14\u9AD8\u590D\u7528\u6027\u7684\u5185\u5BB9\u3002\n </Paragraph>\n <Paragraph>\n \u968F\u7740\u5546\u4E1A\u5316\u7684\u8D8B\u52BF\uFF0C\u8D8A\u6765\u8D8A\u591A\u7684\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u5BF9\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C\u6709\u4E86\u8FDB\u4E00\u6B65\u7684\u8981\u6C42\u3002\u5E26\u7740\u8FD9\u6837\u7684\u4E00\u4E2A\u7EC8\u6781\u76EE\u6807\uFF0C\u6211\u4EEC\uFF08\u8682\u8681\u96C6\u56E2\u4F53\u9A8C\u6280\u672F\u90E8\uFF09\u7ECF\u8FC7\u5927\u91CF\u7684\u9879\u76EE\u5B9E\u8DF5\u548C\u603B\u7ED3\uFF0C\u9010\u6B65\u6253\u78E8\u51FA\u4E00\u4E2A\u670D\u52A1\u4E8E\u4F01\u4E1A\u7EA7\u4EA7\u54C1\u7684\u8BBE\u8BA1\u4F53\u7CFB\n Ant Design\u3002\u57FA\u4E8E<Text mark>\u300E\u786E\u5B9A\u300F\u548C\u300E\u81EA\u7136\u300F</Text>\n \u7684\u8BBE\u8BA1\u4EF7\u503C\u89C2\uFF0C\u901A\u8FC7\u6A21\u5757\u5316\u7684\u89E3\u51B3\u65B9\u6848\uFF0C\u964D\u4F4E\u5197\u4F59\u7684\u751F\u4EA7\u6210\u672C\uFF0C\u8BA9\u8BBE\u8BA1\u8005\u4E13\u6CE8\u4E8E\n <Text strong>\u66F4\u597D\u7684\u7528\u6237\u4F53\u9A8C</Text>\u3002\n </Paragraph>\n <Title level={2}>\u8BBE\u8BA1\u8D44\u6E90</Title>\n <Paragraph>\n \u6211\u4EEC\u63D0\u4F9B\u5B8C\u5584\u7684\u8BBE\u8BA1\u539F\u5219\u3001\u6700\u4F73\u5B9E\u8DF5\u548C\u8BBE\u8BA1\u8D44\u6E90\u6587\u4EF6\uFF08<Text code>Sketch</Text> \u548C\n <Text code>Axure</Text>\uFF09\uFF0C\u6765\u5E2E\u52A9\u4E1A\u52A1\u5FEB\u901F\u8BBE\u8BA1\u51FA\u9AD8\u8D28\u91CF\u7684\u4EA7\u54C1\u539F\u578B\u3002\n </Paragraph>\n\n <Paragraph>\n <ul>\n <li>\n <a href="/docs/spec/proximity">\u8BBE\u8BA1\u539F\u5219</a>\n </li>\n <li>\n <a href="/docs/pattern/navigation">\u8BBE\u8BA1\u6A21\u5F0F</a>\n </li>\n <li>\n <a href="/docs/resource/download">\u8BBE\u8BA1\u8D44\u6E90</a>\n </li>\n </ul>\n </Paragraph>\n\n <Paragraph>\n <ul>\n <li>I am an unordered item</li>\n <li>\n I am an unordered item with an ordered sublist\n <ol>\n <li>I am ordered</li>\n </ol>\n <ul>\n <li>I am unordered</li>\n </ul>\n </li>\n </ul>\n <ol>\n <li>\n Ordered list item with unordered sublist\n <ul>\n <li>I am unordered!</li>\n <li>I am also unordered!</li>\n </ul>\n </li>\n </ol>\n </Paragraph>\n </>\n);\n\nexport default App;\n';},eaab550b:function(n,e,t){},eaab8a59:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5a94c7f9");var o="import React, { useState } from 'react';\nimport type { PaginationProps } from 'antd';\nimport { Pagination } from 'antd';\n\nconst App: React.FC = () => {\n const [current, setCurrent] = useState(3);\n\n const onChange: PaginationProps['onChange'] = (page) => {\n console.log(page);\n setCurrent(page);\n };\n\n return <Pagination current={current} onChange={onChange} total={50} />;\n};\n\nexport default App;\n";},eaafe65b:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9a75322c");var o="import React from 'react';\nimport { AntDesignOutlined, UserOutlined } from '@ant-design/icons';\nimport { Avatar, Badge, ConfigProvider, Space, Tooltip } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Avatar: {\n containerSize: 60,\n containerSizeLG: 30,\n containerSizeSM: 16,\n\n textFontSize: 18,\n textFontSizeLG: 28,\n textFontSizeSM: 12,\n\n borderRadius: 10,\n groupOverlapping: -10,\n groupBorderColor: '#eee',\n },\n },\n }}\n >\n <Space>\n <Avatar shape=\"circle\" src=\"http://abc.com/not-exist.jpg\">\n A\n </Avatar>\n </Space>\n <Space>\n <Avatar.Group\n max={{\n count: 2,\n style: { color: '#f56a00', backgroundColor: '#fde3cf' },\n }}\n >\n <Avatar src=\"https://api.dicebear.com/7.x/miniavs/svg?seed=2\" />\n <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n <Tooltip title=\"Ant User\" placement=\"top\">\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n </Tooltip>\n <Avatar style={{ backgroundColor: '#1890ff' }} icon={<AntDesignOutlined />} />\n </Avatar.Group>\n </Space>\n <Space>\n <Badge count={1}>\n <Avatar shape=\"square\" icon={<UserOutlined />} />\n </Badge>\n <Badge dot>\n <Avatar shape=\"square\" icon={<UserOutlined />} />\n </Badge>\n </Space>\n </ConfigProvider>\n);\n\nexport default App;\n";},eabf7ffe:function(n,e,t){},eacd1443:function(n,e,t){},eadaa92b:function(n,e,t){},eaeb029f:function(n,e,t){},eaf257c7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9fbf2509");var o="import React, { useState } from 'react';\nimport { Alert, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const [visible, setVisible] = useState(true);\n\n const handleClose = () => {\n setVisible(false);\n };\n\n return (\n <>\n {visible && (\n <Alert message=\"Alert Message Text\" type=\"success\" closable afterClose={handleClose} />\n )}\n <p>click the close button to see the effect</p>\n <Switch onChange={setVisible} checked={visible} disabled={visible} />\n </>\n );\n};\n\nexport default App;\n";},eb1d5ad5:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0de3bac3");var o="import React, { useState } from 'react';\nimport { Flex, Switch, Table, Tag, Transfer } from 'antd';\nimport type { GetProp, TableColumnsType, TableProps, TransferProps } from 'antd';\n\ntype TransferItem = GetProp<TransferProps, 'dataSource'>[number];\ntype TableRowSelection<T extends object> = TableProps<T>['rowSelection'];\n\ninterface DataType {\n key: string;\n title: string;\n description: string;\n tag: string;\n}\n\ninterface TableTransferProps extends TransferProps<TransferItem> {\n dataSource: DataType[];\n leftColumns: TableColumnsType<DataType>;\n rightColumns: TableColumnsType<DataType>;\n}\n\n// Customize Table Transfer\nconst TableTransfer: React.FC<TableTransferProps> = (props) => {\n const { leftColumns, rightColumns, ...restProps } = props;\n return (\n <Transfer style={{ width: '100%' }} {...restProps}>\n {({\n direction,\n filteredItems,\n onItemSelect,\n onItemSelectAll,\n selectedKeys: listSelectedKeys,\n disabled: listDisabled,\n }) => {\n const columns = direction === 'left' ? leftColumns : rightColumns;\n const rowSelection: TableRowSelection<TransferItem> = {\n getCheckboxProps: () => ({ disabled: listDisabled }),\n onChange(selectedRowKeys) {\n onItemSelectAll(selectedRowKeys, 'replace');\n },\n selectedRowKeys: listSelectedKeys,\n selections: [Table.SELECTION_ALL, Table.SELECTION_INVERT, Table.SELECTION_NONE],\n };\n\n return (\n <Table\n rowSelection={rowSelection}\n columns={columns}\n dataSource={filteredItems}\n size=\"small\"\n style={{ pointerEvents: listDisabled ? 'none' : undefined }}\n onRow={({ key, disabled: itemDisabled }) => ({\n onClick: () => {\n if (itemDisabled || listDisabled) {\n return;\n }\n onItemSelect(key, !listSelectedKeys.includes(key));\n },\n })}\n />\n );\n }}\n </Transfer>\n );\n};\n\nconst mockTags = ['cat', 'dog', 'bird'];\n\nconst mockData = Array.from({ length: 20 }).map<DataType>((_, i) => ({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n tag: mockTags[i % 3],\n}));\n\nconst columns: TableColumnsType<DataType> = [\n {\n dataIndex: 'title',\n title: 'Name',\n },\n {\n dataIndex: 'tag',\n title: 'Tag',\n render: (tag: string) => (\n <Tag style={{ marginInlineEnd: 0 }} color=\"cyan\">\n {tag.toUpperCase()}\n </Tag>\n ),\n },\n {\n dataIndex: 'description',\n title: 'Description',\n },\n];\n\nconst filterOption = (input: string, item: DataType) =>\n item.title?.includes(input) || item.tag?.includes(input);\n\nconst App: React.FC = () => {\n const [targetKeys, setTargetKeys] = useState<TransferProps['targetKeys']>([]);\n const [disabled, setDisabled] = useState(false);\n\n const onChange: TableTransferProps['onChange'] = (nextTargetKeys) => {\n setTargetKeys(nextTargetKeys);\n };\n\n const toggleDisabled = (checked: boolean) => {\n setDisabled(checked);\n };\n\n return (\n <Flex align=\"start\" gap=\"middle\" vertical>\n <TableTransfer\n dataSource={mockData}\n targetKeys={targetKeys}\n disabled={disabled}\n showSearch\n showSelectAll={false}\n onChange={onChange}\n filterOption={filterOption}\n leftColumns={columns}\n rightColumns={columns}\n />\n <Switch\n unCheckedChildren=\"disabled\"\n checkedChildren=\"disabled\"\n checked={disabled}\n onChange={toggleDisabled}\n />\n </Flex>\n );\n};\n\nexport default App;\n";},eb2b7337:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fb163429");var o="import React from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport { Button, Upload } from 'antd';\n\nconst App: React.FC = () => (\n <Upload action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\" directory>\n <Button icon={<UploadOutlined />}>Upload Directory</Button>\n </Upload>\n);\n\nexport default App;\n";},eb32e09c:function(n,e,t){},eba13139:function(n,e,t){},ebd0bb37:function(n,e,t){},ebf6d374:function(n,e,t){},ec0d919d:function(n,e,t){},ec7caa41:function(n,e,t){},eccfe71d:function(n,e,t){},ecf56c79:function(n,e,t){},ed134c23:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("673426ab");var o="import React, { useState } from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadFile, UploadProps } from 'antd';\nimport { Button, Upload } from 'antd';\n\nconst App: React.FC = () => {\n const [fileList, setFileList] = useState<UploadFile[]>([\n {\n uid: '-1',\n name: 'xxx.png',\n status: 'done',\n url: 'http://www.baidu.com/xxx.png',\n },\n ]);\n\n const handleChange: UploadProps['onChange'] = (info) => {\n let newFileList = [...info.fileList];\n\n // 1. Limit the number of uploaded files\n // Only to show two recent uploaded files, and old ones will be replaced by the new\n newFileList = newFileList.slice(-2);\n\n // 2. Read from response and show file link\n newFileList = newFileList.map((file) => {\n if (file.response) {\n // Component will show file.url as link\n file.url = file.response.url;\n }\n return file;\n });\n\n setFileList(newFileList);\n };\n\n const props = {\n action: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n onChange: handleChange,\n multiple: true,\n };\n return (\n <Upload {...props} fileList={fileList}>\n <Button icon={<UploadOutlined />}>Upload</Button>\n </Upload>\n );\n};\n\nexport default App;\n";},ed1d76ce:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7b3b6b05");var o="import React from 'react';\nimport { CheckCircleFilled, CloseCircleFilled, ReloadOutlined } from '@ant-design/icons';\nimport type { QRCodeProps } from 'antd';\nimport { Button, Flex, QRCode, Space, Spin } from 'antd';\n\nconst value = 'https://ant.design';\n\nconst customStatusRender: QRCodeProps['statusRender'] = (info) => {\n switch (info.status) {\n case 'expired':\n return (\n <div>\n <CloseCircleFilled style={{ color: 'red' }} /> {info.locale?.expired}\n <p>\n <Button type=\"link\" onClick={info.onRefresh}>\n <ReloadOutlined /> {info.locale?.refresh}\n </Button>\n </p>\n </div>\n );\n case 'loading':\n return (\n <Space direction=\"vertical\">\n <Spin />\n <p>Loading...</p>\n </Space>\n );\n case 'scanned':\n return (\n <div>\n <CheckCircleFilled style={{ color: 'green' }} /> {info.locale?.scanned}\n </div>\n );\n default:\n return null;\n }\n};\n\nconst App: React.FC = () => (\n <Flex gap=\"middle\" wrap>\n <QRCode value={value} status=\"loading\" statusRender={customStatusRender} />\n <QRCode\n value={value}\n status=\"expired\"\n onRefresh={() => console.log('refresh')}\n statusRender={customStatusRender}\n />\n <QRCode value={value} status=\"scanned\" statusRender={customStatusRender} />\n </Flex>\n);\n\nexport default App;\n";},ed2d2bdd:function(n,e,t){},ed909d94:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4cd4ea78");var o="import React from 'react';\nimport type { DatePickerProps } from 'antd';\nimport { DatePicker, Space, theme } from 'antd';\nimport type { Dayjs } from 'dayjs';\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n const style: React.CSSProperties = {\n border: `1px solid ${token.colorPrimary}`,\n borderRadius: '50%',\n };\n const cellRender: DatePickerProps<Dayjs>['cellRender'] = (current, info) => {\n if (info.type !== 'date') {\n return info.originNode;\n }\n if (typeof current === 'number' || typeof current === 'string') {\n return <div className=\"ant-picker-cell-inner\">{current}</div>;\n }\n return (\n <div className=\"ant-picker-cell-inner\" style={current.date() === 1 ? style : {}}>\n {current.date()}\n </div>\n );\n };\n return (\n <Space size={12} direction=\"vertical\">\n <DatePicker cellRender={cellRender} />\n <DatePicker.RangePicker cellRender={cellRender} />\n </Space>\n );\n};\n\nexport default App;\n";},eda308cb:function(n,e,t){},edc21cae:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0e50deaf");var o="import React from 'react';\nimport { Image } from 'antd';\n\nconst App: React.FC = () => (\n <Image\n width={200}\n src=\"https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png\"\n />\n);\n\nexport default App;\n";},ee0a0b19:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1f5c0a8d");var o="import React from 'react';\nimport { createStyles } from 'antd-style';\nimport { Flex, Popover } from 'antd';\nimport type { GetProp } from 'antd';\n\nconst useStyle = createStyles(() => ({\n item: {\n width: '280px',\n height: '280px',\n display: 'inline-flex',\n justifyContent: 'center',\n alignItems: 'center',\n border: '1px dashed purple',\n },\n\n box: {\n width: '40px',\n height: '40px',\n backgroundColor: 'deepskyblue',\n },\n\n cross: {\n position: 'relative',\n\n '&::before, &::after': {\n content: '\"\"',\n position: 'absolute',\n inset: 0,\n },\n '&::before': {\n top: '50%',\n height: '1px',\n backgroundColor: 'red',\n },\n '&::after': {\n left: '50%',\n width: '1px',\n backgroundColor: 'blue',\n },\n },\n}));\n\ntype Placement = GetProp<typeof Popover, 'placement'>;\n\nconst placements: Placement[] = [\n 'topLeft',\n 'top',\n 'topRight',\n 'leftTop',\n 'left',\n 'leftBottom',\n 'rightTop',\n 'right',\n 'rightBottom',\n 'bottomLeft',\n 'bottom',\n 'bottomRight',\n];\n\nconst App = () => {\n const { styles, cx } = useStyle();\n return (\n <Flex gap={16} wrap>\n {placements.map((placement) => (\n <div key={placement} className={styles.item}>\n <Popover\n placement={placement}\n content={\n <Flex align=\"center\" justify=\"center\">\n {placement}\n </Flex>\n }\n autoAdjustOverflow={false}\n arrow={{ pointAtCenter: true }}\n forceRender\n open\n >\n <div className={cx(styles.box, styles.cross)} />\n </Popover>\n </div>\n ))}\n </Flex>\n );\n};\n\nexport default App;\n";},ee534894:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1d907343");var o="import React from 'react';\nimport { DownOutlined, SmileOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n key: '1',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.antgroup.com\">\n 1st menu item\n </a>\n ),\n },\n {\n key: '2',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.aliyun.com\">\n 2nd menu item (disabled)\n </a>\n ),\n icon: <SmileOutlined />,\n disabled: true,\n },\n {\n key: '3',\n label: (\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"https://www.luohanacademy.com\">\n 3rd menu item (disabled)\n </a>\n ),\n disabled: true,\n },\n {\n key: '4',\n danger: true,\n label: 'a danger item',\n },\n];\n\nconst App: React.FC = () => (\n <Dropdown menu={{ items }}>\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Hover me\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n);\n\nexport default App;\n";},ee74ddff:function(n,e,t){},eed6039a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("abeae473");var o="import React from 'react';\nimport { Drawer, Typography } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n mask: '\u906E\u7F69\u5C42\u5143\u7D20',\n content: 'Drawer \u5BB9\u5668\u5143\u7D20',\n header: '\u5934\u90E8\u5143\u7D20',\n body: '\u5185\u5BB9\u5143\u7D20',\n footer: '\u5E95\u90E8\u5143\u7D20',\n },\n en: {\n mask: 'Mask element',\n content: 'Drawer container element',\n header: 'Header element',\n body: 'Body element',\n footer: 'Footer element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Drawer\"\n semantics={[\n { name: 'mask', desc: locale.mask, version: '5.13.0' },\n { name: 'content', desc: locale.content, version: '5.13.0' },\n { name: 'header', desc: locale.header, version: '5.13.0' },\n { name: 'body', desc: locale.body, version: '5.13.0' },\n { name: 'footer', desc: locale.footer, version: '5.13.0' },\n ]}\n height={300}\n >\n <Drawer\n title=\"Title\"\n placement=\"right\"\n footer={<Typography.Link>Footer</Typography.Link>}\n closable={false}\n open\n getContainer={false}\n >\n <p>Some contents...</p>\n </Drawer>\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},eeda0212:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1648d8d8");var o="/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { Flex } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <Flex vertical>\n {Array.from({ length: 4 }).map((_, i) => (\n <div\n key={i}\n style={{\n height: 60,\n backgroundColor: i % 2 ? '#1677ff' : '#1677ffbf',\n }}\n />\n ))}\n </Flex>\n <Flex style={{ marginTop: 20 }}>\n {Array.from({ length: 4 }).map((_, i) => (\n <div\n key={i}\n style={{\n width: '25%',\n height: i % 2 ? 60 : 40,\n backgroundColor: i % 2 ? '#1677ff' : '#1677ffbf',\n }}\n />\n ))}\n </Flex>\n </>\n);\n\nexport default App;\n";},eede51f3:function(n,e,t){},eee11f90:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("28b9eb0c");var o="import React from 'react';\nimport { SmileOutlined } from '@ant-design/icons';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\ninterface Option {\n value: string;\n label: string;\n children?: Option[];\n}\n\nconst options: Option[] = [\n {\n value: 'zhejiang',\n label: 'Zhejiang',\n children: [\n {\n value: 'hangzhou',\n label: 'Hangzhou',\n children: [\n {\n value: 'xihu',\n label: 'West Lake',\n },\n ],\n },\n ],\n },\n {\n value: 'jiangsu',\n label: 'Jiangsu',\n children: [\n {\n value: 'nanjing',\n label: 'Nanjing',\n children: [\n {\n value: 'zhonghuamen',\n label: 'Zhong Hua Men',\n },\n ],\n },\n ],\n },\n];\n\nconst onChange: CascaderProps<Option>['onChange'] = (value) => {\n console.log(value);\n};\n\nconst App: React.FC = () => (\n <>\n <Cascader\n suffixIcon={<SmileOutlined />}\n options={options}\n onChange={onChange}\n placeholder=\"Please select\"\n />\n <br />\n <br />\n <Cascader suffixIcon=\"ab\" options={options} onChange={onChange} placeholder=\"Please select\" />\n <br />\n <br />\n <Cascader\n expandIcon={<SmileOutlined />}\n options={options}\n onChange={onChange}\n placeholder=\"Please select\"\n />\n <br />\n <br />\n <Cascader expandIcon=\"ab\" options={options} onChange={onChange} placeholder=\"Please select\" />\n <br />\n <br />\n <Cascader\n prefix={<SmileOutlined />}\n options={options}\n onChange={onChange}\n placeholder=\"Please select\"\n />\n </>\n);\n\nexport default App;\n";},eee1b5d6:function(n,e,t){},ef1a0a10:function(n,e,t){},ef31b4fd:function(n,e,t){},ef38070e:function(n,e,t){},ef611f74:function(n,e,t){},ef8cb91a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0e3bed0e");var o="import React, { useState } from 'react';\nimport { Button, Checkbox } from 'antd';\nimport type { CheckboxProps } from 'antd';\n\nconst App: React.FC = () => {\n const [checked, setChecked] = useState(true);\n const [disabled, setDisabled] = useState(false);\n\n const toggleChecked = () => {\n setChecked(!checked);\n };\n\n const toggleDisable = () => {\n setDisabled(!disabled);\n };\n\n const onChange: CheckboxProps['onChange'] = (e) => {\n console.log('checked = ', e.target.checked);\n setChecked(e.target.checked);\n };\n\n const label = `${checked ? 'Checked' : 'Unchecked'}-${disabled ? 'Disabled' : 'Enabled'}`;\n\n return (\n <>\n <p style={{ marginBottom: '20px' }}>\n <Checkbox checked={checked} disabled={disabled} onChange={onChange}>\n {label}\n </Checkbox>\n </p>\n <p>\n <Button type=\"primary\" size=\"small\" onClick={toggleChecked}>\n {!checked ? 'Check' : 'Uncheck'}\n </Button>\n <Button style={{ margin: '0 10px' }} type=\"primary\" size=\"small\" onClick={toggleDisable}>\n {!disabled ? 'Disable' : 'Enable'}\n </Button>\n </p>\n </>\n );\n};\n\nexport default App;\n";},efaf0f60:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bd86365d");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { MenuProps } from 'antd';\nimport { Dropdown, Space } from 'antd';\n\nconst items: MenuProps['items'] = [\n {\n label: (\n <a href=\"https://www.antgroup.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n 1st menu item\n </a>\n ),\n key: '0',\n },\n {\n label: (\n <a href=\"https://www.aliyun.com\" target=\"_blank\" rel=\"noopener noreferrer\">\n 2nd menu item\n </a>\n ),\n key: '1',\n },\n {\n type: 'divider',\n },\n {\n label: '3rd menu item',\n key: '3',\n },\n];\n\nconst App: React.FC = () => (\n <Dropdown menu={{ items }} trigger={['click']}>\n <a onClick={(e) => e.preventDefault()}>\n <Space>\n Click me\n <DownOutlined />\n </Space>\n </a>\n </Dropdown>\n);\n\nexport default App;\n";},efb171a4:function(n,e,t){},efb64a42:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7bed81e4");var o="import React, { useState } from 'react';\nimport { Card } from 'antd';\n\nconst tabList = [\n {\n key: 'tab1',\n tab: 'tab1',\n },\n {\n key: 'tab2',\n tab: 'tab2',\n },\n];\n\nconst contentList: Record<string, React.ReactNode> = {\n tab1: <p>content1</p>,\n tab2: <p>content2</p>,\n};\n\nconst tabListNoTitle = [\n {\n key: 'article',\n label: 'article',\n },\n {\n key: 'app',\n label: 'app',\n },\n {\n key: 'project',\n label: 'project',\n },\n];\n\nconst contentListNoTitle: Record<string, React.ReactNode> = {\n article: <p>article content</p>,\n app: <p>app content</p>,\n project: <p>project content</p>,\n};\n\nconst App: React.FC = () => {\n const [activeTabKey1, setActiveTabKey1] = useState<string>('tab1');\n const [activeTabKey2, setActiveTabKey2] = useState<string>('app');\n\n const onTab1Change = (key: string) => {\n setActiveTabKey1(key);\n };\n const onTab2Change = (key: string) => {\n setActiveTabKey2(key);\n };\n\n return (\n <>\n <Card\n style={{ width: '100%' }}\n title=\"Card title\"\n extra={<a href=\"#\">More</a>}\n tabList={tabList}\n activeTabKey={activeTabKey1}\n onTabChange={onTab1Change}\n >\n {contentList[activeTabKey1]}\n </Card>\n <br />\n <br />\n <Card\n style={{ width: '100%' }}\n tabList={tabListNoTitle}\n activeTabKey={activeTabKey2}\n tabBarExtraContent={<a href=\"#\">More</a>}\n onTabChange={onTab2Change}\n tabProps={{\n size: 'middle',\n }}\n >\n {contentListNoTitle[activeTabKey2]}\n </Card>\n </>\n );\n};\n\nexport default App;\n";},efc44d5e:function(n,e,t){},efc7e483:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ce900e2c");var o="import React, { useState } from 'react';\nimport { ColorPicker, Space } from 'antd';\nimport type { ColorPickerProps, GetProp } from 'antd';\n\ntype Color = Extract<GetProp<ColorPickerProps, 'value'>, string | { cleared: any }>;\ntype Format = GetProp<ColorPickerProps, 'format'>;\n\nconst HexCase: React.FC = () => {\n const [colorHex, setColorHex] = useState<Color>('#1677ff');\n const [formatHex, setFormatHex] = useState<Format | undefined>('hex');\n\n const hexString = React.useMemo<string>(\n () => (typeof colorHex === 'string' ? colorHex : colorHex?.toHexString()),\n [colorHex],\n );\n\n return (\n <Space>\n <ColorPicker\n format={formatHex}\n value={colorHex}\n onChange={setColorHex}\n onFormatChange={setFormatHex}\n />\n <span>HEX: {hexString}</span>\n </Space>\n );\n};\n\nconst HsbCase: React.FC = () => {\n const [colorHsb, setColorHsb] = useState<Color>('hsb(215, 91%, 100%)');\n const [formatHsb, setFormatHsb] = useState<ColorPickerProps['format']>('hsb');\n\n const hsbString = React.useMemo(\n () => (typeof colorHsb === 'string' ? colorHsb : colorHsb?.toHsbString()),\n [colorHsb],\n );\n\n return (\n <Space>\n <ColorPicker\n format={formatHsb}\n value={colorHsb}\n onChange={setColorHsb}\n onFormatChange={setFormatHsb}\n />\n <span>HSB: {hsbString}</span>\n </Space>\n );\n};\n\nconst RgbCase: React.FC = () => {\n const [colorRgb, setColorRgb] = useState<Color>('rgb(22, 119, 255)');\n const [formatRgb, setFormatRgb] = useState<ColorPickerProps['format']>('rgb');\n\n const rgbString = React.useMemo(\n () => (typeof colorRgb === 'string' ? colorRgb : colorRgb?.toRgbString()),\n [colorRgb],\n );\n\n return (\n <Space>\n <ColorPicker\n format={formatRgb}\n value={colorRgb}\n onChange={setColorRgb}\n onFormatChange={setFormatRgb}\n />\n <span>RGB: {rgbString}</span>\n </Space>\n );\n};\n\nconst Demo: React.FC = () => (\n <Space direction=\"vertical\" size=\"middle\" style={{ display: 'flex' }}>\n <HexCase />\n <HsbCase />\n <RgbCase />\n </Space>\n);\n\nexport default Demo;\n";},f02b525f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fe4917e6");var o="import React from 'react';\nimport { Button, notification } from 'antd';\n\nconst openNotification = () => {\n notification.open({\n message: 'Notification Title',\n description:\n 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',\n onClick: () => {\n console.log('Notification Clicked!');\n },\n });\n};\nconst App: React.FC = () => (\n <Button type=\"primary\" onClick={openNotification}>\n Open the notification box\n </Button>\n);\n\nexport default App;\n";},f0823588:function(n,e,t){},f092456a:function(n,e,t){},f09519a4:function(n,e,t){},f09ee802:function(n,e,t){},f0a61a36:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1dbcd8c9");var o="import React from 'react';\nimport { DatePicker, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <DatePicker status=\"error\" style={{ width: '100%' }} />\n <DatePicker status=\"warning\" style={{ width: '100%' }} />\n <DatePicker.RangePicker status=\"error\" style={{ width: '100%' }} />\n <DatePicker.RangePicker status=\"warning\" style={{ width: '100%' }} />\n </Space>\n);\n\nexport default App;\n";},f0e2ccf9:function(n,e,t){},f10a69f1:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a5ee2ee8");var o="import React from 'react';\nimport { ConfigProvider, Rate } from 'antd';\n\n/** Test usage. Do not use in your production. */\nexport default () => (\n <ConfigProvider\n theme={{\n components: {\n Rate: {\n starColor: 'blue',\n starSize: 40,\n starHoverScale: 'scale(2)',\n starBg: 'red',\n },\n },\n }}\n >\n <Rate defaultValue={2.5} />\n </ConfigProvider>\n);\n";},f136e319:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("86251019");var o="import React, { useState } from 'react';\nimport { PlusOutlined } from '@ant-design/icons';\nimport { Image, Upload } from 'antd';\nimport type { GetProp, UploadFile, UploadProps } from 'antd';\n\ntype FileType = Parameters<GetProp<UploadProps, 'beforeUpload'>>[0];\n\nconst getBase64 = (file: FileType): Promise<string> =>\n new Promise((resolve, reject) => {\n const reader = new FileReader();\n reader.readAsDataURL(file);\n reader.onload = () => resolve(reader.result as string);\n reader.onerror = (error) => reject(error);\n });\n\nconst App: React.FC = () => {\n const [previewOpen, setPreviewOpen] = useState(false);\n const [previewImage, setPreviewImage] = useState('');\n const [fileList, setFileList] = useState<UploadFile[]>([\n {\n uid: '-1',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-2',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-3',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-4',\n name: 'image.png',\n status: 'done',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-xxx',\n percent: 50,\n name: 'image.png',\n status: 'uploading',\n url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',\n },\n {\n uid: '-5',\n name: 'image.png',\n status: 'error',\n },\n ]);\n\n const handlePreview = async (file: UploadFile) => {\n if (!file.url && !file.preview) {\n file.preview = await getBase64(file.originFileObj as FileType);\n }\n\n setPreviewImage(file.url || (file.preview as string));\n setPreviewOpen(true);\n };\n\n const handleChange: UploadProps['onChange'] = ({ fileList: newFileList }) =>\n setFileList(newFileList);\n\n const uploadButton = (\n <button style={{ border: 0, background: 'none' }} type=\"button\">\n <PlusOutlined />\n <div style={{ marginTop: 8 }}>Upload</div>\n </button>\n );\n return (\n <>\n <Upload\n action=\"https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload\"\n listType=\"picture-card\"\n fileList={fileList}\n onPreview={handlePreview}\n onChange={handleChange}\n >\n {fileList.length >= 8 ? null : uploadButton}\n </Upload>\n {previewImage && (\n <Image\n wrapperStyle={{ display: 'none' }}\n preview={{\n visible: previewOpen,\n onVisibleChange: (visible) => setPreviewOpen(visible),\n afterOpenChange: (visible) => !visible && setPreviewImage(''),\n }}\n src={previewImage}\n />\n )}\n </>\n );\n};\n\nexport default App;\n";},f1514f5b:function(n,e,t){},f1585c1d:function(n,e,t){},f169af7a:function(n,e,t){},f176d276:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("517e0761");var o="import React, { useState } from 'react';\nimport { CommentOutlined, CustomerServiceOutlined } from '@ant-design/icons';\nimport { FloatButton, Switch } from 'antd';\n\nconst App: React.FC = () => {\n const [open, setOpen] = useState<boolean>(true);\n return (\n <>\n <Switch onChange={setOpen} checked={open} style={{ margin: 16 }} />\n <FloatButton.Group\n open={open}\n trigger=\"click\"\n style={{ insetInlineEnd: 24 }}\n icon={<CustomerServiceOutlined />}\n >\n <FloatButton />\n <FloatButton />\n <FloatButton icon={<CommentOutlined />} />\n </FloatButton.Group>\n <FloatButton.Group\n open={open}\n shape=\"square\"\n trigger=\"click\"\n style={{ insetInlineEnd: 88 }}\n icon={<CustomerServiceOutlined />}\n >\n <FloatButton />\n <FloatButton />\n <FloatButton icon={<CommentOutlined />} />\n </FloatButton.Group>\n </>\n );\n};\n\nexport default App;\n";},f19ccb9a:function(n,e,t){},f1b3f858:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4ca9feaf");var o="import React, { useState } from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport type { ConfigProviderProps, GetProp, RadioChangeEvent, TableProps } from 'antd';\nimport { ConfigProvider, Form, Radio, Space, Switch, Table } from 'antd';\n\ntype SizeType = ConfigProviderProps['componentSize'];\ntype ColumnsType<T extends object> = GetProp<TableProps<T>, 'columns'>;\ntype TablePagination = Exclude<GetProp<TableProps, 'pagination'>, boolean>;\ntype TablePaginationPosition = NonNullable<TablePagination['position']>[number];\ntype ExpandableConfig<T extends object> = GetProp<TableProps<T>, 'expandable'>;\ntype TableRowSelection<T extends object> = GetProp<TableProps<T>, 'rowSelection'>;\n\ninterface DataType {\n key: number;\n name: string;\n age: number;\n address: string;\n description: string;\n}\n\nconst columns: ColumnsType<DataType> = [\n {\n title: 'Name',\n dataIndex: 'name',\n },\n {\n title: 'Age',\n dataIndex: 'age',\n sorter: (a, b) => a.age - b.age,\n },\n {\n title: 'Address',\n dataIndex: 'address',\n filters: [\n {\n text: 'London',\n value: 'London',\n },\n {\n text: 'New York',\n value: 'New York',\n },\n ],\n onFilter: (value, record) => record.address.indexOf(value as string) === 0,\n },\n {\n title: 'Action',\n key: 'action',\n sorter: true,\n render: () => (\n <Space size=\"middle\">\n <a>Delete</a>\n <a>\n <Space>\n More actions\n <DownOutlined />\n </Space>\n </a>\n </Space>\n ),\n },\n];\n\nconst dataSource = Array.from({ length: 10 }).map<DataType>((_, i) => ({\n key: i,\n name: 'John Brown',\n age: Number(`${i}2`),\n address: `New York No. ${i} Lake Park`,\n description: `My name is John Brown, I am ${i}2 years old, living in New York No. ${i} Lake Park.`,\n}));\n\nconst defaultExpandable: ExpandableConfig<DataType> = {\n expandedRowRender: (record: DataType) => <p>{record.description}</p>,\n};\n\nconst defaultTitle = () => 'Here is title';\nconst defaultFooter = () => 'Here is footer';\n\nconst App: React.FC = () => {\n const [bordered, setBordered] = useState(false);\n const [loading, setLoading] = useState(false);\n const [size, setSize] = useState<SizeType>('large');\n const [expandable, setExpandable] = useState<ExpandableConfig<DataType> | undefined>(\n defaultExpandable,\n );\n const [showTitle, setShowTitle] = useState(false);\n const [showHeader, setShowHeader] = useState(true);\n const [showFooter, setShowFooter] = useState(true);\n const [rowSelection, setRowSelection] = useState<TableRowSelection<DataType> | undefined>({});\n const [hasData, setHasData] = useState(true);\n const [tableLayout, setTableLayout] = useState<string>('unset');\n const [top, setTop] = useState<TablePaginationPosition>('none');\n const [bottom, setBottom] = useState<TablePaginationPosition>('bottomRight');\n const [ellipsis, setEllipsis] = useState(false);\n const [yScroll, setYScroll] = useState(false);\n const [xScroll, setXScroll] = useState<string>('unset');\n\n const handleBorderChange = (enable: boolean) => {\n setBordered(enable);\n };\n\n const handleLoadingChange = (enable: boolean) => {\n setLoading(enable);\n };\n\n const handleSizeChange = (e: RadioChangeEvent) => {\n setSize(e.target.value);\n };\n\n const handleTableLayoutChange = (e: RadioChangeEvent) => {\n setTableLayout(e.target.value);\n };\n\n const handleExpandChange = (enable: boolean) => {\n setExpandable(enable ? defaultExpandable : undefined);\n };\n\n const handleEllipsisChange = (enable: boolean) => {\n setEllipsis(enable);\n };\n\n const handleTitleChange = (enable: boolean) => {\n setShowTitle(enable);\n };\n\n const handleHeaderChange = (enable: boolean) => {\n setShowHeader(enable);\n };\n\n const handleFooterChange = (enable: boolean) => {\n setShowFooter(enable);\n };\n\n const handleRowSelectionChange = (enable: boolean) => {\n setRowSelection(enable ? {} : undefined);\n };\n\n const handleYScrollChange = (enable: boolean) => {\n setYScroll(enable);\n };\n\n const handleXScrollChange = (e: RadioChangeEvent) => {\n setXScroll(e.target.value);\n };\n\n const handleDataChange = (newHasData: boolean) => {\n setHasData(newHasData);\n };\n\n const scroll: { x?: number | string; y?: number | string } = {};\n if (yScroll) {\n scroll.y = 240;\n }\n if (xScroll !== 'unset') {\n scroll.x = '100vw';\n }\n\n const tableColumns = columns.map((item) => ({ ...item, ellipsis }));\n if (xScroll === 'fixed') {\n tableColumns[0].fixed = true;\n tableColumns[tableColumns.length - 1].fixed = 'right';\n }\n\n const tableProps: TableProps<DataType> = {\n bordered,\n loading,\n size,\n expandable,\n title: showTitle ? defaultTitle : undefined,\n showHeader,\n footer: showFooter ? defaultFooter : undefined,\n rowSelection,\n scroll,\n tableLayout: tableLayout === 'unset' ? undefined : (tableLayout as TableProps['tableLayout']),\n };\n\n return (\n <>\n <Form layout=\"inline\" className=\"table-demo-control-bar\" style={{ marginBottom: 16 }}>\n <Form.Item label=\"Bordered\">\n <Switch checked={bordered} onChange={handleBorderChange} />\n </Form.Item>\n <Form.Item label=\"loading\">\n <Switch checked={loading} onChange={handleLoadingChange} />\n </Form.Item>\n <Form.Item label=\"Title\">\n <Switch checked={showTitle} onChange={handleTitleChange} />\n </Form.Item>\n <Form.Item label=\"Column Header\">\n <Switch checked={showHeader} onChange={handleHeaderChange} />\n </Form.Item>\n <Form.Item label=\"Footer\">\n <Switch checked={showFooter} onChange={handleFooterChange} />\n </Form.Item>\n <Form.Item label=\"Expandable\">\n <Switch checked={!!expandable} onChange={handleExpandChange} />\n </Form.Item>\n <Form.Item label=\"Checkbox\">\n <Switch checked={!!rowSelection} onChange={handleRowSelectionChange} />\n </Form.Item>\n <Form.Item label=\"Fixed Header\">\n <Switch checked={!!yScroll} onChange={handleYScrollChange} />\n </Form.Item>\n <Form.Item label=\"Has Data\">\n <Switch checked={!!hasData} onChange={handleDataChange} />\n </Form.Item>\n <Form.Item label=\"Ellipsis\">\n <Switch checked={!!ellipsis} onChange={handleEllipsisChange} />\n </Form.Item>\n <Form.Item label=\"Size\">\n <Radio.Group value={size} onChange={handleSizeChange}>\n <Radio.Button value=\"large\">Large</Radio.Button>\n <Radio.Button value=\"middle\">Middle</Radio.Button>\n <Radio.Button value=\"small\">Small</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Table Scroll\">\n <Radio.Group value={xScroll} onChange={handleXScrollChange}>\n <Radio.Button value=\"unset\">Unset</Radio.Button>\n <Radio.Button value=\"scroll\">Scroll</Radio.Button>\n <Radio.Button value=\"fixed\">Fixed Columns</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Table Layout\">\n <Radio.Group value={tableLayout} onChange={handleTableLayoutChange}>\n <Radio.Button value=\"unset\">Unset</Radio.Button>\n <Radio.Button value=\"fixed\">Fixed</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Pagination Top\">\n <Radio.Group value={top} onChange={(e) => setTop(e.target.value)}>\n <Radio.Button value=\"topLeft\">TopLeft</Radio.Button>\n <Radio.Button value=\"topCenter\">TopCenter</Radio.Button>\n <Radio.Button value=\"topRight\">TopRight</Radio.Button>\n <Radio.Button value=\"none\">None</Radio.Button>\n </Radio.Group>\n </Form.Item>\n <Form.Item label=\"Pagination Bottom\">\n <Radio.Group value={bottom} onChange={(e) => setBottom(e.target.value)}>\n <Radio.Button value=\"bottomLeft\">BottomLeft</Radio.Button>\n <Radio.Button value=\"bottomCenter\">BottomCenter</Radio.Button>\n <Radio.Button value=\"bottomRight\">BottomRight</Radio.Button>\n <Radio.Button value=\"none\">None</Radio.Button>\n </Radio.Group>\n </Form.Item>\n </Form>\n <ConfigProvider\n theme={{\n components: {\n Table: {\n colorBgContainer: '#e6f4ff',\n headerBg: '#1677ff',\n headerColor: '#fff',\n headerSortActiveBg: '#0958d9',\n headerSortHoverBg: '#69b1ff',\n bodySortBg: '#1677ff10',\n rowHoverBg: '#1677ff10',\n rowSelectedBg: '#bae0ff',\n rowSelectedHoverBg: '#91caff',\n rowExpandedBg: '#1677ff10',\n cellPaddingBlock: 20,\n cellPaddingInline: 20,\n cellPaddingBlockMD: 16,\n cellPaddingInlineMD: 16,\n cellPaddingBlockSM: 12,\n cellPaddingInlineSM: 12,\n borderColor: '#e6f4ff',\n headerBorderRadius: 0,\n footerBg: '#1677ff',\n footerColor: '#fff',\n cellFontSize: 16,\n cellFontSizeMD: 16,\n cellFontSizeSM: 14,\n headerSplitColor: '#fff',\n headerFilterHoverBg: 'rgba(0, 0, 0, 0.12)',\n filterDropdownMenuBg: '#fff',\n filterDropdownBg: '#fff',\n expandIconBg: '#e6f4ff',\n },\n },\n }}\n >\n <Table<DataType>\n {...tableProps}\n pagination={{ position: [top, bottom] }}\n columns={tableColumns}\n dataSource={hasData ? dataSource : []}\n scroll={scroll}\n />\n </ConfigProvider>\n </>\n );\n};\n\nexport default App;\n";},f1b43603:function(n,e,t){},f1de3e94:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a8427aa4");var o="import React from 'react';\nimport { Button, Segmented, Space, Switch, Table, Typography } from 'antd';\nimport type { TableProps } from 'antd';\n\ninterface RecordType {\n id: number;\n firstName: string;\n lastName: string;\n age: number;\n address1: string;\n address2: string;\n address3: string;\n}\n\nconst fixedColumns: TableProps<RecordType>['columns'] = [\n {\n title: 'ID',\n dataIndex: 'id',\n width: 100,\n fixed: 'left',\n },\n {\n title: 'FistName',\n dataIndex: 'firstName',\n width: 120,\n fixed: 'left',\n },\n {\n title: 'LastName',\n dataIndex: 'lastName',\n width: 120,\n fixed: 'left',\n },\n {\n title: 'Group',\n width: 120,\n render: (_, record) => `Group ${Math.floor(record.id / 4)}`,\n onCell: (record) => ({\n rowSpan: record.id % 4 === 0 ? 4 : 0,\n }),\n },\n {\n title: 'Age',\n dataIndex: 'age',\n width: 100,\n onCell: (record) => ({\n colSpan: record.id % 4 === 0 ? 2 : 1,\n }),\n },\n {\n title: 'Address 1',\n dataIndex: 'address1',\n onCell: (record) => ({\n colSpan: record.id % 4 === 0 ? 0 : 1,\n }),\n },\n {\n title: 'Address 2',\n dataIndex: 'address2',\n },\n {\n title: 'Address 3',\n dataIndex: 'address3',\n },\n {\n title: 'Action',\n width: 150,\n fixed: 'right',\n render: () => (\n <Space>\n <Typography.Link>Action1</Typography.Link>\n <Typography.Link>Action2</Typography.Link>\n </Space>\n ),\n },\n];\n\nconst columns: TableProps<RecordType>['columns'] = [\n {\n title: 'ID',\n dataIndex: 'id',\n width: 100,\n },\n {\n title: 'FistName',\n dataIndex: 'firstName',\n width: 120,\n },\n {\n title: 'LastName',\n dataIndex: 'lastName',\n },\n];\n\nconst getData = (length: number) =>\n Array.from({ length }).map<RecordType>((_, index) => ({\n id: index,\n firstName: `First_${index.toString(16)}`,\n lastName: `Last_${index.toString(16)}`,\n age: 25 + (index % 10),\n address1: `New York No. ${index} Lake Park`,\n address2: `London No. ${index} Lake Park`,\n address3: `Sydney No. ${index} Lake Park`,\n }));\n\nconst App: React.FC = () => {\n const [fixed, setFixed] = React.useState(true);\n const [bordered, setBordered] = React.useState(true);\n const [expanded, setExpanded] = React.useState(false);\n const [empty, setEmpty] = React.useState(false);\n const [count, setCount] = React.useState(10000);\n\n const tblRef: Parameters<typeof Table>[0]['ref'] = React.useRef(null);\n\n const data = React.useMemo<RecordType[]>(() => getData(count), [count]);\n\n const mergedColumns = React.useMemo<typeof fixedColumns>(() => {\n if (!fixed) {\n return columns;\n }\n\n if (!expanded) {\n return fixedColumns;\n }\n\n return fixedColumns.map((col) => ({ ...col, onCell: undefined }));\n }, [expanded, fixed]);\n\n const expandableProps = React.useMemo<TableProps<RecordType>['expandable']>(() => {\n if (!expanded) {\n return undefined;\n }\n\n return {\n columnWidth: 48,\n expandedRowRender: (record) => <p style={{ margin: 0 }}>\u{1F389} Expanded {record.address1}</p>,\n rowExpandable: (record) => record.id % 2 === 0,\n };\n }, [expanded]);\n\n return (\n <div style={{ padding: 64 }}>\n <Space direction=\"vertical\" style={{ width: '100%' }}>\n <Space>\n <Switch\n checked={bordered}\n onChange={() => setBordered(!bordered)}\n checkedChildren=\"Bordered\"\n unCheckedChildren=\"Bordered\"\n />\n <Switch\n checked={fixed}\n onChange={() => setFixed(!fixed)}\n checkedChildren=\"Fixed\"\n unCheckedChildren=\"Fixed\"\n />\n <Switch\n checked={expanded}\n onChange={() => setExpanded(!expanded)}\n checkedChildren=\"Expandable\"\n unCheckedChildren=\"Expandable\"\n />\n <Switch\n checked={empty}\n onChange={() => setEmpty(!empty)}\n checkedChildren=\"Empty\"\n unCheckedChildren=\"Empty\"\n />\n <Segmented\n value={count}\n onChange={setCount}\n options={[\n { label: 'None', value: 0 },\n { label: 'Less', value: 4 },\n { label: 'Lot', value: 10000 },\n ]}\n />\n\n {data.length >= 999 && (\n <Button onClick={() => tblRef.current?.scrollTo({ index: 999 })}>\n Scroll To index 999\n </Button>\n )}\n </Space>\n\n <Table<RecordType>\n bordered={bordered}\n virtual\n columns={mergedColumns}\n scroll={{ x: 2000, y: 400 }}\n rowKey=\"id\"\n dataSource={empty ? [] : data}\n pagination={false}\n ref={tblRef}\n rowSelection={expanded ? undefined : { type: 'radio', columnWidth: 48 }}\n expandable={expandableProps}\n />\n </Space>\n </div>\n );\n};\n\nexport default App;\n";},f1f3f9a5:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2273351b");var o="import React from 'react';\nimport {\n DownloadOutlined,\n LeftOutlined,\n RightOutlined,\n RotateLeftOutlined,\n RotateRightOutlined,\n SwapOutlined,\n UndoOutlined,\n ZoomInOutlined,\n ZoomOutOutlined,\n} from '@ant-design/icons';\nimport { Image, Space } from 'antd';\n\nconst imageList = [\n 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',\n 'https://gw.alipayobjects.com/zos/antfincdn/aPkFc8Sj7n/method-draw-image.svg',\n];\n\n// you can download flipped and rotated image\n// https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp\nconst App: React.FC = () => {\n const [current, setCurrent] = React.useState(0);\n\n // or you can download flipped and rotated image\n // https://codesandbox.io/s/zi-ding-yi-gong-ju-lan-antd-5-7-0-forked-c9jvmp\n const onDownload = () => {\n const url = imageList[current];\n const suffix = url.slice(url.lastIndexOf('.'));\n const filename = Date.now() + suffix;\n\n fetch(url)\n .then((response) => response.blob())\n .then((blob) => {\n const blobUrl = URL.createObjectURL(new Blob([blob]));\n const link = document.createElement('a');\n link.href = blobUrl;\n link.download = filename;\n document.body.appendChild(link);\n link.click();\n URL.revokeObjectURL(blobUrl);\n link.remove();\n });\n };\n\n return (\n <Image.PreviewGroup\n preview={{\n toolbarRender: (\n _,\n {\n transform: { scale },\n actions: {\n onActive,\n onFlipY,\n onFlipX,\n onRotateLeft,\n onRotateRight,\n onZoomOut,\n onZoomIn,\n onReset,\n },\n },\n ) => (\n <Space size={12} className=\"toolbar-wrapper\">\n <LeftOutlined onClick={() => onActive?.(-1)} />\n <RightOutlined onClick={() => onActive?.(1)} />\n <DownloadOutlined onClick={onDownload} />\n <SwapOutlined rotate={90} onClick={onFlipY} />\n <SwapOutlined onClick={onFlipX} />\n <RotateLeftOutlined onClick={onRotateLeft} />\n <RotateRightOutlined onClick={onRotateRight} />\n <ZoomOutOutlined disabled={scale === 1} onClick={onZoomOut} />\n <ZoomInOutlined disabled={scale === 50} onClick={onZoomIn} />\n <UndoOutlined onClick={onReset} />\n </Space>\n ),\n onChange: (index) => {\n setCurrent(index);\n },\n }}\n >\n {imageList.map((item) => (\n <Image key={item} src={item} width={200} />\n ))}\n </Image.PreviewGroup>\n );\n};\n\nexport default App;\n";},f2292ffe:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f980fb56");var o="import React, { useState } from 'react';\nimport type { TableProps } from 'antd';\nimport { Form, Input, InputNumber, Popconfirm, Table, Typography } from 'antd';\n\ninterface DataType {\n key: string;\n name: string;\n age: number;\n address: string;\n}\n\nconst originData = Array.from({ length: 100 }).map<DataType>((_, i) => ({\n key: i.toString(),\n name: `Edward ${i}`,\n age: 32,\n address: `London Park no. ${i}`,\n}));\n\ninterface EditableCellProps extends React.HTMLAttributes<HTMLElement> {\n editing: boolean;\n dataIndex: string;\n title: any;\n inputType: 'number' | 'text';\n record: DataType;\n index: number;\n}\n\nconst EditableCell: React.FC<React.PropsWithChildren<EditableCellProps>> = ({\n editing,\n dataIndex,\n title,\n inputType,\n record,\n index,\n children,\n ...restProps\n}) => {\n const inputNode = inputType === 'number' ? <InputNumber /> : <Input />;\n\n return (\n <td {...restProps}>\n {editing ? (\n <Form.Item\n name={dataIndex}\n style={{ margin: 0 }}\n rules={[\n {\n required: true,\n message: `Please Input ${title}!`,\n },\n ]}\n >\n {inputNode}\n </Form.Item>\n ) : (\n children\n )}\n </td>\n );\n};\n\nconst App: React.FC = () => {\n const [form] = Form.useForm();\n const [data, setData] = useState<DataType[]>(originData);\n const [editingKey, setEditingKey] = useState('');\n\n const isEditing = (record: DataType) => record.key === editingKey;\n\n const edit = (record: Partial<DataType> & { key: React.Key }) => {\n form.setFieldsValue({ name: '', age: '', address: '', ...record });\n setEditingKey(record.key);\n };\n\n const cancel = () => {\n setEditingKey('');\n };\n\n const save = async (key: React.Key) => {\n try {\n const row = (await form.validateFields()) as DataType;\n\n const newData = [...data];\n const index = newData.findIndex((item) => key === item.key);\n if (index > -1) {\n const item = newData[index];\n newData.splice(index, 1, {\n ...item,\n ...row,\n });\n setData(newData);\n setEditingKey('');\n } else {\n newData.push(row);\n setData(newData);\n setEditingKey('');\n }\n } catch (errInfo) {\n console.log('Validate Failed:', errInfo);\n }\n };\n\n const columns = [\n {\n title: 'name',\n dataIndex: 'name',\n width: '25%',\n editable: true,\n },\n {\n title: 'age',\n dataIndex: 'age',\n width: '15%',\n editable: true,\n },\n {\n title: 'address',\n dataIndex: 'address',\n width: '40%',\n editable: true,\n },\n {\n title: 'operation',\n dataIndex: 'operation',\n render: (_: any, record: DataType) => {\n const editable = isEditing(record);\n return editable ? (\n <span>\n <Typography.Link onClick={() => save(record.key)} style={{ marginInlineEnd: 8 }}>\n Save\n </Typography.Link>\n <Popconfirm title=\"Sure to cancel?\" onConfirm={cancel}>\n <a>Cancel</a>\n </Popconfirm>\n </span>\n ) : (\n <Typography.Link disabled={editingKey !== ''} onClick={() => edit(record)}>\n Edit\n </Typography.Link>\n );\n },\n },\n ];\n\n const mergedColumns: TableProps<DataType>['columns'] = columns.map((col) => {\n if (!col.editable) {\n return col;\n }\n return {\n ...col,\n onCell: (record: DataType) => ({\n record,\n inputType: col.dataIndex === 'age' ? 'number' : 'text',\n dataIndex: col.dataIndex,\n title: col.title,\n editing: isEditing(record),\n }),\n };\n });\n\n return (\n <Form form={form} component={false}>\n <Table<DataType>\n components={{\n body: { cell: EditableCell },\n }}\n bordered\n dataSource={data}\n columns={mergedColumns}\n rowClassName=\"editable-row\"\n pagination={{ onChange: cancel }}\n />\n </Form>\n );\n};\n\nexport default App;\n";},f23c9668:function(n,e,t){},f258084c:function(n,e,t){},f2649c9d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("5f8b319e");var o='import React from \'react\';\nimport { DownloadOutlined } from \'@ant-design/icons\';\nimport { Button, Tooltip } from \'antd\';\nimport type { GetProps } from \'antd\';\n\ntype ButtonGroupProps = GetProps<typeof Button.Group>;\n\nconst CustomGroup: React.FC<ButtonGroupProps> = (props) => (\n <Button.Group {...props}>\n <Button type="primary">Button 1</Button>\n <Button type="primary">Button 2</Button>\n <Tooltip title="Tooltip">\n <Button type="primary" icon={<DownloadOutlined />} disabled />\n </Tooltip>\n <Tooltip title="Tooltip">\n <Button type="primary" icon={<DownloadOutlined />} />\n </Tooltip>\n </Button.Group>\n);\n\nconst App: React.FC = () => (\n <>\n <CustomGroup size="small" />\n <br />\n <CustomGroup />\n <br />\n <CustomGroup size="large" />\n </>\n);\n\nexport default App;\n';},f2891a69:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("00cc3386");var o="import React from 'react';\nimport { Table } from 'antd';\nimport type { TableColumnsType } from 'antd';\n\ninterface DataType {\n key: React.Key;\n name: string;\n age: number;\n address: string;\n description: string;\n}\n\nconst columns: TableColumnsType<DataType> = [\n { title: 'Name', dataIndex: 'name', key: 'name' },\n { title: 'Age', dataIndex: 'age', key: 'age' },\n { title: 'Address', dataIndex: 'address', key: 'address' },\n {\n title: 'Action',\n dataIndex: '',\n key: 'x',\n render: () => <a>Delete</a>,\n },\n];\n\nconst data: DataType[] = [\n {\n key: 1,\n name: 'John Brown',\n age: 32,\n address: 'New York No. 1 Lake Park',\n description: 'My name is John Brown, I am 32 years old, living in New York No. 1 Lake Park.',\n },\n {\n key: 2,\n name: 'Jim Green',\n age: 42,\n address: 'London No. 1 Lake Park',\n description: 'My name is Jim Green, I am 42 years old, living in London No. 1 Lake Park.',\n },\n {\n key: 3,\n name: 'Not Expandable',\n age: 29,\n address: 'Jiangsu No. 1 Lake Park',\n description: 'This not expandable',\n },\n {\n key: 4,\n name: 'Joe Black',\n age: 32,\n address: 'Sydney No. 1 Lake Park',\n description: 'My name is Joe Black, I am 32 years old, living in Sydney No. 1 Lake Park.',\n },\n];\n\nconst App: React.FC = () => (\n <Table<DataType>\n columns={columns}\n expandable={{\n expandedRowRender: (record) => <p style={{ margin: 0 }}>{record.description}</p>,\n rowExpandable: (record) => record.name !== 'Not Expandable',\n }}\n dataSource={data}\n />\n);\n\nexport default App;\n";},f31d6c21:function(n,e,t){},f329f517:function(n,e,t){},f32ecf9e:function(n,e,t){},f32f2133:function(n,e,t){},f33322cc:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c0b352c7");var o="import React from 'react';\nimport { UserOutlined } from '@ant-design/icons';\nimport { InputNumber } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <InputNumber prefix=\"\uFFE5\" style={{ width: '100%' }} />\n <br />\n <br />\n <InputNumber addonBefore={<UserOutlined />} prefix=\"\uFFE5\" style={{ width: '100%' }} />\n <br />\n <br />\n <InputNumber prefix=\"\uFFE5\" disabled style={{ width: '100%' }} />\n <br />\n <br />\n <InputNumber suffix=\"RMB\" style={{ width: '100%' }} />\n </>\n);\n\nexport default App;\n";},f3cc9947:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f1b43603");var o="import React from 'react';\nimport { Flex, Input, Typography } from 'antd';\nimport { runes } from 'runes2';\n\nconst App: React.FC = () => (\n <Flex vertical gap={16}>\n <div>\n <Typography.Title level={5}>Exceed Max</Typography.Title>\n <Input\n count={{\n show: true,\n max: 10,\n }}\n defaultValue=\"Hello, antd!\"\n />\n </div>\n\n <div>\n <Typography.Title level={5}>Emoji count as length 1</Typography.Title>\n <Input\n count={{\n show: true,\n strategy: (txt) => runes(txt).length,\n }}\n defaultValue=\"\u{1F525}\u{1F525}\u{1F525}\"\n />\n </div>\n\n <div>\n <Typography.Title level={5}>Not exceed max</Typography.Title>\n <Input\n count={{\n show: true,\n max: 6,\n strategy: (txt) => runes(txt).length,\n exceedFormatter: (txt, { max }) => runes(txt).slice(0, max).join(''),\n }}\n defaultValue=\"\u{1F525} antd\"\n />\n </div>\n </Flex>\n);\n\nexport default App;\n";},f3cf9558:function(n,e,t){},f3e2098e:function(n,e,t){},f3ed0c03:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("1d69e8ab");var o="import React from 'react';\nimport { Image } from 'antd';\n\nconst src = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';\n\nconst App: React.FC = () => (\n <Image\n src={src}\n width=\"200px\"\n height=\"200px\"\n alt=\"test\"\n preview={{\n imageRender: (_, { image }) => <div>{JSON.stringify(image)}</div>,\n toolbarRender: (_, { image }) => <div>{JSON.stringify(image)}</div>,\n }}\n />\n);\n\nexport default App;\n";},f3f15b53:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("ec7caa41");var o="import React, { useState } from 'react';\nimport { Switch, Transfer } from 'antd';\nimport type { TransferProps } from 'antd';\n\ninterface RecordType {\n key: string;\n title: string;\n description: string;\n disabled: boolean;\n}\n\nconst mockData = Array.from({ length: 20 }).map<RecordType>((_, i) => ({\n key: i.toString(),\n title: `content${i + 1}`,\n description: `description of content${i + 1}`,\n disabled: i % 3 < 1,\n}));\n\nconst oriTargetKeys = mockData.filter((item) => Number(item.key) % 3 > 1).map((item) => item.key);\n\nconst App: React.FC = () => {\n const [targetKeys, setTargetKeys] = useState<React.Key[]>(oriTargetKeys);\n const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([]);\n const [disabled, setDisabled] = useState(false);\n\n const handleChange: TransferProps['onChange'] = (newTargetKeys, direction, moveKeys) => {\n setTargetKeys(newTargetKeys);\n\n console.log('targetKeys: ', newTargetKeys);\n console.log('direction: ', direction);\n console.log('moveKeys: ', moveKeys);\n };\n\n const handleSelectChange: TransferProps['onSelectChange'] = (\n sourceSelectedKeys,\n targetSelectedKeys,\n ) => {\n setSelectedKeys([...sourceSelectedKeys, ...targetSelectedKeys]);\n\n console.log('sourceSelectedKeys: ', sourceSelectedKeys);\n console.log('targetSelectedKeys: ', targetSelectedKeys);\n };\n\n const handleScroll: TransferProps['onScroll'] = (direction, e) => {\n console.log('direction:', direction);\n console.log('target:', e.target);\n };\n\n const handleDisable = (checked: boolean) => {\n setDisabled(checked);\n };\n\n return (\n <>\n <Transfer\n dataSource={mockData}\n titles={['Source', 'Target']}\n targetKeys={targetKeys}\n selectedKeys={selectedKeys}\n onChange={handleChange}\n onSelectChange={handleSelectChange}\n onScroll={handleScroll}\n render={(item) => item.title}\n disabled={disabled}\n oneWay\n style={{ marginBottom: 16 }}\n />\n <Switch\n unCheckedChildren=\"disabled\"\n checkedChildren=\"disabled\"\n checked={disabled}\n onChange={handleDisable}\n />\n </>\n );\n};\n\nexport default App;\n";},f4312251:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return h;}});var o=t("777fffbe"),a=t("f19d2b93"),r=o._(t("5b220c3d")),i=t("e22febe0"),l=o._(t("3ee4759b")),s=o._(t("b9d4f376")),c=t("a9d1a279"),d=t("3835a2b7"),u=o._(t("600aabe0")),p=o._(t("fc273388"));let m=(0,d.createStyles)(({token:n},e)=>({container:(0,d.css)`
|
|
position: relative;
|
|
`,colWrap:(0,d.css)`
|
|
border-right: 1px solid ${n.colorBorderSecondary};
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
padding: ${n.paddingMD}px;
|
|
overflow: hidden;
|
|
`,colWrapPaddingLess:(0,d.css)`
|
|
padding: 0;
|
|
`,listWrap:(0,d.css)`
|
|
display: flex;
|
|
flex-direction: column;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
`,listItem:(0,d.css)`
|
|
cursor: pointer;
|
|
padding: ${n.paddingSM}px;
|
|
transition: background-color ${n.motionDurationFast} ease;
|
|
&:hover {
|
|
background-color: ${n.controlItemBgHover};
|
|
}
|
|
&:not(:first-of-type) {
|
|
border-top: 1px solid ${n.colorBorderSecondary};
|
|
}
|
|
`,marker:(0,d.css)`
|
|
position: absolute;
|
|
border: ${2}px solid ${n.colorWarning};
|
|
box-sizing: border-box;
|
|
z-index: 999999;
|
|
box-shadow: 0 0 0 1px #fff;
|
|
pointer-events: none;
|
|
inset-inline-start: ${e[0]-2}px;
|
|
top: ${e[1]-2}px;
|
|
width: ${e[2]+4}px;
|
|
height: ${e[3]+4}px;
|
|
`,markerActive:(0,d.css)`
|
|
opacity: 1;
|
|
`,markerNotActive:(0,d.css)`
|
|
opacity: 0;
|
|
`,markerMotion:(0,d.css)`
|
|
transition:
|
|
opacity ${n.motionDurationSlow} ease,
|
|
all ${n.motionDurationSlow} ease;
|
|
`,markerNotMotion:(0,d.css)`
|
|
transition: opacity ${n.motionDurationSlow} ease;
|
|
`}));function f(n){return n.split(".");}function g(n){let{componentName:e,semanticName:t}=n,o=r.default.useMemo(()=>{let n=(0,s.default)({},f(t),"my-classname"),o=(0,s.default)({},f(t),{color:"red"});function a(n){return JSON.stringify(n,null,2).split("\n").map(n=>` ${n}`).join("\n").trim().replace(/"/g,"'").replace(/'([^']+)':/g,"$1:");}let r=`
|
|
<${e}
|
|
classNames={${a(n)}}
|
|
styles={${a(o)}}
|
|
/>`.trim();return p.default.highlight(r,p.default.languages.javascript,"jsx");},[e,t]);return(0,a.jsx)("div",{dangerouslySetInnerHTML:{__html:o}});}var h=n=>{let{semantics:e=[],children:t,height:o,padding:d,componentName:p="Component"}=n,{token:h}=c.theme.useToken(),b=r.default.useCallback(n=>`semantic-mark-${n}`.replace(/\./g,"-"),[]),y=r.default.useMemo(()=>{let n={};return e.forEach(e=>{let t=f(e.name);n=(0,s.default)(n,t,b(e.name));}),n;},[e]),v=r.default.useRef(null),C=r.default.useRef(null),[S,x]=r.default.useState(!1),[k,R]=r.default.useState(null),[T,w]=r.default.useState([0,0,0,0]),{styles:P}=m(T);r.default.useEffect(()=>{if(k){var n,e;let t=b(k),o=null===(n=v.current)||void 0===n?void 0:n.querySelector(`.${t}`),a=null===(e=v.current)||void 0===e?void 0:e.getBoundingClientRect(),r=null==o?void 0:o.getBoundingClientRect();w([((null==r?void 0:r.left)||0)-((null==a?void 0:a.left)||0),((null==r?void 0:r.top)||0)-((null==a?void 0:a.top)||0),(null==r?void 0:r.width)||0,(null==r?void 0:r.height)||0]),C.current=setTimeout(()=>{x(!0);},10);}else C.current=setTimeout(()=>{x(!1);},500);return()=>{C.current&&clearTimeout(C.current);};},[k]);let A=r.default.useMemo(()=>{if(!k)return y;let n=f(k);return(0,s.default)(y,n,(0,u.default)((0,l.default)(y,n),b("active")));},[y,k]),F=r.default.cloneElement(t,{classNames:A});return(0,a.jsxs)("div",{className:(0,u.default)(P.container),ref:v,children:[(0,a.jsxs)(c.Row,{style:{minHeight:o},children:[(0,a.jsx)(c.Col,{span:16,className:(0,u.default)(P.colWrap,!1===d&&P.colWrapPaddingLess),children:(0,a.jsx)(c.ConfigProvider,{theme:{token:{motion:!1}},children:F})}),(0,a.jsx)(c.Col,{span:8,children:(0,a.jsx)("ul",{className:(0,u.default)(P.listWrap),children:e.map(n=>(0,a.jsx)("li",{className:(0,u.default)(P.listItem),onMouseEnter:()=>R(n.name),onMouseLeave:()=>R(null),children:(0,a.jsxs)(c.Flex,{vertical:!0,gap:"small",children:[(0,a.jsxs)(c.Flex,{gap:"small",align:"center",justify:"space-between",children:[(0,a.jsxs)(c.Flex,{gap:"small",align:"center",children:[(0,a.jsx)(c.Typography.Title,{level:5,style:{margin:0},children:n.name}),n.version&&(0,a.jsx)(c.Tag,{color:"blue",children:n.version})]}),(0,a.jsx)(c.Popover,{content:(0,a.jsx)(c.Typography,{style:{fontSize:12,minWidth:300},children:(0,a.jsx)("pre",{dir:"ltr",children:(0,a.jsx)("code",{dir:"ltr",children:(0,a.jsx)(g,{componentName:p,semanticName:n.name})})})}),children:(0,a.jsx)(i.InfoCircleOutlined,{style:{cursor:"pointer",color:h.colorTextSecondary}})})]}),(0,a.jsx)(c.Typography.Paragraph,{style:{margin:0,fontSize:h.fontSizeSM},children:n.desc})]})},n.name))})})]}),(0,a.jsx)("div",{className:(0,u.default)(P.marker,k?P.markerActive:P.markerNotActive,S?P.markerMotion:P.markerNotMotion)})]});};},f48232d4:function(n,e,t){},f4909f2d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("dd5fdd97");var o="import React, { useState } from 'react';\nimport { TreeSelect } from 'antd';\n\nconst { SHOW_PARENT } = TreeSelect;\n\nconst treeData = [\n {\n title: 'Node1',\n value: '0-0',\n key: '0-0',\n children: [\n {\n title: 'Child Node1',\n value: '0-0-0',\n key: '0-0-0',\n },\n ],\n },\n {\n title: 'Node2',\n value: '0-1',\n key: '0-1',\n children: [\n {\n title: 'Child Node3',\n value: '0-1-0',\n key: '0-1-0',\n },\n {\n title: 'Child Node4',\n value: '0-1-1',\n key: '0-1-1',\n },\n {\n title: 'Child Node5',\n value: '0-1-2',\n key: '0-1-2',\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [value, setValue] = useState(['0-0-0']);\n\n const onChange = (newValue: string[]) => {\n console.log('onChange ', newValue);\n setValue(newValue);\n };\n\n const tProps = {\n treeData,\n value,\n onChange,\n treeCheckable: true,\n showCheckedStrategy: SHOW_PARENT,\n placeholder: 'Please select',\n style: {\n width: '100%',\n },\n };\n\n return <TreeSelect {...tProps} />;\n};\n\nexport default App;\n";},f4bc1c8e:function(n,e,t){},f5303cd7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("8b4b9f48");var o='import React from \'react\';\nimport { Alert, Flex, Spin, Switch } from \'antd\';\n\nconst App: React.FC = () => {\n const [loading, setLoading] = React.useState<boolean>(false);\n return (\n <Flex gap="middle" vertical>\n <Spin spinning={loading}>\n <Alert\n type="info"\n message="Alert message title"\n description="Further details about the context of this alert."\n />\n </Spin>\n <p>\n Loading state\uFF1A\n <Switch checked={loading} onChange={setLoading} />\n </p>\n </Flex>\n );\n};\n\nexport default App;\n';},f5345a08:function(n,e,t){},f56e0a70:function(n,e,t){},f592cc0c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("de1d4d29");var o='import React from \'react\';\nimport { Flex, Mentions } from \'antd\';\n\nconst App: React.FC = () => (\n <Flex vertical gap={12}>\n <Mentions placeholder="Outlined" />\n <Mentions placeholder="Filled" variant="filled" />\n <Mentions placeholder="Borderless" variant="borderless" />\n <Mentions placeholder="Underlined" variant="underlined" />\n </Flex>\n);\n\nexport default App;\n';},f5e82833:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fbcc4d5c");var o="import React from 'react';\nimport { DownOutlined } from '@ant-design/icons';\nimport { TreeSelect } from 'antd';\n\nconst MAX_COUNT = 3;\n\nconst treeData = [\n {\n title: 'Parent 1',\n value: 'parent1',\n children: [\n {\n title: 'Child 1-1',\n value: 'child1-1',\n },\n {\n title: 'Child 1-2',\n value: 'child1-2',\n },\n ],\n },\n {\n title: 'Parent 2',\n value: 'parent2',\n children: [\n {\n title: 'Child 2-1',\n value: 'child2-1',\n },\n {\n title: 'Child 2-2',\n value: 'child2-2',\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const [value, setValue] = React.useState<string[]>(['child1-1']);\n\n const onChange = (newValue: string[]) => {\n setValue(newValue);\n };\n\n const suffix = (\n <>\n <span>\n {value.length} / {MAX_COUNT}\n </span>\n <DownOutlined />\n </>\n );\n\n return (\n <TreeSelect\n treeData={treeData}\n value={value}\n onChange={onChange}\n multiple\n maxCount={MAX_COUNT}\n style={{ width: '100%' }}\n suffixIcon={suffix}\n treeCheckable\n placeholder=\"Please select\"\n showCheckedStrategy={TreeSelect.SHOW_CHILD}\n />\n );\n};\n\nexport default App;\n";},f619d2c3:function(n,e,t){},f6213a72:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b9d76efc");var o="import React, { useState } from 'react';\nimport type { GetProp, TreeSelectProps } from 'antd';\nimport { TreeSelect } from 'antd';\n\ntype DefaultOptionType = GetProp<TreeSelectProps, 'treeData'>[number];\n\nconst App: React.FC = () => {\n const [value, setValue] = useState<string>();\n const [treeData, setTreeData] = useState<Omit<DefaultOptionType, 'label'>[]>([\n { id: 1, pId: 0, value: '1', title: 'Expand to load' },\n { id: 2, pId: 0, value: '2', title: 'Expand to load' },\n { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },\n ]);\n\n const genTreeNode = (parentId: number, isLeaf = false) => {\n const random = Math.random().toString(36).substring(2, 6);\n return {\n id: random,\n pId: parentId,\n value: random,\n title: isLeaf ? 'Tree Node' : 'Expand to load',\n isLeaf,\n };\n };\n\n const onLoadData: TreeSelectProps['loadData'] = ({ id }) =>\n new Promise((resolve) => {\n setTimeout(() => {\n setTreeData(\n treeData.concat([genTreeNode(id, false), genTreeNode(id, true), genTreeNode(id, true)]),\n );\n resolve(undefined);\n }, 300);\n });\n\n const onChange = (newValue: string) => {\n console.log(newValue);\n setValue(newValue);\n };\n\n return (\n <TreeSelect\n treeDataSimpleMode\n style={{ width: '100%' }}\n value={value}\n styles={{\n popup: { root: { maxHeight: 400, overflow: 'auto' } },\n }}\n placeholder=\"Please select\"\n onChange={onChange}\n loadData={onLoadData}\n treeData={treeData}\n />\n );\n};\n\nexport default App;\n";},f627265c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c788d9bb");var o="import React, { useState } from 'react';\nimport type { CarouselProps, RadioChangeEvent } from 'antd';\nimport { Carousel, Radio } from 'antd';\n\ntype DotPosition = CarouselProps['dotPosition'];\n\nconst contentStyle: React.CSSProperties = {\n height: '160px',\n color: '#fff',\n lineHeight: '160px',\n textAlign: 'center',\n background: '#364d79',\n};\n\nconst App: React.FC = () => {\n const [dotPosition, setDotPosition] = useState<DotPosition>('top');\n\n const handlePositionChange = ({ target: { value } }: RadioChangeEvent) => {\n setDotPosition(value);\n };\n\n return (\n <>\n <Radio.Group onChange={handlePositionChange} value={dotPosition} style={{ marginBottom: 8 }}>\n <Radio.Button value=\"top\">Top</Radio.Button>\n <Radio.Button value=\"bottom\">Bottom</Radio.Button>\n <Radio.Button value=\"left\">Left</Radio.Button>\n <Radio.Button value=\"right\">Right</Radio.Button>\n </Radio.Group>\n <Carousel dotPosition={dotPosition}>\n <div>\n <h3 style={contentStyle}>1</h3>\n </div>\n <div>\n <h3 style={contentStyle}>2</h3>\n </div>\n <div>\n <h3 style={contentStyle}>3</h3>\n </div>\n <div>\n <h3 style={contentStyle}>4</h3>\n </div>\n </Carousel>\n </>\n );\n};\n\nexport default App;\n";},f65f5e1a:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0ca9c2b7");var o="import React from 'react';\nimport { ConfigProvider, Space, Switch } from 'antd';\n\nconst App: React.FC = () => (\n <ConfigProvider\n theme={{\n components: {\n Switch: {\n trackHeight: 14,\n trackMinWidth: 32,\n // opacityLoading: 0.1,\n colorPrimary: 'rgb(25, 118, 210, 0.5)',\n trackPadding: -3,\n handleSize: 20,\n handleBg: 'rgb(25, 118, 210)',\n handleShadow:\n 'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',\n // innerMinMargin: 4,\n // innerMaxMargin: 8,\n },\n },\n }}\n >\n <Space>\n <Switch defaultChecked />\n </Space>\n </ConfigProvider>\n);\n\nexport default App;\n";},f66e75ae:function(n,e,t){},f67cbf74:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("e174f9c2");var o="import React, { useState } from 'react';\nimport { Steps } from 'antd';\n\nconst App: React.FC = () => {\n const [current, setCurrent] = useState(0);\n\n const onChange = (value: number) => {\n console.log('onChange:', value);\n setCurrent(value);\n };\n\n return (\n <>\n <Steps\n type=\"navigation\"\n size=\"small\"\n current={current}\n onChange={onChange}\n className=\"site-navigation-steps\"\n items={[\n {\n title: 'Step 1',\n subTitle: '00:00:05',\n status: 'finish',\n description: 'This is a description.',\n },\n {\n title: 'Step 2',\n subTitle: '00:01:02',\n status: 'process',\n description: 'This is a description.',\n },\n {\n title: 'Step 3',\n subTitle: 'waiting for longlong time',\n status: 'wait',\n description: 'This is a description.',\n },\n ]}\n />\n <Steps\n type=\"navigation\"\n current={current}\n onChange={onChange}\n className=\"site-navigation-steps\"\n items={[\n {\n status: 'finish',\n title: 'Step 1',\n },\n {\n status: 'process',\n title: 'Step 2',\n },\n {\n status: 'wait',\n title: 'Step 3',\n },\n {\n status: 'wait',\n title: 'Step 4',\n },\n ]}\n />\n <Steps\n type=\"navigation\"\n size=\"small\"\n current={current}\n onChange={onChange}\n className=\"site-navigation-steps\"\n items={[\n {\n status: 'finish',\n title: 'finish 1',\n },\n {\n status: 'finish',\n title: 'finish 2',\n },\n {\n status: 'process',\n title: 'current process',\n },\n {\n status: 'wait',\n title: 'wait',\n disabled: true,\n },\n ]}\n />\n </>\n );\n};\n\nexport default App;\n";},f6ab8dd4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("c6dd677d");var o="import React, { useState } from 'react';\nimport { ExclamationCircleOutlined } from '@ant-design/icons';\nimport { Button, Modal, Space } from 'antd';\n\nconst LocalizedModal = () => {\n const [open, setOpen] = useState(false);\n\n const showModal = () => {\n setOpen(true);\n };\n\n const hideModal = () => {\n setOpen(false);\n };\n\n return (\n <>\n <Button type=\"primary\" onClick={showModal}>\n Modal\n </Button>\n <Modal\n title=\"Modal\"\n open={open}\n onOk={hideModal}\n onCancel={hideModal}\n okText=\"\u786E\u8BA4\"\n cancelText=\"\u53D6\u6D88\"\n >\n <p>Bla bla ...</p>\n <p>Bla bla ...</p>\n <p>Bla bla ...</p>\n </Modal>\n </>\n );\n};\n\nconst App: React.FC = () => {\n const [modal, contextHolder] = Modal.useModal();\n\n const confirm = () => {\n modal.confirm({\n title: 'Confirm',\n icon: <ExclamationCircleOutlined />,\n content: 'Bla bla ...',\n okText: '\u786E\u8BA4',\n cancelText: '\u53D6\u6D88',\n });\n };\n\n return (\n <>\n <Space>\n <LocalizedModal />\n <Button onClick={confirm}>Confirm</Button>\n </Space>\n {contextHolder}\n </>\n );\n};\n\nexport default App;\n";},f6b116e2:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("58c0a69d");var o="import React from 'react';\nimport { createFromIconfontCN } from '@ant-design/icons';\nimport { Space } from 'antd';\n\nconst IconFont = createFromIconfontCN({\n scriptUrl: '//at.alicdn.com/t/font_8d5l8fzk5b87iudi.js',\n});\n\nconst App: React.FC = () => (\n <Space>\n <IconFont type=\"icon-tuichu\" />\n <IconFont type=\"icon-facebook\" style={{ color: '#1877F2' }} />\n <IconFont type=\"icon-twitter\" />\n </Space>\n);\n\nexport default App;\n";},f71a8873:function(n,e,t){},f749f928:function(n,e,t){},f7560db3:function(n,e,t){},f7ed2e1f:function(n,e,t){},f86bb555:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("eee1b5d6");var o="import React from 'react';\nimport type { CascaderProps } from 'antd';\nimport { Cascader } from 'antd';\n\nconst { SHOW_CHILD } = Cascader;\n\ninterface Option {\n value: string | number;\n label: string;\n children?: Option[];\n}\nconst options: Option[] = [\n {\n label: 'Light',\n value: 'light',\n children: Array.from({ length: 20 }).map((_, index) => ({\n label: `Number ${index}`,\n value: index,\n })),\n },\n {\n label: 'Bamboo',\n value: 'bamboo',\n children: [\n {\n label: 'Little',\n value: 'little',\n children: [\n {\n label: 'Toy Fish',\n value: 'fish',\n },\n {\n label: 'Toy Cards',\n value: 'cards',\n },\n {\n label: 'Toy Bird',\n value: 'bird',\n },\n ],\n },\n ],\n },\n];\n\nconst App: React.FC = () => {\n const onChange: CascaderProps<Option, 'value', true>['onChange'] = (value) => {\n console.log(value);\n };\n return (\n <>\n <Cascader\n style={{ width: '100%' }}\n options={options}\n onChange={onChange}\n multiple\n maxTagCount=\"responsive\"\n showCheckedStrategy={SHOW_CHILD}\n defaultValue={[\n ['bamboo', 'little', 'fish'],\n ['bamboo', 'little', 'cards'],\n ['bamboo', 'little', 'bird'],\n ]}\n />\n <br />\n <br />\n <Cascader\n style={{ width: '100%' }}\n options={options}\n onChange={onChange}\n multiple\n maxTagCount=\"responsive\"\n defaultValue={[['bamboo']]}\n />\n </>\n );\n};\n\nexport default App;\n";},f87193e4:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("bdbb2b00");var o="import React from 'react';\nimport { Breadcrumb } from 'antd';\n\nconst App: React.FC = () => (\n <Breadcrumb\n items={[\n {\n title: 'Home',\n },\n {\n title: <a href=\"\">Application Center</a>,\n },\n {\n title: <a href=\"\">Application List</a>,\n },\n {\n title: 'An Application',\n },\n ]}\n />\n);\n\nexport default App;\n";},f885d128:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d27288c5");var o="import React from 'react';\nimport { Button, Space } from 'antd';\n\nconst App: React.FC = () => (\n <Space size={[8, 16]} wrap>\n {Array.from({ length: 20 }).map((_, index) => (\n // eslint-disable-next-line react/no-array-index-key\n <Button key={index}>Button</Button>\n ))}\n </Space>\n);\n\nexport default App;\n";},f886867c:function(n,e,t){},f8a36b34:function(n,e,t){},f8f50271:function(n,e,t){},f8f79ec9:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("23fbea8b");var o="import React from 'react';\nimport { Card, List } from 'antd';\n\nconst data = [\n {\n title: 'Title 1',\n },\n {\n title: 'Title 2',\n },\n {\n title: 'Title 3',\n },\n {\n title: 'Title 4',\n },\n];\n\nconst App: React.FC = () => (\n <List\n grid={{ gutter: 16, column: 4 }}\n dataSource={data}\n renderItem={(item) => (\n <List.Item>\n <Card title={item.title}>Card content</Card>\n </List.Item>\n )}\n />\n);\n\nexport default App;\n";},f8fa6162:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("88746497");var o="import React, { useEffect, useState } from 'react';\nimport { UploadOutlined } from '@ant-design/icons';\nimport type { UploadFile, UploadProps } from 'antd';\nimport { App, Button, Form, Upload } from 'antd';\n\ninterface OSSDataType {\n dir: string;\n expire: string;\n host: string;\n accessId: string;\n policy: string;\n signature: string;\n}\n\ninterface AliyunOSSUploadProps {\n value?: UploadFile[];\n onChange?: (fileList: UploadFile[]) => void;\n}\n\n// Mock get OSS api\n// https://help.aliyun.com/document_detail/31988.html\nconst mockOSSData = () => {\n const mockData = {\n dir: 'user-dir/',\n expire: '1577811661',\n host: 'https://660d2bd96ddfa2943b33731c.mockapi.io/api/upload',\n accessId: 'c2hhb2RhaG9uZw==',\n policy: 'eGl4aWhhaGFrdWt1ZGFkYQ==',\n signature: 'ZGFob25nc2hhbw==',\n };\n return Promise.resolve(mockData);\n};\n\nconst AliyunOSSUpload: React.FC<Readonly<AliyunOSSUploadProps>> = ({ value, onChange }) => {\n const { message } = App.useApp();\n\n const [OSSData, setOSSData] = useState<OSSDataType>();\n\n const init = async () => {\n try {\n const result = await mockOSSData();\n setOSSData(result);\n } catch (err) {\n if (err instanceof Error) {\n message.error(err.message);\n }\n }\n };\n\n useEffect(() => {\n init();\n }, []);\n\n const handleChange: UploadProps['onChange'] = ({ fileList }) => {\n console.log('Aliyun OSS:', fileList);\n onChange?.([...fileList]);\n };\n\n const onRemove = (file: UploadFile) => {\n const files = (value || []).filter((v) => v.url !== file.url);\n onChange?.(files);\n };\n\n const getExtraData: UploadProps['data'] = (file) => ({\n key: file.url,\n OSSAccessKeyId: OSSData?.accessId,\n policy: OSSData?.policy,\n Signature: OSSData?.signature,\n });\n\n const beforeUpload: UploadProps['beforeUpload'] = async (file) => {\n if (!OSSData) {\n return false;\n }\n\n const expire = Number(OSSData.expire) * 1000;\n\n if (expire < Date.now()) {\n await init();\n }\n\n const suffix = file.name.slice(file.name.lastIndexOf('.'));\n const filename = Date.now() + suffix;\n // @ts-ignore\n file.url = OSSData.dir + filename;\n\n return file;\n };\n\n const uploadProps: UploadProps = {\n name: 'file',\n fileList: value,\n action: OSSData?.host,\n onChange: handleChange,\n onRemove,\n data: getExtraData,\n beforeUpload,\n };\n\n return (\n <Upload {...uploadProps}>\n <Button icon={<UploadOutlined />}>Click to Upload</Button>\n </Upload>\n );\n};\n\nconst Demo: React.FC = () => (\n <Form labelCol={{ span: 4 }}>\n <Form.Item label=\"Photos\" name=\"photos\">\n <AliyunOSSUpload />\n </Form.Item>\n </Form>\n);\n\nexport default Demo;\n";},f90dca02:function(n,e,t){},f980fb56:function(n,e,t){},f99d8c77:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return i;}});var o=t("f19d2b93");t("f258084c");var a=t("a9d1a279");let r=[{key:"1",label:(0,o.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://www.alipay.com/",children:"General"})},{key:"2",label:(0,o.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://www.taobao.com/",children:"Layout"})},{key:"3",label:(0,o.jsx)("a",{target:"_blank",rel:"noopener noreferrer",href:"http://www.tmall.com/",children:"Navigation"})}];var i=()=>(0,o.jsx)(a.Breadcrumb,{items:[{title:"Ant Design"},{title:(0,o.jsx)("a",{href:"",children:"Component"})},{title:(0,o.jsx)("a",{href:"",children:"General"}),menu:{items:r}},{title:"Button"}]});},f9c8a4b0:function(n,e,t){},f9e1ed1c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7f7b9068");var o='import React from \'react\';\nimport { DownloadOutlined } from \'@ant-design/icons\';\nimport { Button, Form } from \'antd\';\n\nconst App: React.FC = () => (\n <Form>\n <Form.Item>\n <Button size="large" shape="round" block style={{ marginBottom: 12 }}>\n Submit\n </Button>\n <Button size="large" shape="round" icon={<DownloadOutlined />} />\n </Form.Item>\n </Form>\n);\n\nexport default App;\n';},fa051789:function(n,e,t){},fa21d5b3:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("fc7ac7c0");var o="import React, { useState } from 'react';\nimport { ColorPicker } from 'antd';\nimport type { ColorPickerProps, GetProp } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: PureRenderColorPicker } = ColorPicker;\n\ntype Color = GetProp<ColorPickerProps, 'value'>;\n\nconst Demo: React.FC = () => {\n const [color, setColor] = useState<Color>('#1677ff');\n return (\n <div style={{ paddingInlineStart: 100 }}>\n <PureRenderColorPicker value={color} onChange={setColor} />\n </div>\n );\n};\n\nexport default Demo;\n";},fa26253e:function(n,e,t){},fa6f80f4:function(n,e,t){},faa01364:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("9c3bf91d");var o="import React from 'react';\nimport { Button, Popconfirm } from 'antd';\n\nconst App: React.FC = () => {\n const confirm = () =>\n new Promise((resolve) => {\n setTimeout(() => resolve(null), 3000);\n });\n\n return (\n <Popconfirm\n title=\"Title\"\n description=\"Open Popconfirm with Promise\"\n onConfirm={confirm}\n onOpenChange={() => console.log('open change')}\n >\n <Button type=\"primary\">Open Popconfirm with Promise</Button>\n </Popconfirm>\n );\n};\n\nexport default App;\n";},fab0dc7b:function(n,e,t){},fab71e78:function(n,e,t){},fad89829:function(n,e,t){},faeca3c4:function(n,e,t){},fb0c74b7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("570022aa");var o="import React from 'react';\nimport { UserOutlined } from '@ant-design/icons';\nimport { Avatar, Flex, Segmented } from 'antd';\n\nconst App: React.FC = () => (\n <Flex gap=\"small\" align=\"flex-start\" vertical>\n <Segmented\n options={[\n {\n label: (\n <div style={{ padding: 4 }}>\n <Avatar src=\"https://api.dicebear.com/7.x/miniavs/svg?seed=8\" />\n <div>User 1</div>\n </div>\n ),\n value: 'user1',\n },\n {\n label: (\n <div style={{ padding: 4 }}>\n <Avatar style={{ backgroundColor: '#f56a00' }}>K</Avatar>\n <div>User 2</div>\n </div>\n ),\n value: 'user2',\n },\n {\n label: (\n <div style={{ padding: 4 }}>\n <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />\n <div>User 3</div>\n </div>\n ),\n value: 'user3',\n },\n ]}\n />\n <Segmented\n options={[\n {\n label: (\n <div style={{ padding: 4 }}>\n <div>Spring</div>\n <div>Jan-Mar</div>\n </div>\n ),\n value: 'spring',\n },\n {\n label: (\n <div style={{ padding: 4 }}>\n <div>Summer</div>\n <div>Apr-Jun</div>\n </div>\n ),\n value: 'summer',\n },\n {\n label: (\n <div style={{ padding: 4 }}>\n <div>Autumn</div>\n <div>Jul-Sept</div>\n </div>\n ),\n value: 'autumn',\n },\n {\n label: (\n <div style={{ padding: 4 }}>\n <div>Winter</div>\n <div>Oct-Dec</div>\n </div>\n ),\n value: 'winter',\n },\n ]}\n />\n </Flex>\n);\n\nexport default App;\n";},fb163429:function(n,e,t){},fb2a5f62:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2721d950");var o="import React, { useState } from 'react';\nimport {\n MenuFoldOutlined,\n MenuUnfoldOutlined,\n UploadOutlined,\n UserOutlined,\n VideoCameraOutlined,\n} from '@ant-design/icons';\nimport { Button, Layout, Menu, theme } from 'antd';\n\nconst { Header, Sider, Content } = Layout;\n\nconst App: React.FC = () => {\n const [collapsed, setCollapsed] = useState(false);\n const {\n token: { colorBgContainer, borderRadiusLG },\n } = theme.useToken();\n\n return (\n <Layout>\n <Sider trigger={null} collapsible collapsed={collapsed}>\n <div className=\"demo-logo-vertical\" />\n <Menu\n theme=\"dark\"\n mode=\"inline\"\n defaultSelectedKeys={['1']}\n items={[\n {\n key: '1',\n icon: <UserOutlined />,\n label: 'nav 1',\n },\n {\n key: '2',\n icon: <VideoCameraOutlined />,\n label: 'nav 2',\n },\n {\n key: '3',\n icon: <UploadOutlined />,\n label: 'nav 3',\n },\n ]}\n />\n </Sider>\n <Layout>\n <Header style={{ padding: 0, background: colorBgContainer }}>\n <Button\n type=\"text\"\n icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}\n onClick={() => setCollapsed(!collapsed)}\n style={{\n fontSize: '16px',\n width: 64,\n height: 64,\n }}\n />\n </Header>\n <Content\n style={{\n margin: '24px 16px',\n padding: 24,\n minHeight: 280,\n background: colorBgContainer,\n borderRadius: borderRadiusLG,\n }}\n >\n Content\n </Content>\n </Layout>\n </Layout>\n );\n};\n\nexport default App;\n";},fb4d0940:function(n,e,t){},fb58139b:function(n,e,t){},fb674cd6:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f09519a4");var o="import React from 'react';\nimport { QuestionCircleOutlined } from '@ant-design/icons';\nimport { FloatButton } from 'antd';\n\nconst App: React.FC = () => (\n <>\n <FloatButton shape=\"circle\" style={{ insetInlineEnd: 24 + 70 + 70 }} badge={{ dot: true }} />\n <FloatButton.Group shape=\"circle\" style={{ insetInlineEnd: 24 + 70 }}>\n <FloatButton\n href=\"https://ant.design/index-cn\"\n tooltip={<div>custom badge color</div>}\n badge={{ count: 5, color: 'blue' }}\n />\n <FloatButton badge={{ count: 5 }} />\n </FloatButton.Group>\n <FloatButton.Group shape=\"circle\">\n <FloatButton badge={{ count: 12 }} icon={<QuestionCircleOutlined />} />\n <FloatButton badge={{ count: 123, overflowCount: 999 }} />\n <FloatButton.BackTop visibilityHeight={0} />\n </FloatButton.Group>\n </>\n);\n\nexport default App;\n";},fbcaa4e8:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("b50a2fbc");var o='import React from \'react\';\nimport { SmileOutlined } from \'@ant-design/icons\';\nimport { Alert } from \'antd\';\n\nconst icon = <SmileOutlined />;\n\nconst App: React.FC = () => (\n <>\n <Alert icon={icon} message="showIcon = false" type="success" />\n <br />\n <Alert icon={icon} message="Success Tips" type="success" showIcon />\n <br />\n <Alert icon={icon} message="Informational Notes" type="info" showIcon />\n <br />\n <Alert icon={icon} message="Warning" type="warning" showIcon />\n <br />\n <Alert icon={icon} message="Error" type="error" showIcon />\n <br />\n <Alert\n icon={icon}\n message="Success Tips"\n description="Detailed description and advice about successful copywriting."\n type="success"\n showIcon\n />\n <br />\n <Alert\n icon={icon}\n message="Informational Notes"\n description="Additional description and information about copywriting."\n type="info"\n showIcon\n />\n <br />\n <Alert\n icon={icon}\n message="Warning"\n description="This is a warning notice about copywriting."\n type="warning"\n showIcon\n />\n <br />\n <Alert\n icon={icon}\n message="Error"\n description="This is an error message about copywriting."\n type="error"\n showIcon\n />\n </>\n);\n\nexport default App;\n';},fbcc4d5c:function(n,e,t){},fbf17e09:function(n,e,t){},fbf662e6:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("22912bb4");var o="/* eslint-disable react/no-array-index-key */\nimport React from 'react';\nimport { Flex, Radio } from 'antd';\n\nconst baseStyle: React.CSSProperties = {\n width: '25%',\n height: 54,\n};\n\nconst App: React.FC = () => {\n const [value, setValue] = React.useState<string>('horizontal');\n return (\n <Flex gap=\"middle\" vertical>\n <Radio.Group value={value} onChange={(e) => setValue(e.target.value)}>\n <Radio value=\"horizontal\">horizontal</Radio>\n <Radio value=\"vertical\">vertical</Radio>\n </Radio.Group>\n <Flex vertical={value === 'vertical'}>\n {Array.from({ length: 4 }).map((_, i) => (\n <div key={i} style={{ ...baseStyle, backgroundColor: i % 2 ? '#1677ff' : '#1677ffbf' }} />\n ))}\n </Flex>\n </Flex>\n );\n};\n\nexport default App;\n";},fc27aaa7:function(n,e,t){},fc3cda34:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("110ee3ec");var o="import React, { useState } from 'react';\nimport { Segmented } from 'antd';\n\nconst Demo: React.FC = () => {\n const [foo, setFoo] = useState<string | number>('AND');\n return (\n <>\n <Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={setFoo} />\n \n <Segmented value={foo} options={['AND', 'OR', 'NOT']} onChange={setFoo} />\n </>\n );\n};\n\nexport default Demo;\n";},fc7ac7c0:function(n,e,t){},fc885f45:function(n,e,t){},fcc36253:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("6511c362");var o="import React, { useState } from 'react';\nimport { TreeSelect } from 'antd';\nimport type { TreeSelectProps } from 'antd';\n\nconst treeData = [\n {\n value: 'parent 1',\n title: 'parent 1',\n children: [\n {\n value: 'parent 1-0',\n title: 'parent 1-0',\n children: [\n {\n value: 'leaf1',\n title: 'leaf1',\n },\n {\n value: 'leaf2',\n title: 'leaf2',\n },\n {\n value: 'leaf3',\n title: 'leaf3',\n },\n {\n value: 'leaf4',\n title: 'leaf4',\n },\n {\n value: 'leaf5',\n title: 'leaf5',\n },\n {\n value: 'leaf6',\n title: 'leaf6',\n },\n ],\n },\n {\n value: 'parent 1-1',\n title: 'parent 1-1',\n children: [\n {\n value: 'leaf11',\n title: <b style={{ color: '#08c' }}>leaf11</b>,\n },\n ],\n },\n ],\n },\n];\nconst App: React.FC = () => {\n const [value, setValue] = useState<string>();\n\n const onChange = (newValue: string) => {\n setValue(newValue);\n };\n\n const onPopupScroll: TreeSelectProps['onPopupScroll'] = (e) => {\n console.log('onPopupScroll', e);\n };\n\n return (\n <TreeSelect\n showSearch\n style={{ width: '100%' }}\n value={value}\n styles={{\n popup: { root: { maxHeight: 400, overflow: 'auto' } },\n }}\n placeholder=\"Please select\"\n allowClear\n treeDefaultExpandAll\n onChange={onChange}\n treeData={treeData}\n onPopupScroll={onPopupScroll}\n />\n );\n};\n\nexport default App;\n";},fcd5e58c:function(n,e,t){},fd2a6204:function(n,e,t){},fd34e5b5:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("4589b50a");var o='import React from \'react\';\nimport { Button, Space } from \'antd\';\n\nconst App: React.FC = () => (\n <div className="space-align-container">\n <div className="space-align-block">\n <Space align="center">\n center\n <Button type="primary">Primary</Button>\n <span className="mock-block">Block</span>\n </Space>\n </div>\n <div className="space-align-block">\n <Space align="start">\n start\n <Button type="primary">Primary</Button>\n <span className="mock-block">Block</span>\n </Space>\n </div>\n <div className="space-align-block">\n <Space align="end">\n end\n <Button type="primary">Primary</Button>\n <span className="mock-block">Block</span>\n </Space>\n </div>\n <div className="space-align-block">\n <Space align="baseline">\n baseline\n <Button type="primary">Primary</Button>\n <span className="mock-block">Block</span>\n </Space>\n </div>\n </div>\n);\n\nexport default App;\n';},fd424958:function(n,e,t){},fd61fa80:function(n,e,t){},fd75a8bb:function(n,e,t){},fd8cffb7:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("219b50b0");var o="import React from 'react';\nimport { Button, Flex, Form, Input, Select } from 'antd';\n\nconst App = () => {\n const [form] = Form.useForm();\n\n return (\n <Form\n form={form}\n scrollToFirstError={{ behavior: 'instant', block: 'end', focus: true }}\n style={{ paddingBlock: 32 }}\n labelCol={{ span: 6 }}\n wrapperCol={{ span: 14 }}\n >\n <Form.Item wrapperCol={{ offset: 6 }}>\n <Button onClick={() => form.scrollToField('bio')}>Scroll to Bio</Button>\n </Form.Item>\n\n <Form.Item name=\"username\" label=\"UserName\" rules={[{ required: true }]}>\n <Input />\n </Form.Item>\n\n <Form.Item label=\"Occupation\" name=\"occupation\">\n <Select\n options={[\n { label: 'Designer', value: 'designer' },\n { label: 'Developer', value: 'developer' },\n { label: 'Product Manager', value: 'product-manager' },\n ]}\n />\n </Form.Item>\n\n <Form.Item name=\"motto\" label=\"Motto\">\n <Input.TextArea rows={4} />\n </Form.Item>\n\n <Form.Item name=\"bio\" label=\"Bio\" rules={[{ required: true }]}>\n <Input.TextArea rows={6} />\n </Form.Item>\n\n <Form.Item wrapperCol={{ offset: 6 }}>\n <Flex gap=\"small\">\n <Button type=\"primary\" htmlType=\"submit\">\n Submit\n </Button>\n <Button danger onClick={() => form.resetFields()}>\n Reset\n </Button>\n </Flex>\n </Form.Item>\n </Form>\n );\n};\n\nexport default App;\n";},fd8ffb05:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("749640d5");var o="import React, { useState } from 'react';\nimport { CloseSquareFilled } from '@ant-design/icons';\nimport { Mentions } from 'antd';\n\nconst App: React.FC = () => {\n const [value, setValue] = useState('hello world');\n return (\n <>\n <Mentions value={value} onChange={setValue} allowClear />\n <br />\n <br />\n <Mentions\n value={value}\n onChange={setValue}\n allowClear={{ clearIcon: <CloseSquareFilled /> }}\n />\n <br />\n <br />\n <Mentions value={value} onChange={setValue} allowClear rows={3} />\n </>\n );\n};\n\nexport default App;\n";},fd99bc6e:function(n,e,t){},fd9b3e6b:function(n,e,t){},fdb7d440:function(n,e,t){},fdd24265:function(n,e,t){},fddec79e:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("d30d944b");var o="import React from 'react';\nimport { Skeleton } from 'antd';\n\nconst App: React.FC = () => <Skeleton />;\n\nexport default App;\n";},fde93017:function(n,e,t){},fdeb5381:function(n,e,t){},fdf23c85:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("7f46b144");var o="import React from 'react';\nimport { ConfigProvider, Select, Space } from 'antd';\nimport type { SelectProps } from 'antd';\n\nconst options: SelectProps['options'] = [];\n\nfor (let i = 10; i < 36; i++) {\n options.push({\n label: i.toString(36) + i,\n value: i.toString(36) + i,\n });\n}\n\nconst App: React.FC = () => (\n <Space direction=\"vertical\">\n <ConfigProvider\n theme={{\n components: {\n Select: {\n multipleItemBorderColor: 'rgba(0,0,0,0.06)',\n multipleItemBorderColorDisabled: 'rgba(0,0,0,0.06)',\n optionSelectedColor: '#1677ff',\n hoverBorderColor: 'red',\n activeBorderColor: 'green',\n activeOutlineColor: 'pink',\n },\n },\n }}\n >\n <Space style={{ width: '100%' }} direction=\"vertical\">\n <Select\n mode=\"multiple\"\n allowClear\n style={{ width: '100%' }}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n options={options}\n />\n <Select\n mode=\"multiple\"\n disabled\n style={{ width: '100%' }}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n options={options}\n />\n </Space>\n </ConfigProvider>\n <ConfigProvider\n theme={{\n token: {\n controlHeightSM: 28,\n },\n }}\n >\n <Space style={{ width: '100%' }} direction=\"vertical\">\n <Select\n mode=\"multiple\"\n allowClear\n size=\"small\"\n style={{ width: '100%' }}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n options={options}\n />\n <Select\n mode=\"multiple\"\n allowClear\n style={{ width: '100%' }}\n placeholder=\"Please select\"\n defaultValue={['a10', 'c12']}\n options={options}\n />\n </Space>\n </ConfigProvider>\n <ConfigProvider\n theme={{\n components: {\n Select: {\n paddingXXS: 0,\n controlHeight: 28,\n },\n },\n }}\n >\n <Space style={{ width: '100%' }} direction=\"vertical\">\n <Select style={{ width: '100%' }} defaultValue=\"a10\" options={options} />\n <Select\n mode=\"multiple\"\n style={{ width: '100%' }}\n defaultValue={['a10', 'c12']}\n options={options}\n />\n </Space>\n </ConfigProvider>\n </Space>\n);\n\nexport default App;\n";},fe4917e6:function(n,e,t){},fe4d212f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("f19ccb9a");var o="import React, { useEffect, useRef, useState } from 'react';\nimport { PlusOutlined } from '@ant-design/icons';\nimport type { InputRef } from 'antd';\nimport { Flex, Input, Tag, theme, Tooltip } from 'antd';\n\nconst tagInputStyle: React.CSSProperties = {\n width: 64,\n height: 22,\n marginInlineEnd: 8,\n verticalAlign: 'top',\n};\n\nconst App: React.FC = () => {\n const { token } = theme.useToken();\n const [tags, setTags] = useState<string[]>(['Unremovable', 'Tag 2', 'Tag 3']);\n const [inputVisible, setInputVisible] = useState(false);\n const [inputValue, setInputValue] = useState('');\n const [editInputIndex, setEditInputIndex] = useState(-1);\n const [editInputValue, setEditInputValue] = useState('');\n const inputRef = useRef<InputRef>(null);\n const editInputRef = useRef<InputRef>(null);\n\n useEffect(() => {\n if (inputVisible) {\n inputRef.current?.focus();\n }\n }, [inputVisible]);\n\n useEffect(() => {\n editInputRef.current?.focus();\n }, [editInputValue]);\n\n const handleClose = (removedTag: string) => {\n const newTags = tags.filter((tag) => tag !== removedTag);\n console.log(newTags);\n setTags(newTags);\n };\n\n const showInput = () => {\n setInputVisible(true);\n };\n\n const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setInputValue(e.target.value);\n };\n\n const handleInputConfirm = () => {\n if (inputValue && !tags.includes(inputValue)) {\n setTags([...tags, inputValue]);\n }\n setInputVisible(false);\n setInputValue('');\n };\n\n const handleEditInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n setEditInputValue(e.target.value);\n };\n\n const handleEditInputConfirm = () => {\n const newTags = [...tags];\n newTags[editInputIndex] = editInputValue;\n setTags(newTags);\n setEditInputIndex(-1);\n setEditInputValue('');\n };\n\n const tagPlusStyle: React.CSSProperties = {\n height: 22,\n background: token.colorBgContainer,\n borderStyle: 'dashed',\n };\n\n return (\n <Flex gap=\"4px 0\" wrap>\n {tags.map<React.ReactNode>((tag, index) => {\n if (editInputIndex === index) {\n return (\n <Input\n ref={editInputRef}\n key={tag}\n size=\"small\"\n style={tagInputStyle}\n value={editInputValue}\n onChange={handleEditInputChange}\n onBlur={handleEditInputConfirm}\n onPressEnter={handleEditInputConfirm}\n />\n );\n }\n const isLongTag = tag.length > 20;\n const tagElem = (\n <Tag\n key={tag}\n closable={index !== 0}\n style={{ userSelect: 'none' }}\n onClose={() => handleClose(tag)}\n >\n <span\n onDoubleClick={(e) => {\n if (index !== 0) {\n setEditInputIndex(index);\n setEditInputValue(tag);\n e.preventDefault();\n }\n }}\n >\n {isLongTag ? `${tag.slice(0, 20)}...` : tag}\n </span>\n </Tag>\n );\n return isLongTag ? (\n <Tooltip title={tag} key={tag}>\n {tagElem}\n </Tooltip>\n ) : (\n tagElem\n );\n })}\n {inputVisible ? (\n <Input\n ref={inputRef}\n type=\"text\"\n size=\"small\"\n style={tagInputStyle}\n value={inputValue}\n onChange={handleInputChange}\n onBlur={handleInputConfirm}\n onPressEnter={handleInputConfirm}\n />\n ) : (\n <Tag style={tagPlusStyle} icon={<PlusOutlined />} onClick={showInput}>\n New Tag\n </Tag>\n )}\n </Flex>\n );\n};\n\nexport default App;\n";},fea7c196:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("a4d7d998");var o="import React from 'react';\nimport { Divider, List, Typography } from 'antd';\n\nconst data = [\n 'Racing car sprays burning fuel into crowd.',\n 'Japanese princess to wed commoner.',\n 'Australian walks 100km after outback crash.',\n 'Man charged over missing wedding girl.',\n 'Los Angeles battles huge wildfires.',\n];\n\nconst App: React.FC = () => (\n <>\n <Divider orientation=\"left\">Default Size</Divider>\n <List\n header={<div>Header</div>}\n footer={<div>Footer</div>}\n bordered\n dataSource={data}\n renderItem={(item) => (\n <List.Item>\n <Typography.Text mark>[ITEM]</Typography.Text> {item}\n </List.Item>\n )}\n />\n <Divider orientation=\"left\">Small Size</Divider>\n <List\n size=\"small\"\n header={<div>Header</div>}\n footer={<div>Footer</div>}\n bordered\n dataSource={data}\n renderItem={(item) => <List.Item>{item}</List.Item>}\n />\n <Divider orientation=\"left\">Large Size</Divider>\n <List\n size=\"large\"\n header={<div>Header</div>}\n footer={<div>Footer</div>}\n bordered\n dataSource={data}\n renderItem={(item) => <List.Item>{item}</List.Item>}\n />\n </>\n);\n\nexport default App;\n";},fefc7a4c:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("97731a41");var o="import React, { useState } from 'react';\nimport { Mentions } from 'antd';\nimport type { MentionsProps } from 'antd';\n\nconst MOCK_DATA = {\n '@': ['afc163', 'zombiej', 'yesmeck'],\n '#': ['1.0', '2.0', '3.0'],\n};\n\ntype PrefixType = keyof typeof MOCK_DATA;\n\nconst App: React.FC = () => {\n const [prefix, setPrefix] = useState<PrefixType>('@');\n\n const onSearch: MentionsProps['onSearch'] = (_, newPrefix) => {\n setPrefix(newPrefix as PrefixType);\n };\n\n return (\n <Mentions\n style={{ width: '100%' }}\n placeholder=\"input @ to mention people, # to mention tag\"\n prefix={['@', '#']}\n onSearch={onSearch}\n options={(MOCK_DATA[prefix] || []).map((value) => ({\n key: value,\n value,\n label: value,\n }))}\n />\n );\n};\n\nexport default App;\n";},ff26f09f:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("2817c2cd");var o="import React from 'react';\nimport { Slider } from 'antd';\n\nimport SemanticPreview from '../../../.dumi/theme/common/SemanticPreview';\nimport useLocale from '../../../.dumi/hooks/useLocale';\n\nconst locales = {\n cn: {\n root: '\u6839\u5143\u7D20',\n track: '\u8303\u56F4\u9009\u62E9\u4E0B\uFF0C\u70B9\u548C\u70B9\u4E4B\u95F4\u5355\u4E2A\u9009\u53D6\u6761',\n tracks: '\u8303\u56F4\u9009\u62E9\u4E0B\uFF0C\u6574\u4E2A\u8303\u56F4\u9009\u53D6\u6761',\n rail: '\u80CC\u666F\u6761\u5143\u7D20',\n handle: '\u6293\u53D6\u70B9\u5143\u7D20',\n },\n en: {\n root: 'Root element',\n track: 'The selection bar between points and points under the range selection',\n tracks: 'The entire range selection bar under the range selection',\n rail: 'Background rail element',\n handle: 'Grab handle element',\n },\n};\n\nconst App: React.FC = () => {\n const [locale] = useLocale(locales);\n return (\n <SemanticPreview\n componentName=\"Slider\"\n semantics={[\n { name: 'root', desc: locale.root, version: '5.23.0' },\n { name: 'track', desc: locale.track, version: '5.10.0' },\n { name: 'tracks', desc: locale.tracks, version: '5.10.0' },\n { name: 'rail', desc: locale.rail, version: '5.10.0' },\n { name: 'handle', desc: locale.handle, version: '5.10.0' },\n ]}\n >\n <Slider range defaultValue={[20, 30, 50]} style={{ width: '100%' }} />\n </SemanticPreview>\n );\n};\n\nexport default App;\n";},ff31a468:function(n,e,t){},ff538a4d:function(n,e,t){"use strict";t.d(e,"__esModule",{value:!0}),t.d(e,"default",{enumerable:!0,get:function(){return o;}}),t("0c622cab");var o="import React from 'react';\nimport { DatePicker } from 'antd';\n\nconst { _InternalPanelDoNotUseOrYouWillBeFired: InternalDatePicker } = DatePicker;\n\nconst App: React.FC = () => <InternalDatePicker />;\n\nexport default App;\n";},ffca0073:function(n,e,t){},ffd5f38c:function(n,e,t){},ffdc05ac:function(n,e,t){}}]); |