| 1 | {"version":3,"file":"TabsFullWidth.js","sources":["../src/components/Tabs/TabsFullWidth.js"],"sourcesContent":["import React, { useCallback, useRef, useState } from 'react'\nimport { Transition, animated } from 'react-spring'\nimport { useInside } from 'use-inside'\nimport { GU, textStyle, springs } from '../../style'\nimport { useFocusLeave } from '../../hooks'\nimport { IconDown } from '../../icons'\nimport { useTheme } from '../../theme'\nimport { KEY_ESC } from '../../utils'\nimport ButtonBase from '../ButtonBase/ButtonBase'\n\n// TabsFullWidth is an internal component\n/* eslint-disable react/prop-types */\n\nfunction TabsFullWidth({ items, selected, onChange }) {\n const theme = useTheme()\n const buttonRef = useRef(null)\n const [insideSidePanel] = useInside('SidePanel')\n const [opened, setOpened] = useState(false)\n\n const selectedItem = items[selected]\n const dropdownDisabled = items.length === 1\n\n const close = useCallback(() => setOpened(false), [])\n\n const focusButton = useCallback(() => {\n if (buttonRef.current) {\n buttonRef.current.focus()\n }\n }, [])\n\n const toggle = useCallback(() => {\n setOpened(opened => !opened)\n }, [])\n\n const change = useCallback(\n index => {\n close()\n focusButton()\n if (index !== selected) {\n onChange(index)\n }\n },\n [selected, onChange, close, focusButton]\n )\n\n const { handleFocusLeave, ref } = useFocusLeave(close)\n\n // close on escape\n const handleMenuKeyDown = useCallback(\n event => {\n if (event.keyCode === KEY_ESC) {\n close()\n focusButton()\n }\n },\n [close, focusButton]\n )\n\n return (\n <div\n ref={ref}\n onBlur={handleFocusLeave}\n css={`\n padding-bottom: ${2 * GU}px;\n `}\n >\n <div\n css={`\n position: relative;\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: ${8 * GU}px;\n `}\n >\n <ButtonBase\n ref={buttonRef}\n disabled={dropdownDisabled}\n css={`\n display: flex;\n align-items: center;\n justify-content: space-between;\n width: 100%;\n height: 100%;\n background: ${theme.surface};\n border-style: solid;\n border-color: ${theme.border};\n border-top-width: ${insideSidePanel ? '0' : '1px'};\n border-bottom-width: 1px;\n border-radius: 0;\n ${textStyle('body2')};\n &:active {\n ${dropdownDisabled ? '' : `background: ${theme.surfacePressed};`}\n }\n `}\n onClick={toggle}\n >\n <div\n css={`\n padding-left: ${2 * GU}px;\n `}\n >\n {selectedItem}\n </div>\n <div\n css={`\n display: flex;\n align-items: center;\n justify-content: center;\n width: ${7 * GU}px;\n height: 100%;\n color: ${theme.surfaceIcon};\n `}\n >\n <IconDown\n css={`\n transition: transform 150ms ease-in-out;\n transform: rotate3d(0, 0, 1, ${opened ? 180 : 0}deg);\n color: ${dropdownDisabled ? theme.disabled : theme.surfaceIcon};\n `}\n />\n </div>\n </ButtonBase>\n <Transition\n items={opened}\n config={springs.swift}\n from={{ y: -1, opacity: 0 }}\n enter={{ y: 0, opacity: 1 }}\n leave={{ y: -1, opacity: 0 }}\n native\n >\n {opened =>\n opened &&\n (({ opacity, y }) => (\n <animated.div\n css={`\n position: absolute;\n z-index: 9; // TODO: use <Root>\n top: ${8 * GU}px;\n left: 0;\n right: 0;\n border-bottom: 1px solid ${theme.border};\n box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.05);\n background: ${theme.surface};\n `}\n style={{\n opacity: opacity,\n transform: y.interpolate(\n v => `translate3d(0, ${v * 4}px, 0)`\n ),\n }}\n >\n <Menu\n items={items}\n onChange={change}\n onKeyDown={handleMenuKeyDown}\n />\n </animated.div>\n ))\n }\n </Transition>\n </div>\n </div>\n )\n}\n\nfunction Menu({ items, onChange, ...props }) {\n const handleRef = useCallback(element => {\n if (element) {\n element.focus()\n }\n }, [])\n\n return (\n <div\n ref={handleRef}\n tabIndex=\"0\"\n {...props}\n css={`\n display: flex;\n flex-direction: column;\n outline: 0;\n `}\n >\n {items.map((item, index) => (\n <MenuItem key={index} item={item} index={index} onChange={onChange} />\n ))}\n </div>\n )\n}\n\nfunction MenuItem({ item, index, onChange }) {\n const theme = useTheme()\n\n const change = useCallback(() => {\n onChange(index)\n }, [onChange, index])\n\n return (\n <ButtonBase\n onClick={change}\n css={`\n height: ${8 * GU}px;\n padding-left: ${2 * GU}px;\n text-align: left;\n ${textStyle('body2')};\n &:active {\n background: ${theme.surfacePressed};\n }\n `}\n >\n {item}\n </ButtonBase>\n )\n}\n\nexport { TabsFullWidth }\n"],"names":["TabsFullWidth","items","selected","onChange","theme","useTheme","buttonRef","useRef","useInside","insideSidePanel","useState","opened","setOpened","selectedItem","dropdownDisabled","length","close","useCallback","focusButton","current","focus","toggle","change","index","useFocusLeave","handleFocusLeave","ref","handleMenuKeyDown","event","keyCode","KEY_ESC","React","GU","surface","border","textStyle","surfacePressed","surfaceIcon","disabled","Transition","springs","swift","y","opacity","transform","interpolate","v","Menu","props","handleRef","element","map","item","MenuItem"],"mappings":"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"} |