/
VisibilityExampleUpdateOn.js
114 lines (106 loc) · 3.47 KB
/
VisibilityExampleUpdateOn.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
import _ from 'lodash'
import React, { Component, createRef } from 'react'
import {
Checkbox,
Divider,
Grid,
Image,
Segment,
Sticky,
Table,
Ref,
Visibility,
} from 'semantic-ui-react'
export default class VisibilityExampleUpdateOn extends Component {
state = {
calculations: {
topVisible: false,
bottomVisible: false,
},
showWireframe: true,
}
contextRef = createRef()
handleUpdate = (e, { calculations }) => this.setState({ calculations })
handleWireframe = (e, { checked }) =>
this.setState({ showWireframe: checked })
render() {
const { calculations, showWireframe } = this.state
return (
<Ref innerRef={this.contextRef}>
<Grid columns={2}>
<Grid.Column>
{showWireframe ? (
<Segment>
{_.map(
[
'/images/wireframe/centered-paragraph.png',
'/images/wireframe/short-paragraph.png',
'/images/wireframe/media-paragraph.png',
'/images/wireframe/paragraph.png',
'/images/wireframe/centered-paragraph.png',
'/images/wireframe/short-paragraph.png',
'/images/wireframe/media-paragraph.png',
'/images/wireframe/paragraph.png',
'/images/wireframe/centered-paragraph.png',
'/images/wireframe/short-paragraph.png',
'/images/wireframe/media-paragraph.png',
'/images/wireframe/paragraph.png',
],
(src, index, images) => (
<React.Fragment key={index}>
<Image src={src} />
{index !== images.length - 1 && <Divider />}
</React.Fragment>
),
)}
</Segment>
) : null}
<Visibility
offset={[10, 10]}
onUpdate={this.handleUpdate}
updateOn='repaint'
>
<Segment>
It's a tricky <code>Segment</code>
</Segment>
</Visibility>
</Grid.Column>
<Grid.Column>
<Sticky context={this.contextRef}>
<Segment>
<Checkbox
checked={showWireframe}
label='Show Wireframe'
onChange={this.handleWireframe}
toggle
/>
<Table basic='very' celled>
<Table.Header>
<Table.Row>
<Table.HeaderCell>Calculation</Table.HeaderCell>
<Table.HeaderCell>Value</Table.HeaderCell>
</Table.Row>
</Table.Header>
<Table.Body>
<Table.Row>
<Table.Cell>topVisible</Table.Cell>
<Table.Cell>
{calculations.topVisible.toString()}
</Table.Cell>
</Table.Row>
<Table.Row>
<Table.Cell>bottomVisible</Table.Cell>
<Table.Cell>
{calculations.bottomVisible.toString()}
</Table.Cell>
</Table.Row>
</Table.Body>
</Table>
</Segment>
</Sticky>
</Grid.Column>
</Grid>
</Ref>
)
}
}