From 41fff62840c68abdaeeb1dba9e8005dfeb64bcbd Mon Sep 17 00:00:00 2001 From: robsel118 Date: Mon, 7 Oct 2019 20:58:01 +0300 Subject: [PATCH 1/4] added dropzone component --- components/dropzone/dropzone.jsx | 72 +++++++++++++++++++++++++++++++ components/dropzone/dropzone.sass | 21 +++++++++ 2 files changed, 93 insertions(+) create mode 100644 components/dropzone/dropzone.jsx create mode 100644 components/dropzone/dropzone.sass diff --git a/components/dropzone/dropzone.jsx b/components/dropzone/dropzone.jsx new file mode 100644 index 000000000..d1f3ce65e --- /dev/null +++ b/components/dropzone/dropzone.jsx @@ -0,0 +1,72 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import './dropzone.sass'; + +const CLASSNAMES = { + default: 'dropBorder-default', + error: 'dropBorder-error', + success: 'dropBorder-success' +}; + +class DropZone extends React.Component { + state = { + status: 'default' + }; + + handleDrag = e => { + e.preventDefault(); + e.stopPropagation(); + }; + + handleDragIn = e => { + e.preventDefault(); + e.stopPropagation(); + if (e.dataTransfer.items) { + if ( + e.dataTransfer.items.length === 1 && + this.props.validTypes.includes(e.dataTransfer.items[0].type) + ) { + this.setState({ status: 'success' }); + } else { + this.setState({ status: 'error' }); + } + } + }; + + handleDragOut = e => { + e.preventDefault(); + e.stopPropagation(); + this.setState({ status: 'default' }); + }; + + handleDrop = e => { + e.preventDefault(); + e.stopPropagation(); + this.setState({ status: 'default' }); + if (e.dataTransfer.files && e.dataTransfer.files.length === 1) { + this.props.handleDrop(e.dataTransfer.files[0]); + } + }; + + render() { + return ( +
+ {this.props.children} +
+ ); + } +} + +DropZone.propTypes = { + children: PropTypes.node.isRequired, + handleDrop: PropTypes.func, + validTypes: PropTypes.array +}; + +export default DropZone; diff --git a/components/dropzone/dropzone.sass b/components/dropzone/dropzone.sass new file mode 100644 index 000000000..a2af99224 --- /dev/null +++ b/components/dropzone/dropzone.sass @@ -0,0 +1,21 @@ +.dropBorder + height: 100% + width: 100% + padding: 3rem + border-radius: 30px + text-align: center + flex-direction: column + justify-content: center + +.dropBorder-default + border: 1px solid #d9d9d9 + transition: border-color .3s + +.dropBorder-default:hover + border-color: #40a9ff + +.dropBorder-success + border: 1px solid #40a9ff + +.dropBorder-error + border: 1px solid #f5222d \ No newline at end of file From b2b0e83e9168aa64b4657146612de22f718e52b4 Mon Sep 17 00:00:00 2001 From: robsel118 Date: Mon, 7 Oct 2019 21:15:10 +0300 Subject: [PATCH 2/4] fixed file type test --- components/dropzone/dropzone.jsx | 107 ++++++++++++++++--------------- 1 file changed, 54 insertions(+), 53 deletions(-) diff --git a/components/dropzone/dropzone.jsx b/components/dropzone/dropzone.jsx index d1f3ce65e..9e07a5e80 100644 --- a/components/dropzone/dropzone.jsx +++ b/components/dropzone/dropzone.jsx @@ -3,70 +3,71 @@ import PropTypes from 'prop-types'; import './dropzone.sass'; const CLASSNAMES = { - default: 'dropBorder-default', - error: 'dropBorder-error', - success: 'dropBorder-success' + default: 'dropBorder-default', + error: 'dropBorder-error', + success: 'dropBorder-success' }; class DropZone extends React.Component { - state = { - status: 'default' - }; + state = { + status: 'default' + }; - handleDrag = e => { - e.preventDefault(); - e.stopPropagation(); - }; + handleDrag = (e) => { + e.preventDefault(); + e.stopPropagation(); + }; - handleDragIn = e => { - e.preventDefault(); - e.stopPropagation(); - if (e.dataTransfer.items) { - if ( - e.dataTransfer.items.length === 1 && - this.props.validTypes.includes(e.dataTransfer.items[0].type) - ) { - this.setState({ status: 'success' }); - } else { - this.setState({ status: 'error' }); - } - } - }; + handleDragIn = (e) => { + e.preventDefault(); + e.stopPropagation(); + if (e.dataTransfer.items) { + if (e.dataTransfer.items.length === 1 && this.props.validTypes.includes(e.dataTransfer.items[0].type)) { + this.setState({ status: 'success' }); + } else { + this.setState({ status: 'error' }); + } + } + }; - handleDragOut = e => { - e.preventDefault(); - e.stopPropagation(); - this.setState({ status: 'default' }); - }; + handleDragOut = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.setState({ status: 'default' }); + }; - handleDrop = e => { - e.preventDefault(); - e.stopPropagation(); - this.setState({ status: 'default' }); - if (e.dataTransfer.files && e.dataTransfer.files.length === 1) { - this.props.handleDrop(e.dataTransfer.files[0]); - } - }; + handleDrop = (e) => { + e.preventDefault(); + e.stopPropagation(); + this.setState({ status: 'default' }); + if ( + e.dataTransfer.files && + e.dataTransfer.files.length === 1 && + this.props.validTypes.includes(e.dataTransfer.items[0].type) + ) { + this.props.handleDrop(e.dataTransfer.files[0]); + } + }; - render() { - return ( -
- {this.props.children} -
- ); - } + render() { + return ( +
+ {this.props.children} +
+ ); + } } DropZone.propTypes = { - children: PropTypes.node.isRequired, - handleDrop: PropTypes.func, - validTypes: PropTypes.array + children: PropTypes.node.isRequired, + handleDrop: PropTypes.func, + validTypes: PropTypes.array }; export default DropZone; From 9d8a2b7a8c63377372b3fce2bc95b66a314262a7 Mon Sep 17 00:00:00 2001 From: robsel118 Date: Sat, 19 Oct 2019 14:11:12 -0700 Subject: [PATCH 3/4] switch to react hooks, added new on drag enter and exit callback, changed to proton colors --- components/dropzone/dropzone.jsx | 132 +++++++++++++++++------------- components/dropzone/dropzone.sass | 42 +++++----- 2 files changed, 97 insertions(+), 77 deletions(-) diff --git a/components/dropzone/dropzone.jsx b/components/dropzone/dropzone.jsx index 9e07a5e80..450485dc5 100644 --- a/components/dropzone/dropzone.jsx +++ b/components/dropzone/dropzone.jsx @@ -1,73 +1,93 @@ -import React from 'react'; +import React, { useState } from 'react'; import PropTypes from 'prop-types'; +import { classnames } from '../../helpers/component'; + import './dropzone.sass'; const CLASSNAMES = { - default: 'dropBorder-default', - error: 'dropBorder-error', - success: 'dropBorder-success' + default: 'dropBorder-default', + error: 'dropBorder-error', + success: 'dropBorder-success' }; -class DropZone extends React.Component { - state = { - status: 'default' - }; +const DropZone = ({ + children, + validTypes, + onDrop, + onDragEnter, + onDragExit +}) => { + const [status, setStatus] = useState('default'); - handleDrag = (e) => { - e.preventDefault(); - e.stopPropagation(); - }; + DropZone.defaultProps = { + validTypes: [ + 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', + 'text/x-vcard' + ], + onDragEnter: () => {}, + onDragExit: () => {} + }; - handleDragIn = (e) => { - e.preventDefault(); - e.stopPropagation(); - if (e.dataTransfer.items) { - if (e.dataTransfer.items.length === 1 && this.props.validTypes.includes(e.dataTransfer.items[0].type)) { - this.setState({ status: 'success' }); - } else { - this.setState({ status: 'error' }); - } - } - }; + const handleDrag = e => { + e.preventDefault(); + e.stopPropagation(); + }; - handleDragOut = (e) => { - e.preventDefault(); - e.stopPropagation(); - this.setState({ status: 'default' }); - }; + const handleDragIn = e => { + e.preventDefault(); + e.stopPropagation(); + if (e.dataTransfer.items) { + const isFileValid = + e.dataTransfer.items.length === 1 && + validTypes.includes(e.dataTransfer.items[0].type); + onDragEnter(isFileValid); + if (isFileValid) { + setStatus('success'); + } else { + setStatus('error'); + } + } + }; - handleDrop = (e) => { - e.preventDefault(); - e.stopPropagation(); - this.setState({ status: 'default' }); - if ( - e.dataTransfer.files && - e.dataTransfer.files.length === 1 && - this.props.validTypes.includes(e.dataTransfer.items[0].type) - ) { - this.props.handleDrop(e.dataTransfer.files[0]); - } - }; + const handleDragOut = e => { + e.preventDefault(); + e.stopPropagation(); + setStatus('default'); + onDragExit(); + }; - render() { - return ( -
- {this.props.children} -
- ); + const handleDrop = e => { + e.preventDefault(); + e.stopPropagation(); + setStatus('default'); + if ( + e.dataTransfer.files && + e.dataTransfer.files.length === 1 && + validTypes.includes(e.dataTransfer.items[0].type) + ) { + onDrop(e.dataTransfer.files[0]); } -} + }; + + return ( +
+ {children} +
+ ); +}; DropZone.propTypes = { - children: PropTypes.node.isRequired, - handleDrop: PropTypes.func, - validTypes: PropTypes.array + children: PropTypes.node.isRequired, + onDrop: PropTypes.func.isRequired, + onDragEnter: PropTypes.func, + onDragExit: PropTypes.func, + validTypes: PropTypes.array }; export default DropZone; diff --git a/components/dropzone/dropzone.sass b/components/dropzone/dropzone.sass index a2af99224..dcfb4da2c 100644 --- a/components/dropzone/dropzone.sass +++ b/components/dropzone/dropzone.sass @@ -1,21 +1,21 @@ -.dropBorder - height: 100% - width: 100% - padding: 3rem - border-radius: 30px - text-align: center - flex-direction: column - justify-content: center - -.dropBorder-default - border: 1px solid #d9d9d9 - transition: border-color .3s - -.dropBorder-default:hover - border-color: #40a9ff - -.dropBorder-success - border: 1px solid #40a9ff - -.dropBorder-error - border: 1px solid #f5222d \ No newline at end of file +.dropBorder + height: 100% + width: 100% + padding: 3rem + border-radius: 30px + text-align: center + flex-direction: column + justify-content: center + +.dropBorder-default + border: 1px solid $pm-global-border + transition: border-color .3s + +.dropBorder-default:hover + border-color: $pm-blue + +.dropBorder-success + border: 1px solid $pm-blue + +.dropBorder-error + border: 1px solid $pm-global-warning \ No newline at end of file From 21bafb5c8c231ff22fdad3d0a1a0e80525727785 Mon Sep 17 00:00:00 2001 From: robsel118 Date: Tue, 22 Oct 2019 15:19:55 -0700 Subject: [PATCH 4/4] fixed indent and default function --- components/dropzone/dropzone.jsx | 134 +++++++++++++++---------------- 1 file changed, 63 insertions(+), 71 deletions(-) diff --git a/components/dropzone/dropzone.jsx b/components/dropzone/dropzone.jsx index 450485dc5..ec2c71712 100644 --- a/components/dropzone/dropzone.jsx +++ b/components/dropzone/dropzone.jsx @@ -5,89 +5,81 @@ import { classnames } from '../../helpers/component'; import './dropzone.sass'; const CLASSNAMES = { - default: 'dropBorder-default', - error: 'dropBorder-error', - success: 'dropBorder-success' + default: 'dropBorder-default', + error: 'dropBorder-error', + success: 'dropBorder-success' }; +// no operation function +const noop = () => {}; + const DropZone = ({ - children, - validTypes, - onDrop, - onDragEnter, - onDragExit + children, + validTypes = ['application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', 'text/x-vcard'], + onDrop, + onDragEnter = noop, + onDragExit = noop }) => { - const [status, setStatus] = useState('default'); - - DropZone.defaultProps = { - validTypes: [ - 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', - 'text/x-vcard' - ], - onDragEnter: () => {}, - onDragExit: () => {} - }; + const [status, setStatus] = useState('default'); - const handleDrag = e => { - e.preventDefault(); - e.stopPropagation(); - }; + const handleDrag = (e) => { + e.preventDefault(); + e.stopPropagation(); + }; - const handleDragIn = e => { - e.preventDefault(); - e.stopPropagation(); - if (e.dataTransfer.items) { - const isFileValid = - e.dataTransfer.items.length === 1 && - validTypes.includes(e.dataTransfer.items[0].type); - onDragEnter(isFileValid); - if (isFileValid) { - setStatus('success'); - } else { - setStatus('error'); - } - } - }; + const handleDragIn = (e) => { + e.preventDefault(); + e.stopPropagation(); + if (e.dataTransfer.items) { + const isFileValid = e.dataTransfer.items.length === 1 && validTypes.includes(e.dataTransfer.items[0].type); + onDragEnter(isFileValid); + if (isFileValid) { + setStatus('success'); + } else { + setStatus('error'); + } + } + }; - const handleDragOut = e => { - e.preventDefault(); - e.stopPropagation(); - setStatus('default'); - onDragExit(); - }; + const handleDragOut = (e) => { + e.preventDefault(); + e.stopPropagation(); + setStatus('default'); + onDragExit(); + }; - const handleDrop = e => { - e.preventDefault(); - e.stopPropagation(); - setStatus('default'); - if ( - e.dataTransfer.files && - e.dataTransfer.files.length === 1 && - validTypes.includes(e.dataTransfer.items[0].type) - ) { - onDrop(e.dataTransfer.files[0]); - } - }; + const handleDrop = (e) => { + e.preventDefault(); + e.stopPropagation(); + setStatus('default'); + if ( + e.dataTransfer.files && + e.dataTransfer.files.length === 1 && + validTypes.includes(e.dataTransfer.items[0].type) + ) { + onDrop(e.dataTransfer.files[0]); + } + }; - return ( -
- {children} -
- ); + return ( +
+ {children} +
+ ); }; DropZone.propTypes = { - children: PropTypes.node.isRequired, - onDrop: PropTypes.func.isRequired, - onDragEnter: PropTypes.func, - onDragExit: PropTypes.func, - validTypes: PropTypes.array + children: PropTypes.node.isRequired, + onDrop: PropTypes.func.isRequired, + onDragEnter: PropTypes.func, + onDragExit: PropTypes.func, + validTypes: PropTypes.array }; export default DropZone;