@toptal/picasso-avatar-upload 1.0.26 → 2.0.0
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/AvatarUpload/AvatarUpload.d.ts.map +1 -1
- package/dist-package/src/AvatarUpload/AvatarUpload.js +5 -19
- package/dist-package/src/AvatarUpload/AvatarUpload.js.map +1 -1
- package/dist-package/src/AvatarUpload/styles.d.ts +4 -3
- package/dist-package/src/AvatarUpload/styles.d.ts.map +1 -1
- package/dist-package/src/AvatarUpload/styles.js +8 -59
- package/dist-package/src/AvatarUpload/styles.js.map +1 -1
- package/package.json +7 -6
- package/src/AvatarUpload/AvatarUpload.tsx +11 -22
- package/src/AvatarUpload/__snapshots__/test.tsx.snap +2 -2
- package/src/AvatarUpload/styles.ts +20 -70
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarUpload.d.ts","sourceRoot":"","sources":["../../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarUpload.d.ts","sourceRoot":"","sources":["../../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AACjE,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACtD,OAAO,KAA0C,MAAM,OAAO,CAAA;AAI9D,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAI5D,OAAO,KAAK,EAAE,mBAAmB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAA;AAI9D,MAAM,WAAW,KAAM,SAAQ,SAAS;IACtC,+FAA+F;IAC/F,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACtC,eAAe;IACf,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,gBAAgB;IAChB,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,yBAAyB;IACzB,IAAI,CAAC,EAAE,QAAQ,CAAC,SAAS,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC,CAAA;IACpE,mBAAmB;IACnB,WAAW,CAAC,EAAE,aAAa,CAAA;IAC3B,kCAAkC;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,iFAAiF;IACjF,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACtC,4BAA4B;IAC5B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC3D,gCAAgC;IAChC,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,EAAE,OAAO,CAAC,KAAK,IAAI,CAAA;IAC1D;;;OAGG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;IACtD;;;OAGG;IACH,cAAc,CAAC,EAAE,mBAAmB,CAAC,gBAAgB,CAAC,CAAA;IACtD;;;OAGG;IACH,MAAM,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,CAAA;IACtC;;;OAGG;IACH,SAAS,CAAC,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAA;IAC5C,iCAAiC;IACjC,KAAK,CAAC,EAAE,UAAU,CAAA;IAClB,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,CAAA;IAC7C,2DAA2D;IAC3D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,MAAM,CAAA;QACf,WAAW,CAAC,EAAE,MAAM,CAAA;QACpB,UAAU,CAAC,EAAE,MAAM,CAAA;QACnB,MAAM,CAAC,EAAE,MAAM,CAAA;KAChB,CAAA;CACF;AAED,eAAO,MAAM,YAAY,2EAoIxB,CAAA;AAiBD,eAAe,YAAY,CAAA"}
|
|
@@ -1,20 +1,15 @@
|
|
|
1
|
-
import { capitalize, makeStyles } from '@material-ui/core';
|
|
2
|
-
import cx from 'classnames';
|
|
3
1
|
import React, { forwardRef, useImperativeHandle } from 'react';
|
|
4
2
|
import { Avatar, AvatarDropzoneSvg } from '@toptal/picasso-avatar';
|
|
5
3
|
import { Upload16, Upload24 } from '@toptal/picasso-icons';
|
|
6
4
|
import { Loader } from '@toptal/picasso-loader';
|
|
7
|
-
import
|
|
5
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
6
|
+
import { getIconClass, rootClassBySize } from './styles';
|
|
8
7
|
import useAvatarUpload from './hooks/use-avatar-upload';
|
|
9
8
|
import useAvatarStates from './hooks/use-avatar-states';
|
|
10
|
-
const useStyles = makeStyles(styles, {
|
|
11
|
-
name: 'PicassoAvatarUpload',
|
|
12
|
-
});
|
|
13
9
|
export const AvatarUpload = forwardRef(function AvatarUpload(props, ref) {
|
|
14
10
|
const { autoFocus, autoHover, defaultActive, uploading = false, size = 'small', onEdit, onFocus, onBlur, status, 'data-testid': dataTestId, testIds, src, alt, style, avatarStyle,
|
|
15
11
|
// dropzoneOptions
|
|
16
12
|
accept, minSize, maxSize, disabled, onDrop, onDropAccepted, onDropRejected, validator, } = props;
|
|
17
|
-
const classes = useStyles();
|
|
18
13
|
const { rootRef, showUploadIcon, showAvatar, isDropzoneDragActive, isDropzoneFocused, getInputProps, getRootProps, handleEdit, } = useAvatarUpload({
|
|
19
14
|
accept,
|
|
20
15
|
minSize,
|
|
@@ -35,24 +30,15 @@ export const AvatarUpload = forwardRef(function AvatarUpload(props, ref) {
|
|
|
35
30
|
isDropzoneFocused,
|
|
36
31
|
isDropzoneDragActive,
|
|
37
32
|
});
|
|
38
|
-
const loadingIcon = uploading && (React.createElement(Loader, { className:
|
|
39
|
-
[classes.hovered]: hovered,
|
|
40
|
-
[classes.error]: status === 'error',
|
|
41
|
-
}), size: 'small', variant: 'inherit', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.loader }));
|
|
33
|
+
const loadingIcon = uploading && (React.createElement(Loader, { className: getIconClass(hovered, status), size: 'small', variant: 'inherit', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.loader }));
|
|
42
34
|
const UploadIconComponent = size === 'xxsmall' || size === 'xsmall' ? Upload16 : Upload24;
|
|
43
|
-
const uploadIcon = showUploadIcon && (React.createElement(UploadIconComponent, { className:
|
|
44
|
-
[classes.hovered]: hovered,
|
|
45
|
-
[classes.error]: status === 'error',
|
|
46
|
-
}), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.uploadIcon }));
|
|
35
|
+
const uploadIcon = showUploadIcon && (React.createElement(UploadIconComponent, { className: getIconClass(hovered, status), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.uploadIcon }));
|
|
47
36
|
// exposing the rootRef from react-dropzone to the parent component
|
|
48
37
|
useImperativeHandle(ref, () => { var _a; return (_a = rootRef.current) !== null && _a !== void 0 ? _a : {}; }, [
|
|
49
38
|
rootRef,
|
|
50
39
|
]);
|
|
51
40
|
return (React.createElement("div", Object.assign({ style: style }, getRootProps({
|
|
52
|
-
className:
|
|
53
|
-
[classes.disabled]: disabled,
|
|
54
|
-
[classes.readonlyAvatar]: showAvatar,
|
|
55
|
-
}),
|
|
41
|
+
className: twJoin('relative flex justify-center items-center text-blue-500 outline-none cursor-pointer', rootClassBySize[size], disabled && 'cursor-no-drop', showAvatar && 'cursor-default'),
|
|
56
42
|
'data-testid': dataTestId,
|
|
57
43
|
onMouseEnter,
|
|
58
44
|
onMouseLeave,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AvatarUpload.js","sourceRoot":"","sources":["../../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"AvatarUpload.js","sourceRoot":"","sources":["../../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
3
|
-
export
|
|
1
|
+
import type { Status } from '@toptal/picasso-outlined-input';
|
|
2
|
+
import type { Sizes } from '@toptal/picasso-shared';
|
|
3
|
+
export declare const rootClassBySize: Record<Exclude<Sizes, 'xlarge'>, string>;
|
|
4
|
+
export declare const getIconClass: (hovered: boolean, status?: Extract<Status, 'error' | 'default'>) => string;
|
|
4
5
|
//# sourceMappingURL=styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAC5D,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAGnD,eAAO,MAAM,eAAe,EAAE,MAAM,CAAC,OAAO,CAAC,KAAK,EAAE,QAAQ,CAAC,EAAE,MAAM,CAMpE,CAAA;AAED,eAAO,MAAM,YAAY,YACd,OAAO,WACP,QAAQ,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC,WAM5C,CAAA"}
|
|
@@ -1,61 +1,10 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
position: 'relative',
|
|
9
|
-
display: 'flex',
|
|
10
|
-
justifyContent: 'center',
|
|
11
|
-
alignItems: 'center',
|
|
12
|
-
color: palette.blue.main,
|
|
13
|
-
outline: 'none',
|
|
14
|
-
cursor: 'pointer',
|
|
15
|
-
'&$disabled': {
|
|
16
|
-
cursor: 'no-drop',
|
|
17
|
-
},
|
|
18
|
-
'&$readonlyAvatar': {
|
|
19
|
-
cursor: 'default',
|
|
20
|
-
},
|
|
21
|
-
},
|
|
22
|
-
sizeXxsmall: {
|
|
23
|
-
width: '2rem',
|
|
24
|
-
height: '2rem',
|
|
25
|
-
},
|
|
26
|
-
sizeXsmall: {
|
|
27
|
-
width: '2.5rem',
|
|
28
|
-
height: '2.5rem',
|
|
29
|
-
},
|
|
30
|
-
sizeSmall: {
|
|
31
|
-
width: '5rem',
|
|
32
|
-
height: '5rem',
|
|
33
|
-
},
|
|
34
|
-
sizeMedium: {
|
|
35
|
-
width: '7.5rem',
|
|
36
|
-
height: '7.5rem',
|
|
37
|
-
},
|
|
38
|
-
sizeLarge: {
|
|
39
|
-
width: '10rem',
|
|
40
|
-
height: '10rem',
|
|
41
|
-
},
|
|
42
|
-
icon: {
|
|
43
|
-
position: 'absolute',
|
|
44
|
-
pointerEvents: 'none',
|
|
45
|
-
'&$error': {
|
|
46
|
-
color: palette.red.main,
|
|
47
|
-
},
|
|
48
|
-
'&$hovered': {
|
|
49
|
-
color: iconHoverColor,
|
|
50
|
-
'&$error': {
|
|
51
|
-
color: iconHoverErrorColor,
|
|
52
|
-
},
|
|
53
|
-
},
|
|
54
|
-
},
|
|
55
|
-
error: {},
|
|
56
|
-
disabled: {},
|
|
57
|
-
hovered: {},
|
|
58
|
-
readonlyAvatar: {},
|
|
59
|
-
});
|
|
1
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge';
|
|
2
|
+
export const rootClassBySize = {
|
|
3
|
+
xxsmall: 'w-8 h-8',
|
|
4
|
+
xsmall: 'w-10 h-10',
|
|
5
|
+
small: 'w-[5rem] h-[5rem]',
|
|
6
|
+
medium: 'w-[7.5rem] h-[7.5rem]',
|
|
7
|
+
large: 'w-[10rem] h-[10rem]',
|
|
60
8
|
};
|
|
9
|
+
export const getIconClass = (hovered, status) => twJoin('absolute pointer-events-none', hovered && 'text-blue-500/[.84]', status === 'error' ? (hovered ? 'text-red-500/[.84]' : 'text-red-500') : '');
|
|
61
10
|
//# sourceMappingURL=styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,MAAM,gCAAgC,CAAA;AAEvD,MAAM,CAAC,MAAM,eAAe,GAA6C;IACvE,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,WAAW;IACnB,KAAK,EAAE,mBAAmB;IAC1B,MAAM,EAAE,uBAAuB;IAC/B,KAAK,EAAE,qBAAqB;CAC7B,CAAA;AAED,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,OAAgB,EAChB,MAA6C,EAC7C,EAAE,CACF,MAAM,CACJ,8BAA8B,EAC9B,OAAO,IAAI,qBAAqB,EAChC,MAAM,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC,EAAE,CAC5E,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@toptal/picasso-avatar-upload",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"description": "Toptal UI components library - AvatarUpload",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -22,13 +22,12 @@
|
|
|
22
22
|
},
|
|
23
23
|
"homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@toptal/picasso-avatar": "
|
|
25
|
+
"@toptal/picasso-avatar": "5.0.0",
|
|
26
26
|
"@toptal/picasso-icons": "1.5.0",
|
|
27
|
-
"@toptal/picasso-loader": "
|
|
28
|
-
"@toptal/picasso-outlined-input": "
|
|
27
|
+
"@toptal/picasso-loader": "2.0.0",
|
|
28
|
+
"@toptal/picasso-outlined-input": "2.0.0",
|
|
29
29
|
"@toptal/picasso-shared": "15.0.0",
|
|
30
30
|
"@toptal/picasso-utils": "1.0.3",
|
|
31
|
-
"classnames": "^2.5.1",
|
|
32
31
|
"react-dropzone": "^14.2.3"
|
|
33
32
|
},
|
|
34
33
|
"sideEffects": [
|
|
@@ -36,13 +35,15 @@
|
|
|
36
35
|
"**/styles.js"
|
|
37
36
|
],
|
|
38
37
|
"peerDependencies": {
|
|
39
|
-
"@
|
|
38
|
+
"@toptal/picasso-tailwind": ">=2.7",
|
|
39
|
+
"@toptal/picasso-tailwind-merge": "^1.1.0",
|
|
40
40
|
"react": ">=16.12.0 < 19.0.0"
|
|
41
41
|
},
|
|
42
42
|
"exports": {
|
|
43
43
|
".": "./dist-package/src/index.js"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
+
"@toptal/picasso-tailwind-merge": "1.2.0",
|
|
46
47
|
"@toptal/picasso-test-utils": "1.1.1"
|
|
47
48
|
},
|
|
48
49
|
"files": [
|
|
@@ -1,15 +1,13 @@
|
|
|
1
|
-
import type { Theme } from '@material-ui/core'
|
|
2
|
-
import { capitalize, makeStyles } from '@material-ui/core'
|
|
3
1
|
import type { BaseProps, SizeType } from '@toptal/picasso-shared'
|
|
4
|
-
import cx from 'classnames'
|
|
5
2
|
import type { CSSProperties, FocusEvent } from 'react'
|
|
6
3
|
import React, { forwardRef, useImperativeHandle } from 'react'
|
|
7
4
|
import { Avatar, AvatarDropzoneSvg } from '@toptal/picasso-avatar'
|
|
8
5
|
import { Upload16, Upload24 } from '@toptal/picasso-icons'
|
|
9
6
|
import { Loader } from '@toptal/picasso-loader'
|
|
10
7
|
import type { Status } from '@toptal/picasso-outlined-input'
|
|
8
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge'
|
|
11
9
|
|
|
12
|
-
import
|
|
10
|
+
import { getIconClass, rootClassBySize } from './styles'
|
|
13
11
|
import type { AvatarUploadOptions, FileUpload } from './types'
|
|
14
12
|
import useAvatarUpload from './hooks/use-avatar-upload'
|
|
15
13
|
import useAvatarStates from './hooks/use-avatar-states'
|
|
@@ -75,10 +73,6 @@ export interface Props extends BaseProps {
|
|
|
75
73
|
}
|
|
76
74
|
}
|
|
77
75
|
|
|
78
|
-
const useStyles = makeStyles<Theme>(styles, {
|
|
79
|
-
name: 'PicassoAvatarUpload',
|
|
80
|
-
})
|
|
81
|
-
|
|
82
76
|
export const AvatarUpload = forwardRef<HTMLElement, Props>(
|
|
83
77
|
function AvatarUpload(props, ref) {
|
|
84
78
|
const {
|
|
@@ -109,8 +103,6 @@ export const AvatarUpload = forwardRef<HTMLElement, Props>(
|
|
|
109
103
|
validator,
|
|
110
104
|
} = props
|
|
111
105
|
|
|
112
|
-
const classes = useStyles()
|
|
113
|
-
|
|
114
106
|
const {
|
|
115
107
|
rootRef,
|
|
116
108
|
showUploadIcon,
|
|
@@ -133,6 +125,7 @@ export const AvatarUpload = forwardRef<HTMLElement, Props>(
|
|
|
133
125
|
onDropAccepted,
|
|
134
126
|
onDropRejected,
|
|
135
127
|
})
|
|
128
|
+
|
|
136
129
|
const { hovered, onMouseEnter, onMouseLeave, isDragActive, isFocused } =
|
|
137
130
|
useAvatarStates({
|
|
138
131
|
autoHover,
|
|
@@ -144,10 +137,7 @@ export const AvatarUpload = forwardRef<HTMLElement, Props>(
|
|
|
144
137
|
|
|
145
138
|
const loadingIcon = uploading && (
|
|
146
139
|
<Loader
|
|
147
|
-
className={
|
|
148
|
-
[classes.hovered]: hovered,
|
|
149
|
-
[classes.error]: status === 'error',
|
|
150
|
-
})}
|
|
140
|
+
className={getIconClass(hovered, status)}
|
|
151
141
|
size='small'
|
|
152
142
|
variant='inherit'
|
|
153
143
|
data-testid={testIds?.loader}
|
|
@@ -158,10 +148,7 @@ export const AvatarUpload = forwardRef<HTMLElement, Props>(
|
|
|
158
148
|
size === 'xxsmall' || size === 'xsmall' ? Upload16 : Upload24
|
|
159
149
|
const uploadIcon = showUploadIcon && (
|
|
160
150
|
<UploadIconComponent
|
|
161
|
-
className={
|
|
162
|
-
[classes.hovered]: hovered,
|
|
163
|
-
[classes.error]: status === 'error',
|
|
164
|
-
})}
|
|
151
|
+
className={getIconClass(hovered, status)}
|
|
165
152
|
data-testid={testIds?.uploadIcon}
|
|
166
153
|
/>
|
|
167
154
|
)
|
|
@@ -175,10 +162,12 @@ export const AvatarUpload = forwardRef<HTMLElement, Props>(
|
|
|
175
162
|
<div
|
|
176
163
|
style={style}
|
|
177
164
|
{...getRootProps({
|
|
178
|
-
className:
|
|
179
|
-
|
|
180
|
-
[
|
|
181
|
-
|
|
165
|
+
className: twJoin(
|
|
166
|
+
'relative flex justify-center items-center text-blue-500 outline-none cursor-pointer',
|
|
167
|
+
rootClassBySize[size],
|
|
168
|
+
disabled && 'cursor-no-drop',
|
|
169
|
+
showAvatar && 'cursor-default'
|
|
170
|
+
),
|
|
182
171
|
'data-testid': dataTestId,
|
|
183
172
|
onMouseEnter,
|
|
184
173
|
onMouseLeave,
|
|
@@ -6,7 +6,7 @@ exports[`AvatarUpload renders 1`] = `
|
|
|
6
6
|
class="Picasso-root"
|
|
7
7
|
>
|
|
8
8
|
<div
|
|
9
|
-
class="
|
|
9
|
+
class="relative flex justify-center items-center text-blue outline-none cursor-pointer w-[5rem] h-[5rem]"
|
|
10
10
|
role="presentation"
|
|
11
11
|
tabindex="0"
|
|
12
12
|
>
|
|
@@ -67,7 +67,7 @@ exports[`AvatarUpload renders 1`] = `
|
|
|
67
67
|
</svg>
|
|
68
68
|
</div>
|
|
69
69
|
<svg
|
|
70
|
-
class="PicassoSvgUpload24-root
|
|
70
|
+
class="PicassoSvgUpload24-root absolute pointer-events"
|
|
71
71
|
style="min-width: 24px; min-height: 24px;"
|
|
72
72
|
viewBox="0 0 24 24"
|
|
73
73
|
>
|
|
@@ -1,71 +1,21 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
|
|
5
|
-
export
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
position: 'relative',
|
|
12
|
-
display: 'flex',
|
|
13
|
-
justifyContent: 'center',
|
|
14
|
-
alignItems: 'center',
|
|
15
|
-
color: palette.blue.main,
|
|
16
|
-
outline: 'none',
|
|
17
|
-
cursor: 'pointer',
|
|
18
|
-
|
|
19
|
-
'&$disabled': {
|
|
20
|
-
cursor: 'no-drop',
|
|
21
|
-
},
|
|
22
|
-
|
|
23
|
-
'&$readonlyAvatar': {
|
|
24
|
-
cursor: 'default',
|
|
25
|
-
},
|
|
26
|
-
},
|
|
27
|
-
|
|
28
|
-
sizeXxsmall: {
|
|
29
|
-
width: '2rem',
|
|
30
|
-
height: '2rem',
|
|
31
|
-
},
|
|
32
|
-
sizeXsmall: {
|
|
33
|
-
width: '2.5rem',
|
|
34
|
-
height: '2.5rem',
|
|
35
|
-
},
|
|
36
|
-
sizeSmall: {
|
|
37
|
-
width: '5rem',
|
|
38
|
-
height: '5rem',
|
|
39
|
-
},
|
|
40
|
-
sizeMedium: {
|
|
41
|
-
width: '7.5rem',
|
|
42
|
-
height: '7.5rem',
|
|
43
|
-
},
|
|
44
|
-
sizeLarge: {
|
|
45
|
-
width: '10rem',
|
|
46
|
-
height: '10rem',
|
|
47
|
-
},
|
|
48
|
-
|
|
49
|
-
icon: {
|
|
50
|
-
position: 'absolute',
|
|
51
|
-
pointerEvents: 'none',
|
|
52
|
-
|
|
53
|
-
'&$error': {
|
|
54
|
-
color: palette.red.main,
|
|
55
|
-
},
|
|
56
|
-
|
|
57
|
-
'&$hovered': {
|
|
58
|
-
color: iconHoverColor,
|
|
59
|
-
|
|
60
|
-
'&$error': {
|
|
61
|
-
color: iconHoverErrorColor,
|
|
62
|
-
},
|
|
63
|
-
},
|
|
64
|
-
},
|
|
65
|
-
|
|
66
|
-
error: {},
|
|
67
|
-
disabled: {},
|
|
68
|
-
hovered: {},
|
|
69
|
-
readonlyAvatar: {},
|
|
70
|
-
})
|
|
1
|
+
import type { Status } from '@toptal/picasso-outlined-input'
|
|
2
|
+
import type { Sizes } from '@toptal/picasso-shared'
|
|
3
|
+
import { twJoin } from '@toptal/picasso-tailwind-merge'
|
|
4
|
+
|
|
5
|
+
export const rootClassBySize: Record<Exclude<Sizes, 'xlarge'>, string> = {
|
|
6
|
+
xxsmall: 'w-8 h-8',
|
|
7
|
+
xsmall: 'w-10 h-10',
|
|
8
|
+
small: 'w-[5rem] h-[5rem]',
|
|
9
|
+
medium: 'w-[7.5rem] h-[7.5rem]',
|
|
10
|
+
large: 'w-[10rem] h-[10rem]',
|
|
71
11
|
}
|
|
12
|
+
|
|
13
|
+
export const getIconClass = (
|
|
14
|
+
hovered: boolean,
|
|
15
|
+
status?: Extract<Status, 'error' | 'default'>
|
|
16
|
+
) =>
|
|
17
|
+
twJoin(
|
|
18
|
+
'absolute pointer-events-none',
|
|
19
|
+
hovered && 'text-blue-500/[.84]',
|
|
20
|
+
status === 'error' ? (hovered ? 'text-red-500/[.84]' : 'text-red-500') : ''
|
|
21
|
+
)
|