Skip to content

Commit 5230cd3

Browse files
layershifterlayershifter
authored
docs(Modal): improve examples, use React hooks (#4012)
1 parent 532e3d6 commit 5230cd3

26 files changed

+756
-427
lines changed

‎bundle-size/fixtures/Modal.size.js‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { Modal } from 'semantic-ui-react'
2+
import React from 'react'
3+
import ReactDOM from 'react-dom'
4+
5+
function App() {
6+
return <Modal trigger={<button>An example</button>}>Some content</Modal>
7+
}
8+
9+
ReactDOM.render(<App />, document.querySelector('#root'))

‎docs/src/examples/modules/Modal/Content/ModalExampleCloseIcon.js‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
import React from 'react'
2+
import { Button, Header, Icon, Modal } from 'semantic-ui-react'
3+
4+
function ModalExampleCloseIcon() {
5+
const [open, setOpen] = React.useState(false)
6+
7+
return (
8+
<Modal
9+
closeIcon
10+
open={open}
11+
trigger={<Button>Show Modal</Button>}
12+
onClose={() => setOpen(false)}
13+
onOpen={() => setOpen(true)}
14+
>
15+
<Header icon='archive' content='Archive Old Messages' />
16+
<Modal.Content>
17+
<p>
18+
Your inbox is getting full, would you like us to enable automatic
19+
archiving of old messages?
20+
</p>
21+
</Modal.Content>
22+
<Modal.Actions>
23+
<Button color='red' onClick={() => setOpen(false)}>
24+
<Icon name='remove' /> No
25+
</Button>
26+
<Button color='green' onClick={() => setOpen(false)}>
27+
<Icon name='checkmark' /> Yes
28+
</Button>
29+
</Modal.Actions>
30+
</Modal>
31+
)
32+
}
33+
34+
export default ModalExampleCloseIcon

‎docs/src/examples/modules/Modal/Content/ModalExampleContentImage.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import React from 'react'
2+
import { Button, Image, Modal } from 'semantic-ui-react'
3+
4+
function ModalExampleContentImage() {
5+
const [open, setOpen] = React.useState(false)
6+
7+
return (
8+
<Modal
9+
onClose={() => setOpen(false)}
10+
onOpen={() => setOpen(true)}
11+
open={open}
12+
trigger={<Button>Show Modal</Button>}
13+
>
14+
<Modal.Header>Upload image</Modal.Header>
15+
<Modal.Content image>
16+
<Image size='medium' src='/images/wireframe/image-square.png' wrapped />
17+
<Modal.Description>
18+
<p>Would you like to upload this image?</p>
19+
</Modal.Description>
20+
</Modal.Content>
21+
<Modal.Actions>
22+
<Button onClick={() => setOpen(false)}>Cancel</Button>
23+
<Button onClick={() => setOpen(false)} positive>
24+
Ok
25+
</Button>
26+
</Modal.Actions>
27+
</Modal>
28+
)
29+
}
30+
31+
export default ModalExampleContentImage

‎docs/src/examples/modules/Modal/Content/ModalExampleDimmer.js‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import React from 'react'
2+
import { Button, Modal } from 'semantic-ui-react'
3+
4+
function exampleReducer(state, action) {
5+
switch (action.type) {
6+
case 'OPEN_MODAL':
7+
return { open: true, dimmer: action.dimmer }
8+
case 'CLOSE_MODAL':
9+
return { open: false }
10+
default:
11+
throw new Error()
12+
}
13+
}
14+
15+
function ModalExampleDimmer() {
16+
const [state, dispatch] = React.useReducer(exampleReducer, {
17+
open: false,
18+
dimmer: undefined,
19+
})
20+
const { open, dimmer } = state
21+
22+
return (
23+
<div>
24+
<Button onClick={() => dispatch({ type: 'OPEN_MODAL' })}>Default</Button>
25+
<Button
26+
onClick={() => dispatch({ type: 'OPEN_MODAL', dimmer: 'inverted' })}
27+
>
28+
Inverted
29+
</Button>
30+
<Button
31+
onClick={() => dispatch({ type: 'OPEN_MODAL', dimmer: 'blurring' })}
32+
>
33+
Blurring
34+
</Button>
35+
36+
<Modal
37+
dimmer={dimmer}
38+
open={open}
39+
onClose={() => dispatch({ type: 'CLOSE_MODAL' })}
40+
>
41+
<Modal.Header>Use Google's location service?</Modal.Header>
42+
<Modal.Content>
43+
Let Google help apps determine location. This means sending anonymous
44+
location data to Google, even when no apps are running.
45+
</Modal.Content>
46+
<Modal.Actions>
47+
<Button negative onClick={() => dispatch({ type: 'CLOSE_MODAL' })}>
48+
Disagree
49+
</Button>
50+
<Button positive onClick={() => dispatch({ type: 'CLOSE_MODAL' })}>
51+
Agree
52+
</Button>
53+
</Modal.Actions>
54+
</Modal>
55+
</div>
56+
)
57+
}
58+
59+
export default ModalExampleDimmer

‎docs/src/examples/modules/Modal/Content/index.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import React from 'react'
2+
3+
import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
4+
import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
5+
6+
const ModalContentExamples = () => (
7+
<ExampleSection title='Content'>
8+
<ComponentExample
9+
title='Close icon'
10+
description='A Modal can have a close icon.'
11+
examplePath='modules/Modal/Content/ModalExampleCloseIcon'
12+
/>
13+
<ComponentExample
14+
title='Image Content'
15+
description='A modal can contain image content.'
16+
examplePath='modules/Modal/Content/ModalExampleContentImage'
17+
/>
18+
<ComponentExample
19+
title='Dimmer'
20+
description='A modal can specify dimmer variations.'
21+
examplePath='modules/Modal/Content/ModalExampleDimmer'
22+
/>
23+
</ExampleSection>
24+
)
25+
26+
export default ModalContentExamples

‎docs/src/examples/modules/Modal/Types/ModalExampleBasic.js‎

Lines changed: 34 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,38 @@
11
import React from 'react'
22
import { Button, Header, Icon, Modal } from 'semantic-ui-react'
33

4-
const ModalBasicExample = () => (
5-
<Modal trigger={<Button>Basic Modal</Button>} basic size='small'>
6-
<Header icon='archive' content='Archive Old Messages' />
7-
<Modal.Content>
8-
<p>
9-
Your inbox is getting full, would you like us to enable automatic
10-
archiving of old messages?
11-
</p>
12-
</Modal.Content>
13-
<Modal.Actions>
14-
<Button basic color='red' inverted>
15-
<Icon name='remove' /> No
16-
</Button>
17-
<Button color='green' inverted>
18-
<Icon name='checkmark' /> Yes
19-
</Button>
20-
</Modal.Actions>
21-
</Modal>
22-
)
4+
function ModalExampleBasic() {
5+
const [open, setOpen] = React.useState(false)
236

24-
export default ModalBasicExample
7+
return (
8+
<Modal
9+
basic
10+
onClose={() => setOpen(false)}
11+
onOpen={() => setOpen(true)}
12+
open={open}
13+
size='small'
14+
trigger={<Button>Basic Modal</Button>}
15+
>
16+
<Header icon>
17+
<Icon name='archive' />
18+
Archive Old Messages
19+
</Header>
20+
<Modal.Content>
21+
<p>
22+
Your inbox is getting full, would you like us to enable automatic
23+
archiving of old messages?
24+
</p>
25+
</Modal.Content>
26+
<Modal.Actions>
27+
<Button basic color='red' inverted onClick={() => setOpen(false)}>
28+
<Icon name='remove' /> No
29+
</Button>
30+
<Button color='green' inverted onClick={() => setOpen(false)}>
31+
<Icon name='checkmark' /> Yes
32+
</Button>
33+
</Modal.Actions>
34+
</Modal>
35+
)
36+
}
37+
38+
export default ModalExampleBasic

‎docs/src/examples/modules/Modal/Types/ModalExampleControlled.js‎

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎docs/src/examples/modules/Modal/Types/ModalExampleModal.js‎

Lines changed: 38 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,42 @@
11
import React from 'react'
22
import { Button, Header, Image, Modal } from 'semantic-ui-react'
33

4-
const ModalModalExample = () => (
5-
<Modal trigger={<Button>Show Modal</Button>}>
6-
<Modal.Header>Select a Photo</Modal.Header>
7-
<Modal.Content image>
8-
<Image wrapped size='medium' src='/images/avatar/large/rachel.png' />
9-
<Modal.Description>
10-
<Header>Default Profile Image</Header>
11-
<p>
12-
We've found the following gravatar image associated with your e-mail
13-
address.
14-
</p>
15-
<p>Is it okay to use this photo?</p>
16-
</Modal.Description>
17-
</Modal.Content>
18-
</Modal>
19-
)
4+
function ModalExampleModal() {
5+
const [open, setOpen] = React.useState(false)
206

21-
export default ModalModalExample
7+
return (
8+
<Modal
9+
onClose={() => setOpen(false)}
10+
onOpen={() => setOpen(true)}
11+
open={open}
12+
trigger={<Button>Show Modal</Button>}
13+
>
14+
<Modal.Header>Select a Photo</Modal.Header>
15+
<Modal.Content image>
16+
<Image size='medium' src='/images/avatar/large/rachel.png' wrapped />
17+
<Modal.Description>
18+
<Header>Default Profile Image</Header>
19+
<p>
20+
We've found the following gravatar image associated with your e-mail
21+
address.
22+
</p>
23+
<p>Is it okay to use this photo?</p>
24+
</Modal.Description>
25+
</Modal.Content>
26+
<Modal.Actions>
27+
<Button color='black' onClick={() => setOpen(false)}>
28+
Nope
29+
</Button>
30+
<Button
31+
content="Yep, that's me"
32+
labelPosition='right'
33+
icon='checkmark'
34+
onClick={() => setOpen(false)}
35+
positive
36+
/>
37+
</Modal.Actions>
38+
</Modal>
39+
)
40+
}
41+
42+
export default ModalExampleModal

‎docs/src/examples/modules/Modal/Types/ModalExampleMultiple.js‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

0 commit comments

Comments
 (0)