import React from 'react'; import styled from 'styled-components'; import PropTypes from 'prop-types'; import { prop, remSize } from '../../theme'; const background = ({ transparent, inverted }) => prop(transparent === true ? 'backgroundColor' : `MobilePanel.default.${inverted === true ? 'foreground' : 'background'}`); const textColor = ({ transparent, inverted }) => prop((transparent === false && inverted === true) ? 'MobilePanel.default.background' : 'primaryTextColor'); const HeaderDiv = styled.div` position: fixed; width: 100%; background: ${props => background(props)}; color: ${textColor}; padding: ${props => remSize(props.slim === true ? 2 : 12)}; padding-left: ${remSize(16)}; padding-right: ${remSize(16)}; z-index: 1; display: flex; flex: 1; flex-direction: row; justify-content: flex-start; align-items: center; svg { max-height: ${remSize(32)}; padding: ${remSize(4)}; } & svg path { fill: ${textColor} !important; } .editor__unsaved-changes svg { width: ${remSize(16)}; padding: 0px; vertical-align: top } `; const IconContainer = styled.div` margin-left: ${props => (props.leftButton ? remSize(32) : remSize(4))}; list-style: none; display: flex; flex-direction: horizontal; `; const TitleContainer = styled.div` margin-left: ${remSize(4)}; margin-right: auto; ${props => props.padded && `h2{ padding-top: ${remSize(10)}; padding-bottom: ${remSize(10)}; }`} `; const Header = ({ title, subtitle, leftButton, children, transparent, inverted, slim }) => ( {leftButton} {title &&

{title}

} {subtitle &&

{subtitle}

}
{children}
); Header.propTypes = { title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]), subtitle: PropTypes.string, leftButton: PropTypes.element, children: PropTypes.oneOfType([PropTypes.element, PropTypes.arrayOf(PropTypes.element)]), transparent: PropTypes.bool, inverted: PropTypes.bool, slim: PropTypes.bool, }; Header.defaultProps = { title: null, subtitle: null, leftButton: null, children: [], transparent: false, inverted: false, slim: false }; export default Header;