<commit_before>import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';  
import Dropzone from 'react-dropzone';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Grid from '@material-ui/core/Grid';
import {convertBytesToMbsOrKbs} from './helpers/helpers'
import SnackbarContentWrapper from './SnackbarContentWrapper';
import PreviewList from './PreviewList';
import classNames from 'classnames';
const styles = {
   '@keyframes progress': {
     '0%': {
       backgroundPosition: '0 0',
     },
     '100%': {
       backgroundPosition: '-70px 0',
     },
   },
   dropZone: {
     position: 'relative',
     width: '100%',
     minHeight: '250px',
     backgroundColor: '#F0F0F0',
     border: 'dashed',
     borderColor: '#C8C8C8',
     cursor: 'pointer',
     boxSizing: 'border-box',
   },
   stripes: {
     border: 'solid',
     backgroundImage: 'repeating-linear-gradient(-45deg, #F0F0F0, #F0F0F0 25px, #C8C8C8 25px, #C8C8C8 50px)',
     animation: 'progress 2s linear infinite !important',
     backgroundSize: '150% 100%',
   },
   rejectStripes: {
     border: 'solid',
     backgroundImage: 'repeating-linear-gradient(-45deg, #fc8785, #fc8785 25px, #f4231f 25px, #f4231f 50px)',
     animation: 'progress 2s linear infinite !important',
     backgroundSize: '150% 100%',
   },
    dropzoneTextStyle:{
        textAlign: 'center'
    },
    uploadIconSize: {
        width: 51,
        height: 51,
        color: '#909090' 
    },
    dropzoneParagraph:{
        fontSize: 24
    }
}


class DropzoneArea extends Component{
    constructor(props){
        super(props);
        this.state = {
            fileObjects: [],
            openSnackBar: false,
            snackbarMessage: '',
            snackbarVariant: 'success'
        }
    }
    componentWillUnmount(){
        if(this.props.clearOnUnmount){
            this.setState({
                fileObjects: []
            })
        } 
    }
    onDrop(files){
        const _this = this;
        if(this.state.fileObjects.length + files.length > this.props.filesLimit){
            this.setState({
                openSnackBar: true,
                snackbarMessage: `Maximum allowed number of files exceeded. Only ${this.props.filesLimit} allowed`, 
                snackbarVariant: 'error'
            });
        }else{
            var count = 0;
            var message = '';
            files.forEach((file) => {
                const reader = new FileReader();
                reader.onload = (event) => {
                    _this.setState({
                        fileObjects: _this.state.fileObjects.concat({file: file, data: event.target.result})
                    },() => {
                        if(this.props.onChange){
                            this.props.onChange(_this.state.fileObjects.map(fileObject => fileObject.file));    
                        }
                        if(this.props.onDrop){
                            this.props.onDrop(file)
                        }
                        message += `File ${file.name} successfully uploaded. `;
                        count++; // we cannot rely on the index because this is asynchronous
                        if(count === files.length){
                            // display message when the last one fires
                            this.setState({
                                openSnackBar: true,
                                snackbarMessage: message, 
                                snackbarVariant: 'success'
                            });
                        }
                    });
                };
                reader.readAsDataURL(file);
            })
        }
    }
    handleRemove = fileIndex => event => {
        event.stopPropagation();
        const {fileObjects} = this.state;
        const file = fileObjects.filter((fileObject, i) => { return i === fileIndex})[0].file;
        fileObjects.splice(fileIndex, 1);
        this.setState(fileObjects,() => {
            if(this.props.onDelete){
                this.props.onDelete(file);    
            }
            if(this.props.onChange){
                this.props.onChange(this.state.fileObjects.map(fileObject => fileObject.file));
            }
            this.setState({
                openSnackBar: true,
                snackbarMessage: ('File ' + file.name+ ' removed'),
                snackbarVariant: 'info'
            });
        });
    }
    handleDropRejected(rejectedFiles, evt) {
        var message = '';
        rejectedFiles.forEach((rejectedFile) => {
            message = `File ${rejectedFile.name} was rejected. `;
            if(!this.props.acceptedFiles.includes(rejectedFile.type)){
                message += 'File type not supported. '
            }
            if(rejectedFile.size > this.props.fileSizeLimit){
                message += 'File is too big. Size limit is ' + convertBytesToMbsOrKbs(this.props.fileSizeLimit) + '. ';
            }
        });
        if(this.props.onDropRejected){
            this.props.onDropRejected(rejectedFiles, evt);
        }
        this.setState({
            openSnackBar: true,
            snackbarMessage: message,
            snackbarVariant: 'error'
        });
    }
    onCloseSnackbar = () => {
        this.setState({
            openSnackBar: false,
        });
    };
    render(){
        const {classes} = this.props;
        const showPreviews = this.props.showPreviews && this.state.fileObjects.length > 0;
        const showPreviewsInDropzone = this.props.showPreviewsInDropzone && this.state.fileObjects.length > 0;
        return (
            <Fragment>
                <Dropzone
                    accept={this.props.acceptedFiles.join(',')}
                    onDrop={this.onDrop.bind(this)}
                    onDropRejected={this.handleDropRejected.bind(this)}
                    className={classNames(classes.dropZone,this.props.dropZone.class)}
                    acceptClassName={classes.stripes}
                    rejectClassName={classes.rejectStripes}
                    maxSize={this.props.maxFileSize}
                     >
                    <div className={classes.dropzoneTextStyle}><commit_msg>Added support for Custom CSS class<commit_after>import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import {withStyles} from '@material-ui/core/styles';
import Snackbar from '@material-ui/core/Snackbar';  
import Dropzone from 'react-dropzone';
import CloudUploadIcon from '@material-ui/icons/CloudUpload';
import Grid from '@material-ui/core/Grid';
import {convertBytesToMbsOrKbs} from './helpers/helpers'
import SnackbarContentWrapper from './SnackbarContentWrapper';
import PreviewList from './PreviewList';
import classNames from 'classnames';
const styles = {
   '@keyframes progress': {
     '0%': {
       backgroundPosition: '0 0',
     },
     '100%': {
       backgroundPosition: '-70px 0',
     },
   },
   dropZone: {
     position: 'relative',
     width: '100%',
     minHeight: '250px',
     backgroundColor: '#F0F0F0',
     border: 'dashed',
     borderColor: '#C8C8C8',
     cursor: 'pointer',
     boxSizing: 'border-box',
   },
   stripes: {
     border: 'solid',
     backgroundImage: 'repeating-linear-gradient(-45deg, #F0F0F0, #F0F0F0 25px, #C8C8C8 25px, #C8C8C8 50px)',
     animation: 'progress 2s linear infinite !important',
     backgroundSize: '150% 100%',
   },
   rejectStripes: {
     border: 'solid',
     backgroundImage: 'repeating-linear-gradient(-45deg, #fc8785, #fc8785 25px, #f4231f 25px, #f4231f 50px)',
     animation: 'progress 2s linear infinite !important',
     backgroundSize: '150% 100%',
   },
    dropzoneTextStyle:{
        textAlign: 'center'
    },
    uploadIconSize: {
        width: 51,
        height: 51,
        color: '#909090' 
    },
    dropzoneParagraph:{
        fontSize: 24
    }
}


class DropzoneArea extends Component{
    constructor(props){
        super(props);
        this.state = {
            fileObjects: [],
            openSnackBar: false,
            snackbarMessage: '',
            snackbarVariant: 'success'
        }
    }
    componentWillUnmount(){
        if(this.props.clearOnUnmount){
            this.setState({
                fileObjects: []
            })
        } 
    }
    onDrop(files){
        const _this = this;
        if(this.state.fileObjects.length + files.length > this.props.filesLimit){
            this.setState({
                openSnackBar: true,
                snackbarMessage: `Maximum allowed number of files exceeded. Only ${this.props.filesLimit} allowed`, 
                snackbarVariant: 'error'
            });
        }else{
            var count = 0;
            var message = '';
            files.forEach((file) => {
                const reader = new FileReader();
                reader.onload = (event) => {
                    _this.setState({
                        fileObjects: _this.state.fileObjects.concat({file: file, data: event.target.result})
                    },() => {
                        if(this.props.onChange){
                            this.props.onChange(_this.state.fileObjects.map(fileObject => fileObject.file));    
                        }
                        if(this.props.onDrop){
                            this.props.onDrop(file)
                        }
                        message += `File ${file.name} successfully uploaded. `;
                        count++; // we cannot rely on the index because this is asynchronous
                        if(count === files.length){
                            // display message when the last one fires
                            this.setState({
                                openSnackBar: true,
                                snackbarMessage: message, 
                                snackbarVariant: 'success'
                            });
                        }
                    });
                };
                reader.readAsDataURL(file);
            })
        }
    }
    handleRemove = fileIndex => event => {
        event.stopPropagation();
        const {fileObjects} = this.state;
        const file = fileObjects.filter((fileObject, i) => { return i === fileIndex})[0].file;
        fileObjects.splice(fileIndex, 1);
        this.setState(fileObjects,() => {
            if(this.props.onDelete){
                this.props.onDelete(file);    
            }
            if(this.props.onChange){
                this.props.onChange(this.state.fileObjects.map(fileObject => fileObject.file));
            }
            this.setState({
                openSnackBar: true,
                snackbarMessage: ('File ' + file.name+ ' removed'),
                snackbarVariant: 'info'
            });
        });
    }
    handleDropRejected(rejectedFiles, evt) {
        var message = '';
        rejectedFiles.forEach((rejectedFile) => {
            message = `File ${rejectedFile.name} was rejected. `;
            if(!this.props.acceptedFiles.includes(rejectedFile.type)){
                message += 'File type not supported. '
            }
            if(rejectedFile.size > this.props.fileSizeLimit){
                message += 'File is too big. Size limit is ' + convertBytesToMbsOrKbs(this.props.fileSizeLimit) + '. ';
            }
        });
        if(this.props.onDropRejected){
            this.props.onDropRejected(rejectedFiles, evt);
        }
        this.setState({
            openSnackBar: true,
            snackbarMessage: message,
            snackbarVariant: 'error'
        });
    }
    onCloseSnackbar = () => {
        this.setState({
            openSnackBar: false,
        });
    };
    render(){
        const {classes} = this.props;
        const showPreviews = this.props.showPreviews && this.state.fileObjects.length > 0;
        const showPreviewsInDropzone = this.props.showPreviewsInDropzone && this.state.fileObjects.length > 0;
        return (
            <Fragment>
                <Dropzone
                    accept={this.props.acceptedFiles.join(',')}
                    onDrop={this.onDrop.bind(this)}
                    onDropRejected={this.handleDropRejected.bind(this)}
                    className={classNames(classes.dropZone,this.props.dropZoneClass)}
                    acceptClassName={classes.stripes}
                    rejectClassName={classes.rejectStripes}
                    maxSize={this.props.maxFileSize}
                     >
                    <div className={classes.dropzoneTextStyle}>
{'fraction_non_alphanumeric': 0.11714060031595577, 'fraction_numerical': 0.015165876777251185, 'mean_word_length': 1.6649126499684277, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 39, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '615556', 'n_tokens_mistral': 3603, 'n_tokens_neox': 3404, 'n_words': 654}