@fto-consult/expo-ui 2.48.2 → 2.48.4

package/src/components/Form/FormData/DialogProvider.js

@@ -5,6 +5,7 @@ import {isMobileOrTabletMedia} from "$cplatform/dimensions";
 import {MAX_WIDTH} from "$ecomponents/Dialog/utils";
 import {extendObj,defaultObj,isObj,defaultBool,defaultStr} from "$utils";
 import grid from "$theme/grid";
+import {isDesktopMedia} from "$cdimensions";
 
 let dialogProviderRef = null;
 
@@ -59,7 +60,8 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
             const isMob = isMobileOrTabletMedia();
             if(closeAction === true || state.closeAction === true) return rest;
             rest.windowWidth = !isMob ? MAX_WIDTH : undefined;
-            rest.actions = Array.isArray(rest.actions)? [...rest.actions] : isObj(rest.actions)? {...rest.actions} : null;
+            rest.actions = Array.isArray(rest.actions)? Object.clone(rest.actions) : isObj(rest.actions)? Object.clone(rest.actions) : null;
+            rest.cancelButton = false;
             if(rest.actions && (!isMob || rest.fullScreen === false)){
                 if(isDesktopMedia() && typeof rest.maxActions !=='number'){
                     rest.maxActions = 2;
@@ -67,7 +69,7 @@ const FormDataDialogProvider = React.forwardRef((props,innerRef)=>{
                 const closeBtn ={
                     text : 'Annuler',
                     icon : 'close',
-                    secondary : true,
+                    isCancelButton : true,
                     ...defaultObj(closeAction),
                     onPress : context.close,
                     isAction : false,

package/src/components/Form/FormData/FormDataActions.js

@@ -59,6 +59,7 @@ export default class FormDataActionComponent extends FormData {
         const cb = ()=>{
             if(typeof mainProps.onBackActionPress =='function' && mainProps.onBackActionPress(args) === false) return
             else if(hasP && typeof this.props.onBackActionPress =='function' && this.props.onBackActionPress(args) === false) return;
+            else if(typeof this.props.onCancel =='function' && this.props.onCancel(args) === false) return;
             if(typeof callback =='function'){
               return  callback(args);
             }

package/src/components/Form/FormData/utils.js

@@ -48,7 +48,7 @@ export const getAppBarActionsProps = function(_props){
                     action.tooltip +=" ("+keyboardShortcuts[shortcut]+")";
                 }
             }
-            isAction = defaultBool(isAction,canSave,true);
+            isAction = defaultBool(isAction,canSave,rest.isAction,rest.canSave,true);
             action.formName = formName;
             if(isAction) {
                 action.isFormAction = true;
@@ -91,7 +91,6 @@ export const handleBeforeSaveCallback = (beforeSaveCallback,successCb,arg)=>{
             }
             successCb(arg);
         }).catch((e)=>{
-            console.log(e,' form-list-saving-data')
             if(isNonNullString(e)){
                 notify.error(e);
             } else if(e){

package/src/components/Icon/utils.js

@@ -15,4 +15,6 @@ export const ICON_OFFSET = 12;
 
 export const CHECKED_ICON = isIos()? 'check' : "checkbox-marked";
 
+export const CHECK_ICON = 'check';
+
 export const UNCHECKED_ICON = "checkbox-blank-outline";

package/src/components/List/Common.js

@@ -11,7 +11,7 @@ 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;
+    let {responsive,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;
     withBackToTopButton = withBackToTop === true || withBackToTopButton == true || isMobileMedia()? true : false;
     rest = defaultObj(rest);
     containerProps = defaultObj(containerProps);
@@ -145,7 +145,7 @@ const CommonListComponent = React.forwardRef((props,ref)=>{
         console.error(context.items," is not valid list data array",props);
         context.items = [];
     }
-    
+    React.useOnRender(onRender,Math.max(items.length/10 || 0,500));
     React.setRef(ref,context);
     React.useEffect(()=>{
         React.setRef(ref,context);

package/src/components/ScrollView/index.js

@@ -5,10 +5,13 @@ import View from "$ecomponents/View";
 import theme from "$theme";
 import {defaultStr,defaultObj} from "$utils";
 import APP from "$capp/instance";
-const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containerProps,mediaQueryUpdateNativeProps,testID:customTestID,children:cChildren,screenIndent:sIndent,...rest},ref) => {
-  const isKeyboardOpenRef = React.useRef(false);
+const ScrollViewComponent = React.forwardRef(({virtualized,vertical,horizontal,contentProps,containerProps,mediaQueryUpdateNativeProps,testID:customTestID,children:cChildren,screenIndent:sIndent,...rest},ref) => {
   const testID = defaultStr(customTestID,'RN_ScrollViewComponent');
   containerProps = defaultObj(containerProps)
+  if(horizontal === true || vertical === false){
+     return <ScrollView horizontal testID={testID} ref={ref} {...rest} children={cChildren}/>
+  }
+  const isKeyboardOpenRef = React.useRef(false);
   const layoutRef = React.useRef(null);
   const [layout,setLayout] = React.useState(Dimensions.get("window"));
   const {height} = layout;
@@ -60,6 +63,7 @@ const ScrollViewComponent = React.forwardRef(({virtualized,contentProps,containe
   }} {...containerProps} style={[theme.styles.w100,containerProps.style]} testID={testID+"_ScrollViewContainer"}>
     <ScrollView 
       ref={ref} {...rest} 
+      vertical = {vertical}
       testID={testID}
       children={children}
       contentContainerStyle = {contentContainerStyle}
@@ -71,6 +75,9 @@ ScrollViewComponent.displayName = "ScrollViewComponent";
 export default ScrollViewComponent;
 
 ScrollViewComponent.propTypes = {
+   ...defaultObj(ScrollView.propTypes),
+   horizontal : PropTypes.bool,
+   vertical : PropTypes.bool,
     virtualized : PropTypes.bool,
     contentProps : PropTypes.object,
 }

package/src/components/Table/List.js

@@ -26,7 +26,7 @@ const propTypes = {
     isScrolling : PropTypes.func,
 };
 /***@see : https://virtuoso.dev/virtuoso-api-reference/ */
-const VirtuosoListComponent = React.forwardRef(({items,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,...props},ref)=>{
+const VirtuosoListComponent = React.forwardRef(({items,onRender,testID,renderItem,onEndReached,onLayout,onContentSizeChange,onScroll,isScrolling,estimatedItemSize,onEndReachedThreshold,containerProps,style,...props},ref)=>{
     const r2 = {};
     for(let i in propTypes){
         if(i in props){
@@ -95,6 +95,7 @@ const VirtuosoListComponent = React.forwardRef(({items,testID,renderItem,onEndRe
             React.setRef(ref,null);
         }
     },[]);
+    React.useOnRender(onRender,Math.max(Array.isArray(items) && items.length/10 || 0,500))
     return <View {...containerProps} {...props} style={[{flex:1},containerProps.style,style,{minWidth:'100%',maxWidth:'100%'}]} onLayout={onLayout} testID={testID}>
         <Virtuoso
             {...r2}

package/src/components/Table/index.js

@@ -251,7 +251,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
             }
         }
     }
-    React.useOnRender((a,b,c)=>{
+    const onComponentRender = (a,b,c)=>{
         if(onRender){
             onRender(a,b,c);
         }
@@ -264,7 +264,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                 })
             }
         }
-    });
+    };
     return <View testID= {testID+"_Container"}  {...containerProps} onLayout={(e)=>{
         layoutRef.current = e.nativeEvent.layout;
         if(containerProps.onLayout){
@@ -299,7 +299,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                     </View>
                 </ScrollView>
             </RNView>
-            {hasEmptyData ? <View testID={testID+"_Empty"} style={styles.hasNotData}>
+            {hasEmptyData ? <View onRender={onComponentRender} testID={testID+"_Empty"} style={styles.hasNotData}>
                     {emptyData}
             </View> : <ScrollView {...scrollViewProps} scrollEventThrottle = {scrollEventThrottle} horizontal contentContainerStyle={[scrollContentContainerStyle,scrollViewProps.contentContainerStyle,{height:'100%'}]} showsVerticalScrollIndicator={false}  
                     onScroll = {getOnScrollCb([headerScrollViewRef,footerScrollViewRef],null,(args)=>{
@@ -337,6 +337,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                                 content : {height,width}
                             });
                         }}
+                        onRender = {onComponentRender}
                         onLayout = {(args)=>{
                             if(props.onLayout){
                                 //props.onLayout(args);

package/src/components/View/index.js

@@ -5,7 +5,7 @@ import {isMobileNative} from "$cplatform";
 import {debounce,isNumber} from "$utils";
 
 
-const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
+const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onRender,onLayoutTimeout,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{
     const style = React.useMediaQueryUpdateStyle(props);
     const autoSize = autoHeight||autoWidth ? true : false;
     const [state,setState] = autoSize ? React.useState({}) : [{}];
@@ -22,6 +22,7 @@ const ViewComponent = React.forwardRef(({mediaQueryUpdateNativeProps,onLayoutTim
             setState({height:h,width:w});
         }
     };
+    React.useOnRender(onRender);
     return <View
          {...props} 
          style = {[style,

package/src/screens/Auth/PermLines.js

@@ -0,0 +1,417 @@
+import tables  from "$database/data/tables";
+import Checkbox from "$components/Checkbox";
+import React from "$react";
+import { StyleSheet } from "react-native";
+import {defaultVal,defaultObj,defaultBool,arrayValueExists} from "$utils";
+import Auth from "$cauth";
+import Label from "$ecomponents/Label";
+import View from "$ecomponents/View";
+import Expandable from "$ecomponents/Expandable";
+import PropTypes from "prop-types";
+import Grid,{Cell} from "$components/Grid";
+import theme from "$theme";
+import appConfig from "$capp/config";
+
+
+let allPerms = {};
+const defaultActions = {
+    create : {
+        text : 'Créer'
+    },
+    update : {
+        text : 'Modifier'
+    },
+    delete : {
+        text : 'Supprimer'
+    },
+    read : {
+        text : 'Consulter',
+    },
+}
+const expandIconProps = {
+    //size : 20,
+}
+export const PermText = (props)=>{
+    const {isMasterAdmin} = props;
+    const {user} = props;
+    const isAllowed = isMasterAdmin ? true : React.useRef(Auth.isTableDataAllowed({table:'users',user,action:'assignPerms'})).current;
+    const {text,label,checked,labelStyle,table,type,onToggle,actions,action,resource,tooltip} = props;
+    return <Checkbox
+        title = {tooltip}
+        disabled = {!isAllowed || isMasterAdmin}
+        defaultValue = {checked || isMasterAdmin?1 : 0}
+        style  = {[theme.styles.noPadding,theme.styles.noMarging,labelStyle !== false && styles.checkbox]}
+        labelStyle = {[labelStyle !== false && styles.label,labelStyle && labelStyle]}
+        label = {defaultVal(label,text)}
+        onPress = {(args)=>{
+            React.stopEventPropagation(args?.event);
+            if(onToggle){
+                onToggle({...args,checked:!!!checked,resource,actions,action,table,type})
+            }
+            return false;
+        }}
+    />
+}
+
+
+
+export const PermLine = (props)=>{
+    const [state,setState] = React.useState({
+        data : defaultObj(props.data),
+        expanded : defaultBool(props.expanded,false)
+    });
+    let {text,user,isMasterAdmin,perms,table,index,onChange,type,keyname,actions,testID,...rest} = props; 
+    testID = defaultStr(testID,"RN_AuthPermLineComponent_"+index);
+    table = defaultStr(table).toLowerCase();
+    type = defaultStr(type).toLowerCase();
+    perms =  Object.assign({},perms);
+    let resource = undefined;
+    if(arrayValueExists(['table','structdata','struct_data'],type)){
+        if(type === 'struct_data'){
+            type = 'structdata';
+        }
+        resource = type+"/"+table;
+        if(perms.defaultActions !== false || (isObj(perms[resource]) && Object.size(perms[resource],true)>0)){
+            let _acts = {};
+            if(perms.defaultActions !== false) {
+                _acts = {...defaultActions};
+            } 
+            if(perms[resource]){
+                perms[resource] = {
+                    text,
+                    actions : {..._acts,...defaultObj(perms[resource])}
+                }
+            } else {
+                perms[resource] = {
+                    text,
+                    actions : {..._acts,...defaultObj(perms[resource])}
+                }
+            }
+        } 
+    }
+    let allChecked = true;
+    let checked = isMasterAdmin;
+    const onToggleSingle = ({resource,checked,action})=>{
+        if(isMasterAdmin || !isNonNullString(action) || !isNonNullString(resource) || !isNonNullString(allPerms[resource])){
+            return;
+        }
+        const data = {...state.data};
+        const allAction = defaultStr(allPerms[resource]);
+        if(allAction == "all"){
+            if(checked){
+                data[resource] = allAction;
+            } else delete data[resource];
+        } else  {
+            data[resource] = defaultStr(data[resource]).toLowerCase();
+            let spl = data[resource].split("2");
+            if(checked){
+                if(action !== 'read' && arrayValueExists(allAction.toLowerCase().split("2"),'read') && !arrayValueExists(spl,'read')){
+                    spl.push('read');
+                }
+                if(!arrayValueExists(spl,action,true)){
+                    spl.push(action);
+                }
+            } else {
+                let s1 = [];
+                for(let i in spl){
+                    if(spl[i].toLowerCase() !== action.toLowerCase()){
+                        s1.push(spl[i]);
+                    }
+                }
+                spl = s1;
+            }
+            if(spl.length>0){
+                data[resource] = spl.join("2").ltrim("2").rtrim("2");
+            } else delete data[resource];
+        }
+        setState({...state,data});
+        if(onChange){
+            onChange({data,resource,table,type});
+        }
+    }
+    const toggleAll = (arg)=>{
+        if(!isNonNullString(type) || !isNonNullString(table) || !isNonNullString(resource)){
+            return;
+        }
+        const {checked} = arg;
+        const data = {...state.data};
+        for(let i in allPerms){
+            if(i.toLowerCase().startsWith(resource)){
+                if(!checked){
+                    delete data[i];
+                } else {
+                    data[i] = allPerms[i];
+                }
+            }
+        }
+        setState({...state,data});
+        if(onChange){
+            onChange({data,resource,table,type});
+        }
+    }
+    const content = [];
+    Object.map(perms,(perm,i)=>{
+        const pText = defaultStr(perm.text,perm.label);
+        if(!isObj(perm.actions)){
+            if(!isNonNullString(pText)) return null;
+            allPerms[i] = "all";
+            checked = isMasterAdmin? true : isNonNullString(state.data[i]);
+            if(!checked){
+                allChecked = false;
+            }
+            content.push(<PermText user={user} isMasterAdmin={isMasterAdmin} key = {i} table={table} tooltip={defaultStr(perm.tooltip,perm.title,perm.desc)} onToggle={onToggleSingle} text={pText} checked ={checked} resource={i} action ={'all'}/>);
+            return;
+        } 
+        allPerms[i] = "";
+        const splitP = defaultStr(state.data[i]).toLowerCase().split("2");
+        const pContent = []
+        Object.map(perm.actions,(p,j)=>{
+            if(!isObj(p) || !isNonNullString(p.text)) return null;
+            allPerms[i] = (isNonNullString(allPerms[i])?(allPerms[i]+"2"):"")+j;
+            checked = isMasterAdmin? true : arrayValueExists(splitP,j,true);
+            if(!checked){
+                allChecked = false;
+            }
+            pContent.push(<PermText  user={user}  labelStyle ={styles.permChildren} isMasterAdmin={isMasterAdmin}  key={j} table={table} onToggle={onToggleSingle} tooltip={defaultStr(p.tooltip,p.title,p.desc)} text = {p.text} checked ={checked} actions={perm.actions} resource={i} action ={j}/>)
+        });
+        if(pContent.length){
+            const hasS = isNonNullString(text) && isNonNullString(pText) && pText.toLowerCase() != text.toLowerCase()
+            content.push(<View key={i} testID={testID+"_Content_"+i}>
+                {hasS ? <Label testID={testID+'_Label'}>{pText}</Label> : null}
+                {pContent}
+            </View>)
+        }
+
+    });
+    return <Expandable  
+        expandIconProps = {expandIconProps}
+        expandedIcon ={'chevron-right'} 
+        unexpandedIcon = {'chevron-down'}
+         {...defaultObj(rest)} 
+        testID = {testID}
+        expandIconPosition = {"left"}
+        onPress={(e)=>{
+            setState({...state,expanded:!state.expanded})
+        }}
+        contentProps = {{style:styles.expandableContent}}
+        expanded={state.expanded} 
+        title = {
+            <PermText 
+                user={user} 
+                table={table} 
+                labelStyle = {false}
+                checked = {allChecked} 
+                type={type} resource={resource} action={allPerms[resource]} 
+                text={text} 
+                testID = {testID+"_"+table}
+                isMasterAdmin = {isMasterAdmin}
+                onToggle = {toggleAll}
+            />
+        }
+    >
+            {content}
+    </Expandable>
+}
+
+
+PermLine.propTypes = {
+    text : PropTypes.string.isRequired,
+    type : PropTypes.string.isRequired,
+}
+
+const PermLines = React.forwardRef((props,ref)=>{
+    const isMasterAdmin = defaultBool(props.isMasterAdmin,false);
+    const {user} = props;
+    const dataRef = React.useRef(defaultObj(props.perms,defaultObj(props.data).perms));
+    let {testID} = props;
+    const data = dataRef.current;
+    const  onChange = (arg)=>{
+        if(isMasterAdmin) return;
+        let {data,resource} = arg;
+        if(!isNonNullString(resource)) return;
+        const sData = dataRef.current;
+        data = defaultObj(data);
+        for(let i in allPerms){
+            if(i.toLowerCase().startsWith(resource)){
+                if(isUndefined(data[i])){
+                    delete sData[i];
+                } else {
+                    sData[i] = data[i]
+                }
+            }
+        }
+        dataRef.current = sData;
+        if(props.onChange){
+            props.onChange({...arg,data:sData});
+        }
+    }
+    
+    testID = defaultStr(testID,"RN_PermsLines");
+    const eProps = {style:[theme.styles.w100],containerProps:{style:[theme.styles.w100]}};
+    const context = React.useRef({}).current;
+    context.getData = x=> data;
+    React.setRef(ref,context);
+    React.useEffect(()=>{
+        return ()=>{
+            allPerms = {};
+            React.setRef(ref,null);
+        }
+    },[]);
+    
+    return <Grid testID={testID}>
+        <Cell tabletSize={10} desktopSize={6} phoneSize={12}>
+            <Expandable expandIconProps = {expandIconProps} titleProps = {{style:styles.expandable}} title={"Table des données"} {...eProps}>
+                <React.Fragment>
+                {
+                    Object.mapToArray(tables,(table,tableName)=>{
+                    if(!isObj(table) || !isObj(table.perms)) return null;
+                    tableName = tableName.toLowerCase().trim();
+                    let text = defaultStr(table.text,table.label)
+                    let key = ("table/"+tableName);
+                    const perms = {};
+                    Object.map(table.perms,(perm,i)=>{
+                        const iLower = i.toLowerCase();
+                        if(iLower == 'defaultactions' || iLower =='defaultaction'){
+                            perms.defaultActions = perm;
+                        }
+                        if(!isObj(perm)) return ;
+                        if(perm.defaultActions){
+                            perm.actions = {
+                                ...defaultActions,
+                                ...defaultObj(perm.actions)
+                            }
+                        }
+                        i = i.toLowerCase();
+                        let k = key.toLowerCase();
+                        i = (k+"/"+i.ltrim(k)).rtrim("/").replaceAll("//","/");
+                        perms[i] = perm;
+                    });
+                    return <PermLine 
+                        isMasterAdmin = {isMasterAdmin}
+                        table = {tableName}
+                        type = {"table"}
+                        perms  = {perms}
+                        data = {data}
+                        onChange = {onChange}
+                        text = {text}
+                        resource = {key}
+                        key = {key}
+                        index = {key}
+                        user = {user}
+                    />
+                })
+            }
+            </React.Fragment>
+            <React.Fragment>
+                {
+                    Object.mapToArray(PERMS,(table,tableName)=>{
+                        if(!isObj(table) || !isObj(table.perms)) return null;
+                        tableName = tableName.toLowerCase().trim();
+                        let text = defaultStr(table.text,table.label)
+                        let key = ("table/"+tableName);
+                        let perms = {};
+                        perms[key] = {actions:{},text}
+                        Object.map(table.perms,(perm,i)=>{
+                            if(!isObj(perm)) return ;
+                            if(perms.defaultActions){
+                                perms[key].actions = {
+                                    ...defaultActions,
+                                    ...perms[key].actions
+                                }
+                            } else {
+                                perms[key].actions[i] = perm;
+                            }
+                        })
+                        return <PermLine 
+                            isMasterAdmin = {isMasterAdmin}
+                            table = {tableName}
+                            type = {"extra"}
+                            perms  = {perms}
+                            data = {data}
+                            onChange = {onChange}
+                            text = {text}
+                            resource = {key}
+                            key = {key}
+                            index = {key}
+                            user = {user}
+                        />
+                    })
+                }
+            </React.Fragment>
+            </Expandable>
+        </Cell>
+        <Cell tabletSize={8} desktopSize={6} phoneSize={12}  >
+            <Expandable expandIconProps = {expandIconProps} titleProps = {{style:styles.expandable}} title="Données de structure" {...eProps}>
+                {
+                    Object.mapToArray(structData,(table,tableName)=>{
+                        if(!isObj(table)) return null;
+                        tableName = tableName.toLowerCase().trim();
+                        let text = defaultStr(table.text,table.label)
+                        let key = "structdata/"+tableName
+                        let perms = {};
+                        Object.map(table.perms,(perm,i)=>{
+                            /**** l'on peut décider d'ajouter les actions par défaut à une permission
+                             *  dans ce cas, il suffit dans la table des permissions, de préciser la valeur défault action
+                             */
+                            if(arrayValueExists(['defaultactions','defaultaction'],i.toLowerCase())){
+                                perms.defaultActions = perm;
+                            }
+                            if(!isObj(perm)) return ;
+                            if(perm.defaultActions){
+                                perm.actions = {
+                                    ...defaultActions,
+                                    ...defaultObj(perm.actions)
+                                }
+                            }
+                            i = i.toLowerCase();
+                            let k = key.toLowerCase();
+                            i = (k+"/"+i.ltrim(k)).rtrim("/").replaceAll("//","/");
+                            perms[i] = perm;
+                        })
+                        return <PermLine 
+                            isMasterAdmin = {isMasterAdmin}       
+                            table = {tableName}
+                            type = {"structdata"}
+                            perms  = {perms}
+                            data = {data}
+                            onChange = {onChange}
+                            text = {text}
+                            resource = {key}
+                            key = {key}
+                            index = {key}
+                            user = {user}
+                        />
+                    })
+                }
+            </Expandable>
+        </Cell>
+    </Grid>
+});
+
+PermLines.displayName = "PermsLines";
+
+PermLines.propTypes = {
+    data : PropTypes.object,
+    perms : PropTypes.object
+}
+
+export default PermLines;
+
+const styles = StyleSheet.create({
+    expandableContent : {
+        paddingLeft : 30,
+    },
+    expandable : {
+        paddingLeft : 10,
+    },
+    label : {fontSize:14},
+    permChildren : {
+        paddingLeft : 20,
+    },
+    checkbox : {
+        //width : 20,
+        //height : 20,
+        margin : 0,
+        padding: 0,
+    }
+});