utilise un selectcheckboxes pour sélectionner les energies

betagouv · Oct 16, 2024 · 34b6993 · 34b6993
1 parent f36c6fe
commit 34b6993
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 4 deletions.
diff --git a/src/components/Map/components/ReseauxDeChaleurFilters.tsx b/src/components/Map/components/ReseauxDeChaleurFilters.tsx
@@ -1,6 +1,6 @@
 import { parseAsBoolean, useQueryState } from 'nuqs';
 
-import Checkbox from '@components/form/dsfr/Checkbox';
+import SelectCheckboxes from '@components/form/dsfr/SelectCheckboxes';
 import RangeFilter from '@components/Map/components/RangeFilter';
 import useFCUMap from '@components/Map/MapProvider';
 import { UrlStateAccordion } from '@components/ui/Accordion';
@@ -32,6 +32,7 @@ function ReseauxDeChaleurFilters() {
             }),
             {}
           ),
+          energieMobilisee: [],
           ...mapConfiguration.reseauxDeChaleur.limits,
         },
       })
@@ -41,8 +42,9 @@ function ReseauxDeChaleurFilters() {
 
   return (
     <DeactivatableBox disabled={!mapConfiguration.reseauxDeChaleur.show}>
-      <Checkbox
+      <SelectCheckboxes
         small
+        label="Type d'énergie majoritaire"
         className="fr-mb-1v"
         options={filtresEnergies.reduce(
           (acc, { label, confKey }) => {

diff --git a/src/components/NetworksList/NetworksFilters.tsx b/src/components/NetworksList/NetworksFilters.tsx
@@ -6,6 +6,7 @@ import Select from '@codegouvfr/react-dsfr/SelectNext';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
+import SelectCheckboxes from '@components/form/dsfr/SelectCheckboxes';
 import {
   getLivraisonsAnnuellesFromPercentage,
   getPercentageFromLivraisonsAnnuelles,
@@ -277,7 +278,7 @@ function NetworksFilter({
                     </Box>
                     <Box m="2w">
                       <Text size="sm">Énergie mobilisée</Text>
-                      <Checkbox
+                      <SelectCheckboxes
                         small
                         className="fr-mb-1v"
                         options={energiesFilters.reduce(

diff --git a/src/components/form/dsfr/FieldWrapper.tsx b/src/components/form/dsfr/FieldWrapper.tsx
@@ -6,7 +6,7 @@ import cx from '@utils/cx';
 export type FieldWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
   fieldId?: string;
   className?: string;
-  label: React.ReactNode;
+  label?: React.ReactNode;
   hintText?: React.ReactNode;
   disabled?: boolean;
   state?: 'success' | 'error' | 'default';

diff --git a/src/components/form/dsfr/SelectCheckboxes.tsx b/src/components/form/dsfr/SelectCheckboxes.tsx
@@ -0,0 +1,51 @@
+import styled from 'styled-components';
+
+import { Popover, PopoverContent, PopoverTrigger } from '@components/ui/Popover';
+
+import Checkbox, { type CheckboxProps } from './Checkbox';
+import FieldWrapper, { type FieldWrapperProps } from './FieldWrapper';
+
+type SelectCheckboxesProps = Omit<FieldWrapperProps, 'onSelect' | 'children'> & CheckboxProps;
+
+const StyledCheckbox = styled(Checkbox)`
+  margin-bottom: 0.5rem;
+
+  .fr-fieldset__content .fr-radio-group:first-child,
+  .fr-fieldset__content .fr-checkbox-group:first-child {
+    /* HACK for DSFR weird negative margin */
+    margin-top: 0;
+  }
+`;
+
+const SelectCheckboxes = ({ fieldId, label, hintText, state, stateRelatedMessage, className, ...props }: SelectCheckboxesProps) => {
+  const nbChechedChecboxes = props.options.filter(({ nativeInputProps }: any) => nativeInputProps.checked).length;
+  return (
+    <FieldWrapper
+      fieldId={fieldId}
+      label={label}
+      hintText={hintText}
+      state={state}
+      stateRelatedMessage={stateRelatedMessage}
+      className={className}
+    >
+      <Popover>
+        <PopoverTrigger asChild>
+          <select className="fr-select" id="select-hint" name="select-hint">
+            <option value="" selected disabled hidden>
+              {nbChechedChecboxes === 0
+                ? 'Sélectionner une option'
+                : nbChechedChecboxes === 1
+                ? '1 option sélectionnée'
+                : `${nbChechedChecboxes} options sélectionnées`}
+            </option>
+          </select>
+        </PopoverTrigger>
+        <PopoverContent className="fr-px-2w fr-py-1w">
+          <StyledCheckbox {...props} />
+        </PopoverContent>
+      </Popover>
+    </FieldWrapper>
+  );
+};
+
+export default SelectCheckboxes;