@jobber/components 2.84.2 → 2.84.4-pre.13
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 +8 -0
- package/Gallery.d.ts +1 -0
- package/Gallery.js +17 -0
- package/dist/FormatFile/FormatFile.d.ts +1 -1
- package/dist/FormatFile/index.js +2 -2
- package/dist/Gallery/Gallery.d.ts +2 -0
- package/dist/Gallery/GalleryTypes.d.ts +31 -0
- package/dist/Gallery/index.d.ts +1 -0
- package/dist/Gallery/index.js +95 -0
- package/dist/InputAvatar/index.js +2 -2
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,14 @@ 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
|
+
|
|
11
19
|
## [2.84.2](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.1...@jobber/components@2.84.2) (2022-06-10)
|
|
12
20
|
|
|
13
21
|
**Note:** Version bump only for package @jobber/components
|
package/Gallery.d.ts
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from "./dist/Gallery";
|
package/Gallery.js
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true,
|
|
5
|
+
});
|
|
6
|
+
|
|
7
|
+
var Gallery = require("./dist/Gallery");
|
|
8
|
+
|
|
9
|
+
Object.keys(Gallery).forEach(function(key) {
|
|
10
|
+
if (key === "default" || key === "__esModule") return;
|
|
11
|
+
Object.defineProperty(exports, key, {
|
|
12
|
+
enumerable: true,
|
|
13
|
+
get: function get() {
|
|
14
|
+
return Gallery[key];
|
|
15
|
+
},
|
|
16
|
+
});
|
|
17
|
+
});
|
package/dist/FormatFile/index.js
CHANGED
|
@@ -29,7 +29,7 @@ var index$7 = require('../ConfirmationModal/index.js');
|
|
|
29
29
|
var getHumanReadableFileSize = _interopDefault(require('filesize'));
|
|
30
30
|
var index$8 = require('../ProgressBar/index.js');
|
|
31
31
|
|
|
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
|
|
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
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"};
|
|
34
34
|
__chunk_2.styleInject(css);
|
|
35
35
|
|
|
@@ -38,7 +38,7 @@ function FormatFileDeleteButton(_a) {
|
|
|
38
38
|
var buttonSize = size === "base" ? "small" : "base";
|
|
39
39
|
var _b = __chunk_1.__read(React.useState(false), 2), deleteConfirmationOpen = _b[0], setDeleteConfirmationOpen = _b[1];
|
|
40
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
|
|
41
|
+
React__default.createElement(index$5.Button, { onClick: function () { return setDeleteConfirmationOpen(true); }, variation: "destructive", type: "tertiary", icon: "trash", ariaLabel: "Delete File", size: buttonSize }),
|
|
42
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
43
|
}
|
|
44
44
|
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { IconNames } from "../Icon";
|
|
2
|
+
import { FileUpload } from "../InputFile";
|
|
3
|
+
export declare type Sizes = "small" | "base" | "large" | "extraLarge";
|
|
4
|
+
export declare type FileIconsNames = Extract<IconNames, "file" | "excel" | "pdf" | "video" | "word">;
|
|
5
|
+
export interface GalleryProps {
|
|
6
|
+
/**
|
|
7
|
+
* The size of the files and their spacing in the gallery
|
|
8
|
+
* @default "base"
|
|
9
|
+
*/
|
|
10
|
+
size?: "base" | "large";
|
|
11
|
+
/**
|
|
12
|
+
* The files for the Gallery to display
|
|
13
|
+
*/
|
|
14
|
+
files: File[];
|
|
15
|
+
/**
|
|
16
|
+
* The max number of thumbnails before no more thumbnails are displayed
|
|
17
|
+
* unless the user clicks an action to display the rest
|
|
18
|
+
*/
|
|
19
|
+
max?: number;
|
|
20
|
+
/**
|
|
21
|
+
* onDelete callback - this function will be called when the delete action is
|
|
22
|
+
* triggered on a Gallery image
|
|
23
|
+
*/
|
|
24
|
+
onDelete?(file: File): void;
|
|
25
|
+
}
|
|
26
|
+
export interface File extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress"> {
|
|
27
|
+
/**
|
|
28
|
+
* The data url of the file.
|
|
29
|
+
*/
|
|
30
|
+
readonly src: string;
|
|
31
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { Gallery } from "./Gallery";
|
|
@@ -0,0 +1,95 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
|
|
6
|
+
|
|
7
|
+
var __chunk_1 = require('../chunk-b67af3cb.js');
|
|
8
|
+
var React = require('react');
|
|
9
|
+
var React__default = _interopDefault(React);
|
|
10
|
+
var __chunk_2 = require('../chunk-17e02351.js');
|
|
11
|
+
require('classnames');
|
|
12
|
+
require('../Typography/index.js');
|
|
13
|
+
require('../Text/index.js');
|
|
14
|
+
require('@jobber/design');
|
|
15
|
+
require('../Icon/index.js');
|
|
16
|
+
require('../Heading/index.js');
|
|
17
|
+
require('react-router-dom');
|
|
18
|
+
var index$5 = require('../Button/index.js');
|
|
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
|
+
require('../ConfirmationModal/index.js');
|
|
29
|
+
require('filesize');
|
|
30
|
+
var index$8 = require('../FormatFile/index.js');
|
|
31
|
+
require('../ProgressBar/index.js');
|
|
32
|
+
require('react-image-lightbox');
|
|
33
|
+
var index$9 = require('../LightBox/index.js');
|
|
34
|
+
require('react-image-lightbox/style.css');
|
|
35
|
+
|
|
36
|
+
var css = ".oLHYkzv718LqMvtqFZFcZ,\n._2JSG0uYj1HSXFads63nptQ {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n grid-gap: var(--space-small);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n}\n\n._2JSG0uYj1HSXFads63nptQ {\n grid-gap: var(--space-base);\n grid-gap: var(--space-base);\n gap: var(--space-base);\n}\n\n.FG8mZ6UcMPRsMC9HQinY2 {\n display: -ms-flexbox;\n display: flex;\n width: 56px;\n}\n\n._1cTzKosWc22qxWZSiI0CzZ {\n display: -ms-flexbox;\n display: flex;\n width: 168px;\n}\n";
|
|
37
|
+
var styles = {"gallery":"oLHYkzv718LqMvtqFZFcZ","galleryLarge":"_2JSG0uYj1HSXFads63nptQ","baseShowMoreButton":"FG8mZ6UcMPRsMC9HQinY2","largeShowMoreButton":"_1cTzKosWc22qxWZSiI0CzZ"};
|
|
38
|
+
__chunk_2.styleInject(css);
|
|
39
|
+
|
|
40
|
+
function Gallery(_a) {
|
|
41
|
+
var files = _a.files, _b = _a.size, size = _b === void 0 ? "base" : _b, max = _a.max, onDelete = _a.onDelete;
|
|
42
|
+
var _c = generateImagesArray(files), images = _c.images, filesToImageIndex = _c.filesToImageIndex;
|
|
43
|
+
var _d = __chunk_1.__read(React.useState(false), 2), lightboxOpen = _d[0], setLightboxOpen = _d[1];
|
|
44
|
+
var _e = __chunk_1.__read(React.useState(0), 2), lightboxIndex = _e[0], setLightboxIndex = _e[1];
|
|
45
|
+
var _f = __chunk_1.__read(React.useState(max ? false : true), 2), displayPastMax = _f[0], setDisplayPastMax = _f[1];
|
|
46
|
+
var visibleFiles = displayPastMax ? files : files.slice(0, max);
|
|
47
|
+
return (React__default.createElement(React__default.Fragment, null,
|
|
48
|
+
React__default.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
|
|
49
|
+
visibleFiles.map(function (file, index) {
|
|
50
|
+
return (React__default.createElement(index$8.FormatFile, { key: file.key, file: __chunk_1.__assign(__chunk_1.__assign({}, file), { src: function () { return Promise.resolve(file.src); } }), display: "compact", displaySize: size, onClick: function () {
|
|
51
|
+
handleThumbnailClicked(index);
|
|
52
|
+
}, onDelete: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(file); } }));
|
|
53
|
+
}),
|
|
54
|
+
max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: styles[size + "ShowMoreButton"] },
|
|
55
|
+
React__default.createElement(index$5.Button, { type: "tertiary", size: size, label: "+ " + (files.length - max), fullWidth: true, onClick: function () {
|
|
56
|
+
setDisplayPastMax(true);
|
|
57
|
+
} })))),
|
|
58
|
+
React__default.createElement(index$9.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
|
|
59
|
+
function handleThumbnailClicked(index) {
|
|
60
|
+
if (files[index].type.startsWith("image/")) {
|
|
61
|
+
handleLightboxOpen(index);
|
|
62
|
+
}
|
|
63
|
+
else {
|
|
64
|
+
window.open(files[index].src, "_blank");
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
function handleLightboxOpen(index) {
|
|
68
|
+
var fileToImageIndex = filesToImageIndex[index];
|
|
69
|
+
if (fileToImageIndex !== undefined) {
|
|
70
|
+
setLightboxIndex(fileToImageIndex);
|
|
71
|
+
setLightboxOpen(true);
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
function handleLightboxClose() {
|
|
75
|
+
setLightboxOpen(false);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
function generateImagesArray(files) {
|
|
79
|
+
var images = [];
|
|
80
|
+
var filesToImageIndex = [];
|
|
81
|
+
var imageIndex = 0;
|
|
82
|
+
for (var i = 0; i < files.length; i++) {
|
|
83
|
+
if (files[i].type.startsWith("image/")) {
|
|
84
|
+
images.push({ title: files[i].name, url: files[i].src });
|
|
85
|
+
filesToImageIndex.push(imageIndex);
|
|
86
|
+
imageIndex++;
|
|
87
|
+
}
|
|
88
|
+
else {
|
|
89
|
+
filesToImageIndex.push(undefined);
|
|
90
|
+
}
|
|
91
|
+
}
|
|
92
|
+
return { images: images, filesToImageIndex: filesToImageIndex };
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
exports.Gallery = Gallery;
|
|
@@ -18,7 +18,7 @@ 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$8 = require('../ProgressBar/index.js');
|
|
21
|
+
var index$8$1 = require('../ProgressBar/index.js');
|
|
22
22
|
require('react-dropzone');
|
|
23
23
|
require('axios');
|
|
24
24
|
var index$1 = require('../InputFile/index.js');
|
|
@@ -35,7 +35,7 @@ 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$8.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
|
|
38
|
+
React__default.createElement(index$8$1.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
|
|
39
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) {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "2.84.
|
|
3
|
+
"version": "2.84.4-pre.13+c21468d4",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"> 1%",
|
|
86
86
|
"IE 10"
|
|
87
87
|
],
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "c21468d4ead94caf27a1cbc0c90e876c83eb668f"
|
|
89
89
|
}
|