#CCR-2111 added disabled status for file input (#433)

* #CCR-2111 added disabled status for file input

* #CCR-2111 fix validate style

lib/components/fileInput/fileInput.css

@@ -23,6 +23,10 @@
   cursor: pointer;
 }
 
+.textWrapperDisable {
+  cursor: default;
+}
+
 .textWrapper .addFileIcon {
   margin-right: var(--vds-spacer-xs);
   font-size: 24px;
@@ -39,6 +43,10 @@
   border-radius: var(--vds-border-radius-sm);
 }
 
+.labelDisable {
+  opacity: 0.5;
+}
+
 .input {
   position: absolute;
   top: 0;

lib/components/fileInput/fileInput.js

@@ -1,10 +1,11 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import { FileAddOutlined } from '@ant-design/icons';
+import cn from 'classnames';
 
 import styles from './fileInput.css';
 
-const FileInput = React.memo(({ fileList }) => {
+const FileInput = React.memo(({ fileList, disabled }) => {
   const fileInputRef = useRef(null);
   const dropAreaRef = useRef(null);
 
@@ -53,20 +54,21 @@ const FileInput = React.memo(({ fileList }) => {
         ref={fileInputRef}
         id="files"
         aria-label="file-input"
+        disabled={disabled}
         onChange={onFileChange}
       />
       {/* eslint-disable-next-line jsx-a11y/label-has-associated-control,jsx-a11y/label-has-for */}
       <label htmlFor="files" className={styles.labelWrap}>
         <div
           ref={dropAreaRef}
-          className={styles.label}
+          className={cn(styles.label, { [styles.labelDisable]: disabled })}
           onDragLeave={handleDragLeave}
           onDragEnter={handleDragEnter}
           onDragOver={handleDragOver}
           onDrop={handleDrop}
           data-testid="drop-area"
         >
-          <span className={styles.textWrapper}>
+          <span className={cn(styles.textWrapper, { [styles.textWrapperDisable]: disabled })}>
             <FileAddOutlined className={styles.addFileIcon} />
             Drop or <span className={styles.fakeLink}>add files</span> here
           </span>
@@ -78,6 +80,11 @@ const FileInput = React.memo(({ fileList }) => {
 
 FileInput.propTypes = {
   fileList: PropTypes.func.isRequired,
+  disabled: PropTypes.bool,
+};
+
+FileInput.defaultProps = {
+  disabled: false,
 };
 
 export default FileInput;