@fto-consult/expo-ui 1.0.4

package/src/components/InlineIndicator/Select.js

@@ -0,0 +1,58 @@
+import SimpleSelect from "$ecomponents/SimpleSelect";
+import {flatMode} from "$ecomponents/TextField";
+import { StyleSheet } from "react-native";
+import React from "$react";
+import {defaultObj} from "$utils";
+
+const InlineIndicatorSelectComponent = React.forwardRef((props,ref)=>{
+    let {inputProps,style,...rest} = props;
+    rest = defaultObj(rest);
+    inputProps = Object.assign({},inputProps);
+    inputProps.style = [styles.inputProps,inputProps.style];
+    inputProps.containerProps = Object.assign({},inputProps.containerProps);
+    inputProps.contentContainerProps = Object.assign({},inputProps.contentContainerProps);
+    inputProps.contentContainerProps.style = [inputProps.contentContainerProps.style,styles.contentContainer];
+    inputProps.outlined = false;
+    inputProps.containerProps.style = [styles.inputContainer,inputProps.containerProps.style]
+    inputProps.enableCopy = typeof inputProps.enableCopy =='boolean'? inputProps.enableCopy : false;
+    return <SimpleSelect
+        mode = {flatMode}
+        underlineColor = {"transparent"}
+        label = {""}
+        showSearch = {false}
+        {...rest}
+        ref = {ref}
+        inputProps = {inputProps}
+        style = {[style]}
+    />
+})
+
+InlineIndicatorSelectComponent.propTypes = {
+    ...SimpleSelect.propTypes
+}
+
+InlineIndicatorSelectComponent.displayName = "InlineIndicatorSelectComponent";
+
+const styles = StyleSheet.create({
+    inputProps : {
+        maxWidth : 80,
+        alignSelf : "flex-end",
+        justifyContent : 'flex-end',
+        backgroundColor : "transparent",
+    },
+    inputContainer : {
+        paddingVertical : 0,
+        marginVertical : 0,
+        backgroundColor : 'transparent',
+    },
+    contentContainer : {
+        backgroundColor : 'transparent',
+    },
+    right : {
+        alignSelf : 'flex-end',
+        justifyContent : 'flex-end',
+        alignItems : 'flex-end'
+    },
+})
+
+export default InlineIndicatorSelectComponent;

package/src/components/InlineIndicator/index.js

@@ -0,0 +1,156 @@
+import Select from "./Select";
+import LabelComponent from "$ecomponents/Label";
+import React from "$react";
+import {defaultObj,defaultVal} from "$utils";
+import {isMobileMedia} from "$cplatform/dimensions";
+import TextFieldComponent from "$ecomponents/TextField";
+import { StyleSheet } from "react-native";
+
+
+export {Select};
+
+export const PriceType = React.forwardRef((props,ref)=>{
+    let {dialogProps,inputProps,defaultValue,...rest} = props;
+    dialogProps = Object.assign({},dialogProps);
+    dialogProps.title = defaultVal(dialogProps.title,"Type de prix : HT/TTC")
+    inputProps = Object.assign({},inputProps);
+    const isMob = isMobileMedia();
+    inputProps.style = [styles.priceType,inputProps.style];
+    rest = defaultObj(rest);
+    return <Select
+        withCheckedIcon = {isMob}
+        {...rest}
+        inputProps = {inputProps}
+        compare = {(a,b)=>a && b && a.toLowerCase() === b.toLowerCase()}
+        dialogProps = {dialogProps}
+        defaultValue = {defaultVal(defaultValue,PriceType.defaultValue)}
+        ref = {ref}
+    />
+});
+
+PriceType.defaultValue = "ttc";
+
+PriceType.displayName = "PriceTypeComponent";
+
+PriceType.propTypes = {
+    ...Select.propTypes
+}
+
+export const MetricUnit = React.forwardRef((props,ref)=>{
+    let {dialogProps,inputProps,...rest} = props;
+    dialogProps = Object.assign({},dialogProps);
+    dialogProps.title = defaultVal(dialogProps.title,"Unité de mésure")
+    inputProps = Object.assign({},inputProps);
+    const isMob = isMobileMedia();
+    inputProps.style = [styles.metricUnit,inputProps.style];
+    rest = defaultObj(rest);
+    return <Select
+        items = {PRODUCTS_CONSTANTS.METRICS_UNITS}
+        withCheckedIcon = {isMob}
+        {...rest}
+        inputProps = {inputProps}
+        dialogProps = {dialogProps}
+        ref = {ref}
+    />
+});
+
+MetricUnit.defaultValue = "m";
+
+MetricUnit.displayName = "MetricUnitInlineIndicatorComponent";
+
+export const WeightUnit = React.forwardRef((props,ref)=>{
+    let {dialogProps,inputProps,...rest} = props;
+    dialogProps = Object.assign({},dialogProps);
+    dialogProps.title = defaultVal(dialogProps.title,"Unité de poids")
+    inputProps = Object.assign({},inputProps);
+    const isMob = isMobileMedia();
+    inputProps.style = [styles.weightUnit,inputProps.style];
+    rest = defaultObj(rest);
+    return <Select
+        items = {PRODUCTS_CONSTANTS.WEIGHTS_UNITS}
+        renderItem = {({item,index})=>index}
+        withCheckedIcon = {isMob}
+        {...rest}
+        inputProps = {inputProps}
+        dialogProps = {dialogProps}
+        ref = {ref}
+    />
+});
+
+WeightUnit.defaultValue = "kg";
+
+export const TextInput = React.forwardRef((props,ref)=>{
+    let {containerProps,contentContainerProps,...rest} = props;
+    containerProps = Object.assign({},containerProps);
+    contentContainerProps = Object.assign({},contentContainerProps);
+    containerProps.style = [styles.container,containerProps.style]
+    contentContainerProps.style = [styles.container,contentContainerProps.style];
+    return <TextFieldComponent
+        outlined = {false}
+        label = ""
+        {...rest}
+        containerProps = {containerProps}
+        contentContainerProps = {contentContainerProps}
+        ref = {ref}
+    />
+});
+
+
+export const TextField = TextInput;
+
+
+WeightUnit.displayName = "WeightUnitInlineIndicatorComponent";
+
+
+
+export const Text = React.forwardRef((props,ref)=>{
+    const [state,setState] = React.useStateIfMounted({
+        children : props.children,
+    });
+    const context = {
+        update : (props)=>{
+            if(React.isValidElement(props,true)){
+                return setState({...state,children:props})
+            } else if(isObj(props)){
+                return setState({...state,...props})
+            }
+        }
+    }
+    React.useEffect(()=>{
+        setState({...state,children:props.children})
+    },[props.children]);
+    React.setRef(ref,context);
+    React.useEffect(()=>{
+        return ()=>{
+            React.setRef(ref,null);
+        }
+    },[]);
+    return <LabelComponent {...props} {...state} style={[styles.text,props.style,state.style]}/>
+})
+
+export const Label = Text;
+
+Text.propTypes = LabelComponent.propTypes;
+
+
+const styles = StyleSheet.create({
+    container : {
+        paddingVertical : 0,
+        flex : 1,
+        backgroundColor : 'transparent',
+    },
+    metricUnit : {
+        width : 30,
+        textAlign : 'right'
+    },
+    priceType : {
+        width:32
+    },
+    weightUnit : {
+        width : 30,
+        textAlign : 'right',
+    },
+    text : {
+        paddingHorizontal : 10,
+    }
+})

package/src/components/Label/index.js

@@ -0,0 +1,104 @@
+import PropTypes from "prop-types";
+import {defaultVal,defaultStr,defaultBool,isDecimal,isObj,defaultObj,isNonNullString} from "$utils";
+import View from "$ecomponents/View";
+import {Text} from "react-native-paper";
+import { StyleSheet } from "react-native";
+import theme,{Colors,DISABLED_OPACITY,ALPHA,styles} from "$theme";
+import React from "react";
+import {canTextBeSelectable} from "$cplatform/utils";
+const defaultSelectable = canTextBeSelectable();
+
+export const EllipsizeMode = {'head':'head','middle':'middle', 'tail':'tail' , 'clip':'clip'}
+
+const LabelComponent = React.forwardRef(({ children,upperCase,testID,wrap,nativeID,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){
+        for(let i in children){
+            if(typeof children[i] =='string' || typeof children =='number'){
+                isText = true;
+                break;
+            }
+        }
+    }
+    wrap = typeof wrap ==='boolean'? wrap : typeof wrapText ==='boolean' ? wrapText : false;
+
+    if(!children || typeof children =='number'){
+        children = isDecimal(children)? children+"" : isDecimal(text)? text+"" : undefined;
+    }
+    if(!children) return null;
+    rest = defaultObj(rest);
+    const r1 = {},r2={};
+    bold = defaultBool(bold,textBold,false);
+    r2.color = Colors.setAlpha(theme.colors.text,theme.ALPHA);
+    if(disabled){
+        r1.opacity = DISABLED_OPACITY;
+    }
+    if(underlined){
+        r1.textDecorationLine = 'underline';
+    }
+    style = Object.assign({},StyleSheet.flatten(style));
+    testID = defaultStr(testID,"RN_LabelComponent");
+    const restProps = {nativeID};
+    if(splitText){
+        restProps.numberOfLines = defaultNumber(restProps.numberOfLines,1);
+        restProps.ellipsizeMode = defaultStr(restProps.ellipsizeMode,'tail');
+        if(restProps.numberOfLines > 1 && typeof wrap !=='boolean'){
+            wrap = true;
+        }
+    }
+    if(wrap){
+        r1.flexWrap = "wrap";
+    }
+    if(isNonNullString(children) || isText || typeof children ==='number'){
+        if(!isText){
+            children +="";
+            if(upperCase){
+                children = children.toUpperCase();
+            }
+        }
+        return (<Text allowFontScaling = {true} ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID={testID} disabled={disabled} style={[styles.label,splitText?styles.wrap:null,splitText?styles.w100:null,bold?styles.bold:null,r2,style,r1,styles.webFontFamilly]}>{children}</Text>)
+    }
+    let hasP = false;
+    if(isObj(rest)){
+        for(let i in rest){
+            if(rest[i]!== undefined) {
+                hasP = true;
+                break;
+            }
+        }
+    }
+    if(children == undefined){
+        return null;
+    }
+    if(React.isValidElement(children)){
+        if(!hasP) {
+            if(nativeID || ref){
+                return <View ref = {ref} testID = {testID} nativeID={nativeID}>{children}</View>
+            }
+            return <>{children}</>
+        }
+        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={[bold?styles.bold:null,r2,style,r1]} disabled={disabled} pointerEvents={disabled?'none':'auto'}>{children}</View>
+    }
+    return null;
+})
+LabelComponent.displayName = 'LabelComponent';
+
+
+const LabelComponentExported = theme.withStyles(LabelComponent);
+
+LabelComponentExported.propTypes = {
+    children : PropTypes.any,
+    upperCase: PropTypes.bool,///si la transformation sera en majuscule
+    text : PropTypes.any,
+    wrap : PropTypes.bool, //si le texte sera splité vers la ligne suivantes
+    wrapText : PropTypes.bool,///alias à wrap
+    primary : PropTypes.bool,
+    error : PropTypes.bool,///si le label est liée à une text field sur laquelle il  y a erreur
+    secondary : PropTypes.bool,
+    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é
+}
+
+export default LabelComponentExported;

package/src/components/Link/Browser.js

@@ -0,0 +1,17 @@
+import { isValidUrl, isNonNullString,uniqid,defaultObj,defaultStr} from "$utils";
+import getCallbackUrl from "./getUrlCallback";
+import { getQueryParams,setQueryParams} from "$utils/uri";
+const BROWSERS_EVENTS = {};
+const callbackURIID = "callbackURIIDDD";
+
+const Browser = {
+    open : (opts)=>{
+        if((isNonNullString(opts) && opts.startsWith("/")) || isValidUrl(opts)){
+            opts = {url:opts};
+        }
+        return;
+    }
+}
+
+
+export default Browser;

package/src/components/Link/getUrlCallback.js

@@ -0,0 +1,10 @@
+import { defaultStr } from "$utils";
+import { getCurrentURI,getNativeMobileAppURI } from "$utils/uri";
+export default function getCallbackUrl (url){
+    let cUrl = undefined;
+    if (typeof window !== 'undefined' && window) {
+       cUrl = getCurrentURI();
+    } else {}
+    url = defaultStr(url,cUrl);
+    return getNativeMobileAppURI(url);
+  }

package/src/components/Link/index.js

@@ -0,0 +1,38 @@
+import { Pressable } from "react-native";
+import { navigate } from "$enavigation/utils";
+import PropTypes from "prop-types";
+import {defaultStr} from "$utils";
+import React from "$react";
+const LinkComponent= React.forwardRef((props,ref)=>{
+    let {Component,navigation,children,params,stopEventPropagation,source,onPress,routeParams,routeName,routeSource,routeType, ...rest} = props;
+    const onRoutePress = (e)=>{
+        if(stopEventPropagation !== false){
+            React.stopEventPropagation(e);
+        }
+        if(onPress && onPress(e) === false){
+            return;
+        }
+        navigate({routeName,previousRoute:undefined,routeParams,params,type:routeType,source:defaultStr(routeSource,source)},navigation);
+    };
+    if(typeof children =='function'){
+        return children ({...rest,onPress:onRoutePress},ref);
+    }
+    Component = React.isComponent(Component)? Component : Pressable;
+    return <Component ref={ref} {...rest} onPress = {onRoutePress}>
+        {children}
+    </Component>
+});
+
+LinkComponent.propTypes = {
+    stopEventPropagation : PropTypes.bool, //si la propagation d'évènement sera effective une fois qu'on ait cliqué sur le lien
+    onPress : PropTypes.func,
+    routeName : PropTypes.string.isRequired,
+    routeParams : PropTypes.object, //les paramètres à passer à la route
+    routeType : PropTypes.string, //le type de route : stack ou drawer
+    routeFrom : PropTypes.string, //le type de route source : stack ou drawer
+    Component : PropTypes.any
+}
+
+LinkComponent.displayName = "LinkComponent";
+
+export default LinkComponent;

package/src/components/List/BigList.js

@@ -0,0 +1,44 @@
+import CommonListComponent from "./Common";
+import {defaultObj,defaultDecimal} from "$utils";
+import React from "$react";
+import {ActivityIndicator} from "react-native-paper";
+import BigList from "react-native-big-list";
+
+const ListComponent =  React.forwardRef((props,ref)=>{
+    let {getItemLayout,itemHeight,...rest} = props;
+    rest = defaultObj(rest);
+    if(typeof itemHeight !== 'function'){
+        getItemLayout = typeof getItemLayout ==='function'? getItemLayout : 
+        typeof itemHeight ==='number' && itemHeight ? ({data, index}) => 
+            ({length: itemHeight, offset: rest.itemHeight * index, index}) : undefined
+    }
+    
+    return <CommonListComponent
+            placeholder
+            placeholderComponent = {ActivityIndicator}
+            defaultItemHeight = {50}
+            {...rest}
+            ref = {ref}
+            renderScrollViewWrapper = {(children)=>{
+                if(typeof renderScrollViewWrapper =="function"){
+                    return renderScrollViewWrapper({children});
+                }
+                return children;
+            }}
+            getItemLayout = {getItemLayout}
+            itemHeight = {itemHeight}
+            Component = {BigList}
+        />
+})
+ListComponent.prototypes = {
+    ...defaultObj(BigList.propTypes),
+    
+}   
+
+export default ListComponent;
+
+ListComponent.propTypes = {
+    ...CommonListComponent.propTypes
+}
+
+ListComponent.displayName = "BigListComponent";

package/src/components/List/Common.js

@@ -0,0 +1,233 @@
+
+import React from "$react";
+import { prepareItems as customPrepareItems,getBToTopRef } from "./utils";
+import {grid,StylePropTypes} from "$theme";
+import PropTypes from "prop-types";
+import {defaultObj,defaultDecimal,defaultArray,defaultFunc} from "$utils";
+import {isMobileMedia} from "$cplatform/dimensions";
+import BackToTop from "$ecomponents/BackToTop";
+import {FlatList,StyleSheet,View} from "react-native";
+import Label from "$ecomponents/Label";
+import { useWindowDimensions,Dimensions } from "react-native";
+
+const CommonListComponent = React.forwardRef((props,ref)=>{
+    let {responsive,defaultItemHeight,itemHeight,windowWidth,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;
+    let scrollEndTimeout = React.useRef(null);
+    const listRef = React.useRef(null);
+    const hasCustomBackToTop = typeof customBackToTopRef == 'function'? true : false;
+    const backToTopRef = React.useRef(null);
+    const isFlatList = Component === FlatList;
+
+    const context = {
+        itemsRefs : [],
+        prepareItems : defaultFunc((prepareItems === false ? (items)=> items:null),prepareItems,customPrepareItems),
+        getKey : typeof keyExtractor =='function'? keyExtractor : typeof getItemKey =='function'? getItemKey : typeof getKey =='function'? getKey : undefined,
+        addItemsRefs : function(ref, itemRef){
+            context.itemsRefs[itemRef.index] = {
+              ref,
+              item: itemRef.item,
+              index: itemRef.index,
+            }
+        },
+        renderItem : function({item,index,section,...rest}){
+            rest = rest ? rest : {};
+            let ret = renderItem({item,numColumns,index,section,numColumns,itemContainerWidth:itemWindowWidth,itemWindowWidth,...rest,isScrolling:listRef.current?.isScrolling?true:false,items:defaultArray(context.items)});
+            if(typeof ret =='string' || typeof ret =='number'){
+                return <Label children = {ret}/>
+            } 
+            return (React.isValidElement(ret)) ? ret : null; 
+        },
+        /*** @params : {animated?: ?boolean,index: number,viewOffset?: number,viewPosition?: number,} */
+        scrollToIndex : function(params) {
+            if (listRef.current && typeof listRef.current.scrollToIndex =='function') {
+              listRef.current.scrollToIndex(params);
+            }
+        },
+        scrollToTop : function(params){
+            return context.scrollToIndex({animated:true,...defaultObj(params),index:0});
+        },
+        /** params?: ?{animated?: ?boolean} */
+        scrollToEnd : function(params) {
+            if (listRef.current && listRef.current.scrollToEnd) {
+              listRef.current.scrollToEnd(params);
+            }
+        },
+        /*** @params : {animated?: ?boolean,item: ItemT,viewPosition?: number} */
+        scrollToItem : function(params) {
+            if (listRef.current) {
+              listRef.current.scrollToItem(params);
+            }
+        },
+        /*** @params : {animated?: ?boolean, offset: number} */
+        scrollToOffset : function(params) {
+            if (listRef.current) {
+                listRef.current.scrollToOffset(params);
+            }
+        },
+        handleOnScroll : (event)=>{
+            if(customBackToTopRef === false) {
+                if(onScroll){
+                    onScroll(event);
+                }
+                return;
+            }
+            const bToTopRef = getBToTopRef(hasCustomBackToTop ? customBackToTopRef() : backToTopRef);
+            if (withBackToTopButton && bToTopRef) {
+                bToTopRef.toggleVisibility(event);
+            }
+            if(listRef.current){
+                listRef.current.isScrolling = true;
+                context.isScrolling = true;
+            }
+            clearTimeout(scrollEndTimeout.current);
+            scrollEndTimeout.current = setTimeout(()=>{
+                if(listRef.current){
+                    listRef.current.isScrolling = false;
+                    context.isScrolling = false;
+                }
+                clearTimeout(scrollEndTimeout.current);
+                if(onScrollEnd){
+                    onScrollEnd(event);
+                }
+            },1000);
+            if(onScroll){
+                onScroll(event);
+            }
+        },
+        onScroll : function(event){
+            context.handleOnScroll(event);
+        },
+        keyExtractor : function(item,index){
+            if(context.getKey){
+                return context.getKey(item,index);
+            }
+            return React.key(item,index);
+        },
+        itemHeight : typeof itemHeight =='number' && itemHeight ? itemHeight : function(section,index){
+            if(typeof index ==='undefined') return 0;
+            if(!Array.isArray(context.items)){
+                context.items = [];
+            }
+            if(typeof itemHeight ==='function'){
+                return itemHeight({section,numColumns,itemContainerWidth:itemWindowWidth,itemWindowWidth,index,context,item:context.items[index],items:context.items});
+            }
+            return defaultItemHeight
+        },
+        onBackActionPress : !hasCustomBackToTop ? function(){
+            return context?.scrollToTop()
+        }: undefined,
+    };
+    const contextRef = React.useRef({}).current;
+    contextRef.prevItems = React.usePrevious(items);
+    const getItems = React.useCallback(()=>{
+        if(items === contextRef.prevItems && contextRef.items) {
+            return contextRef.items;
+        }
+        return context.prepareItems(items,filter);
+    },[items]);
+    context.listRef = listRef.current;
+    context.items = contextRef.items = prepareItems === false ? items : getItems();
+    if(!Array.isArray(context.items)){
+        console.error(context.items," is not valid list data array",props);
+        context.items = [];
+    }
+    
+    React.setRef(ref,context);
+    React.useEffect(()=>{
+        React.setRef(ref,context);
+        if(typeof onMount =='function'){
+            onMount(context);
+        }
+        return ()=>{
+            React.setRef(ref,null);
+            if(typeof onUnmount ==='function'){
+                onUnmount();
+            }
+        }
+    },[]);
+    const restP = numColumns > 1 && isFlatList ? {
+        columnWrapperStyle : [styles.columnWrapperStyle,props.columnWrapperStyle]
+    } : {};
+    return <View {...containerProps} style={[styles.container,containerProps.style]}>
+        <Component
+            onEndReachedThreshold={0}
+            scrollEventThrottle={16}
+            {...rest}
+            {...restP}
+            ref = {listRef}
+            onScroll={context.onScroll}
+            data = {context.items}
+            //key = {isFlatList ? 'common-list-'+numColumns:"normal-list"}
+            numColumns={numColumns}
+            keyExtractor = {context.keyExtractor}
+            renderItem = {context.renderItem}
+            itemHeight = {itemHeight === false ? undefined : context.itemHeight}
+            onViewableItemsChanged={onViewableItemsChanged}
+            {...defaultObj(componentProps)}
+        />
+        {!hasCustomBackToTop && customBackToTopRef !== false ? <BackToTop ref={backToTopRef} onPress={context.onBackActionPress} /> : null}
+    </View>
+})
+
+
+CommonListComponent.propTypes = {
+    onViewableItemsChanged : PropTypes.func,
+    ...defaultObj(FlatList.propTypes),
+    defaultItemHeight : PropTypes.number,///la valeur de la hauteur des items par défaut
+    backToTopRef : PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.bool,
+    ]),
+    Component : PropTypes.oneOfType([
+        PropTypes.element,
+        PropTypes.node,
+        PropTypes.elementType
+    ]),
+    withBackToTopButton : PropTypes.bool,
+    withBackToTop : PropTypes.bool,
+    onScroll : PropTypes.func,
+    onScrollEnd : PropTypes.func,
+    /**** les props de la scrollView, qui wrapp le composant ScrollView dans le rendu BigList */
+    contentContainerStyle: StylePropTypes,
+    prepareItems : PropTypes.oneOfType([
+        PropTypes.bool,///si la fonction permettant de faire un travail préparaoire des données de la liste sera appelée
+        PropTypes.func,
+    ]),
+    items : PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.object,
+    ]),
+    responsive : PropTypes.bool,//si le nombre de columns de la big list sera déterminées dynamiquement
+    //si la liste prendra en compte le redimessionnement de la page, ce qui poussera à mettre à jour le nombre de colonnes lorsque la liste est rédimensionnée
+    bindResizeEvents : PropTypes.bool, 
+    renderItem : PropTypes.func,
+    containerProps : PropTypes.object,///les props du container à la big list
+    filter : PropTypes.func, //la fonction utilisée pour le filtre des éléments à rendre pour la liste
+    onMount : PropTypes.func,
+    onUnmount : PropTypes.func,
+}
+
+
+const styles = StyleSheet.create({
+    container: {
+      flex: 1,
+      minHeight : 300,
+    },
+    columnWrapperStyle : {
+        flex : 1,
+    }
+  });
+export default CommonListComponent;
+
+CommonListComponent.displayName = "CommonListComponent";