playbook_ui 11.8.0 → 11.9.0.pre.alpha.fileupload1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1786432b79daa7bd71c9c2eeefbd167c26c858d33a7b3c1600e9c53416f0a4cc
-  data.tar.gz: 63355e58e35c1a322f9864aa6000d315643d30123349c7c817bf642db85a2940
+  metadata.gz: 5376b30a51f38366cf934ddf2b1e7924a9b7a1ee80b1825c29f1f3f7b21ec3d9
+  data.tar.gz: f522f4649bf2f6efd3a707023f350b9b2a6518c2f7e6bdbeff5bf639e61d8426
 SHA512:
-  metadata.gz: d0a254347288d447d1f86672c50de6f64295bc23eac906cf6fd7d06da198dbfcc3c135e29b6caa0a2b5ddee8dec400065f352976094b9ebbb0c0a748a7feca28
-  data.tar.gz: 6dde7b191a13a9ee1630cf92e64229ed03ab69c1874aa5805991d660376c11f2cef81225420a611299a8bc7816545b849d4772a445e22ac150e700e1db9c162c
+  metadata.gz: 647e3eb358806661f465ba9e1bdf3a5e2261895e6002c526088289b2170e87fca1cd6b12688ef5d78e981b9045971ef949534bcd27b1e7e23c94b36046be4d26
+  data.tar.gz: 1e19f47ed627201e2569f11e52623491de59111397deb5b38196b869f1361580aee8f49d8c23f0fbc38a971400f5ab47307c359d282d599c933a1b0b7f80915b

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -72,7 +72,7 @@
 	background-color: $white;
 	box-shadow: $shadow_deepest;
 	border: 0;
-	border-radius: 0;
+	border-radius: $border_radius_md;
 	max-height: calc(100vh - #{$gutter * 2});
 	max-width: calc(100vw - #{$gutter * 2});
 	overflow: auto;
@@ -138,7 +138,6 @@
 			opacity: $opacity_hidden;
 		}
 		&[class*="full_height"] {
-
 			&[class*="_left"]{
 				justify-content: flex-start;
 			}
@@ -152,6 +151,7 @@
 			}
 
 			.pb_dialog {
+				border-radius: 0;
 				height: 100%;
 				max-height: 100%;
 				max-width: none;

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

@@ -12,26 +12,42 @@ 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: Callback<string, string>,
 }
 
-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 getMaxFileSizeText = () => `Max file size is ${getFormattedFileSize(maxSize)}.`
+
+  const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
+  if (isFileTooLarge) onFilesRejected(`File size is too large! ${getMaxFileSizeText()}`)
+
   const acceptedFileTypes = () => {
     return accept.map((fileType) => {
       if (fileType.startsWith('image/')) {
@@ -44,6 +60,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 += ` ${getMaxFileSizeText()}`
+    return msg
+  }
+
   return (
     <div
         className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -56,7 +79,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

@@ -0,0 +1,51 @@
+/* @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 FileUploadMaxSize = (props) => {
+  const [filesToUpload, setFilesToUpload] = useState([])
+  const [error, setError] = useState()
+
+  const handleOnFilesAccepted = (files) => {
+    setFilesToUpload([...filesToUpload, ...files])
+  }
+
+  return (
+    <div>
+      <AcceptedFilesList
+          files={filesToUpload}
+          {...props}
+      />
+      <FileUpload
+          acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
+          maxSize={1000000}
+          onFilesAccepted={handleOnFilesAccepted}
+          onFilesRejected={(errorMessage) => setError(errorMessage)}
+          {...props}
+      />
+      { error && (
+        <Body
+            color="error"
+            marginY="md"
+        >{error}</Body>
+      )}
+    </div>
+  )
+}
+
+export default FileUploadMaxSize

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

@@ -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

@@ -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

@@ -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/lib/playbook/version.rb

@@ -1,6 +1,6 @@
 # frozen_string_literal: true
 
 module Playbook
-  PREVIOUS_VERSION = "11.7.0"
-  VERSION = "11.8.0"
+  PREVIOUS_VERSION = "11.8.0"
+  VERSION = "11.9.0.pre.alpha.fileupload1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.8.0
+  version: 11.9.0.pre.alpha.fileupload1
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-10-12 00:00:00.000000000 Z
+date: 2022-10-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -854,6 +854,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
@@ -2309,9 +2310,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
       version: '0'
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
-  - - ">="
+  - - ">"
     - !ruby/object:Gem::Version
-      version: '0'
+      version: 1.3.1
 requirements: []
 rubygems_version: 3.3.7
 signing_key: