| 1 | {"version":3,"file":"AppBar.js","sources":["../src/components/AppView/assets/chevron.svg","../src/components/AppView/AppBar.js"],"sourcesContent":["export default \"data:image/svg+xml,%3Csvg%20width%3D%227%22%20height%3D%2212%22%20viewBox%3D%220%200%207%2012%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M.446%2012a.512.512%200%2001-.172-.03.422.422%200%2001-.146-.087A.37.37%200%20010%2011.6a.37.37%200%2001.128-.281l5.826-5.361L.217.692A.376.376%200%2001.089.405.378.378%200%2001.217.117.444.444%200%2001.529%200c.123%200%20.228.04.313.117l6.03%205.56A.37.37%200%20017%205.96a.37.37%200%2001-.128.281l-6.12%205.643A.477.477%200%2001.446%2012z%22%20fill%3D%22%2300CBE6%22%20fill-rule%3D%22evenodd%22%2F%3E%3C%2Fsvg%3E\"","import React from 'react'\nimport PropTypes from 'prop-types'\nimport styled, { css } from 'styled-components'\nimport { Transition, animated } from 'react-spring'\nimport { Inside } from 'use-inside'\nimport { useTheme } from '../../theme'\nimport { PublicUrl } from '../../providers/PublicUrl'\nimport { springs } from '../../style'\nimport { noop, unselectable } from '../../utils'\nimport Text from '../Text/Text'\n\nimport chevronSvg from './assets/chevron.svg'\n\n// The app bar height includes its border.\nconst BAR_HEIGHT = 64\n\nclass AppBar extends React.Component {\n static propTypes = {\n children: PropTypes.node,\n endContent: PropTypes.node,\n onTitleClick: PropTypes.func,\n padding: PropTypes.number,\n tabs: PropTypes.element,\n theme: PropTypes.object,\n title: PropTypes.node,\n }\n static defaultProps = {\n onTitleClick: noop,\n padding: 30,\n title: '',\n }\n\n state = {\n tabsHeight: 0,\n }\n _tabsRef = React.createRef()\n\n componentDidMount() {\n this.updateTabsHeight()\n }\n componentDidUpdate(prevProps) {\n if (Boolean(prevProps.tabs) !== Boolean(this.props.tabs)) {\n this.updateTabsHeight()\n }\n }\n updateTabsHeight() {\n const el = this._tabsRef.current\n if (el) {\n this.setState({ tabsHeight: el.clientHeight })\n }\n }\n render() {\n const { tabsHeight } = this.state\n const {\n children,\n endContent,\n onTitleClick,\n padding,\n tabs,\n title,\n theme,\n ...props\n } = this.props\n return (\n <Inside name=\"AppBar\">\n <div\n css={`\n overflow: hidden;\n display: flex;\n flex-direction: column;\n width: 100%;\n min-height: ${BAR_HEIGHT}px;\n background: ${theme.surface};\n ${unselectable()};\n\n /* We are using an “inner border” to allow components like Tabs\n to draw over the border while having overflow:hidden set. */\n padding-bottom: 1px;\n &:after {\n content: '';\n position: absolute;\n left: 0;\n right: 0;\n bottom: 0;\n border-bottom: 1px solid ${theme.border};\n }\n `}\n >\n <div\n css={`\n display: flex;\n align-items: center;\n justify-content: flex-start;\n width: 100%;\n height: ${BAR_HEIGHT - 1}px;\n `}\n {...props}\n >\n {title && (\n <div\n css={`\n display: flex;\n align-items: center;\n height: 100%;\n padding-left: ${padding}px;\n `}\n >\n <AppBarTitle\n chevron={Boolean(children)}\n clickable={Boolean(onTitleClick)}\n onClick={onTitleClick}\n >\n {typeof title === 'string' ? (\n <Text size=\"xxlarge\" deprecationNotice={false}>\n {title}\n </Text>\n ) : (\n title\n )}\n </AppBarTitle>\n </div>\n )}\n {children}\n {endContent && (\n <div\n css={`\n display: flex;\n align-items: center;\n height: 100%;\n margin-left: auto;\n padding-right: ${padding}px;\n `}\n >\n {endContent}\n </div>\n )}\n </div>\n <Transition\n items={tabs}\n from={{ opacity: 0, height: 0 }}\n enter={{ opacity: 1, height: tabsHeight || 'auto' }}\n leave={{ opacity: 0, height: 0 }}\n initial={null}\n config={springs.smooth}\n native\n >\n {tabs =>\n tabs &&\n (styles => (\n <TabsWrapper style={styles}>\n <div ref={this._tabsRef}>{tabs}</div>\n </TabsWrapper>\n ))\n }\n </Transition>\n </div>\n </Inside>\n )\n }\n}\n\nconst AppBarTitle = PublicUrl.hocWrap(styled.h1`\n padding-right: 20px;\n margin-right: calc(20px - 7px);\n white-space: nowrap;\n background-image: ${({ chevron }) =>\n chevron ? css`url(${PublicUrl.styledUrl(chevronSvg)})` : 'none'};\n background-position: 100% 50%;\n background-repeat: no-repeat;\n cursor: ${({ clickable }) => (clickable ? 'pointer' : 'default')};\n`)\n\nconst TabsWrapper = styled(animated.div)`\n position: relative;\n z-index: 1;\n`\n\nexport default function(props) {\n const theme = useTheme()\n return <AppBar {...props} theme={theme} />\n}\n"],"names":["BAR_HEIGHT","AppBar","tabsHeight","React","createRef","updateTabsHeight","prevProps","Boolean","tabs","props","el","_tabsRef","current","setState","clientHeight","state","children","endContent","onTitleClick","padding","title","theme","Inside","surface","unselectable","border","Text","Transition","opacity","height","springs","smooth","styles","Component","PropTypes","node","func","number","element","object","noop","AppBarTitle","PublicUrl","hocWrap","styled","h1","chevron","css","styledUrl","chevronSvg","clickable","TabsWrapper","animated","div","useTheme"],"mappings":"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"} |