| 1 | {"version":3,"file":"Layout.js","sources":["../src/components/Layout/Layout.js"],"sourcesContent":["import React, { useContext, useMemo } from 'react'\nimport PropTypes from 'prop-types'\nimport { useViewport } from '../../providers/Viewport/Viewport'\nimport { BREAKPOINTS, GU } from '../../style'\nimport { cssPx } from '../../utils'\n\nfunction getSizes(breakpoints) {\n return Object.entries(breakpoints)\n .filter(([name]) => name !== 'min')\n .sort((a, b) => a[1] - b[1])\n}\n\n// Minimum margin around a layouts\nconst MIN_MARGIN = 3 * GU\n\nfunction getLayoutSize(parentWidth, breakpoints) {\n const sizes = getSizes(breakpoints)\n\n let index = sizes.length\n while (index--) {\n if (parentWidth >= sizes[index][1]) {\n return [\n sizes[index][0],\n sizes[index][1] - (index === 0 ? 0 : MIN_MARGIN * 2),\n ]\n }\n }\n\n return sizes[0]\n}\n\nconst LayoutContext = React.createContext({})\n\nfunction useLayout() {\n const { layoutWidth, layoutName } = useContext(LayoutContext)\n return {\n layoutName,\n layoutWidth,\n\n // deprecated\n name: layoutName,\n width: layoutWidth,\n }\n}\n\nfunction Layout({\n breakpoints,\n children,\n paddingBottom,\n parentWidth,\n ...props\n}) {\n const { width: viewportWidth } = useViewport()\n\n const mergedBreakpoints = useMemo(\n () => ({ ...BREAKPOINTS, ...breakpoints }),\n [breakpoints]\n )\n\n // If the parent width is not passed, use the viewport width.\n const [layoutName, layoutWidth] = useMemo(\n () =>\n getLayoutSize(\n parentWidth === undefined ? viewportWidth : parentWidth,\n mergedBreakpoints\n ),\n [viewportWidth, parentWidth, mergedBreakpoints]\n )\n\n return (\n <LayoutContext.Provider value={{ layoutWidth, layoutName }}>\n <div\n {...props}\n css={`\n width: ${layoutName === 'small' ? 'auto' : `${layoutWidth}px`};\n min-width: ${mergedBreakpoints.min}px;\n margin: 0 auto;\n padding-bottom: ${cssPx(paddingBottom)};\n `}\n >\n {children}\n </div>\n </LayoutContext.Provider>\n )\n}\n\nLayout.propTypes = {\n breakpoints: PropTypes.shape({\n min: PropTypes.number,\n small: PropTypes.number,\n medium: PropTypes.number,\n large: PropTypes.number,\n }),\n children: PropTypes.node,\n paddingBottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n parentWidth: PropTypes.number,\n}\n\nLayout.defaultProps = {\n breakpoints: {},\n paddingBottom: 3 * GU,\n}\n\n// Can be used to build an alternative Layout component\nLayout.__Context = LayoutContext\n\nexport default Layout\nexport { useLayout }\n"],"names":["getSizes","breakpoints","Object","entries","filter","name","sort","a","b","MIN_MARGIN","GU","getLayoutSize","parentWidth","sizes","index","length","LayoutContext","React","createContext","useLayout","useContext","layoutWidth","layoutName","width","Layout","children","paddingBottom","props","useViewport","viewportWidth","mergedBreakpoints","useMemo","BREAKPOINTS","undefined","min","cssPx","propTypes","PropTypes","shape","number","small","medium","large","node","oneOfType","string","defaultProps","__Context"],"mappings":"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"} |