@jobber/components 2.84.3 → 2.85.0

package/CHANGELOG.md

@@ -8,6 +8,17 @@ menu: Changelog
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.85.0](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.3...@jobber/components@2.85.0) (2022-06-21)
+
+
+### Features
+
+* **components:** Atlantis Component For Gallery ([#891](https://github.com/GetJobber/atlantis/issues/891)) ([266d2c8](https://github.com/GetJobber/atlantis/commit/266d2c897156b50859bf996d19ae972e305ac092))
+
+
+
+
+
 ## [2.84.3](https://github.com/GetJobber/atlantis/compare/@jobber/components@2.84.2...@jobber/components@2.84.3) (2022-06-13)
 
 **Note:** Version bump only for package @jobber/components

package/Gallery.d.ts

@@ -0,0 +1 @@
+export * from "./dist/Gallery";

package/Gallery.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true,
+});
+
+var Gallery = require("./dist/Gallery");
+
+Object.keys(Gallery).forEach(function(key) {
+  if (key === "default" || key === "__esModule") return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return Gallery[key];
+    },
+  });
+});

package/dist/Gallery/Gallery.d.ts

@@ -0,0 +1,2 @@
+import { GalleryProps } from "./GalleryTypes";
+export declare function Gallery({ files, size, max, onDelete }: GalleryProps): JSX.Element;

package/dist/Gallery/GalleryTypes.d.ts

@@ -0,0 +1,31 @@
+import { IconNames } from "../Icon";
+import { FileUpload } from "../InputFile";
+export declare type Sizes = "small" | "base" | "large" | "extraLarge";
+export declare type FileIconsNames = Extract<IconNames, "file" | "excel" | "pdf" | "video" | "word">;
+export interface GalleryProps {
+    /**
+     * The size of the files and their spacing in the gallery
+     * @default "base"
+     */
+    size?: "base" | "large";
+    /**
+     * The files for the Gallery to display
+     */
+    files: File[];
+    /**
+     * The max number of thumbnails before no more thumbnails are displayed
+     * unless the user clicks an action to display the rest
+     */
+    max?: number;
+    /**
+     * onDelete callback - this function will be called when the delete action is
+     * triggered on a Gallery image
+     */
+    onDelete?(file: File): void;
+}
+export interface File extends Pick<FileUpload, "key" | "name" | "type" | "size" | "progress"> {
+    /**
+     * The data url of the file.
+     */
+    readonly src: string;
+}

package/dist/Gallery/index.d.ts

@@ -0,0 +1 @@
+export { Gallery } from "./Gallery";

package/dist/Gallery/index.js

@@ -0,0 +1,95 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
+
+var __chunk_1 = require('../chunk-b67af3cb.js');
+var React = require('react');
+var React__default = _interopDefault(React);
+var __chunk_2 = require('../chunk-17e02351.js');
+require('classnames');
+require('../Typography/index.js');
+require('../Text/index.js');
+require('@jobber/design');
+require('../Icon/index.js');
+require('../Heading/index.js');
+require('react-router-dom');
+var index$5 = require('../Button/index.js');
+require('framer-motion');
+require('@jobber/hooks');
+require('../ButtonDismiss/index.js');
+require('react-dom');
+require('../Modal/index.js');
+require('../Content/index.js');
+require('react-markdown');
+require('../Emphasis/index.js');
+require('../Markdown/index.js');
+require('../ConfirmationModal/index.js');
+require('filesize');
+var index$8 = require('../FormatFile/index.js');
+require('../ProgressBar/index.js');
+require('react-image-lightbox');
+var index$9 = require('../LightBox/index.js');
+require('react-image-lightbox/style.css');
+
+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";
+var styles = {"gallery":"oLHYkzv718LqMvtqFZFcZ","galleryLarge":"_2JSG0uYj1HSXFads63nptQ","baseShowMoreButton":"FG8mZ6UcMPRsMC9HQinY2","largeShowMoreButton":"_1cTzKosWc22qxWZSiI0CzZ"};
+__chunk_2.styleInject(css);
+
+function Gallery(_a) {
+    var files = _a.files, _b = _a.size, size = _b === void 0 ? "base" : _b, max = _a.max, onDelete = _a.onDelete;
+    var _c = generateImagesArray(files), images = _c.images, filesToImageIndex = _c.filesToImageIndex;
+    var _d = __chunk_1.__read(React.useState(false), 2), lightboxOpen = _d[0], setLightboxOpen = _d[1];
+    var _e = __chunk_1.__read(React.useState(0), 2), lightboxIndex = _e[0], setLightboxIndex = _e[1];
+    var _f = __chunk_1.__read(React.useState(max ? false : true), 2), displayPastMax = _f[0], setDisplayPastMax = _f[1];
+    var visibleFiles = displayPastMax ? files : files.slice(0, max);
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement("div", { className: size === "large" ? styles.galleryLarge : styles.gallery },
+            visibleFiles.map(function (file, index) {
+                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 () {
+                        handleThumbnailClicked(index);
+                    }, onDelete: function () { return onDelete === null || onDelete === void 0 ? void 0 : onDelete(file); } }));
+            }),
+            max && files.length > max && !displayPastMax && (React__default.createElement("div", { className: styles[size + "ShowMoreButton"] },
+                React__default.createElement(index$5.Button, { type: "tertiary", size: size, label: "+ " + (files.length - max), fullWidth: true, onClick: function () {
+                        setDisplayPastMax(true);
+                    } })))),
+        React__default.createElement(index$9.LightBox, { open: lightboxOpen, images: images, imageIndex: lightboxIndex, onRequestClose: handleLightboxClose })));
+    function handleThumbnailClicked(index) {
+        if (files[index].type.startsWith("image/")) {
+            handleLightboxOpen(index);
+        }
+        else {
+            window.open(files[index].src, "_blank");
+        }
+    }
+    function handleLightboxOpen(index) {
+        var fileToImageIndex = filesToImageIndex[index];
+        if (fileToImageIndex !== undefined) {
+            setLightboxIndex(fileToImageIndex);
+            setLightboxOpen(true);
+        }
+    }
+    function handleLightboxClose() {
+        setLightboxOpen(false);
+    }
+}
+function generateImagesArray(files) {
+    var images = [];
+    var filesToImageIndex = [];
+    var imageIndex = 0;
+    for (var i = 0; i < files.length; i++) {
+        if (files[i].type.startsWith("image/")) {
+            images.push({ title: files[i].name, url: files[i].src });
+            filesToImageIndex.push(imageIndex);
+            imageIndex++;
+        }
+        else {
+            filesToImageIndex.push(undefined);
+        }
+    }
+    return { images: images, filesToImageIndex: filesToImageIndex };
+}
+
+exports.Gallery = Gallery;

package/dist/InputAvatar/index.js

@@ -18,7 +18,7 @@ var index$5 = require('../Button/index.js');
 var index$3 = require('../Avatar/index.js');
 require('color');
 require('../Content/index.js');
-var index$8 = require('../ProgressBar/index.js');
+var index$8$1 = require('../ProgressBar/index.js');
 require('react-dropzone');
 require('axios');
 var index$1 = require('../InputFile/index.js');
@@ -35,7 +35,7 @@ function InputAvatar(_a) {
             React__default.createElement(index$3.Avatar, __chunk_1.__assign({ size: "large" }, avatarProps)),
             progress < 1 && (React__default.createElement(Overlay, null,
                 React__default.createElement(Centered, null,
-                    React__default.createElement(index$8.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
+                    React__default.createElement(index$8$1.ProgressBar, { size: "small", currentStep: progress * 100, totalSteps: 100 }))))),
         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 }),
         avatarProps.imageUrl != undefined && progress === 1 && (React__default.createElement(index$5.Button, { label: "Remove", size: "small", type: "secondary", variation: "destructive", onClick: clearAvatar }))));
     function handleChange(newFile) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "2.84.3",
+  "version": "2.85.0",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -85,5 +85,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "658dea8297ad5ead65cf4cc13b75695494f75780"
+  "gitHead": "2263fde530ecd4228d4fcec26b5567d611481a9d"
 }