RubyGems - playbook_ui - Versions diffs - 11.12.1 → 11.13.0 - Mend

playbook_ui 11.12.1 → 11.13.0

Files changed (45) hide show

data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useEffect, useCallback, useRef } from 'react'
 import { useDropzone } from 'react-dropzone'
 import classnames from 'classnames'
@@ -12,26 +12,51 @@ import Card from '../pb_card/_card'
 type FileUploadProps = {
   accept?: string[],
   className?: string,
-  data?: object,
+  data?: {[key: string]: string | number},
   acceptedFilesDescription?: string,
+  maxSize?: number,
   onFilesAccepted: Callback<File, File>,
+  onFilesRejected: (error: string, files: File[]) => void,
 }
-const FileUpload = (props: FileUploadProps) => {
+const getFormattedFileSize = (fileSize: number): string => {
+  return `${fileSize / 1e+6} MB`
+}
+const FileUpload = (props: FileUploadProps): React.ReactElement => {
   const {
     accept = null,
     acceptedFilesDescription = '',
     className,
     data = {},
+    maxSize,
     onFilesAccepted = noop,
+    onFilesRejected = noop,
   } = props
-  const onDrop = useCallback((files) => onFilesAccepted(files), []);
-  const { getRootProps, getInputProps, isDragActive } = useDropzone({
+  const onDrop = useCallback((files) => {
+    onFilesAccepted(files)
+  }, [onFilesAccepted])
+  const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
     accept,
+    maxSize,
     onDrop,
   })
+  const prevRejected: any = useRef();
+  const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
+  useEffect(() => {
+    if (rejectedFiles === prevRejected.current) return
+    const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
+    if (isFileTooLarge) {
+      onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
+    }
+    prevRejected.current = rejectedFiles
+  }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
   const acceptedFileTypes = () => {
     return accept.map((fileType) => {
       if (fileType.startsWith('image/')) {
@@ -44,6 +69,13 @@ const FileUpload = (props: FileUploadProps) => {
   const dataProps = buildDataProps(data)
+  const getDescription = () => {
+    let msg = ""
+    accept === null ? msg += 'Choose a file or drag it here.' : msg += `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}.`
+    if (maxSize) msg += ` ${maxFileSizeText}`
+    return msg
+  }
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -56,7 +88,7 @@ const FileUpload = (props: FileUploadProps) => {
           {isDragActive ?
             <p>{'Drop the files here ...'}</p>
             :
-            <p>{accept === null ? 'Choose a file or drag it here' : `Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes()}`}</p>
+            <p>{getDescription()}</p>
           }
         </Body>
       </Card>

data/app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx ADDED Viewed

@@ -0,0 +1,71 @@
+/* @flow */
+/* eslint-disable react/no-multi-comp */
+import React, { useState } from 'react'
+import {
+  Body,
+  FileUpload,
+  List,
+  ListItem,
+} from '../..'
+const AcceptedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}>{file.name}</ListItem>
+    ))}
+  </List>
+)
+const RejectedFilesList = ({ files }: FileList) => (
+  <List>
+    {files.map((file) => (
+      <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
+    ))}
+  </List>
+)
+const FileUploadMaxSize = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+  const [filesRejected, setFilesRejected] = useState([])
+  const [error, setError] = useState()
+  const handleOnFilesAccepted = (files) => {
+    if (files.length) setError()
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+  const handleOnFilesRejected = (error, files) => {
+    setError(error)
+    setFilesRejected([...filesRejected, ...files])
+  }
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <RejectedFilesList
+          files={filesRejected}
+          {...props}
+      />
+      <FileUpload
+          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
+          maxSize={1000000}
+          onFilesAccepted={handleOnFilesAccepted}
+          onFilesRejected={handleOnFilesRejected}
+          {...props}
+      />
+      { error && (
+        <Body
+            color="error"
+            marginY="md"
+        >
+          {error}
+        </Body>
+      )}
+    </div>
+  )
+}
+export default FileUploadMaxSize

data/app/pb_kits/playbook/pb_file_upload/docs/example.yml CHANGED Viewed

@@ -6,4 +6,5 @@ examples:
   - file_upload_default: Default List of files to upload
   - file_upload_accept: Accept only certain types of files
   - file_upload_custom_description: Add your one accepted files description
+  - file_upload_max_size: Set a file size limit

data/app/pb_kits/playbook/pb_file_upload/docs/index.js CHANGED Viewed

@@ -1,3 +1,4 @@
 export { default as FileUploadDefault } from './_file_upload_default.jsx'
 export { default as FileUploadAccept } from './_file_upload_accept.jsx'
 export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
+export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'

data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js CHANGED Viewed

@@ -27,14 +27,14 @@ test('shows default drag text', () => {
   expect(kit).toHaveTextContent('Choose a file or drag it here')
 })
-test('shows type-specific drag text', () => {
+test('displays max file size text', () => {
   render(
     <FileUpload
-        accept={['image/svg+xml']}
         data={{ testid: testid }}
+        maxSize={1e+6}
     />
   )
   const kit = screen.getByTestId(testid)
-  expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
+  expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
 })

data/app/pb_kits/playbook/pb_selectable_list/_item.jsx CHANGED Viewed

@@ -1,6 +1,6 @@
 /* @flow */
-import React, { Node } from 'react'
+import React, { Node, useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -50,8 +50,19 @@ const SelectableListItem = ({
     className
   )
+  const initialCheckedState = checked
+  const [checkedState, setCheckedState] = useState(initialCheckedState)
+  const handleChecked = (event) => {
+    onChange(event)
+    setCheckedState(event.target.checked)
+  }
   return (
-    <ListItem {...props}>
+    <ListItem
+        {...props}
+        className={classnames(checkedState ? "checked_item" : "", className)}
+    >
       <div
           {...ariaProps}
           {...dataProps}
@@ -60,10 +71,10 @@ const SelectableListItem = ({
         <Choose>
           <When condition={variant == 'checkbox'}>
             <Checkbox
-                checked={checked}
+                checked={checkedState}
                 id={id}
                 name={name}
-                onChange={onChange}
+                onChange={handleChecked}
                 // eslint suppressor, text is needed to display on screen
                 text={label || (text && false)}
                 type="checkbox"

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx CHANGED Viewed

@@ -1,5 +1,5 @@
 /* @flow */
-import React from 'react'
+import React, { useState } from 'react'
 import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
@@ -29,7 +29,29 @@ const SelectableList = (props: SelectableListProps) => {
   const ariaProps = buildAriaProps(aria)
   const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
   const dataProps = buildDataProps(data)
+  const isRadio = props.variant === "radio"
+  const defaultCheckedRadioValue = children.filter(item => item.props.defaultChecked)[0]?.props?.value
+  const [selectedRadioValue, setSelectedRadioValue] = useState(defaultCheckedRadioValue)
+  const onChangeRadioValue = ({ target }) => {
+    setSelectedRadioValue(target.value)
+  }
+  let selectableListItems = children
+  if (isRadio) {
+    selectableListItems = children.map(({ props }) => {
+      return (
+        <SelectableListItem
+            {...props}
+            className={classnames(selectedRadioValue === props.value ? "checked_item" : "", props.className)}
+            key={props.value}
+            onChange={evt => { onChangeRadioValue(evt); props?.onChange?.(evt); }}
+        />
+      )
+    })
+  }
   return (
     <div
         {...ariaProps}
@@ -38,7 +60,7 @@ const SelectableList = (props: SelectableListProps) => {
         id={id}
     >
       <List {...props}>
-        {children}
+        {selectableListItems}
       </List>
     </div>
   )

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss CHANGED Viewed

@@ -7,6 +7,9 @@
     &:hover {
       background-color: $bg_light;
     }
+    &[class*=checked_item] {
+      background-color: $bg_light;
+    }
   }
   [class^=pb_radio_kit] {
     margin-left: $space_xs;

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.html.erb CHANGED Viewed

@@ -5,7 +5,7 @@
     id: object.id) do %>
   <%= pb_rails("list") do %>
     <% object.items.each do |item| %>
-      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
+      <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant, id: object.get_id(item)) )%>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb CHANGED Viewed

@@ -1,5 +1,7 @@
 # frozen_string_literal: true
+require "securerandom"
 module Playbook
   module PbSelectableList
     class SelectableList < Playbook::KitBase
@@ -15,6 +17,10 @@ module Playbook
       def classname
         generate_classname("pb_selectable_list_kit")
       end
+      def get_id(item)
+        item[:id] || ("a".."z").to_a.sample(12).join
+      end
     end
   end
 end

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb CHANGED Viewed

@@ -14,4 +14,36 @@
       <%= content %>
     <% end %>
   <% end %>
+  <% if object.variant == "checkbox"%>
+    <script>
+      var checkboxElement = document.querySelector("#<%=object.id%> input[type=checkbox]")
+      checkboxElement.addEventListener("change", (evt) => {
+        var listItemElement = document.querySelector("#<%=object.id%>")
+        if (evt.target.checked) {
+          listItemElement.classList.add("checked_item");
+        } else {
+          listItemElement.classList.remove("checked_item")
+        }
+      })
+    </script>
+  <% else %>
+    <script>
+      var radioElement = document.querySelector("#<%=object.id%> input[type=radio]")
+      radioElement.addEventListener("change", () => {
+        var radios = radioElement.closest("ul").querySelectorAll("input[type=radio]")
+        radios.forEach((radio) => {
+          if (radio.checked) {
+            radio.closest("li").classList.add("checked_item");
+          } else {
+            radio.closest("li").classList.remove("checked_item")
+          }
+        });
+      })
+    </script>
+  <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb CHANGED Viewed

@@ -4,7 +4,6 @@ module Playbook
   module PbSelectableList
     class SelectableListItem < Playbook::KitBase
       prop :tabindex
       prop :checked, type: Playbook::Props::Boolean,
                      default: false
       prop :name, type: Playbook::Props::String
@@ -17,7 +16,13 @@ module Playbook
                            default: {}
       def classname
-        generate_classname("pb_item_kit")
+        generate_classname("pb_item_kit") + checked_class
+      end
+    private
+      def checked_class
+        checked ? " checked_item" : ""
       end
     end
   end

data/lib/playbook/version.rb CHANGED Viewed

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 module Playbook
-  PREVIOUS_VERSION = "11.12.0"
-  VERSION = "11.12.1"
+  PREVIOUS_VERSION = "11.12.1"
+  VERSION = "11.13.0"
 end

metadata CHANGED Viewed

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.12.1
+  version: 11.13.0
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-22 00:00:00.000000000 Z
+date: 2022-12-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -836,20 +836,26 @@ files:
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_default.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_full_height_placement.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_scrollable.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_separators.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_sizes.jsx
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_stacked_alert.md
+- app/pb_kits/playbook/pb_dialog/docs/_dialog_status.html.erb
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.jsx
 - app/pb_kits/playbook/pb_dialog/docs/_dialog_status.md
 - app/pb_kits/playbook/pb_dialog/docs/example.yml
@@ -870,8 +876,8 @@ files:
 - app/pb_kits/playbook/pb_docs/kit_api.rb
 - app/pb_kits/playbook/pb_docs/kit_example.html.erb
 - app/pb_kits/playbook/pb_docs/kit_example.rb
-- app/pb_kits/playbook/pb_enhanced_element/element_observer.js
-- app/pb_kits/playbook/pb_enhanced_element/index.js
+- app/pb_kits/playbook/pb_enhanced_element/element_observer.ts
+- app/pb_kits/playbook/pb_enhanced_element/index.ts
 - app/pb_kits/playbook/pb_file_upload/_file_upload.scss
 - app/pb_kits/playbook/pb_file_upload/_file_upload.tsx
 - app/pb_kits/playbook/pb_file_upload/docs/_description.md
@@ -879,6 +885,7 @@ files:
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
 - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
+- app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
 - app/pb_kits/playbook/pb_file_upload/docs/example.yml
 - app/pb_kits/playbook/pb_file_upload/docs/index.js
 - app/pb_kits/playbook/pb_file_upload/fileupload.test.js