playbook_ui 11.8.1 → 11.9.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: 66327c9e420d8969f62d18ced60491926d275b8c93e7b6629df66d2945115c59
4
- data.tar.gz: 4f4b1c3a71fa5fa5bcf2031b9e62fc5b82f2755d0c18b7449ad085b7746dc3fe
3
+ metadata.gz: 5376b30a51f38366cf934ddf2b1e7924a9b7a1ee80b1825c29f1f3f7b21ec3d9
4
+ data.tar.gz: f522f4649bf2f6efd3a707023f350b9b2a6518c2f7e6bdbeff5bf639e61d8426
5
5
  SHA512:
6
- metadata.gz: 3bb0ff5bf96097f877f5d981302fa7337136dfdcbd8e1a99fd6579cf9c7621ebb9d38a89ca1d86187b79b52f341e93d98b75cca1fc43d3a7f1b8eafe2ba4acce
7
- data.tar.gz: 27d81a4968950de36f94278a86ccdebf2adf8bb6e15330573ac49719a36d0797f9bfb1622d0d9d1d65091198d541ad328510ed3fd5ef065079f01dc0613205c4
6
+ metadata.gz: 647e3eb358806661f465ba9e1bdf3a5e2261895e6002c526088289b2170e87fca1cd6b12688ef5d78e981b9045971ef949534bcd27b1e7e23c94b36046be4d26
7
+ data.tar.gz: 1e19f47ed627201e2569f11e52623491de59111397deb5b38196b869f1361580aee8f49d8c23f0fbc38a971400f5ab47307c359d282d599c933a1b0b7f80915b
@@ -12,26 +12,42 @@ 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: Callback<string, string>,
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
+ const { getRootProps, getInputProps, isDragActive, rejectedFiles } = useDropzone({
31
41
  accept,
42
+ maxSize,
32
43
  onDrop,
33
44
  })
34
45
 
46
+ const getMaxFileSizeText = () => `Max file size is ${getFormattedFileSize(maxSize)}.`
47
+
48
+ const isFileTooLarge = maxSize && rejectedFiles.length > 0 && rejectedFiles[0].size > maxSize;
49
+ if (isFileTooLarge) onFilesRejected(`File size is too large! ${getMaxFileSizeText()}`)
50
+
35
51
  const acceptedFileTypes = () => {
36
52
  return accept.map((fileType) => {
37
53
  if (fileType.startsWith('image/')) {
@@ -44,6 +60,13 @@ const FileUpload = (props: FileUploadProps) => {
44
60
 
45
61
  const dataProps = buildDataProps(data)
46
62
 
63
+ const getDescription = () => {
64
+ let msg = ""
65
+ 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()}.`
66
+ if (maxSize) msg += ` ${getMaxFileSizeText()}`
67
+ return msg
68
+ }
69
+
47
70
  return (
48
71
  <div
49
72
  className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
@@ -56,7 +79,7 @@ const FileUpload = (props: FileUploadProps) => {
56
79
  {isDragActive ?
57
80
  <p>{'Drop the files here ...'}</p>
58
81
  :
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>
82
+ <p>{getDescription()}</p>
60
83
  }
61
84
  </Body>
62
85
  </Card>
@@ -0,0 +1,51 @@
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
+
20
+ const FileUploadMaxSize = (props) => {
21
+ const [filesToUpload, setFilesToUpload] = useState([])
22
+ const [error, setError] = useState()
23
+
24
+ const handleOnFilesAccepted = (files) => {
25
+ setFilesToUpload([...filesToUpload, ...files])
26
+ }
27
+
28
+ return (
29
+ <div>
30
+ <AcceptedFilesList
31
+ files={filesToUpload}
32
+ {...props}
33
+ />
34
+ <FileUpload
35
+ acceptedFilesDescription="Choose a file or drag it here. 1 MB size limit."
36
+ maxSize={1000000}
37
+ onFilesAccepted={handleOnFilesAccepted}
38
+ onFilesRejected={(errorMessage) => setError(errorMessage)}
39
+ {...props}
40
+ />
41
+ { error && (
42
+ <Body
43
+ color="error"
44
+ marginY="md"
45
+ >{error}</Body>
46
+ )}
47
+ </div>
48
+ )
49
+ }
50
+
51
+ 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
  })
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "11.8.0"
5
- VERSION = "11.8.1"
5
+ VERSION = "11.9.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.8.1
4
+ version: 11.9.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-10-13 00:00:00.000000000 Z
12
+ date: 2022-10-17 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -854,6 +854,7 @@ files:
854
854
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.jsx
855
855
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_custom_description.md
856
856
  - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_default.jsx
857
+ - app/pb_kits/playbook/pb_file_upload/docs/_file_upload_max_size.jsx
857
858
  - app/pb_kits/playbook/pb_file_upload/docs/example.yml
858
859
  - app/pb_kits/playbook/pb_file_upload/docs/index.js
859
860
  - app/pb_kits/playbook/pb_file_upload/fileupload.test.js
@@ -2309,9 +2310,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2309
2310
  version: '0'
2310
2311
  required_rubygems_version: !ruby/object:Gem::Requirement
2311
2312
  requirements:
2312
- - - ">="
2313
+ - - ">"
2313
2314
  - !ruby/object:Gem::Version
2314
- version: '0'
2315
+ version: 1.3.1
2315
2316
  requirements: []
2316
2317
  rubygems_version: 3.3.7
2317
2318
  signing_key: