import React, { useState } from 'react'; import { Popover, RadioGroup } from '@headlessui/react'; import { usePopper } from 'react-popper'; import { MapIcon } from '@heroicons/react/outline'; import { Slider } from '@reach/slider'; import { useId } from '@reach/auto-id'; import '@reach/slider/styles.css'; import { LayersMap, NBS } from './styles'; const STYLES = { ortho: 'Satellite', vector: 'Vectoriel', ign: 'Carte IGN' }; export function StyleControl({ styleId, layers, setStyle, setLayerEnabled, setLayerOpacity }: { styleId: string; setStyle: (style: string) => void; layers: LayersMap; setLayerEnabled: (layer: string, enabled: boolean) => void; setLayerOpacity: (layer: string, opacity: number) => void; }) { const [buttonElement, setButtonElement] = useState(); const [panelElement, setPanelElement] = useState(); const { styles, attributes } = usePopper(buttonElement, panelElement, { placement: 'bottom-end' }); const configurableLayers = Object.entries(layers).filter( ([, { configurable }]) => configurable ); const mapId = useId(); return (
{Object.entries(STYLES).map(([style, title]) => ( {({ checked }) => ( <> {title.replace(/\s/g, ' ')} )} ))} {configurableLayers.length ? (
    {configurableLayers.map(([layer, { enabled, opacity, name }]) => (
  • { setLayerEnabled(layer, event.target.checked); }} />
    { setLayerOpacity(layer, value); }} className="mb-1" title={`Réglage de l’opacité de la couche «${NBS}${name}${NBS}»`} getAriaLabel={() => `Réglage de l’opacité de la couche «${NBS}${name}${NBS}»` } getAriaValueText={(value) => `L’opacité de la couche «${NBS}${name}${NBS}» est à ${value}${NBS}%` } />
  • ))}
) : null}
); }