@jobber/components 4.4.7 → 4.4.9-pre.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.
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { FileUpload } from "../InputFile";
|
|
3
3
|
interface InternalThumbnailProps {
|
|
4
|
-
readonly
|
|
5
|
-
readonly hideName?: boolean;
|
|
4
|
+
readonly compact?: boolean;
|
|
6
5
|
readonly size: "base" | "large";
|
|
7
6
|
readonly file: FileUpload;
|
|
8
7
|
}
|
|
9
|
-
export declare function InternalThumbnail({
|
|
8
|
+
export declare function InternalThumbnail({ compact, size, file, }: InternalThumbnailProps): JSX.Element;
|
|
10
9
|
export {};
|
package/dist/FormatFile/index.js
CHANGED
|
@@ -17,9 +17,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
|
|
|
17
17
|
var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
18
18
|
var getHumanReadableFileSize__default = /*#__PURE__*/_interopDefaultLegacy(getHumanReadableFileSize);
|
|
19
19
|
|
|
20
|
-
var css_248z$
|
|
21
|
-
var styles$
|
|
22
|
-
styleInject_es.styleInject(css_248z$
|
|
20
|
+
var css_248z$2 = ":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.cx4iQqlNNvc- {\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 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(--file-card--border-color);\n border-radius: var(--radius-base);\n background-color: var(--color-white);\n background-color: var(--file-card--background-color);\n}\n\n.nSaog7-7Jn0-,\n.cx4iQqlNNvc- {\n position: relative;\n}\n\n._9jVt97W52JY- {\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 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.z-kUGMs0Yfg- {\n width: 168px;\n height: 168px;\n}\n\n.x1Ql0enaIxY- {\n width: 56px;\n height: 56px;\n}\n\n.il9-MCeoBts- {\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.cx4iQqlNNvc- ._9jVt97W52JY- {\n outline: none;\n}\n\n.nSaog7-7Jn0- ._9jVt97W52JY-:focus {\n box-shadow: var(--shadow-focus);\n outline: none;\n}\n\n.nSaog7-7Jn0- .il9-MCeoBts- {\n border: var(--border-base) solid var(--color-border);\n border-radius: var(--radius-base);\n}\n\n.cx4iQqlNNvc- ._9jVt97W52JY-: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.cx4iQqlNNvc- .il9-MCeoBts- {\n border-right: none;\n border-bottom-left-radius: var(--radius-base);\n border-top-left-radius: var(--radius-base);\n}\n\n.O9EG-xJYVco- {\n cursor: pointer;\n}\n\n.QmrRp5CTpGU- .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\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.QmrRp5CTpGU-:hover .il9-MCeoBts-::after,\n.QmrRp5CTpGU-:focus .il9-MCeoBts-::after,\n.N5qVYfi1Pgo- {\n opacity: 1;\n}\n\n.N5qVYfi1Pgo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n box-sizing: border-box;\n padding: var(--space-small);\n padding: var(--file-card--base-padding);\n}\n\n.TyXXZnJuVwo- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n min-width: 0;\n}\n\n.TyXXZnJuVwo- p {\n margin: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.nSaog7-7Jn0- ._7wDO6nPXy-g- {\n position: absolute;\n top: var(--space-smaller);\n right: var(--space-smaller);\n}\n\n.sgUJuNv0rUE- ~ ._7wDO6nPXy-g- {\n visibility: hidden;\n}\n\n._7wDO6nPXy-g-[focus-within],\n._7wDO6nPXy-g-:hover,\n.sgUJuNv0rUE-:hover ~ ._7wDO6nPXy-g-,\n.sgUJuNv0rUE-:focus ~ ._7wDO6nPXy-g- {\n visibility: visible;\n}\n\n._7wDO6nPXy-g-:focus-within,\n._7wDO6nPXy-g-:hover,\n.sgUJuNv0rUE-:hover ~ ._7wDO6nPXy-g-,\n.sgUJuNv0rUE-:focus ~ ._7wDO6nPXy-g- {\n visibility: visible;\n}\n";
|
|
21
|
+
var styles$2 = {"expanded":"cx4iQqlNNvc-","compact":"nSaog7-7Jn0-","wrapper":"_9jVt97W52JY-","large":"z-kUGMs0Yfg-","base":"x1Ql0enaIxY-","thumbnail":"il9-MCeoBts-","clickable":"O9EG-xJYVco-","hoverable":"QmrRp5CTpGU-","progress":"N5qVYfi1Pgo-","contentBlock":"TyXXZnJuVwo-","deleteButton":"_7wDO6nPXy-g-","deleteable":"sgUJuNv0rUE-"};
|
|
22
|
+
styleInject_es.styleInject(css_248z$2);
|
|
23
23
|
|
|
24
24
|
function FormatFileDeleteButton({ size, onDelete }) {
|
|
25
25
|
const buttonSize = size === "base" ? "small" : "base";
|
|
@@ -29,27 +29,42 @@ function FormatFileDeleteButton({ size, onDelete }) {
|
|
|
29
29
|
React__default["default"].createElement(ConfirmationModal.ConfirmationModal, { title: "Confirm Deletion", message: `Are you sure you want to delete this file?`, confirmLabel: "Delete", variation: "destructive", open: deleteConfirmationOpen, onConfirm: () => onDelete === null || onDelete === void 0 ? void 0 : onDelete(), onRequestClose: () => setDeleteConfirmationOpen(false) })));
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
var css_248z = ".
|
|
33
|
-
var styles = {"
|
|
32
|
+
var css_248z$1 = ".M9Y7sOk6lTc- {\n display: grid;\n grid-template-columns: auto;\n grid-template-rows: auto -webkit-max-content;\n grid-template-rows: auto max-content;\n width: inherit;\n height: inherit;\n -ms-flex-align: center;\n align-items: center;\n justify-items: center;\n}\n\n.E4wclxY71oM-:not(.yReSfaruAh0-) {\n -ms-flex-align: end;\n align-items: end;\n}\n\n.YXN92rsh2eU- {\n width: 100%;\n min-width: 0;\n box-sizing: border-box;\n}\n\n.psaqxO2Lu7E- .YXN92rsh2eU- {\n padding: var(--space-smaller);\n font-size: var(--typography--fontSize-smaller);\n}\n\n.yReSfaruAh0- .YXN92rsh2eU- {\n position: absolute;\n bottom: 0;\n left: 0;\n padding: var(--space-small);\n font-size: var(--typography--fontSize-small);\n}\n";
|
|
33
|
+
var styles$1 = {"content":"M9Y7sOk6lTc-","hasName":"E4wclxY71oM-","large":"yReSfaruAh0-","fileName":"YXN92rsh2eU-","base":"psaqxO2Lu7E-"};
|
|
34
|
+
styleInject_es.styleInject(css_248z$1);
|
|
35
|
+
|
|
36
|
+
var css_248z = ".lfvxlXka-2E- {\n width: 100%;\n height: 100%;\n background-color: var(--color-grey--lightest);\n background-image: linear-gradient(\n 90deg,\n var(--color-grey--lightest) 0px,\n var(--color-white) var(--space-larger),\n var(--color-grey--lightest) var(--space-extravagant)\n );\n background-repeat: no-repeat;\n background-size: var(--space-extravagant) 100%;\n -webkit-animation: lfvxlXka-2E- 1s infinite linear;\n animation: lfvxlXka-2E- 1s infinite linear;\n}\n\n@-webkit-keyframes lfvxlXka-2E- {\n 0%,\n 20% {\n background-position: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position: calc(100% + var(--space-extravagant));\n }\n}\n\n@keyframes lfvxlXka-2E- {\n 0%,\n 20% {\n background-position: calc(var(--space-extravagant) * -1);\n }\n\n 100% {\n background-position: calc(100% + var(--space-extravagant));\n }\n}\n\n._62D0xyydQwo- {\n width: 100%;\n height: 100%;\n -o-object-fit: cover;\n object-fit: cover;\n -webkit-animation: _5GIEBejwNJc- 200ms ease;\n animation: _5GIEBejwNJc- 200ms ease;\n}\n\n.a5EQqLlJmCk- {\n display: none;\n}\n\n@-webkit-keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n\n@keyframes _5GIEBejwNJc- {\n from {\n opacity: 0;\n }\n\n to {\n opacity: 1;\n }\n}\n";
|
|
37
|
+
var styles = {"glimmer":"lfvxlXka-2E-","image":"_62D0xyydQwo-","fadeIn":"_5GIEBejwNJc-","hidden":"a5EQqLlJmCk-"};
|
|
34
38
|
styleInject_es.styleInject(css_248z);
|
|
35
39
|
|
|
36
|
-
function
|
|
40
|
+
function InternalThumbnailImage({ file }) {
|
|
41
|
+
const { name, src } = file;
|
|
37
42
|
const [imageSource, setImageSource] = React.useState();
|
|
38
43
|
const [imageLoaded, setImageLoaded] = React.useState(false);
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
file.src().then(src => setImageSource(src));
|
|
44
|
+
if (!imageSource) {
|
|
45
|
+
src().then(url => setImageSource(url));
|
|
42
46
|
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
47
|
+
return (React__default["default"].createElement(React__default["default"].Fragment, null,
|
|
48
|
+
!imageLoaded && (React__default["default"].createElement("div", { className: styles.glimmer, "data-testid": "internalThumbnailImageLoader" })),
|
|
49
|
+
React__default["default"].createElement("img", { src: imageSource, onLoad: handleImageLoad, alt: name, "data-testid": "internalThumbnailImage", className: classnames__default["default"](styles.image, { [styles.hidden]: !imageLoaded }) })));
|
|
50
|
+
function handleImageLoad() {
|
|
51
|
+
setImageLoaded(true);
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
function InternalThumbnail({ compact = false, size, file, }) {
|
|
56
|
+
const { name, type } = file;
|
|
57
|
+
const iconName = getIconNameFromType(type);
|
|
58
|
+
const hasName = Boolean(name) && compact;
|
|
59
|
+
if (type.startsWith("image/")) {
|
|
60
|
+
return React__default["default"].createElement(InternalThumbnailImage, { file: file });
|
|
48
61
|
}
|
|
49
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles.content, styles[size]
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
React__default["default"].createElement(
|
|
62
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.content, styles$1[size], {
|
|
63
|
+
[styles$1.hasName]: hasName,
|
|
64
|
+
}) },
|
|
65
|
+
React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue", size: size }),
|
|
66
|
+
hasName && (React__default["default"].createElement("div", { className: styles$1.fileName },
|
|
67
|
+
React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
|
|
53
68
|
}
|
|
54
69
|
function getIconNameFromType(mimeType) {
|
|
55
70
|
if (mimeType.startsWith("image/"))
|
|
@@ -69,27 +84,27 @@ function getIconNameFromType(mimeType) {
|
|
|
69
84
|
function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
|
|
70
85
|
const isComplete = file.progress >= 1;
|
|
71
86
|
const fileSize = getHumanReadableFileSize__default["default"](file.size);
|
|
72
|
-
const wrapperClassNames = classnames__default["default"](styles$
|
|
73
|
-
[styles$
|
|
87
|
+
const wrapperClassNames = classnames__default["default"](styles$2[display], {
|
|
88
|
+
[styles$2[displaySize]]: display === "compact",
|
|
74
89
|
});
|
|
75
90
|
const DetailsContainer = isComplete && onClick ? "button" : "div";
|
|
76
|
-
const detailsClassNames = classnames__default["default"](styles$
|
|
77
|
-
[styles$
|
|
78
|
-
[styles$
|
|
79
|
-
[styles$
|
|
80
|
-
[styles$
|
|
91
|
+
const detailsClassNames = classnames__default["default"](styles$2.wrapper, {
|
|
92
|
+
[styles$2[displaySize]]: display === "compact",
|
|
93
|
+
[styles$2.hoverable]: isHoverable({ display, isComplete, onClick, onDelete }),
|
|
94
|
+
[styles$2.clickable]: onClick,
|
|
95
|
+
[styles$2.deleteable]: display === "compact",
|
|
81
96
|
});
|
|
82
|
-
const thumbnailContainerClassNames = classnames__default["default"](styles$
|
|
97
|
+
const thumbnailContainerClassNames = classnames__default["default"](styles$2.thumbnail, styles$2[displaySize]);
|
|
83
98
|
return (React__default["default"].createElement("div", { className: wrapperClassNames },
|
|
84
99
|
React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
|
|
85
100
|
React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
|
|
86
|
-
React__default["default"].createElement(InternalThumbnail, {
|
|
87
|
-
!isComplete && (React__default["default"].createElement("div", { className: styles$
|
|
101
|
+
React__default["default"].createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
|
|
102
|
+
!isComplete && (React__default["default"].createElement("div", { className: styles$2.progress },
|
|
88
103
|
React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
|
|
89
|
-
display === "expanded" && (React__default["default"].createElement("div", { className: styles$
|
|
104
|
+
display === "expanded" && (React__default["default"].createElement("div", { className: styles$2.contentBlock },
|
|
90
105
|
React__default["default"].createElement(Text.Text, { size: "base" }, file.name),
|
|
91
106
|
React__default["default"].createElement(Text.Text, { size: "small" }, fileSize)))),
|
|
92
|
-
isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$
|
|
107
|
+
isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$2.deleteButton },
|
|
93
108
|
React__default["default"].createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
|
|
94
109
|
}
|
|
95
110
|
function isHoverable({ display, isComplete, onClick, onDelete, }) {
|
package/dist/Gallery/index.js
CHANGED
|
@@ -6,7 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var classnames = require('classnames');
|
|
7
7
|
var styleInject_es = require('../style-inject.es-9d2f5f4e.js');
|
|
8
8
|
var LightBox = require('../LightBox-3753b459.js');
|
|
9
|
-
var FormatFile = require('../FormatFile-
|
|
9
|
+
var FormatFile = require('../FormatFile-c266cae7.js');
|
|
10
10
|
var Button = require('../Button-e2452625.js');
|
|
11
11
|
require('framer-motion');
|
|
12
12
|
require('react-dom');
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.4.
|
|
3
|
+
"version": "4.4.9-pre.3+84f64012",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -18,8 +18,8 @@
|
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
20
|
"@jobber/design": "^0.31.2",
|
|
21
|
-
"@jobber/formatters": "
|
|
22
|
-
"@jobber/hooks": "
|
|
21
|
+
"@jobber/formatters": "^0.2.2",
|
|
22
|
+
"@jobber/hooks": "^2.0.2",
|
|
23
23
|
"@popperjs/core": "^2.0.6",
|
|
24
24
|
"@std-proposal/temporal": "0.0.1",
|
|
25
25
|
"@tanstack/react-table": "8.5.13",
|
|
@@ -81,5 +81,5 @@
|
|
|
81
81
|
"> 1%",
|
|
82
82
|
"IE 10"
|
|
83
83
|
],
|
|
84
|
-
"gitHead": "
|
|
84
|
+
"gitHead": "84f640121f817b07e246254e583536cb30a4e66b"
|
|
85
85
|
}
|