@instructure/ui-pages 10.2.1-snapshot-11 → 10.2.1-snapshot-12

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/CHANGELOG.md +1 -1
  2. package/package.json +13 -13
  3. package/src/Pages/README.md +753 -351
package/CHANGELOG.md CHANGED
@@ -3,7 +3,7 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
- ## [10.2.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-11) (2024-08-30)
6
+ ## [10.2.1-snapshot-12](https://github.com/instructure/instructure-ui/compare/v10.2.0...v10.2.1-snapshot-12) (2024-08-30)
7
7
 
8
8
  **Note:** Version bump only for package @instructure/ui-pages
9
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@instructure/ui-pages",
3
- "version": "10.2.1-snapshot-11",
3
+ "version": "10.2.1-snapshot-12",
4
4
  "description": "A UI component library made by Instructure Inc.",
5
5
  "author": "Instructure, Inc. Engineering and Product Design",
6
6
  "module": "./es/index.js",
@@ -23,21 +23,21 @@
23
23
  },
24
24
  "license": "MIT",
25
25
  "devDependencies": {
26
- "@instructure/ui-babel-preset": "10.2.1-snapshot-11",
27
- "@instructure/ui-color-utils": "10.2.1-snapshot-11",
28
- "@instructure/ui-test-utils": "10.2.1-snapshot-11",
29
- "@instructure/ui-themes": "10.2.1-snapshot-11"
26
+ "@instructure/ui-babel-preset": "10.2.1-snapshot-12",
27
+ "@instructure/ui-color-utils": "10.2.1-snapshot-12",
28
+ "@instructure/ui-test-utils": "10.2.1-snapshot-12",
29
+ "@instructure/ui-themes": "10.2.1-snapshot-12"
30
30
  },
31
31
  "dependencies": {
32
32
  "@babel/runtime": "^7.24.5",
33
- "@instructure/console": "10.2.1-snapshot-11",
34
- "@instructure/emotion": "10.2.1-snapshot-11",
35
- "@instructure/shared-types": "10.2.1-snapshot-11",
36
- "@instructure/ui-dom-utils": "10.2.1-snapshot-11",
37
- "@instructure/ui-prop-types": "10.2.1-snapshot-11",
38
- "@instructure/ui-react-utils": "10.2.1-snapshot-11",
39
- "@instructure/ui-utils": "10.2.1-snapshot-11",
40
- "@instructure/ui-view": "10.2.1-snapshot-11",
33
+ "@instructure/console": "10.2.1-snapshot-12",
34
+ "@instructure/emotion": "10.2.1-snapshot-12",
35
+ "@instructure/shared-types": "10.2.1-snapshot-12",
36
+ "@instructure/ui-dom-utils": "10.2.1-snapshot-12",
37
+ "@instructure/ui-prop-types": "10.2.1-snapshot-12",
38
+ "@instructure/ui-react-utils": "10.2.1-snapshot-12",
39
+ "@instructure/ui-utils": "10.2.1-snapshot-12",
40
+ "@instructure/ui-view": "10.2.1-snapshot-12",
41
41
  "prop-types": "^15.8.1"
42
42
  },
43
43
  "peerDependencies": {
package/src/Pages/README.md CHANGED
@@ -4,428 +4,831 @@ describes: Pages
4
4
 
5
5
  The Pages component can be used to render Paginated content that does not fit into one page. Each page content should have at least one focusable element (e.g. the back button) otherwise the focus will be lost.
6
6
 
7
- ```js
8
- ---
9
- type: example
10
- ---
11
- class Example extends React.Component {
12
- constructor (props) {
13
- super(props)
7
+ - ```js
8
+ class Example extends React.Component {
9
+ constructor(props) {
10
+ super(props)
14
11
 
15
- this.state = {
16
- activePageIndex: 0
12
+ this.state = {
13
+ activePageIndex: 0
14
+ }
17
15
  }
18
- }
19
16
 
20
- handlePagesBackButtonClick = (activePageIndex) => {
21
- this.setState({
22
- activePageIndex
23
- })
24
- }
17
+ handlePagesBackButtonClick = (activePageIndex) => {
18
+ this.setState({
19
+ activePageIndex
20
+ })
21
+ }
25
22
 
26
- handleLinkClick = () => {
27
- this.setState({
28
- activePageIndex: 1
29
- })
30
- }
23
+ handleLinkClick = () => {
24
+ this.setState({
25
+ activePageIndex: 1
26
+ })
27
+ }
31
28
 
32
- renderBackButton (navigateToPreviousPage) {
33
- return (
34
- <IconButton
35
- onClick={navigateToPreviousPage}
36
- renderIcon={IconArrowOpenStartLine}
37
- screenReaderLabel="Back to Page One"
38
- withBorder={false}
39
- withBackground={false}
40
- />
41
- )
29
+ renderBackButton(navigateToPreviousPage) {
30
+ return (
31
+ <IconButton
32
+ onClick={navigateToPreviousPage}
33
+ renderIcon={IconArrowOpenStartLine}
34
+ screenReaderLabel="Back to Page One"
35
+ withBorder={false}
36
+ withBackground={false}
37
+ />
38
+ )
39
+ }
40
+
41
+ render() {
42
+ return (
43
+ <Pages
44
+ activePageIndex={this.state.activePageIndex}
45
+ onPageIndexChange={this.handlePagesBackButtonClick}
46
+ >
47
+ <Pages.Page>
48
+ {(history, navigateToPreviousPage) => {
49
+ return (
50
+ <div>
51
+ <View as="div" textAlign="end">
52
+ <Link isWithinText={false} onClick={this.handleLinkClick}>
53
+ Go to Page Two
54
+ </Link>
55
+ </View>
56
+ <View as="div" margin="large 0 0 0" textAlign="center">
57
+ <Text as="div">Page One</Text>
58
+ </View>
59
+ </div>
60
+ )
61
+ }}
62
+ </Pages.Page>
63
+ <Pages.Page>
64
+ {(history, navigateToPreviousPage) => {
65
+ return (
66
+ <div>
67
+ <View as="div" maxWidth="7rem">
68
+ {history.length > 1 &&
69
+ this.renderBackButton(navigateToPreviousPage)}
70
+ </View>
71
+ <View as="div" margin="large 0 0 0" textAlign="center">
72
+ Hey Look - Page Two
73
+ </View>
74
+ </div>
75
+ )
76
+ }}
77
+ </Pages.Page>
78
+ </Pages>
79
+ )
80
+ }
42
81
  }
43
82
 
44
- render () {
83
+ render(<Example />)
84
+ ```
85
+
86
+ - ```js
87
+ const Example = () => {
88
+ const [activePageIndex, setActivePageIndex] = useState(0)
89
+
90
+ const handlePagesBackButtonClick = (activePageIndex) => {
91
+ setActivePageIndex(activePageIndex)
92
+ }
93
+
94
+ const handleLinkClick = () => {
95
+ setActivePageIndex(1)
96
+ }
97
+
98
+ const renderBackButton = (navigateToPreviousPage) => {
99
+ return (
100
+ <IconButton
101
+ onClick={navigateToPreviousPage}
102
+ renderIcon={IconArrowOpenStartLine}
103
+ screenReaderLabel="Back to Page One"
104
+ withBorder={false}
105
+ withBackground={false}
106
+ />
107
+ )
108
+ }
109
+
45
110
  return (
46
111
  <Pages
47
- activePageIndex={this.state.activePageIndex}
48
- onPageIndexChange={this.handlePagesBackButtonClick}
112
+ activePageIndex={activePageIndex}
113
+ onPageIndexChange={handlePagesBackButtonClick}
49
114
  >
50
115
  <Pages.Page>
51
- {(history, navigateToPreviousPage) => {
52
- return (
53
- <div>
54
- <View as="div" textAlign="end">
55
- <Link
56
- isWithinText={false}
57
- onClick={this.handleLinkClick}
58
- >
59
- Go to Page Two
60
- </Link>
61
- </View>
62
- <View as="div" margin="large 0 0 0" textAlign="center">
63
- <Text as="div">Page One</Text>
64
- </View>
65
- </div>
66
- )
67
- }}
116
+ {(history, navigateToPreviousPage) => {
117
+ return (
118
+ <div>
119
+ <View as="div" textAlign="end">
120
+ <Link isWithinText={false} onClick={handleLinkClick}>
121
+ Go to Page Two
122
+ </Link>
123
+ </View>
124
+ <View as="div" margin="large 0 0 0" textAlign="center">
125
+ <Text as="div">Page One</Text>
126
+ </View>
127
+ </div>
128
+ )
129
+ }}
68
130
  </Pages.Page>
69
131
  <Pages.Page>
70
132
  {(history, navigateToPreviousPage) => {
71
- return (
72
- <div>
73
- <View as="div" maxWidth="7rem">
74
- {history.length > 1 && (
75
- this.renderBackButton(navigateToPreviousPage)
76
- )}
77
- </View>
78
- <View as="div" margin="large 0 0 0" textAlign="center">
79
- Hey Look - Page Two
80
- </View>
81
- </div>
82
- )
83
- }}
133
+ return (
134
+ <div>
135
+ <View as="div" maxWidth="7rem">
136
+ {history.length > 1 &&
137
+ renderBackButton(navigateToPreviousPage)}
138
+ </View>
139
+ <View as="div" margin="large 0 0 0" textAlign="center">
140
+ Hey Look - Page Two
141
+ </View>
142
+ </div>
143
+ )
144
+ }}
84
145
  </Pages.Page>
85
146
  </Pages>
86
147
  )
87
148
  }
88
- }
89
149
 
90
- render(<Example />)
91
- ```
150
+ render(<Example />)
151
+ ```
92
152
 
93
- ```js
94
- ---
95
- type: example
96
- ---
97
- class Example extends React.Component {
98
- constructor (props) {
99
- super(props)
153
+ ###
154
+
155
+ - ```js
156
+ class Example extends React.Component {
157
+ constructor(props) {
158
+ super(props)
100
159
 
101
- this.state = {
102
- activePageIndex: 0
160
+ this.state = {
161
+ activePageIndex: 0
162
+ }
103
163
  }
104
- }
105
164
 
106
- handlePagesBackButtonClick = (activePageIndex) => {
107
- this.setState({
108
- activePageIndex
109
- })
110
- }
165
+ handlePagesBackButtonClick = (activePageIndex) => {
166
+ this.setState({
167
+ activePageIndex
168
+ })
169
+ }
111
170
 
112
- handleViewDetailsClick = () => {
113
- this.setState({
114
- activePageIndex: 1
115
- })
116
- }
171
+ handleViewDetailsClick = () => {
172
+ this.setState({
173
+ activePageIndex: 1
174
+ })
175
+ }
117
176
 
118
- renderBackButton (navigateToPreviousPage) {
119
- return (
120
- <IconButton
121
- onClick={navigateToPreviousPage}
122
- renderIcon={IconArrowStartLine}
123
- screenReaderLabel="Back"
124
- withBorder={false}
125
- withBackground={false}
126
- />
127
- )
177
+ renderBackButton(navigateToPreviousPage) {
178
+ return (
179
+ <IconButton
180
+ onClick={navigateToPreviousPage}
181
+ renderIcon={IconArrowStartLine}
182
+ screenReaderLabel="Back"
183
+ withBorder={false}
184
+ withBackground={false}
185
+ />
186
+ )
187
+ }
188
+
189
+ render() {
190
+ return (
191
+ <Pages
192
+ activePageIndex={this.state.activePageIndex}
193
+ onPageIndexChange={this.handlePagesBackButtonClick}
194
+ >
195
+ <Pages.Page>
196
+ {(history, navigateToPreviousPage) => {
197
+ return (
198
+ <div>
199
+ {history.length > 1 &&
200
+ this.renderBackButton(navigateToPreviousPage)}
201
+ <View display="inline-block" margin="large">
202
+ <Heading level="h1">Hello World</Heading>
203
+ </View>
204
+ <Button onClick={this.handleViewDetailsClick} color="primary">
205
+ View Details
206
+ </Button>
207
+ </div>
208
+ )
209
+ }}
210
+ </Pages.Page>
211
+ <Pages.Page>
212
+ {(history, navigateToPreviousPage) => {
213
+ return (
214
+ <div>
215
+ {history.length > 1 &&
216
+ this.renderBackButton(navigateToPreviousPage)}
217
+ <View display="inline-block" margin="large">
218
+ <Heading level="h1">Foo Bar Baz Qux</Heading>
219
+ </View>
220
+ <FormField id="name" label="Name">
221
+ <input id="name" />
222
+ </FormField>
223
+ </div>
224
+ )
225
+ }}
226
+ </Pages.Page>
227
+ </Pages>
228
+ )
229
+ }
128
230
  }
129
231
 
130
- render () {
232
+ render(<Example />)
233
+ ```
234
+
235
+ - ```js
236
+ const Example = () => {
237
+ const [activePageIndex, setActivePageIndex] = useState(0)
238
+
239
+ const handlePagesBackButtonClick = (activePageIndex) => {
240
+ setActivePageIndex(activePageIndex)
241
+ }
242
+
243
+ const handleViewDetailsClick = () => {
244
+ setActivePageIndex(1)
245
+ }
246
+
247
+ const renderBackButton = (navigateToPreviousPage) => {
248
+ return (
249
+ <IconButton
250
+ onClick={navigateToPreviousPage}
251
+ renderIcon={IconArrowStartLine}
252
+ screenReaderLabel="Back"
253
+ withBorder={false}
254
+ withBackground={false}
255
+ />
256
+ )
257
+ }
258
+
131
259
  return (
132
260
  <Pages
133
- activePageIndex={this.state.activePageIndex}
134
- onPageIndexChange={this.handlePagesBackButtonClick}
261
+ activePageIndex={activePageIndex}
262
+ onPageIndexChange={handlePagesBackButtonClick}
135
263
  >
136
264
  <Pages.Page>
137
- {(history, navigateToPreviousPage) => {
138
- return (
139
- <div>
140
- {history.length > 1 && (
141
- this.renderBackButton(navigateToPreviousPage)
142
- )}
143
- <View display="inline-block" margin="large">
144
- <Heading level="h1">Hello World</Heading>
145
- </View>
146
- <Button
147
- onClick={this.handleViewDetailsClick}
148
- color="primary"
149
- >
150
- View Details
151
- </Button>
152
- </div>
153
- )
154
- }}
265
+ {(history, navigateToPreviousPage) => {
266
+ return (
267
+ <div>
268
+ {history.length > 1 && renderBackButton(navigateToPreviousPage)}
269
+ <View display="inline-block" margin="large">
270
+ <Heading level="h1">Hello World</Heading>
271
+ </View>
272
+ <Button onClick={handleViewDetailsClick} color="primary">
273
+ View Details
274
+ </Button>
275
+ </div>
276
+ )
277
+ }}
155
278
  </Pages.Page>
156
279
  <Pages.Page>
157
- {(history, navigateToPreviousPage) => {
158
- return (
159
- <div>
160
- {history.length > 1 && (
161
- this.renderBackButton(navigateToPreviousPage)
162
- )}
163
- <View display="inline-block" margin="large">
164
- <Heading level="h1">Foo Bar Baz Qux</Heading>
165
- </View>
166
- <FormField id="name" label="Name">
167
- <input id="name"/>
168
- </FormField>
169
- </div>
170
- )
171
- }}
280
+ {(history, navigateToPreviousPage) => {
281
+ return (
282
+ <div>
283
+ {history.length > 1 && renderBackButton(navigateToPreviousPage)}
284
+ <View display="inline-block" margin="large">
285
+ <Heading level="h1">Foo Bar Baz Qux</Heading>
286
+ </View>
287
+ <FormField id="name" label="Name">
288
+ <input id="name" />
289
+ </FormField>
290
+ </div>
291
+ )
292
+ }}
172
293
  </Pages.Page>
173
294
  </Pages>
174
295
  )
175
296
  }
176
- }
177
297
 
178
- render(<Example />)
179
- ```
298
+ render(<Example />)
299
+ ```
180
300
 
181
- ```js
182
- ---
183
- type: example
184
- ---
185
- const USERS = [
186
- {
187
- id: 1,
188
- name: 'Fred Flintstone',
189
- email: 'fred@example.com',
190
- age: 41,
191
- spouse: 2
192
- },
193
- {
194
- id: 2,
195
- name: 'Wilma Flintstone',
196
- email: 'wilma@example.com',
197
- age: 40,
198
- spouse: 1
199
- },
200
- {
201
- id: 3,
202
- name: 'Barney Rubble',
203
- email: 'barney@example.com',
204
- age: 42,
205
- spouse: 4
206
- },
207
- {
208
- id: 4,
209
- name: 'Betty Rubble',
210
- email: 'betty@example.com',
211
- age: 38,
212
- spouse: 3
213
- },
214
- {
215
- id: 5,
216
- name: 'Pebbles Flintstone',
217
- age: 2,
218
- parents: [1, 2]
219
- },
220
- {
221
- id: 6,
222
- name: 'Bamm-Bamm Rubble',
223
- age: 1,
224
- parents: [3, 4]
225
- }
226
- ]
301
+ ###
302
+
303
+ - ```js
304
+ const USERS = [
305
+ {
306
+ id: 1,
307
+ name: 'Fred Flintstone',
308
+ email: 'fred@example.com',
309
+ age: 41,
310
+ spouse: 2
311
+ },
312
+ {
313
+ id: 2,
314
+ name: 'Wilma Flintstone',
315
+ email: 'wilma@example.com',
316
+ age: 40,
317
+ spouse: 1
318
+ },
319
+ {
320
+ id: 3,
321
+ name: 'Barney Rubble',
322
+ email: 'barney@example.com',
323
+ age: 42,
324
+ spouse: 4
325
+ },
326
+ {
327
+ id: 4,
328
+ name: 'Betty Rubble',
329
+ email: 'betty@example.com',
330
+ age: 38,
331
+ spouse: 3
332
+ },
333
+ {
334
+ id: 5,
335
+ name: 'Pebbles Flintstone',
336
+ age: 2,
337
+ parents: [1, 2]
338
+ },
339
+ {
340
+ id: 6,
341
+ name: 'Bamm-Bamm Rubble',
342
+ age: 1,
343
+ parents: [3, 4]
344
+ }
345
+ ]
227
346
 
228
- class Example extends React.Component {
229
- constructor (props) {
230
- super(props)
347
+ class Example extends React.Component {
348
+ constructor(props) {
349
+ super(props)
231
350
 
232
- this.state = {
233
- showPopover: false,
234
- activePageIndex: 0
351
+ this.state = {
352
+ showPopover: false,
353
+ activePageIndex: 0
354
+ }
235
355
  }
236
- }
237
356
 
238
- findUser (id) {
239
- return USERS.find((user) => user.id === id)
240
- }
357
+ findUser(id) {
358
+ return USERS.find((user) => user.id === id)
359
+ }
241
360
 
242
- setActivePageIndex (index) {
243
- this.setState({
244
- activePageIndex: index,
245
- lastPageIndex: this.state.activePageIndex
246
- })
247
- }
361
+ setActivePageIndex(index) {
362
+ this.setState({
363
+ activePageIndex: index,
364
+ lastPageIndex: this.state.activePageIndex
365
+ })
366
+ }
248
367
 
249
- handlePagesBackButtonClick = (activePageIndex) => {
250
- this.setActivePageIndex(activePageIndex)
251
- }
368
+ handlePagesBackButtonClick = (activePageIndex) => {
369
+ this.setActivePageIndex(activePageIndex)
370
+ }
252
371
 
253
- handleDetailsButtonClick = (activePageIndex) => {
254
- this.setActivePageIndex(activePageIndex)
255
- }
372
+ handleDetailsButtonClick = (activePageIndex) => {
373
+ this.setActivePageIndex(activePageIndex)
374
+ }
256
375
 
257
- showPopover = () => {
258
- this.setState({
259
- showPopover: true
260
- })
261
- }
376
+ showPopover = () => {
377
+ this.setState({
378
+ showPopover: true
379
+ })
380
+ }
262
381
 
263
- hidePopover = () => {
264
- this.setState({
265
- showPopover: false,
266
- activePageIndex: 0
267
- })
268
- }
382
+ hidePopover = () => {
383
+ this.setState({
384
+ showPopover: false,
385
+ activePageIndex: 0
386
+ })
387
+ }
269
388
 
270
- renderNavigation () {
271
- this._usersNav = []
272
- return (
273
- <div>
274
- {USERS.map((user, index) => {
275
- return (
276
- <div key={index}>{this.renderUserMedia(user)}</div>
277
- )
278
- })}
279
- </div>
280
- )
281
- }
389
+ renderNavigation() {
390
+ this._usersNav = []
391
+ return (
392
+ <div>
393
+ {USERS.map((user, index) => {
394
+ return <div key={index}>{this.renderUserMedia(user)}</div>
395
+ })}
396
+ </div>
397
+ )
398
+ }
282
399
 
283
- renderUserMedia (user) {
284
- return (
285
- <View as="div" margin="small 0">
286
- <Link
287
- isWithinText={false}
288
- onClick={this.handleDetailsButtonClick.bind(this, user.id)}
289
- elementRef={(el) => { this._usersNav[user.id] = el }}
290
- >
291
- <Byline description={user.name}>
292
- <Avatar name={user.name} />
293
- </Byline>
294
- </Link>
295
- </View>
296
- )
297
- }
400
+ renderUserMedia(user) {
401
+ return (
402
+ <View as="div" margin="small 0">
403
+ <Link
404
+ isWithinText={false}
405
+ onClick={this.handleDetailsButtonClick.bind(this, user.id)}
406
+ elementRef={(el) => {
407
+ this._usersNav[user.id] = el
408
+ }}
409
+ >
410
+ <Byline description={user.name}>
411
+ <Avatar name={user.name} />
412
+ </Byline>
413
+ </Link>
414
+ </View>
415
+ )
416
+ }
298
417
 
299
- renderNavigationButton (history, navigateToPreviousPage) {
300
- return history.length === 1 ? (
301
- this.renderCloseButton()
302
- ) : (
303
- this.renderBackButton(navigateToPreviousPage)
304
- )
305
- }
418
+ renderNavigationButton(history, navigateToPreviousPage) {
419
+ return history.length === 1
420
+ ? this.renderCloseButton()
421
+ : this.renderBackButton(navigateToPreviousPage)
422
+ }
306
423
 
307
- renderBackButton (navigateToPreviousPage) {
308
- return (
309
- <IconButton
310
- onClick={navigateToPreviousPage}
311
- renderIcon={IconArrowOpenStartLine}
312
- screenReaderLabel="Back"
313
- withBorder={false}
314
- withBackground={false}
315
- />
316
- )
317
- }
424
+ renderBackButton(navigateToPreviousPage) {
425
+ return (
426
+ <IconButton
427
+ onClick={navigateToPreviousPage}
428
+ renderIcon={IconArrowOpenStartLine}
429
+ screenReaderLabel="Back"
430
+ withBorder={false}
431
+ withBackground={false}
432
+ />
433
+ )
434
+ }
318
435
 
319
- renderCloseButton () {
320
- return (
321
- <IconButton
322
- onClick={this.hidePopover}
323
- renderIcon={IconXLine}
324
- withBorder={false}
325
- withBackground={false}
326
- screenReaderLabel="Close"
327
- />
328
- )
329
- }
436
+ renderCloseButton() {
437
+ return (
438
+ <IconButton
439
+ onClick={this.hidePopover}
440
+ renderIcon={IconXLine}
441
+ withBorder={false}
442
+ withBackground={false}
443
+ screenReaderLabel="Close"
444
+ />
445
+ )
446
+ }
330
447
 
331
- render () {
332
- return (
333
- <View padding="large 0">
334
- <Popover
335
- on="click"
336
- isShowingContent={this.state.showPopover}
337
- shouldContainFocus
338
- shouldReturnFocus
339
- screenReaderLabel="Pages Dialog Example"
340
- placement="center end"
341
- onHideContent={this.hidePopover}
342
- renderTrigger={
343
- <Button onClick={this.showPopover}>
344
- View Users
345
- </Button>
346
- }
347
- >
348
- <Pages
349
- activePageIndex={this.state.activePageIndex}
350
- onPageIndexChange={this.handlePagesBackButtonClick}
448
+ render() {
449
+ return (
450
+ <View padding="large 0">
451
+ <Popover
452
+ on="click"
453
+ isShowingContent={this.state.showPopover}
454
+ shouldContainFocus
455
+ shouldReturnFocus
456
+ screenReaderLabel="Pages Dialog Example"
457
+ placement="center end"
458
+ onHideContent={this.hidePopover}
459
+ renderTrigger={
460
+ <Button onClick={this.showPopover}>View Users</Button>
461
+ }
351
462
  >
352
- <Pages.Page
353
- defaultFocusElement={() => this._usersNav[this.state.lastPageIndex]}
463
+ <Pages
464
+ activePageIndex={this.state.activePageIndex}
465
+ onPageIndexChange={this.handlePagesBackButtonClick}
354
466
  >
355
- {(history, navigateToPreviousPage) => {
356
- return (
357
- <div>
358
- <Grid hAlign="space-between">
359
- <Grid.Row>
360
- <Grid.Col width={9}>
361
- <Heading level="h1">Users</Heading>
362
- </Grid.Col>
363
- <Grid.Col width={3} textAlign="end">
364
- {this.renderNavigationButton(history, navigateToPreviousPage)}
365
- </Grid.Col>
366
- </Grid.Row>
367
- </Grid>
368
- {this.renderNavigation()}
369
- </div>
370
- )
371
- }}
372
- </Pages.Page>
373
- {USERS.map((user, index) => {
374
- return (
375
- <Pages.Page key={index}>
467
+ <Pages.Page
468
+ defaultFocusElement={() =>
469
+ this._usersNav[this.state.lastPageIndex]
470
+ }
471
+ >
376
472
  {(history, navigateToPreviousPage) => {
377
473
  return (
378
474
  <div>
379
475
  <Grid hAlign="space-between">
380
476
  <Grid.Row>
381
477
  <Grid.Col width={9}>
382
- <Heading level="h1">User Details</Heading>
478
+ <Heading level="h1">Users</Heading>
383
479
  </Grid.Col>
384
480
  <Grid.Col width={3} textAlign="end">
385
- {this.renderNavigationButton(history, navigateToPreviousPage)}
481
+ {this.renderNavigationButton(
482
+ history,
483
+ navigateToPreviousPage
484
+ )}
386
485
  </Grid.Col>
387
486
  </Grid.Row>
388
487
  </Grid>
389
- <Byline description={user.name}>
390
- <Avatar name={user.name} />
391
- </Byline>
392
- <Table caption="User details">
393
- <Table.Body>
394
- <Table.Row>
395
- <Table.RowHeader>Age</Table.RowHeader>
396
- <Table.Cell>{user.age}</Table.Cell>
397
- </Table.Row>
488
+ {this.renderNavigation()}
489
+ </div>
490
+ )
491
+ }}
492
+ </Pages.Page>
493
+ {USERS.map((user, index) => {
494
+ return (
495
+ <Pages.Page key={index}>
496
+ {(history, navigateToPreviousPage) => {
497
+ return (
498
+ <div>
499
+ <Grid hAlign="space-between">
500
+ <Grid.Row>
501
+ <Grid.Col width={9}>
502
+ <Heading level="h1">User Details</Heading>
503
+ </Grid.Col>
504
+ <Grid.Col width={3} textAlign="end">
505
+ {this.renderNavigationButton(
506
+ history,
507
+ navigateToPreviousPage
508
+ )}
509
+ </Grid.Col>
510
+ </Grid.Row>
511
+ </Grid>
512
+ <Byline description={user.name}>
513
+ <Avatar name={user.name} />
514
+ </Byline>
515
+ <Table caption="User details">
516
+ <Table.Body>
517
+ <Table.Row>
518
+ <Table.RowHeader>Age</Table.RowHeader>
519
+ <Table.Cell>{user.age}</Table.Cell>
520
+ </Table.Row>
521
+ </Table.Body>
522
+ </Table>
398
523
  {user.email && (
399
- <Table.Row>
400
- <Table.RowHeader>Email</Table.RowHeader>
401
- <Table.Cell>{user.email}</Table.Cell>
402
- </Table.Row>
524
+ <Table caption="User details">
525
+ <Table.Body>
526
+ <Table.Row>
527
+ <Table.RowHeader>Email</Table.RowHeader>
528
+ <Table.Cell>{user.email}</Table.Cell>
529
+ </Table.Row>
530
+ </Table.Body>
531
+ </Table>
403
532
  )}
404
533
  {!isNaN(user.spouse) && (
405
- <Table.Row>
406
- <Table.RowHeader>Spouse</Table.RowHeader>
407
- <Table.Cell>
408
- {this.renderUserMedia(this.findUser(user.spouse))}
409
- </Table.Cell>
410
- </Table.Row>
534
+ <Table caption="User details">
535
+ <Table.Body>
536
+ <Table.Row>
537
+ <Table.RowHeader>Spouse</Table.RowHeader>
538
+ <Table.Cell>
539
+ {this.renderUserMedia(
540
+ this.findUser(user.spouse)
541
+ )}
542
+ </Table.Cell>
543
+ </Table.Row>
544
+ </Table.Body>
545
+ </Table>
411
546
  )}
412
547
  {Array.isArray(user.parents) && (
548
+ <Table caption="User details">
549
+ <Table.Body>
550
+ <Table.Row>
551
+ <Table.RowHeader>Parents</Table.RowHeader>
552
+ <Table.Cell>
553
+ {user.parents.map((parent, index) => {
554
+ return (
555
+ <div key={index}>
556
+ {this.renderUserMedia(
557
+ this.findUser(parent)
558
+ )}
559
+ </div>
560
+ )
561
+ })}
562
+ </Table.Cell>
563
+ </Table.Row>
564
+ </Table.Body>
565
+ </Table>
566
+ )}
567
+ </div>
568
+ )
569
+ }}
570
+ </Pages.Page>
571
+ )
572
+ })}
573
+ </Pages>
574
+ </Popover>
575
+ </View>
576
+ )
577
+ }
578
+ }
579
+
580
+ render(<Example />)
581
+ ```
582
+
583
+ - ```js
584
+ const USERS = [
585
+ {
586
+ id: 1,
587
+ name: 'Fred Flintstone',
588
+ email: 'fred@example.com',
589
+ age: 41,
590
+ spouse: 2
591
+ },
592
+ {
593
+ id: 2,
594
+ name: 'Wilma Flintstone',
595
+ email: 'wilma@example.com',
596
+ age: 40,
597
+ spouse: 1
598
+ },
599
+ {
600
+ id: 3,
601
+ name: 'Barney Rubble',
602
+ email: 'barney@example.com',
603
+ age: 42,
604
+ spouse: 4
605
+ },
606
+ {
607
+ id: 4,
608
+ name: 'Betty Rubble',
609
+ email: 'betty@example.com',
610
+ age: 38,
611
+ spouse: 3
612
+ },
613
+ {
614
+ id: 5,
615
+ name: 'Pebbles Flintstone',
616
+ age: 2,
617
+ parents: [1, 2]
618
+ },
619
+ {
620
+ id: 6,
621
+ name: 'Bamm-Bamm Rubble',
622
+ age: 1,
623
+ parents: [3, 4]
624
+ }
625
+ ]
626
+ const Example = () => {
627
+ const [showPopover, setShowPopover] = useState(false)
628
+ const [activePageIndex, setActivePageIndex] = useState(0)
629
+ const usersNavRef = useRef({})
630
+ const lastPageIndexRef = useRef(0)
631
+
632
+ const findUser = (id) => {
633
+ return USERS.find((user) => user.id === id)
634
+ }
635
+
636
+ const updateActivePageIndex = (index) => {
637
+ const previousIndex = activePageIndex
638
+ lastPageIndexRef.current = previousIndex
639
+ setActivePageIndex(index)
640
+ }
641
+
642
+ const handlePagesBackButtonClick = (activePageIndex) => {
643
+ updateActivePageIndex(activePageIndex)
644
+ }
645
+
646
+ const handleDetailsButtonClick = (activePageIndex) => {
647
+ updateActivePageIndex(activePageIndex)
648
+ }
649
+
650
+ const displayPopover = () => {
651
+ setShowPopover(true)
652
+ }
653
+
654
+ const hidePopover = () => {
655
+ setShowPopover(false)
656
+ setActivePageIndex(0)
657
+ }
658
+
659
+ const renderNavigation = () => {
660
+ return (
661
+ <div>
662
+ {USERS.map((user, index) => {
663
+ return <div key={index}>{renderUserMedia(user)}</div>
664
+ })}
665
+ </div>
666
+ )
667
+ }
668
+
669
+ const renderUserMedia = (user) => {
670
+ return (
671
+ <View as="div" margin="small 0">
672
+ <Link
673
+ isWithinText={false}
674
+ onClick={() => handleDetailsButtonClick(user.id)}
675
+ elementRef={(el) => {
676
+ usersNavRef.current[user.id] = el
677
+ }}
678
+ >
679
+ <Byline description={user.name}>
680
+ <Avatar name={user.name} />
681
+ </Byline>
682
+ </Link>
683
+ </View>
684
+ )
685
+ }
686
+
687
+ const renderNavigationButton = (history, navigateToPreviousPage) => {
688
+ return history.length === 1
689
+ ? renderCloseButton()
690
+ : renderBackButton(navigateToPreviousPage)
691
+ }
692
+
693
+ const renderBackButton = (navigateToPreviousPage) => {
694
+ return (
695
+ <IconButton
696
+ onClick={navigateToPreviousPage}
697
+ renderIcon={IconArrowOpenStartLine}
698
+ screenReaderLabel="Back"
699
+ withBorder={false}
700
+ withBackground={false}
701
+ />
702
+ )
703
+ }
704
+
705
+ const renderCloseButton = () => {
706
+ return (
707
+ <IconButton
708
+ onClick={hidePopover}
709
+ renderIcon={IconXLine}
710
+ withBorder={false}
711
+ withBackground={false}
712
+ screenReaderLabel="Close"
713
+ />
714
+ )
715
+ }
716
+
717
+ return (
718
+ <View padding="large 0">
719
+ <Popover
720
+ on="click"
721
+ isShowingContent={showPopover}
722
+ shouldContainFocus
723
+ shouldReturnFocus
724
+ screenReaderLabel="Pages Dialog Example"
725
+ placement="center end"
726
+ onHideContent={hidePopover}
727
+ renderTrigger={<Button onClick={displayPopover}>View Users</Button>}
728
+ >
729
+ <Pages
730
+ activePageIndex={activePageIndex}
731
+ onPageIndexChange={handlePagesBackButtonClick}
732
+ >
733
+ <Pages.Page
734
+ defaultFocusElement={() =>
735
+ usersNavRef.current[lastPageIndexRef.current]
736
+ }
737
+ >
738
+ {(history, navigateToPreviousPage) => {
739
+ return (
740
+ <div>
741
+ <Grid hAlign="space-between">
742
+ <Grid.Row>
743
+ <Grid.Col width={9}>
744
+ <Heading level="h1">Users</Heading>
745
+ </Grid.Col>
746
+ <Grid.Col width={3} textAlign="end">
747
+ {renderNavigationButton(
748
+ history,
749
+ navigateToPreviousPage
750
+ )}
751
+ </Grid.Col>
752
+ </Grid.Row>
753
+ </Grid>
754
+ {renderNavigation()}
755
+ </div>
756
+ )
757
+ }}
758
+ </Pages.Page>
759
+ {USERS.map((user, index) => {
760
+ return (
761
+ <Pages.Page key={index}>
762
+ {(history, navigateToPreviousPage) => {
763
+ return (
764
+ <div>
765
+ <Grid hAlign="space-between">
766
+ <Grid.Row>
767
+ <Grid.Col width={9}>
768
+ <Heading level="h1">User Details</Heading>
769
+ </Grid.Col>
770
+ <Grid.Col width={3} textAlign="end">
771
+ {renderNavigationButton(
772
+ history,
773
+ navigateToPreviousPage
774
+ )}
775
+ </Grid.Col>
776
+ </Grid.Row>
777
+ </Grid>
778
+ <Byline description={user.name}>
779
+ <Avatar name={user.name} />
780
+ </Byline>
781
+ <Table caption="User details">
782
+ <Table.Body>
413
783
  <Table.Row>
414
- <Table.RowHeader>Parents</Table.RowHeader>
415
- <Table.Cell>
416
- {user.parents.map((parent, index) => {
417
- return (
418
- <div key={index}>{this.renderUserMedia(this.findUser(parent))}</div>
419
- )
420
- })}
421
- </Table.Cell>
784
+ <Table.RowHeader>Age</Table.RowHeader>
785
+ <Table.Cell>{user.age}</Table.Cell>
422
786
  </Table.Row>
423
- )}
424
- </Table.Body>
425
- </Table>
426
- </div>
427
- )
428
- }}
787
+ </Table.Body>
788
+ </Table>
789
+ {user.email && (
790
+ <Table caption="User details">
791
+ <Table.Body>
792
+ <Table.Row>
793
+ <Table.RowHeader>Email</Table.RowHeader>
794
+ <Table.Cell>{user.email}</Table.Cell>
795
+ </Table.Row>
796
+ </Table.Body>
797
+ </Table>
798
+ )}
799
+ {!isNaN(user.spouse) && (
800
+ <Table caption="User details">
801
+ <Table.Body>
802
+ <Table.Row>
803
+ <Table.RowHeader>Spouse</Table.RowHeader>
804
+ <Table.Cell>
805
+ {renderUserMedia(findUser(user.spouse))}
806
+ </Table.Cell>
807
+ </Table.Row>
808
+ </Table.Body>
809
+ </Table>
810
+ )}
811
+ {Array.isArray(user.parents) && (
812
+ <Table caption="User details">
813
+ <Table.Body>
814
+ <Table.Row>
815
+ <Table.RowHeader>Parents</Table.RowHeader>
816
+ <Table.Cell>
817
+ {user.parents.map((parent, index) => {
818
+ return (
819
+ <div key={index}>
820
+ {renderUserMedia(findUser(parent))}
821
+ </div>
822
+ )
823
+ })}
824
+ </Table.Cell>
825
+ </Table.Row>
826
+ </Table.Body>
827
+ </Table>
828
+ )}
829
+ </div>
830
+ )
831
+ }}
429
832
  </Pages.Page>
430
833
  )
431
834
  })}
@@ -434,7 +837,6 @@ class Example extends React.Component {
434
837
  </View>
435
838
  )
436
839
  }
437
- }
438
840
 
439
- render(<Example />)
440
- ```
841
+ render(<Example />)
842
+ ```