Add optional drag event handlers to dropzone (#258)

* Add optional drag event handlers to dropzone

* Apply suggestions from code review

Co-authored-by: kenneth-duverge <77157695+kenneth-duverge@users.noreply.github.com>

---------

Co-authored-by: Sean Costello <sean.costello@vimeo.com>
Co-authored-by: kenneth-duverge <77157695+kenneth-duverge@users.noreply.github.com>

src/components/inputs/Dropzone/Dropzone.story.tsx

@@ -26,11 +26,26 @@ const onChange = (event: DropChangeEvent) => {
   );
 };
 
+const onDragEnter = (event: DragEvent) => {
+  console.log('Drag enter', event);
+};
+
+const onDragLeave = (event: DragEvent) => {
+  console.log('Drag leave', event);
+};
+
+const onDragOver = (event: DragEvent) => {
+  console.log('Drag over', event);
+};
+
 const Template: Story<Props> = (args) => {
   return (
     <Dropzone
       style={{ maxWidth: '40rem' }}
       onChange={onChange}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onDragOver={onDragOver}
       {...args}
     >
       <Header size="3">Drag files here</Header>

src/components/inputs/Dropzone/Dropzone.tsx

@@ -20,13 +20,26 @@ function DropzoneComponent({
   forwardRef,
   multiple,
   onChange,
+  onDragEnter,
+  onDragLeave,
+  onDragOver,
   ...props
 }: Props) {
   const ref = useForwardRef(forwardRef);
   const [drag, dragSet] = useState(false);
 
-  const onDragOver = stopPrevent<DragEvent>(() => dragSet(true));
-  const onDragLeave = stopPrevent<DragEvent>(() => dragSet(false));
+  const handleDragOver = stopPrevent<DragEvent>(
+    (e: DragEvent<HTMLDivElement>) => {
+      onDragOver?.(e);
+      dragSet(true);
+    }
+  );
+  const handleDragLeave = stopPrevent<DragEvent>(
+    (e: DragEvent<HTMLDivElement>) => {
+      onDragLeave?.(e);
+      dragSet(false);
+    }
+  );
 
   const onDrop = stopPrevent<DragEvent>(
     (event: DragEvent<HTMLDivElement> & DropChangeEvent) => {
@@ -39,8 +52,9 @@ function DropzoneComponent({
     <DropzoneContainer
       drag={active || drag}
       format={format}
-      onDragLeave={onDragLeave}
-      onDragOver={onDragOver}
+      onDragEnter={onDragEnter}
+      onDragLeave={handleDragLeave}
+      onDragOver={handleDragOver}
       onDrop={onDrop}
       {...props}
     >

src/components/inputs/Dropzone/Dropzone.types.ts

@@ -1,4 +1,4 @@
-import { ChangeEvent, ReactNode } from 'react';
+import { ChangeEvent, DragEventHandler, ReactNode } from 'react';
 import { IrisInputProps } from '../../../utils';
 
 export type DropChangeEvent = ChangeEvent<HTMLInputElement> & {
@@ -22,4 +22,7 @@ export type Props = IrisInputProps<{
    */
   format?: 'primary' | 'secondary';
   onChange?: (event: DropChangeEvent) => void;
+  onDragEnter?: DragEventHandler<HTMLDivElement>;
+  onDragLeave?: DragEventHandler<HTMLDivElement>;
+  onDragOver?: DragEventHandler<HTMLDivElement>;
 }>;