@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
68 lines • 4.99 kB
JavaScript
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useRef, useState } from 'react';
import clsx from 'clsx';
import { useMergeRefs } from '@awsui/component-toolkit/internal';
import ScreenreaderOnly from '../../internal/components/screenreader-only/index.js';
import Tooltip from '../../internal/components/tooltip';
import { useEffectOnUpdate } from '../../internal/hooks/use-effect-on-update';
import useHiddenDescription from '../../internal/hooks/use-hidden-description';
import { applyDisplayName } from '../../internal/utils/apply-display-name';
import styles from '../styles.css.js';
const GridCell = forwardRef((props, focusedDateRef) => {
const { disabledReason, ...rest } = props;
const isDisabledWithReason = !!disabledReason;
const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
const ref = useRef(null);
const [showTooltip, setShowTooltip] = useState(false);
return (React.createElement("td", { ref: useMergeRefs(focusedDateRef, ref), ...(isDisabledWithReason ? targetProps : {}), ...rest, onFocus: () => (isDisabledWithReason ? setShowTooltip(true) : undefined), onBlur: () => (isDisabledWithReason ? setShowTooltip(false) : undefined), onMouseEnter: () => (isDisabledWithReason ? setShowTooltip(true) : undefined), onMouseLeave: () => (isDisabledWithReason ? setShowTooltip(false) : undefined) },
props.children,
isDisabledWithReason && (React.createElement(React.Fragment, null,
descriptionEl,
showTooltip && (React.createElement(Tooltip, { className: styles['disabled-reason-tooltip'], trackRef: ref, value: disabledReason, onDismiss: () => setShowTooltip(false) }))))));
});
applyDisplayName(GridCell, 'GridCell');
export default function Grid({ isDateEnabled, dateDisabledReason, focusedDate, focusableDate, onSelectDate, selectedDate, ariaLabelledby, header, rows, isCurrentPage, renderDate, renderDateAnnouncement, isSameDate, onGridKeyDownHandler, }) {
const focusedDateRef = useRef(null);
// The focused date changes as a feedback to keyboard navigation in the grid.
// Once changed, the corresponding date button needs to receive the actual focus.
useEffectOnUpdate(() => {
if (focusedDate && focusedDateRef.current) {
focusedDateRef.current.focus();
}
}, [focusedDate]);
const rowLength = rows[0].length;
const denseGrid = rowLength > 3;
return (React.createElement("table", { role: "grid", className: clsx(styles['calendar-grid'], denseGrid && styles['calendar-grid-dense']), "aria-labelledby": ariaLabelledby },
header,
React.createElement("tbody", { onKeyDown: onGridKeyDownHandler }, rows.map((row, rowIndex) => (React.createElement("tr", { key: rowIndex, className: styles['calendar-row'] }, row.map((date, dateIndex) => {
const isFocusable = !!focusableDate && isSameDate(date, focusableDate);
const isSelected = !!selectedDate && isSameDate(date, selectedDate);
const isEnabled = !isDateEnabled || isDateEnabled(date);
const disabledReason = dateDisabledReason(date);
const isDisabledWithReason = !isEnabled && !!disabledReason;
const isCurrentDate = isSameDate(date, new Date());
// Can't be focused.
let tabIndex = undefined;
if (isFocusable && (isEnabled || isDisabledWithReason)) {
// Next focus target.
tabIndex = 0;
}
else if (isEnabled || isDisabledWithReason) {
// Can be focused programmatically.
tabIndex = -1;
}
return (React.createElement(GridCell, { key: `${rowIndex}:${dateIndex}`, ref: tabIndex === 0 ? focusedDateRef : undefined, tabIndex: tabIndex, "aria-current": isCurrentDate ? 'date' : undefined, "aria-selected": isEnabled ? isSelected : undefined, "aria-disabled": !isEnabled,
// Do not attach click event when the date is disabled, otherwise VO+safari announces clickable
onClick: isEnabled ? () => onSelectDate(date) : undefined, className: clsx(styles['calendar-grid-cell'], styles['calendar-date'], {
[styles['calendar-date-current-page']]: isCurrentPage(date),
[styles['calendar-date-enabled']]: isEnabled,
[styles['calendar-date-selected']]: isSelected,
[styles['calendar-date-current']]: isCurrentDate,
[styles['calendar-date-dense']]: denseGrid,
}), disabledReason: isDisabledWithReason ? disabledReason : undefined },
React.createElement("span", { className: styles['date-inner'], "aria-hidden": "true" }, renderDate(date)),
React.createElement(ScreenreaderOnly, null, renderDateAnnouncement(date, isCurrentDate))));
})))))));
}
//# sourceMappingURL=index.js.map