playbook_ui 11.8.1 → 11.9.0.pre.alpha.fileupload1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 66327c9e420d8969f62d18ced60491926d275b8c93e7b6629df66d2945115c59
-  data.tar.gz: 4f4b1c3a71fa5fa5bcf2031b9e62fc5b82f2755d0c18b7449ad085b7746dc3fe
+  metadata.gz: 5376b30a51f38366cf934ddf2b1e7924a9b7a1ee80b1825c29f1f3f7b21ec3d9
+  data.tar.gz: f522f4649bf2f6efd3a707023f350b9b2a6518c2f7e6bdbeff5bf639e61d8426
 SHA512:
-  metadata.gz: 3bb0ff5bf96097f877f5d981302fa7337136dfdcbd8e1a99fd6579cf9c7621ebb9d38a89ca1d86187b79b52f341e93d98b75cca1fc43d3a7f1b8eafe2ba4acce
-  data.tar.gz: 27d81a4968950de36f94278a86ccdebf2adf8bb6e15330573ac49719a36d0797f9bfb1622d0d9d1d65091198d541ad328510ed3fd5ef065079f01dc0613205c4
+  metadata.gz: 647e3eb358806661f465ba9e1bdf3a5e2261895e6002c526088289b2170e87fca1cd6b12688ef5d78e981b9045971ef949534bcd27b1e7e23c94b36046be4d26
+  data.tar.gz: 1e19f47ed627201e2569f11e52623491de59111397deb5b38196b869f1361580aee8f49d8c23f0fbc38a971400f5ab47307c359d282d599c933a1b0b7f80915b

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

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.8.0"
-  VERSION = "11.8.1"
+  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.1
+  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-13 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: