playbook_ui 11.12.1 → 11.13.0.pre.alpha.fileupload1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3257a43d2c224d202dcfa36f64ae30921ed80d752b8db6927059ebbe7032d6e6
-  data.tar.gz: 573bb60fedf4fc904f3832026d46ac23ee22dc965792801565c9006449dbdcc7
+  metadata.gz: ce94dd25b697d7a9234d80bb238c4e5c30b49ca7d88ff02bafb479868543644d
+  data.tar.gz: af5f92d96b803f0449c9379e133108b06d6e50533dc9d5470594000472699a5e
 SHA512:
-  metadata.gz: 38e8c49e2e18ae015912af7ac41da7c6a9fc57b7e201f4ca55c9edb2ea93d0114c917963c98f67972aa4cf50dda11cb4ec40f494e4da260403d63fa9e5920e4a
-  data.tar.gz: 9421ac89e00399825a91ed280324cd1b1a4a43aa8310b88c2143f21724d818c26aeca9af36e82cc9cf55e2e254a059d03d6c356364228631e82a4b8589d0a35e
+  metadata.gz: 48326c8d55ada1673178110548381bddfd63578af6db5383206bbfca96daa7f4527ca54ce9f566660935baff7583f1ff7b601fd14ca095360e6b1490e2b485b7
+  data.tar.gz: aacd259e275129fa7757e55f8f779f2fa51844a8e052ef1e2e091f91e52a5344228c0e782c2e324767e55e811691cf25dd9d6b114aaaf05fed2171925252a17b

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -31,7 +31,7 @@ $pb_button_sizes: (
     @include pb_button_link;
     @media (hover:hover) {
       &:hover {
-        color: $text_lt_default;
+        @include pb_button_hover(mix($primary_action, $white, 3%));
       }
     } 
   }

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

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

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

@@ -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.12.0"
-  VERSION = "11.12.1"
+  VERSION = "11.13.0.pre.alpha.fileupload1"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.12.1
+  version: 11.13.0.pre.alpha.fileupload1
 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-11-18 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -879,6 +879,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
@@ -2351,9 +2352,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: