{"version":3,"sources":["components/LeftPanel/LeftPanel.js"],"names":["UnitsTree","React","lazy","Search","LeftPanel","dispatch","useDispatch","t","useTranslation","leftDrawerOpen","useSelector","getLeftDrawerOpen","selectedItem","getSelectedTreeItem","drawerWidth","setDrawerWidth","useState","open","setOpen","disabledClose","setDisabledClose","territorialUnits","setTerritorialUnits","searchProps","setSearchProps","selectedSearchItem","expanded","useEffect","drawerRef","useRef","resizing","window","innerWidth","addEventListener","removeEventListener","classes","makeStyles","theme","drawerBackdrop","position","width","height","zIndex","background","palette","main","breakpoints","down","marginTop","navbar","display","alignItems","justifyContent","marginRight","navbarClosed","btnNav","minWidth","minHeight","padding","color","borderRadius","backgroundColor","primary","drawerPaper","maxWidth","overflowY","visibility","transform","border","drawerPaperClose","concat","wrapper","spacing","divider","infoWrapper","marginLeft","infoHeader","shape","boxedWrapper","listIconItem","alignSelf","justifySelf","useStyles","_jsx","children","_jsxs","Fragment","Drawer","ref","anchor","variant","root","drawerRoot","paper","clsx","className","Tooltip","title","arrow","placement","IconButton","size","onClick","event","type","key","setLeftDrawerOpen","toggleDrawer","disabled","Icon","icon","length","onSelectUnit","props","handleOnSelectUnit","Divider","onGetTerritorialUnits","_ref","handleOnGetTerritorialUnits"],"mappings":"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","file":"static/js/84.4c305aca.chunk.js","sourcesContent":["import React, { useState, useEffect, useRef } from \"react\";\r\nimport clsx from \"clsx\";\r\nimport { useTranslation } from \"react-i18next\";\r\n\r\n/** Material-UI */\r\nimport { makeStyles, Divider, Drawer, IconButton, Tooltip } from \"@material-ui/core\";\r\n\r\n/** Icons */\r\nimport { Icon } from \"@iconify/react\";\r\n\r\n/** Redux */\r\nimport { useSelector, useDispatch } from \"react-redux\";\r\nimport { getLeftDrawerOpen, setLeftDrawerOpen } from \"../../_store/APP\";\r\nimport { getSelectedTreeItem } from \"../../_store/TREE\";\r\n\r\n/** UI */\r\n// eslint-disable-next-line\r\nconst UnitsSearch = React.lazy(() => import(\"./UnitsSearch\"));\r\nconst UnitsTree = React.lazy(() => import(\"./UnitsTree\"));\r\nconst Search = React.lazy(() => import(\"../Search/Search\"));\r\n\r\nconst LeftPanel = () => {\r\n    const dispatch = useDispatch();\r\n    const { t } = useTranslation();\r\n\r\n    /** Redux selectors */\r\n    const leftDrawerOpen = useSelector(getLeftDrawerOpen);\r\n    const selectedItem = useSelector(getSelectedTreeItem);\r\n    /** /end Redux selectors */\r\n\r\n    /** States */\r\n    const [drawerWidth, setDrawerWidth] = useState(false);\r\n    const [open, setOpen] = useState(leftDrawerOpen);\r\n    const [disabledClose, setDisabledClose] = useState(false);\r\n    const [territorialUnits, setTerritorialUnits] = useState([]);\r\n    const [searchProps, setSearchProps] = useState({\r\n        selectedSearchItem: null,\r\n        expanded: null,\r\n    });\r\n    /** /end States */\r\n\r\n    /** Effects */\r\n    useEffect(() => {\r\n        drawerWidth || setDrawerWidth(600);\r\n    }, [drawerWidth]);\r\n    const drawerRef = useRef(null);\r\n\r\n    useEffect(() => {\r\n        const resizing = () => setDrawerWidth(window.innerWidth > 600 ? 600 : window.innerWidth);\r\n        window.addEventListener(\"resize\", resizing);\r\n        resizing();\r\n        return () => window.removeEventListener(\"resize\", resizing);\r\n    });\r\n\r\n    useEffect(() => {\r\n        setOpen(leftDrawerOpen);\r\n        return () => {\r\n            setSearchProps({ selectedSearchItem: null, expanded: null });\r\n        };\r\n    }, [leftDrawerOpen]);\r\n\r\n    useEffect(() => setDisabledClose(!selectedItem), [selectedItem]);\r\n    /** /end Effects */\r\n\r\n    /** Styles */\r\n    const useStyles = makeStyles((theme) => ({\r\n        drawerBackdrop: {\r\n            position: \"fixed\",\r\n            width: \"100%\", // \"36%\",\r\n            height: \"100%\",\r\n            zIndex: 999,\r\n            background: theme.palette.background.main,\r\n            // background:'rgba(0,0,0,0.25)',\r\n            [theme.breakpoints.down(\"xs\")]: {\r\n                width: \"100%\",\r\n                marginTop: -10,\r\n            },\r\n        },\r\n        navbar: {\r\n            display: \"flex\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"flex-end\",\r\n            marginRight: -50,\r\n            marginTop: 85,\r\n            [theme.breakpoints.down(\"xs\")]: {\r\n                marginRight: 10,\r\n                marginTop: 20,\r\n            },\r\n        },\r\n        navbarClosed: {\r\n            width: \"calc(100% + 50px)\",\r\n        },\r\n        btnNav: {\r\n            minWidth: 42,\r\n            minHeight: 42,\r\n            padding: 0,\r\n            color: \"#fff\",\r\n            borderRadius: \"50%\",\r\n            backgroundColor: theme.palette.primary.main,\r\n            \"&:hover\": {\r\n                backgroundColor: theme.palette.primary.main,\r\n            },\r\n        },\r\n\r\n        drawerPaper: {\r\n            marginTop: 65,\r\n            backgroundColor: \"#F8F9FA\", //\"transparent\",\r\n            width: drawerWidth,\r\n            height: \"calc(100% + 65px)\",\r\n            maxWidth: \"100vw\",\r\n            overflowY: \"visible\",\r\n            visibility: \"visible!important\",\r\n            transform: `translateX(0px)`,\r\n            border: \"none\",\r\n            position: \"fixed\",\r\n            [theme.breakpoints.down(\"xs\")]: {\r\n                marginTop: 60,\r\n            },\r\n        },\r\n        drawerPaperClose: {\r\n            transform: `translateX(-${drawerWidth - 8}px)!important`,\r\n            [theme.breakpoints.down(\"md\")]: {\r\n                position: \"absolute\",\r\n            },\r\n        },\r\n        wrapper: {\r\n            padding: theme.spacing(0, 0, 0.5, 2),\r\n            marginTop: -130,\r\n            [theme.breakpoints.down(\"xs\")]: {\r\n                marginTop: 16,\r\n                padding: 0,\r\n            },\r\n        },\r\n        divider: {\r\n            width: \"calc(100% - 16px)\",\r\n            height: \"auto\",\r\n        },\r\n        infoWrapper: {\r\n            background: \"transparent\",\r\n            marginLeft: 500,\r\n            width: \"40%\",\r\n            border: \"none\",\r\n        },\r\n        infoHeader: {\r\n            display: \"flex\",\r\n            ...theme.shape.boxedWrapper,\r\n            backgroundColor: \"#E5E5E5\",\r\n            marginTop: theme.spacing(3),\r\n            color: \"#132F4D\",\r\n            alignItems: \"center\",\r\n            justifyContent: \"center\",\r\n            padding: 40,\r\n        },\r\n        listIconItem: {\r\n            alignSelf: \"start\",\r\n            justifySelf: \"end\",\r\n            color: \"#000\",\r\n            minWidth: \"auto\",\r\n        },\r\n    }));\r\n    const classes = useStyles();\r\n    /** /end Styles */\r\n\r\n    /** Handlers */\r\n    const toggleDrawer = (open) => (event) => {\r\n        if (event && event.type === \"keydown\" && (event.key === \"Tab\" || event.key === \"Shift\")) {\r\n            return;\r\n        }\r\n        dispatch(setLeftDrawerOpen(open));\r\n    };\r\n\r\n    const handleOnGetTerritorialUnits = ({ territorialUnits }) => setTerritorialUnits(territorialUnits);\r\n\r\n    const handleOnSelectUnit = (props) => setSearchProps(props);\r\n    /** /end Handlers */\r\n\r\n    return (\r\n        <div>\r\n            <React.Fragment>\r\n                <Drawer\r\n                    ref={drawerRef}\r\n                    anchor={\"left\"}\r\n                    open={open}\r\n                    variant={\"permanent\"}\r\n                    classes={{\r\n                        root: classes.drawerRoot,\r\n                        paper: clsx(classes.drawerPaper, open || classes.drawerPaperClose),\r\n                    }}\r\n                >\r\n                    <div className={clsx(classes.navbar, open || classes.navbarClosed)}>\r\n                        <Tooltip\r\n                            title={`${!open ? t(\"Pokaż\") : t(\"Zwiń\")} ${t(\"drzewko wyboru jednostek terytorialnych\")}`}\r\n                            arrow\r\n                            placement=\"right\"\r\n                        >\r\n                            <span>\r\n                                <IconButton\r\n                                    size={\"small\"}\r\n                                    onClick={toggleDrawer(!open)}\r\n                                    className={classes.btnNav}\r\n                                    disabled={disabledClose}\r\n                                    aria-label={\"left-panel\"}\r\n                                >\r\n                                    {!!open ? (\r\n                                        <Icon icon=\"mdi:chevron-left\" width=\"35\" height=\"35\" />\r\n                                    ) : (\r\n                                        <Icon icon=\"mdi:chevron-right\" width=\"35\" height=\"35\" />\r\n                                    )}\r\n                                </IconButton>\r\n                            </span>\r\n                        </Tooltip>\r\n                    </div>\r\n                    <div className={classes.wrapper}>\r\n                        {/* {!!territorialUnits.length && <UnitsSearch territorialUnits={territorialUnits} />} */}\r\n                        {!!territorialUnits.length && <Search onSelectUnit={(props) => handleOnSelectUnit(props)} />}\r\n                        <Divider className={classes.divider} />\r\n\r\n                        {!!open && (\r\n                            <UnitsTree\r\n                                onGetTerritorialUnits={(territorialUnits) =>\r\n                                    handleOnGetTerritorialUnits({ territorialUnits })\r\n                                }\r\n                                searchProps={searchProps}\r\n                            />\r\n                        )}\r\n                    </div>\r\n                </Drawer>\r\n                {!!open && <div className={classes.drawerBackdrop} />}\r\n            </React.Fragment>\r\n        </div>\r\n    );\r\n};\r\n\r\nexport default LeftPanel;\r\n"],"sourceRoot":""}