@engie-group/fluid-design-system-react
Version:
Fluid Design System React
21 lines (18 loc) • 1.7 kB
JavaScript
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef } from 'react';
import { Utils } from '../../../utils/util.js';
import { NJIcon } from '../../icon/NJIcon.js';
import { NJIconButton } from '../../icon-button/NJIconButton.js';
import { NJSpinner } from '../../spinner/NJSpinner.js';
const NJChatInputFileCard = forwardRef(({ fileName, fileType, thumbnail, onDelete, isLoading, ...htmlProps }, forwardedRef) => {
const deleteHandler = (event) => {
event.stopPropagation();
onDelete?.(event);
};
const classes = Utils.classNames('nj-chat-input-file', {
'nj-chat-input-file--interactive': htmlProps.onClick
});
return (jsxs("div", { className: classes, children: [jsxs("button", { ...htmlProps, className: "nj-chat-input-file__wrapper", tabIndex: !htmlProps.onClick ? -1 : 0, ref: forwardedRef, children: [jsxs("div", { className: "nj-chat-input-file__thumbnail", children: [isLoading && jsx(NJSpinner, { scale: "sm", className: "nj-chat-input-file__spinner" }), !isLoading && (thumbnail ? thumbnail : jsx(NJIcon, { name: "text_snippet", variant: "brand" }))] }), (fileName || fileType) && (jsxs("div", { className: "nj-chat-input-file__details", children: [jsx("div", { className: "nj-chat-input-file__name", children: fileName }), jsx("div", { className: "nj-chat-input-file__type", children: fileType })] }))] }), !!onDelete && (jsx(NJIconButton, { "aria-label": "Remove file", scale: "xs", icon: "close", onClick: deleteHandler, className: "nj-chat-input-file__remove-btn" })), jsx("div", { className: "nj-sr-only", children: fileName })] }));
});
NJChatInputFileCard.displayName = 'NJChatInputFileCard';
export { NJChatInputFileCard };