@carbon/react
Version:
React components for the Carbon Design System
148 lines (146 loc) • 4.63 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* 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 { usePrefix } from "../../internal/usePrefix.js";
import { Text } from "../Text/Text.js";
import { Enter, Space } from "../../internal/keyboard/keys.js";
import { matches } from "../../internal/keyboard/match.js";
import useIsomorphicEffect from "../../internal/useIsomorphicEffect.js";
import { useId } from "../../internal/useId.js";
import { noopFn } from "../../internal/noopFn.js";
import { Tooltip } from "../Tooltip/Tooltip.js";
import Filename from "./Filename.js";
import classNames from "classnames";
import { useRef, useState } from "react";
import PropTypes from "prop-types";
import { jsx, jsxs } from "react/jsx-runtime";
//#region src/components/FileUploader/FileUploaderItem.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
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 generatedId = useId();
const { current: id } = useRef(uuid || generatedId);
const classes = classNames(`${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(() => {
isEllipsisActive(textRef.current);
}, [prefix, name]);
return /* @__PURE__ */ jsxs("span", {
className: classes,
...other,
children: [
isEllipsisApplied ? /* @__PURE__ */ jsx("div", {
className: isInvalid,
children: /* @__PURE__ */ jsx(Tooltip, {
label: name,
align: "bottom",
className: `${prefix}--file-filename-tooltip`,
children: /* @__PURE__ */ jsx("button", {
className: `${prefix}--file-filename-button`,
type: "button",
children: /* @__PURE__ */ jsx(Text, {
ref: textRef,
as: "p",
title: name,
className: `${prefix}--file-filename-button`,
id: filterSpaceName(name),
children: name
})
})
})
}) : /* @__PURE__ */ jsx(Text, {
ref: textRef,
as: "p",
title: name,
className: `${prefix}--file-filename`,
id: filterSpaceName(name),
children: name
}),
/* @__PURE__ */ jsx("div", {
className: `${prefix}--file-container-item`,
children: /* @__PURE__ */ jsx("span", {
className: `${prefix}--file__state-container`,
children: /* @__PURE__ */ jsx(Filename, {
name,
iconDescription,
status,
invalid,
"aria-describedby": invalid && errorSubject ? `${filterSpaceName(name)}-id-error` : void 0,
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__ */ jsxs("div", {
className: `${prefix}--form-requirement`,
role: "alert",
id: `${filterSpaceName(name)}-id-error`,
children: [/* @__PURE__ */ jsx(Text, {
as: "div",
className: `${prefix}--form-requirement__title`,
children: errorSubject
}), errorBody && /* @__PURE__ */ jsx(Text, {
as: "p",
className: `${prefix}--form-requirement__supplement`,
children: errorBody
})]
})
]
});
}
FileUploaderItem.propTypes = {
errorBody: PropTypes.string,
errorSubject: PropTypes.string,
iconDescription: PropTypes.string,
invalid: PropTypes.bool,
name: PropTypes.string,
onDelete: PropTypes.func,
size: PropTypes.oneOf([
"sm",
"md",
"lg"
]),
status: PropTypes.oneOf([
"uploading",
"edit",
"complete"
]),
uuid: PropTypes.string
};
//#endregion
export { FileUploaderItem as default };