@awsui/components-react
Version:
On July 19th, 2022, we launched [Cloudscape Design System](https://cloudscape.design). Cloudscape is an evolution of AWS-UI. It consists of user interface guidelines, front-end components, design resources, and development tools for building intuitive, en
75 lines • 6.07 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef, useState } from 'react';
import clsx from 'clsx';
import InternalBox from '../box/internal.js';
import { FormFieldError, FormFieldWarning } from '../form-field/internal';
import Tooltip from '../internal/components/tooltip/index';
import { useUniqueId } from '../internal/hooks/use-unique-id';
import InternalSpaceBetween from '../space-between/internal.js';
import InternalSpinner from '../spinner/internal.js';
import DismissButton from '../token-group/dismiss-button';
import * as defaultFormatters from './default-formatters.js';
import { FileOptionThumbnail } from './thumbnail.js';
import styles from './styles.css.js';
import testUtilStyles from './test-classes/styles.css.js';
function InternalFileToken({ file, showFileLastModified, showFileSize, showFileThumbnail, i18nStrings, onDismiss, errorText, warningText, readOnly, loading, alignment, groupContainsImage, isImage, index, }) {
var _a, _b;
const formatFileSize = (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.formatFileSize) !== null && _a !== void 0 ? _a : defaultFormatters.formatFileSize;
const formatFileLastModified = (_b = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.formatFileLastModified) !== null && _b !== void 0 ? _b : defaultFormatters.formatFileLastModified;
const errorId = useUniqueId('error');
const warningId = useUniqueId('warning');
const showWarning = warningText && !errorText;
const containerRef = useRef(null);
const fileNameRef = useRef(null);
const fileNameContainerRef = useRef(null);
const [showTooltip, setShowTooltip] = useState(false);
const getDismissLabel = (fileIndex) => {
var _a;
return (_a = i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.removeFileAriaLabel) === null || _a === void 0 ? void 0 : _a.call(i18nStrings, fileIndex);
};
function isEllipsisActive() {
const span = fileNameRef.current;
const container = fileNameContainerRef.current;
if (span && container) {
return span.offsetWidth >= container.offsetWidth;
}
return false;
}
const fileIsSingleRow = !showFileLastModified && !showFileSize && (!groupContainsImage || (groupContainsImage && !showFileThumbnail));
return (React.createElement("div", { ref: containerRef, className: clsx(styles.token, {
[styles['token-grid']]: alignment === 'horizontal',
[styles['token-contains-image']]: groupContainsImage && showFileThumbnail,
}), role: "group", "aria-label": file.name, "aria-describedby": errorText ? errorId : warningText ? warningId : undefined, "aria-disabled": loading, "data-index": index },
React.createElement("div", { className: clsx(styles['token-box'], {
[styles.loading]: loading,
[styles.error]: errorText,
[styles.warning]: showWarning,
[styles.horizontal]: alignment === 'horizontal',
[styles['read-only']]: readOnly,
}) },
loading && (React.createElement("div", { className: clsx(styles['file-loading-overlay'], {
[styles['file-loading-overlay-single-row']]: loading && fileIsSingleRow,
}) },
React.createElement(InternalSpinner, { variant: "disabled", size: "normal" }))),
React.createElement(InternalBox, { className: styles['file-option'] },
showFileThumbnail && isImage && React.createElement(FileOptionThumbnail, { file: file }),
React.createElement("div", { className: clsx(styles['file-option-metadata'], {
[styles['with-image']]: showFileThumbnail && isImage,
[styles['single-row-loading']]: loading && fileIsSingleRow,
}) },
React.createElement(InternalSpaceBetween, { direction: "vertical", size: "xxxs" },
React.createElement("div", { onMouseOver: () => setShowTooltip(true), onMouseOut: () => setShowTooltip(false), ref: fileNameContainerRef },
React.createElement(InternalBox, { fontWeight: "normal", className: clsx(styles['file-option-name'], testUtilStyles['file-option-name'], {
[testUtilStyles['ellipsis-active']]: isEllipsisActive(),
}) },
React.createElement("span", { ref: fileNameRef }, file.name))),
showFileSize && file.size ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-size'], testUtilStyles['file-option-size']) }, formatFileSize(file.size))) : null,
showFileLastModified && file.lastModified ? (React.createElement(InternalBox, { fontSize: "body-s", color: 'text-body-secondary', className: clsx(styles['file-option-last-modified'], testUtilStyles['file-option-last-modified']) }, formatFileLastModified(new Date(file.lastModified)))) : null))),
onDismiss && !readOnly && React.createElement(DismissButton, { dismissLabel: getDismissLabel(index), onDismiss: onDismiss })),
errorText && (React.createElement(FormFieldError, { id: errorId, errorIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.errorIconAriaLabel }, errorText)),
showWarning && (React.createElement(FormFieldWarning, { id: warningId, warningIconAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.warningIconAriaLabel }, warningText)),
showTooltip && isEllipsisActive() && (React.createElement(Tooltip, { trackRef: containerRef, trackKey: file.name, value: React.createElement(InternalBox, { fontWeight: "normal" }, file.name), onDismiss: () => setShowTooltip(false) }))));
}
export default InternalFileToken;
//# sourceMappingURL=file-token.js.map