added dropzone component

used dropzone for on the trading page
banwang811 · Feb 4, 2021 · 3a9922d · 3a9922d
1 parent d4a7111
commit 3a9922d
Show file tree

Hide file tree

Showing 8 changed files with 30,738 additions and 170 deletions.
diff --git a/electron-react/package-lock.json b/electron-react/package-lock.json
diff --git a/electron-react/package.json b/electron-react/package.json
@@ -46,6 +46,7 @@
     "polished": "^4.1.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
+    "react-dropzone": "^11.2.4",
     "react-hook-form": "^6.14.2",
     "react-redux": "^7.2.2",
     "react-router": "^5.2.0",

diff --git a/electron-react/src/components/core/components/AspectRatio/AspectRatio.tsx b/electron-react/src/components/core/components/AspectRatio/AspectRatio.tsx
@@ -0,0 +1,36 @@
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import { Box } from '@material-ui/core';
+
+const OuterWrapper = styled(({ ration, ...rest }) => <Box {...rest} />)`
+  position: relative;
+  width: 100%;
+  height: 0;
+  padding-bottom: ${(props) => (1 / props.ratio) * 100}%;
+  overflow: hidden;
+`;
+
+export const InnerWrapper = styled(Box)`
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+`;
+
+type Props = {
+  ratio: number;
+  children: ReactNode;
+};
+
+export default function AspectRatio(props: Props) {
+  const { children, ratio } = props;
+
+  return (
+    <OuterWrapper ratio={ratio}>
+      <InnerWrapper>
+        {children}
+      </InnerWrapper>
+    </OuterWrapper>
+  );
+}
diff --git a/electron-react/src/components/core/components/AspectRatio/index.ts b/electron-react/src/components/core/components/AspectRatio/index.ts
@@ -0,0 +1 @@
+export { default } from './AspectRatio';
diff --git a/electron-react/src/components/core/components/Dropzone/Dropzone.tsx b/electron-react/src/components/core/components/Dropzone/Dropzone.tsx
@@ -0,0 +1,64 @@
+import React, { ReactNode } from 'react';
+import { Paper, CircularProgress } from '@material-ui/core';
+import styled from 'styled-components';
+import { useDropzone, DropzoneOptions } from 'react-dropzone';
+import AspectRatio from '../AspectRatio';
+import Flex from '../Flex';
+
+const StyledPaper = styled(Paper)`
+  background-color: #999999;
+  padding: ${({ theme }) => `${theme.spacing(1)}px ${theme.spacing(2)}px`};
+`;
+
+type ChildrenRender = (input: {
+  isDragActive: boolean;
+}) => ReactNode
+
+type Props = {
+  children: ReactNode | ChildrenRender;
+  onDrop: (acceptedFiles: File[]) => void;
+  maxFiles?: number;
+  accept?: string[]; // ['image/jpeg', 'image/png']
+  ratio: number;
+  processing?: boolean;
+};
+
+export default function Dropzone(props: Props) {
+  const { children, onDrop, maxFiles, accept, ratio, processing } = props;
+
+  const config: DropzoneOptions = { 
+    onDrop,
+    maxFiles,
+  };
+
+  if (accept) {
+    config.accept = accept.join(', ');
+  }
+
+  const { getRootProps, getInputProps, isDragActive } = useDropzone(config);
+  const childrenContent = typeof children === 'function'
+    ? children({ isDragActive })
+    : children;
+
+  return (
+    <div {...getRootProps()}>
+      <input {...getInputProps()} />
+      <StyledPaper>
+        <AspectRatio ratio={ratio}>
+          <Flex alignItems="center" justifyContent="center" flexDirection="column" height="100%">
+            {processing ? (
+              <CircularProgress color="secondary" />
+            ) : childrenContent}
+          </Flex>
+        </AspectRatio>
+      </StyledPaper>
+    </div>
+  );
+}
+
+Dropzone.defaultProps = {
+  maxFiles: undefined,
+  accept: undefined,
+  ratio: 16/6,
+  processing: false,
+};
diff --git a/electron-react/src/components/core/components/Dropzone/index.ts b/electron-react/src/components/core/components/Dropzone/index.ts
@@ -0,0 +1 @@
+export { default } from './Dropzone';
diff --git a/electron-react/src/components/core/components/index.ts b/electron-react/src/components/core/components/index.ts
@@ -1,12 +1,14 @@
 export { default as Accordion } from './Accordion';
 export { default as AdvancedOptions } from './AdvancedOptions';
 export { default as AlertDialog } from './AlertDialog';
+export { default as AspectRatio } from './AspectRatio';
 export { default as Button } from './Button';
 export { default as ButtonSelected } from './ButtonSelected';
 export { default as Card } from './Card';
 export { default as CardHero } from './CardHero';
 export { default as CardStep } from './CardStep';
 export { default as Checkbox } from './Checkbox';
+export { default as Dropzone } from './Dropzone';
 export { default as ConfirmDialog } from './ConfirmDialog';
 export { default as DarkModeToggle } from './DarkModeToggle';
 export { default as Flex } from './Flex';

diff --git a/electron-react/src/components/trading/ViewOffer.jsx b/electron-react/src/components/trading/ViewOffer.jsx
@@ -1,12 +1,8 @@
 import { useDispatch, useSelector } from 'react-redux';
 import React, { useMemo } from 'react';
+import { Dropzone } from '@chia/core';
 import { Trans } from '@lingui/macro';
-import {
-  Paper,
-  Button,
-  CircularProgress,
-} from '@material-ui/core';
-import { makeStyles } from '@material-ui/core/styles';
+import { Button } from '@material-ui/core';
 import {
   resetTrades,
   offerParsingName,
@@ -23,172 +19,29 @@ import TradesTable from './TradesTable';
 
 /* global BigInt */
 
-const useStyles = makeStyles((theme) => ({
-  root: {
-    display: 'flex',
-    paddingLeft: '0px',
-  },
-  toolbar: {
-    paddingRight: 24, // keep right padding when drawer closed
-  },
-  toolbarIcon: {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    padding: '0 8px',
-    ...theme.mixins.toolbar,
-  },
-  appBar: {
-    zIndex: theme.zIndex.drawer + 1,
-    transition: theme.transitions.create(['width', 'margin'], {
-      easing: theme.transitions.easing.sharp,
-      duration: theme.transitions.duration.leavingScreen,
-    }),
-  },
-  paper: {
-    margin: theme.spacing(3),
-    padding: theme.spacing(0),
-    display: 'flex',
-    overflow: 'auto',
-    flexDirection: 'column',
-  },
-  balancePaper: {
-    margin: theme.spacing(3),
-  },
-  copyButton: {
-    marginTop: theme.spacing(0),
-    marginBottom: theme.spacing(0),
-    width: 50,
-    height: 56,
-  },
-  cardTitle: {
-    paddingLeft: theme.spacing(1),
-    paddingTop: theme.spacing(1),
-    marginBottom: theme.spacing(4),
-  },
-  cardSubSection: {
-    paddingLeft: theme.spacing(3),
-    paddingRight: theme.spacing(3),
-    paddingTop: theme.spacing(1),
-  },
-  tradeSubSection: {
-    color: '#cccccc',
-    borderRadius: 4,
-    backgroundColor: '#555555',
-    marginLeft: theme.spacing(3),
-    marginRight: theme.spacing(3),
-    marginTop: theme.spacing(1),
-    padding: 15,
-    overflowWrap: 'break-word',
-  },
-  formControl: {
-    widht: '100%',
-  },
-  input: {
-    height: 56,
-    width: '100%',
-  },
-  send: {
-    marginLeft: theme.spacing(2),
-    paddingLeft: '0px',
-    height: 56,
-    width: 150,
-  },
-  card: {
-    paddingTop: theme.spacing(10),
-    height: 200,
-  },
-  saveButton: {
-    width: '100%',
-    marginTop: theme.spacing(4),
-    marginRight: theme.spacing(1),
-    marginBottom: theme.spacing(2),
-    height: 56,
-  },
-  cancelButton: {
-    width: '100%',
-    marginTop: theme.spacing(4),
-    marginLeft: theme.spacing(1),
-    marginBottom: theme.spacing(2),
-    height: 56,
-  },
-  drag: {
-    backgroundColor: '#888888',
-    height: 300,
-    width: '100%',
-  },
-  dragText: {
-    margin: 0,
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-  },
-  circle: {
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-}));
-
 export const DropView = () => {
-  const classes = useStyles();
   const dispatch = useDispatch();
-  const handleDragEnter = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const handleDragLeave = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const handleDragOver = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-  };
-  const handleDrop = (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-
-    const offer_file_path = e.dataTransfer.files[0].path;
+  const parsing_state = useSelector((state) => state.trade_state.parsing_state);
+  const isParsing = parsing_state === parsingStatePending;
+
+  function handleDrop(acceptedFiles) {
+    const offer_file_path = acceptedFiles[0].path;
     const offer_name = offer_file_path.replace(/^.*[/\\]/, '');
 
     dispatch(offerParsingName(offer_name, offer_file_path));
     dispatch(parse_trade_action(offer_file_path));
     dispatch(parsingStarted());
-  };
-  const parsing_state = useSelector((state) => state.trade_state.parsing_state);
-  const parsing = parsing_state === parsingStatePending;
-
-  const progressStyle = parsing
-    ? { visibility: 'visible' }
-    : { visibility: 'hidden' };
-  const textStyle = !parsing
-    ? { visibility: 'visible' }
-    : { visibility: 'hidden' };
+  }
 
   return (
     <Card
       title={<Trans id="OfferDropView.selectOffer">Select Offer</Trans>}
     >
-      <div
-        onDrop={(e) => handleDrop(e)}
-        onDragOver={(e) => handleDragOver(e)}
-        onDragEnter={(e) => handleDragEnter(e)}
-        onDragLeave={(e) => handleDragLeave(e)}
-      >
-        <Paper className={classes.drag} style={{ position: 'relative' }}>
-          <div className={classes.dragText} style={textStyle}>
-            <Trans id="OfferDropView.dragAndDropOfferFile">
-              Drag and drop offer file
-            </Trans>
-          </div>
-          <div className={classes.circle} style={progressStyle}>
-            <CircularProgress color="secondary" />
-          </div>
-        </Paper>
-      </div>
+      <Dropzone onDrop={handleDrop} processing={isParsing}>
+        <Trans id="OfferDropView.dragAndDropOfferFile">
+          Drag and drop offer file
+        </Trans>
+      </Dropzone>
     </Card>
   );
 };