playbook_ui 11.12.0 → 11.13.0.pre.alpha.fileupload1

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d5a9c00dbcbcf3ec7e44832210e0e0c3651eeb4ab6aa9f92ae083799801e9681
4
- data.tar.gz: 14929bd370f1f6452327ef413e98cb4b4d88318db6a805cb2f0f184662602a6d
3
+ metadata.gz: ce94dd25b697d7a9234d80bb238c4e5c30b49ca7d88ff02bafb479868543644d
4
+ data.tar.gz: af5f92d96b803f0449c9379e133108b06d6e50533dc9d5470594000472699a5e
5
5
  SHA512:
6
- metadata.gz: 960e28629efc7ac1daa28b7ddb79575cb5c5927f1dba68085f4e0e9c80ad24a3af3512b95f297e07a398e7f6c79b334e348832f76a66e89ac7b90e079fd5e389
7
- data.tar.gz: d5369dadccd7f2c4f629f2f8b9d7e1436a6c67664acbb0f095e9b79b329baa63cb5c84cf5aa30fe3e86faac90bf78de2f25e7acf5eee3e6a51c872b802c6f38b
6
+ metadata.gz: 48326c8d55ada1673178110548381bddfd63578af6db5383206bbfca96daa7f4527ca54ce9f566660935baff7583f1ff7b601fd14ca095360e6b1490e2b485b7
7
+ data.tar.gz: aacd259e275129fa7757e55f8f779f2fa51844a8e052ef1e2e091f91e52a5344228c0e782c2e324767e55e811691cf25dd9d6b114aaaf05fed2171925252a17b
@@ -1,4 +1,4 @@
1
- import React, { useCallback } from 'react'
1
+ import React, { useEffect, useCallback, useRef } from 'react'
2
2
  import { useDropzone } from 'react-dropzone'
3
3
  import classnames from 'classnames'
4
4
 
@@ -12,26 +12,51 @@ import Card from '../pb_card/_card'
12
12
  type FileUploadProps = {
13
13
  accept?: string[],
14
14
  className?: string,
15
- data?: object,
15
+ data?: {[key: string]: string | number},
16
16
  acceptedFilesDescription?: string,
17
+ maxSize?: number,
17
18
  onFilesAccepted: Callback<File, File>,
19
+ onFilesRejected: (error: string, files: File[]) => void,
18
20
  }
19
21
 
20
- const FileUpload = (props: FileUploadProps) => {
22
+ const getFormattedFileSize = (fileSize: number): string => {
23
+ return `${fileSize / 1e+6} MB`
24
+ }
25
+
26
+ const FileUpload = (props: FileUploadProps): React.ReactElement => {
21
27
  const {
22
28
  accept = null,
23
29
  acceptedFilesDescription = '',
24
30
  className,
25
31
  data = {},
32
+ maxSize,
26
33
  onFilesAccepted = noop,
34
+ onFilesRejected = noop,
27
35
  } = props
28
36
 
29
- const onDrop = useCallback((files) => onFilesAccepted(files), []);
30
- const { getRootProps, getInputProps, isDragActive } = useDropzone({
37
+ const onDrop = useCallback((files) => {
38
+ onFilesAccepted(files)
39
+ }, [onFilesAccepted])
40
+
41
+ const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
31
42
  accept,
43
+ maxSize,
32
44
  onDrop,
33
45
  })
34
46
 
47
+ const prevRejected: any = useRef();
48
+
49
+ const maxFileSizeText = `Max file size is ${getFormattedFileSize(maxSize)}.`
50
+
51
+ useEffect(() => {
52
+ if (rejectedFiles === prevRejected.current) return
53
+ const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
54
+ if (isFileTooLarge) {
55
+ onFilesRejected(`File size is too large! ${maxFileSizeText}`, rejectedFiles)
56
+ }
57
+ prevRejected.current = rejectedFiles
58
+ }, [maxFileSizeText, maxSize, onFilesRejected, rejectedFiles])
59
+
35
60
  const acceptedFileTypes = () => {
36
61
  return accept.map((fileType) => {
37
62
  if (fileType.startsWith('image/')) {
@@ -44,6 +69,13 @@ const FileUpload = (props: FileUploadProps) => {
44
69
 
45
70
  const dataProps = buildDataProps(data)
46
71
 
72
+ const getDescription = () => {
73
+ let msg = ""
74
+ 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()}.`
75
+ if (maxSize) msg += ` ${maxFileSizeText}`
76
+ return msg
77
+ }
78
+
47
79
  return (
48
80
  <div
49
81
  className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -56,7 +88,7 @@ const FileUpload = (props: FileUploadProps) => {
56
88
  {isDragActive ?
57
89
  <p>{'Drop the files here ...'}</p>
58
90
  :
59
- <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>
91
+ <p>{getDescription()}</p>
60
92
  }
61
93
  </Body>
62
94
  </Card>
@@ -0,0 +1,71 @@
1
+ /* @flow */
2
+ /* eslint-disable react/no-multi-comp */
3
+
4
+ import React, { useState } from 'react'
5
+ import {
6
+ Body,
7
+ FileUpload,
8
+ List,
9
+ ListItem,
10
+ } from '../..'
11
+
12
+ const AcceptedFilesList = ({ files }: FileList) => (
13
+ <List>
14
+ {files.map((file) => (
15
+ <ListItem key={file.name}>{file.name}</ListItem>
16
+ ))}
17
+ </List>
18
+ )
19
+ const RejectedFilesList = ({ files }: FileList) => (
20
+ <List>
21
+ {files.map((file) => (
22
+ <ListItem key={file.name}><Body color="error">{`${file.name} (file too large)`}</Body></ListItem>
23
+ ))}
24
+ </List>
25
+ )
26
+
27
+ const FileUploadMaxSize = (props) => {
28
+ const [filesToUpload, setFilesToUpload] = useState([])
29
+ const [filesRejected, setFilesRejected] = useState([])
30
+ const [error, setError] = useState()
31
+
32
+ const handleOnFilesAccepted = (files) => {
33
+ if (files.length) setError()
34
+ setFilesToUpload([...filesToUpload, ...files])
35
+ }
36
+
37
+ const handleOnFilesRejected = (error, files) => {
38
+ setError(error)
39
+ setFilesRejected([...filesRejected, ...files])
40
+ }
41
+
42
+ return (
43
+ <div>
44
+ <AcceptedFilesList
45
+ files={filesToUpload}
46
+ {...props}
47
+ />
48
+ <RejectedFilesList
49
+ files={filesRejected}
50
+ {...props}
51
+ />
52
+ <FileUpload
53
+ acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
54
+ maxSize={1000000}
55
+ onFilesAccepted={handleOnFilesAccepted}
56
+ onFilesRejected={handleOnFilesRejected}
57
+ {...props}
58
+ />
59
+ { error && (
60
+ <Body
61
+ color="error"
62
+ marginY="md"
63
+ >
64
+ {error}
65
+ </Body>
66
+ )}
67
+ </div>
68
+ )
69
+ }
70
+
71
+ export default FileUploadMaxSize
@@ -6,4 +6,5 @@ examples:
6
6
  - file_upload_default: Default List of files to upload
7
7
  - file_upload_accept: Accept only certain types of files
8
8
  - file_upload_custom_description: Add your one accepted files description
9
+ - file_upload_max_size: Set a file size limit
9
10
 
@@ -1,3 +1,4 @@
1
1
  export { default as FileUploadDefault } from './_file_upload_default.jsx'
2
2
  export { default as FileUploadAccept } from './_file_upload_accept.jsx'
3
3
  export { default as FileUploadCustomDescription } from './_file_upload_custom_description.jsx'
4
+ export { default as FileUploadMaxSize } from './_file_upload_max_size.jsx'
@@ -27,14 +27,14 @@ test('shows default drag text', () => {
27
27
  expect(kit).toHaveTextContent('Choose a file or drag it here')
28
28
  })
29
29
 
30
- test('shows type-specific drag text', () => {
30
+ test('displays max file size text', () => {
31
31
  render(
32
32
  <FileUpload
33
- accept={['image/svg+xml']}
34
33
  data={{ testid: testid }}
34
+ maxSize={1e+6}
35
35
  />
36
36
  )
37
37
 
38
38
  const kit = screen.getByTestId(testid)
39
- expect(kit).toHaveTextContent('Choose a file or drag it here. The accepted file types are: svg+xml')
39
+ expect(kit).toHaveTextContent('Choose a file or drag it here. Max file size is 1 MB.')
40
40
  })
@@ -1,6 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- PREVIOUS_VERSION = "11.11.0"
5
- VERSION = "11.12.0"
4
+ PREVIOUS_VERSION = "11.12.0"
5
+ VERSION = "11.13.0.pre.alpha.fileupload1"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 11.12.0
4
+ version: 11.13.0.pre.alpha.fileupload1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2022-11-15 00:00:00.000000000 Z
12
+ date: 2022-11-18 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -879,6 +879,7 @@ files:
879
879
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
880
880
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
881
881
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
882
+ - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
882
883
  - app/pb_kits/playbook/pb_file_upload/docs/example.yml
883
884
  - app/pb_kits/playbook/pb_file_upload/docs/index.js
884
885
  - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
@@ -2351,9 +2352,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2351
2352
  version: '0'
2352
2353
  required_rubygems_version: !ruby/object:Gem::Requirement
2353
2354
  requirements:
2354
- - - ">="
2355
+ - - ">"
2355
2356
  - !ruby/object:Gem::Version
2356
- version: '0'
2357
+ version: 1.3.1
2357
2358
  requirements: []
2358
2359
  rubygems_version: 3.3.7
2359
2360
  signing_key: