diff --git a/lib/components/fileInput/fileInput.css b/lib/components/fileInput/fileInput.css index e75b156f..06de3219 100644 --- a/lib/components/fileInput/fileInput.css +++ b/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; diff --git a/lib/components/fileInput/fileInput.js b/lib/components/fileInput/fileInput.js index 3b96ca19..21ba6bda 100644 --- a/lib/components/fileInput/fileInput.js +++ b/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 */}