| 1 | {"version":3,"file":"Details.js","sources":["../src/components/Details/Details.js"],"sourcesContent":["import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport { Spring, animated } from 'react-spring'\nimport { useInside } from 'use-inside'\nimport { GU, springs, textStyle } from '../../style'\nimport { useTheme } from '../../theme'\nimport { IconDown } from '../../icons'\nimport ButtonBase from '../ButtonBase/ButtonBase'\n\n// Interpolate the elevation of the toggle from which the drawer slides down.\n// In / out example: [0, 0.25, 0.5, 0.75, 1] => [0, 0.5, 1, 0.5, 0]\nfunction interpolateToggleElevation(value, fn) {\n return value.interpolate(v => fn(1 - Math.abs(v * 2 - 1)))\n}\n\nfunction Details({ children, label, onToggle, opened: openedProp, ...props }) {\n const theme = useTheme()\n const [insideBox] = useInside('Box')\n const [insideSidePanel] = useInside('SidePanel')\n\n const contentRef = useRef(null)\n const contentHeight = useRef(0)\n\n // Details supports two modes: managed (internal state),\n // or controlled (external state).\n const [openedManaged, setOpenedManaged] = useState(false)\n const opened = openedProp === undefined ? openedManaged : openedProp\n\n const updateHeight = useCallback(() => {\n if (contentRef.current) {\n contentHeight.current = contentRef.current.clientHeight\n }\n }, [])\n\n const handleContentRef = useCallback(\n element => {\n contentRef.current = element\n updateHeight()\n },\n [updateHeight]\n )\n\n const handleToggle = useCallback(() => {\n const newOpened = !opened\n\n // Managed state\n if (openedProp === undefined) {\n setOpenedManaged(newOpened)\n }\n\n // Useful to notify even in managed mode\n if (onToggle) {\n onToggle(newOpened)\n }\n }, [onToggle, opened, openedProp])\n\n // Animate after the initial render\n const animate = useRef(false)\n useEffect(() => {\n animate.current = true\n }, [])\n\n // Use height: 'auto' when opened\n const [forceHeight, setForceHeight] = useState(false)\n\n const handleStart = useCallback(() => setForceHeight(true), [])\n const handleRest = useCallback(() => {\n // Note: we need to use the opened from the previous\n // render cycle here, which is why we don’t use a callback.\n setForceHeight(!opened)\n }, [opened])\n\n // Update the height\n useEffect(updateHeight, [opened, updateHeight])\n\n const spacingCss = useMemo(() => {\n if (insideSidePanel) {\n return {\n section: `\n margin: ${2 * GU}px ${-3 * GU}px 0;\n padding-bottom: ${3 * GU}px;\n `,\n content: `\n padding: ${2 * GU}px ${3 * GU}px 0;\n `,\n }\n }\n if (insideBox) {\n return {\n section: `\n margin: 0 ${-3 * GU}px;\n `,\n content: `\n padding: ${1 * GU}px ${3 * GU}px 0;\n `,\n }\n }\n return {\n section: `\n margin: 0;\n padding-bottom: ${3 * GU}px;\n `,\n content: `\n padding: 0;\n `,\n }\n }, [insideSidePanel, insideBox])\n\n return (\n <Spring\n config={springs.smooth}\n from={{ openProgress: 0 }}\n to={{ openProgress: Number(opened) }}\n immediate={!animate}\n onRest={handleRest}\n onStart={handleStart}\n native\n >\n {({ openProgress }) => (\n <section css={spacingCss.section} {...props}>\n <ButtonBase\n onClick={handleToggle}\n css={`\n position: relative;\n width: 100%;\n &:active {\n background: ${theme.surfacePressed};\n }\n `}\n >\n <div\n css={`\n position: absolute;\n left: ${3 * GU}px;\n right: ${3 * GU}px;\n bottom: 0;\n `}\n >\n <animated.div\n style={{\n transform: interpolateToggleElevation(\n openProgress,\n v => `scale3d(${v}, 1, 1)`\n ),\n opacity: interpolateToggleElevation(openProgress, v => v),\n }}\n >\n <div\n css={`\n height: 1px;\n box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);\n `}\n />\n </animated.div>\n </div>\n\n <h1\n css={`\n display: flex;\n justify-content: flex-start;\n align-items: center;\n height: ${5 * GU}px;\n margin-left: ${3 * GU}px;\n color: ${theme.surfaceContentSecondary};\n ${textStyle('label2')}\n font-weight: 400;\n `}\n {...props}\n >\n <div\n css={`\n margin-top: 2px;\n `}\n >\n {label}\n </div>\n <div>\n <animated.div\n style={{\n marginLeft: `${1 * GU}px`,\n transform: openProgress.interpolate(\n v => `rotate(${(1 - v) * 180}deg)`\n ),\n transformOrigin: '50% calc(50% - 0.5px)',\n }}\n >\n <div\n css={`\n display: flex;\n align-items: center;\n justify-content: center;\n `}\n >\n <IconDown size=\"tiny\" />\n </div>\n </animated.div>\n </div>\n </h1>\n </ButtonBase>\n <div css=\"overflow: hidden\">\n <animated.div\n css={`\n display: flex;\n flex-direction: column;\n justify-content: flex-end;\n `}\n style={{\n opacity: openProgress,\n height: forceHeight\n ? openProgress.interpolate(\n v => `${v * contentHeight.current}px`\n )\n : 'auto',\n }}\n >\n <div ref={handleContentRef} css={spacingCss.content}>\n <div>{children}</div>\n </div>\n </animated.div>\n </div>\n </section>\n )}\n </Spring>\n )\n}\n\nDetails.propTypes = {\n children: PropTypes.node.isRequired,\n label: PropTypes.string.isRequired,\n onToggle: PropTypes.func,\n opened: PropTypes.bool,\n}\n\nexport default Details\n"],"names":["interpolateToggleElevation","value","fn","interpolate","v","Math","abs","Details","children","label","onToggle","openedProp","opened","props","theme","useTheme","useInside","insideBox","insideSidePanel","contentRef","useRef","contentHeight","useState","openedManaged","setOpenedManaged","undefined","updateHeight","useCallback","current","clientHeight","handleContentRef","element","handleToggle","newOpened","animate","useEffect","forceHeight","setForceHeight","handleStart","handleRest","spacingCss","useMemo","section","GU","content","React","Spring","springs","smooth","openProgress","Number","surfacePressed","animated","transform","opacity","surfaceContentSecondary","textStyle","marginLeft","transformOrigin","IconDown","height","propTypes","PropTypes","node","isRequired","string","func","bool"],"mappings":"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"} |