wix-style-react
Version:
wix-style-react
82 lines • 4.25 kB
JavaScript
import React, { PureComponent } from 'react';
import { SidePanelContext } from '../SidePanelAPI';
import PropTypes from 'prop-types';
import { st, classes } from './Header.st.css';
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 { WixStyleReactContext } from '../../WixStyleReactProvider/context';
import { Help24 as Help } from '@wix/wix-ui-icons-common/system';
class Header extends PureComponent {
renderStringTitle() {
const { title, infoTooltipContent, infoTooltipProps, maxLines, ellipsis } = this.props;
return (React.createElement(Box, null,
React.createElement(Heading, { placement: "auto", ellipsis: ellipsis, maxLines: maxLines, size: "medium", as: "h2", dataHook: dataHooks.sidePanelHeaderTitle }, title),
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));
}
renderTitle(onCloseButtonClick, onHelpButtonClick) {
const { title } = this.props;
const isStringTitle = typeof title === 'string';
return (React.createElement("div", { className: st(classes.titleContainer, {
noCloseButton: !onCloseButtonClick,
}) },
React.createElement("div", { className: classes.title },
isStringTitle ? this.renderStringTitle() : title,
this.renderSubtitle()),
this.renderButtons(onCloseButtonClick, onHelpButtonClick)));
}
renderButtons(onCloseButtonClick, onHelpButtonClick) {
if (!onCloseButtonClick && !onHelpButtonClick) {
return React.createElement(React.Fragment, null);
}
return (React.createElement("div", { className: classes.buttonBox },
onHelpButtonClick && (
// @ts-ignore
React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderHelpButton, onClick: onHelpButtonClick, size: "large", skin: "dark", children: React.createElement(Help, { className: classes.helpIcon }) })),
onCloseButtonClick && (
// @ts-ignore
React.createElement(CloseButton, { dataHook: dataHooks.sidePanelHeaderCloseButton, className: classes.closeButton, onClick: onCloseButtonClick, size: "large", skin: "dark" }))));
}
render() {
const { children, showDivider, className } = this.props;
return (React.createElement(SidePanelContext.Consumer, null, ({ skin, isDraggable, onCloseButtonClick, onHelpButtonClick }) => (React.createElement(WixStyleReactContext.Consumer, null, ({ newColorsBranding }) => (React.createElement("div", { className: st(classes.root, { newColorsBranding, skin, isDraggable }, className), "data-hook": dataHooks.sidePanelHeader },
this.renderTitle(onCloseButtonClick, onHelpButtonClick),
children,
showDivider && (
// @ts-ignore
React.createElement(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