@carbon/react
Version:
React components for the Carbon Design System
162 lines (158 loc) • 5.05 kB
JavaScript
/**
* 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 cx from 'classnames';
import PropTypes from 'prop-types';
import React, { useRef, useState, useLayoutEffect } from 'react';
import Filename from './Filename.js';
import { Enter, Space } from '../../internal/keyboard/keys.js';
import { matches } from '../../internal/keyboard/match.js';
import { useId } from '../../internal/useId.js';
import { usePrefix } from '../../internal/usePrefix.js';
import { noopFn } from '../../internal/noopFn.js';
import '../Text/index.js';
import '../Tooltip/DefinitionTooltip.js';
import { Tooltip } from '../Tooltip/Tooltip.js';
import { Text } from '../Text/Text.js';
function FileUploaderItem({
uuid,
name,
status = 'uploading',
iconDescription,
onDelete = noopFn,
invalid,
errorSubject,
errorBody,
size,
className,
...other
}) {
const textRef = useRef(null);
const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
const prefix = usePrefix();
const {
current: id
} = useRef(uuid || useId());
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 => {
setIsEllipsisApplied(element.offsetWidth < element.scrollWidth);
return element.offsetWidth < element.scrollWidth;
};
useLayoutEffect(() => {
isEllipsisActive(textRef.current);
}, [prefix, name]);
return /*#__PURE__*/React.createElement("span", _extends({
className: classes
}, other), isEllipsisApplied ? /*#__PURE__*/React.createElement("div", {
className: isInvalid
}, /*#__PURE__*/React.createElement(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, {
ref: textRef,
as: "p",
title: name,
className: `${prefix}--file-filename-button`,
id: filterSpaceName(name)
}, name)))) : /*#__PURE__*/React.createElement(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, {
name: name,
iconDescription: iconDescription,
status: status,
invalid: invalid,
"aria-describedby": invalid && errorSubject ? `${filterSpaceName(name)}-id-error` : undefined,
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.createElement("div", {
className: `${prefix}--form-requirement`,
role: "alert",
id: `${filterSpaceName(name)}-id-error`
}, /*#__PURE__*/React.createElement(Text, {
as: "div",
className: `${prefix}--form-requirement__title`
}, errorSubject), errorBody && /*#__PURE__*/React.createElement(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
};
export { FileUploaderItem as default };