playbook_ui 12.17.0 → 12.17.1
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +1 -6
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx +5 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx +5 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx +5 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.md +1 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_multiple.jsx +5 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_lightbox/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx +5 -1
- data/lib/playbook/version.rb +2 -2
- metadata +2 -4
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx +0 -121
- data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: bfed6f95e6594050c37a607fb9cad4b2cb4d4273e5783f31d2ef3d95ac8738f2
|
|
4
|
+
data.tar.gz: ad22ab4499b111356d7f9533afd9069bb10be334cbdb01f4d2e93ad034a3d93e
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 95349ca92cf7040d34fcc7d166e32513bf34d973e1dbc2b406a2523b60ea010a390a9e28ae8cd86c7747e48acf84b71fc550a9bed7f4832babb92f96d8d26c8b
|
|
7
|
+
data.tar.gz: f74e854a1c37a6d6050e4a8913ebb3c550633a6eb894f013f8a96b188cb0cad29f7fd39cc8723a0727e47fee1ab0342c850fda11a69ff86f09647e563156d5b7
|
|
@@ -12,7 +12,6 @@ type LightboxType = {
|
|
|
12
12
|
aria?: {[key: string]: string},
|
|
13
13
|
children: React.ReactNode[] | React.ReactNode | string,
|
|
14
14
|
className?: string,
|
|
15
|
-
currentPhotoIndex?: number,
|
|
16
15
|
data?: {[key: string]: string | number},
|
|
17
16
|
description?: string | any,
|
|
18
17
|
id?: string,
|
|
@@ -32,7 +31,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
|
32
31
|
aria = {},
|
|
33
32
|
children,
|
|
34
33
|
className,
|
|
35
|
-
currentPhotoIndex,
|
|
36
34
|
data = {},
|
|
37
35
|
description,
|
|
38
36
|
id = '',
|
|
@@ -47,14 +45,11 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
|
|
|
47
45
|
} = props
|
|
48
46
|
|
|
49
47
|
const [activePhoto, setActivePhoto] = useState(initialPhoto)
|
|
48
|
+
|
|
50
49
|
useEffect(() => {
|
|
51
50
|
onChange(activePhoto)
|
|
52
51
|
},[activePhoto])
|
|
53
52
|
|
|
54
|
-
useEffect(() => {
|
|
55
|
-
setActivePhoto(currentPhotoIndex)
|
|
56
|
-
},[currentPhotoIndex])
|
|
57
|
-
|
|
58
53
|
const ariaProps = buildAriaProps(aria)
|
|
59
54
|
const dataProps = buildDataProps(data)
|
|
60
55
|
const classes = classnames(
|
|
@@ -10,14 +10,17 @@ const LightboxCompoundComponent = (props) => {
|
|
|
10
10
|
'https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80',
|
|
11
11
|
'https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,',
|
|
12
12
|
]
|
|
13
|
+
const [selectedPhoto, setSelectedPhoto] = useState(0)
|
|
13
14
|
const [showLightbox, toggleShowLightbox] = useState(false)
|
|
14
15
|
|
|
15
16
|
const handleCloseLightbox = () => {
|
|
16
17
|
toggleShowLightbox(!showLightbox)
|
|
18
|
+
setSelectedPhoto(null)
|
|
17
19
|
}
|
|
18
20
|
|
|
19
|
-
const onPhotoClick = () => {
|
|
21
|
+
const onPhotoClick = (photo) => {
|
|
20
22
|
toggleShowLightbox(!showLightbox)
|
|
23
|
+
setSelectedPhoto(photo)
|
|
21
24
|
}
|
|
22
25
|
|
|
23
26
|
const exampleStyles = {
|
|
@@ -31,6 +34,7 @@ const LightboxCompoundComponent = (props) => {
|
|
|
31
34
|
{showLightbox ? (
|
|
32
35
|
<Lightbox
|
|
33
36
|
description='Description Content Goes Here.'
|
|
37
|
+
initialPhoto={selectedPhoto}
|
|
34
38
|
onClose={handleCloseLightbox}
|
|
35
39
|
photos={photos}
|
|
36
40
|
title='Windows, Sidings, & Gutters'
|
|
@@ -10,14 +10,17 @@ const LightboxCustomHeader = (props) => {
|
|
|
10
10
|
"https://images.unsplash.com/photo-1501045337096-542a73dafa4f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2052&q=80",
|
|
11
11
|
"https://images.unsplash.com/photo-1563693998336-93c10e5d8f91?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80,",
|
|
12
12
|
];
|
|
13
|
+
const [selectedPhoto, setSelectedPhoto] = useState(0);
|
|
13
14
|
const [showLightbox, toggleShowLightbox] = useState(false);
|
|
14
15
|
|
|
15
16
|
const handleCloseLightbox = () => {
|
|
16
17
|
toggleShowLightbox(!showLightbox);
|
|
18
|
+
setSelectedPhoto(null);
|
|
17
19
|
};
|
|
18
20
|
|
|
19
|
-
const onPhotoClick = () => {
|
|
21
|
+
const onPhotoClick = (photo) => {
|
|
20
22
|
toggleShowLightbox(!showLightbox);
|
|
23
|
+
setSelectedPhoto(photo);
|
|
21
24
|
};
|
|
22
25
|
|
|
23
26
|
const exampleStyles = {
|
|
@@ -52,6 +55,7 @@ const LightboxCustomHeader = (props) => {
|
|
|
52
55
|
{showLightbox ? (
|
|
53
56
|
<Lightbox
|
|
54
57
|
description={customDescription}
|
|
58
|
+
initialPhoto={selectedPhoto}
|
|
55
59
|
navRight="All Photos"
|
|
56
60
|
onClickRight={()=> alert("Clicked!")}
|
|
57
61
|
onClose={handleCloseLightbox}
|
|
@@ -8,14 +8,17 @@ const LightboxDefault = (props) => {
|
|
|
8
8
|
const photos = [
|
|
9
9
|
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
10
10
|
]
|
|
11
|
+
const [selectedPhoto, setSelectedPhoto] = useState(0)
|
|
11
12
|
const [showLightbox, toggleShowLightbox] = useState(false)
|
|
12
13
|
|
|
13
14
|
const handleCloseLightbox = () => {
|
|
14
15
|
toggleShowLightbox(!showLightbox)
|
|
16
|
+
setSelectedPhoto(null)
|
|
15
17
|
}
|
|
16
18
|
|
|
17
|
-
const onPhotoClick = () => {
|
|
19
|
+
const onPhotoClick = (photoIndex) => {
|
|
18
20
|
toggleShowLightbox(!showLightbox)
|
|
21
|
+
setSelectedPhoto(photoIndex)
|
|
19
22
|
}
|
|
20
23
|
|
|
21
24
|
return (
|
|
@@ -24,6 +27,7 @@ const LightboxDefault = (props) => {
|
|
|
24
27
|
{showLightbox ? (
|
|
25
28
|
<Lightbox
|
|
26
29
|
icon="times"
|
|
30
|
+
initialPhoto={selectedPhoto}
|
|
27
31
|
onClose={handleCloseLightbox}
|
|
28
32
|
photos={photos}
|
|
29
33
|
{...props}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Lightbox contains several props: `photos` (an array of urls), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
|
|
1
|
+
Lightbox contains several props: `photos` (an array of urls), `initialPhoto` (a number), `onClickLeft` (an optional callback function for top left close button), `title` and `description` (string or custom components), `icon` ( optional prop for the close button in the top left of the header), `navRight` (optional prop that renders clickable text in the top right section of the header), `onClickRight` (optional callback function of navRight) and `onChange` (optional event handler prop exposing index of current photo).
|
|
@@ -29,14 +29,17 @@ const LightboxMultiple = (props) => {
|
|
|
29
29
|
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
30
30
|
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
31
31
|
]
|
|
32
|
+
const [selectedPhoto, setSelectedPhoto] = useState(0)
|
|
32
33
|
const [light, toggleLight] = useState(false)
|
|
33
34
|
|
|
34
35
|
const handleCloseLightbox = () => {
|
|
35
36
|
toggleLight(!light)
|
|
37
|
+
setSelectedPhoto(null)
|
|
36
38
|
}
|
|
37
39
|
|
|
38
|
-
const onPhotoClick = () => {
|
|
40
|
+
const onPhotoClick = (photo) => {
|
|
39
41
|
toggleLight(!light)
|
|
42
|
+
setSelectedPhoto(photo)
|
|
40
43
|
}
|
|
41
44
|
|
|
42
45
|
const exampleStyles = {
|
|
@@ -49,6 +52,7 @@ const LightboxMultiple = (props) => {
|
|
|
49
52
|
{light ? (
|
|
50
53
|
<Lightbox
|
|
51
54
|
icon="times"
|
|
55
|
+
initialPhoto={selectedPhoto}
|
|
52
56
|
onChange={(index) => console.log(`current photo index: ${index}`)}
|
|
53
57
|
onClose={handleCloseLightbox}
|
|
54
58
|
photos={photos}
|
|
@@ -2,4 +2,3 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
|
|
|
2
2
|
export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
|
|
3
3
|
export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
|
|
4
4
|
export { default as LightboxCustomHeader } from './_lightbox_custom_header'
|
|
5
|
-
export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'
|
|
@@ -18,6 +18,7 @@ test('Kit renders', () => {
|
|
|
18
18
|
data={{ testid: testId }}
|
|
19
19
|
icon="close"
|
|
20
20
|
id="test1"
|
|
21
|
+
initialPhoto={1}
|
|
21
22
|
onClose={() => {}}
|
|
22
23
|
photos={TEST_PHOTOS}
|
|
23
24
|
/>
|
|
@@ -34,6 +35,7 @@ test('Shows selected images', () => {
|
|
|
34
35
|
data={{ testid: testId }}
|
|
35
36
|
icon="close"
|
|
36
37
|
id="test1"
|
|
38
|
+
initialPhoto={1}
|
|
37
39
|
onClose={() => {}}
|
|
38
40
|
photos={TEST_PHOTOS}
|
|
39
41
|
/>
|
|
@@ -41,7 +43,7 @@ test('Shows selected images', () => {
|
|
|
41
43
|
const kit = screen.getByTestId(testId)
|
|
42
44
|
const slide = kit.getElementsByClassName('Slide')[0]
|
|
43
45
|
const image = slide.getElementsByTagName('img')[0]
|
|
44
|
-
expect(image).toHaveAttribute('src', TEST_PHOTOS[
|
|
46
|
+
expect(image).toHaveAttribute('src', TEST_PHOTOS[1])
|
|
45
47
|
|
|
46
48
|
const thumbnails = kit.getElementsByClassName('Thumbnail')
|
|
47
49
|
|
|
@@ -75,6 +77,7 @@ test('Closes on escape key', async () => {
|
|
|
75
77
|
data={{ testid: testId }}
|
|
76
78
|
icon="close"
|
|
77
79
|
id="test1"
|
|
80
|
+
initialPhoto={0}
|
|
78
81
|
onClose={mockClose}
|
|
79
82
|
photos={TEST_PHOTOS}
|
|
80
83
|
/>
|
|
@@ -103,6 +106,7 @@ test('Closes on close button', async () => {
|
|
|
103
106
|
data={{ testid: testId }}
|
|
104
107
|
icon="close"
|
|
105
108
|
id="test1"
|
|
109
|
+
initialPhoto={0}
|
|
106
110
|
onClose={mockClose}
|
|
107
111
|
photos={TEST_PHOTOS}
|
|
108
112
|
/>
|
data/lib/playbook/version.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: playbook_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 12.17.
|
|
4
|
+
version: 12.17.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Power UX
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2023-
|
|
12
|
+
date: 2023-05-01 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -1332,8 +1332,6 @@ files:
|
|
|
1332
1332
|
- app/pb_kits/playbook/pb_lightbox/docs/_description.md
|
|
1333
1333
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
|
|
1334
1334
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
|
|
1335
|
-
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
|
|
1336
|
-
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
|
|
1337
1335
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
|
|
1338
1336
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
|
|
1339
1337
|
- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
|
|
@@ -1,121 +0,0 @@
|
|
|
1
|
-
/* @flow */
|
|
2
|
-
/* eslint-disable jsx-control-statements/jsx-use-if-tag */
|
|
3
|
-
import React, { useState } from 'react'
|
|
4
|
-
import { Flex, Image, Button, Body, FlexItem } from '../../'
|
|
5
|
-
import Lightbox from '../_lightbox.tsx'
|
|
6
|
-
|
|
7
|
-
const LightboxCurrentPhoto = (props) => {
|
|
8
|
-
const photos = [
|
|
9
|
-
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
10
|
-
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
11
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
12
|
-
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
13
|
-
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
14
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
15
|
-
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
16
|
-
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
17
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
18
|
-
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
19
|
-
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
20
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
21
|
-
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
22
|
-
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
23
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
24
|
-
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
25
|
-
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
26
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
27
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
28
|
-
'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
|
|
29
|
-
'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
|
|
30
|
-
'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
|
|
31
|
-
]
|
|
32
|
-
const [light, toggleLight] = useState(false)
|
|
33
|
-
//Setting state with the index of the current slide exposed by the onChange prop
|
|
34
|
-
const [active, setActive] = useState(0)
|
|
35
|
-
//Setting state for the current photo to pass to the kit
|
|
36
|
-
const [currentPhoto, setCurrentPhoto] = useState(active)
|
|
37
|
-
|
|
38
|
-
const handleCloseLightbox = () => {
|
|
39
|
-
toggleLight(!light)
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
const onPhotoClick = () => {
|
|
43
|
-
toggleLight(!light)
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
const exampleStyles = {
|
|
47
|
-
width: "100%",
|
|
48
|
-
overflow: "auto"
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
return (
|
|
52
|
-
<div className="lightbox_doc_example_custom">
|
|
53
|
-
{light ? (
|
|
54
|
-
<>
|
|
55
|
-
<Flex alignItems="center"
|
|
56
|
-
className='custom_lightbox_sidebar'
|
|
57
|
-
justifyContent="center"
|
|
58
|
-
>
|
|
59
|
-
<Flex margin='lg'
|
|
60
|
-
orientation='column'
|
|
61
|
-
>
|
|
62
|
-
<Body marginBottom='md'>
|
|
63
|
-
This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
|
|
64
|
-
</Body>
|
|
65
|
-
<FlexItem alignSelf="center">
|
|
66
|
-
<Flex justifyContent="center">
|
|
67
|
-
<Button
|
|
68
|
-
onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
|
|
69
|
-
>
|
|
70
|
-
Back
|
|
71
|
-
</Button>
|
|
72
|
-
<Button marginLeft='sm'
|
|
73
|
-
onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
|
|
74
|
-
>
|
|
75
|
-
Next
|
|
76
|
-
</Button>
|
|
77
|
-
</Flex>
|
|
78
|
-
</FlexItem>
|
|
79
|
-
</Flex>
|
|
80
|
-
</Flex>
|
|
81
|
-
<Lightbox
|
|
82
|
-
currentPhotoIndex={currentPhoto}
|
|
83
|
-
icon="times"
|
|
84
|
-
onChange={(index) => setActive(index)}
|
|
85
|
-
onClose={handleCloseLightbox}
|
|
86
|
-
photos={photos}
|
|
87
|
-
{...props}
|
|
88
|
-
/>
|
|
89
|
-
</>
|
|
90
|
-
) : (
|
|
91
|
-
<div
|
|
92
|
-
className="PhotoViewer"
|
|
93
|
-
style={exampleStyles}
|
|
94
|
-
>
|
|
95
|
-
<Flex>
|
|
96
|
-
{photos.map((photo, index) => {
|
|
97
|
-
return (
|
|
98
|
-
<div
|
|
99
|
-
key={index}
|
|
100
|
-
onClick={() => onPhotoClick(index)}
|
|
101
|
-
>
|
|
102
|
-
<Image
|
|
103
|
-
cursor="pointer"
|
|
104
|
-
marginRight="xl"
|
|
105
|
-
rounded
|
|
106
|
-
size="lg"
|
|
107
|
-
url={photo}
|
|
108
|
-
/>
|
|
109
|
-
|
|
110
|
-
<div className="overlay" />
|
|
111
|
-
</div>
|
|
112
|
-
)
|
|
113
|
-
})}
|
|
114
|
-
</Flex>
|
|
115
|
-
</div>
|
|
116
|
-
)}
|
|
117
|
-
</div>
|
|
118
|
-
)
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
export default LightboxCurrentPhoto
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
The `currentPhotoIndex` prop allows the user to pass a number to the lightbox that will set the current slide by index. This can be leveraged if the user wants to change slides using custom buttons. To do this, the user must also make use of the current slide's index that is exposed by the `onChange` prop.
|