@toptal/picasso-avatar-upload 1.0.27 → 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.
Files changed (11) hide show
  1. package/dist-package/src/AvatarUpload/AvatarUpload.d.ts.map +1 -1
  2. package/dist-package/src/AvatarUpload/AvatarUpload.js +5 -19
  3. package/dist-package/src/AvatarUpload/AvatarUpload.js.map +1 -1
  4. package/dist-package/src/AvatarUpload/styles.d.ts +4 -3
  5. package/dist-package/src/AvatarUpload/styles.d.ts.map +1 -1
  6. package/dist-package/src/AvatarUpload/styles.js +8 -59
  7. package/dist-package/src/AvatarUpload/styles.js.map +1 -1
  8. package/package.json +4 -3
  9. package/src/AvatarUpload/AvatarUpload.tsx +11 -22
  10. package/src/AvatarUpload/__snapshots__/test.tsx.snap +2 -2
  11. package/src/AvatarUpload/styles.ts +20 -70
package/dist-package/src/AvatarUpload/AvatarUpload.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarUpload.d.ts","sourceRoot":"","sources":["../../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAEjE,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;AAG5D,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;AAMD,eAAO,MAAM,YAAY,2EAyIxB,CAAA;AAiBD,eAAe,YAAY,CAAA"}
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"}
package/dist-package/src/AvatarUpload/AvatarUpload.js CHANGED
@@ -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 styles from './styles';
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: cx(classes.icon, {
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: cx(classes.icon, {
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: cx(classes.root, classes[`size${capitalize(size)}`], {
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,
package/dist-package/src/AvatarUpload/AvatarUpload.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"AvatarUpload.js","sourceRoot":"","sources":["../../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"AvatarUpload.js","sourceRoot":"","sources":["../../../src/AvatarUpload/AvatarUpload.tsx"],"names":[],"mappings":"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"}
package/dist-package/src/AvatarUpload/styles.d.ts CHANGED
@@ -1,4 +1,5 @@
1
- import type { Theme } from '@material-ui/core/styles';
2
- declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "root" | "icon" | "disabled" | "sizeXxsmall" | "sizeXsmall" | "sizeSmall" | "sizeMedium" | "sizeLarge" | "error" | "hovered" | "readonlyAvatar">;
3
- export default _default;
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
package/dist-package/src/AvatarUpload/styles.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAIxB,KAAK;AAAlC,wBAkEC"}
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"}
package/dist-package/src/AvatarUpload/styles.js CHANGED
@@ -1,61 +1,10 @@
1
- import { createStyles } from '@material-ui/core/styles';
2
- import { alpha } from '@toptal/picasso-shared';
3
- export default ({ palette }) => {
4
- const iconHoverColor = alpha(palette.blue.main, 0.84);
5
- const iconHoverErrorColor = alpha(palette.red.main, 0.84);
6
- return createStyles({
7
- root: {
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
package/dist-package/src/AvatarUpload/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/AvatarUpload/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AACvD,OAAO,EAAE,KAAK,EAAE,MAAM,wBAAwB,CAAA;AAE9C,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE;IACpC,MAAM,cAAc,GAAG,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IACrD,MAAM,mBAAmB,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,IAAI,CAAC,CAAA;IAEzD,OAAO,YAAY,CAAC;QAClB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,MAAM;YACf,cAAc,EAAE,QAAQ;YACxB,UAAU,EAAE,QAAQ;YACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;YACxB,OAAO,EAAE,MAAM;YACf,MAAM,EAAE,SAAS;YAEjB,YAAY,EAAE;gBACZ,MAAM,EAAE,SAAS;aAClB;YAED,kBAAkB,EAAE;gBAClB,MAAM,EAAE,SAAS;aAClB;SACF;QAED,WAAW,EAAE;YACX,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,UAAU,EAAE;YACV,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;SACjB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,MAAM;YACb,MAAM,EAAE,MAAM;SACf;QACD,UAAU,EAAE;YACV,KAAK,EAAE,QAAQ;YACf,MAAM,EAAE,QAAQ;SACjB;QACD,SAAS,EAAE;YACT,KAAK,EAAE,OAAO;YACd,MAAM,EAAE,OAAO;SAChB;QAED,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU;YACpB,aAAa,EAAE,MAAM;YAErB,SAAS,EAAE;gBACT,KAAK,EAAE,OAAO,CAAC,GAAG,CAAC,IAAI;aACxB;YAED,WAAW,EAAE;gBACX,KAAK,EAAE,cAAc;gBAErB,SAAS,EAAE;oBACT,KAAK,EAAE,mBAAmB;iBAC3B;aACF;SACF;QAED,KAAK,EAAE,EAAE;QACT,QAAQ,EAAE,EAAE;QACZ,OAAO,EAAE,EAAE;QACX,cAAc,EAAE,EAAE;KACnB,CAAC,CAAA;AACJ,CAAC,CAAA"}
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": "1.0.27",
3
+ "version": "2.0.0",
4
4
  "description": "Toptal UI components library - AvatarUpload",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -28,7 +28,6 @@
28
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
- "@material-ui/core": "4.12.4",
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": [
package/src/AvatarUpload/AvatarUpload.tsx CHANGED
@@ -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 styles from './styles'
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={cx(classes.icon, {
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={cx(classes.icon, {
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: cx(classes.root, classes[`size${capitalize(size)}`], {
179
- [classes.disabled]: disabled,
180
- [classes.readonlyAvatar]: showAvatar,
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,
package/src/AvatarUpload/__snapshots__/test.tsx.snap CHANGED
@@ -6,7 +6,7 @@ exports[`AvatarUpload renders 1`] = `
6
6
  class="Picasso-root"
7
7
  >
8
8
  <div
9
- class="PicassoAvatarUpload-root PicassoAvatarUpload-sizeSmall"
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 PicassoAvatarUpload-icon"
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
  >
package/src/AvatarUpload/styles.ts CHANGED
@@ -1,71 +1,21 @@
1
- import type { Theme } from '@material-ui/core/styles'
2
- import { createStyles } from '@material-ui/core/styles'
3
- import { alpha } from '@toptal/picasso-shared'
4
-
5
- export default ({ palette }: Theme) => {
6
- const iconHoverColor = alpha(palette.blue.main, 0.84)
7
- const iconHoverErrorColor = alpha(palette.red.main, 0.84)
8
-
9
- return createStyles({
10
- root: {
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
+ )