@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
37 lines • 4.13 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { useRef } from 'react';
import clsx from 'clsx';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import { useSingleTabStopNavigation } from '@awsui/component-toolkit/internal';
import { copyAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { ExpandToggleButton } from '../../internal/components/expand-toggle-button';
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
import { useStickyCellStyles } from '../sticky-columns';
import { getTableCellRoleProps } from '../table-role';
import { getStickyClassNames } from '../utils';
import tableStyles from '../styles.css.js';
import styles from './styles.css.js';
export const TableTdElement = React.forwardRef(({ children, wrapLines, isRowHeader, isFirstRow, isLastRow, isSelected, isNextSelected, isPrevSelected, nativeAttributes, onClick, onFocus, onBlur, isEvenRow, stripedRows, isSelection, hasSelection, hasFooter, columnId, colIndex, stickyState, tableRole, level, isExpandable, isExpanded, onExpandableItemToggle, expandButtonLabel, collapseButtonLabel, verticalAlign, resizableColumns, resizableStyle, isEditable, isEditing, isEditingDisabled, hasSuccessIcon, tableVariant, ...rest }, ref) => {
const Element = isRowHeader ? 'th' : 'td';
const isVisualRefresh = useVisualRefresh();
resizableStyle = resizableColumns ? {} : resizableStyle;
nativeAttributes = { ...nativeAttributes, ...getTableCellRoleProps({ tableRole, isRowHeader, colIndex }) };
const stickyStyles = useStickyCellStyles({
stickyColumns: stickyState,
columnId,
getClassName: props => getStickyClassNames(styles, props),
});
const cellRefObject = useRef(null);
const mergedRef = useMergeRefs(stickyStyles.ref, ref, cellRefObject);
const { tabIndex: cellTabIndex } = useSingleTabStopNavigation(cellRefObject);
const isEditingActive = isEditing && !isEditingDisabled;
return (React.createElement(Element, { style: { ...resizableStyle, ...stickyStyles.style }, className: clsx(styles['body-cell'], isFirstRow && styles['body-cell-first-row'], isLastRow && styles['body-cell-last-row'], isSelected && styles['body-cell-selected'], isNextSelected && styles['body-cell-next-selected'], isPrevSelected && styles['body-cell-prev-selected'], !isEvenRow && stripedRows && styles['body-cell-shaded'], stripedRows && styles['has-striped-rows'], isVisualRefresh && styles['is-visual-refresh'], isSelection && tableStyles['selection-control'], hasSelection && styles['has-selection'], hasFooter && styles['has-footer'], resizableColumns && styles['resizable-columns'], verticalAlign === 'top' && styles['body-cell-align-top'], isEditable && styles['body-cell-editable'], isEditing && !isEditingDisabled && styles['body-cell-edit-active'], isEditing && isEditingDisabled && styles['body-cell-edit-disabled-popover'], hasSuccessIcon && styles['body-cell-has-success'], level !== undefined && !isEditingActive && styles['body-cell-expandable'], level !== undefined && !isEditingActive && styles[`expandable-level-${getLevelClassSuffix(level)}`], tableVariant && styles[`table-variant-${tableVariant}`], stickyStyles.className), onClick: onClick, onFocus: onFocus, onBlur: onBlur, ref: mergedRef, ...nativeAttributes, tabIndex: cellTabIndex === -1 ? undefined : cellTabIndex, ...copyAnalyticsMetadataAttribute(rest) },
level !== undefined && isExpandable && !isEditingActive && (React.createElement("div", { className: styles['expandable-toggle-wrapper'] },
React.createElement(ExpandToggleButton, { isExpanded: isExpanded, onExpandableItemToggle: onExpandableItemToggle, expandButtonLabel: expandButtonLabel, collapseButtonLabel: collapseButtonLabel }))),
React.createElement("div", { className: clsx(styles['body-cell-content'], wrapLines && styles['body-cell-wrap']) }, children)));
});
function getLevelClassSuffix(level) {
return 0 <= level && level <= 9 ? level : 'next';
}
//# sourceMappingURL=td-element.js.map