Fix dragging UI for media gallery

superdesk · Oct 5, 2023 · 280af1e · 280af1e
1 parent 1dfd2c9
commit 280af1e
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 21 deletions.
diff --git a/scripts/appConfig.ts b/scripts/appConfig.ts
@@ -46,7 +46,7 @@ export const debugInfo = {
     translationsLoaded: false,
 };
 
-export let authoringReactEnabledUserSelection = (JSON.parse(localStorage.getItem('auth-react') ?? 'false') as boolean);
+export let authoringReactEnabledUserSelection = true;
 
 export function toggleAuthoringReact(enabled: boolean) {
     localStorage.setItem('auth-react', JSON.stringify(enabled));

diff --git a/scripts/core/ui/components/drop-zone-3.tsx b/scripts/core/ui/components/drop-zone-3.tsx
@@ -19,29 +19,23 @@ interface IState {
 }
 
 export class DropZone3 extends React.PureComponent<IDropZoneComponentProps, IState> {
-    private elem: React.RefObject<HTMLDivElement>;
     private input: React.RefObject<HTMLInputElement>;
 
     constructor(props) {
         super(props);
 
-        this.elem = React.createRef();
         this.input = React.createRef();
 
-        this.onDragStart = this.onDragStart.bind(this);
         this.onDragEnd = this.onDragEnd.bind(this);
         this.onDrop = this.onDrop.bind(this);
         this.onDropOver = this.onDropOver.bind(this);
+        this.onDragLeave = this.onDragLeave.bind(this);
 
         this.state = {
             dragging: false,
         };
     }
 
-    onDragStart() {
-        this.setState({dragging: true});
-    }
-
     onDragEnd() {
         this.setState({dragging: false});
     }
@@ -53,25 +47,18 @@ export class DropZone3 extends React.PureComponent<IDropZoneComponentProps, ISta
             event.preventDefault();
 
             this.props.onDrop(event);
+            this.setState({dragging: false});
         }
     }
 
     onDropOver(event) {
         event.preventDefault();
+        this.setState({dragging: true});
     }
 
-    componentDidMount() {
-        document.addEventListener('dragstart', this.onDragStart);
-        document.addEventListener('dragend', this.onDragEnd);
-        this.elem.current.addEventListener('dragover', this.onDropOver);
-        this.elem.current.addEventListener('drop', this.onDrop);
-    }
-
-    componentWillUnmount() {
-        document.removeEventListener('dragstart', this.onDragStart);
-        document.removeEventListener('dragend', this.onDragEnd);
-        this.elem.current.removeEventListener('drop', this.onDrop);
-        this.elem.current.removeEventListener('dragover', this.onDropOver);
+    onDragLeave(event) {
+        event.preventDefault();
+        this.setState({dragging: false});
     }
 
     render() {
@@ -102,8 +89,17 @@ export class DropZone3 extends React.PureComponent<IDropZoneComponentProps, ISta
 
         return (
             <div
+                onDragOver={(e) => {
+                    e.preventDefault();
+                    this.setState({dragging: true});
+                }}
+                onDragLeave={(e) => {
+                    e.preventDefault();
+                    this.setState({dragging: false});
+                }}
+                onDragEnd={this.onDragEnd}
+                onDrop={this.onDrop}
                 className={this.props.className}
-                ref={this.elem}
                 style={styles}
             >
                 {