odaptos_design_system 2.0.72 → 2.0.73

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.72",
+  "version": "2.0.73",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Organisms/MultiSelect/MultiSelect.tsx

@@ -1,6 +1,7 @@
-import React, { useEffect, useState, useCallback, useRef } from 'react';
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-import { TextField, ListSubheader } from '@mui/material';
+import { TextField } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import React, { useEffect, useState } from 'react';
 import {
   Checkbox,
   TextForButton,
@@ -11,7 +12,6 @@ import {
   RemoveCircledIcon,
 } from '../../';
 import styles from './MultiSelect.modules.scss';
-import { styled } from '@mui/material/styles';
 
 interface OptionType {
   label: string;
@@ -114,15 +114,6 @@ const CssTextField = styled(TextField)({
   },
 });
 
-// Fonction utilitaire de debounce
-const debounce = (func: Function, delay: number) => {
-  let timeoutId: NodeJS.Timeout;
-  return (...args: any[]) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => func(...args), delay);
-  };
-};
-
 interface MultiSelectProps {
   label: string;
   placeholder?: string;
@@ -136,7 +127,7 @@ interface MultiSelectProps {
   disabled?: boolean;
   required?: boolean;
   defaultValue: any[];
-  options: OptionType[];
+  options: any[];
   error?: boolean;
   helperText?: string;
   errorText?: string;
@@ -146,17 +137,13 @@ interface MultiSelectProps {
   deleteOption: (value: any) => void;
   limitTags?: number;
   onBlur?: () => void;
-  loadMoreOptions?: () => Promise<OptionType[]>;
-  initialLoadCount?: number;
 }
 
 /**
  * Use this component for multiselection !!
  */
 export const MultiSelect = ({
-  options: initialOptions,
-  loadMoreOptions,
-  initialLoadCount = 50,
+  options,
   label,
   placeholder,
   name,
@@ -180,47 +167,11 @@ export const MultiSelect = ({
   onBlur,
   ...props
 }: MultiSelectProps) => {
-  const [options, setOptions] = useState<OptionType[]>(
-    initialOptions.slice(0, initialLoadCount)
-  );
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(
-    initialOptions.length > initialLoadCount
-  );
   const [value, setValue] = useState(
     defaultValue === undefined ? [] : defaultValue
   );
   const [inputValue, setInputValue] = React.useState('');
 
-  const loadMore = useCallback(async () => {
-    if (loading || !hasMore) return;
-    setLoading(true);
-    if (loadMoreOptions) {
-      const newOptions = await loadMoreOptions();
-      setOptions((prevOptions) => [...prevOptions, ...newOptions]);
-      setHasMore(newOptions.length > 0);
-    } else {
-      const currentLength = options.length;
-      const nextOptions = initialOptions.slice(
-        currentLength,
-        currentLength + initialLoadCount
-      );
-      setOptions((prevOptions) => [...prevOptions, ...nextOptions]);
-      setHasMore(currentLength + nextOptions.length < initialOptions.length);
-    }
-    setLoading(false);
-  }, [
-    loading,
-    hasMore,
-    loadMoreOptions,
-    initialOptions,
-    options.length,
-    initialLoadCount,
-  ]);
-
-  // Création d'une version debounced de loadMore
-  const debouncedLoadMore = useRef(debounce(loadMore, 300)).current;
-
   useEffect(() => {
     setValue(defaultValue === undefined ? [] : defaultValue);
   }, [defaultValue]);
@@ -249,7 +200,9 @@ export const MultiSelect = ({
           setValue(newValue);
           onChange(newValue);
         }}
-        options={options}
+        options={
+          options ? options : [{ label: 'Loading...', value: 0, year: 100 }]
+        }
         multiple={true}
         autoComplete={options.length > 10}
         size="small"
@@ -300,13 +253,6 @@ export const MultiSelect = ({
           );
         }}
         renderOption={(props, option, { selected }) => {
-          if (option.value === 'load-more') {
-            return (
-              <ListSubheader key="load-more" component="div">
-                {loading ? 'Chargement...' : 'Charger plus'}
-              </ListSubheader>
-            );
-          }
           return (
             <li
               {...props}
@@ -343,17 +289,6 @@ export const MultiSelect = ({
           }
           return filtered;
         }}
-        ListboxProps={{
-          onScroll: (event: React.UIEvent<HTMLUListElement>) => {
-            const listboxNode = event.currentTarget;
-            if (
-              listboxNode.scrollTop + listboxNode.clientHeight >=
-              listboxNode.scrollHeight - 50
-            ) {
-              debouncedLoadMore();
-            }
-          },
-        }}
         {...props}
       />
       {errorText && (

package/src/Organisms/SingleSelect/SingleSelect.tsx

@@ -1,7 +1,7 @@
 import Autocomplete, { createFilterOptions } from '@mui/material/Autocomplete';
-import { TextField, ListSubheader } from '@mui/material';
+import { TextField } from '@mui/material';
 import { styled } from '@mui/material/styles';
-import React, { useEffect, useState, useCallback, useRef } from 'react';
+import React, { useEffect, useState } from 'react';
 import {
   Text,
   TextForButton,
@@ -11,15 +11,6 @@ import {
 } from '../../';
 import styles from './SingleSelect.modules.scss';
 
-// Fonction utilitaire de debounce
-const debounce = (func: Function, delay: number) => {
-  let timeoutId: NodeJS.Timeout;
-  return (...args: any[]) => {
-    clearTimeout(timeoutId);
-    timeoutId = setTimeout(() => func(...args), delay);
-  };
-};
-
 interface OptionType {
   label: string;
   value: string;
@@ -131,20 +122,16 @@ interface SingleSelectProps {
   errorText?: string;
   canAddNewOption?: boolean;
   defaultValue: any;
-  options: OptionType[];
+  options: any[];
   onChange: (value: any) => void;
   onBlur?: () => void;
-  loadMoreOptions?: () => Promise<OptionType[]>;
-  initialLoadCount?: number;
 }
 
 /**
  * Use this component for single selection !!
  */
 export const SingleSelect = ({
-  options: initialOptions,
-  loadMoreOptions,
-  initialLoadCount = 50,
+  options,
   label,
   placeholder,
   name,
@@ -169,47 +156,11 @@ export const SingleSelect = ({
     defaultValue === undefined ? null : defaultValue
   );
   const [inputValue, setInputValue] = React.useState('');
-  const [options, setOptions] = useState<OptionType[]>(
-    initialOptions.slice(0, initialLoadCount)
-  );
-  const [loading, setLoading] = useState(false);
-  const [hasMore, setHasMore] = useState(
-    initialOptions.length > initialLoadCount
-  );
 
   useEffect(() => {
     setValue(defaultValue === undefined ? null : defaultValue);
   }, [defaultValue]);
 
-  const loadMore = useCallback(async () => {
-    if (loading || !hasMore) return;
-    setLoading(true);
-    if (loadMoreOptions) {
-      const newOptions = await loadMoreOptions();
-      setOptions((prevOptions) => [...prevOptions, ...newOptions]);
-      setHasMore(newOptions.length > 0);
-    } else {
-      const currentLength = options.length;
-      const nextOptions = initialOptions.slice(
-        currentLength,
-        currentLength + initialLoadCount
-      );
-      setOptions((prevOptions) => [...prevOptions, ...nextOptions]);
-      setHasMore(currentLength + nextOptions.length < initialOptions.length);
-    }
-    setLoading(false);
-  }, [
-    loading,
-    hasMore,
-    loadMoreOptions,
-    initialOptions,
-    options.length,
-    initialLoadCount,
-  ]);
-
-  // Création d'une version debounced de loadMore
-  const debouncedLoadMore = useRef(debounce(loadMore, 300)).current;
-
   return (
     <div
       className={`${className && className}`}
@@ -275,30 +226,12 @@ export const SingleSelect = ({
         }
         className={`${styles.newAutocomplete}`}
         renderOption={(props, option) => {
-          if (option.value === 'load-more') {
-            return (
-              <ListSubheader key="load-more" component="div">
-                {loading ? 'Chargement...' : 'Charger plus'}
-              </ListSubheader>
-            );
-          }
           return (
             <li {...props} key={option.value} id={option.value}>
               <TextForButton text={option.label} size="sm" />
             </li>
           );
         }}
-        ListboxProps={{
-          onScroll: (event: React.UIEvent<HTMLUListElement>) => {
-            const listboxNode = event.currentTarget;
-            if (
-              listboxNode.scrollTop + listboxNode.clientHeight >=
-              listboxNode.scrollHeight - 50
-            ) {
-              debouncedLoadMore();
-            }
-          },
-        }}
         filterOptions={(options, params) => {
           const filtered = filter(options, params);