@carbon/react/lib/components/FileUploader/FileUploaderItem.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.
 */

'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 keys = require('../../internal/keyboard/keys.js');
var match = require('../../internal/keyboard/match.js');
var useId = require('../../internal/useId.js');
var usePrefix = require('../../internal/usePrefix.js');
var noopFn = require('../../internal/noopFn.js');
var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
var Text = require('../Text/Text.js');
require('../Text/TextDirection.js');
require('../Tooltip/DefinitionTooltip.js');
var Tooltip = require('../Tooltip/Tooltip.js');

function FileUploaderItem({
  uuid,
  name,
  status = 'uploading',
  iconDescription,
  onDelete = noopFn.noopFn,
  invalid,
  errorSubject,
  errorBody,
  size,
  className,
  ...other
}) {
  const textRef = React.useRef(null);
  const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
  const prefix = usePrefix.usePrefix();
  const generatedId = useId.useId();
  const {
    current: id
  } = React.useRef(uuid || generatedId);
  const classes = cx(`${prefix}--file__selected-file`, className, {
    [`${prefix}--file__selected-file--invalid`]: invalid,
    [`${prefix}--file__selected-file--md`]: size === 'md',
    [`${prefix}--file__selected-file--sm`]: size === 'sm'
  });
  const isInvalid = invalid ? `${prefix}--file-filename-container-wrap-invalid` : `${prefix}--file-filename-container-wrap`;
  const filterSpaceName = name => {
    return name?.replace(/\s+/g, '');
  };
  const isEllipsisActive = element => {
    if (!element) {
      setIsEllipsisApplied(false);
      return false;
    }
    const isActive = element.offsetWidth < element.scrollWidth;
    setIsEllipsisApplied(isActive);
    return isActive;
  };
  useIsomorphicEffect.default(() => {
    isEllipsisActive(textRef.current);
  }, [prefix, name]);
  return /*#__PURE__*/React.createElement("span", _rollupPluginBabelHelpers.extends({
    className: classes
  }, other), isEllipsisApplied ? /*#__PURE__*/React.createElement("div", {
    className: isInvalid
  }, /*#__PURE__*/React.createElement(Tooltip.Tooltip, {
    label: name,
    align: "bottom",
    className: `${prefix}--file-filename-tooltip`
  }, /*#__PURE__*/React.createElement("button", {
    className: `${prefix}--file-filename-button`,
    type: "button"
  }, /*#__PURE__*/React.createElement(Text.Text, {
    ref: textRef,
    as: "p",
    title: name,
    className: `${prefix}--file-filename-button`,
    id: filterSpaceName(name)
  }, name)))) : /*#__PURE__*/React.createElement(Text.Text, {
    ref: textRef,
    as: "p",
    title: name,
    className: `${prefix}--file-filename`,
    id: filterSpaceName(name)
  }, name), /*#__PURE__*/React.createElement("div", {
    className: `${prefix}--file-container-item`
  }, /*#__PURE__*/React.createElement("span", {
    className: `${prefix}--file__state-container`
  }, /*#__PURE__*/React.createElement(Filename.default, {
    name: name,
    iconDescription: iconDescription,
    status: status,
    invalid: invalid,
    "aria-describedby": invalid && errorSubject ? `${filterSpaceName(name)}-id-error` : undefined,
    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.createElement("div", {
    className: `${prefix}--form-requirement`,
    role: "alert",
    id: `${filterSpaceName(name)}-id-error`
  }, /*#__PURE__*/React.createElement(Text.Text, {
    as: "div",
    className: `${prefix}--form-requirement__title`
  }, errorSubject), errorBody && /*#__PURE__*/React.createElement(Text.Text, {
    as: "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
};

exports.default = FileUploaderItem;