feat(select): retour review

DNUM-SocialGouv · Jul 10, 2024 · e5a6bd4 · e5a6bd4
1 parent 8af996f
commit e5a6bd4
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss b/src/client/components/ui/Meilisearch/MeilisearchInput/MeilisearchInput.module.scss
@@ -1,6 +1,6 @@
-@use "../../../../../styles/utilities-deprecated";
-@use "../../../../../styles/utilities";
-@use "../../../../../styles/components/form/variables";
+@use "@styles/utilities-deprecated";
+@use "@styles/utilities";
+@use "@styles/components/form/variables";
 
 .label {
   @extend %label-champ;

diff --git a/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx b/src/client/components/ui/Meilisearch/MeilisearchSelectMultiple/MeilisearchSelectMultiple.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import { useRefinementList, UseRefinementListProps } from 'react-instantsearch';
 
 import { getCapitalizedItems } from '~/client/components/ui/Meilisearch/getCapitalizedItems';
@@ -13,23 +13,25 @@ export function MeilisearchSelectMultiple(props: UseRefinementListProps & Meilis
 	const { label, className } = props;
 
 	// TODO (BRUJ 08/07/2024): A supprimer lors du passage des options en composition
-	const optionsList: Array<OptionSelect> = items.map((item) => ({
-		libellé: getCapitalizedItems(item.label),
-		valeur: item.value,
-	}));
+	const optionsList: Array<OptionSelect> = useMemo(() => {
+		return items.map((item) => ({
+			libellé: getCapitalizedItems(item.label),
+			valeur: item.value,
+		}));
+	}, [items]);
 
 	const valuesSelected = useMemo(() => {
 		return items.filter((item) => item.isRefined)
 			.map((item) => item.value);
 	}, [items]);
 
-
-	function onOptionSelected(option: HTMLElement) {
-		const value = option.getAttribute('data-value') ?? '';
-		value && refine(value);
-	}
+	const onOptionSelected = useCallback((option: HTMLElement) => {
+		const value = option.getAttribute('data-value');
+		if (value) refine(value);
+	}, [refine]);
 
 	return (
-		<Select className={className} label={label} optionList={optionsList} multiple onChange={onOptionSelected} value={valuesSelected}/>
+		<Select className={className} label={label} optionList={optionsList} multiple onChange={onOptionSelected}
+			value={valuesSelected}/>
 	);
 }