mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 11:10:01 +08:00
Code Issues Actions 25 Packages Projects Releases Wiki Activity

demo: update CP demo (#40358)

Browse Source
This commit is contained in:
lijianan 2023-01-21 12:35:21 +08:00 committed by GitHub
parent da32eb5aae
commit 174b389b00
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 120 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

255
components/config-provider/demo/direction.tsx
View File

@ -1,4 +1,3 @@
import React, { useState } from 'react';
import { import {
DownloadOutlined, DownloadOutlined,
LeftOutlined, LeftOutlined,
@ -24,15 +23,18 @@ import {
Rate, Rate,
Row, Row,
Select, Select,
Space,
Steps, Steps,
Switch, Switch,
Tree, Tree,
TreeSelect, TreeSelect,
} from 'antd'; } from 'antd';
import type { DirectionType } from 'antd/es/config-provider'; import type { DirectionType } from 'antd/es/config-provider';
import React, { useState } from 'react';
const InputGroup = Input.Group; const InputGroup = Input.Group;
const ButtonGroup = Button.Group; const ButtonGroup = Button.Group;
const { Option } = Select; const { Option } = Select;
const { TreeNode } = Tree; const { TreeNode } = Tree;
const { Search } = Input; const { Search } = Input;
@ -87,6 +89,7 @@ const cascaderOptions = [
], ],
}, },
]; ];
type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight'; type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => { const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
@ -113,7 +116,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
// ==== Cascader ==== // ==== Cascader ====
const cascaderFilter = (inputValue: string, path: { label: string }[]) => const cascaderFilter = (inputValue: string, path: { label: string }[]) =>
path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1); path.some((option) => option.label.toLowerCase().includes(inputValue.toLowerCase()));
const onCascaderChange = (value: any) => { const onCascaderChange = (value: any) => {
console.log(value); console.log(value);
@ -136,24 +139,18 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
}; };
// ==== End Modal ==== // ==== End Modal ====
const onStepsChange = (newCurrentStep: number) => { const onStepsChange = (newCurrentStep: number) => {
console.log('onChange:', newCurrentStep); console.log('onChange:', newCurrentStep);
setCurrentStep(newCurrentStep); setCurrentStep(newCurrentStep);
}; };
// ==== Badge ==== // ==== Badge ====
const increaseBadge = () => { const increaseBadge = () => {
setBadgeCount(badgeCount + 1); setBadgeCount(badgeCount + 1);
}; };
const declineBadge = () => { const declineBadge = () => {
let newBadgeCount = badgeCount - 1; setBadgeCount((prev) => (prev - 1 < 0 ? 0 : prev - 1));
if (newBadgeCount < 0) {
newBadgeCount = 0;
}
setBadgeCount(newBadgeCount);
}; };
const onChangeBadge = (checked: boolean) => { const onChangeBadge = (checked: boolean) => {
@ -173,7 +170,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
placeholder="یک مورد انتخاب کنید" placeholder="یک مورد انتخاب کنید"
popupPlacement={popupPlacement} popupPlacement={popupPlacement}
/> />
&nbsp;&nbsp;&nbsp;&nbsp; With search: &nbsp;&nbsp;&nbsp;&nbsp;With search:&nbsp;&nbsp;
<Cascader <Cascader
suffixIcon={<SmileOutlined />} suffixIcon={<SmileOutlined />}
options={cascaderOptions} options={cascaderOptions}
@ -197,7 +194,6 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
</Col> </Col>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Radio Group example</Divider> <Divider orientation="left">Radio Group example</Divider>
<Radio.Group defaultValue="c" buttonStyle="solid"> <Radio.Group defaultValue="c" buttonStyle="solid">
<Radio.Button value="a">تهران</Radio.Button> <Radio.Button value="a">تهران</Radio.Button>
<Radio.Button value="b" disabled> <Radio.Button value="b" disabled>
@ -301,159 +297,148 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
<Row> <Row>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Select example</Divider> <Divider orientation="left">Select example</Divider>
<Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}> <Space wrap>
<Option value="jack">Jack</Option> <Select mode="multiple" defaultValue="مورچه" style={{ width: 120 }}>
<Option value="مورچه">مورچه</Option> <Option value="jack">Jack</Option>
<Option value="disabled" disabled> <Option value="مورچه">مورچه</Option>
Disabled <Option value="disabled" disabled>
</Option> Disabled
<Option value="Yiminghe">yiminghe</Option> </Option>
</Select> <Option value="Yiminghe">yiminghe</Option>
<Select defaultValue="مورچه" style={{ width: 120 }} disabled> </Select>
<Option value="مورچه">مورچه</Option> <Select defaultValue="مورچه" style={{ width: 120 }} disabled>
</Select> <Option value="مورچه">مورچه</Option>
<Select defaultValue="مورچه" style={{ width: 120 }} loading> </Select>
<Option value="مورچه">مورچه</Option> <Select defaultValue="مورچه" style={{ width: 120 }} loading>
</Select> <Option value="مورچه">مورچه</Option>
<Select </Select>
showSearch <Select
style={{ width: 200 }} showSearch
placeholder="Select a person" style={{ width: 200 }}
optionFilterProp="children" placeholder="Select a person"
filterOption={(input, option) => optionFilterProp="children"
option?.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0 filterOption={(input, option) =>
} option?.props.children.toLowerCase().includes(input.toLowerCase())
> }
<Option value="jack">Jack</Option> >
<Option value="سعید">سعید</Option> <Option value="jack">Jack</Option>
<Option value="tom">Tom</Option> <Option value="سعید">سعید</Option>
</Select> <Option value="tom">Tom</Option>
</Select>
</Space>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Divider orientation="left">TreeSelect example</Divider> <Divider orientation="left">TreeSelect example</Divider>
<div> <TreeSelect
<TreeSelect showSearch
showSearch style={{ width: '100%' }}
style={{ width: '100%' }} dropdownStyle={{ maxHeight: 400, overflow: 'auto' }}
dropdownStyle={{ maxHeight: 400, overflow: 'auto' }} placeholder="Please select"
placeholder="Please select" allowClear
allowClear treeDefaultExpandAll
treeDefaultExpandAll >
> <TreeNode title="parent 1" key="0-1">
<TreeNode title="parent 1" key="0-1"> <TreeNode title="parent 1-0" key="0-1-1">
<TreeNode title="parent 1-0" key="0-1-1"> <TreeNode title="my leaf" key="random" />
<TreeNode title="my leaf" key="random" /> <TreeNode title="your leaf" key="random1" />
<TreeNode title="your leaf" key="random1" />
</TreeNode>
<TreeNode title="parent 1-1" key="random2">
<TreeNode title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
</TreeNode>
</TreeNode> </TreeNode>
</TreeSelect> <TreeNode title="parent 1-1" key="random2">
</div> <TreeNode title={<b style={{ color: '#08c' }}>sss</b>} key="random3" />
</TreeNode>
</TreeNode>
</TreeSelect>
</Col> </Col>
</Row> </Row>
<br /> <br />
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Modal example</Divider> <Divider orientation="left">Modal example</Divider>
<div> <Button type="primary" onClick={showModal}>
<Button type="primary" onClick={showModal}> Open Modal
Open Modal </Button>
</Button> <Modal title="پنچره ساده" open={modalOpen} onOk={handleOk} onCancel={handleCancel}>
<Modal title="پنچره ساده" open={modalOpen} onOk={handleOk} onCancel={handleCancel}> <p>نگاشته‌های خود را اینجا قراردهید</p>
<p>نگاشته‌های خود را اینجا قراردهید</p> <p>نگاشته‌های خود را اینجا قراردهید</p>
<p>نگاشته‌های خود را اینجا قراردهید</p> <p>نگاشته‌های خود را اینجا قراردهید</p>
<p>نگاشته‌های خود را اینجا قراردهید</p> </Modal>
</Modal>
</div>
</Col> </Col>
</Row> </Row>
<br /> <br />
<Row> <Row>
<Col span={24}> <Col span={24}>
<Divider orientation="left">Steps example</Divider> <Divider orientation="left">Steps example</Divider>
<div> <Steps
<Steps progressDot
progressDot current={currentStep}
current={currentStep} items={[
items={[ {
{ title: 'Finished',
title: 'Finished', description: 'This is a description.',
description: 'This is a description.', },
}, {
{ title: 'In Progress',
title: 'In Progress', description: 'This is a description.',
description: 'This is a description.', },
}, {
{ title: 'Waiting',
title: 'Waiting', description: 'This is a description.',
description: 'This is a description.', },
}, ]}
]} />
/> <br />
<br /> <Steps
<Steps current={currentStep}
current={currentStep} onChange={onStepsChange}
onChange={onStepsChange} items={[
items={[ {
{ title: 'Step 1',
title: 'Step 1', description: 'This is a description.',
description: 'This is a description.', },
}, {
{ title: 'Step 2',
title: 'Step 2', description: 'This is a description.',
description: 'This is a description.', },
}, {
{ title: 'Step 3',
title: 'Step 3', description: 'This is a description.',
description: 'This is a description.', },
}, ]}
]} />
/>
</div>
</Col> </Col>
</Row> </Row>
<br /> <br />
<Row> <Row>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Rate example</Divider> <Divider orientation="left">Rate example</Divider>
<div> <Rate defaultValue={2.5} />
<Rate defaultValue={2.5} /> <br />
<br /> <strong>* Note:</strong> Half star not implemented in RTL direction, it will be
<strong>* Note:</strong> Half star not implemented in RTL direction, it will be supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '}
supported after <a href="https://github.com/react-component/rate">rc-rate</a>{' '} implement rtl support.
implement rtl support.
</div>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Divider orientation="left">Badge example</Divider> <Divider orientation="left">Badge example</Divider>
<div> <Badge count={badgeCount}>
<div> <a href="#" className="head-example" />
<Badge count={badgeCount}> </Badge>
<a href="#" className="head-example" /> <ButtonGroup>
</Badge> <Button onClick={declineBadge}>
<ButtonGroup> <MinusOutlined />
<Button onClick={declineBadge}> </Button>
<MinusOutlined /> <Button onClick={increaseBadge}>
</Button> <PlusOutlined />
<Button onClick={increaseBadge}> </Button>
<PlusOutlined /> </ButtonGroup>
</Button> <div style={{ marginTop: 12 }}>
</ButtonGroup> <Badge dot={showBadge}>
</div> <a href="#" className="head-example" />
<div style={{ marginTop: 10 }}> </Badge>
<Badge dot={showBadge}> <Switch onChange={onChangeBadge} checked={showBadge} />
<a href="#" className="head-example" />
</Badge>
<Switch onChange={onChangeBadge} checked={showBadge} />
</div>
</div> </div>
</Col> </Col>
</Row> </Row>
</Col> </Col>
</Row> </Row>
<br /> <br />
<br /> <br />
<Row> <Row>
@ -524,7 +509,7 @@ const App: React.FC = () => {
return ( return (
<> <>
<div style={{ marginBottom: 16 }}> <div style={{ marginBottom: 16 }}>
<span style={{ marginRight: 16 }}>Change direction of components: </span> <span style={{ marginRight: 16 }}>Change direction of components:</span>
<Radio.Group defaultValue="ltr" onChange={changeDirection}> <Radio.Group defaultValue="ltr" onChange={changeDirection}>
<Radio.Button key="ltr" value="ltr"> <Radio.Button key="ltr" value="ltr">
LTR LTR