| 1 | {"version":3,"file":"TabBarLegacy.js","sources":["../src/components/Tabs/TabBarLegacy.js"],"sourcesContent":["import React from 'react'\nimport PropTypes from 'prop-types'\nimport { useTheme } from '../../theme'\nimport { font, unselectable, noop } from '../../utils'\n\nclass TabBar extends React.Component {\n static propTypes = {\n items: PropTypes.arrayOf(PropTypes.node).isRequired,\n selected: PropTypes.number,\n onChange: PropTypes.func,\n inAppBar: PropTypes.bool,\n }\n static defaultProps = {\n selected: 0,\n onChange: noop,\n }\n\n state = {\n displayFocusRing: false,\n }\n\n _barRef = React.createRef()\n\n componentDidMount() {\n document.addEventListener('keydown', this.handleKeydown)\n }\n componentWillUnmount() {\n document.removeEventListener('keydown', this.handleKeydown)\n }\n\n enableFocusRing() {\n this.setState({ displayFocusRing: true })\n }\n disableFocusRing() {\n this.setState({ displayFocusRing: false })\n }\n selectElement(element) {\n const { onChange } = this.props\n if (!element || !this._barRef.current) {\n return\n }\n const index = [...this._barRef.current.childNodes].indexOf(element)\n if (index === -1) {\n return\n }\n\n onChange(index)\n }\n handleMouseDown = () => {\n this.disableFocusRing()\n }\n handleKeydown = ({ key }) => {\n if (key === 'Enter') {\n this.selectElement(document.activeElement)\n this.enableFocusRing()\n }\n if (key === 'Tab') {\n this.enableFocusRing()\n }\n }\n handleTabMouseDown = ({ currentTarget }) => {\n // We would usually avoid using the DOM when possible, and prefer using a\n // separate component (`Tab`) to keep the `index` in a prop, then pass it\n // using an event prop. But since `this.selectElement()` is needed (so we\n // can pass `document.activeElement` to it for the keyboard), and we have\n // `e.currentTarget` in the event object, we might as well use it for the\n // pointer device too.\n this.selectElement(currentTarget)\n }\n render() {\n const { displayFocusRing } = this.state\n const { items, selected, inAppBar } = this.props\n return (\n <nav onMouseDown={this.handleMouseDown}>\n <Bar ref={this._barRef} border={!inAppBar}>\n {items.map((item, i) => (\n <Tab\n key={i}\n tabIndex=\"0\"\n selected={i === selected}\n focusRing={displayFocusRing}\n onMouseDown={this.handleTabMouseDown}\n >\n <Label selected={i === selected}>{item}</Label>\n {displayFocusRing && <FocusRing />}\n </Tab>\n ))}\n </Bar>\n </nav>\n )\n }\n}\n\n/* eslint-disable react/prop-types */\n\nfunction Bar({ children, border }) {\n const theme = useTheme()\n return (\n <ul\n css={`\n display: flex;\n border-bottom: ${border ? `1px solid ${theme.border}` : '0'};\n `}\n >\n {children}\n </ul>\n )\n}\n\nfunction FocusRing({ children }) {\n const theme = useTheme()\n return (\n <span\n className=\"TabBarLegacy-FocusRing\"\n css={`\n display: none;\n position: absolute;\n top: -5px;\n left: -5px;\n right: -5px;\n bottom: -5px;\n border: 2px solid ${theme.accent};\n border-radius: 2px;\n `}\n >\n {children}\n </span>\n )\n}\n\nfunction Tab({ children, selected }) {\n return (\n <li\n css={`\n position: relative;\n list-style: none;\n padding: 0 30px;\n cursor: pointer;\n ${font({\n weight: selected ? 'bold' : 'normal',\n deprecationNotice: false,\n })};\n ${unselectable()};\n &:focus {\n outline: 0;\n .TabBarLegacy-FocusRing {\n display: block;\n }\n }\n `}\n >\n {children}\n </li>\n )\n}\n\nfunction Label({ children, selected }) {\n const theme = useTheme()\n return (\n <span\n css={`\n display: flex;\n margin-bottom: -1px;\n padding: 5px 0 3px;\n border-bottom: 4px solid ${selected ? theme.accent : 'transparent'};\n `}\n >\n {children}\n </span>\n )\n}\n\nexport default TabBar\n"],"names":["TabBar","displayFocusRing","React","createRef","disableFocusRing","key","selectElement","document","activeElement","enableFocusRing","currentTarget","addEventListener","handleKeydown","removeEventListener","setState","element","onChange","props","_barRef","current","index","_toConsumableArray","childNodes","indexOf","state","items","selected","inAppBar","handleMouseDown","map","item","i","handleTabMouseDown","Component","PropTypes","arrayOf","node","isRequired","number","func","bool","noop","Bar","children","border","theme","useTheme","FocusRing","accent","Tab","font","weight","deprecationNotice","unselectable","Label"],"mappings":"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"} |