@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
50 lines • 2.25 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 { useMergeRefs } from '@awsui/component-toolkit/internal';
import Tooltip from '../../../internal/components/tooltip';
import useHiddenDescription from '../../../internal/hooks/use-hidden-description';
import { applyDisplayName } from '../../../internal/utils/apply-display-name';
import testutilStyles from '../../test-classes/styles.css.js';
export 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), ...rest, ...(isDisabledWithReason ? targetProps : {}), onFocus: event => {
if (rest.onFocus) {
rest.onFocus(event);
}
if (isDisabledWithReason) {
setShowTooltip(true);
}
}, onBlur: event => {
if (rest.onBlur) {
rest.onBlur(event);
}
if (isDisabledWithReason) {
setShowTooltip(false);
}
}, onMouseEnter: event => {
if (rest.onMouseEnter) {
rest.onMouseEnter(event);
}
if (isDisabledWithReason) {
setShowTooltip(true);
}
}, onMouseLeave: event => {
if (rest.onMouseLeave) {
rest.onMouseLeave(event);
}
if (isDisabledWithReason) {
setShowTooltip(false);
}
} },
props.children,
isDisabledWithReason && (React.createElement(React.Fragment, null,
descriptionEl,
showTooltip && (React.createElement(Tooltip, { className: testutilStyles['disabled-reason-tooltip'], trackRef: ref, value: disabledReason, onDismiss: () => setShowTooltip(false) }))))));
});
applyDisplayName(GridCell, 'GridCell');
//# sourceMappingURL=grid-cell.js.map