demarches-normaliennes/app/javascript/components/shared/maplibre/StyleControl.tsx

import { useId, useRef, useEffect } from 'react';
import { Button, Dialog, DialogTrigger, Popover } from 'react-aria-components';
import { MapIcon } from '@heroicons/react/outline';
import { Slider } from '@reach/slider';
import '@reach/slider/styles.css';

import { LayersMap, NBS } from './styles';

const STYLES = {
  ortho: 'Satellite',
  vector: 'Vectoriel',
  ign: 'Carte IGN'
};

export function StyleSwitch({
  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 configurableLayers = Object.entries(layers).filter(
    ([, { configurable }]) => configurable
  );
  const mapId = useId();
  const buttonRef = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    if (buttonRef.current) {
      buttonRef.current.title = 'Sélectionner les couches cartographiques';
    }
  }, []);

  return (
    <DialogTrigger>
      <Button ref={buttonRef}>
        <MapIcon className="icon-size" />
      </Button>
      <Popover className="react-aria-popover">
        <Dialog className="fr-modal__body">
          <form
            className="fr-modal__content flex m-2"
            onSubmit={(event) => event.preventDefault()}
          >
            <div className="fr-fieldset">
              {Object.entries(STYLES).map(([style, title]) => (
                <div className="fr-fieldset__element" key={style}>
                  <div className="fr-radio-group">
                    <input
                      id={`${mapId}-${style}`}
                      value={style}
                      type="radio"
                      name="map-style"
                      defaultValue={style}
                      checked={styleId == style}
                      onChange={(event) => {
                        setStyle(event.target.value);
                      }}
                    />
                    <label htmlFor={`${mapId}-${style}`} className="fr-label">
                      {title.replace(/\s/g, ' ')}
                    </label>
                  </div>
                </div>
              ))}
            </div>
            {configurableLayers.length ? (
              <div className="fr-fieldset__element">
                {configurableLayers.map(
                  ([layer, { enabled, opacity, name }]) => (
                    <div key={layer} className="fr-fieldset__element">
                      <div className="fr-checkbox-group">
                        <input
                          id={`${mapId}-${layer}`}
                          type="checkbox"
                          checked={enabled}
                          onChange={(event) => {
                            setLayerEnabled(layer, event.target.checked);
                          }}
                        />
                        <label
                          className="fr-label"
                          htmlFor={`${mapId}-${layer}`}
                        >
                          {name}
                        </label>
                      </div>
                      <Slider
                        min={10}
                        max={100}
                        step={5}
                        value={opacity}
                        onChange={(value) => {
                          setLayerOpacity(layer, value);
                        }}
                        className="fr-range fr-range--sm mt-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}%`
                        }
                      />
                    </div>
                  )
                )}
              </div>
            ) : null}
          </form>
        </Dialog>
      </Popover>
    </DialogTrigger>
  );
}