@fto-consult/expo-ui 5.4.0 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "5.4.0",
+  "version": "5.5.0",
   "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": "^3.3.5",
+    "@fto-consult/common": "^3.3.6",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "^1.17.11",
     "@react-native-community/datetimepicker": "^6.7.3",
@@ -96,8 +96,8 @@
     "react-native-blob-util": "^0.17.0",
     "react-native-gesture-handler": "~2.9.0",
     "react-native-mime-types": "^2.3.0",
-    "react-native-paper": "^4.12.5",
-    "react-native-paper-dates": "^0.9.2",
+    "react-native-paper": "^5.4.1",
+    "react-native-paper-dates": "^0.15.1",
     "react-native-reanimated": "~2.14.4",
     "react-native-safe-area-context": "^4.5.0",
     "react-native-screens": "~3.20.0",

package/src/components/BottomSheet/Menu.js

@@ -11,17 +11,15 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
     let {anchor,anchorProps,screenIndent,height:customHeight,bindResizeEvent,onDismiss,testID,visible:customVisible,controlled,mobile,animateOnClose,renderMenuContent,sheet,children,...rest} = props;
     rest = defaultObj(rest);
     const isControlled = controlled ? true : false;
-    const visibleRef = React.useRef(null);
     const [state,setState] = React.useState({
         visible : false,
         height : undefined,
     });
-    const visible = typeof visibleRef.current =='boolean'? visibleRef.current : isControlled ? customVisible : state.visible;
-    visibleRef.current = null;
+    const visible = isControlled ? customVisible : state.visible;
     let height = state.height;
     const isMounted = React.useIsMounted();
     const anchorRef = React.useRef(null);
-    const isMobile = x=> mobile || sheet === true || renderMenuContent === false || isMobileMedia() ? true : false;
+    const isMobile = x=> mobile || sheet === true || renderMenuContent === false || isMob ? true : false;
     let isMob = isMobile();
     testID = defaultStr(testID,'RN_BottomSheetMenuComponent');
     const innerRef = React.useRef(null);
@@ -32,9 +30,9 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         getContentHeight(anchorRef,({height})=>{
             setState({...state,visible:true,height});
         },screenIndent);
-    }, close = ()=>{
-        if(!isMobile()) return;
-        if(!isMounted() || !visible) return;
+    }, close = (force)=>{
+        if(force !== true && !isMobile()) return;
+        if(!isMounted() || (force !== true && !visible)) return;
         if(isControlled){
             if(onDismiss){
                 onDismiss({});
@@ -43,6 +41,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         }
         setState({...state,visible:false})
     }
+    const prevIsMob = React.usePrevious(isMob);
     const Component = isMob ? BottomSheet : Menu;
     anchorProps = defaultObj(anchorProps);
     if(isMob){
@@ -67,6 +66,9 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
         delete rest.visible;
         height = undefined;
     }
+    if(prevIsMob !== isMob){
+        rest.visible = visible;
+    }
     if(!isControlled){
         rest.onAnchorPress = ()=>{
             open();
@@ -77,8 +79,7 @@ const BottomSheetMenuComponent = React.forwardRef((props,ref)=>{
     React.useEffect(()=>{
         const closeModal = ()=>{
             if(!isMounted()) return;
-            visibleRef.current = false;
-            setState({...state});
+            close(true);
         }
         if(bindResizeEvent !== false){
             APP.on(APP.EVENTS.RESIZE_PAGE,closeModal);

package/src/components/Menu/Menu.js

@@ -47,18 +47,9 @@ class _Menu extends AppComponent {
     statusBarHeight: APPROX_STATUSBAR_HEIGHT,
     overlayAccessibilityLabel: 'Close menu',
   };
-
-  static getDerivedStateFromProps1(nextProps, prevState) {
-    if (nextProps.visible && !prevState.rendered) {
-      return { rendered: true };
-    }
-
-    return null;
-  }
   constructor(props){
     super(props);
     extendObj(this.state,{
-      rendered: this.props.visible,
       top: 0,
       left: 0,
       menuLayout: { width: 0, height: 0 },
@@ -78,17 +69,13 @@ class _Menu extends AppComponent {
   componentWillUnmount() {
     super.componentWillUnmount();
     this.removeListeners();
+    this.menu = null;
+    this.anchor = null;
   }
 
   anchor = null;
-  menu = null;
   backHandlerSubscription;
 
-  isCoordinate = (anchor) =>
-    !React.isValidElement(anchor) &&
-    typeof anchor?.x === 'number' &&
-    typeof anchor?.y === 'number';
-
   measureMenuLayout = () =>
     new Promise((resolve) => {
       if (this.menu) {
@@ -100,12 +87,6 @@ class _Menu extends AppComponent {
 
   measureAnchorLayout = () =>
     new Promise((resolve) => {
-      const { anchor } = this.props;
-      if (this.isCoordinate(anchor)) {
-        resolve({ x: anchor.x, y: anchor.y, width: 0, height: 0 });
-        return;
-      }
-
       if (this.anchor) {
         this.anchor.measureInWindow((x, y, width, height) => {
           resolve({ x, y, width, height });
@@ -198,8 +179,8 @@ class _Menu extends AppComponent {
       !windowLayout.height ||
       !menuLayout.width ||
       !menuLayout.height ||
-      (!anchorLayout.width && !this.isCoordinate(this.props.anchor)) ||
-      (!anchorLayout.height && !this.isCoordinate(this.props.anchor))
+      (!anchorLayout.width) ||
+      (!anchorLayout.height)
     ) {
       requestAnimationFrame(this.show);
       return;
@@ -255,7 +236,7 @@ class _Menu extends AppComponent {
       useNativeDriver: true,
     }).start(({ finished }) => {
       if (finished) {
-        this.setState({ menuLayout: { width: 0, height: 0 }, rendered: false });
+        this.setState({ menuLayout: { width: 0, height: 0 }});
         this.state.scaleAnimation.setValue({ x: 0, y: 0 });
         this.focusFirstDOMNode(this.anchor);
       }
@@ -283,8 +264,8 @@ class _Menu extends AppComponent {
       opacityAnimation,
       scaleAnimation,
     } = this.state;
-    const rendered = visible;
     const minWidth = defaultDecimal(customMinWidth);
+    const rendered = this.props.visible;
     let { left, top } = this.state;
 
     // I don't know why but on Android measure function is wrong by 24
@@ -458,7 +439,7 @@ class _Menu extends AppComponent {
     
     //- (sameWidth ? anchorLayout.height  : 0)
     const positionStyle = {
-      top: this.isCoordinate(anchor) ? top : top + additionalVerticalValue,
+      top: top + additionalVerticalValue,
       ...(I18nManager.isRTL ? { right: left } : { left }),
     };
     if(sameWidth){
@@ -474,8 +455,9 @@ class _Menu extends AppComponent {
       positionStyle.top = SCREEN_INDENT;
     }
     const maxMenuHeight = windowLayout.height - top - SCREEN_INDENT;
-    const maxHeight = maxMenuHeight >=0 ? Math.max(Math.min(maxMenuHeight,menuLayout.height),150)  : windowLayout.height - SCREEN_INDENT*2;
+    const maxHeight = maxMenuHeight >=0 ? Math.max(Math.max(maxMenuHeight,menuLayout.height),150)  : windowLayout.height - SCREEN_INDENT*2;
     const contentContainerStyle = maxMenuHeight > SCREEN_INDENT ? {maxHeight} : undefined;
+    const hiddenStyle = !rendered ? {display:'none',width:0,opacity:0} : null;
     return (
       <View
         testID = {testID}
@@ -485,17 +467,18 @@ class _Menu extends AppComponent {
         collapsable={false}
         style = {{backgroundColor:'transparent'}}
       >
-        {this.isCoordinate(anchor) ? null : anchor}
-        {rendered ? (
+        {anchor}
+        {true ? (
           <Portal>
-            <TouchableWithoutFeedback
+            {rendered ? <TouchableWithoutFeedback
               testID={testID+"_TouchableWithoutFeedBack"}
               accessibilityLabel={overlayAccessibilityLabel}
               accessibilityRole="button"
               onPress={onDismiss}
+              style = {[hiddenStyle]}
             >
               <View style={[StyleSheet.absoluteFill,{flex:1,backgroundColor:'transparent'}]} testID={testID+"_Backdrop"} />
-            </TouchableWithoutFeedback>
+            </TouchableWithoutFeedback>:null}
             <View
               testID = {testID+"_ContentContainer"}
               ref={(ref) => {
@@ -503,11 +486,11 @@ class _Menu extends AppComponent {
               }}
               collapsable={false}
               accessibilityViewIsModal={visible}
-              style={[styles.wrapper, positionStyle, style]}
+              style={[styles.wrapper, positionStyle, style,hiddenStyle]}
               pointerEvents={visible ? 'box-none' : 'none'}
               onAccessibilityEscape={onDismiss}
             >
-              <Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
+              {rendered?<Animated.View style={{ transform: positionTransforms }} testID={testID+"_Animated"}>
                 <Surface
                   elevation = {5}
                   testID= {testID+"_Content"}
@@ -525,7 +508,7 @@ class _Menu extends AppComponent {
                   {((scrollableMenuHeight|| contentContainerStyle) && (<ScrollView contentContainerStyle={contentContainerStyle} testID={testID+"_ScrollView"}>{children}</ScrollView>
                   )) || children}
                 </Surface>
-              </Animated.View>
+              </Animated.View> : null}
             </View>
           </Portal>
         ) : null}

package/src/components/Menu/index.js

@@ -73,7 +73,7 @@ const MenuComponent = React.forwardRef((props,ref)=>{
         console.error("unable to render menu, anchor not spécified for props",props);
     }
     const context = {openMenu,closeMenu,open:openMenu,close:closeMenu};
-    React.setRef(ref,context);
+    //React.setRef(ref,context);
     if(typeof children =='function'){
         children = children({openMenu,closeMenu,context});
     }
@@ -81,8 +81,17 @@ const MenuComponent = React.forwardRef((props,ref)=>{
         return ()=>{
             React.setRef(ref,null);
         }
-    },[])
-    return  <Menu {...menuProps} testID={testID} visible={visible} onDismiss={closeMenu} anchor={anchor}>
+    },[]);
+    return  <Menu {...menuProps} ref={(el)=>{
+        if(el){
+            for(let i in context){
+                if(!(i in el)){
+                    el[i] = context[i];
+                }
+            }
+        }
+        React.setRef(ref,el);
+    }} testID={testID} visible={visible} onDismiss={closeMenu} anchor={anchor}>
         {renderItems({...props,onPressItem,renderItem,openMenu,closeMenu})}
         {React.isValidElement(children)? children: null}
     </Menu>

package/src/components/Menu/utils.js

@@ -7,7 +7,7 @@ import Expandable from "$ecomponents/Expandable";
 import {cursorPointer} from "$theme";
 import Item from "./Item";
 
-export const MIN_WIDTH = 160;
+export const MIN_WIDTH = 180;
 
 export const renderItems = (props)=>{
     let _items = [];