wix-style-react
Version:
wix-style-react
36 lines • 1.95 kB
JavaScript
import React from 'react';
import PropTypes from 'prop-types';
import { st, classes } from './SidebarHeader.st.css';
import { dataHooks } from './constants';
import Text from '../Text';
import { SidebarContext } from '../Sidebar/SidebarAPI';
import { sidebarSkins } from '../Sidebar/constants';
import Box from '../Box';
/** A header within the sidebar with title, subtitle and custom content at the bottom. */
class SidebarHeader extends React.PureComponent {
render() {
const { dataHook, title, subtitle, children } = this.props;
return (React.createElement(SidebarContext.Consumer, null, context => {
const skin = (context && context.getSkin()) || sidebarSkins.dark;
return (React.createElement("div", { "data-hook": dataHook, className: st(classes.root, { skin }) },
title && (React.createElement(Box, null,
React.createElement(Text, { dataHook: dataHooks.title, className: classes.title, size: "medium", weight: "bold", ellipsis: true, light: skin === sidebarSkins.dark }, title))),
subtitle && (React.createElement(Box, null,
React.createElement(Text, { dataHook: dataHooks.subtitle, className: classes.subtitle, size: "tiny", weight: "thin", ellipsis: true, light: skin === sidebarSkins.dark }, subtitle))),
children && React.createElement("div", { "data-hook": dataHooks.children }, children)));
}));
}
}
SidebarHeader.displayName = 'SidebarHeader';
SidebarHeader.propTypes = {
/** Applied as data-hook HTML attribute that can be used in the tests */
dataHook: PropTypes.string,
/** A text to show as the header title */
title: PropTypes.node,
/** A text to show as the header subtitle */
subtitle: PropTypes.node,
/** A custom node to render from the bottom */
children: PropTypes.node,
};
export default SidebarHeader;
//# sourceMappingURL=SidebarHeader.js.map