diff --git a/app/components/DatasetComponent.tsx b/app/components/DatasetComponent.tsx index 891998cf..b35db5a6 100644 --- a/app/components/DatasetComponent.tsx +++ b/app/components/DatasetComponent.tsx @@ -1,4 +1,5 @@ import * as React from 'react' +import path from 'path' import MetadataContainer from '../containers/MetadataContainer' import MetadataEditor from '../components/MetadataEditor' @@ -20,6 +21,8 @@ import { Details } from '../models/details' import { ApiActionThunk } from '../store/api' import { Action } from 'redux' import Dataset from '../models/dataset' +import DropZone from './chrome/DropZone' +import CalloutBlock from './chrome/CalloutBlock' import Icon from './chrome/Icon' import StatusDot from './chrome/StatusDot' @@ -48,12 +51,60 @@ interface DatasetComponentProps { } const DatasetComponent: React.FunctionComponent = (props: DatasetComponentProps) => { - const { component: selectedComponent, componentStatus, isLoading, history = false, fsiPath, data, peername, name, stats, bodyPageInfo, details, setDetailsBar, fetchBody, write } = props + const { + component: selectedComponent, + componentStatus, + isLoading, + history = false, + fsiPath, + data, + peername, + name, + stats, + bodyPageInfo, + details, + setDetailsBar, + fetchBody, + write + } = props const hasParseError = componentStatus.status === 'parse error' const component = selectedComponent || 'meta' const { displayName, icon, tooltip } = getComponentDisplayProps(component) + const [dragging, setDragging] = React.useState(false) + + const dragHandler = (drag: boolean) => (e: React.DragEvent) => { + if (history) { + return + } + e.preventDefault() + setDragging(drag) + } + + const dropHandler = (e: React.DragEvent) => { + setDragging(false) + e.preventDefault() + const ext = path.extname(e.dataTransfer.files[0].path) + // closeToast() + if (!(ext === '.csv' || ext === '.json')) { + // // open toast for 1 second + // openToast(ToastTypes.error, 'drag-drop', 'unsupported file format: only json and csv supported') + // setTimeout(() => closeToast(), 2500) + console.log('can only drop csv & json files') + return + } + + // const { + // path: filePath, + // name: fileName, + // size: fileSize + // } = e.dataTransfer.files[0] + // importFile(filePath, fileName, fileSize) + console.log('dropped file') + handleWrite({ bodyPath: e.dataTransfer.files[0].path }) + } + const handleWrite = (data: Dataset): ApiActionThunk | void => { return write(peername, name, data) } @@ -136,7 +187,21 @@ const DatasetComponent: React.FunctionComponent = (props: unmountOnExit appear={true} > -
+
+ {dragging && } + {!history && data.bodyPath && { handleWrite({ bodyPath: '' }) }} + />} void +} + +const CalloutBlock: React.FC = ({ text, type, cancelText = 'cancel', onCancel }) => ( +
+ {onCancel && {cancelText}} +

{text}

+
+) + +export default CalloutBlock diff --git a/app/components/chrome/DropZone.tsx b/app/components/chrome/DropZone.tsx index 00aceb4a..9622484f 100644 --- a/app/components/chrome/DropZone.tsx +++ b/app/components/chrome/DropZone.tsx @@ -3,12 +3,15 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { faFileMedical } from '@fortawesome/free-solid-svg-icons' export interface DropZoneProps { + title: string + subtitle: string + setDragging: (showing: boolean) => void onDrop: (e: React.SyntheticEvent) => void } const DropZone: React.FC = (props) => { - const { onDrop, setDragging } = props + const { title, subtitle, onDrop, setDragging } = props const setDragStateHandler = (showing: boolean) => { return (e: React.SyntheticEvent) => { @@ -20,15 +23,16 @@ const DropZone: React.FC = (props) => { return (
-
Drop to Create a new dataset
+
{title}
+ cancel
-
You can import csv and json files
+
{subtitle}
) } diff --git a/app/components/collection/Collection.tsx b/app/components/collection/Collection.tsx index 8994f546..afb28ee4 100644 --- a/app/components/collection/Collection.tsx +++ b/app/components/collection/Collection.tsx @@ -1,7 +1,7 @@ import * as React from 'react' import { Action, AnyAction } from 'redux' -import { MyDatasets, WorkingDataset } from '../../models/store' +import { MyDatasets, WorkingDataset, ToastType } from '../../models/store' import DatasetList from '../DatasetList' import Layout from '../Layout' diff --git a/app/components/collection/CollectionHome.tsx b/app/components/collection/CollectionHome.tsx index e37790d6..bac470fb 100644 --- a/app/components/collection/CollectionHome.tsx +++ b/app/components/collection/CollectionHome.tsx @@ -24,7 +24,7 @@ const CollectionHome: React.FC = (props) => { const [dragging, setDragging] = React.useState(false) - const setDragStateHandler = (prefix: string, dragState: boolean) => { + const setDragStateHandler = (dragState: boolean) => { return (e: React.SyntheticEvent) => { e.preventDefault() setDragging(dragState) @@ -52,8 +52,13 @@ const CollectionHome: React.FC = (props) => { } return ( -
- {dragging && } +
+ {dragging && }