@mskcc/carbon-react/es/components/FileUploader/FileUploaderItem.js

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
import cx from 'classnames';
import PropTypes from 'prop-types';
import React__default, { useRef } from 'react';
import Filename from './Filename.js';
import uniqueId from '../../tools/uniqueId.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { matches } from '../../internal/keyboard/match.js';
import { Enter, Space } from '../../internal/keyboard/keys.js';

function FileUploaderItem(_ref) {
  let {
    uuid,
    name,
    status,
    iconDescription,
    onDelete,
    invalid,
    errorSubject,
    errorBody,
    size,
    ...other
  } = _ref;
  const prefix = usePrefix();
  const {
    current: id
  } = useRef(uuid || uniqueId());
  const classes = cx(`${prefix}--file__selected-file`, {
    [`${prefix}--file__selected-file--invalid`]: invalid,
    [`${prefix}--file__selected-file--md`]: size === 'field' || size === 'md',
    [`${prefix}--file__selected-file--sm`]: size === 'small' || size === 'sm'
  });
  return /*#__PURE__*/React__default.createElement("span", _extends({
    className: classes
  }, other), /*#__PURE__*/React__default.createElement("p", {
    className: `${prefix}--file-filename`,
    title: name,
    id: name
  }, name), /*#__PURE__*/React__default.createElement("span", {
    className: `${prefix}--file__state-container`
  }, /*#__PURE__*/React__default.createElement(Filename, {
    name: name,
    iconDescription: iconDescription,
    status: status,
    invalid: invalid,
    "aria-describedby": `${name}-id-error`,
    onKeyDown: evt => {
      if (matches(evt, [Enter, Space])) {
        if (status === 'edit') {
          evt.preventDefault();
          onDelete(evt, {
            uuid: id
          });
        }
      }
    },
    onClick: evt => {
      if (status === 'edit') {
        onDelete(evt, {
          uuid: id
        });
      }
    }
  })), invalid && errorSubject && /*#__PURE__*/React__default.createElement("div", {
    className: `${prefix}--form-requirement`,
    role: "alert",
    id: `${name}-id-error`
  }, /*#__PURE__*/React__default.createElement("div", {
    className: `${prefix}--form-requirement__title`
  }, errorSubject), errorBody && /*#__PURE__*/React__default.createElement("p", {
    className: `${prefix}--form-requirement__supplement`
  }, errorBody)));
}
FileUploaderItem.propTypes = {
  /**
   * Error message body for an invalid file upload
   */
  errorBody: PropTypes.string,
  /**
   * Error message subject for an invalid file upload
   */
  errorSubject: PropTypes.string,
  /**
   * Description of status icon (displayed in native tooltip)
   */
  iconDescription: PropTypes.string,
  /**
   * Specify if the currently uploaded file is invalid
   */
  invalid: PropTypes.bool,
  /**
   * Name of the uploaded file
   */
  name: PropTypes.string,
  /**
   * Event handler that is called after removing a file from the file uploader
   * The event handler signature looks like `onDelete(evt, { uuid })`
   */
  onDelete: PropTypes.func,
  /**
   * Specify the size of the FileUploaderButton, from a list of available
   * sizes.
   */
  size: PropTypes.oneOf(['sm', 'md', 'lg']),
  /**
   * Status of the file upload
   */
  status: PropTypes.oneOf(['uploading', 'edit', 'complete']),
  /**
   * Unique identifier for the file object
   */
  uuid: PropTypes.string
};
FileUploaderItem.defaultProps = {
  status: 'uploading',
  onDelete: () => {}
};

export { FileUploaderItem as default };