@carbon/react/es/components/FileUploader/Filename.js

React components for the Carbon Design System

/**
 * Copyright IBM Corp. 2016, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import { CheckmarkFilled, WarningFilled, Close } from '@carbon/icons-react';
import PropTypes from 'prop-types';
import React from 'react';
import Loading from '../Loading/Loading.js';
import { usePrefix } from '../../internal/usePrefix.js';

var _Close;
function Filename({
  iconDescription = 'Uploading file',
  status = 'uploading',
  invalid,
  name,
  tabIndex = 0,
  ['aria-describedby']: ariaDescribedBy,
  ...rest
}) {
  const prefix = usePrefix();
  switch (status) {
    case 'uploading':
      return /*#__PURE__*/React.createElement(Loading, {
        description: iconDescription,
        small: true,
        withOverlay: false,
        className: `${prefix}--file-loading`
      });
    case 'edit':
      return /*#__PURE__*/React.createElement(React.Fragment, null, invalid && /*#__PURE__*/React.createElement(WarningFilled, {
        className: `${prefix}--file-invalid`
      }), /*#__PURE__*/React.createElement("button", _extends({
        "aria-label": `${iconDescription} - ${name}`,
        className: `${prefix}--file-close`,
        type: "button",
        tabIndex: tabIndex
      }, rest, {
        "aria-describedby": invalid ? ariaDescribedBy : undefined
      }), _Close || (_Close = /*#__PURE__*/React.createElement(Close, null))));
    case 'complete':
      return /*#__PURE__*/React.createElement(CheckmarkFilled, _extends({
        "aria-label": iconDescription,
        className: `${prefix}--file-complete`
      }, rest, {
        tabIndex: -1
      }), iconDescription && /*#__PURE__*/React.createElement("title", null, iconDescription));
    default:
      return null;
  }
}
Filename.propTypes = {
  /**
   * Specify an id that describes the error to be read by screen readers when the filename is invalid
   */
  ['aria-describedby']: PropTypes.string,
  /**
   * Provide a description of the SVG icon to denote file upload status
   */
  iconDescription: PropTypes.string,
  /**
   * Specify if the file is invalid
   */
  invalid: PropTypes.bool,
  /**
   * Name of the uploaded file
   */
  name: PropTypes.string,
  /**
   * Status of the file upload
   */
  status: PropTypes.oneOf(['edit', 'complete', 'uploading']),
  /**
   * Provide a custom tabIndex value for the `<Filename>`
   */
  tabIndex: PropTypes.number
};

export { Filename as default };