temp

finos · Dec 29, 2021 · e65f79a · e65f79a
1 parent 5e2c938
commit e65f79a
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 7 deletions.
diff --git a/packages/legend-studio/package.json b/packages/legend-studio/package.json
@@ -62,6 +62,7 @@
     "react-dnd": "14.0.4",
     "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
+    "react-dropzone": "11.4.2",
     "react-hotkeys": "2.0.0",
     "react-icons": "4.3.1",
     "react-resize-detector": "6.7.7",

diff --git a/packages/legend-studio/src/components/editor/side-bar/LocalChanges.tsx b/packages/legend-studio/src/components/editor/side-bar/LocalChanges.tsx
@@ -28,12 +28,18 @@ import { entityDiffSorter } from '../../../stores/EditorSDLCState';
 import { useEditorStore } from '../EditorStoreProvider';
 import { useApplicationStore } from '@finos/legend-application';
 import { Dialog } from '@material-ui/core';
+import Dropzone, { DropzoneRef } from 'react-dropzone';
+import React, { ReactElement, ReactNode } from 'react';
 
 const PatchLoaderEditor = observer(() => {
   const editorStore = useEditorStore();
   const localChangesState = editorStore.localChangesState;
   const patchState = localChangesState.patchLoaderState;
   const onClose = (): void => patchState.closeModal();
+
+  const handleDrop = (acceptedFiles: File[]): void => {
+    console.log(acceptedFiles);
+  };
   const onChange: React.ChangeEventHandler<HTMLInputElement> = (event) => {
     const file = event.target.files?.[0];
     if (file) {
@@ -45,7 +51,6 @@ const PatchLoaderEditor = observer(() => {
   };
   const deleteChange = (change: EntityChange): void =>
     patchState.deleteChange(change);
-
   return (
     <Dialog onClose={onClose} open={patchState.showModal}>
       <div className="modal modal--dark modal--scrollable patch-loader">
@@ -57,12 +62,14 @@ const PatchLoaderEditor = observer(() => {
         <div className="modal__body">
           <PanelLoadingIndicator isLoading={patchState.isLoadingChanges} />
           <div>
-            <input
-              id="upload-file"
-              type="file"
-              name="myFiles"
-              onChange={onChange}
-            />
+            <Dropzone onDrop={handleDrop}>
+              {({ getRootProps, getInputProps }): ReactElement => (
+                <div {...getRootProps({ className: 'dropzone' })}>
+                  <input {...getInputProps()} />
+                  <p>{`Drag'n'drop file, or click to upload file`}</p>
+                </div>
+              )}
+            </Dropzone>
           </div>
           {Boolean(patchState.overiddingChanges.length) && (
             <div className="panel__content__form__section">

diff --git a/yarn.lock b/yarn.lock
@@ -2674,6 +2674,7 @@ __metadata:
     react-dnd: 14.0.4
     react-dnd-html5-backend: 14.0.2
     react-dom: 17.0.2
+    react-dropzone: 11.4.2
     react-hotkeys: 2.0.0
     react-icons: 4.3.1
     react-resize-detector: 6.7.7
@@ -4829,6 +4830,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"attr-accept@npm:^2.2.1":
+  version: 2.2.2
+  resolution: "attr-accept@npm:2.2.2"
+  checksum: 496f7249354ab53e522510c1dc8f67a1887382187adde4dc205507d2f014836a247073b05e9d9ea51e2e9c7f71b0d2aa21730af80efa9af2d68303e5f0565c4d
+  languageName: node
+  linkType: hard
+
 "autoprefixer@npm:10.4.0":
   version: 10.4.0
   resolution: "autoprefixer@npm:10.4.0"
@@ -7484,6 +7492,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"file-selector@npm:^0.2.2":
+  version: 0.2.4
+  resolution: "file-selector@npm:0.2.4"
+  dependencies:
+    tslib: ^2.0.3
+  checksum: 83341e7416352c7de0caf433b33c8d007d3c298c17d6ba0e70168af82bb045d905ddd6f4bc3ca764a2035c6f18eae7f52223dc6a784056f61b8391c351f88323
+  languageName: node
+  linkType: hard
+
 "fill-range@npm:^7.0.1":
   version: 7.0.1
   resolution: "fill-range@npm:7.0.1"
@@ -12562,6 +12579,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-dropzone@npm:11.4.2":
+  version: 11.4.2
+  resolution: "react-dropzone@npm:11.4.2"
+  dependencies:
+    attr-accept: ^2.2.1
+    file-selector: ^0.2.2
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ">= 16.8"
+  checksum: f8dc6af69193133efe30ed11dd8c2212a180abd3833e91d03dab4bdc9546d47dcad311d7f72b4968b7d016871884555b9e16f7a490913b78dbfec8ce8f569193
+  languageName: node
+  linkType: hard
+
 "react-hotkeys@npm:2.0.0":
   version: 2.0.0
   resolution: "react-hotkeys@npm:2.0.0"