@jobber/components 4.4.9-pre.0 → 4.5.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/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,33 +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
|
|
37
|
-
const { name,
|
|
40
|
+
function InternalThumbnailImage({ file }) {
|
|
41
|
+
const { name, src } = file;
|
|
38
42
|
const [imageSource, setImageSource] = React.useState();
|
|
39
43
|
const [imageLoaded, setImageLoaded] = React.useState(false);
|
|
40
|
-
|
|
41
|
-
const hasName = Boolean(name) && compact;
|
|
42
|
-
if (!imageSource && type.startsWith("image/")) {
|
|
44
|
+
if (!imageSource) {
|
|
43
45
|
src().then(url => setImageSource(url));
|
|
44
46
|
}
|
|
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
|
-
[styles.hasName]: hasName,
|
|
62
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$1.content, styles$1[size], {
|
|
63
|
+
[styles$1.hasName]: hasName,
|
|
51
64
|
}) },
|
|
52
|
-
imageSource && image,
|
|
53
65
|
React__default["default"].createElement(Icon.Icon, { name: iconName, color: "greyBlue", size: size }),
|
|
54
|
-
hasName && (React__default["default"].createElement("div", { className: styles.fileName },
|
|
66
|
+
hasName && (React__default["default"].createElement("div", { className: styles$1.fileName },
|
|
55
67
|
React__default["default"].createElement(Typography.Typography, { element: "span", textColor: "text", numberOfLines: 1 }, name)))));
|
|
56
|
-
function handleImageLoad() {
|
|
57
|
-
setImageLoaded(true);
|
|
58
|
-
}
|
|
59
68
|
}
|
|
60
69
|
function getIconNameFromType(mimeType) {
|
|
61
70
|
if (mimeType.startsWith("image/"))
|
|
@@ -75,27 +84,27 @@ function getIconNameFromType(mimeType) {
|
|
|
75
84
|
function FormatFile({ file, display = "expanded", displaySize = "base", onDelete, onClick, }) {
|
|
76
85
|
const isComplete = file.progress >= 1;
|
|
77
86
|
const fileSize = getHumanReadableFileSize__default["default"](file.size);
|
|
78
|
-
const wrapperClassNames = classnames__default["default"](styles$
|
|
79
|
-
[styles$
|
|
87
|
+
const wrapperClassNames = classnames__default["default"](styles$2[display], {
|
|
88
|
+
[styles$2[displaySize]]: display === "compact",
|
|
80
89
|
});
|
|
81
90
|
const DetailsContainer = isComplete && onClick ? "button" : "div";
|
|
82
|
-
const detailsClassNames = classnames__default["default"](styles$
|
|
83
|
-
[styles$
|
|
84
|
-
[styles$
|
|
85
|
-
[styles$
|
|
86
|
-
[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",
|
|
87
96
|
});
|
|
88
|
-
const thumbnailContainerClassNames = classnames__default["default"](styles$
|
|
97
|
+
const thumbnailContainerClassNames = classnames__default["default"](styles$2.thumbnail, styles$2[displaySize]);
|
|
89
98
|
return (React__default["default"].createElement("div", { className: wrapperClassNames },
|
|
90
99
|
React__default["default"].createElement(DetailsContainer, { type: "button", className: detailsClassNames, onClick: isComplete ? onClick : undefined, tabIndex: 0, "aria-busy": !isComplete },
|
|
91
100
|
React__default["default"].createElement("div", { className: thumbnailContainerClassNames },
|
|
92
101
|
React__default["default"].createElement(InternalThumbnail, { key: file.key, compact: display === "compact", file: file, size: displaySize }),
|
|
93
|
-
!isComplete && (React__default["default"].createElement("div", { className: styles$
|
|
102
|
+
!isComplete && (React__default["default"].createElement("div", { className: styles$2.progress },
|
|
94
103
|
React__default["default"].createElement(ProgressBar.ProgressBar, { size: "small", currentStep: file.progress * 100, totalSteps: 100 })))),
|
|
95
|
-
display === "expanded" && (React__default["default"].createElement("div", { className: styles$
|
|
104
|
+
display === "expanded" && (React__default["default"].createElement("div", { className: styles$2.contentBlock },
|
|
96
105
|
React__default["default"].createElement(Text.Text, { size: "base" }, file.name),
|
|
97
106
|
React__default["default"].createElement(Text.Text, { size: "small" }, fileSize)))),
|
|
98
|
-
isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$
|
|
107
|
+
isComplete && onDelete && (React__default["default"].createElement("div", { className: styles$2.deleteButton },
|
|
99
108
|
React__default["default"].createElement(FormatFileDeleteButton, { size: display === "expanded" ? "large" : displaySize, onDelete: onDelete })))));
|
|
100
109
|
}
|
|
101
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.
|
|
3
|
+
"version": "4.5.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -17,9 +17,9 @@
|
|
|
17
17
|
"dist/*"
|
|
18
18
|
],
|
|
19
19
|
"dependencies": {
|
|
20
|
-
"@jobber/design": "^0.31.
|
|
21
|
-
"@jobber/formatters": "
|
|
22
|
-
"@jobber/hooks": "
|
|
20
|
+
"@jobber/design": "^0.31.2",
|
|
21
|
+
"@jobber/formatters": "*",
|
|
22
|
+
"@jobber/hooks": "*",
|
|
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": "097739860b33ca9e913f1cff292e12c79bc6cd23"
|
|
85
85
|
}
|