@fto-consult/expo-ui 6.52.0 → 6.52.2

package/babel.config.alias.js

@@ -13,7 +13,7 @@ module.exports = (opts)=>{
     opts.withPouchDB = opts.withPouchDB !== false && opts.withPouchdb !== false ? true : false;
     delete opts.withPouchdb;
     const expoUI = require("./expo-ui-path")();
-    const r = require(`"@fto-consult/common/babel.config.alias"`)(opts);
+    const r = require(`@fto-consult/common/babel.config.alias`)(opts);
     const expo = path.resolve(expoUI,"src");
     r.$edocs = path.resolve(expoUI,"docs");//l'alias de la documentation
     r["$edocs-components"] = path.resolve(r.$edocs,"components");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.52.0",
+  "version": "6.52.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "main",
   "scripts": {
@@ -70,7 +70,7 @@
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^3.45.9",
+    "@fto-consult/common": "^3.45.10",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",
     "@react-native-community/datetimepicker": "7.2.0",

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

@@ -7,7 +7,6 @@ import Filter from "$ecomponents/Filter";
 
 export default function FilterAccordionComponent({onChange,...props}){
     const valuesRefs = React.useRef({});
-    console.log("rendering ",valuesRefs);
     return  <Filter
         {...props}
         {...valuesRefs.current}

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

@@ -1209,8 +1209,12 @@ export default class CommonDatagridComponent extends AppComponent {
     toggleFilterColumnVisibility(field,visible){
         if(!isNonNullString(field)) return;
         const filteredColumns = {...this.state.filteredColumns};
+        if(typeof visible !=='boolean'){
+            visible = !!!filteredColumns[field];
+        }
         filteredColumns[field] = visible;
         this.setSessionData("filteredColumns"+this.getSessionNameKey(),filteredColumns);
+        this.trigger("toggleFilterColumnVisibility",{field,columnField:field,visible});
         return visible;
     }
     
@@ -2729,6 +2733,9 @@ export default class CommonDatagridComponent extends AppComponent {
     getPreparedColumns(){
         return this.preparedColumns;
     }
+    getColumns(){
+        return isObj(this.state.columns)? this.state.columns : {};
+    }
     prepareData(args,cb){
         let {pagination,config,aggregatorFunction:customAggregatorFunction,displayOnlySectionListHeaders:cdisplayOnlySectionListHeaders,data,force,sectionListColumns,sectionListCollapsedStates,updateFooters} = defaultObj(args);
         cb = typeof cb ==='function'? cb : typeof args.cb == 'function'? args.cb : undefined;

package/src/components/Datagrid/SWRDatagrid.js

@@ -14,7 +14,7 @@ import DateLib from "$lib/date";
 import {getFetchOptions} from "$cutils/filters";
 import {setQueryParams} from "$cutils/uri";
 import {uniqid} from "$cutils";
-import { getFetcherOptions } from "$capi/fetch";
+import apiFetch,{ getFetcherOptions } from "$capi/fetch";
 import Icon from "$ecomponents/Icon";
 import Label from "$ecomponents/Label";
 import { StyleSheet,View } from "react-native";
@@ -26,6 +26,7 @@ import PropTypes from "prop-types";
 import {Menu} from "$ecomponents/BottomSheet";
 import session from "$session";
 import useContext from "$econtext/hooks";
+import notify from "$cnotify";
 
 export const getSessionKey = ()=>{
     return Auth.getSessionKey("swrDatagrid");
@@ -188,17 +189,13 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 delete opts.page;
                 delete opts.offset;
             }
+            if(showProgressRef.current ===false){
+                opts.showError = false;
+            }
             if(typeof fetcher =='function'){
                 return fetcher(url,opts);
             }
-            const {url:fUrl,fetcher:cFetcher,...rest} = getFetcherOptions(url,opts);
-            if(showProgressRef.current ===false){
-                rest.showError = false;
-            }
-            return cFetcher(fUrl,rest).catch((e)=>{
-                console.log(e," is swr fetching data");
-                throw e;
-            });
+            return apiFetch(url,opts);
         },
         showError  : false,
         swrOptions : getSWROptions(swrConfig.refreshTimeout)
@@ -232,7 +229,7 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
         },500);
     },[error]);
     const doRefresh = (showProgress)=>{
-        showProgressRef.current = showProgress ? typeof showProgress ==='boolean' : false;
+        showProgressRef.current = showProgress ? typeof showProgress ==='boolean' : isLoading;
         refresh();
     }
     const canPaginate = ()=>{

package/src/components/Datagrid/Table/Filter.js

@@ -1,7 +1,51 @@
 import React from "$react";
 import View from "$ecomponents/View";
 import Label from "$ecomponents/Label";
+import { useDatagrid } from "./hooks";
+import styles from "./styles";
+import {defaultStr} from "$cutils";
+import theme from "$theme";
+import Filter, {canHandleFilter} from "$ecomponents/Filter";
+import { getMenuStyle } from "./styles";
 
-export default function DatagridTableFilterComponent({}){
-    return null;
+export default function DatagridTableFilterComponent({columnField,label,onChange,text,testID,...rest}){
+    const {context,filteredColumns} = useDatagrid();
+    const [visible,setVisible] = React.useState(!!filteredColumns[columnField]);
+    testID = defaultStr(testID,"RN_DatagridTableFilterComponent");
+    React.useEffect(()=>{
+        if(typeof context?.on ==='function'){
+            const onToggleVisibility = ({columnField:cField,visible:nVisible})=>{
+                if(columnField === cField && visible !== nVisible){
+                    console.log("toggle ",columnField,nVisible);
+                    setVisible(nVisible);
+                }
+            }
+            context.on("toggleFilterColumnVisibility",onToggleVisibility);
+            return ()=>{
+                context.off("toggleFilterColumnVisibility",onToggleVisibility);
+            }
+        }
+    },[context]);
+    label = label || text;
+    return <View testID={testID+"_DatagridFilterTableContainer"} style={[styles.filter,getMenuStyle(),!visible && styles.hidden]}>
+        <View testID={testID+"_DatagridTableFilterContent"} style={[theme.styles.row,theme.styles.alignItemsCenter,theme.styles.justifyContentStart,!visible && styles.hidden]}>
+            {React.isValidElement(label,true) ? <Label numberOfLines={1} style={[styles.filterLabel]}>
+                {label} 
+                Un label
+            </Label>:null}
+            <Filter
+                {...rest}
+                withLabel={false}
+                testID={testID+"_DatagridFilterComponent_"+columnField}
+                anchorProps = {{size:20,style:[theme.styles.noMargin,theme.styles.noPadding]}}
+                onChange = {(...args)=>{
+                    if(!visible){
+                        return;
+                    }
+                    console.log("calling on change ",args);
+                    onChange && onChange(...args);
+                }}
+            />
+        </View>
+    </View>;
 }

package/src/components/Datagrid/Table/Filters.js

@@ -6,48 +6,46 @@ import { StyleSheet,ScrollView } from "react-native";
 import Label from "$ecomponents/Label";
 import Filter from "./Filter";
 import FiltersMenu from "./FiltersMenu";
-import FilterMenu from "./FilterMenu";
 import {useDatagrid} from "./hooks";
 
 export default function DatagridTableFiltersComponent({orOperator,andOperator,testID}){
     testID = defaultStr(testID,"RN_DatagridTableFiltersComponent")
-    const {visible,isLoading,visibleColumnsNames,filters,filteredColumns,context} = useDatagrid();
+    const {filters,filteredColumns,filterableColumnsNames} = useDatagrid();
+    const [visibleColumns,context,setVisibleColumns] = React.useState(filteredColumns);
     const valuesRefs = React.useRef({});
-    const filteredRef = React.useRef({});
-    const {content,colMenus} = React.useStableMemo(()=>{
+    React.useEffect(()=>{
+        if(typeof context?.on ==='function'){
+            const onToggleVisibility = ({columnField,visible})=>{
+                if(visibleColumns[columnField] !== visible){
+                    setVisibleColumns({...visibleColumns,[columnField]:visible});
+                }
+            }
+            context.on("toggleFilterColumnVisibility",onToggleVisibility);
+            return ()=>{
+                context.off("toggleFilterColumnVisibility",onToggleVisibility);
+            }
+        }
+    },[context]);
+    const {content} = React.useStableMemo(()=>{
         const content = [];
         Object.map(filters,(filter,index)=>{
             if(isObj(filter)){ 
-                const {onChange,filter:isFiltered,...rest} = filter;
+                const {filter:isFiltered,...rest} = filter;
                 if(isFiltered === false) return null;
-                const key = defaultStr(filter.key,filter.field,filter.columnField,filter.index,index+"");
+                const columnField = defaultStr(filter.field,filter.columnField,String(index));
+                if(!columnField || !visibleColumns[columnField]) return null;
                 content.push(<Filter
                     {...rest}
-                    {...(isObj(valuesRefs.current[key]) ? valuesRefs.current[key] : {})}
-                    dynamicRendered
+                    //{...(isObj(valuesRefs.current[columnField]) ? valuesRefs.current[columnField] : {})}
+                    columnField={columnField}
+                    dynamicRendered={false}
                     orOperator = {defaultBool(orOperator,filter.orOperator,true)}
                     andOperator = {defaultBool(andOperator,filter.andOperator,true)}
-                    onChange = {(arg)=>{
-                        if(!arg.action && !arg.operator || !arg.field) return;
-                        const canHandle = canHandleFilter(arg);
-                        valuesRefs.current[key] = arg;
-                        if(filteredRef.current[key] !== canHandle){
-                            if(canHandle){
-                                canHandlerFilterRef.current++;
-                            } else {
-                                canHandlerFilterRef.current = Math.max(0,canHandlerFilterRef.current-1);
-                            }
-                        }
-                        filteredRef.current[key] = canHandle;
-                        if(onChange){
-                            onChange(arg);
-                        }
-                    }}
                 />)
             }
         })
         return {content};
-    },[filters])
+    },[visibleColumns])
     return <ScrollView horizontal testID={testID+"_FiltersScrollView"}>
         <View testID={testID} style = {[theme.styles.row,styles.container,theme.styles.rowWrap,theme.styles.justifyStart,theme.styles.alignItemsCenter]}>
             {<FiltersMenu/>}

package/src/components/Datagrid/Table/FiltersMenu.js

@@ -7,36 +7,47 @@ import theme from "$theme";
 import Label from "$ecomponents/Label";
 import React from "$react";
 import { getMenuStyle } from "./styles";
+import BottomSheetMenu from "$ecomponents/BottomSheet/Menu";
 
 export default function DatagridFiltersMenuComponent({testID,...props}){
-    const {filteredColumns,filterableColumnsNames,...rest} = useDatagrid();
+    const {filteredColumns,columns,context,filterableColumnsNames} = useDatagrid();
+    const [visibleMenus,setVisibleMenus] = React.useState(filteredColumns);
     const isFiltered = !!Object.size(filteredColumns,true);
     testID = defaultStr(testID,"RN_DatagridFiltersMenuComponent")
-    console.log(props," is props heeein");
     const items = React.useStableMemo(()=>{
         const items = [];
-        console.log(rest," is ressss",filterableColumnsNames);
-        Object.map(filterableColumnsNames,(field)=>{
-        
+        if(!columns) return items;
+        Object.map(filterableColumnsNames,(field,i)=>{
+            const column = columns[field];
+            if(!isObj(column)) return;
+            const filterKey = defaultStr(column.field,column.name,i);
+            items.push({
+                ...column,
+                icon  : !!visibleMenus[filterKey] ? "check":undefined,
+                items : undefined,
+                onPress : (e)=>{
+                    const visible = !!visibleMenus[filterKey];
+                    const nVisible  = context?.toggleFilterColumnVisibility? context.toggleFilterColumnVisibility(filterKey,!!!visible) : visible;
+                    if(nVisible !== visible){
+                        setVisibleMenus({...visibleMenus,[filterKey]:nVisible});
+                    }
+                }
+            })
         });
-        return;
-        colMenus.push(<FilterMenu
-            key = {key}
-            filterKey={key}
-            {...filter}
-            context={context}
-            filteredColumns={filteredColumns}
-        />)
-    },[filterableColumnsNames]);
-    return <Menu
+        return items;
+    },[filterableColumnsNames,visibleMenus]);
+    return <BottomSheetMenu
         testID={testID}
+        title = {"Filtres"}
         {...props}
+        items = {items}
         anchor={(p)=>{
             return <Pressable {...p} testID={testID+"_FilterPressableContainer"} style={[theme.styles.row,theme.styles.justifyContentStart,theme.styles.alignItemsCenter,getMenuStyle()]}>
                 <Icon
                     name={isFiltered?"filter-menu":"filter-plus"}
                     primary = {isFiltered}
                     size={20}
+                    style={[theme.styles.noPadding,theme.styles.noMargin]}
                 />
                 <Label primary={isFiltered} textBold={isFiltered}>Filtres</Label>
             </Pressable>

package/src/components/Datagrid/Table/hooks.js

@@ -4,5 +4,6 @@ export const useDatagrid = ()=>{
     const visible = context && typeof context?.canShowFilters =='function' && context.canShowFilters()|| false;
     const isLoading = context && context.isLoading() || false;
     const r = typeof context?.getPreparedColumns =='function'? context?.getPreparedColumns() : {};
-    return {...r,visible,isLoading,context};
+    const columns = typeof context?.getColumns =='function' && context.getColumns() || {}
+    return {...r,visible,isLoading,context,columns};
 }

package/src/components/Datagrid/Table/styles.js

@@ -3,14 +3,20 @@ import theme from '$theme';
 
 const styles = StyleSheet.create({
     menuItem : {
-        borderRadius : 10,
+        borderRadius : 7,
+        margin : 5,
+        paddingHorizontal : 10,
+        paddingVertical : 2,
+    },
+    hidden : {
+        display : "none",
+        opacity : 0,
+    },
+    filterLabel : {
+        fontSize:11,
     }
 });
 
-export const getMenuStyle = (style)=>([
-    styles.menuItem,
-    {backgroundColor:theme.surfaceBackground},
-    style,
-]);
+export const getMenuStyle = (style)=>([styles.menuItem,{backgroundColor:theme.colors.surface},style]);
 
 export default styles;

package/src/components/Filter/index.js

@@ -222,7 +222,7 @@ export default class Filter extends AppComponent {
                 }
              }
           }
-          this.props.onChange({...this.getStateValues(),value,field:this.props.field,action,operator,selector,originAction,context:this});
+          this.props.onChange({...this.getStateValues(),value,field:this.props.field,columnField:this.props.field,action,operator,selector,originAction,context:this});
       }
   }
   componentDidUpdate (){

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

@@ -1,6 +1,6 @@
 import React from "$react";
 import Divider from "$ecomponents/Divider";
-import {isObj,isNonNullString,defaultStr,defaultObj} from "$utils";
+import {isObj,isNonNullString,defaultStr,defaultObj} from "$cutils";
 import {flattenStyle,Colors} from "$theme";
 import FieldContent from "./FieldContent";
 

package/src/components/Portal/Portal.js

@@ -4,7 +4,7 @@
     @see : https://github.com/gorhom/react-native-portal
  */
 import { memo, useCallback, useEffect, useMemo, useRef } from 'react';
-import {uniqid}  from "$utils";
+import {uniqid}  from "$cutils";
 import { usePortal } from './hooks';
 
 const PortalComponent = ({

package/src/context/query.js

@@ -1,4 +1,4 @@
-import {isNonNullString,isObj,extendObj,defaultObj,defaultStr} from "$utils";
+import {isNonNullString,isObj,extendObj} from "$cutils";
 import { useQuery as useRQuery, useMutation as RQUseMutation, useQueryClient } from "@tanstack/react-query";
 import { getFetcherOptions as apiGetFetcherOptions } from '$capi';
 

package/src/layouts/Screen/TableData.js

@@ -425,7 +425,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
         if(hasTabs){
             if(isMobOrTab){
                 renderingTabsProps.firstTab = <Tab.Item testID={testID+"_MainTab"} label={"Principal"} {...firstTabProps} key={tabKey}>
-                    <View testID={testID+"_MainTab_Content"} {...contentProps} style={[styles.noMarging,contentProps.style,styles.h100,styles.noPadding]}>
+                    <View testID={testID+"_MainTab_Content"} {...contentProps} style={[styles.noMargin,contentProps.style,styles.h100,styles.noPadding]}>
                         {header}
                         {content}
                     </View>
@@ -435,7 +435,7 @@ export default class TableDataScreenComponent extends FormDataScreen{
             }
             const ct = renderTabsContent(renderingTabsProps);
             if(isMobOrTab && ct){
-                contentProps.style = [contentProps.style,styles.noMarging,styles.noPadding,styles.content]
+                contentProps.style = [contentProps.style,styles.noMargin,styles.noPadding,styles.content]
                 mainContent = ct;
             } else {
                 mainContent = <View  {...contentProps} testID={testID+"_ContentContainer"} style={[styles.container,styles.noPadding,contentProps.style]}>
@@ -907,7 +907,7 @@ const styles = StyleSheet.create({
         paddingHorizontal : 0,
         paddingVertical : 0,
     },
-    noMarging : {
+    noMargin : {
         margin : 0,
         marginVertical : 0,
         marginHorizontal : 0,

package/src/screens/Auth/PermText.js

@@ -13,7 +13,7 @@ const PermText = React.forwardRef(({isUserMasterAdmin,disabled,assignPerm,testID
         testID = {testID}
         disabled = {disabled || isUserMasterAdmin}
         defaultValue = {checked || isUserMasterAdmin?1 : 0}
-        style  = {[theme.styles.noPadding,theme.styles.noMarging,labelStyle !== false && styles.checkbox]}
+        style  = {[theme.styles.noPadding,theme.styles.noMargin,labelStyle !== false && styles.checkbox]}
         labelStyle = {[labelStyle !== false && styles.label,labelStyle && labelStyle]}
         label = {defaultVal(label,text)}
         onPress = {(args)=>{