<commit_before>import React from 'react';
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import styled from 'styled-components';
import Icon from '../Icon';

const DropArea = styled.div`
  border: ${({ theme }) => theme.input.border};
  padding: ${({ theme }) => theme.input.padding};
  font-size: ${({ theme }) => theme.input.fontSize};
  font-family: ${({ theme }) => theme.input.fontFamily};
  line-height: ${({ theme }) => theme.input.lineHeight};
  background: ${({ theme }) => theme.input.bg};
  color: ${({ theme }) => theme.input.fg};
  width: 100%;
  display: flex;
  flex-direction: row;
  cursor: pointer;
`;

const Preview = styled.div`
  margin: auto auto auto 16px;
`;

class FileInput extends React.Component {
  static propTypes = {
    value: PropTypes.instanceOf(FileList).isRequired,
    onChange: PropTypes.func.isRequired,

    required: PropTypes.bool,
    disabled: PropTypes.bool,
  };

  static defaultProps = {
    required: false,
    disabled: false,
  };

  renderFiles = () => {
    const { value } = this.props;
    if (value && value[0]) {
      return (
        <DropArea>
          <Icon name="fileFilled" />
          <Preview active={true}>{value[0].name}</Preview>
        </DropArea>
      );
    } else {
      return (
        <DropArea>
          <Icon name="file" />
          <Preview>Drop a file here, or click to browse.</Preview>
        </DropArea>
      );
    }
  }

  render() {
    return (
      <Dropzone
        {...this.props}
        multiple={false}
        onDrop={(files) => onChange(files)}
        style={{ width: '100%' }}
        activeStyle={{ color: '#00bcec' }}
        rejectStyle={{}}
      >
        {this.renderFiles()}
      </Dropzone>
    );
  }
}

FileInput.usage = `
# FileInput

A file input component which accepts drag-and-drop.
`;<commit_msg>[BUG] FileInput onChange prop fix<commit_after>import React from 'react';
import PropTypes from 'prop-types';
import Dropzone from 'react-dropzone';
import styled from 'styled-components';
import Icon from '../Icon';

const DropArea = styled.div`
  border: ${({ theme }) => theme.input.border};
  padding: ${({ theme }) => theme.input.padding};
  font-size: ${({ theme }) => theme.input.fontSize};
  font-family: ${({ theme }) => theme.input.fontFamily};
  line-height: ${({ theme }) => theme.input.lineHeight};
  background: ${({ theme }) => theme.input.bg};
  color: ${({ theme }) => theme.input.fg};
  width: 100%;
  display: flex;
  flex-direction: row;
  cursor: pointer;
`;

const Preview = styled.div`
  margin: auto auto auto 16px;
`;

class FileInput extends React.Component {
  static propTypes = {
    value: PropTypes.instanceOf(FileList).isRequired,
    onChange: PropTypes.func.isRequired,

    required: PropTypes.bool,
    disabled: PropTypes.bool,
  };

  static defaultProps = {
    required: false,
    disabled: false,
  };

  renderFiles = () => {
    const { value } = this.props;
    if (value && value[0]) {
      return (
        <DropArea>
          <Icon name="fileFilled" />
          <Preview active={true}>{value[0].name}</Preview>
        </DropArea>
      );
    } else {
      return (
        <DropArea>
          <Icon name="file" />
          <Preview>Drop a file here, or click to browse.</Preview>
        </DropArea>
      );
    }
  }

  render() {
    const { onChange } = this.props;

    return (
      <Dropzone
        {...this.props}
        multiple={false}
        onDrop={(files) => onChange(files)}
        style={{ width: '100%' }}
        activeStyle={{ color: '#00bcec' }}
        rejectStyle={{}}
      >
        {this.renderFiles()}
      </Dropzone>
    );
  }
}

FileInput.usage = `
# FileInput

A file input component which accepts drag-and-drop.
`;
{'fraction_non_alphanumeric': 0.16586794462193824, 'fraction_numerical': 0.006389776357827476, 'mean_word_length': 2.5883476599808977, 'pattern_counts': {'":': 0, '<': 27, '<?xml version=': 0, '>': 45, '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': '6486866', 'n_tokens_mistral': 1186, 'n_tokens_neox': 1180, 'n_words': 273}