| 1 | {"version":3,"file":"SidePanel.js","sources":["../src/components/SidePanel/SidePanel.js"],"sourcesContent":["import React, {\n useCallback,\n useContext,\n useEffect,\n useRef,\n useState,\n} from 'react'\nimport PropTypes from 'prop-types'\nimport { Transition, animated } from 'react-spring'\nimport { Inside } from 'use-inside'\nimport ButtonIcon from '../Button/ButtonIcon'\nimport { IconClose } from '../../icons'\nimport { useViewport } from '../../providers/Viewport/Viewport'\nimport { GU, springs, textStyle } from '../../style'\nimport { useTheme } from '../../theme'\nimport { unselectable, KEY_ESC, warn } from '../../utils'\nimport RootPortal from '../RootPortal/RootPortal'\n\nconst CONTENT_PADDING = 3 * GU\n\n// The closing position of the panel, on the right side of the viewport.\n// It takes into consideration the shadow of the panel.\nconst CLOSING_POSITION = 5 * GU\n\nconst SidePanelContext = React.createContext(null)\n\nfunction SidePanel({\n blocking,\n children,\n opened,\n onClose,\n onTransitionEnd,\n title,\n}) {\n const theme = useTheme()\n const { below } = useViewport()\n const compact = below('medium')\n\n const close = useCallback(() => {\n if (!blocking) {\n onClose()\n }\n }, [blocking, onClose])\n\n const handleEscape = useCallback(\n event => {\n if (event.keyCode === KEY_ESC && opened) {\n close()\n }\n },\n [opened, close]\n )\n\n const [status, setStatus] = useState(opened ? 'opened' : 'closed')\n const [readyToFocus, setReadyToFocus] = useState(false)\n\n const handleTransitionRest = useCallback(() => {\n onTransitionEnd(opened)\n setStatus(opened ? 'opened' : 'closed')\n }, [opened, onTransitionEnd])\n\n const handleTransitionStart = useCallback(() => {\n setStatus(opened ? 'opening' : 'closing')\n }, [opened])\n\n const handleTransitionFrame = useCallback(\n (item, _, { progress }) => {\n if (progress > 0.5 && !readyToFocus) {\n setReadyToFocus(true)\n } else if (progress < 0.5 && readyToFocus) {\n setReadyToFocus(false)\n }\n },\n [readyToFocus]\n )\n\n const handleTransitionDestroyed = useCallback(() => {\n setReadyToFocus(false)\n }, [])\n\n useEffect(() => {\n document.addEventListener('keydown', handleEscape)\n return () => {\n document.removeEventListener('keydown', handleEscape)\n }\n }, [handleEscape])\n\n return (\n <RootPortal>\n <Inside name=\"SidePanel\">\n <Transition\n items={opened}\n config={{ ...springs.lazy, precision: 0.001 }}\n from={{ progress: 0 }}\n enter={{ progress: Number(opened) }}\n leave={{ progress: 0 }}\n onRest={handleTransitionRest}\n onStart={handleTransitionStart}\n onFrame={handleTransitionFrame}\n onDestroyed={handleTransitionDestroyed}\n unique\n native\n >\n {opened =>\n opened &&\n (({ progress }) => (\n <div\n css={`\n position: absolute;\n z-index: 1;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n pointer-events: ${status !== 'closing' ? 'auto' : 'none'};\n overflow: hidden;\n `}\n >\n <animated.div\n onClick={close}\n style={{\n opacity: progress,\n pointerEvents: status !== 'closing' ? 'auto' : 'none',\n }}\n css={`\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: ${theme.overlay.alpha(0.9)};\n `}\n />\n <Panel\n compact={compact}\n style={{\n transform: progress.interpolate(\n v =>\n `\n translate3d(\n calc(\n ${100 * (1 - v)}% +\n ${CLOSING_POSITION * (1 - v)}px\n ), 0, 0\n )\n `\n ),\n }}\n >\n <header\n css={`\n display: flex;\n flex-direction: column;\n justify-content: center;\n flex-shrink: 0;\n position: relative;\n height: ${8 * GU}px;\n padding-left: ${CONTENT_PADDING}px;\n border-bottom: 1px solid ${theme.border};\n ${unselectable()};\n `}\n >\n <h1\n css={`\n color: ${theme.surfaceContent};\n ${textStyle('body1')};\n `}\n >\n {title}\n </h1>\n {!blocking && (\n <ButtonIcon\n label=\"Close\"\n onClick={close}\n css={`\n position: absolute;\n ${!compact\n ? `\n top: ${2 * GU}px;\n right: ${2 * GU}px;\n `\n : `\n top: 0;\n right: 0;\n height: ${8 * GU}px;\n width: ${8 * GU}px;\n `}\n `}\n >\n <IconClose color={theme.surfaceIcon} />\n </ButtonIcon>\n )}\n </header>\n <div\n css={`\n overflow-y: auto;\n height: 100%;\n display: flex;\n flex-direction: column;\n `}\n >\n <div\n css={`\n min-height: 0;\n flex-grow: 1;\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n padding-right: ${CONTENT_PADDING}px;\n padding-left: ${CONTENT_PADDING}px;\n padding-bottom: ${CONTENT_PADDING}px;\n `}\n >\n <SidePanelContext.Provider\n value={{ status, readyToFocus }}\n >\n {children}\n </SidePanelContext.Provider>\n </div>\n </div>\n </Panel>\n </div>\n ))\n }\n </Transition>\n </Inside>\n </RootPortal>\n )\n}\n\nSidePanel.propTypes = {\n blocking: PropTypes.bool,\n children: PropTypes.node.isRequired,\n opened: PropTypes.bool,\n onClose: PropTypes.func,\n onTransitionEnd: PropTypes.func,\n title: PropTypes.node.isRequired,\n}\n\nSidePanel.defaultProps = {\n opened: true,\n blocking: false,\n onClose: () => {},\n onTransitionEnd: () => {},\n}\n\nconst Panel = React.memo(function Panel({ compact, ...props }) {\n const theme = useTheme()\n return (\n <animated.aside\n css={`\n position: absolute;\n top: 0;\n right: 0;\n display: flex;\n flex-direction: column;\n width: 100%;\n height: 100%;\n background: ${theme.surface};\n box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.1);\n ${!compact ? 'max-width: 450px;' : ''}\n `}\n {...props}\n />\n )\n})\n\nPanel.propTypes = {\n compact: PropTypes.bool,\n}\n\nfunction useSidePanel() {\n const value = useContext(SidePanelContext)\n if (value === null) {\n throw new Error(\n 'useSidePanel() was used outside of the SidePanel render tree, ' +\n 'which has to be declared at an upper level!'\n )\n }\n return value\n}\n\nfunction useSidePanelFocusOnReady(ref) {\n const { readyToFocus } = useSidePanel()\n const fallbackRef = useRef()\n\n const _ref = ref || fallbackRef\n\n useEffect(() => {\n if (readyToFocus && _ref.current) {\n if (_ref.current.focus) {\n _ref.current.focus()\n } else {\n warn(\n 'useSidePanelFocusOnReady(): the focus() method wasn’t available on ' +\n 'the passed ref.'\n )\n }\n }\n }, [readyToFocus, _ref])\n\n return _ref\n}\n\n// Used for spacing in SidePanelSplit and SidePanelSeparator\nSidePanel.HORIZONTAL_PADDING = CONTENT_PADDING\n\nexport { useSidePanel, useSidePanelFocusOnReady }\nexport default SidePanel\n"],"names":["CONTENT_PADDING","GU","CLOSING_POSITION","SidePanelContext","React","createContext","SidePanel","blocking","children","opened","onClose","onTransitionEnd","title","theme","useTheme","useViewport","below","compact","close","useCallback","handleEscape","event","keyCode","KEY_ESC","useState","status","setStatus","readyToFocus","setReadyToFocus","handleTransitionRest","handleTransitionStart","handleTransitionFrame","item","_","progress","handleTransitionDestroyed","useEffect","document","addEventListener","removeEventListener","RootPortal","Inside","Transition","springs","lazy","precision","Number","opacity","pointerEvents","overlay","alpha","transform","interpolate","v","border","unselectable","surfaceContent","textStyle","IconClose","surfaceIcon","propTypes","PropTypes","bool","node","isRequired","func","defaultProps","Panel","memo","props","surface","useSidePanel","value","useContext","Error","useSidePanelFocusOnReady","ref","fallbackRef","useRef","_ref","current","focus","warn","HORIZONTAL_PADDING"],"mappings":"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"} |