@carbon/react
Version:
React components for the Carbon Design System
152 lines (150 loc) • 5.51 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.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_Text = require("../Text/Text.js");
const require_keys = require("../../internal/keyboard/keys.js");
const require_match = require("../../internal/keyboard/match.js");
const require_useIsomorphicEffect = require("../../internal/useIsomorphicEffect.js");
const require_useId = require("../../internal/useId.js");
const require_noopFn = require("../../internal/noopFn.js");
const require_Tooltip = require("../Tooltip/Tooltip.js");
const require_Filename = require("./Filename.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("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 = require_noopFn.noopFn, invalid, errorSubject, errorBody, size, className, ...other }) {
const textRef = (0, react.useRef)(null);
const [isEllipsisApplied, setIsEllipsisApplied] = (0, react.useState)(false);
const prefix = require_usePrefix.usePrefix();
const generatedId = require_useId.useId();
const { current: id } = (0, react.useRef)(uuid || generatedId);
const classes = (0, classnames.default)(`${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;
};
require_useIsomorphicEffect.default(() => {
isEllipsisActive(textRef.current);
}, [prefix, name]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
className: classes,
...other,
children: [
isEllipsisApplied ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: isInvalid,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Tooltip.Tooltip, {
label: name,
align: "bottom",
className: `${prefix}--file-filename-tooltip`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
className: `${prefix}--file-filename-button`,
type: "button",
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
ref: textRef,
as: "p",
title: name,
className: `${prefix}--file-filename-button`,
id: filterSpaceName(name),
children: name
})
})
})
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
ref: textRef,
as: "p",
title: name,
className: `${prefix}--file-filename`,
id: filterSpaceName(name),
children: name
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
className: `${prefix}--file-container-item`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--file__state-container`,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Filename.default, {
name,
iconDescription,
status,
invalid,
"aria-describedby": invalid && errorSubject ? `${filterSpaceName(name)}-id-error` : void 0,
onKeyDown: (evt) => {
if (require_match.matches(evt, [require_keys.Enter, require_keys.Space])) {
if (status === "edit") {
evt.preventDefault();
onDelete(evt, { uuid: id });
}
}
},
onClick: (evt) => {
if (status === "edit") onDelete(evt, { uuid: id });
}
})
})
}),
invalid && errorSubject && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--form-requirement`,
role: "alert",
id: `${filterSpaceName(name)}-id-error`,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "div",
className: `${prefix}--form-requirement__title`,
children: errorSubject
}), errorBody && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Text.Text, {
as: "p",
className: `${prefix}--form-requirement__supplement`,
children: errorBody
})]
})
]
});
}
FileUploaderItem.propTypes = {
errorBody: prop_types.default.string,
errorSubject: prop_types.default.string,
iconDescription: prop_types.default.string,
invalid: prop_types.default.bool,
name: prop_types.default.string,
onDelete: prop_types.default.func,
size: prop_types.default.oneOf([
"sm",
"md",
"lg"
]),
status: prop_types.default.oneOf([
"uploading",
"edit",
"complete"
]),
uuid: prop_types.default.string
};
//#endregion
exports.default = FileUploaderItem;