{"size": 1888, "ext": "js", "max_stars_repo_path": "react-app/src/app/fuse-layouts/shared-components/quickPanel/BasemapLayout.js", "max_stars_repo_name": "ttungbmt/HCMGIS_ThuducMuasam", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "react-app/src/app/fuse-layouts/shared-components/quickPanel/BasemapLayout.js", "max_issues_repo_name": "ttungbmt/HCMGIS_ThuducMuasam", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "react-app/src/app/fuse-layouts/shared-components/quickPanel/BasemapLayout.js", "max_forks_repo_name": "ttungbmt/HCMGIS_ThuducMuasam", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 35.6226415094, "max_line_length": 219, "alphanum_fraction": 0.6080508475}
import {memo} from "react";
import Box from "@material-ui/core/Box";
import clsx from "clsx";
import {Layer, MapContainer} from "@redux-leaflet";
import {useDispatch, useSelector} from "react-redux";
import {configSelectors, layersActions, layersSelectors} from "@redux-leaflet/store";
import {makeStyles} from "@material-ui/core/styles";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
    active: {
        border: '3px solid #0F9FE6',
    },
}));

function BasemapLayout({closeBtn}) {
    const classes = useStyles();
    const dispatch = useDispatch()

    const basemaps = useSelector(layersSelectors.selectBasemaps);
    const view = useSelector(configSelectors.selectView);

    const mapOptions = {
        className: 'h-full',
        ...view,
        zoomControl: false,
        attributionControl: false,
        dragging: false,
        scrollWheelZoom: false
    }

    const onActiveLayer = ({id}) => dispatch(layersActions.activeOne({ids: [id], active: true}))


    return (
        <>
            <Box className="flex items-center justify-between mb-10">
                <Typography className="text-base font-semibold">Basemap</Typography>
                {closeBtn}
            </Box>
            {basemaps.map((props, k) => (
                <Box className={clsx('relative h-full cursor-pointer overflow-auto', {[classes.active]: props.active})} key={props.id} mb={1.5} style={{height: 110}} borderRadius={5} onClick={e => onActiveLayer(props)}>
                    <MapContainer {...mapOptions}>
                        <Layer {...props}/>
                    </MapContainer>
                    <Box className="absolute px-6 py-4 font-semibold rounded ml-6 mb-6" zIndex={999} bottom={0} bgcolor="white">{props.title}</Box>
                </Box>
            ))}
        </>
    )
}

export default memo(BasemapLayout);