@toptal/picasso-dropzone 1.0.23 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist-package/src/Dropzone/Dropzone.d.ts +0 -5
- package/dist-package/src/Dropzone/Dropzone.d.ts.map +1 -1
- package/dist-package/src/Dropzone/Dropzone.js +3 -13
- package/dist-package/src/Dropzone/Dropzone.js.map +1 -1
- package/package.json +2 -2
- package/src/Dropzone/Dropzone.tsx +1 -26
- package/src/Dropzone/test.tsx +7 -1
|
@@ -30,11 +30,6 @@ export interface Props extends BaseProps {
|
|
|
30
30
|
validator?: DropzoneOptions['validator'];
|
|
31
31
|
/** Value uses the File interface. */
|
|
32
32
|
value?: FileUpload[];
|
|
33
|
-
/**
|
|
34
|
-
* @deprecated [FX-4715] Use value[n].error instead.
|
|
35
|
-
* Provide reasons why files couldn't be dropped into dropzone
|
|
36
|
-
*/
|
|
37
|
-
errorMessages?: string[];
|
|
38
33
|
focused?: boolean;
|
|
39
34
|
hovered?: boolean;
|
|
40
35
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;
|
|
1
|
+
{"version":3,"file":"Dropzone.d.ts","sourceRoot":"","sources":["../../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAqB,MAAM,OAAO,CAAA;AAKzC,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAOvD,OAAO,KAAK,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,SAAS,CAAA;AAG1D,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAClC,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,gFAAgF;IAChF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,iCAAiC;IACjC,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,mDAAmD;IACnD,QAAQ,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACpD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAClD,8CAA8C;IAC9C,cAAc,CAAC,EAAE,eAAe,CAAC,gBAAgB,CAAC,CAAA;IAClD,8CAA8C;IAC9C,MAAM,CAAC,EAAE,eAAe,CAAC,QAAQ,CAAC,CAAA;IAClC,iCAAiC;IACjC,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,qCAAqC;IACrC,KAAK,CAAC,EAAE,UAAU,EAAE,CAAA;IACpB,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAID,eAAO,MAAM,QAAQ,gFA6EnB,CAAA;AAWF,eAAe,QAAQ,CAAA"}
|
|
@@ -3,15 +3,14 @@ import { useDropzone } from 'react-dropzone';
|
|
|
3
3
|
import cx from 'classnames';
|
|
4
4
|
import { makeStyles } from '@material-ui/core/styles';
|
|
5
5
|
import { Upload24 } from '@toptal/picasso-icons';
|
|
6
|
-
import { FormHint
|
|
6
|
+
import { FormHint } from '@toptal/picasso-form';
|
|
7
7
|
import { Container } from '@toptal/picasso-container';
|
|
8
8
|
import { FileList } from '@toptal/picasso-file-input';
|
|
9
9
|
import { Typography } from '@toptal/picasso-typography';
|
|
10
|
-
import { usePropDeprecationWarning } from '@toptal/picasso-utils';
|
|
11
10
|
import styles from './styles';
|
|
12
11
|
const useStyles = makeStyles(styles, { name: 'Dropzone' });
|
|
13
12
|
export const Dropzone = forwardRef(function Dropzone(props, ref) {
|
|
14
|
-
const { hint, hideContentText, onRemove, value, className,
|
|
13
|
+
const { hint, hideContentText, onRemove, value, className, style, 'data-testid': dataTestId, focused, hovered,
|
|
15
14
|
// dropzoneOptions
|
|
16
15
|
accept, minSize, maxSize, multiple, disabled, onDrop, onDropAccepted, onDropRejected, validator, } = props;
|
|
17
16
|
const isDisabled = Boolean(disabled || (!multiple && value && value.length > 0));
|
|
@@ -27,13 +26,6 @@ export const Dropzone = forwardRef(function Dropzone(props, ref) {
|
|
|
27
26
|
validator,
|
|
28
27
|
});
|
|
29
28
|
const classes = useStyles();
|
|
30
|
-
// TODO: [FX-4715]
|
|
31
|
-
usePropDeprecationWarning({
|
|
32
|
-
props,
|
|
33
|
-
name: 'errorMessages',
|
|
34
|
-
componentName: 'Dropzone',
|
|
35
|
-
description: 'Use the `value[n].error` prop instead. `errorMessages` is deprecated and will be removed in the next major release.',
|
|
36
|
-
});
|
|
37
29
|
return (React.createElement(Container, { style: style, ref: ref, className: className },
|
|
38
30
|
React.createElement(Container, Object.assign({ flex: true, direction: 'column', alignItems: 'center', "data-testid": dataTestId }, getRootProps({
|
|
39
31
|
className: cx(classes.root, {
|
|
@@ -46,9 +38,7 @@ export const Dropzone = forwardRef(function Dropzone(props, ref) {
|
|
|
46
38
|
React.createElement("input", Object.assign({}, getInputProps({ className: classes.nativeInput }))),
|
|
47
39
|
React.createElement(Upload24, { color: 'darkGrey' }),
|
|
48
40
|
!hideContentText && (React.createElement(Typography, { size: 'medium', color: 'black', weight: 'semibold' }, "Click or drag to upload")),
|
|
49
|
-
hint && React.createElement(FormHint, { className: cx(classes.hint) }, hint),
|
|
50
|
-
errorMessages.length > 0 &&
|
|
51
|
-
errorMessages.map((error, index) => (React.createElement(FormError, { className: classes.error, key: `${error}-${String(index)}` }, error)))),
|
|
41
|
+
hint && React.createElement(FormHint, { className: cx(classes.hint) }, hint)),
|
|
52
42
|
value && value.length > 0 && (React.createElement(Container, { top: 'xsmall' },
|
|
53
43
|
React.createElement(FileList, { files: value, onItemRemove: onRemove })))));
|
|
54
44
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropzone.js","sourceRoot":"","sources":["../../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,MAAM,YAAY,CAAA;AAE3B,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAErD,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAA;AAChD,OAAO,EAAE,QAAQ,
|
|
1
|
+
{"version":3,"file":"Dropzone.js","sourceRoot":"","sources":["../../../src/Dropzone/Dropzone.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-dropzone",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.1",
|
|
4
4
|
"description": "Toptal UI components library - Dropzone",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -23,7 +23,7 @@
|
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
25
|
"@toptal/picasso-container": "1.0.3",
|
|
26
|
-
"@toptal/picasso-file-input": "1.0.
|
|
26
|
+
"@toptal/picasso-file-input": "1.0.25",
|
|
27
27
|
"@toptal/picasso-form": "3.0.6",
|
|
28
28
|
"@toptal/picasso-icons": "1.4.0",
|
|
29
29
|
"@toptal/picasso-typography": "2.0.2",
|
|
@@ -5,11 +5,10 @@ import type { Theme } from '@material-ui/core/styles'
|
|
|
5
5
|
import { makeStyles } from '@material-ui/core/styles'
|
|
6
6
|
import type { BaseProps } from '@toptal/picasso-shared'
|
|
7
7
|
import { Upload24 } from '@toptal/picasso-icons'
|
|
8
|
-
import { FormHint
|
|
8
|
+
import { FormHint } from '@toptal/picasso-form'
|
|
9
9
|
import { Container } from '@toptal/picasso-container'
|
|
10
10
|
import { FileList } from '@toptal/picasso-file-input'
|
|
11
11
|
import { Typography } from '@toptal/picasso-typography'
|
|
12
|
-
import { usePropDeprecationWarning } from '@toptal/picasso-utils'
|
|
13
12
|
|
|
14
13
|
import type { FileUpload, DropzoneOptions } from './types'
|
|
15
14
|
import styles from './styles'
|
|
@@ -43,11 +42,6 @@ export interface Props extends BaseProps {
|
|
|
43
42
|
validator?: DropzoneOptions['validator']
|
|
44
43
|
/** Value uses the File interface. */
|
|
45
44
|
value?: FileUpload[]
|
|
46
|
-
/**
|
|
47
|
-
* @deprecated [FX-4715] Use value[n].error instead.
|
|
48
|
-
* Provide reasons why files couldn't be dropped into dropzone
|
|
49
|
-
*/
|
|
50
|
-
errorMessages?: string[]
|
|
51
45
|
focused?: boolean
|
|
52
46
|
hovered?: boolean
|
|
53
47
|
}
|
|
@@ -64,7 +58,6 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
|
|
|
64
58
|
onRemove,
|
|
65
59
|
value,
|
|
66
60
|
className,
|
|
67
|
-
errorMessages = [],
|
|
68
61
|
style,
|
|
69
62
|
'data-testid': dataTestId,
|
|
70
63
|
focused,
|
|
@@ -100,15 +93,6 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
|
|
|
100
93
|
|
|
101
94
|
const classes = useStyles()
|
|
102
95
|
|
|
103
|
-
// TODO: [FX-4715]
|
|
104
|
-
usePropDeprecationWarning({
|
|
105
|
-
props,
|
|
106
|
-
name: 'errorMessages',
|
|
107
|
-
componentName: 'Dropzone',
|
|
108
|
-
description:
|
|
109
|
-
'Use the `value[n].error` prop instead. `errorMessages` is deprecated and will be removed in the next major release.',
|
|
110
|
-
})
|
|
111
|
-
|
|
112
96
|
return (
|
|
113
97
|
<Container style={style} ref={ref} className={className}>
|
|
114
98
|
<Container
|
|
@@ -133,15 +117,6 @@ export const Dropzone = forwardRef<HTMLInputElement, Props>(function Dropzone(
|
|
|
133
117
|
</Typography>
|
|
134
118
|
)}
|
|
135
119
|
{hint && <FormHint className={cx(classes.hint)}>{hint}</FormHint>}
|
|
136
|
-
{errorMessages.length > 0 &&
|
|
137
|
-
errorMessages.map((error, index) => (
|
|
138
|
-
<FormError
|
|
139
|
-
className={classes.error}
|
|
140
|
-
key={`${error}-${String(index)}`}
|
|
141
|
-
>
|
|
142
|
-
{error}
|
|
143
|
-
</FormError>
|
|
144
|
-
))}
|
|
145
120
|
</Container>
|
|
146
121
|
{value && value.length > 0 && (
|
|
147
122
|
<Container top='xsmall'>
|
package/src/Dropzone/test.tsx
CHANGED
|
@@ -18,12 +18,18 @@ describe('Dropzone', () => {
|
|
|
18
18
|
|
|
19
19
|
it('shows error', () => {
|
|
20
20
|
const { queryByText } = renderDropzone({
|
|
21
|
-
errorMessages: ['error example'],
|
|
22
21
|
hint: 'hint example',
|
|
22
|
+
value: [
|
|
23
|
+
{
|
|
24
|
+
error: 'error example',
|
|
25
|
+
file: new File(['resume.pdf'], 'resume.pdf'),
|
|
26
|
+
},
|
|
27
|
+
],
|
|
23
28
|
})
|
|
24
29
|
|
|
25
30
|
expect(queryByText('hint example')).toBeInTheDocument()
|
|
26
31
|
expect(queryByText('error example')).toBeVisible()
|
|
32
|
+
expect(queryByText('resume.pdf')).toBeVisible()
|
|
27
33
|
})
|
|
28
34
|
|
|
29
35
|
it('renders hint', () => {
|