@fto-consult/expo-ui 6.25.2 → 6.26.0

package/babel.config.alias.js

@@ -83,7 +83,7 @@ module.exports = (opts)=>{
     const outputPath = path.resolve(HelpScreen,"openLibraries.js");
     r.$nodeModulesPath = r.$enodeModulesPath= nodeModulesPath;
     require("./find-licenses")({
-        paths : [root,r["$expo-ui-root-path",path.resolve(process.cwd())]],
+        paths : [root,r["$expo-ui-root-path"],path.resolve(process.cwd())],
         nodeModulesPath : nodeModulesPath,
         outputPath
     });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.25.2",
+  "version": "6.26.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -92,6 +92,7 @@
     "fs-extra": "^11.1.1",
     "google-libphonenumber": "^3.2.33",
     "htmlparser2-without-node-native": "^3.9.2",
+    "pdfmake": "^0.2.7",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

package/src/components/Datagrid/Accordion/Row.js

@@ -64,7 +64,6 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     let rowIndex = defaultDecimal(index);
     let rowIndexCount = index+1;
     const testID = defaultStr(props.testID,"RN_DatagridAccordionRow"+(rowKey||rowIndex))
-    let _rP = {}
     const hasAvatar = React.isValidElement(avatarContent);
     const handleRowToggle = (event)=>{
         if(selectable === false) return;
@@ -75,8 +74,8 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
     }
     const wrapStyle = React.useMemo(()=>{
         return getRowStyle({row:item,index,selected,numColumns,isAccordion:true,rowIndex:index});
-    },[selected])
-    let viewWrapperStyle = {};
+    },[selected,numColumns]);
+    const viewWrapperStyle = [];
     if(selected) {
         const handleAvatarRowToggle = (event)=>{
             React.stopEventPropagation(event);
@@ -93,7 +92,8 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
             title = {sTtitle}
         ></Avatar> : null;
         if(!hasAvatar){
-            viewWrapperStyle = [styles.hasNotAvatar,{borderLeftColor:theme.colors.primaryOnSurface}]
+            viewWrapperStyle.push(styles.hasNotAvatar);
+            viewWrapperStyle.push({borderLeftColor:theme.colors.primaryOnSurface})
         }
     }
 
@@ -105,26 +105,24 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
                 icon = {"information-outline"}
             ></Avatar>
         }
-    } else if(selectable === false){
-        _rP.disabled = true;
     } 
     right = typeof right === 'function'? right ({color:theme.colors.primaryOnSurface,selectable:true,style:[rStyles.lineHeight,styles.right]}) : right;
     const swipeableRef = React.useRef(null);
     return  <Pressable
-                {..._rP}    
+                disabled = {selectable===false?true : false}
                 {...rowProps}
                 testID={testID}
                 children = {null}
                 onPress = {toggleExpander}
                 onLongPress={handleRowToggle}
                 style = {[
-                    _rP.style,rowProps.style,
                     styles.container,
-                    numColumns > 1 && {width:'99%'},
                     styles.bordered,
-                    wrapperStyle,
                     wrapStyle,
-                    style,
+                    rowProps.style,
+                    numColumns > 1 && styles.multiColumns,
+                    selected && styles.selected,
+                    //style,
                 ]}
                 ref = {React.useMergeRefs(ref,innerRef)}
         >
@@ -221,11 +219,17 @@ const styles = StyleSheet.create({
     bordered : {
         //borderColor: "#ced4da",
         //borderWidth : 1,
+        //paddingHorizontal:10,
+    },
+    multiColumns : {
+        paddingHorizontal : 5,
+        width : "98%"
     },
     renderedContent : {
         flexDirection : 'row',
         alignItems : 'center',
-        justifyContent : 'center'
+        justifyContent : 'center',
+        paddingVertical : 10,
     },
     right : {
         marginHorizontal : 0,
@@ -244,25 +248,25 @@ const styles = StyleSheet.create({
         alignSelf : 'flex-start',
     },
     container : {
-        marginVertical : 10,
-        paddingVertical : 5,
-        paddingHorizontal : isMobileNative()? 10 : 0,
+        paddingVertical : 0,
+        paddingHorizontal : 0,
         marginHorizontal : 5,
         flexWrap : 'nowrap',
         justifyContent : 'center',
         width : '100%',
     },
-    containerSelected : {
-        paddingLeft : 2,
-    },
     avatarContent : {
         marginRight : 5,
     },
     hasNotAvatar : {
         borderLeftWidth : 5,
-        paddingLeft : 2,
+        paddingLeft : 0,
         height : "100%"
-    }
+    },
+    selected : {
+        paddingHorizontal : 0,
+        paddingVertical : 0,
+    },
 });
 
 DatagridAccordionRow.displayName = 'DatagridAccordionRow';

package/src/components/Datagrid/Accordion/index.js

@@ -23,7 +23,7 @@ import RenderType from "../RenderType";
 import { flatMode} from "$ecomponents/TextField";
 import List from "$ecomponents/Table/List";
 import theme,{Colors} from "$theme";
-import {getRowStyle,styles as rStyles} from "../utils";
+import {styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";
 import {defaultObj,isOb,isNonNullString} from "$cutils";
 import PropTypes from "prop-types";
@@ -94,13 +94,10 @@ const DatagridFactory = (Factory)=>{
             const formatValue = this.formatValue.bind(this);
             return {...this.getActionsArgs(),valueFormatter:formatValue,formatValue,abreviateValues:this.state.abreviateValues,row:item,items:this.state.data,item,rowData:item,index,rowIndex:index,rowCounterIndex:rowIndexCount,rowIndexCount};
         }
-        getRenderingItemProps ({item,rowKey,numColumns,index}){
+        getRenderingItemProps ({item,rowKey,index}){
             this.renderingItemsProps = isObj(this.renderingItemsProps)? this.renderingItemsProps : {};
-            const wrapperStyle = getRowStyle({row:item,index,numColumns,isAccordion:true,rowIndex:index});
             if(this.renderingItemsProps[rowKey]){
-                const it = this.renderingItemsProps[rowKey];
-                it.wrapperStyle = wrapperStyle;
-                return it;
+                return this.renderingItemsProps[rowKey];
             }
             const callArgs = this.getItemCallArgs({item,index});
             const accordion = this.props.accordion;
@@ -169,7 +166,7 @@ const DatagridFactory = (Factory)=>{
             }
             this.renderingItemsProps[rowKey] = {
                 testID,
-                wrapperStyle,title,right,rightProps,description,avatarContent,rowProps,avatarProps,
+                title,right,rightProps,description,avatarContent,rowProps,avatarProps,
                 bottomSheetTitlePrefix : defaultStr(renderedContent?.bottomSheetTitlePrefix,accordionProps.bottomSheetTitlePrefix,accordion?.bottomSheetTitlePrefix)
             }
             return this.renderingItemsProps[rowKey];
@@ -200,8 +197,8 @@ const DatagridFactory = (Factory)=>{
                 selectable = {this.props.selectable}
                 {...defaultObj(this.props.accordionProps)}
                 accordion = {this.props.accordion}
+                {...this.getRenderingItemProps({item,index,rowKey})}
                 numColumns = {numColumns}
-                {...this.getRenderingItemProps({item,numColumns,index,rowKey})}
                 key = {index}
                 ref = {(el)=>{
                     if(isObj(this.renderingItemsProps) && isObj(this.renderingItemsProps[rowKey]) ){

package/src/components/Datagrid/Common/Common.js

@@ -1706,6 +1706,15 @@ export default class CommonDatagridComponent extends AppComponent {
                 label : "Exporter les entêtes des groupes",
                 defaultValue :1,
             },
+            fields : {
+                text : "Champs à exporter",
+                items : this.state.columns,
+                type : "select",
+                itemValue : ({item,index})=>index,
+                filter : ({item,index})=> isObj(item) && item.exportable !== false,
+                renderItem : ({item,index})=> item?.label || item?.text || index,
+                multiple : true,
+            },
             /*abreviateValues : {
                 text : "Abréger les valeurs numériques",
                 type : "switch",
@@ -1718,147 +1727,164 @@ export default class CommonDatagridComponent extends AppComponent {
             },
         }
    }
-   /***@see : https://docs.sheetjs.com/docs/api/utilities */
-   exportToExcel(){
-        const skey = "export-to-excel";
+   SetExportOptions({excel}){
+        const skey = excel ? "export-to-excel":"export-to-other";
         const isOnlytotal = this.state.displayOnlySectionListHeaders;
-        let displayOnlyHeader = this.canDisplayOnlySectionListHeaders() && isOnlytotal;
+        const displayOnlyHeader = this.canDisplayOnlySectionListHeaders() && isOnlytotal;
         const sData = defaultObj(this.getSessionData(skey));
-        return DialogProvider.open({
-            title : "Paramètre d'export excel",
-            data : sData,
-            fields : {
-                ...this.getExportableFields(),
-                sheetName : {
-                    label : 'Nom de la feuille excel',
-                    format : "hashtag",
-                    required : true,
+        return new Promise((resolve,reject)=>{
+            return DialogProvider.open({
+                title : `Paramètre d'export ${excel?"excel":"pdf"}`,
+                data : sData,
+                fields : {
+                    ...this.getExportableFields(),
+                    sheetName : excel && {
+                        label : 'Nom de la feuille excel',
+                        format : "hashtag",
+                        required : true,
+                    },
+                    exportOnlyTotal : displayOnlyHeader && {
+                        label : "Exporter uniquemnt les totaux",
+                        defaultValue : 0,
+                        type : "switch",
+                    },
+                    aggregatedValues : displayOnlyHeader ? {
+                        label : "Exporter uniquement les totaux aggrégées",
+                        defaultValue : 0,
+                        type : "switch",
+                    }  : null,
                 },
-                exportOnlyTotal : displayOnlyHeader && {
-                    label : "Exporter uniquemnt les totaux",
-                    defaultValue : 0,
-                    type : "switch",
+                actions : [{text:'Exporter',icon : "check"}],
+                onSuccess: (args)=>{
+                    args.sessionKeyName = skey;   
+                    args.displayOnlyHeader = displayOnlyHeader;
+                    args.isOnlytotal = isOnlytotal;
+                    args.sessionData = sData;
+                    DialogProvider.close();
+                    resolve(args);
+                    return args;
                 },
-                aggregatedValues : displayOnlyHeader ? {
-                    label : "Exporter uniquement les totaux aggrégées",
-                    defaultValue : 0,
-                    type : "switch",
-                }  : null,
-            },
-            actions : [{text:'Exporter',icon : "check"}],
-            onSuccess:({data:config})=>{
-                this.setSessionData(skey,config);
-                config.fileName = sprintf(config.fileName);
-                config.sheetName = sanitizeSheetName(config.sheetName);
-                const data = [];
-                let totalColumns = 0;
-                const cols = {};
-                DialogProvider.close();
-                Preloader.open("préparation des données...");
-                const footers = this.getFooters();
-                if(displayOnlyHeader && config.aggregatedValues){
-                    const fValues = this.getFooterValues();
-                    const headers = ["Fonction d'agrégation"];
-                    const aggregatorFunctions = this.aggregatorFunctions;
-                    Object.map(footers,(f,i)=>{
-                        const col = this.state.columns[i];
-                        if(!col || col.visible === false) return;
-                        headers.push(defaultStr(col.label,col.text));
-                        cols[i] = col;
+                onCancel : reject,
+            })
+        })
+   }
+   /***@see : https://docs.sheetjs.com/docs/api/utilities */
+   exportToExcel(){
+        return this.SetExportOptions({excel:true}).then(({sessionKeyName,isOnlytotal,displayOnlyHeader,data:config})=>{
+            this.setSessionData(sessionKeyName,config);
+            config.fileName = sprintf(config.fileName);
+            config.sheetName = sanitizeSheetName(config.sheetName);
+            const data = [];
+            let totalColumns = 0;
+            const cols = {};
+            Preloader.open("préparation des données...");
+            const footers = this.getFooters();
+            const hasFields = !!config.fields.length;
+            const fields = config.fields;
+            if(displayOnlyHeader && config.aggregatedValues){
+                const fValues = this.getFooterValues();
+                const headers = ["Fonction d'agrégation"];
+                const aggregatorFunctions = this.aggregatorFunctions;
+                Object.map(footers,(f,i)=>{
+                    if(hasFields && !fields.includes(i)) return;
+                    const col = this.state.columns[i];
+                    if(!col || col.visible === false) return;
+                    headers.push(defaultStr(col.label,col.text));
+                    cols[i] = col;
+                });
+                data.push(headers);
+                Object.map(aggregatorFunctions,(ag,i)=>{
+                    const d = [defaultStr(ag.label,ag.text,i)];
+                    Object.map(fValues,(footer,field)=>{
+                        if(!cols[field]) return;
+                        d.push(defaultNumber(footer[i]))
                     });
-                    data.push(headers);
-                    Object.map(aggregatorFunctions,(ag,i)=>{
-                        const d = [defaultStr(ag.label,ag.text,i)];
-                        Object.map(fValues,(footer,field)=>{
-                            if(!cols[field]) return;
-                            d.push(defaultNumber(footer[i]))
-                        });
-                        data.push(d);
-                    })
-                } else {
-                    const headers = [];
-                    const hFooters = defaultObj(this.sectionListHeaderFooters);
-                    const agFunc = this.state.aggregatorFunction;
-                    const canExportOnlyTotal = isOnlytotal || (config.exportOnlyTotal && displayOnlyHeader);
-                    if(canExportOnlyTotal){
-                        headers.push("");
-                    }
-                    Object.map(this.state.columns,(col,i)=>{
-                        if(!isObj(col) || col.visible === false || this.isSelectableColumn(col,i) || i === this.getIndexColumnName()) return;
-                        if(canExportOnlyTotal && !(i in footers)) return;
-                        cols[i] = col;
-                        headers.push(defaultStr(col.label,col.text));
-                        totalColumns++;
-                    })
-                    data.push(headers);
-                    Object.map(this.state.data,(dat,index)=>{
-                        ///si l'on a a faire à une colonne de type entete
-                        const d = [];
-                        if(dat.isSectionListHeader){
-                            if(!config.displayTotals && !canExportOnlyTotal) return;
-                            const {sectionListHeaderKey:key} = dat;
-                            const val = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
-                            d.push(val);
-                            if(!canExportOnlyTotal){
-                                for(let i = 1;i<totalColumns;i++){
-                                    d.push(null);
-                                }
-                                data.push(d);
-                            } else {
-                                const hF = hFooters[key];
-                                if(isObj(hF) && isNonNullString(agFunc)){
-                                    const dd = [];
-                                    Object.map(cols,(col,i)=>{
-                                        if(i in hF){
-                                                const ff = hF[i];
-                                                dd.push(defaultNumber(ff[agFunc]));
-                                            } else {
-                                                dd.push(null);
-                                            }
-                                    });
-                                    if(canExportOnlyTotal){
-                                        dd.unshift(val);
-                                        data.push(dd);
-                                    } else {
-                                        data.push(d);
-                                        data.push(dd);
-                                    }
+                    data.push(d);
+                })
+            } else {
+                const headers = [];
+                const hFooters = defaultObj(this.sectionListHeaderFooters);
+                const agFunc = this.state.aggregatorFunction;
+                const canExportOnlyTotal = isOnlytotal || (config.exportOnlyTotal && displayOnlyHeader);
+                if(canExportOnlyTotal){
+                    headers.push("");
+                }
+                Object.map(this.state.columns,(col,i)=>{
+                    if(hasFields && !fields.includes(i)) return;
+                    if(!isObj(col) || col.visible === false || this.isSelectableColumn(col,i) || i === this.getIndexColumnName()) return;
+                    if(canExportOnlyTotal && !(i in footers)) return;
+                    cols[i] = col;
+                    headers.push(defaultStr(col.label,col.text));
+                    totalColumns++;
+                })
+                data.push(headers);
+                Object.map(this.state.data,(dat,index)=>{
+                    ///si l'on a a faire à une colonne de type entete
+                    const d = [];
+                    if(dat.isSectionListHeader){
+                        if(!config.displayTotals && !canExportOnlyTotal) return;
+                        const {sectionListHeaderKey:key} = dat;
+                        const val = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
+                        d.push(val);
+                        if(!canExportOnlyTotal){
+                            for(let i = 1;i<totalColumns;i++){
+                                d.push(null);
+                            }
+                            data.push(d);
+                        } else {
+                            const hF = hFooters[key];
+                            if(isObj(hF) && isNonNullString(agFunc)){
+                                const dd = [];
+                                Object.map(cols,(col,i)=>{
+                                    if(i in hF){
+                                            const ff = hF[i];
+                                            dd.push(defaultNumber(ff[agFunc]));
+                                        } else {
+                                            dd.push(null);
+                                        }
+                                });
+                                if(canExportOnlyTotal){
+                                    dd.unshift(val);
+                                    data.push(dd);
                                 } else {
                                     data.push(d);
+                                    data.push(dd);
                                 }
+                            } else {
+                                data.push(d);
                             }
-                        } else if(!canExportOnlyTotal) {
-                            Object.map(cols,(col,i)=>{
-                                const isDateField = defaultStr(col.type).toLowerCase().contains("date");
-                                d.push(this.renderRowCell({
-                                    data : dat,
-                                    rowData : dat,
-                                    rowCounterIndex : index,
-                                    rowIndex : index,
-                                    formatValue : false,
-                                    renderRowCell : false,
-                                    columnField : defaultStr(col.field,i),
-                                    columnDef :{
-                                        ...col,
-                                        ...(isDateField?{format:config.dateFormat}:{})
-                                    }
-                                }));
-                            })   
-                            data.push(d);
                         }
-                    });
-                }
-                const wb = XLSX.utils.book_new();
-                const ws = XLSX.utils.aoa_to_sheet(data);
-                XLSX.utils.book_append_sheet(wb, ws, config.sheetName);
-                FileSystem.writeExcel({...config,workbook:wb}).then(({path})=>{
-                    if(isNonNullString(path)){
-                        notify.success("Fichier enregistré dans le répertoire {0}".sprintf(path))
+                    } else if(!canExportOnlyTotal) {
+                        Object.map(cols,(col,i)=>{
+                            const isDateField = defaultStr(col.type).toLowerCase().contains("date");
+                            d.push(this.renderRowCell({
+                                data : dat,
+                                rowData : dat,
+                                rowCounterIndex : index,
+                                rowIndex : index,
+                                formatValue : false,
+                                renderRowCell : false,
+                                columnField : defaultStr(col.field,i),
+                                columnDef :{
+                                    ...col,
+                                    ...(isDateField?{format:config.dateFormat}:{})
+                                }
+                            }));
+                        })   
+                        data.push(d);
                     }
-                 }).finally(()=>{
-                    Preloader.close();
-                })
+                });
             }
+            const wb = XLSX.utils.book_new();
+            const ws = XLSX.utils.aoa_to_sheet(data);
+            XLSX.utils.book_append_sheet(wb, ws, config.sheetName);
+            FileSystem.writeExcel({...config,workbook:wb}).then(({path})=>{
+                if(isNonNullString(path)){
+                    notify.success("Fichier enregistré dans le répertoire {0}".sprintf(path))
+                }
+             }).finally(()=>{
+                Preloader.close();
+            })
         })
    }
    exportToPdf(){

package/src/components/Datagrid/utils.js

@@ -103,6 +103,8 @@ export const ROW_SELECTED_STYLE = {
     }
 }
 
+export const SELECTED_BORDER_COLOR = "rgb(251, 207, 232)";
+
 export const ROW_BORDER_STYLE = {
     marginHorizontal : 0,
     marginVertical : 0,
@@ -171,7 +173,9 @@ export const getRowStyle = ({row,bordered,numColumns,rowData,isAccordion,isTable
         style.push(rowIndex%2===0?styles.even : theme.isDark()?styles.oddDark : styles.odd)
     }
     if(selected){
-        style.push(styles.selected,{borderBottomWidth:1,borderBottomColor:theme.colors.primary})
+        const selectedBcolor = theme.isDark()? SELECTED_BORDER_COLOR : theme.colors.primary;
+        const bordered = isAccordion ? null : {borderBottomWidth:1,borderBottomColor:selectedBcolor,borderTopWidth:1,borderTopColor:selectedBcolor};
+        style.push(styles.selected,bordered);
     }
     if(paid || row.paid){
         style.push(styles.paid);

package/src/components/Dialog/DialogContent.js

@@ -2,10 +2,10 @@ import KeyboardAvoidingView from "../KeyboardAvoidingView";
 import React  from "$react";
 import { useWindowDimensions } from "react-native";
 
-const DialogContentComponent = ({isPreloader,isFullScreen,...props})=>{
+const DialogContentComponent = ({isPreloader,title,children,isFullScreen,...props})=>{
     const isFull = isFullScreen();
     //useWindowDimensions();
-    const content = React.useMemo(()=>props.children,[isPreloader]);
+    const content = React.useMemo(()=>children,[isPreloader,title,children]);
     return isPreloader || !isFull ? content : <KeyboardAvoidingView>{content}</KeyboardAvoidingView>
 }
 export default DialogContentComponent;

package/src/components/Dropdown/index.js

@@ -967,7 +967,6 @@ class DropdownComponent extends AppComponent {
         const renderingItems = this.getItems();
         const isDisabled = readOnly || disabled?true:false;
         const isBigList = this.isBigList;
-        const ListComponent = isBigList ? BigList : List;
         const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
         dialogProps = defaultObj(dialogProps);
         if(this.props.name =="RG_Compta"){
@@ -1063,7 +1062,7 @@ class DropdownComponent extends AppComponent {
                     {isMob && helperText ? <View testID = {testID+"_HelperText"} style={[styles.helperText]}>
                         {helperText}
                     </View>: null}
-                    <ListComponent
+                    <BigList
                         testID = {testID+"_List"}
                         {...listProps}
                         ref = {this.listRef}

package/src/components/Label/index.js

@@ -10,7 +10,7 @@ const defaultSelectable = canTextBeSelectable();
 
 export const EllipsizeMode = {'head':'head','middle':'middle', 'tail':'tail' , 'clip':'clip'}
 
-const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSize,testID,wrap,id,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
+const LabelComponent = React.forwardRef(({ children,selectable,role,color,upperCase,fontSize,testID,wrap,id,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
     children = defaultVal(children,text);
     let isText = false;
     if(!React.isValidElement(children) && Array.isArray(children) && children.length){
@@ -58,6 +58,8 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     if(disabled){
         r1.pointerEvents = "none";
     }
+    selectable = !!(selectable || defaultSelectable);
+    r2.userSelect = selectable?"none":"all";
     if(isNonNullString(children) || isText || typeof children ==='number'){
         if(!isText){
             children +="";
@@ -68,7 +70,10 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
         if(fontSize){
             r1.fontSize = fontSize;
         }
-        return (<Text  allowFontScaling = {true} ref = {ref} selectable={defaultSelectable} 
+        if(selectable){
+            r2.userSelect = "text";
+        }
+        return (<Text  allowFontScaling = {true} ref = {ref} 
             {...rest} {...restProps} testID={testID} disabled={disabled} 
             role={typeof role =='string' && role && supportedRoles.includes(role.trim()) && role.trim() || undefined}
             style={[styles.label,splitText?styles.wrap:null,splitText?styles.w100:null,bold?styles.bold:null,r2,style,r1,styles.webFontFamilly]}>{children}</Text>)
@@ -92,7 +97,7 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
             }
             return children;
         }
-        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
+        return <View ref = {ref}  {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
     }
     return null;
 })
@@ -114,7 +119,10 @@ LabelComponentExported.propTypes = {
     color : PropTypes.string,
     selectable : PropTypes.bool, //si le texte est sélectionnable
     underlined : PropTypes.bool,//si le style underlined sera appliqué au label
-    splitText : PropTypes.bool,///si le texte lorsqu'il est long sera splité
+    splitText : PropTypes.bool,///si le texte lorsqu'il est long sera splité,
+    /*useSelect : PropTypes.oneOfType([
+        'auto', 'text', 'none', 'contain', 'all'
+    ])*/
 }
 
 export default LabelComponentExported;

package/src/components/List/Common.js

@@ -9,22 +9,15 @@ import BackToTop from "$ecomponents/BackToTop";
 import {FlatList,StyleSheet,View} from "react-native";
 import Label from "$ecomponents/Label";
 import { useWindowDimensions,Dimensions } from "react-native";
-import { useList } from "./hooks";
+import { useList,useGetNumColumns } from "./hooks";
 
 const CommonListComponent = React.forwardRef((props,ref)=>{
     const context = useList(props);
-    let {responsive,testID,defaultItemHeight,itemHeight,windowWidth,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
+    let {testID,defaultItemHeight,itemHeight,onRender,componentProps,columnWrapperStyle,onViewableItemsChanged,withFlatListItem,Component,withBackToTop,backToTopRef:customBackToTopRef,withBackToTopButton,onScroll,onScrollEnd,onMount,onUnmount,renderScrollViewWrapper,prepareItems,getItemKey,getKey,keyExtractor,items,filter,renderItem,numColumns,containerProps,bindResizeEvents,...rest} = props;
     withBackToTopButton = withBackToTop === true || withBackToTopButton == true || isMobileMedia()? true : false;
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps);
-    responsive = defaultBool(responsive,false);
-    const dimensions = responsive ? useWindowDimensions() : Dimensions.get("window");
-    if(responsive){
-        numColumns = grid.numColumns(windowWidth);
-    } else {
-        numColumns = defaultDecimal(numColumns,1);
-    }
-    const itemWindowWidth = dimensions.width/numColumns;
+    const {itemWindowWidth} = useGetNumColumns(props);  
     let scrollEndTimeout = React.useRef(null);
     const listRef = React.useRef(null);
     const hasCustomBackToTop = typeof customBackToTopRef == 'function'? true : false;