@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
39 lines • 4.73 kB
JavaScript
import { __rest } from "tslib";
// 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 { copyAnalyticsMetadataAttribute } from '@awsui/component-toolkit/internal/analytics-metadata';
import { useSingleTabStopNavigation } from '../../internal/context/single-tab-stop-navigation-context';
import { useMergeRefs } from '../../internal/hooks/use-merge-refs';
import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
import { ExpandToggleButton } from '../expandable-rows/expand-toggle-button';
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((_a, ref) => {
var { 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 } = _a, rest = __rest(_a, ["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"]);
const Element = isRowHeader ? 'th' : 'td';
const isVisualRefresh = useVisualRefresh();
resizableStyle = resizableColumns ? {} : resizableStyle;
nativeAttributes = Object.assign(Object.assign({}, 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, Object.assign({ style: Object.assign(Object.assign({}, 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)}`], 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