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

Carbon react components for the MSKCC DSM

/**
 * MSKCC 2021, 2024
 */

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
var cx = require('classnames');
var PropTypes = require('prop-types');
var React = require('react');
var Filename = require('./Filename.js');
var uniqueId = require('../../tools/uniqueId.js');
var usePrefix = require('../../internal/usePrefix.js');
var match = require('../../internal/keyboard/match.js');
var keys = require('../../internal/keyboard/keys.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);

function FileUploaderItem(_ref) {
  let {
    uuid,
    name,
    status,
    iconDescription,
    onDelete,
    invalid,
    errorSubject,
    errorBody,
    size,
    ...other
  } = _ref;
  const prefix = usePrefix.usePrefix();
  const {
    current: id
  } = React.useRef(uuid || uniqueId["default"]());
  const classes = cx__default["default"](`${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["default"].createElement("span", _rollupPluginBabelHelpers["extends"]({
    className: classes
  }, other), /*#__PURE__*/React__default["default"].createElement("p", {
    className: `${prefix}--file-filename`,
    title: name,
    id: name
  }, name), /*#__PURE__*/React__default["default"].createElement("span", {
    className: `${prefix}--file__state-container`
  }, /*#__PURE__*/React__default["default"].createElement(Filename["default"], {
    name: name,
    iconDescription: iconDescription,
    status: status,
    invalid: invalid,
    "aria-describedby": `${name}-id-error`,
    onKeyDown: evt => {
      if (match.matches(evt, [keys.Enter, keys.Space])) {
        if (status === 'edit') {
          evt.preventDefault();
          onDelete(evt, {
            uuid: id
          });
        }
      }
    },
    onClick: evt => {
      if (status === 'edit') {
        onDelete(evt, {
          uuid: id
        });
      }
    }
  })), invalid && errorSubject && /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--form-requirement`,
    role: "alert",
    id: `${name}-id-error`
  }, /*#__PURE__*/React__default["default"].createElement("div", {
    className: `${prefix}--form-requirement__title`
  }, errorSubject), errorBody && /*#__PURE__*/React__default["default"].createElement("p", {
    className: `${prefix}--form-requirement__supplement`
  }, errorBody)));
}
FileUploaderItem.propTypes = {
  /**
   * Error message body for an invalid file upload
   */
  errorBody: PropTypes__default["default"].string,
  /**
   * Error message subject for an invalid file upload
   */
  errorSubject: PropTypes__default["default"].string,
  /**
   * Description of status icon (displayed in native tooltip)
   */
  iconDescription: PropTypes__default["default"].string,
  /**
   * Specify if the currently uploaded file is invalid
   */
  invalid: PropTypes__default["default"].bool,
  /**
   * Name of the uploaded file
   */
  name: PropTypes__default["default"].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__default["default"].func,
  /**
   * Specify the size of the FileUploaderButton, from a list of available
   * sizes.
   */
  size: PropTypes__default["default"].oneOf(['sm', 'md', 'lg']),
  /**
   * Status of the file upload
   */
  status: PropTypes__default["default"].oneOf(['uploading', 'edit', 'complete']),
  /**
   * Unique identifier for the file object
   */
  uuid: PropTypes__default["default"].string
};
FileUploaderItem.defaultProps = {
  status: 'uploading',
  onDelete: () => {}
};

exports["default"] = FileUploaderItem;