playbook_ui 10.17.0 → 10.19.0.pre.lightbox

data/app/pb_kits/playbook/pb_image/_image.jsx

@@ -14,6 +14,7 @@ type ImageProps = {
   onError?: () => {},
   size: "xs" | "sm" | "md" | "lg" | "xl",
   rounded?: boolean,
+  transition: "blur" | "fade" | "scale",
   url: string,
 }
 
@@ -27,6 +28,7 @@ const Image = (props: ImageProps) => {
     onError = null,
     rounded = false,
     size = '',
+    transition = 'fade',
     url = '',
   } = props
 
@@ -34,7 +36,7 @@ const Image = (props: ImageProps) => {
   const classes = classnames(
     buildCss('pb_image_kit', size),
     'lazyload',
-    'blur_up',
+    transition,
     { rounded },
     globalProps(props),
     className
@@ -53,6 +55,7 @@ const Image = (props: ImageProps) => {
           onError={onError}
           rounded={+rounded}
           src={url}
+          transition={transition}
       />
     </div>
   )

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -28,15 +28,31 @@ $image-sizes: (
       border-radius: $border-rad-heaviest;
     }
 
-    .blur_up {
-      -webkit-filter: blur(6px);
-      filter: blur(6px);
-      transition: filter 550ms, -webkit-filter 550ms;
+    &.fade {
+      opacity: 0;
+      &.lazyloaded {
+        opacity: 1;
+        transition: opacity 300ms ease-in;
+      }
     }
-
-    .blur_up.lazyloaded {
-      -webkit-filter: blur(0);
-      filter: blur(0);
+    
+    &.blur {
+      filter: blur(5px);
+      &.lazyloaded {
+        -webkit-filter: blur(0);
+        filter: blur(0);
+        transition: filter 300ms ease-in;
+      }
+    }
+    
+    &.scale {
+      opacity: 0;
+      transform: scale(0.9);
+      &.lazyloaded {
+        opacity: 1;
+        transform: scale(1);
+        transition: 700ms ease-in;
+      }
     }
   }
 }

data/app/pb_kits/playbook/pb_image/docs/_transition_image.html.erb

@@ -0,0 +1,54 @@
+<%= pb_rails("flex") do %>
+  <%= pb_rails("flex/flex_item", props: {fixed_size: "250px"}) do %>
+    <%= pb_rails("select", props: {
+    id: "transition-dropdown",
+    label: "",
+    blank_selection: "Select a Transition...",
+    options: [
+        {
+          value: 'fade',
+        },
+        {
+          value: 'blur',
+        },
+        {
+          value: 'scale',
+        },
+    ]
+    }) %>
+  <% end %>
+    <%= pb_rails("flex/flex_item") do %>
+      <%= pb_rails("button", props: {classname: "button", text: "Load Image", margin_left: "sm", margin_top: "xs", disabled: true }) %>
+    <% end %>
+<% end %>
+<%= pb_rails("image",  props: { classname: "transition-image", alt: "picture of a misty forest", url: "", on_error: "this.style.display = 'none'" }) %>
+
+<script>
+    window.addEventListener('DOMContentLoaded', () => {
+        const button = document.querySelector(".button")
+        const transitionDropdown = document.querySelector("#transition-dropdown")
+        var option = ''
+
+        transitionDropdown.addEventListener('change', function() {
+          if (this.value === '') {
+            button.className = button.className + ' _disabled'
+          } else {
+            button.removeAttribute("disabled");
+            button.className = button.className.replace(/\_disabled/gi, '')
+            option = this.value
+          }
+        });
+
+        const updateTransition = (transition) => {
+          const imageTransition = document.querySelector('.transition-image')
+            imageTransition.removeAttribute("style")
+            imageTransition.classList.remove("fade", "blur", "scale", "lazyloaded")
+            imageTransition.classList.add(transition, "lazyload")
+            imageTransition.src = "https://unsplash.it/500/400/?image=634"
+        }
+      
+        button.addEventListener('click', function() {
+          updateTransition(option)
+        })
+    });
+</script>

data/app/pb_kits/playbook/pb_image/docs/_transition_image.jsx

@@ -0,0 +1,77 @@
+import React, { useState } from 'react'
+
+import Image from '../_image'
+import Select from '../../pb_select/_select'
+import FlexItem from '../../pb_flex/_flex_item'
+import Flex from '../../pb_flex/_flex'
+import Button from '../../pb_button/_button'
+
+const TransitionImage = (props) => {
+  const [transition, setTransition] = useState('')
+  const [apply, setApply] = useState({
+    url: '',
+    transition: '',
+  })
+
+  const loadImage = () => {
+    document.querySelector('.image').classList.remove(transition, 'lazyloaded')
+    setApply({
+      url: 'https://unsplash.it/500/400/?image=634',
+      transition: transition,
+    },
+    document.querySelector('.image').classList.add(transition, 'lazyload')
+    )
+  }
+
+  const handleTransition = ({ target }) => {
+    setTransition(target.value)
+  }
+
+  const options = [
+    {
+      value: 'fade',
+    },
+    {
+      value: 'blur',
+    },
+    {
+      value: 'scale',
+    },
+  ]
+
+  return (
+    <>
+      <Flex>
+        <FlexItem fixedSize="250px">
+          <Select
+              blankSelection="Select a Transition..."
+              label=""
+              onChange={handleTransition}
+              options={options}
+              {...props}
+          />
+        </FlexItem>
+        <FlexItem>
+          <Button
+              disabled={transition === '' ? true : false}
+              marginLeft="sm"
+              onClick={loadImage}
+              text="Load Image"
+              {...props}
+          />
+        </FlexItem>
+      </Flex>
+      <div style={{ display: apply.url === '' ? 'none' : 'block' }}>
+        <Image
+            alt="picture of a misty forest"
+            className="image"
+            transition={apply.transition}
+            url={apply.url}
+            {...props}
+        />
+      </div>
+    </>
+  )
+}
+
+export default TransitionImage

data/app/pb_kits/playbook/pb_image/docs/_transition_image.md

@@ -0,0 +1 @@
+To add a transition, simply use the `transition` prop and one of the three string options `"fade"`, `"blur"`, or `"scale"`.

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

@@ -3,7 +3,9 @@ examples:
   - default_image: Default
   - rounded_image: Rounded
   - custom_error_image: Error Handling
+  - transition_image: Transition
   react:
   - default_image: Default
   - rounded_image: Rounded
   - custom_error_image: Error Handling
+  - transition_image: Transition

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

@@ -1,3 +1,4 @@
 export { default as DefaultImage } from './_default_image.jsx'
 export { default as RoundedImage } from './_rounded_image.jsx'
 export { default as CustomErrorImage } from './_custom_error_image.jsx'
+export { default as TransitionImage } from './_transition_image.jsx'

data/app/pb_kits/playbook/pb_image/image.html.erb

@@ -7,4 +7,4 @@
     alt: object.alt,
     onerror: object.on_error,
     )
-%>
+%>

data/app/pb_kits/playbook/pb_image/image.rb

@@ -11,10 +11,13 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[xs sm md lg xl none],
                   default: "none"
+      prop :transition, type: Playbook::Props::Enum,
+                        values: %w[blur fade scale none],
+                        default: "fade"
       prop :url
 
       def classname
-        generate_classname("pb_image_kit#{size_class} lazyload blur_up") + rounded_class
+        generate_classname("pb_image_kit#{size_class} #{transition_class} lazyload") + rounded_class
       end
 
     private
@@ -26,6 +29,10 @@ module Playbook
       def size_class
         size == "none" ? nil : "_#{size}"
       end
+
+      def transition_class
+        transition == "none" ? nil : transition
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_image/image.test.js

@@ -7,6 +7,7 @@ const props = {
   data: { testid: 'avatar' },
   size: null,
   url: 'https://unsplash.it/500/400/?image=634',
+  transition: 'blur',
 }
 
 it('Should be accessible', async () => {
@@ -20,16 +21,20 @@ test('alt attribute', () => {
 
 test('default classname', () => {
   const kit = renderKit(Image, props)
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up')
+  expect(kit).toHaveClass('pb_image_kit lazyload')
 })
 
 test('size = xs', () => {
   const kit = renderKit(Image, props, { size: 'xs' })
-  expect(kit).toHaveClass('pb_image_kit_xs lazyload blur_up')
+  expect(kit).toHaveClass('pb_image_kit_xs lazyload')
+})
+
+test('transition = blur', () => {
+  const kit = renderKit(Image, props, { transition: 'blur' })
+  expect(kit).toHaveClass('pb_image_kit lazyload blur')
 })
 
 test('rounded = true', () => {
   const kit = renderKit(Image, props, { rounded: true })
-  expect(kit).toHaveClass('pb_image_kit lazyload blur_up rounded')
+  expect(kit).toHaveClass('pb_image_kit lazyload rounded')
 })
-

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slide.jsx

@@ -0,0 +1,53 @@
+/* @flow */
+
+import React from 'react'
+import { noop } from 'lodash'
+import { TransformComponent, TransformWrapper } from 'react-zoom-pan-pinch'
+
+import styles from './styles.scss'
+
+type SlideType = {
+  alt: string,
+  current: number,
+  onClick: () => void,
+  onChange: (index: number) => void,
+  onZoom: (zoom: number) => void,
+  zooming: boolean,
+  url: string,
+}
+
+export default function Slide({
+  alt,
+  onClick = noop,
+  onZoom = noop,
+  url,
+  zooming = false,
+}: SlideType) {
+  const handlePinchingStop = (e) => {
+    const isZooming = e.state.scale > 1
+    onZoom(isZooming)
+  }
+
+  return (
+    <TransformWrapper
+        doubleClick={{ mode: 'reset' }}
+        initialScale={1}
+        onPinchingStop={handlePinchingStop}
+        panning={{ disabled: !zooming }}
+    >
+      <button
+          className={styles.Slide}
+          onClick={onClick}
+          onDoubleClick={() => onZoom(false)}
+          tabIndex={-1}
+      >
+        <TransformComponent className={styles.TransformComponent}>
+          <img
+              alt={alt}
+              src={url}
+          />
+        </TransformComponent>
+      </button>
+    </TransformWrapper>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.jsx

@@ -0,0 +1,54 @@
+/* @flow */
+
+import { noop } from 'lodash'
+import { motion } from 'framer-motion/dist/framer-motion'
+import React, { useState } from 'react'
+
+import Slide from './Slide'
+import styles from './styles.scss'
+import useSlides from './useSlides'
+
+type SlidesType = {
+  urls: Array<string>,
+  current: number,
+  onChange: (index: number) => void,
+  onClick: (index: number) => void,
+}
+
+export default function Slides({
+  urls = [],
+  current = 0,
+  onClick = noop,
+  onChange = noop,
+}: SlidesType) {
+  const [zooming, setZooming] = useState(false)
+  const { controls, dragConstraints, handleDragEnd } = useSlides({
+    current,
+    pagesCount: urls.length,
+    onChange,
+  })
+
+  const handleZoom = (isZooming) => setZooming(isZooming)
+
+  return (
+    <motion.div
+        animate={controls}
+        className={styles.Slides}
+        drag={!zooming && 'x'}
+        dragConstraints={dragConstraints}
+        dragElastic={0.05}
+        onDragEnd={handleDragEnd}
+        transition={{ type: 'spring', bounce: 0 }}
+    >
+      {urls.map((url, i) => (
+        <Slide
+            key={i}
+            onClick={() => onClick(i)}
+            onZoom={handleZoom}
+            url={url}
+            zooming={zooming}
+        />
+      ))}
+    </motion.div>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.jsx

@@ -0,0 +1,39 @@
+/* @flow */
+
+import React from 'react'
+import { noop } from 'lodash'
+import classnames from 'classnames'
+import Image from '../../pb_image/_image'
+
+import styles from './styles.scss'
+
+type ThumbnailType = {
+  active?: boolean,
+  alt?: string,
+  onClick: () => void,
+  url: string,
+  width?: string,
+}
+
+export default function Thumbnail({
+  active = false,
+  alt,
+  width,
+  url,
+  onClick = noop,
+}: ThumbnailType) {
+  return (
+    <button
+        className={classnames(styles.Thumbnail, { [styles.active]: active })}
+        onClick={onClick}
+        style={{ width }}
+        type="button"
+    >
+      <Image
+          alt={alt}
+          size="sm"
+          url={url}
+      />
+    </button>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnails.jsx

@@ -0,0 +1,82 @@
+/* @flow */
+
+import { noop } from 'lodash'
+import classnames from 'classnames'
+import React, { useEffect } from 'react'
+import { motion, useAnimation } from 'framer-motion/dist/framer-motion'
+import { useWindowSize } from '../hooks/useWindowSize'
+
+import Thumbnail from './Thumbnail'
+
+import styles from './styles.scss'
+
+export const indexWithinBounds = (
+  current: number,
+  min: number,
+  max: number
+): number => {
+  if (current < min) return 0
+  if (current > max) return max
+  return current
+}
+
+type ThumbnailsType = {
+  current: number,
+  onChange: () => null,
+  urls: [],
+}
+
+export default function Thumbnails({
+  current = 0,
+  onChange = noop,
+  urls = [],
+}: ThumbnailsType) {
+  const controls = useAnimation()
+  const viewportSize = useWindowSize()
+  const thumbnailWidth = viewportSize.width / 8
+  const draggable = thumbnailWidth * urls.length > viewportSize.width
+  const css = classnames(styles.Thumbnails, {
+    [styles.draggable]: draggable,
+  })
+  const dragConstraints = {
+    left: -1 * (thumbnailWidth * urls.length - viewportSize.width),
+    right: 0,
+  }
+
+  const modifyTarget = (target) => {
+    const nextIndex = Math.round(Math.abs(target) / thumbnailWidth)
+    const snapTargetIndex = indexWithinBounds(nextIndex, 0, urls.length)
+    const snapTarget = snapTargetIndex * thumbnailWidth
+    const direction = Math.sign(target)
+    return direction * snapTarget
+  }
+
+  useEffect(() => {
+    if (draggable) {
+      const x = Math.max(-current * thumbnailWidth, dragConstraints.left)
+      controls.start({ x })
+    }
+  }, [controls, current, draggable, dragConstraints.left, thumbnailWidth])
+
+  return (
+    <motion.div
+        animate={controls}
+        className={css}
+        drag={draggable && 'x'}
+        dragConstraints={dragConstraints}
+        dragElastic={0.05}
+        dragTransition={{ modifyTarget }}
+        transition={{ type: 'spring', bounce: 0 }}
+    >
+      {urls.map((url, i) => (
+        <Thumbnail
+            active={i === current}
+            alt={i}
+            key={i}
+            onClick={() => onChange(i)}
+            url={url}
+        />
+      ))}
+    </motion.div>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/index.jsx

@@ -0,0 +1,54 @@
+/* eslint-disable jsx-control-statements/jsx-use-if-tag */
+/* @flow */
+
+import { noop } from 'lodash'
+import React, { useState } from 'react'
+
+import Slides from './Slides'
+import Thumbnails from './Thumbnails'
+import useUnscrollableBody from './useUnscrollableBody'
+
+import styles from './styles.scss'
+
+type CarouselType = {
+  initialPhoto: string,
+  onClose: Function,
+  icon: string,
+  iconSize: number,
+  current: number,
+  photos: Array<string>,
+  onChange: (index: number) => void,
+  onClick: (index: number) => void,
+}
+
+export default function Carousel({
+  current = 0,
+  photos,
+  onClick = noop,
+  onChange = noop,
+}: CarouselType) {
+  useUnscrollableBody()
+  const [currentIndex, setCurrentIndex] = useState(current)
+  const handleChange = (index) => {
+    setCurrentIndex(index)
+    onChange(index)
+  }
+
+  return (
+    <div className={styles.Lightbox}>
+      <Slides
+          current={currentIndex}
+          onChange={handleChange}
+          onClick={onClick}
+          urls={photos.map((photo) => photo.url)}
+      />
+      {photos.length > 1 ? (
+        <Thumbnails
+            current={currentIndex}
+            onChange={handleChange}
+            urls={photos.map((photo) => photo.thumbnail)}
+        />
+      ) : null}
+    </div>
+  )
+}

data/app/pb_kits/playbook/pb_lightbox/Carousel/styles.scss

@@ -0,0 +1,110 @@
+.Lightbox {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    left: 0;
+    top: 0;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    background-color: black;
+    z-index: 1;
+    overflow: hidden;
+  }
+  
+  .Slides {
+    display: flex;
+    flex-grow: 1;
+    height: calc(100% - 100px);
+    width: 100%;
+    z-index: 1;
+  
+    [class^="react-transform-wrapper"] {
+      flex-shrink: 0;
+      width: 100%;
+      height: 100%;
+    }
+  
+    [class^="react-transform-content"] {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .Slide,
+  .Thumbnail {
+    flex-shrink: 0;
+    border: none;
+    margin: 0;
+    padding: 0;
+    cursor: pointer;
+    background-color: transparent;
+  }
+  
+  .Slide {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  
+    img {
+      width: 100vw;
+      height: 100vh;
+      object-fit: contain;
+    }
+  }
+  
+  .BackBtn,
+  .NextBtn {
+    z-index: 2;
+    color: black;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: calc(50vh - 5px);
+    border: none;
+    border-radius: 50%;
+    background-color: white;
+  }
+  
+  .BackBtn::before,
+  .NextBtn::before {
+    content: "▸";
+  }
+  
+  .BackBtn {
+    left: 30px;
+    transform: rotate(180deg);
+  }
+  
+  .NextBtn {
+    right: 30px;
+  }
+  
+  .Thumbnails {
+    display: flex;
+    padding: 3px;
+  }
+  
+  .Thumbnails.draggable {
+    align-self: flex-start;
+  }
+  
+  .Thumbnail {
+    padding: 3px;
+    height: 100%;
+  
+    img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+  
+  .Thumbnail.active {
+    padding: 6px;
+    background-color: white;
+    box-shadow: 0 0 6px white;
+  }
+