@selkirk-systems/attachments 1.0.4

package/lib/components/PhotoGallery.jsx

@@ -0,0 +1,160 @@
+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 (
+            <div className="photo-gallery paralax-content" {...other}>
+                {count < 1 && !fetching &&
+                    <Column center className='text-secondary' >
+                        <ImageIcon mt="-xxxl" mb='sm' style={{ width: '75px', height: '75px', strokeWidth: 1 }} />
+                        <Typography style={{ fontWeight: 500 }} variant="subtitle2">NO PHOTOS FOUND.</Typography>
+                    </Column>
+                }
+                {fetching && <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 )
+                }
+            </div>
+        )
+    }
+
+
+}
+
+
+
+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 (
+            <React.Fragment>
+                {
+                    !loaded && <div style={{ position: 'absolute', top: "2px", left: "2px", right: "2px", bottom: "2px" }}>
+                        <Skeleton width="100%" height="100%" />
+                    </div>
+                }
+
+                <img alt={this.props.alt} {...this.props} styles={styles} onLoad={this.handleImageLoaded} />
+
+            </React.Fragment>
+        )
+
+    }
+}
+
+
+
+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 (
+        <div className="photo-column" style={columnStyle}>
+            {
+                items[col].map( ( p ) => {
+                    const finalUrl = createProxiedURL( p.links ? p.links[0].href : p._links.self.href )
+                    return (
+                        <div className="photo" key={p.id} onClick={() => showImageViewerDialog( p.name, finalUrl )}>
+                            <Image alt={p.name} src={finalUrl} />
+                        </div>
+                    )
+                } )
+            }
+        </div>
+    )
+}
+
+
+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/lib/components/ResponsiveImageUploadList.jsx

@@ -0,0 +1,61 @@
+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 ? <PhotoFileTypeImage /> : MIME_TYPE_ICONS[file.mimeType] || <UnknownFileTypeImage />
+
+            return (
+                <Paper key={file.id} elevation={0} onClick={( e ) => e.stopPropagation()} {...other}>
+                    <Column gap="sm">
+                        <Row gap="md" align="center" xs="auto 1fr auto">
+                            {FileType}
+                            <Typography variant="body1">{file.title}</Typography>
+                            {!file.error && file.progress >= 100 &&
+                                <CheckCircle2 mr='sm' className='success-color' />
+                            }
+                            {file.error && <AlertTriangle style={{ color: 'red' }} />}
+                        </Row>
+                        <ProgressBar className={clsx( "uploading-progress", { 'error': file.error } )} value={file.progress} />
+                    </Column>
+                </Paper>
+            )
+        } )
+    }
+
+
+}
+
+
+export default Connect( ResponsiveImageUploadList );

package/lib/components/UploadImageDialog.jsx

@@ -0,0 +1,93 @@
+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 (
+            <Dialog
+                header="Upload"
+                visible={show}
+                icons={<Button
+                    text
+                    type='button'
+                    style={{ color: 'inherit' }}
+                    onClick={invokeUploadInput}
+                >
+                    <UploadIcon />
+                </Button>
+                }
+                onHide={closeImageUploadDialog}
+                position="bottom"
+                maximized
+                transitionOptions={
+                    {
+                        onExited: this.handledExited
+                    }
+                }
+                {...other}
+            >
+                <form>
+                    <input
+                        type="file"
+                        id="fileupload"
+                        accept={FILE_ACCEPT}
+                        multiple="multiple"
+                        ref={fileInputEl =>
+                            ( this.fileInputEl = fileInputEl )
+                        }
+                        onChange={() =>
+                            uploadFiles( url, this.fileInputEl.files )
+                        }
+                    />
+                </form>
+                <Column fill xs="200px 1fr" gap="md" onClick={invokeUploadInput}>
+                    <Column gap="sm" center pt='xl'>
+                        <UploadCloud style={{ width: 85, height: 85, strokeWidth: 2 }} />
+                        <Typography variant="h6" style={{ fontWeight: 600 }}>Upload your files</Typography>
+                        <Typography variant="subtitle1">Tap here to choose a file from your device</Typography>
+                    </Column>
+                    <Column gap="sm" justify="top" pl='md' pr='md'>
+                        <ResponsiveImageUploadList p='sm' />
+                    </Column>
+                </Column>
+                <ConfirmDialog />
+            </Dialog>
+        )
+    }
+
+
+}
+
+
+export default Connect( UploadImageDialog );
+

package/lib/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/lib/constants/PhotosConstants.js

@@ -0,0 +1,21 @@
+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/lib/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/lib/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/lib/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/lib/stores/DownloadStore.js

@@ -0,0 +1,23 @@
+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/lib/stores/ImageUploadStore.js

@@ -0,0 +1,31 @@
+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;