UNPKG

@zendeskgarden/react-modals

Version:

Components relating to modals in the Garden Design System

70 lines (67 loc) 2.17 kB
/** * Copyright Zendesk, Inc. * * Use of this source code is governed under the Apache License, Version 2.0 * found at http://www.apache.org/licenses/LICENSE-2.0. */ import React__default, { forwardRef, useEffect } from 'react'; import PropTypes from 'prop-types'; import { useModalContext } from '../../utils/useModalContext.js'; import '../../styled/StyledBackdrop.js'; import '../../styled/StyledBody.js'; import '../../styled/StyledClose.js'; import '../../styled/StyledFooter.js'; import '../../styled/StyledFooterItem.js'; import '../../styled/StyledHeader.js'; import '../../styled/StyledDangerIcon.js'; import '../../styled/StyledModal.js'; import '../../styled/StyledTooltipDialogBackdrop.js'; import '../../styled/StyledTooltipWrapper.js'; import '../../styled/StyledTooltipDialog.js'; import '../../styled/StyledTooltipDialogTitle.js'; import '../../styled/StyledTooltipDialogBody.js'; import '../../styled/StyledTooltipDialogFooter.js'; import '../../styled/StyledTooltipDialogFooterItem.js'; import '../../styled/StyledTooltipDialogClose.js'; import '../../styled/StyledDrawer.js'; import { StyledDrawerHeader } from '../../styled/StyledDrawerHeader.js'; import '../../styled/StyledDrawerClose.js'; import '../../styled/StyledDrawerBody.js'; import '../../styled/StyledDrawerFooter.js'; import '../../styled/StyledDrawerFooterItem.js'; const HeaderComponent = forwardRef((_ref, ref) => { let { tag, ...other } = _ref; const { isCloseButtonPresent, hasHeader, setHasHeader, getTitleProps } = useModalContext(); useEffect(() => { if (!hasHeader && setHasHeader) { setHasHeader(true); } return () => { if (hasHeader && setHasHeader) { setHasHeader(false); } }; }, [hasHeader, setHasHeader]); return React__default.createElement(StyledDrawerHeader, Object.assign({}, getTitleProps(other), { as: tag, $isCloseButtonPresent: isCloseButtonPresent, ref: ref })); }); HeaderComponent.displayName = 'Drawer.Header'; HeaderComponent.propTypes = { tag: PropTypes.any }; HeaderComponent.defaultProps = { tag: 'div' }; const Header = HeaderComponent; export { Header };