DocSpace-client/packages/components/file-input/index.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import equal from "fast-deep-equal/react";
import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";

import IconButton from "../icon-button";
import Button from "../button";
import TextInput from "../text-input";
import StyledFileInput from "./styled-file-input";

class FileInput extends Component {
  constructor(props) {
    super(props);

    this.inputRef = React.createRef();

    this.state = {
      fileName: "",
      file: null,
    };
  }

  shouldComponentUpdate(nextProps, nextState) {
    return !equal(this.props, nextProps) || !equal(this.state, nextState);
  }

  onIconFileClick = (e) => {
    const { isDisabled } = this.props;

    if (isDisabled) {
      return false;
    }
    e.target.blur();
    this.inputRef.current.click();
  };

  onChangeHandler = (e) => {
    this.setState({
      fileName: e.target.value,
    });
  };

  onInputFile = () => {
    const { onInput } = this.props;

    if (this.inputRef.current.files.length > 0) {
      this.setState(
        {
          fileName: this.inputRef.current.files[0].name,
          file: this.inputRef.current.files[0],
        },
        () => {
          if (onInput) {
            this.inputRef.current.value = "";
            onInput(this.state.file);
          }
        }
      );
    }
  };

  render() {
    //console.log('render FileInput');
    const { fileName } = this.state;
    const {
      size,
      placeholder,
      isDisabled,
      scale,
      hasError,
      hasWarning,
      accept,
      id,
      onInput, // eslint-disable-line no-unused-vars
      buttonLabel,
      ...rest
    } = this.props;

    let iconSize = 0;
    let buttonSize = "";

    switch (size) {
      case "base":
        iconSize = 15;
        buttonSize = "extrasmall";
        break;
      case "middle":
        iconSize = 15;
        buttonSize = "small";
        break;
      case "big":
        iconSize = 16;
        buttonSize = "normal";
        break;
      case "huge":
        iconSize = 16;
        buttonSize = "medium";
        break;
      case "large":
        iconSize = 16;
        buttonSize = "medium";
        break;
    }

    return (
      <StyledFileInput
        size={size}
        scale={scale ? 1 : 0}
        hasError={hasError}
        hasWarning={hasWarning}
        isDisabled={isDisabled}
        {...rest}
      >
        <TextInput
          className="text-input"
          placeholder={placeholder}
          value={fileName}
          size={size}
          isDisabled={isDisabled}
          hasError={hasError}
          hasWarning={hasWarning}
          scale={scale}
          onFocus={this.onIconFileClick}
          onChange={this.onChangeHandler}
        />
        <input
          type="file"
          id={id}
          ref={this.inputRef}
          style={{ display: "none" }}
          accept={accept}
          onInput={this.onInputFile}
        />

        {buttonLabel ? (
          <Button
            isDisabled={isDisabled}
            label={buttonLabel}
            onClick={this.onIconFileClick}
            size={buttonSize}
          />
        ) : (
          <div className="icon" onClick={this.onIconFileClick}>
            <IconButton
              className="icon-button"
              iconName={CatalogFolderReactSvgUrl}
              color={"#A3A9AE"}
              size={iconSize}
              isDisabled={isDisabled}
            />
          </div>
        )}
      </StyledFileInput>
    );
  }
}

FileInput.propTypes = {
  /** Accepts css style */
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  /** Placeholder text for the input */
  placeholder: PropTypes.string,
  /** Supported size of the input fields */
  size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
  /** Indicates that the input field has scale */
  scale: PropTypes.bool,
  /** Accepts class */
  className: PropTypes.string,
  /** Indicates that the input field has an error */
  hasError: PropTypes.bool,
  /** Indicates that the input field has a warning */
  hasWarning: PropTypes.bool,
  /** Used as HTML `id` property */
  id: PropTypes.string,
  /** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
  isDisabled: PropTypes.bool,
  /** Used as HTML `name` property */
  name: PropTypes.string,
  /** Called when a file is selected */
  onInput: PropTypes.func,
  /** Specifies the files visible for upload */
  accept: PropTypes.string,
  /** Specifies the label for the upload button */
  buttonLabel: PropTypes.string,
};

FileInput.defaultProps = {
  size: "base",
  scale: false,
  hasWarning: false,
  hasError: false,
  isDisabled: false,
  accept: "",
};

export default FileInput;