@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
51 lines • 2.33 kB
JavaScript
import { __rest } from "tslib";
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
// SPDX-License-Identifier: Apache-2.0
import React, { forwardRef, useRef, useState } from 'react';
import Tooltip from '../../../internal/components/tooltip';
import useHiddenDescription from '../../../internal/hooks/use-hidden-description';
import { useMergeRefs } from '../../../internal/hooks/use-merge-refs';
import { applyDisplayName } from '../../../internal/utils/apply-display-name';
import testutilStyles from '../../test-classes/styles.css.js';
export const GridCell = forwardRef((props, focusedDateRef) => {
const { disabledReason } = props, rest = __rest(props, ["disabledReason"]);
const isDisabledWithReason = !!disabledReason;
const { targetProps, descriptionEl } = useHiddenDescription(disabledReason);
const ref = useRef(null);
const [showTooltip, setShowTooltip] = useState(false);
return (React.createElement("td", Object.assign({ 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