Skip to content

Commit 0335ce5

Browse files
layershifterlayershifter
authored
docs(SidebarExampleTransitions): fix look of the example (#3997)
* docs(SidebarExampleTransitions): fix look of the example * Update docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js * Update docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js
1 parent 8168146 commit 0335ce5

2 files changed

Lines changed: 135 additions & 105 deletions

File tree

‎docs/src/examples/.eslintrc‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@
1717
"rules": {
1818
"no-restricted-imports": "off"
1919
}
20+
},
21+
{
22+
"files": ["**/*Example*.js"],
23+
"rules": {
24+
"react/prop-types": "off"
25+
}
2026
}
2127
]
2228
}

‎docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.js‎

Lines changed: 129 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
import PropTypes from 'prop-types'
2-
import React, { Component } from 'react'
1+
import React from 'react'
32
import {
43
Button,
54
Checkbox,
@@ -25,7 +24,7 @@ const HorizontalSidebar = ({ animation, direction, visible }) => (
2524
<Header as='h3'>New Content Awaits</Header>
2625
</Grid.Column>
2726
</Grid.Row>
28-
<Grid columns={3} divided>
27+
<Grid.Row columns={3}>
2928
<Grid.Column>
3029
<Image src='/images/wireframe/media-paragraph.png' />
3130
</Grid.Column>
@@ -35,17 +34,11 @@ const HorizontalSidebar = ({ animation, direction, visible }) => (
3534
<Grid.Column>
3635
<Image src='/images/wireframe/media-paragraph.png' />
3736
</Grid.Column>
38-
</Grid>
37+
</Grid.Row>
3938
</Grid>
4039
</Sidebar>
4140
)
4241

43-
HorizontalSidebar.propTypes = {
44-
animation: PropTypes.string,
45-
direction: PropTypes.string,
46-
visible: PropTypes.bool,
47-
}
48-
4942
const VerticalSidebar = ({ animation, direction, visible }) => (
5043
<Sidebar
5144
as={Menu}
@@ -72,120 +65,151 @@ const VerticalSidebar = ({ animation, direction, visible }) => (
7265
</Sidebar>
7366
)
7467

75-
VerticalSidebar.propTypes = {
76-
animation: PropTypes.string,
77-
direction: PropTypes.string,
78-
visible: PropTypes.bool,
68+
function exampleReducer(state, action) {
69+
switch (action.type) {
70+
case 'CHANGE_ANIMATION':
71+
return { ...state, animation: action.animation, visible: !state.visible }
72+
case 'CHANGE_DIMMED':
73+
return { ...state, dimmed: action.dimmed }
74+
case 'CHANGE_DIRECTION':
75+
return { ...state, direction: action.direction, visible: false }
76+
default:
77+
throw new Error()
78+
}
7979
}
8080

81-
export default class SidebarExampleTransitions extends Component {
82-
state = {
81+
function SidebarExampleTransitions() {
82+
const [state, dispatch] = React.useReducer(exampleReducer, {
8383
animation: 'overlay',
8484
direction: 'left',
8585
dimmed: false,
8686
visible: false,
87-
}
88-
89-
handleAnimationChange = (animation) => () =>
90-
this.setState((prevState) => ({ animation, visible: !prevState.visible }))
91-
92-
handleDimmedChange = (e, { checked }) => this.setState({ dimmed: checked })
93-
94-
handleDirectionChange = (direction) => () =>
95-
this.setState({ direction, visible: false })
87+
})
9688

97-
render() {
98-
const { animation, dimmed, direction, visible } = this.state
99-
const vertical = direction === 'bottom' || direction === 'top'
89+
const { animation, dimmed, direction, visible } = state
90+
const vertical = direction === 'bottom' || direction === 'top'
10091

101-
return (
102-
<div>
103-
<Checkbox
104-
checked={dimmed}
105-
label='Dim Page'
106-
onChange={this.handleDimmedChange}
107-
toggle
108-
/>
92+
return (
93+
<div>
94+
<Checkbox
95+
checked={dimmed}
96+
label='Dim Page'
97+
onChange={(e, { checked }) =>
98+
dispatch({ type: 'CHANGE_DIMMED', dimmed: checked })
99+
}
100+
toggle
101+
/>
109102

110-
<Header as='h5'>Direction</Header>
111-
<Button.Group>
112-
<Button
113-
active={direction === 'left'}
114-
onClick={this.handleDirectionChange('left')}
115-
>
116-
Left
117-
</Button>
118-
<Button
119-
active={direction === 'right'}
120-
onClick={this.handleDirectionChange('right')}
121-
>
122-
Right
123-
</Button>
124-
<Button
125-
active={direction === 'top'}
126-
onClick={this.handleDirectionChange('top')}
127-
>
128-
Top
129-
</Button>
130-
<Button
131-
active={direction === 'bottom'}
132-
onClick={this.handleDirectionChange('bottom')}
133-
>
134-
Bottom
135-
</Button>
136-
</Button.Group>
137-
138-
<Header as='h5'>All Direction Animations</Header>
139-
<Button onClick={this.handleAnimationChange('overlay')}>Overlay</Button>
140-
<Button onClick={this.handleAnimationChange('push')}>Push</Button>
141-
<Button onClick={this.handleAnimationChange('scale down')}>
142-
Scale Down
103+
<Header as='h5'>Direction</Header>
104+
<Button.Group>
105+
<Button
106+
active={direction === 'left'}
107+
onClick={() =>
108+
dispatch({ type: 'CHANGE_DIRECTION', direction: 'left' })
109+
}
110+
>
111+
Left
143112
</Button>
144-
145-
<Header as='h5'>Vertical-Only Animations</Header>
146113
<Button
147-
disabled={vertical}
148-
onClick={this.handleAnimationChange('uncover')}
114+
active={direction === 'right'}
115+
onClick={() =>
116+
dispatch({ type: 'CHANGE_DIRECTION', direction: 'right' })
117+
}
149118
>
150-
Uncover
119+
Right
151120
</Button>
152121
<Button
153-
disabled={vertical}
154-
onClick={this.handleAnimationChange('slide along')}
122+
active={direction === 'top'}
123+
onClick={() =>
124+
dispatch({ type: 'CHANGE_DIRECTION', direction: 'top' })
125+
}
155126
>
156-
Slide Along
127+
Top
157128
</Button>
158129
<Button
159-
disabled={vertical}
160-
onClick={this.handleAnimationChange('slide out')}
130+
active={direction === 'bottom'}
131+
onClick={() =>
132+
dispatch({ type: 'CHANGE_DIRECTION', direction: 'bottom' })
133+
}
161134
>
162-
Slide Out
135+
Bottom
163136
</Button>
137+
</Button.Group>
164138

165-
<Sidebar.Pushable as={Segment}>
166-
{vertical ? (
167-
<HorizontalSidebar
168-
animation={animation}
169-
direction={direction}
170-
visible={visible}
171-
/>
172-
) : null}
173-
{vertical ? null : (
174-
<VerticalSidebar
175-
animation={animation}
176-
direction={direction}
177-
visible={visible}
178-
/>
179-
)}
139+
<Header as='h5'>All Direction Animations</Header>
140+
<Button
141+
onClick={() =>
142+
dispatch({ type: 'CHANGE_ANIMATION', animation: 'overlay' })
143+
}
144+
>
145+
Overlay
146+
</Button>
147+
<Button
148+
onClick={() =>
149+
dispatch({ type: 'CHANGE_ANIMATION', animation: 'push' })
150+
}
151+
>
152+
Push
153+
</Button>
154+
<Button
155+
onClick={() =>
156+
dispatch({ type: 'CHANGE_ANIMATION', animation: 'scale down' })
157+
}
158+
>
159+
Scale Down
160+
</Button>
180161

181-
<Sidebar.Pusher dimmed={dimmed && visible}>
182-
<Segment basic>
183-
<Header as='h3'>Application Content</Header>
184-
<Image src='/images/wireframe/paragraph.png' />
185-
</Segment>
186-
</Sidebar.Pusher>
187-
</Sidebar.Pushable>
188-
</div>
189-
)
190-
}
162+
<Header as='h5'>Vertical-Only Animations</Header>
163+
<Button
164+
disabled={vertical}
165+
onClick={() =>
166+
dispatch({ type: 'CHANGE_ANIMATION', animation: 'uncover' })
167+
}
168+
>
169+
Uncover
170+
</Button>
171+
<Button
172+
disabled={vertical}
173+
onClick={() =>
174+
dispatch({ type: 'CHANGE_ANIMATION', animation: 'slide along' })
175+
}
176+
>
177+
Slide Along
178+
</Button>
179+
<Button
180+
disabled={vertical}
181+
onClick={() =>
182+
dispatch({ type: 'CHANGE_ANIMATION', animation: 'slide out' })
183+
}
184+
>
185+
Slide Out
186+
</Button>
187+
188+
<Sidebar.Pushable as={Segment} style={{ overflow: 'hidden' }}>
189+
{vertical && (
190+
<HorizontalSidebar
191+
animation={animation}
192+
direction={direction}
193+
visible={visible}
194+
/>
195+
)}
196+
{!vertical && (
197+
<VerticalSidebar
198+
animation={animation}
199+
direction={direction}
200+
visible={visible}
201+
/>
202+
)}
203+
204+
<Sidebar.Pusher dimmed={dimmed && visible}>
205+
<Segment basic>
206+
<Header as='h3'>Application Content</Header>
207+
<Image src='/images/wireframe/paragraph.png' />
208+
</Segment>
209+
</Sidebar.Pusher>
210+
</Sidebar.Pushable>
211+
</div>
212+
)
191213
}
214+
215+
export default SidebarExampleTransitions

0 commit comments

Comments
 (0)