playbook_ui 12.17.0.pre.alpha.lightboxcurrentPhotoIndex582 → 12.17.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: bed2313044d6ca33a9bb666afe1c6305e5d99b9f1de9d809d28b6978b45637a8
-  data.tar.gz: ca47d98d665b8112837f2e39f57ee39fc10cd3f3440e56e1c986d424bcb4bddc
+  metadata.gz: bfed6f95e6594050c37a607fb9cad4b2cb4d4273e5783f31d2ef3d95ac8738f2
+  data.tar.gz: ad22ab4499b111356d7f9533afd9069bb10be334cbdb01f4d2e93ad034a3d93e
 SHA512:
-  metadata.gz: 71e5a51e29e811bd4b5170728cf2bf8ee1dd80147d33697edd13a334206119fe9bae3ae9e16e107bdc557027208d6b17e46d4976e9a222582d72849a9ed917af
-  data.tar.gz: 5bf261e0aeaf57de2c6d6807b205302e0beedf6943f53d65d1338dff3ba81ff4e068cd51f574b122c292bda0bbe6ce6dda06476596e2c69f4e22cdb091a5859b
+  metadata.gz: 95349ca92cf7040d34fcc7d166e32513bf34d973e1dbc2b406a2523b60ea010a390a9e28ae8cd86c7747e48acf84b71fc550a9bed7f4832babb92f96d8d26c8b
+  data.tar.gz: f74e854a1c37a6d6050e4a8913ebb3c550633a6eb894f013f8a96b188cb0cad29f7fd39cc8723a0727e47fee1ab0342c850fda11a69ff86f09647e563156d5b7

data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx

@@ -12,7 +12,6 @@ type LightboxType = {
   aria?: {[key: string]: string},
   children: React.ReactNode[] | React.ReactNode | string,
   className?: string,
-  currentPhotoIndex?: number,
   data?: {[key: string]: string | number},
   description?: string | any,
   id?: string,
@@ -32,7 +31,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     aria = {},
     children,
     className,
-    currentPhotoIndex,
     data = {},
     description,
     id = '',
@@ -52,12 +50,6 @@ const Lightbox = (props: LightboxType): React.ReactNode => {
     onChange(activePhoto)
   },[activePhoto])
 
-  useEffect(() => {
-    currentPhotoIndex !== undefined && currentPhotoIndex !== null && (
-    setActivePhoto(currentPhotoIndex)
-    )
-  },[currentPhotoIndex])
-
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const classes = classnames(

data/app/pb_kits/playbook/pb_lightbox/docs/example.yml

@@ -5,4 +5,3 @@ examples:
   - lightbox_multiple: Multiple
   - lightbox_compound_component: Compound Component
   - lightbox_custom_header: Custom Header
-  - lightbox_current_photo: Current Photo

data/app/pb_kits/playbook/pb_lightbox/docs/index.js

@@ -2,4 +2,3 @@ export { default as LightboxDefault } from './_lightbox_default.jsx'
 export { default as LightboxMultiple } from './_lightbox_multiple.jsx'
 export { default as LightboxCompoundComponent } from './_lightbox_compound_component.jsx'
 export { default as LightboxCustomHeader } from './_lightbox_custom_header'
-export { default as LightboxCurrentPhoto } from './_lightbox_current_photo'

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "12.17.0"
-  VERSION = "12.17.0.pre.alpha.lightboxcurrentPhotoIndex582"
+  VERSION = "12.17.1"
 end

metadata

@@ -1,15 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 12.17.0.pre.alpha.lightboxcurrentPhotoIndex582
+  version: 12.17.1
 platform: ruby
 authors:
 - Power UX
 - Power Devs
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-04-30 00:00:00.000000000 Z
+date: 2023-05-01 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -1332,8 +1332,6 @@ files:
 - app/pb_kits/playbook/pb_lightbox/docs/_description.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_compound_component.md
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx
-- app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.jsx
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_custom_header.md
 - app/pb_kits/playbook/pb_lightbox/docs/_lightbox_default.jsx
@@ -2474,7 +2472,7 @@ homepage: http://playbook.powerapp.cloud
 licenses:
 - ISC
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -2485,12 +2483,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">"
+  - - ">="
     - !ruby/object:Gem::Version
-      version: 1.3.1
+      version: '0'
 requirements: []
 rubygems_version: 3.3.7
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Playbook Design System
 test_files: []

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.jsx

@@ -1,121 +0,0 @@
-/* @flow */
-/* eslint-disable jsx-control-statements/jsx-use-if-tag */
-import React, { useState } from 'react'
-import { Flex, Image, Button, Body, FlexItem } from '../../'
-import Lightbox from '../_lightbox.tsx'
-
-const LightboxCurrentPhoto = (props) => {
-  const photos = [
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-    'https://images.unsplash.com/photo-1638727228877-d2a79ab75e68?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2668&q=80',
-    'https://images.unsplash.com/photo-1526657782461-9fe13402a841?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1984&q=80',
-    'https://images.unsplash.com/photo-1523057530100-383d7fbc77a1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2669&q=80',
-  ]
-  const [light, toggleLight] = useState(false)
-  //Setting state with the index of the current slide exposed by the onChange prop
-  const [active, setActive] = useState(0)
-  //Setting state for the current photo to pass to the kit
-  const [currentPhoto, setCurrentPhoto] = useState(active)
-
-  const handleCloseLightbox = () => {
-    toggleLight(!light)
-  }
-
-  const onPhotoClick = () => {
-    toggleLight(!light)
-  }
-
-  const exampleStyles = {
-    width: "100%",
-    overflow: "auto"
-  }
-
-  return (
-    <div className="lightbox_doc_example_custom">
-      {light ? (
-        <>
-          <Flex alignItems="center" 
-              className='custom_lightbox_sidebar'
-              justifyContent="center"
-          >
-            <Flex margin='lg'
-                orientation='column'
-            >
-              <Body marginBottom='md'>
-                This UI is for demonstration purposes only to demonstrate how external buttons can be used to change the slides.
-              </Body>
-              <FlexItem alignSelf="center">
-                <Flex justifyContent="center">
-                  <Button 
-                      onClick={()=> setCurrentPhoto(active > 0 ? active - 1 : 0)}
-                  >
-                    Back
-                  </Button>
-                  <Button marginLeft='sm'
-                      onClick={() => setCurrentPhoto(active < photos.length - 1 ? active + 1 : photos.length - 1)}
-                  >
-                    Next
-                  </Button>
-                </Flex>
-              </FlexItem>
-            </Flex>
-          </Flex>
-          <Lightbox
-              currentPhotoIndex={currentPhoto}
-              icon="times"
-              onChange={(index) => setActive(index)}
-              onClose={handleCloseLightbox}
-              photos={photos}
-              {...props}
-          />
-        </>
-      ) : (
-        <div
-            className="PhotoViewer"
-            style={exampleStyles}
-        >
-          <Flex>
-            {photos.map((photo, index) => {
-              return (
-                <div
-                    key={index}
-                    onClick={() => onPhotoClick(index)}
-                >
-                  <Image
-                      cursor="pointer"
-                      marginRight="xl"
-                      rounded
-                      size="lg"
-                      url={photo}
-                  />
-
-                  <div className="overlay" />
-                </div>
-              )
-            })}
-          </Flex>
-        </div>
-      )}
-    </div>
-  )
-}
-
-export default LightboxCurrentPhoto

data/app/pb_kits/playbook/pb_lightbox/docs/_lightbox_current_photo.md

@@ -1 +0,0 @@
-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.