{"version":3,"file":"static/js/3402.331ca238.chunk.js","mappings":"iKAEO,SAASA,EACZC,EACAC,EACAC,GAEA,IAAAC,GAAwCC,EAAAA,EAAAA,UAASJ,GAAMK,GAAAC,EAAAA,EAAAA,GAAAH,EAAA,GAAhDI,EAAYF,EAAA,GAAEG,EAAeH,EAAA,GAiBpC,OAhBAI,EAAAA,EAAAA,YAAU,WACN,IAAIR,EAAUD,GAAd,CAOA,IAAMU,EAAYC,YAAW,WACzBH,EAAgBR,EACpB,GAAGE,GACH,OAAO,WACHU,aAAaF,EACjB,CARA,CAFIF,EAAgBR,EAWxB,GAAG,CAACA,EAAOE,EAAoBD,IAExB,CAAEM,aAAAA,EAAcM,YAAaZ,EAAUM,GAClD,C,iKClBMO,EAAyB,IAEhB,SAASC,IACpB,IAAAC,GAAoCC,EAAAA,EAAAA,IAAY,yBAAwBC,GAAAZ,EAAAA,EAAAA,GAAAU,EAAA,GAAjEG,EAAUD,EAAA,GAAEE,EAAaF,EAAA,GAExBX,GAAiBR,EAAAA,EAAAA,GACrBoB,GACA,SAAAnB,GAAK,OAAIA,EAAMqB,IAAI,GACnBP,GAHIP,aAMR,OACIe,EAAAA,EAAAA,KAACC,EAAAA,GAAU,CACPC,UAAU,mBACVH,KAAMF,EAAWE,KACjBI,QAAS,WACLL,EAAc,CAAEC,MAAM,GAC1B,EACAK,WAAY,IACZC,iBAAkBR,EAAWS,SAE5BrB,EAAac,OAAQC,EAAAA,EAAAA,KAACO,EAAkB,CAACC,IAAKvB,EAAauB,OAGxE,CAEA,SAASD,EAAkBE,GAA4B,IAAzBD,EAAGC,EAAHD,IACpBE,EAAIC,IACV,OACIC,EAAAA,EAAAA,MAAA,KAAGC,SAAU,QAASC,KAAMN,EAAKO,UAAWL,EAAEM,OAAOV,SAAA,EACjDN,EAAAA,EAAAA,KAAA,OAAKQ,IAAKA,EAAKS,IAAK,QAASF,UAAU,eACvCf,EAAAA,EAAAA,KAACkB,EAAAA,EAAa,CAACC,WAAS,EAACC,WAAWpB,EAAAA,EAAAA,KAACqB,EAAAA,EAAY,IAAIf,SAAC,iBAKlE,CACA,IAAMK,GAAYW,EAAAA,EAAAA,GAAW,CACzBN,OAAQ,CACJO,QAAS,GACTC,QAAS,OACTC,cAAe,SACfC,IAAK,GACLC,eAAgB,OAChB,UAAW,CACPA,eAAgB,U,4BClDxBC,EAAyBC,EAAQ,OAEjCC,EAA0BD,EAAQ,OAKtCE,EAAQ,OAAU,EAElB,IAAIC,EAAQF,EAAwBD,EAAQ,QAIxCI,GAAW,EAFML,EAAuBC,EAAQ,QAElBK,SAAuBF,EAAMG,cAAc,OAAQ,CACnFC,EAAG,8CACD,UAEJL,EAAQ,EAAUE,C","sources":["common/hooks/useDelayedState.ts","components/shared/Panel/ImageDetail/Panel.tsx","../node_modules/@material-ui/icons/GetApp.js"],"sourcesContent":["import { useEffect, useState } from \"react\";\r\n\r\nexport function useDelayedState<T>(\r\n    state: T,\r\n    checkOpen: (state: T) => boolean,\r\n    timeoutMilliSecond: number\r\n): { delayedState: T; delayedOpen: boolean } {\r\n    const [delayedState, setDelayedState] = useState(state);\r\n    useEffect(() => {\r\n        if (checkOpen(state)) {\r\n            // When it opens\r\n            setDelayedState(state);\r\n            return;\r\n        }\r\n\r\n        // When it closes\r\n        const timeoutId = setTimeout(() => {\r\n            setDelayedState(state);\r\n        }, timeoutMilliSecond);\r\n        return () => {\r\n            clearTimeout(timeoutId);\r\n        };\r\n    }, [state, timeoutMilliSecond, checkOpen]);\r\n\r\n    return { delayedState, delayedOpen: checkOpen(delayedState) };\r\n}\r\n","import DownloadIcon from \"@material-ui/icons/GetApp\";\r\nimport { makeStyles } from \"@material-ui/styles\";\r\nimport { useAppState } from \"../../../../common/appState\";\r\nimport { useDelayedState } from \"../../../../common/hooks/useDelayedState\";\r\nimport { PrimaryButton } from \"../../Button/PrimaryButton\";\r\nimport { RightPanel } from \"../../Panel/RightPanel\";\r\n\r\nconst transitionMilliseconds = 1000;\r\n\r\nexport default function ImageDetailPanel() {\r\n    const [panelState, setPanelState] = useAppState(\"imageDetailPanelState\");\r\n\r\n    const { delayedState } = useDelayedState(\r\n        panelState,\r\n        state => state.open,\r\n        transitionMilliseconds\r\n    );\r\n\r\n    return (\r\n        <RightPanel\r\n            panelName=\"ImageDetailPanel\"\r\n            open={panelState.open}\r\n            onClose={() => {\r\n                setPanelState({ open: false });\r\n            }}\r\n            panelWidth={600}\r\n            globalPanelState={panelState}\r\n        >\r\n            {delayedState.open && <ImageDetailContent src={delayedState.src} />}\r\n        </RightPanel>\r\n    );\r\n}\r\n\r\nfunction ImageDetailContent({ src }: { src: string }) {\r\n    const c = useStyles();\r\n    return (\r\n        <a download={\"image\"} href={src} className={c.anchor}>\r\n            <img src={src} alt={\"image\"} className=\"fullWidth\" />\r\n            <PrimaryButton fullWidth startIcon={<DownloadIcon />}>\r\n                Save Photo\r\n            </PrimaryButton>\r\n        </a>\r\n    );\r\n}\r\nconst useStyles = makeStyles({\r\n    anchor: {\r\n        padding: 10,\r\n        display: \"flex\",\r\n        flexDirection: \"column\",\r\n        gap: 10,\r\n        textDecoration: \"none\",\r\n        \"&:hover\": {\r\n            textDecoration: \"none\",\r\n        },\r\n    },\r\n});\r\n","\"use strict\";\n\nvar _interopRequireDefault = require(\"@babel/runtime/helpers/interopRequireDefault\");\n\nvar _interopRequireWildcard = require(\"@babel/runtime/helpers/interopRequireWildcard\");\n\nObject.defineProperty(exports, \"__esModule\", {\n  value: true\n});\nexports.default = void 0;\n\nvar React = _interopRequireWildcard(require(\"react\"));\n\nvar _createSvgIcon = _interopRequireDefault(require(\"./utils/createSvgIcon\"));\n\nvar _default = (0, _createSvgIcon.default)( /*#__PURE__*/React.createElement(\"path\", {\n  d: \"M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z\"\n}), 'GetApp');\n\nexports.default = _default;"],"names":["useDelayedState","state","checkOpen","timeoutMilliSecond","_useState","useState","_useState2","_slicedToArray","delayedState","setDelayedState","useEffect","timeoutId","setTimeout","clearTimeout","delayedOpen","transitionMilliseconds","ImageDetailPanel","_useAppState","useAppState","_useAppState2","panelState","setPanelState","open","_jsx","RightPanel","panelName","onClose","panelWidth","globalPanelState","children","ImageDetailContent","src","_ref","c","useStyles","_jsxs","download","href","className","anchor","alt","PrimaryButton","fullWidth","startIcon","DownloadIcon","makeStyles","padding","display","flexDirection","gap","textDecoration","_interopRequireDefault","require","_interopRequireWildcard","exports","React","_default","default","createElement","d"],"sourceRoot":""}