-
Notifications
You must be signed in to change notification settings - Fork 113
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat Drawer Component & fix Form field bug
- Loading branch information
1 parent
02d07b9
commit e31364c
Showing
20 changed files
with
1,012 additions
and
54 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React, { useState } from 'react'; | ||
| import Drawer from '..'; | ||
| import Button from '../../Button'; | ||
|
|
||
| export default function index1() { | ||
| const [visible, setVisible] = useState(false); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button | ||
| handleClick={() => { | ||
| setVisible(true); | ||
| }} | ||
| > | ||
| Open Drawer | ||
| </Button> | ||
| <Drawer | ||
| title="Drawer Title" | ||
| visible={visible} | ||
| onOk={() => setVisible(false)} | ||
| onCancel={() => setVisible(false)} | ||
| > | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| </Drawer> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React, { useState, useEffect } from 'react'; | ||
| import Drawer from '..'; | ||
| import Button from '../../Button'; | ||
| import RadioGroup from '../../Radio/RadioGroup'; | ||
| import Radio from '../../Radio'; | ||
|
|
||
| export default function index1() { | ||
| const [visible, setVisible] = useState(false); | ||
| const [align, setAlign] = useState('right'); | ||
|
|
||
| return ( | ||
| <div> | ||
| <RadioGroup value={0} onChange={(val: { children?: string }) => setAlign(val.children)}> | ||
| <Radio>right</Radio> | ||
| <Radio>left</Radio> | ||
| <Radio>top</Radio> | ||
| <Radio>bottom</Radio> | ||
| </RadioGroup> | ||
| <Button | ||
| style={{ marginTop: '30px' }} | ||
| handleClick={() => { | ||
| setVisible(true); | ||
| }} | ||
| > | ||
| Open Drawer | ||
| </Button> | ||
| <Drawer | ||
| title="Drawer Title" | ||
| visible={visible} | ||
| align={align as 'left' | 'right' | 'top' | 'bottom'} | ||
| onOk={() => setVisible(false)} | ||
| onCancel={() => setVisible(false)} | ||
| > | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| </Drawer> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import React, { useState } from 'react'; | ||
| import Drawer from '..'; | ||
| import Button from '../../Button'; | ||
|
|
||
| export default function index1() { | ||
| const [visible, setVisible] = useState(false); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button | ||
| handleClick={() => { | ||
| setVisible(true); | ||
| }} | ||
| > | ||
| Open Drawer | ||
| </Button> | ||
| <Drawer | ||
| title="Drawer Title" | ||
| visible={visible} | ||
| onOk={() => { | ||
| return new Promise((resolve) => { | ||
| setTimeout(() => { | ||
| setVisible(false); | ||
| resolve(''); | ||
| }, 2000) | ||
| }) | ||
| }} | ||
| onCancel={() => setVisible(false)} | ||
| > | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| </Drawer> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,76 @@ | ||
| import React, { useState } from 'react'; | ||
| import Drawer from '..'; | ||
| import Button from '../../Button'; | ||
| import Space from '../../Space'; | ||
|
|
||
| export default function index1() { | ||
| const [visible1, setVisible1] = useState(false); | ||
| const [visible2, setVisible2] = useState(false); | ||
| const [visible3, setVisible3] = useState(false); | ||
| const [loading, setLoading] = useState(false); | ||
|
|
||
| const closeAsync = () => { | ||
| setLoading(true); | ||
| setTimeout(() => { | ||
| setVisible2(false); | ||
| setLoading(false); | ||
| }, 2000); | ||
| }; | ||
|
|
||
| return ( | ||
| <div> | ||
| <Space> | ||
| <Button handleClick={() => setVisible1(true)}>打开禁用按钮Drawer</Button> | ||
| <Button handleClick={() => setVisible2(true)}>打开自定义页脚Drawer</Button> | ||
| <Button handleClick={() => setVisible3(true)}>打开无页脚Drawer</Button> | ||
| </Space> | ||
| <Drawer | ||
| title="Drawer Title" | ||
| visible={visible1} | ||
| width="400px" | ||
| onCancel={() => setVisible1(false)} | ||
| onOk={() => setVisible1(false)} | ||
| okButtonProps={{ disabled: true }} | ||
| cancelButtonProps={{ disabled: true }} | ||
| > | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| </Drawer> | ||
| <Drawer | ||
| title="Drawer Title" | ||
| visible={visible2} | ||
| width="400px" | ||
| onCancel={() => setVisible2(false)} | ||
| footer={ | ||
| <Space> | ||
| <Button type="text" handleClick={() => setVisible2(false)}> | ||
| Return | ||
| </Button> | ||
| <Button type="text" handleClick={closeAsync} loading={loading}> | ||
| Async Return | ||
| </Button> | ||
| <Button type="primary" handleClick={() => setVisible2(false)}> | ||
| Enter | ||
| </Button> | ||
| </Space> | ||
| } | ||
| > | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| </Drawer> | ||
| <Drawer | ||
| title="Drawer Title" | ||
| visible={visible3} | ||
| onCancel={() => setVisible3(false)} | ||
| onOk={() => setVisible3(false)} | ||
| footer={<></>} | ||
| > | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| </Drawer> | ||
| </div> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,30 @@ | ||
| import React, { useState } from 'react'; | ||
| import Drawer from '..'; | ||
| import Button from '../../Button'; | ||
|
|
||
| export default function index1() { | ||
| const [visible, setVisible] = useState(false); | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button | ||
| handleClick={() => { | ||
| setVisible(true); | ||
| }} | ||
| > | ||
| Open Drawer | ||
| </Button> | ||
| <Drawer | ||
| title="Drawer Title" | ||
| visible={visible} | ||
| width="600px" | ||
| onOk={() => setVisible(false)} | ||
| onCancel={() => setVisible(false)} | ||
| > | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| <p>This is a Drawer view text.</p> | ||
| </Drawer> | ||
| </div> | ||
| ); | ||
| } |
Oops, something went wrong.