@fto-consult/expo-ui 2.47.8 → 2.48.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.47.8",
+  "version": "2.48.2",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -61,7 +61,7 @@
     "@emotion/native": "^11.10.0",
     "@expo/html-elements": "^0.2.0",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^2.11.5",
+    "@fto-consult/common": "^2.12.2",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/AppBar/index.js

@@ -93,7 +93,7 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
     const [context] = React.useState({});
     actions = typeof actions =='function'? actions(getCallAgs()) : actions;
     const dimensions = Dimensions.get("window");
-    const [layout,setLayout] = React.useStateIfMounted({
+    const [layout,setLayout] = React.useState({
        width : dimensions.width,
        height : dimensions.height,
     })

package/src/components/BottomSheet/Menu.js

@@ -12,7 +12,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
     rest = defaultObj(rest);
     const isControlled = controlled ? true : false;
     const visibleRef = React.useRef(null);
-    const [state,setState] = React.useStateIfMounted({
+    const [state,setState] = React.useState({
         visible : false,
         height : undefined,
     });

package/src/components/Checkbox/index.js

@@ -58,7 +58,7 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
     } 
     delete p.checked;
     defaultValue = defaultVal(defaultValue,value,0);
-    const [status,setStatus] = React.useStateIfMounted(defaultValue == checkedValue ? checkedStatus : uncheckedStatus)
+    const [status,setStatus] = React.useState(defaultValue == checkedValue ? checkedStatus : uncheckedStatus)
     const previousStatus = React.usePrevious(status);
     const checked = status===checkedStatus?true:false;
     if(checked){

package/src/components/Color/index.js

@@ -19,7 +19,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
     const isMob = isMobileOrTabletMedia();
     const _label = defaultStr(label,text);
     const pickerRef = React.useRef(null);
-    const [state,setState] = React.useStateIfMounted({
+    const [state,setState] = React.useState({
         color : Colors.isValid(defaultValue)? defaultValue : undefined,
         visible : false,
     })

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

@@ -45,7 +45,7 @@ const DatagridAccordionRow = React.forwardRef((props,ref)=>{
             isScrolling = isS;
         }
     }
-    const [state,setState] = React.useStateIfMounted({
+    const [state,setState] = React.useState({
         expanded : false,
     });
     const toggleExpander = ()=>{

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

@@ -16,7 +16,7 @@ export default function DatagridActions (_props){
   let {actions,actionProps,selectedRowsActions,bindResizeEvent,context,selectedRows:_selectedRows,...props} = _props;
   props = defaultObj(props);
   context = defaultObj(context);
-  const [state,setState] = React.useStateIfMounted({
+  const [state,setState] = React.useState({
     selectedRows : defaultObj(_selectedRows),
   });
   const selectedRowsCallBackRef = React.useRef(null);

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

@@ -80,7 +80,7 @@ export default function DGGridFooters (props){
     } else {
         Component = defaultVal(Component,View)
     }
-    const [state,setState] = React.useStateIfMounted({
+    const [state,setState] = React.useState({
         columns,
         data,
     })

package/src/components/Date/DatePickerInput/index.js

@@ -65,7 +65,7 @@ const DatePickerInput = React.forwardRef(({
   inputMode = defaultStr(inputMode,"start");
   locale = defaultStr(locale,defaultLocale);
   const theme = useTheme()
-  const [state,setState] = React.useStateIfMounted({
+  const [state,setState] = React.useState({
     errorText : null,
     inputDate : toDateObj(defaultValue,format),
     visible : false

package/src/components/Date/Time.js

@@ -54,7 +54,7 @@ export default function TimePickerComponent (props){
     }
     withSeconds = defaultBool(withSeconds,true);
     const prevDefaultValue = React.usePrevious(defaultValue);
-    const [state,setState] = React.useStateIfMounted({
+    const [state,setState] = React.useState({
         visible : false,
         ...parseTime(defaultValue,withSeconds),
     })

package/src/components/Dialog/Dialog.js

@@ -308,7 +308,7 @@ DialogComponent.propTypes= {
 
 
 export const DialogControlledComponent = React.forwardRef(({visible:dVisible,...props},ref)=>{
-    const [visible,setVisible] = React.useStateIfMounted(defaultBool(dVisible,false));
+    const [visible,setVisible] = React.useState(defaultBool(dVisible,false));
     const {onDismiss,onClose,onVisibilityChanged,...rest} = props;
     React.useEffect(()=>{
         if(typeof dVisible =='boolean' && dVisible !== visible){

package/src/components/Drawer/DrawerItems/ExpandableItem.js

@@ -11,7 +11,7 @@ export default function ExpandableItem(props){
     let {children,expanded,expandedIcon,testID,minimized,onPress,expandIconProps,unexpandedIcon,onToggleExpand,wrapperProps,...rest} = props;
     testID = defaultStr(testID,"RN_ExpandableDrawerItemComponent")
     wrapperProps = defaultObj(wrapperProps);
-    const [expandedControled,setExpended] = React.useStateIfMounted(defaultBool(expanded,false))
+    const [expandedControled,setExpended] = React.useState(defaultBool(expanded,false))
     let _expanded = expanded;
     if(!isBool(expanded)){
         _expanded = expandedControled;

package/src/components/Drawer/index.js

@@ -91,7 +91,7 @@ const DrawerComponent = React.forwardRef((props,ref)=>{
     if(minimized === undefined){
        minimized = false;
     }
-    const [state,_setState] = React.useStateIfMounted({
+    const [state,_setState] = React.useState({
         minimized,
         permanent,
     });

package/src/components/Dropdown/index.js

@@ -605,7 +605,7 @@ class DropdownComponent extends AppComponent {
     }
     UNSAFE_componentWillReceiveProps(nextProps){
         const {items,defaultValue,selected} = nextProps;
-        if(items !== this.props.items){
+        if(!React.areEquals(items,this.props.items)){
             const nState = this.prepareItems({items,defaultValue,selected});
             return this.updateSelected(nState);
         }
@@ -983,6 +983,9 @@ class DropdownComponent extends AppComponent {
         const ListComponent = isBigList ? BigList : List;
         const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
         dialogProps = defaultObj(dialogProps);
+        if(this.props.name =="RG_Compta"){
+            restProps.testMeCompta = true;
+        }
         return (
             <Fragment>
                 {!withBottomSheet && isMob && anchor}

package/src/components/Fab/Group.js

@@ -125,7 +125,7 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
     const fabIdRef = React.useRef(defaultStr(fabId,uniqid("fab-id-ref")));
     fabId = fabIdRef.current;
     const isMountedRef = React.useRef(false);
-    const [state, setState] = React.useStateIfMounted({ 
+    const [state, setState] = React.useState({ 
         open: typeof customOpen =='boolean'? customOpen : false,
         display : typeof customDisplay ==='boolean'? customDisplay : true,
     });

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

@@ -89,8 +89,8 @@ export const getFilterComponentProps = (_props)=>{
     } else if(type == 'switch' || type =='radio' || type ==='checkbox') {
         type = 'select';
         let {checkedLabel,checkedTooltip,uncheckedTooltip,checkedValue,uncheckedLabel,uncheckedValue,...pR} = props;
-        checkedLabel = defaultVal(checkedLabel,'Non')
-        uncheckedLabel = defaultVal(uncheckedLabel,'Oui')
+        checkedLabel = defaultVal(checkedLabel,'Oui')
+        uncheckedLabel = defaultVal(uncheckedLabel,'Non')
         checkedValue = defaultVal(checkedValue,1); uncheckedValue = defaultVal(uncheckedValue,0)
         props = pR;
         props.items = [{code:checkedValue,label:checkedLabel},{code:uncheckedValue,label:uncheckedLabel}];

package/src/components/Icon/Checkbox.js

@@ -10,7 +10,7 @@ const Checkbox = React.forwardRef((props,ref)=>{
     const {checked:customChecked,color:customColor,primary,secondary,primaryOnCheck,secondaryOnCheck,onChange,checkedIcon:customCheckedIcon,uncheckedIcon:customUncheckedIcon,onPress,...rest} = props; 
     const checkedIcon = defaultStr(checkedIcon,CHECKED_ICON);
     const uncheckedIcon = defaultStr(uncheckedIcon,UNCHECKED_ICON);
-    const [checked,setIsChecked] = React.useStateIfMounted(!!checked);
+    const [checked,setIsChecked] = React.useState(!!checked);
     const isMounted = React.useIsMounted();
     const prevChecked = React.usePrevious(checked);
     const callOnChangeRef = React.useRef(true);
@@ -26,7 +26,7 @@ const Checkbox = React.forwardRef((props,ref)=>{
             onChange({value:checked?1:0,checked});
         }
     },[checked])
-    const [context] = React.useStateIfMounted({
+    const [context] = React.useState({
         check : (callOnChange)=>{
             if(!isMounted()) return;
             if(typeof callOnChange =='boolean'){

package/src/components/Image/Editor/index copy.js

@@ -9,7 +9,7 @@ import Dialog from "$ecomponents/Dialog";
 const ImageEditorComponent = React.forwardRef((props,ref)=>{
     let {source,dialogProps,visible,imageProps,...rest} = props;
     const isMounted = React.useIsMounted();
-    const [context] = React.useStateIfMounted({});
+    const [context] = React.useState({});
     imageProps = defaultObj(imageProps);
     dialogProps = defaultObj(dialogProps);
     context.dialogRef = React.useRef(null);

package/src/components/Image/Editor/index.js

@@ -7,11 +7,11 @@ import {defaultObj} from "$utils";
 const ImageEditorComponent = React.forwardRef((props,ref)=>{
     let {source,uri,onSuccess,imageUri,lockAspectRatio,dialogProps,onDismiss,visible,imageProps,...rest} = props;
     const isMounted = React.useIsMounted();
-    const [context] = React.useStateIfMounted({});
+    const [context] = React.useState({});
     imageProps = defaultObj(imageProps);
     dialogProps = defaultObj(dialogProps);
     context.dialogRef = React.useRef(null);
-    const [imageData,setImageData] = React.useStateIfMounted(null);
+    const [imageData,setImageData] = React.useState(null);
 
 
     return <View style={[styles.container]}>

package/src/components/Label/index.js

@@ -113,7 +113,7 @@ LabelComponentExported.propTypes = {
 export default LabelComponentExported;
 
 LabelComponentExported.withRef = React.forwardRef((props,ref)=>{
-    const [state,setState] = React.useStateIfMounted({
+    const [state,setState] = React.useState({
         children : props.children,
     });
     const context = {

package/src/components/Menu/index.js

@@ -30,7 +30,7 @@ const MenuComponent = React.forwardRef((props,ref)=>{
     testID = defaultStr(testID,"RN_MenuComponent");
     anchorProps.testID = defaultStr(anchorProps.testID,testID+"_Anchor");
     menuProps = defaultObj(menuProps);
-    const [visible, setVisible] = React.useStateIfMounted(false);
+    const [visible, setVisible] = React.useState(false);
     const prevSibible = React.usePrevious(visible);
     const openMenu = (event,callback) => {
         if(callback === true && typeof onAnchorPress ==='function' && onAnchorPress(event) ===false){

package/src/components/Modal/index.js

@@ -92,7 +92,7 @@ const ModalComponent = React.forwardRef((props,ref)=>{
         removeListeners();
       }
       setTimeout(()=>{
-        if(prevVisible.current ===visible) return;
+        if(prevVisible ===visible) return;
         if(visible){
            if(onShow){
             onShow();

package/src/components/PhoneInput/index.js

@@ -61,7 +61,7 @@ export default function PhoneInputComponent(props){
     contentContainerProps = defaultObj(contentContainerProps);
     contentContainerProps.style = [styles.inputContainer,contentContainerProps.style];
     const ref = React.useRef(null);
-    const [state,setState] = React.useStateIfMounted({
+    const [state,setState] = React.useState({
         visible : false,
         ...prepareState({defaultValue,country})
     })

package/src/components/Radio/index.js

@@ -55,7 +55,7 @@ const RadioComponent = React.forwardRef((props,ref)=>{
     } 
     delete p.checked;
     defaultValue = defaultVal(defaultValue,value,0);
-    const [status,setStatus] = React.useStateIfMounted(defaultValue == checkedValue ? checkedStatus : uncheckedStatus)
+    const [status,setStatus] = React.useState(defaultValue == checkedValue ? checkedStatus : uncheckedStatus)
     const previousStatus = React.usePrevious(status);
     const checked = status===checkedStatus?true:false;
     if(checked){

package/src/components/SimpleSelect/index.js

@@ -255,7 +255,7 @@ const  SimpleSelect = React.forwardRef((props,ref)=>{
         />
     const inputRef = React.useRef(null);
     const canFilter = !props.disabled && !props.readOnly && props.editable !== false && visible;
-    const [filterText,setFilterText] = React.useStateIfMounted("");
+    const [filterText,setFilterText] = React.useState("");
     let filterRegex = undefined;
     if(canFilter && isNonNullString(filterText)){
         filterRegex = new RegExp(filterText.replace(matchOperators, '\\$&'), 'gi');

package/src/components/Slider/index.js

@@ -45,7 +45,7 @@ const SliderComponent = React.forwardRef((props,ref)=>{
     valueProps = defaultObj(valueProps);
     contentProps = defaultObj(contentProps);
     const defVal = prepareValue({value,defaultValue});
-    const [sValue,setSValue] = React.useStateIfMounted(defVal)
+    const [sValue,setSValue] = React.useState(defVal)
     const prevValue = React.usePrevious(isArray(sValue) && isDecimal(sValue[0])? sValue[0]:sValue);
     React.useEffect(()=>{
         const value = isArray(sValue) && isDecimal(sValue[0]) ? sValue[0] : isDecimal(sValue)? sValue : undefined;

package/src/components/Switch/index.js

@@ -59,7 +59,7 @@ const SwitchComponent = React.forwardRef((props,ref)=>{
         defaultValue = on ?checkedValue : uncheckedValue;
     } 
     defaultValue = defaultVal(defaultValue,value,0);
-    const [isSwitchOn,setIsSwitchOn] = React.useStateIfMounted(defaultValue == checkedValue ? true : false)
+    const [isSwitchOn,setIsSwitchOn] = React.useState(defaultValue == checkedValue ? true : false)
     const toggleIsSwitchOn = (a)=> {
         if(typeof onPress ==='function' && onPress(a) === false){
             return;

package/src/components/Table/FiltersOrFooters.js

@@ -0,0 +1,18 @@
+// Copyright 2023 @fto-consult/Boris Fouomene. All rights reserved.
+// Use of this source code is governed by a BSD-style
+// license that can be found in the LICENSE file.
+import React from "$react";
+import { View } from "react-native";
+import PropTypes from "prop-types";
+export default function TableFiltersComponent({visible,children:cChildren,...rest}){
+    const children = React.useMemo(()=>{
+        return cChildren;
+    },[cChildren]);
+    return <View {...rest} style={[rest.style,!visible && {height:0,opacity:0,display:'none'}]}>
+        {children}
+    </View>
+}
+
+TableFiltersComponent.propTypes = {
+    visible : PropTypes.bool,
+}

package/src/components/Table/index.js

@@ -7,11 +7,13 @@ import Label from "$ecomponents/Label";
 import { StyleSheet,View as RNView,ScrollView,Dimensions} from "react-native";
 import { getRowStyle } from "$ecomponents/Datagrid/utils";
 import {isMobileNative} from "$cplatform";
+import {isMobileMedia} from "$dimensions";
 import theme from "$theme";
 import AbsoluteScrollView from "./AbsoluteScrollView";
 import Cell from "./Cell";
 import Row from "./Row";
 import List from "./List";
+import FiltersOrFooters from "./FiltersOrFooters";
 const isSCrollingRef = React.createRef();
 const scrollLists = (opts,refs)=>{
     refs.map((ref)=>{
@@ -57,7 +59,7 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
     const emptyData = renderListContent === false ?null : typeof renderEmpty =='function' && !Object.size(data,true)? renderEmpty() : null;
     const hasEmptyData = emptyData && React.isValidElement(emptyData);
     const layoutRef = React.useRef({});
-    React.useOnRender(onRender);
+    
     const preparedColumns = React.useStableMemo(()=>{
         const cols = {},headers = {},footers = {},filters = {},vColumnsMapping = [],visibleColumns = [],columnsNames = [];
         let hasFooters = false;
@@ -151,10 +153,14 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
     const prevData = React.usePrevious(data);
     const prevColumns = React.usePrevious(columns);
     const itemsRef = React.useRef(null);
+    const hasChangedDataRef = React.useRef(false);
+    hasChangedDataRef.current = false;
     const items = React.useMemo(()=>{
         if(data === prevData && prevColumns == columns && Array.isArray(itemsRef.current)){
+            hasChangedDataRef.current = false;
             return itemsRef.current;
         }
+        hasChangedDataRef.current = true;
         const items = [];
         const filter = typeof customFilter =='function'? customFilter : x=>true;
         data.map((item,index)=>{
@@ -230,15 +236,6 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
         get headerScrollViewContext(){return headerScrollViewRef.current},
     }
     const showTableHeaders = showHeaders !== false || showFilters ;
-    const hContent = showTableHeaders &&  headersContent.length ? <View testID={testID+"_Header"} {...headerContainerProps} style={[styles.header,headerContainerProps.style,footersContent.length]}>
-        {headersContent}
-    </View> : null,
-    fContent = showTableHeaders && footersContent.length ? <View testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
-        {footersContent}
-    </View> : null,
-    filtersContent = fFilters.length ? <View testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
-        {fFilters}
-    </View> : null
     const absoluteScrollViewRefCanScroll = React.useRef(true);
     React.setRef(tableRef,context);
     const cStyle = {width:listWidth}
@@ -254,6 +251,20 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
             }
         }
     }
+    React.useOnRender((a,b,c)=>{
+        if(onRender){
+            onRender(a,b,c);
+        }
+        if(hasChangedDataRef.current){
+            if(headerScrollViewRef.current && headerScrollViewRef.current.scrollTo){
+                headerScrollViewRef.current.scrollTo({
+                    x : 0,
+                    y : 0,
+                    animated : true,
+                })
+            }
+        }
+    });
     return <View testID= {testID+"_Container"}  {...containerProps} onLayout={(e)=>{
         layoutRef.current = e.nativeEvent.layout;
         if(containerProps.onLayout){
@@ -266,7 +277,8 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                     {...headerScrollViewProps} 
                     contentContainerStyle = {[allScrollViewProps.contentContainerStyle,headerScrollViewProps.contentContainerStyle,{flex:1,flexWrap: 'wrap'}]}
                     style = {[allScrollViewProps.style,headerScrollViewProps.style,{height:'100%',flex:1,flexWrap:'wrap'}]}
-                    ref={headerScrollViewRef} horizontal {...allScrollViewProps}
+                    ref={headerScrollViewRef} 
+                    horizontal {...allScrollViewProps}
                     onScroll = {getOnScrollCb([scrollViewRef,footerScrollViewRef],null,(args)=>{
                         return;
                         const nativeEvent = args.nativeEvent;
@@ -275,9 +287,15 @@ const TableComponent = React.forwardRef(({containerProps,sortedColumn,listContai
                     showsHorizontalScrollIndicator
             >
                     <View testID={testID+"Header2FootersWrapper"} style={[theme.styles.w100]}>
-                        {hContent}
-                        {filtersContent}
-                        {fContent}
+                        <FiltersOrFooters visible={!!(showTableHeaders &&  headersContent.length)} testID={testID+"_Header"} {...headerContainerProps} style={[styles.header,headerContainerProps.style,footersContent.length]}>
+                            {headersContent}
+                        </FiltersOrFooters>
+                        <FiltersOrFooters visible = {!!fFilters.length} testID={testID+"_Filters"} style={[styles.header,styles.footers,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
+                            {fFilters}
+                        </FiltersOrFooters>
+                        <FiltersOrFooters visible={!!(showTableHeaders && footersContent.length)} testID={testID+"_Footer"} {...footerContainerProps} style={[styles.header,styles.footers,footerContainerProps.style,theme.styles.pt0,theme.styles.pb0,theme.styles.ml0,theme.styles.mr0]}>
+                            {footersContent}
+                        </FiltersOrFooters>
                     </View>
                 </ScrollView>
             </RNView>

package/src/components/TextField/index.js

@@ -126,7 +126,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         }
     }
     const isSecureText = type =="password"?true : false;
-    const [secureTextEntry,setSecureTextEntry] = React.useStateIfMounted(isSecureText);
+    const [secureTextEntry,setSecureTextEntry] = React.useState(isSecureText);
     const prevSecureTextEntry = React.usePrevious(secureTextEntry);
     containerProps = defaultObj(containerProps);
     mode = defaultStr(mode,theme.textFieldMode);
@@ -138,7 +138,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     const isNormalMode = mode == normalMode ? true : false;
     const isFlatMode =  mode == flatMode ? true : false;
     
-    const [inputState, setInputState] = React.useStateIfMounted({
+    const [inputState, setInputState] = React.useState({
         focused : false,
         touched: false,
     });
@@ -152,7 +152,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         if((upper !== true && lower !== true) || isAndroid) return typeof t =='string'? t : "";
         return isNonNullString(t)? (upper ? t.toUpperCase() : lower ? t.toLowerCase():t) : ""
     };
-    const [text, _setText] = React.useStateIfMounted(toCase(defaultValue));
+    const [text, _setText] = React.useState(toCase(defaultValue));
     const previousText = React.usePrevious(text);