@wix/design-system
Version:
@wix/design-system
98 lines • 5.71 kB
JavaScript
import React, { PureComponent } from 'react';
import { SidePanelContext } from '../../SidePanelAPI';
import PropTypes from 'prop-types';
import { st, classes } from './Header.st.css.js';
import { dataHooks } from '../../constants';
import Heading from '../../../Heading';
import Divider from '../../../Divider';
import CloseButton from '../../../CloseButton';
import Box from '../../../Box';
import InfoIcon from '../../../InfoIcon';
import Text from '../../../Text';
import { TooltipCommonProps } from '../../../common/PropTypes/TooltipCommon';
import { Help24 as Help } from '@wix/wix-ui-icons-common/system';
import { ChevronLeftLarge } from '@wix/wix-ui-icons-common';
import Tooltip from '../../../Tooltip';
class Header extends PureComponent {
renderStringTitle(skin) {
const { title, infoTooltipContent, infoTooltipProps, maxLines, ellipsis } = this.props;
const headerProps = {
placement: 'auto',
ellipsis,
maxLines,
size: 'medium',
as: 'h2',
dataHook: dataHooks.sidePanelHeaderTitle,
};
const HeaderText = () => skin === 'floating' ? (React.createElement(Text, { className: classes.floatingTitle, ...headerProps, weight: "bold" }, title)) : (React.createElement(Heading, { ...headerProps }, title));
return (React.createElement(Box, null,
React.createElement(HeaderText, null),
infoTooltipContent && (React.createElement(Box, { marginLeft: "tiny" },
React.createElement(InfoIcon, { dataHook: dataHooks.sidePanelHeaderTitleInfoIcon, content: infoTooltipContent, tooltipProps: infoTooltipProps })))));
}
renderSubtitle() {
const { subtitle } = this.props;
if (!subtitle)
return null;
const isStringSubtitle = typeof subtitle === 'string';
if (!isStringSubtitle) {
return subtitle;
}
return (React.createElement(Text, { skin: "standard", secondary: true, dataHook: dataHooks.sidePanelHeaderSubtitle }, subtitle));
}
renderBackButton({ ariaLabel, onClick, description, tooltipProps, } = {}) {
const backButton = (React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderBackButton, className: classes.backButton, onClick: onClick, size: "large", skin: "dark", "aria-label": ariaLabel, children: React.createElement(ChevronLeftLarge, null) }));
if (description) {
return (React.createElement(Tooltip, { ...tooltipProps, content: description, dataHook: dataHooks.sidePanelHeaderBackButtonTooltip }, backButton));
}
return backButton;
}
renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps) {
const { title } = this.props;
const isStringTitle = typeof title === 'string';
return (React.createElement("div", { className: st(classes.titleContainer, {
noCloseButton: !closeButtonProps?.onClick,
}) },
this.props.prefix && (React.createElement("div", { "data-hook": dataHooks.sidePanelHeaderPrefix }, this.props.prefix)),
backButtonProps?.onClick && this.renderBackButton(backButtonProps),
React.createElement("div", { className: classes.title },
isStringTitle ? this.renderStringTitle(skin) : title,
this.renderSubtitle()),
this.renderButtons(closeButtonProps, helpButtonProps)));
}
renderButtons(closeButtonProps, helpButtonProps) {
if (!closeButtonProps?.onClick &&
!helpButtonProps?.onClick &&
!this.props.suffix) {
return React.createElement(React.Fragment, null);
}
return (React.createElement("div", { className: classes.buttonBox },
this.props.suffix && (React.createElement("div", { "data-hook": dataHooks.sidePanelHeaderSuffix }, this.props.suffix)),
helpButtonProps?.onClick && (React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderHelpButton, className: classes.helpButton, onClick: helpButtonProps.onClick, size: helpButtonProps.size ?? 'large', skin: helpButtonProps.skin ?? 'dark', "aria-label": helpButtonProps.ariaLabel, children: React.createElement(Help, { className: classes.helpIcon }) })),
closeButtonProps?.onClick && (React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderCloseButton, className: classes.closeButton, onClick: closeButtonProps.onClick, size: closeButtonProps.size ?? 'large', "aria-label": closeButtonProps.ariaLabel, skin: closeButtonProps.skin ?? 'dark' }))));
}
render() {
const { children, showDivider, className } = this.props;
return (React.createElement(SidePanelContext.Consumer, null, ({ skin, isDraggable, backButtonProps, closeButtonProps, helpButtonProps, }) => (React.createElement("div", { className: st(classes.root, { skin, isDraggable }, className), "data-hook": dataHooks.sidePanelHeader },
this.renderTitle(skin, backButtonProps, closeButtonProps, helpButtonProps),
children,
showDivider && (React.createElement(Divider, { className: classes.divider, dataHook: dataHooks.sidePanelHeaderDivider }))))));
}
}
Header.displayName = 'SidePanel.Header';
Header.propTypes = {
className: PropTypes.string,
title: PropTypes.node,
subtitle: PropTypes.node,
infoTooltipContent: PropTypes.node,
infoTooltipProps: PropTypes.shape(TooltipCommonProps),
showDivider: PropTypes.bool,
children: PropTypes.node,
maxLines: PropTypes.number,
ellipsis: PropTypes.bool,
};
Header.defaultProps = {
showDivider: true,
};
export default Header;
//# sourceMappingURL=Header.js.map