From c221dd86d2d34d32e2fccb436efc85b5039514e7 Mon Sep 17 00:00:00 2001
From: ladeirarodolfo <39910206+ladeirarodolfo@users.noreply.github.com>
Date: Wed, 11 Sep 2019 00:30:53 -0300
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20Load=20local=20file=20or?=
 =?UTF-8?q?=20folder=20using=20native=20dialog=20(#870)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Created to specialized dropzone elements to take care of loading local
file/folder from dialog

Closes: 847
---
 .../ViewerLocalFileData.css                   |  5 ++
 .../ViewerLocalFileData.js                    | 47 ++++++++++++++++---
 2 files changed, 45 insertions(+), 7 deletions(-)

diff --git a/platform/viewer/src/connectedComponents/ViewerLocalFileData.css b/platform/viewer/src/connectedComponents/ViewerLocalFileData.css
index 2e6f396fc..8b6f9324c 100644
--- a/platform/viewer/src/connectedComponents/ViewerLocalFileData.css
+++ b/platform/viewer/src/connectedComponents/ViewerLocalFileData.css
@@ -13,3 +13,8 @@
 .drag-drop-instructions h4 {
   color: var(--text-secondary-color);
 }
+
+.link-dialog {
+  color: var(--active-color);
+  cursor: pointer;
+}
diff --git a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js
index b17d60ab2..e36f90718 100644
--- a/platform/viewer/src/connectedComponents/ViewerLocalFileData.js
+++ b/platform/viewer/src/connectedComponents/ViewerLocalFileData.js
@@ -12,6 +12,44 @@ import { withTranslation } from 'react-i18next';
 const { OHIFStudyMetadata } = metadata;
 const { studyMetadataManager, updateMetaDataManager } = utils;
 
+const dropZoneLinkDialog = (onDrop, i18n, dir) => {
+  return (
+    <Dropzone onDrop={onDrop} noDrag>
+      {({ getRootProps, getInputProps }) => (
+        <span {...getRootProps()} className="link-dialog">
+          {dir ? (
+            <span>
+              {i18n('Load folders')}
+              <input
+                {...getInputProps()}
+                webkitdirectory="true"
+                mozdirectory="true"
+              />
+            </span>
+          ) : (
+            <span>
+              {i18n('Load files')}
+              <input {...getInputProps()} />
+            </span>
+          )}
+        </span>
+      )}
+    </Dropzone>
+  );
+};
+
+const linksDialogMessage = (onDrop, i18n) => {
+  return (
+    <>
+      {i18n('Or click to ')}
+      {dropZoneLinkDialog(onDrop, i18n)}
+      {i18n(' or ')}
+      {dropZoneLinkDialog(onDrop, i18n, true)}
+      {i18n(' from dialog')}
+    </>
+  );
+};
+
 class ViewerLocalFileData extends Component {
   static propTypes = {
     studies: PropTypes.array,
@@ -73,7 +111,7 @@ class ViewerLocalFileData extends Component {
     }
 
     return (
-      <Dropzone onDrop={onDrop}>
+      <Dropzone onDrop={onDrop} noClick>
         {({ getRootProps, getInputProps }) => (
           <div {...getRootProps()} style={{ width: '100%', height: '100%' }}>
             {this.state.studies ? (
@@ -96,15 +134,10 @@ class ViewerLocalFileData extends Component {
                           'Drag and Drop DICOM files here to load them in the Viewer'
                         )}
                       </h3>
-                      <h4>
-                        {this.props.t(
-                          "Or click to load the browser's file selector"
-                        )}
-                      </h4>
+                      <h4>{linksDialogMessage(onDrop, this.props.t)}</h4>
                     </>
                   )}
                 </div>
-                <input {...getInputProps()} style={{ display: 'none' }} />
               </div>
             )}
           </div>