From 3b0c9a8a3282eb3c04123985a0512592fe0affae Mon Sep 17 00:00:00 2001 From: bob Date: Fri, 1 Feb 2019 11:33:59 -0500 Subject: added lightbox for images --- package-lock.json | 33 ++++++++++++++++ package.json | 1 + src/documents/Documents.ts | 5 ++- src/views/nodes/DocumentView.tsx | 3 +- src/views/nodes/ImageBox.scss | 11 ++++++ src/views/nodes/ImageBox.tsx | 82 ++++++++++++++++++++++++++++++++++++++++ 6 files changed, 132 insertions(+), 3 deletions(-) create mode 100644 src/views/nodes/ImageBox.scss create mode 100644 src/views/nodes/ImageBox.tsx diff --git a/package-lock.json b/package-lock.json index 0d0a2bcac..244ececa9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2099,6 +2099,11 @@ "strip-eof": "1.0.0" } }, + "exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=" + }, "expand-brackets": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/expand-brackets/-/expand-brackets-2.1.4.tgz", @@ -8805,6 +8810,15 @@ "react-dom": "16.7.0" } }, + "react-image-lightbox": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/react-image-lightbox/-/react-image-lightbox-5.1.0.tgz", + "integrity": "sha512-R46QvffoDBscLQgTl4s3kFxVbnP7a+nIh7AXJNS0EXVeDaa6zKDKtIT+jFeEvs+F9oUHtZfenG1NHhTkO4hEOA==", + "requires": { + "prop-types": "15.6.2", + "react-modal": "3.8.1" + } + }, "react-is": { "version": "16.7.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz", @@ -8824,6 +8838,17 @@ "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz", "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==" }, + "react-modal": { + "version": "3.8.1", + "resolved": "https://registry.npmjs.org/react-modal/-/react-modal-3.8.1.tgz", + "integrity": "sha512-aLKeZM9pgXpIKVwopRHMuvqKWiBajkqisDA8UzocdCF6S4fyKVfLWmZR5G1Q0ODBxxxxf2XIwiCP8G/11GJAuw==", + "requires": { + "exenv": "1.2.2", + "prop-types": "15.6.2", + "react-lifecycles-compat": "3.0.4", + "warning": "3.0.0" + } + }, "react-mosaic": { "version": "0.0.20", "resolved": "https://registry.npmjs.org/react-mosaic/-/react-mosaic-0.0.20.tgz", @@ -10462,6 +10487,14 @@ "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-1.1.8.tgz", "integrity": "sha512-2HAdug8GTiu3b4NYhssdtY8PXRue3ICnh1IlxvZYl+hiINRq0GfNWei3XOPDg8L0PsxbmYjWVLuLj6BMRR/9vA==" }, + "warning": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz", + "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=", + "requires": { + "loose-envify": "1.4.0" + } + }, "watchpack": { "version": "1.6.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.6.0.tgz", diff --git a/package.json b/package.json index 5307804c9..9b4df3c24 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ "react": "^16.5.2", "react-dom": "^16.7.0", "react-golden-layout": "^1.0.6", + "react-image-lightbox": "^5.1.0", "react-jsx-parser": "^1.13.0", "react-mosaic": "0.0.20", "react-table": "^6.9.0", diff --git a/src/documents/Documents.ts b/src/documents/Documents.ts index 73cf483ef..487490ea5 100644 --- a/src/documents/Documents.ts +++ b/src/documents/Documents.ts @@ -6,6 +6,7 @@ import { ListField } from "../fields/ListField"; import { FieldTextBox } from "../views/nodes/FieldTextBox"; import { CollectionDockingView } from "../views/collections/CollectionDockingView"; import { CollectionSchemaView } from "../views/collections/CollectionSchemaView"; +import { ImageBox } from "../views/nodes/ImageBox"; interface DocumentOptions { x?: number; @@ -110,9 +111,9 @@ export namespace Documents { imageProto.SetField(KeyStore.Y, new NumberField(0)); imageProto.SetField(KeyStore.Width, new NumberField(300)); imageProto.SetField(KeyStore.Height, new NumberField(300)); - imageProto.SetField(KeyStore.Layout, new TextField('Image not found')); + imageProto.SetField(KeyStore.Layout, new TextField(ImageBox.LayoutString())); // imageProto.SetField(KeyStore.Layout, new TextField('
')); - imageProto.SetField(KeyStore.LayoutFields, new ListField([KeyStore.Data])); + imageProto.SetField(KeyStore.LayoutKeys, new ListField([KeyStore.Data])); } return imageProto; } diff --git a/src/views/nodes/DocumentView.tsx b/src/views/nodes/DocumentView.tsx index 634cd78be..34a95747b 100644 --- a/src/views/nodes/DocumentView.tsx +++ b/src/views/nodes/DocumentView.tsx @@ -15,6 +15,7 @@ import { CollectionDockingView } from "../collections/CollectionDockingView"; import { CollectionFreeFormView } from "../collections/CollectionFreeFormView"; import { ContextMenu } from "../ContextMenu"; import { FieldTextBox } from "../nodes/FieldTextBox"; +import { ImageBox } from "../nodes/ImageBox"; import "./NodeView.scss"; import React = require("react"); import { cpus } from "os"; @@ -82,7 +83,7 @@ class DocumentContents extends React.Component { } } return { + + public static LayoutString() { return ""; } + private _ref: React.RefObject; + private _wasSelected: boolean = false; + + constructor(props: DocumentFieldViewProps) { + super(props); + + this._ref = React.createRef(); + this.state = { + photoIndex: 0, + isOpen: false, + }; + } + + componentDidMount() { + } + + componentWillUnmount() { + } + + onPointerDown = (e: React.PointerEvent): void => { + const { containingDocumentView } = this.props; + this._wasSelected = SelectionManager.IsSelected(containingDocumentView); + let me = this; + if (e.buttons === 1 && SelectionManager.IsSelected(me.props.containingDocumentView)) { + e.stopPropagation(); + } + } + + render() { + const images = [this.props.doc.GetTextField(this.props.fieldKey, ""),]; + var lightbox = () => { + const { photoIndex } = this.state; + if (this.state.isOpen && SelectionManager.IsSelected(this.props.containingDocumentView)) { + return ( 0 ? images[(photoIndex + images.length - 1) % images.length] : undefined} + onCloseRequest={() => this.setState({ isOpen: false })} + onMovePrevRequest={() => + this.setState({ photoIndex: (photoIndex + images.length - 1) % images.length, }) + } + onMoveNextRequest={() => + this.setState({ photoIndex: (photoIndex + 1) % images.length, }) + } + />) + } + } + return ( +
+ + {lightbox()} +
) + } +} \ No newline at end of file -- cgit v1.2.3-70-g09d2