@jobber/components 2.84.0 → 2.84.3
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/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,30 @@ menu: Changelog
|
|
|
8
8
|
All notable changes to this project will be documented in this file.
|
|
9
9
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
10
10
|
|
|
11
|
+
## [2.84.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.2...@jobber/components@2.84.3) (2022-06-13)
|
|
12
|
+
|
|
13
|
+
**Note:** Version bump only for package @jobber/components
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
## [2.84.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.1...@jobber/components@2.84.2) (2022-06-10)
|
|
20
|
+
|
|
21
|
+
**Note:** Version bump only for package @jobber/components
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
## [2.84.1](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.0...@jobber/components@2.84.1) (2022-06-09)
|
|
28
|
+
|
|
29
|
+
**Note:** Version bump only for package @jobber/components
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
|
|
34
|
+
|
|
11
35
|
# [2.84.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.83.1...@jobber/components@2.84.0) (2022-06-07)
|
|
12
36
|
|
|
13
37
|
|
|
@@ -1,13 +1,30 @@
|
|
|
1
|
+
import React from "react";
|
|
1
2
|
import { FileUpload } from "../InputFile";
|
|
2
3
|
interface FormatFileProps {
|
|
3
4
|
/**
|
|
4
5
|
* File upload details object. (See FileUpload type.)
|
|
5
6
|
*/
|
|
6
7
|
readonly file: FileUpload;
|
|
8
|
+
/**
|
|
9
|
+
* To display as either a file row or thumbnail
|
|
10
|
+
*
|
|
11
|
+
* @default "expanded"
|
|
12
|
+
*/
|
|
13
|
+
readonly display?: "expanded" | "compact";
|
|
14
|
+
/**
|
|
15
|
+
* The base dimensions of the thumbnail
|
|
16
|
+
*
|
|
17
|
+
* @default "base"
|
|
18
|
+
*/
|
|
19
|
+
readonly displaySize?: "base" | "large";
|
|
20
|
+
/**
|
|
21
|
+
* Function to execute when format file is clicked
|
|
22
|
+
*/
|
|
23
|
+
onClick?(event: React.MouseEvent<HTMLDivElement | HTMLButtonElement>): void;
|
|
7
24
|
/**
|
|
8
25
|
* onDelete callback - this function will be called when the delete action is triggered
|
|
9
26
|
*/
|
|
10
27
|
onDelete?(): void;
|
|
11
28
|
}
|
|
12
|
-
export declare function FormatFile({ file, onDelete }: FormatFileProps): JSX.Element;
|
|
29
|
+
export declare function FormatFile({ file, display, displaySize, onDelete, onClick, }: FormatFileProps): JSX.Element;
|
|
13
30
|
export {};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { FileUpload } from "../InputFile";
|
|
2
|
+
interface InternalThumbnailProps {
|
|
3
|
+
readonly name?: string;
|
|
4
|
+
readonly hideName?: boolean;
|
|
5
|
+
readonly size: "base" | "large";
|
|
6
|
+
readonly file: FileUpload;
|
|
7
|
+
}
|
|
8
|
+
export declare function InternalThumbnail({ name, hideName, size, file, }: InternalThumbnailProps): JSX.Element;
|
|
9
|
+
export {};
|
package/dist/FormatFile/index.js
CHANGED
|
@@ -8,43 +8,63 @@ var __chunk_1 = require('../chunk-b67af3cb.js');
|
|
|
8
8
|
var React = require('react');
|
|
9
9
|
var React__default = _interopDefault(React);
|
|
10
10
|
var __chunk_2 = require('../chunk-17e02351.js');
|
|
11
|
-
require('classnames');
|
|
11
|
+
var classnames = _interopDefault(require('classnames'));
|
|
12
12
|
var index = require('../Typography/index.js');
|
|
13
|
+
var index$1 = require('../Text/index.js');
|
|
13
14
|
require('@jobber/design');
|
|
14
15
|
var index$2 = require('../Icon/index.js');
|
|
16
|
+
require('../Heading/index.js');
|
|
15
17
|
require('react-router-dom');
|
|
16
18
|
var index$5 = require('../Button/index.js');
|
|
17
|
-
|
|
18
|
-
|
|
19
|
+
require('framer-motion');
|
|
20
|
+
require('@jobber/hooks');
|
|
21
|
+
require('../ButtonDismiss/index.js');
|
|
22
|
+
require('react-dom');
|
|
23
|
+
require('../Modal/index.js');
|
|
24
|
+
require('../Content/index.js');
|
|
25
|
+
require('react-markdown');
|
|
26
|
+
require('../Emphasis/index.js');
|
|
27
|
+
require('../Markdown/index.js');
|
|
28
|
+
var index$7 = require('../ConfirmationModal/index.js');
|
|
29
|
+
var getHumanReadableFileSize = _interopDefault(require('filesize'));
|
|
30
|
+
var index$8 = require('../ProgressBar/index.js');
|
|
19
31
|
|
|
20
|
-
var css = ":root {\n --file-card--height: calc(var(--space-base) * 3.5);\n --file-card--background-color: var(--color-white);\n --file-card--header-background-color: var(--color-greyBlue--lighter);\n --file-card--content-background-color: var(--color-white);\n --file-card--border-color: var(--color-border);\n --file-card--accent-color: var(--color-grey);\n --file-card--base-padding: var(--space-small);\n}\n\n.
|
|
21
|
-
var styles = {"
|
|
32
|
+
var css = ":root {\n --file-card--height: calc(var(--space-base) * 3.5);\n --file-card--background-color: var(--color-white);\n --file-card--header-background-color: var(--color-greyBlue--lighter);\n --file-card--content-background-color: var(--color-white);\n --file-card--border-color: var(--color-border);\n --file-card--accent-color: var(--color-grey);\n --file-card--base-padding: var(--space-small);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH {\n display: grid;\n grid-template-columns: auto -webkit-max-content;\n grid-template-columns: auto max-content;\n grid-gap: var(--space-small);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-gap: var(--space-small);\n grid-gap: var(--file-card--base-padding);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding-right: var(--space-small);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--color-border);\n border: var(--border-base) solid var(--file-card--border-color);\n border-radius: var(--radius-base);\n background-color: var(--color-white);\n background-color: var(--color-white);\n background-color: var(--file-card--background-color);\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH,\n._9dGq9pkZYNxwlhRwaVaWH {\n position: relative;\n}\n\n._26euKXXdGUFmchTL7YqSO7 {\n display: grid;\n grid-template-columns: -webkit-max-content auto;\n grid-template-columns: max-content auto;\n grid-gap: var(--space-small);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-gap: var(--space-small);\n grid-gap: var(--file-card--base-padding);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-gap: var(--file-card--base-padding);\n gap: var(--file-card--base-padding);\n -ms-flex-align: center;\n align-items: center;\n padding: 0;\n border: none;\n text-align: left;\n background-color: var(--color-transparent);\n}\n\n._2OuJNJWNnBmTTzGAUfSaM7 {\n width: 168px;\n height: 168px;\n}\n\n._2GSQaEqbKQHd7Tf2XqJ5i1 {\n width: 56px;\n height: 56px;\n}\n\n._1JreUit2_KSn_-iQ3vBhUn {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n box-sizing: border-box;\n padding: 0;\n overflow: hidden;\n background-color: var(--color-surface--background);\n -ms-flex-negative: 0;\n flex-shrink: 0;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7 {\n outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._26euKXXdGUFmchTL7YqSO7:focus {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._1JreUit2_KSn_-iQ3vBhUn {\n border-radius: var(--radius-base);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._26euKXXdGUFmchTL7YqSO7:focus::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n box-shadow: var(--shadow-focus);\n}\n\n._9dGq9pkZYNxwlhRwaVaWH ._1JreUit2_KSn_-iQ3vBhUn {\n border-right: none;\n border-bottom-left-radius: var(--radius-base);\n border-top-left-radius: var(--radius-base);\n}\n\n._3_8YVeas_gdmexLUKZ3mpR {\n cursor: pointer;\n}\n\n._15spVvfm0lqLuhAwuIuWrm ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: var(--color-overlay);\n opacity: 0;\n transition: all var(--timing-base);\n}\n\n._15spVvfm0lqLuhAwuIuWrm:hover ._1JreUit2_KSn_-iQ3vBhUn::after,\n._15spVvfm0lqLuhAwuIuWrm:focus ._1JreUit2_KSn_-iQ3vBhUn::after,\n._3Sb6hKDYDXwDcc69ByIdyl {\n opacity: 1;\n}\n\n._3Sb6hKDYDXwDcc69ByIdyl {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n padding: var(--space-small);\n padding: var(--space-small);\n padding: var(--file-card--base-padding);\n}\n\n._2My-AZfFXfluwQURTvc6Z9 {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: 0;\n}\n\n._2My-AZfFXfluwQURTvc6Z9 p {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n._24PiUzD_Hoe3p6hD_OxjbH ._2pUMiqf0oiCus7WkVuTt57 {\n position: absolute;\n top: var(--space-smaller);\n right: var(--space-smaller);\n}\n\n._2g5hRVudATuiROg0LStgTs ~ ._2pUMiqf0oiCus7WkVuTt57 {\n visibility: hidden;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57[focus-within],\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n visibility: visible;\n}\n\n._2pUMiqf0oiCus7WkVuTt57:focus-within,\n._2pUMiqf0oiCus7WkVuTt57:hover,\n._2g5hRVudATuiROg0LStgTs:hover ~ ._2pUMiqf0oiCus7WkVuTt57,\n._2g5hRVudATuiROg0LStgTs:focus ~ ._2pUMiqf0oiCus7WkVuTt57 {\n visibility: visible;\n}\n";
|
|
33
|
+
var styles = {"expanded":"_9dGq9pkZYNxwlhRwaVaWH","compact":"_24PiUzD_Hoe3p6hD_OxjbH","wrapper":"_26euKXXdGUFmchTL7YqSO7","large":"_2OuJNJWNnBmTTzGAUfSaM7","base":"_2GSQaEqbKQHd7Tf2XqJ5i1","thumbnail":"_1JreUit2_KSn_-iQ3vBhUn","clickable":"_3_8YVeas_gdmexLUKZ3mpR","hoverable":"_15spVvfm0lqLuhAwuIuWrm","progress":"_3Sb6hKDYDXwDcc69ByIdyl","contentBlock":"_2My-AZfFXfluwQURTvc6Z9","deleteButton":"_2pUMiqf0oiCus7WkVuTt57","deleteable":"_2g5hRVudATuiROg0LStgTs"};
|
|
22
34
|
__chunk_2.styleInject(css);
|
|
23
35
|
|
|
24
|
-
function
|
|
25
|
-
var
|
|
26
|
-
var
|
|
27
|
-
var
|
|
36
|
+
function FormatFileDeleteButton(_a) {
|
|
37
|
+
var size = _a.size, onDelete = _a.onDelete;
|
|
38
|
+
var buttonSize = size === "base" ? "small" : "base";
|
|
39
|
+
var _b = __chunk_1.__read(React.useState(false), 2), deleteConfirmationOpen = _b[0], setDeleteConfirmationOpen = _b[1];
|
|
40
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
41
|
+
React__default.createElement(index$5.Button, { onClick: function () { return setDeleteConfirmationOpen(true); }, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
|
|
42
|
+
React__default.createElement(index$7.ConfirmationModal, { title: "Confirm Deletion", message: "Are you sure you want to delete this file?", confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(); }, onRequestClose: function () { return setDeleteConfirmationOpen(false); } })));
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
var css$1 = "._15Z4SPrC7I2WxqMysdwQxX {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n}\n\n.VMZPGfgfpCH2eH5Mv9zgO {\n display: none;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe {\n display: -ms-flexbox;\n display: flex;\n width: inherit;\n height: inherit;\n -ms-flex-align: center;\n align-items: center;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.Z-gb7-3W6CcFd5uSiosLe::after {\n content: \"\";\n display: block;\n position: absolute;\n right: 0;\n bottom: 0;\n border: var(--border-base);\n border-radius: var(--radius-base);\n background: linear-gradient(\n 270deg,\n rgb(244, 244, 244) 38.46%,\n rgba(244, 244, 244, 0) 100%\n );\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._3NVQrEqP9hGjbdbpOXGHQd::after {\n width: var(--space-base);\n height: var(--space-base);\n}\n\n.Z-gb7-3W6CcFd5uSiosLe._2AI9R5gNW3y8vFV4ev1tge::after {\n width: var(--space-large);\n height: var(--space-large);\n}\n\n._3VjXRD4ob2Fdq9YxmNRy2S {\n position: absolute;\n}\n\n._3NVQrEqP9hGjbdbpOXGHQd ._3VjXRD4ob2Fdq9YxmNRy2S {\n bottom: var(--space-smaller);\n left: var(--space-smaller);\n font-size: calc(var(--base-unit) * 0.625);\n}\n\n._2AI9R5gNW3y8vFV4ev1tge ._3VjXRD4ob2Fdq9YxmNRy2S {\n bottom: var(--space-small);\n left: var(--space-small);\n font-size: var(--typography--fontSize-small);\n}\n";
|
|
46
|
+
var styles$1 = {"image":"_15Z4SPrC7I2WxqMysdwQxX","loading":"VMZPGfgfpCH2eH5Mv9zgO","content":"Z-gb7-3W6CcFd5uSiosLe","base":"_3NVQrEqP9hGjbdbpOXGHQd","large":"_2AI9R5gNW3y8vFV4ev1tge","fileName":"_3VjXRD4ob2Fdq9YxmNRy2S"};
|
|
47
|
+
__chunk_2.styleInject(css$1);
|
|
48
|
+
|
|
49
|
+
function InternalThumbnail(_a) {
|
|
50
|
+
var _b;
|
|
51
|
+
var name = _a.name, _c = _a.hideName, hideName = _c === void 0 ? false : _c, size = _a.size, file = _a.file;
|
|
52
|
+
var _d = __chunk_1.__read(React.useState(), 2), imageSource = _d[0], setImageSource = _d[1];
|
|
53
|
+
var _e = __chunk_1.__read(React.useState(false), 2), imageLoaded = _e[0], setImageLoaded = _e[1];
|
|
28
54
|
var iconName = getIconNameFromType(file.type);
|
|
29
|
-
|
|
30
|
-
if (!imageSource && file.type.startsWith("image/") && file.src) {
|
|
55
|
+
if (!imageSource && file.type.startsWith("image/")) {
|
|
31
56
|
file.src().then(function (src) { return setImageSource(src); });
|
|
32
57
|
}
|
|
33
|
-
var
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
isComplete && onDelete && (React__default.createElement("div", { className: styles.actionBlock },
|
|
44
|
-
React__default.createElement(index$5.Button, { onClick: onDelete, type: "tertiary", variation: "destructive", icon: "trash", ariaLabel: "Delete" })))));
|
|
45
|
-
}
|
|
46
|
-
function getHumanReadableFileSize(sizeInBytes) {
|
|
47
|
-
return filesize(sizeInBytes);
|
|
58
|
+
var image = (React__default.createElement("img", { src: imageSource, onLoad: function () {
|
|
59
|
+
setImageLoaded(true);
|
|
60
|
+
}, className: classnames(styles$1.image, (_b = {}, _b[styles$1.loading] = !imageLoaded, _b)), alt: name, "data-testid": "internalThumbnailImage" }));
|
|
61
|
+
if (imageLoaded) {
|
|
62
|
+
return image;
|
|
63
|
+
}
|
|
64
|
+
return (React__default.createElement("div", { className: classnames(styles$1.content, styles$1[size]) },
|
|
65
|
+
imageSource && image,
|
|
66
|
+
React__default.createElement(index$2.Icon, { name: iconName, color: "greyBlue" }),
|
|
67
|
+
React__default.createElement("div", { className: classnames(styles$1.fileName) }, hideName && (React__default.createElement(index.Typography, { element: "span", textColor: "text" }, name)))));
|
|
48
68
|
}
|
|
49
69
|
function getIconNameFromType(mimeType) {
|
|
50
70
|
if (mimeType.startsWith("image/"))
|
|
@@ -61,4 +81,43 @@ function getIconNameFromType(mimeType) {
|
|
|
61
81
|
}
|
|
62
82
|
}
|
|
63
83
|
|
|
84
|
+
function FormatFile(_a) {
|
|
85
|
+
var _b, _c;
|
|
86
|
+
var file = _a.file, _d = _a.display, display = _d === void 0 ? "expanded" : _d, _e = _a.displaySize, displaySize = _e === void 0 ? "base" : _e, onDelete = _a.onDelete, onClick = _a.onClick;
|
|
87
|
+
var isComplete = file.progress >= 1;
|
|
88
|
+
var fileSize = getHumanReadableFileSize(file.size);
|
|
89
|
+
var wrapperClassNames = classnames(styles[display], (_b = {},
|
|
90
|
+
_b[styles[displaySize]] = display === "compact",
|
|
91
|
+
_b));
|
|
92
|
+
var DetailsContainer = isComplete && onClick ? "button" : "div";
|
|
93
|
+
var detailsClassNames = classnames(styles.wrapper, (_c = {},
|
|
94
|
+
_c[styles[displaySize]] = display === "compact",
|
|
95
|
+
_c[styles.hoverable] = isHoverable({ display: display, isComplete: isComplete, onClick: onClick, onDelete: onDelete }),
|
|
96
|
+
_c[styles.clickable] = onClick,
|
|
97
|
+
_c[styles.deleteable] = display === "compact",
|
|
98
|
+
_c));
|
|
99
|
+
var thumbnailContainerClassNames = classnames(styles.thumbnail, styles[displaySize]);
|
|
100
|
+
return (React__default.createElement("div", { className: wrapperClassNames },
|
|
101
|
+
React__default.createElement(DetailsContainer, { className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
|
|
102
|
+
React__default.createElement("div", { className: thumbnailContainerClassNames },
|
|
103
|
+
React__default.createElement(InternalThumbnail, { name: file.name, hideName: display === "compact", file: file, size: displaySize }),
|
|
104
|
+
!isComplete && (React__default.createElement("div", { className: styles.progress },
|
|
105
|
+
React__default.createElement(index$8.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
|
|
106
|
+
display === "expanded" && (React__default.createElement("div", { className: styles.contentBlock },
|
|
107
|
+
React__default.createElement(index$1.Text, { size: "large" }, file.name),
|
|
108
|
+
React__default.createElement(index$1.Text, { size: "small" }, fileSize)))),
|
|
109
|
+
isComplete && onDelete && (React__default.createElement("div", { className: styles.deleteButton },
|
|
110
|
+
React__default.createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
|
|
111
|
+
}
|
|
112
|
+
function isHoverable(_a) {
|
|
113
|
+
var display = _a.display, isComplete = _a.isComplete, onClick = _a.onClick, onDelete = _a.onDelete;
|
|
114
|
+
if (display === "compact") {
|
|
115
|
+
return Boolean(isComplete && (onClick || onDelete));
|
|
116
|
+
}
|
|
117
|
+
else if (display === "expanded") {
|
|
118
|
+
return Boolean(isComplete && onClick);
|
|
119
|
+
}
|
|
120
|
+
return false;
|
|
121
|
+
}
|
|
122
|
+
|
|
64
123
|
exports.FormatFile = FormatFile;
|
|
@@ -18,10 +18,10 @@ var index$5 = require('../Button/index.js');
|
|
|
18
18
|
var index$3 = require('../Avatar/index.js');
|
|
19
19
|
require('color');
|
|
20
20
|
require('../Content/index.js');
|
|
21
|
-
var index$
|
|
21
|
+
var index$8 = require('../ProgressBar/index.js');
|
|
22
22
|
require('react-dropzone');
|
|
23
23
|
require('axios');
|
|
24
|
-
var index$
|
|
24
|
+
var index$1 = require('../InputFile/index.js');
|
|
25
25
|
|
|
26
26
|
var css = "._1e1D2becaB2vzZJ8QkTQFY {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n._1e1D2becaB2vzZJ8QkTQFY > *:not(:last-child) {\n margin-right: var(--space-small);\n}\n\n.TQgDlkCH4_o4LkH2hOqde {\n position: relative;\n}\n\n.zq7uZTFFJ0aS_hIEAvVPX {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n height: 100%;\n margin: 0 var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n}\n\n._3wSTh_yNalSZ5i5bnf_clw::before {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: var(--radius-circle);\n background-color: var(--color-blue--dark);\n opacity: 0.3;\n mix-blend-mode: multiply;\n}\n";
|
|
27
27
|
var styles = {"inputAvatar":"_1e1D2becaB2vzZJ8QkTQFY","preview":"TQgDlkCH4_o4LkH2hOqde","centered":"zq7uZTFFJ0aS_hIEAvVPX","overlay":"_3wSTh_yNalSZ5i5bnf_clw"};
|
|
@@ -35,8 +35,8 @@ function InputAvatar(_a) {
|
|
|
35
35
|
React__default.createElement(index$3.Avatar, __chunk_1.__assign({ size: "large" }, avatarProps)),
|
|
36
36
|
progress < 1 && (React__default.createElement(Overlay, null,
|
|
37
37
|
React__default.createElement(Centered, null,
|
|
38
|
-
React__default.createElement(index$
|
|
39
|
-
React__default.createElement(index$
|
|
38
|
+
React__default.createElement(index$8.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
|
|
39
|
+
React__default.createElement(index$1.InputFile, { variation: "button", buttonLabel: avatarProps.imageUrl ? "Change Image" : undefined, size: "small", allowedTypes: "images", getUploadParams: getUploadParams, onUploadStart: handleChange, onUploadProgress: handleUpload, onUploadComplete: handleUploadComplete }),
|
|
40
40
|
avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(index$5.Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
|
|
41
41
|
function handleChange(newFile) {
|
|
42
42
|
onChange && onChange(newFile);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "2.84.
|
|
3
|
+
"version": "2.84.3",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"dist/*"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@jobber/design": "^0.25.
|
|
20
|
+
"@jobber/design": "^0.25.1",
|
|
21
21
|
"@jobber/formatters": "^0.2.0",
|
|
22
22
|
"@jobber/hooks": "^1.11.0",
|
|
23
23
|
"@popperjs/core": "^2.0.6",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"> 1%",
|
|
86
86
|
"IE 10"
|
|
87
87
|
],
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "658dea8297ad5ead65cf4cc13b75695494f75780"
|
|
89
89
|
}
|