@selkirk-systems/attachments 1.0.4

package/dist/components/PhotoGallery.js

@@ -0,0 +1,130 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React, { Component } from "react";
+import { Connect } from '@selkirk-systems/state-management';
+import PhotoStore from "../stores/PhotosStore";
+import { ImageIcon } from "lucide-react";
+import { Column } from "@selkirk-systems/layout";
+import { Skeleton } from "primereact/skeleton";
+import memoizee from "memoizee";
+import { showImageViewerDialog } from "../actions/AttachmentActions";
+import { createProxiedURL } from "@selkirk-systems/selkirk-utils";
+import { Typography } from "@selkirk-systems/selkirk-components";
+import '../css/attachments.css';
+class PhotoGallery extends React.Component {
+  static subscribe = [PhotoStore];
+  static defaultProps = {
+    baseURL: "",
+    items: [],
+    fetching: false
+  };
+  static storeStateToProps = {
+    items: (props, state) => sortAndSplitImages(state.photos),
+    fetching: (props, state) => state.fetching
+  };
+  render() {
+    const {
+      baseURL,
+      items,
+      fetching,
+      ...other
+    } = this.props;
+    const count = items[0].length + items[1].length + items[2].length + items[3].length;
+    return /*#__PURE__*/React.createElement("div", _extends({
+      className: "photo-gallery paralax-content"
+    }, other), count < 1 && !fetching && /*#__PURE__*/React.createElement(Column, {
+      center: true,
+      className: "text-secondary"
+    }, /*#__PURE__*/React.createElement(ImageIcon, {
+      mt: "-xxxl",
+      mb: "sm",
+      style: {
+        width: '75px',
+        height: '75px',
+        strokeWidth: 1
+      }
+    }), /*#__PURE__*/React.createElement(Typography, {
+      style: {
+        fontWeight: 500
+      },
+      variant: "subtitle2"
+    }, "NO PHOTOS FOUND.")), fetching && /*#__PURE__*/React.createElement(Skeleton, {
+      width: "100%",
+      height: window.innerHeight - 300
+    }), !fetching && getImagesByColumn(items, 0, fetching), !fetching && getImagesByColumn(items, 1, fetching), !fetching && getImagesByColumn(items, 2, fetching), !fetching && getImagesByColumn(items, 3, fetching));
+  }
+}
+class Image extends Component {
+  state = {
+    loaded: false
+  };
+  handleImageLoaded = e => {
+    this.setState({
+      loaded: true
+    });
+  };
+  render() {
+    const {
+      loaded
+    } = this.state;
+    const styles = this.props.styles || {};
+    if (!loaded) {
+      styles.height = 0;
+    }
+    return /*#__PURE__*/React.createElement(React.Fragment, null, !loaded && /*#__PURE__*/React.createElement("div", {
+      style: {
+        position: 'absolute',
+        top: "2px",
+        left: "2px",
+        right: "2px",
+        bottom: "2px"
+      }
+    }, /*#__PURE__*/React.createElement(Skeleton, {
+      width: "100%",
+      height: "100%"
+    })), /*#__PURE__*/React.createElement("img", _extends({
+      alt: this.props.alt
+    }, this.props, {
+      styles: styles,
+      onLoad: this.handleImageLoaded
+    })));
+  }
+}
+function getImagesByColumn(items, col) {
+  if (!items || !items[col].length) return null;
+  let columnStyle = {};
+  if (items[1].length === 0) {
+    columnStyle = {
+      flex: '100%,1',
+      maxWidth: '100%'
+    };
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "photo-column",
+    style: columnStyle
+  }, items[col].map(p => {
+    const finalUrl = createProxiedURL(p.links ? p.links[0].href : p._links.self.href);
+    return /*#__PURE__*/React.createElement("div", {
+      className: "photo",
+      key: p.id,
+      onClick: () => showImageViewerDialog(p.name, finalUrl)
+    }, /*#__PURE__*/React.createElement(Image, {
+      alt: p.name,
+      src: finalUrl
+    }));
+  }));
+}
+const sortAndSplitImages = memoizee(arrayOfPhotos => {
+  if (!arrayOfPhotos) return [];
+  const ret = {
+    0: [],
+    1: [],
+    2: [],
+    3: []
+  };
+  const sortedByCreationTimestamp = arrayOfPhotos.filter(p => p.mimeType.indexOf("image") >= 0).sort((a, b) => a.creationTimestamp - b.creationTimestamp).reverse();
+  Object.values(sortedByCreationTimestamp).forEach((photo, i) => {
+    ret[i % 4].push(photo);
+  });
+  return ret;
+});
+export default Connect(PhotoGallery);

package/dist/components/ResponsiveImageUploadList.js

@@ -0,0 +1,57 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import ImageUploadStore from '../stores/ImageUploadStore';
+import { Connect } from '@selkirk-systems/state-management';
+import { Column, Row } from '@selkirk-systems/layout';
+import { AlertTriangle, CheckCircle2 } from 'lucide-react';
+import { Typography, Paper } from '@selkirk-systems/selkirk-components';
+import { ProgressBar } from 'primereact/progressbar';
+import clsx from 'clsx';
+import MIME_TYPE_ICONS from './MimeTypeIcons';
+import UnknownFileTypeImage from './Icons/UnknownFileTypeImage';
+import PhotoFileTypeImage from './Icons/PhotoFileTypeImage';
+class ResponsiveImageUploadList extends React.Component {
+  static subscribe = [ImageUploadStore];
+  static defaultProps = {
+    files: []
+  };
+  static storeStateToProps = {
+    files: (props, state) => state.uploads
+  };
+  render() {
+    const {
+      files,
+      ...other
+    } = this.props;
+    return Object.keys(files).map((key, i) => {
+      const file = files[key];
+      const FileType = file.mimeType.indexOf("image") >= 0 ? /*#__PURE__*/React.createElement(PhotoFileTypeImage, null) : MIME_TYPE_ICONS[file.mimeType] || /*#__PURE__*/React.createElement(UnknownFileTypeImage, null);
+      return /*#__PURE__*/React.createElement(Paper, _extends({
+        key: file.id,
+        elevation: 0,
+        onClick: e => e.stopPropagation()
+      }, other), /*#__PURE__*/React.createElement(Column, {
+        gap: "sm"
+      }, /*#__PURE__*/React.createElement(Row, {
+        gap: "md",
+        align: "center",
+        xs: "auto 1fr auto"
+      }, FileType, /*#__PURE__*/React.createElement(Typography, {
+        variant: "body1"
+      }, file.title), !file.error && file.progress >= 100 && /*#__PURE__*/React.createElement(CheckCircle2, {
+        mr: "sm",
+        className: "success-color"
+      }), file.error && /*#__PURE__*/React.createElement(AlertTriangle, {
+        style: {
+          color: 'red'
+        }
+      })), /*#__PURE__*/React.createElement(ProgressBar, {
+        className: clsx("uploading-progress", {
+          'error': file.error
+        }),
+        value: file.progress
+      })));
+    });
+  }
+}
+export default Connect(ResponsiveImageUploadList);

package/dist/components/UploadImageDialog.js

@@ -0,0 +1,85 @@
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+import React from 'react';
+import { closeImageUploadDialog, uploadFiles, invokeUploadInput } from '../actions/ImageUploadActions';
+import ResponsiveImageUploadList from './ResponsiveImageUploadList';
+import { Connect } from '@selkirk-systems/state-management';
+import { Dialog } from 'primereact/dialog';
+import { Button } from 'primereact/button';
+import { UploadCloud, UploadIcon } from 'lucide-react';
+import { Column } from '@selkirk-systems/layout';
+import { Typography } from '@selkirk-systems/selkirk-components';
+import ImageUploadStore from '../stores/ImageUploadStore';
+import { FILE_ACCEPT } from '../constants/PhotosConstants';
+import { ConfirmDialog } from 'primereact/confirmdialog';
+class UploadImageDialog extends React.Component {
+  static subscribe = [ImageUploadStore];
+  static defaultProps = {
+    url: null,
+    show: false
+  };
+  static storeStateToProps = {
+    show: (props, state) => state.showImageUploadDialog
+  };
+  render() {
+    const {
+      show,
+      url,
+      ...other
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Dialog, _extends({
+      header: "Upload",
+      visible: show,
+      icons: /*#__PURE__*/React.createElement(Button, {
+        text: true,
+        type: "button",
+        style: {
+          color: 'inherit'
+        },
+        onClick: invokeUploadInput
+      }, /*#__PURE__*/React.createElement(UploadIcon, null)),
+      onHide: closeImageUploadDialog,
+      position: "bottom",
+      maximized: true,
+      transitionOptions: {
+        onExited: this.handledExited
+      }
+    }, other), /*#__PURE__*/React.createElement("form", null, /*#__PURE__*/React.createElement("input", {
+      type: "file",
+      id: "fileupload",
+      accept: FILE_ACCEPT,
+      multiple: "multiple",
+      ref: fileInputEl => this.fileInputEl = fileInputEl,
+      onChange: () => uploadFiles(url, this.fileInputEl.files)
+    })), /*#__PURE__*/React.createElement(Column, {
+      fill: true,
+      xs: "200px 1fr",
+      gap: "md",
+      onClick: invokeUploadInput
+    }, /*#__PURE__*/React.createElement(Column, {
+      gap: "sm",
+      center: true,
+      pt: "xl"
+    }, /*#__PURE__*/React.createElement(UploadCloud, {
+      style: {
+        width: 85,
+        height: 85,
+        strokeWidth: 2
+      }
+    }), /*#__PURE__*/React.createElement(Typography, {
+      variant: "h6",
+      style: {
+        fontWeight: 600
+      }
+    }, "Upload your files"), /*#__PURE__*/React.createElement(Typography, {
+      variant: "subtitle1"
+    }, "Tap here to choose a file from your device")), /*#__PURE__*/React.createElement(Column, {
+      gap: "sm",
+      justify: "top",
+      pl: "md",
+      pr: "md"
+    }, /*#__PURE__*/React.createElement(ResponsiveImageUploadList, {
+      p: "sm"
+    }))), /*#__PURE__*/React.createElement(ConfirmDialog, null));
+  }
+}
+export default Connect(UploadImageDialog);

package/dist/constants/MessageConstants.js

@@ -0,0 +1,5 @@
+// this is a bit funky as attachments was referencing the messages package locally - once messages is added to npm this should be removed
+export const SHOW_MESSAGES = "SHOW_MESSAGES";
+export const CLEAR_ALL_MESSAGES = "CLEAR_ALL_MESSAGES";
+export const ADD_IGNORE_ERROR = "ADD_IGNORE_ERROR";
+export const REMOVE_IGNORE_ERROR_BY_ID = "REMOVE_IGNORE_ERROR_BY_ID";

package/dist/constants/PhotosConstants.js

@@ -0,0 +1,18 @@
+export const SHOW_IMAGE_VIEWER_DIALOG = "SHOW_IMAGE_VIEWER_DIALOG";
+export const HIDE_IMAGE_VIEWER_DIALOG = "HIDE_IMAGE_VIEWER_DIALOG";
+export const FETCH_PHOTOS = "FETCH_PHOTOS";
+export const FETCHED_PHOTOS = "FETCHED_PHOTOS";
+export const CLEAR_PHOTOS = "CLEAR_PHOTOS";
+export const SHOW_IMAGE_UPLOAD_DIALOG = "SHOW_IMAGE_UPLOAD_DIALOG";
+export const HIDE_IMAGE_UPLOAD_DIALOG = "HIDE_IMAGE_UPLOAD_DIALOG";
+export const SET_UPLOAD_PROGRESS = "SET_UPLOAD_PROGRESS";
+export const DELETE_IMAGE = "DELETE_IMAGE";
+export const DELETED_IMAGE = "DELETED_IMAGE";
+export const IMAGE_UPLOAD_COMPLETE = "IMAGE_UPLOAD_COMPLETE";
+export const CLEAR_UPLOADS = "CLEAR_UPLOADS";
+export const CANCEL_UPLOAD = "CANCEL_UPLOAD";
+export const FILE_DOWNLOAD = "FILE_DOWNLOAD";
+export const FILE_DOWNLOADED = "FILE_DOWNLOADED";
+export const FILE_DELETE = "FILE_DELETE";
+export const FILE_DELETED = "FILE_DELETED";
+export const FILE_ACCEPT = "image/*,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf,application/msword,application/vnd.ms-excel,text/plain,application/vnd.openxmlformats-officedocument.wordprocessingml.document";

package/dist/css/attachments.css

@@ -0,0 +1,143 @@
+#root .attachments {
+    overflow-x: hidden;
+    overflow-y: auto;
+    perspective: 2px;
+}
+.attachments .bg img {
+    width: 56px;
+    opacity: 0.7;
+}
+.attachments .paralax-content {
+    position: relative;
+    z-index: 2;
+    background: #ffffff;
+    transform-style: preserve-3d;
+    position: relative;
+    min-height: 40px;
+    display: flex;
+}
+.attachments .file-gallery>*,
+.attachments .photo-gallery{
+    background-color: whitesmoke;
+}
+.attachments .paralax-spacer {
+    background: transparent;
+    height: 175px;
+    transform-style: preserve-3d;
+    position: relative;
+}
+.attachments .p-tabview-nav-container{
+    width:100%;
+}
+.attachments .p-tabview .p-tabview-nav li.p-tabview-selected{
+    color:var(--icon);
+}
+.attachments .p-tabview .p-tabview-nav li.p-highlight .p-tabview-nav-link {
+    background: white;
+    border-top: none;
+    border-right: none;
+    border-left: none;
+    border-bottom-width: 5px;
+}
+.attachments .p-tabview-nav a{
+    border-bottom-width:0;
+}
+.file-gallery {
+}
+.photo-gallery {
+    display: flex;
+    flex-wrap: wrap;
+    padding: 2px;
+}
+.photo-column {
+    display: flex;
+    flex: 33.333%;
+    max-width: 33.333%;
+    flex-direction: column;
+}
+.photo-column > * {
+    flex: 1 1 auto;
+}
+.photo {
+    overflow: hidden;
+    border-radius: 10px;
+    padding: 2px;
+    min-width: 50%;
+    min-height: 150px;
+    position: relative;
+    background: white;
+    border: 2px solid white;
+}
+.photo img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    vertical-align: middle;
+    border-radius: 5px;
+}
+input[type="file"] {
+    display: none;
+}
+.attachments .parallax {
+    content: " ";
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    transform: translateZ(-1px) scale(1.5);
+    background-size: 100%;
+    z-index: -1;
+}
+.attachments .bg {
+    margin: 0 -1px;
+    background-position: -60px -6px;
+    color: rgba(255, 255, 255, 0.9);
+}
+.attachments .bg > * {
+    backdrop-filter: blur(3px); /* blur effect to the backdrop */
+    -webkit-backdrop-filter: blur(3px);
+    height: 180px;
+}
+@media (min-width: 600px) {
+    .photo-gallery > *:last-child {
+        display: grid;
+        grid-auto-flow: column;
+        grid-auto-columns: minmax(33.333%, 1fr);
+        max-width: 100%;
+    }
+
+    .photo-gallery > *:last-child > * {
+        max-height: 250px;
+    }
+
+    .photo-gallery > *:last-child > *:only-child {
+        max-height: 250px;
+    }
+}
+
+@media (max-width: 600px) {
+    .photo-column {
+        flex: 50%;
+        max-width: 50%;
+    }
+
+    /* .photo-gallery>*:last-child{
+        display:flex;
+        flex-wrap: wrap;
+        flex:100%;
+        max-width:100%;
+    }
+
+    .photo-gallery>*:last-child>*{
+        flex:50%;
+        max-width:50%;
+    } */
+}
+
+@media (max-width: 300px) {
+    .photo-column {
+        flex: 100%;
+        max-width: 100%;
+    }
+}

package/dist/css/image-viewer.css

@@ -0,0 +1,45 @@
+.image-viewer {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    background: black;
+    color: white;
+}
+.image-viewer .title {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.image-viewer .icon {
+    color: white;
+    z-index: 1;
+}
+.image-viewer .top.actions {
+    top: 0;
+    left: 0;
+    right: 0;
+}
+.image-viewer .bottom.actions {
+    bottom: 0;
+    left: 0;
+    right: 0;
+}
+.image-viewer .actions {
+    position: absolute;
+    padding: 10px 15px;
+    width: 100%;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.88);
+}
+.image-viewer img {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+    z-index: 0;
+}

package/dist/index.js

@@ -0,0 +1,19 @@
+// Components
+export { default as PhotoGallery } from './components/PhotoGallery';
+export { default as FileList } from './components/FileList';
+export { default as UploadImageDialog } from './components/UploadImageDialog';
+export { default as ImageViewerDialog } from './components/ImageViewerDialog';
+export { default as FileDownloadIcon } from './components/FileDownloadIcon';
+export { default as FileDeleteIcon } from './components/FileDeleteIcon';
+export { default as MimeTypeIcons } from './components/MimeTypeIcons';
+
+// Actions
+export { showImageViewerDialog, hideImageViewerDialog } from './actions/AttachmentActions';
+export { fetchPhotos, deleteImage, clearPhotos } from './actions/PhotoActions';
+export { showImageUploadDialog, closeImageUploadDialog, invokeUploadInput, uploadFiles, deleteImageById } from './actions/ImageUploadActions';
+export { downloadFile, deleteFile } from './actions/FileActions';
+
+// Stores
+export { default as PhotosStore } from './stores/PhotosStore';
+export { default as ImageUploadStore } from './stores/ImageUploadStore';
+export { default as DownloadStore } from './stores/DownloadStore';

package/dist/stores/DownloadStore.js

@@ -0,0 +1,16 @@
+import { FILE_DELETE, FILE_DELETED, FILE_DOWNLOAD, FILE_DOWNLOADED } from "../constants/PhotosConstants";
+import { CreateStore, setValues, withPayload } from "@selkirk-systems/state-management";
+const DownloadStore = CreateStore({
+  name: "DownloadStore",
+  events: {
+    [FILE_DOWNLOAD]: withPayload().setValues("downloading"),
+    [FILE_DOWNLOADED]: setValues("downloading", null),
+    [FILE_DELETE]: withPayload().setValues("deleting"),
+    [FILE_DELETED]: setValues("deleting", null)
+  },
+  state: {
+    downloading: null,
+    deleting: null
+  }
+});
+export default DownloadStore;

package/dist/stores/ImageUploadStore.js

@@ -0,0 +1,24 @@
+import { CLEAR_UPLOADS, HIDE_IMAGE_UPLOAD_DIALOG, SET_UPLOAD_PROGRESS, SHOW_IMAGE_UPLOAD_DIALOG } from "../constants/PhotosConstants";
+import update from "@mbernal/simple-immutable";
+import { CreateStore, setFalse, setValues, withPayload } from "@selkirk-systems/state-management";
+const ImageUploadStore = CreateStore({
+  name: "ImageUploadStore",
+  events: {
+    [SET_UPLOAD_PROGRESS]: (action, state) => {
+      return update(state, {
+        'merge uploads': {
+          [action.payload.id]: action.payload
+        }
+      });
+    },
+    [CLEAR_UPLOADS]: setValues("uploads", {}),
+    [SHOW_IMAGE_UPLOAD_DIALOG]: withPayload().setValues("imageUploadTag").setTrue("showImageUploadDialog"),
+    [HIDE_IMAGE_UPLOAD_DIALOG]: setFalse("showImageUploadDialog")
+  },
+  state: {
+    showImageUploadDialog: false,
+    imageUploadTag: null,
+    uploads: {}
+  }
+});
+export default ImageUploadStore;

package/dist/stores/PhotosStore.js

@@ -0,0 +1,59 @@
+import update from "@mbernal/simple-immutable";
+import { CreateStore, setFalse, setStore, setTrue, setValues, withPayload } from "@selkirk-systems/state-management";
+import { CLEAR_PHOTOS, DELETED_IMAGE, DELETE_IMAGE, FETCHED_PHOTOS, FETCH_PHOTOS, FILE_DELETED, FILE_DOWNLOAD, FILE_DOWNLOADED, HIDE_IMAGE_VIEWER_DIALOG, IMAGE_UPLOAD_COMPLETE, SET_UPLOAD_PROGRESS, SHOW_IMAGE_VIEWER_DIALOG } from "../constants/PhotosConstants";
+const PhotoStore = CreateStore({
+  name: "PhotoStore",
+  events: {
+    [IMAGE_UPLOAD_COMPLETE]: setTrue("reload"),
+    [FETCH_PHOTOS]: setFalse("reload").setTrue("fetching"),
+    [FETCHED_PHOTOS]: withPayload().setValues("photos").setFalse("fetching"),
+    [CLEAR_PHOTOS]: setStore(() => init()),
+    [DELETE_IMAGE]: setTrue("deleting"),
+    [SHOW_IMAGE_VIEWER_DIALOG]: withPayload().setValues("imageViewer"),
+    [HIDE_IMAGE_VIEWER_DIALOG]: setValues("imageViewer", {}),
+    [SET_UPLOAD_PROGRESS]: (action, state) => {
+      const payload = action.payload;
+      if (payload.error || payload.progress !== 100) return state;
+      const matchIndex = state.photos.findIndex(p => p.name.toLowerCase() === payload.id.toLowerCase());
+      if (matchIndex >= 0) {
+        return update(state, {
+          [`set photos.${matchIndex}`]: payload.response.data[0]
+        });
+      }
+      return update(state, {
+        'unshift photos': Array.isArray(payload.response.data) ? payload.response.data : [payload.response.data]
+      });
+    },
+    [FILE_DELETED]: (action, state) => {
+      const {
+        fileName
+      } = action.payload;
+      const index = state.photos.findIndex(p => p.name === fileName);
+      if (index < 0) return state;
+      return update(state, {
+        'splice photos': [[index, 1]],
+        'set deleting': false
+      });
+    },
+    [DELETED_IMAGE]: (action, state) => {
+      const name = action.payload;
+      const index = state.photos.findIndex(p => p.name === name);
+      if (index < 0) return state;
+      return update(state, {
+        'splice photos': [[index, 1]],
+        'set deleting': false
+      });
+    }
+  },
+  state: init()
+});
+function init() {
+  return {
+    imageViewer: {},
+    fetching: true,
+    deleting: false,
+    reload: false,
+    photos: []
+  };
+}
+export default PhotoStore;

package/lib/actions/AttachmentActions.js

@@ -0,0 +1,14 @@
+import { HIDE_IMAGE_VIEWER_DIALOG, SHOW_IMAGE_VIEWER_DIALOG } from "../constants/PhotosConstants"
+import { dispatch } from "@selkirk-systems/state-management"
+
+export const showImageViewerDialog = ( name, url ) => {
+
+    dispatch( SHOW_IMAGE_VIEWER_DIALOG, { name: name, url: url } )
+
+}
+
+export const hideImageViewerDialog = () => {
+
+    dispatch( HIDE_IMAGE_VIEWER_DIALOG );
+
+}