@fto-consult/expo-ui 8.73.0 → 8.74.0

package/bin/create-app/App.js

@@ -127,6 +127,27 @@ export default function AppMainEntry(){
                 ({object})=><{object}>, la fonction permettant de muter les props du composant Fab, affiché dans les écrans par défaut
             */
             fabPropsMutator : (props)=>props,
+            /****
+                les props personnalisés à passer au composant ProfilAvatar
+                @param {
+                    user <Object>, l'objet en rapport à l'utilisateur connecté
+                    canSignOut <boolean>, renseigne si l'utilisateur peut se déconnecté. est à false lorsque la gestion de l'authentification est désactivé,
+                    renderedOnAppBar <boolean>, renseigne si l'avatar est rendu sur l'AppBar où sur le drawer
+                    closeDrawer : (callback<function>)=><any>, la fonction permettant de fermer le drawer, lorsque celui-ci est en mode temporaire
+                    navigateToPreferences : <func>, la fonction permettant de naviguer vers les préférences utilisateurs,
+                    signOut <func>, la fonction permetant de déconnecter l'utilisateur 
+                    ...rest,
+                },
+                @return <object> {
+                    pseudo <string>, le pseudo à utiliser pour l'affichage du profil avatar
+                    label <string>, le label, le sous nom à afficher juste en bas du pseudo
+                    ...imageProps <object>, les props à utilser pour le rendu de l'avatar, idem au props du composant image,
+                    menuItems : <array | object>, les items supplémentaires à afficher pour le rendu du menu,
+                    preferencesMenuItem : <boolean>, si l'items préférence sera rendu dans les items du menu
+                    signOutMenuItem : <boolean>, si l'item Déconnection sera rendu des les items de menu
+                }
+            */
+            profilAvatarProps : ({user,renderedOnAppBar,closeDrawer,canSignOut})=>({}),
         }}
         /*** //for application initialization
             @param {
@@ -145,6 +166,14 @@ export default function AppMainEntry(){
         beforeExit = {()=>Promise.resolve(true)}    
         
         handleHelpScreen ={true} //si l'écran d'aide sera pris en compte, l'écran d'aide ainsi que les écrans des termes d'utilisations et autres
+        /***
+            Les filtres vers les icons Set
+            @param {object} font, l'objet font parmis la liste des fonts icons supportés : voir : https://icons.expo.fyi/Index
+            @param {string} fontName, le nom de la font
+            @param {string} fontNameLower, le nom de la font en lowerCase
+            @return {boolean}, si true, l'icon set sera pris en compte
+        */
+        FontsIconsFilter ={(font,fontName,fontNameLower)=>false}
     />
 }  
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.73.0",
+  "version": "8.74.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {
@@ -70,7 +70,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.44.3",
+    "@fto-consult/common": "^4.45.0",
+    "@fto-consult/expo-ui": "^8.73.1",
     "apexcharts": "^3.48.0",
     "file-saver": "^2.0.5",
     "google-libphonenumber": "^3.2.34",

package/src/components/BottomSheet/Sheet.js

@@ -59,7 +59,6 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
         modalProps,
         titleProps : _titleProps,
         withScrollView,
-        bindResizeEvent,
         scrollViewProps : _scrollViewProps,
         actionTitle,
         elevation:customElevation,
@@ -228,12 +227,8 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
     
     React.setRef(ref,{close:closeModal,open})
     React.useEffect(()=>{
-        if(bindResizeEvent && false){
-            APP.on(APP.EVENTS.RESIZE_PAGE,closeModal);
-        }
         return ()=>{
             removeListeners();
-            APP.off(APP.EVENTS.RESIZE_PAGE,closeModal);
             React.setRef(ref,null);
         }
     },[]);
@@ -326,7 +321,6 @@ BottomSheetComponent.propTypes = {
 
 BottomSheetComponent.defaultProps = {
   withScrollView : PropTypes.bool,
-  bindResizeEvent : PropTypes.bool,
   animationType: isNativeMobile ? "slide" : "fade",//Background animation ("none", "fade", "slide")
   height:undefined,//Height of Bottom Sheet
   minClosingHeight: 0,//Minimum height of Bottom Sheet before close

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

@@ -21,8 +21,8 @@ import BackToTop from "$ecomponents/BackToTop";
 import FiltersAccordionComponent from "./Filters";
 import RenderType from "../RenderType";
 import { flatMode} from "$ecomponents/TextField";
-//import List from "$ecomponents/Table/List";
-import List from "$ecomponents/List/FlashList";
+import List from "$ecomponents/Table/List";
+//import List from "$ecomponents/List/FlashList";
 import theme,{Colors} from "$theme";
 import {styles as rStyles} from "../utils";
 import Avatar from "$ecomponents/Avatar";

package/src/components/Icon/Font.js

@@ -19,6 +19,7 @@ import MaterialIcons from "@expo/vector-icons/MaterialIcons";
 import Octicons from "@expo/vector-icons/Octicons";
 import SimpleLineIcons from "@expo/vector-icons/SimpleLineIcons";
 import Zocial from "@expo/vector-icons/Zocial";
+import Colors from "$theme/colors";
 
 /*** @see : https://icons.expo.fyi/ popur tous les icons supportés*/
 /*** L'iconSet par défaut est le MaterialCommunityIcon qui ne nécessite pas de préfixer les noms des icones

package/src/context/Provider.js

@@ -67,6 +67,7 @@ Object.map(Utils,(v,i)=>{
         fabPropsMutator : ({object})=><{object}>, la fonction permettant de muter les props du composant Fab, affiché dans les écrans par défaut,
         TableDataScreen | TableDataScreenItem : {ReactComponent}, le composant TableDataScreenItem, à utiliser pour le rendu des écrans
         TableDataScreenList | TableDataListScreen {ReactComponent}, le composant TableDataList à utiliser pour le rendu des écrans listants les éléments du table data
+        profilAvatarProps : {function | object}, si fonction, ({user,size,renderedOnAppBar,})=>{pseudo,label,size,menuItems,...rest}
     },
     
     navigation : {

package/src/layouts/ProfilAvatar/index.js

@@ -16,13 +16,31 @@ import appConfig from "$capp/config";
 import Preloader from "$preloader";
 import {defaultNumber} from "$cutils";
 import Tooltip from "$ecomponents/Tooltip";
+import PropTypes from "prop-types";
+import { useContext } from "$econtext/hooks";
 
-const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps:customChevronIconProps,size,withLabel,...props},ref)=>{
+const UserProfileAvatarComponent = React.forwardRef(({drawerRef,renderedOnAppBar,chevronIconProps:customChevronIconProps,size,withLabel,menuItems,...props},ref)=>{
     let u = defaultObj(Auth.getLoggedUser());
     const deviceNameRef = React.useRef(null);
     const deviceName = appConfig.deviceName;
     customChevronIconProps = defaultObj(customChevronIconProps);
     props = defaultObj(props);
+    const navigateToPreferences = (a)=>{
+        closeDrawer(()=>{
+            return navigate({
+                routeName : screenName,
+                params : {
+                    user : u,
+                }
+            })
+        });
+    };
+    const signOut = (a)=>{
+        closeDrawer(()=>{
+            Preloader.open("Déconnexion en cours...");
+            Auth.signOut().finally(Preloader.close)
+        });
+    };
     const closeDrawer = cb => {
         if(drawerRef && drawerRef.current && drawerRef.current.close){
             return drawerRef && drawerRef.current && drawerRef.current.close(cb);
@@ -37,8 +55,15 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
     size = defaultNumber(size,!withLabel?40:40);
     const userPseudo = Auth.getUserPseudo();
     const defaultPseudo = "Default User";
-    const pseudo = defaultStr(userPseudo,Auth.getUserCode(),Auth.getUserEmail(),appConfig.authDefaultUsername,defaultPseudo);
-    const label = defaultStr(Auth.getUserFullName(),userPseudo);
+    const canSignOut = Auth.canSignOut();
+    const {components:{profilAvatarProps}} = useContext();
+    const customProps = Object.assign({},typeof profilAvatarProps =='function'? profilAvatarProps({...props,signOut,navigateToPreferences,canSignOut,closeDrawer,user:u,size,close:closeDrawer,setDeviceId:onLongPress,renderedOnAppBar,}) : profilAvatarProps);
+    if(typeof customProps.size =="number"){
+        size = customProps.size;
+    }
+    const pseudo = defaultStr(customProps.pseudo,userPseudo,Auth.getUserCode(),Auth.getUserEmail(),appConfig.authDefaultUsername,defaultPseudo);
+    const label = defaultStr(customProps.label,Auth.getUserFullName(),userPseudo);
+    delete customProps.label;
     const onLongPress = ()=>{
         appConfig.setDeviceId().then((r)=>{
             if(deviceNameRef.current && deviceNameRef.current.update){
@@ -48,15 +73,16 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
     };
     const pseudoTooltip = (pseudo == defaultPseudo ? `Pour modifier la valeur du pseudo actuel, définissez dans le fichier package.json, la propriété : authDefaultUsername de type chaine de caractère`:"");
     const tooltip = "Pressez longtemps pour définir un identifiant unique pour l'appareil";
-    const pseudoContent = <Label splitText numberOfLines={1} style={{color:theme.colors.primaryOnSurface,fontSize:15}}>{pseudo}</Label>;
-    const children = <View style={[styles.labelContainer,!withLabel && theme.styles.justifyContentCenter]}>
+    const testID = defaultStr(customProps.testID,props.testID,"RN_ProfilAvatar")
+    const pseudoContent = <Label testID={testID+"_PseudoContent"} splitText numberOfLines={1} style={{color:theme.colors.primaryOnSurface,fontSize:15}}>{pseudo}</Label>;
+    const children = <View testID={testID+"_AnchorContainer"} style={[styles.labelContainer,!withLabel && theme.styles.justifyContentCenter]}>
         {pseudoTooltip?<Tooltip title={pseudoTooltip}>
             {pseudoContent}
         </Tooltip>:pseudoContent}
-        <Label splitText numberOfLines={1} style={[{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6},!withLabel && {textAlign:'center'}]}>
+        {label != pseudo ? <Label testID={testID+"_ProfilAvatarLabel"} splitText numberOfLines={1} style={[{fontSize:12,color:theme.colors.secondaryOnSurface,marginTop:6},!withLabel && styles.withNotLabel]}>
             {label}
-        </Label>
-        {deviceName && <Label.withRef textBold splitText title={"Identifiant unique de l'application, installé sur cet appareil"} ref={deviceNameRef} secondary style={{fontSize:10}}>
+        </Label>:null}
+        {deviceName && <Label.withRef testID={testID+"_ProfilAvatarDeviceName"} textBold splitText title={"Identifiant unique de l'application, installé sur cet appareil"} ref={deviceNameRef} secondary style={{fontSize:10}}>
             [{deviceName}]
         </Label.withRef> || null}
     </View>
@@ -68,30 +94,22 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                 closeOnPress : false,
                 divider : true,
             },
-            {
+            ...(Array.isArray(menuItems)? menuItems : isObj(menuItems)? Object.keys(menuItems).map(k=>{
+                return menuItems[k];
+              }) : []),
+              ...(Array.isArray(customProps.menuItems)? customProps.menuItems : isObj(customProps.menuItems)? Object.keys(customProps.menuItems).map(k=>{
+                return customProps.menuItems[k];
+              }) : []),
+            customProps.preferencesMenuItem != false && {
                 label : i18n.lang("preferences",'Préférences'),
                 icon : "account-cog",
-                onPress : (a)=>{
-                    closeDrawer(()=>{
-                        return navigate({
-                            routeName : screenName,
-                            params : {
-                                user : u,
-                            }
-                        })
-                    });
-                }
+                onPress : navigateToPreferences,
             },
-            Auth.canSignOut() && {
+            canSignOut && customProps.signOutMenuItem !== false && {
                 label : i18n.lang("logout",'Déconnexion'),
                 icon : "logout",
-                onPress : (a)=>{
-                    closeDrawer(()=>{
-                        Preloader.open("Déconnexion en cours...");
-                        Auth.signOut().finally(Preloader.close)
-                    });
-                }
-            }
+                onPress : signOut,
+            },
         ];
       
       const onChangeAvatar = ({dataURL})=>{
@@ -105,7 +123,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
             }
             Auth.upsertUser({...u,avatar:u.avatar},false);
       }
-      return <View ref ={ref}>
+      return <View ref ={ref} testID={testID+"_ProfilAvatarWrapper"}>
             <Menu
              anchor = { (aProps)=>{
                 const chevronIconProps = {
@@ -117,19 +135,21 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                     style : [styles.icon,withLabel=== false && {color:theme.colors.onPrimary},customChevronIconProps.style],
                 }
                 if(!withLabel){
-                    return <View testID={"RNProfilAvatar_AvatarContainer"} style={[theme.styles.row,theme.styles.alignItemsCenter]}>
+                    return <View testID={testID+"_AvatarContainer"} style={[theme.styles.row,theme.styles.alignItemsCenter,theme.styles.pr1]}>
                         <Image
                             pickImageProps = {{quality:0.4}}
                             {...props} 
                             {...aProps}
+                            {...customProps}
                             size={size}
                             style = {styles.itemLeft}
-                            testID = {"RN_ProfilAvatar_Avatar"}
+                            testID = {testID+"_Avatar"}
                             readOnly = {false}
                             defaultSource ={avatarProps.defaultSrc}
                             onChange = {onChangeAvatar}
                         />
-                        <Icon 
+                        <Icon.Font
+                            testID={testID+"_ChevronIcon"}
                             {...chevronIconProps}
                             {...aProps}
                             style = {[chevronIconProps.style,{marginLeft:-5}]}
@@ -137,6 +157,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                     </View>
                 }
                 return <Pressable
+                        testID={testID+"_ProfilAvatarContainer"}
                         normal
                         upperCase = {false}
                         disableRipple
@@ -148,15 +169,17 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                     >
                         <Image
                             {...props} 
+                            {...customProps}
                             size={size}
                             style = {styles.itemLeft}
-                            testID = {"RN_ProfilAvatar_AvatarImage"}
+                            testID = {testID+"_Avatar"}
                             readOnly = {false}
                             defaultSource ={avatarProps.defaultSrc}
                             onChange = {onChangeAvatar}
                         />
                         {children}
                         <Icon 
+                            testID={testID+"_ChevronIcon"}
                             {...chevronIconProps}
                         />
                     </Pressable>
@@ -185,6 +208,9 @@ const styles = StyleSheet.create({
         maxWidth : 140,
         minWidth : 100,
     },
+    withNotLabel : {
+        textAlign : "center",
+    },
     pseudo : {
         flexDirection : "row",
         justifyContent : "center",
@@ -197,9 +223,35 @@ const styles = StyleSheet.create({
     icon : {
         marginHorizontal:0,
         paddingHorizontal : 0,
-    }
-})
+    },
+    notLabelHeader : {
+        textAlign : "left",
+        alignSelf :"flex-start"
+    },
+});
 
 export default UserProfileAvatarComponent;
 
-UserProfileAvatarComponent.displayName = "UserProfileAvatarComponent";
+UserProfileAvatarComponent.displayName = "UserProfileAvatarComponent";
+
+UserProfileAvatarComponent.propTypes = {
+    renderedOnAppBar : PropTypes.bool,//spécifie si le profil avatar est rendu si true sur l'appBar, si false sur le drawer
+    ...Object.assign({},Image.propTypes), //par défaut les props de l'image qui est utilisée pour le rendu de l'avatar
+    withLabel : PropTypes.bool, //si le label sera affiché, ie, le nom où pseudo de l'utilisateur
+    menuItems : PropTypes.oneOfType([
+        PropTypes.array,
+        PropTypes.object,
+    ]),
+    /****
+      La props customProps issue de la propriété {component:profilAvatarProps} de useContext, prend les propriétés suivatnes : 
+      il peut s'agir d'une fonction où d'un objet. s'il s'agit d'une fonction alors la dite fonction est de la forme : 
+      ({canSignOut<boolean>,renderedOnAppBar<boolean>,user<object>,....rest})=> <CustomAvatarProps>
+      <CustomAvatarProps> : {
+         ...Image.propTypes,
+         size <number>,
+         pseudo <string>, le pseudo à afficher
+         label <string>, la chaine de caractère à afficher pour le rendu du label/FullName,
+         menuItems : <Array<object> | object<object>>, les menu items personnalisés à utiliser pour l'affichage
+      }
+    */
+}

package/src/layouts/Screen/Screen.js

@@ -6,10 +6,10 @@ import Container from "$cauth/Container";
 import ScreenWithoutAuthContainer from "./ScreenWithoutAuthContainer";
 import ProfilAvatar from "$elayouts/ProfilAvatar";
 import {defaultObj,defaultBool} from "$cutils";
-import View from "$ecomponents/View";
 import theme from "$theme";
+import React from "$react";
 
-export default function MainScreenComponent({profilAvatarProps,withDrawer,allowDrawer,profilAvatarContainerProps,withProfilAvatarOnAppBar:cWithPorilAvatarOnAppbar,authProps,authRequired,...props}){
+export default function MainScreenComponent({profilAvatarProps,appBarProps,testID,withDrawer,allowDrawer,profilAvatarContainerProps,withProfilAvatarOnAppBar:cWithPorilAvatarOnAppbar,authProps,authRequired,...props}){
     authProps = Object.assign({},authProps),
     profilAvatarContainerProps = defaultObj(profilAvatarContainerProps);
     profilAvatarProps = defaultObj(profilAvatarProps);
@@ -18,16 +18,26 @@ export default function MainScreenComponent({profilAvatarProps,withDrawer,allowD
     if(allowDrawer === false){
        withDrawer = false;
     }
+    testID = defaultStr(testID,"RN_MainScreenComponent");
     const withProfilAvatarOnAppBar = cWithPorilAvatarOnAppbar !== false && withDrawer && !theme.showProfilAvatarOnDrawer ? true : false;
-    return <Container authProps={authProps} required={authRequired}>
+    appBarProps = defaultObj(appBarProps);
+    const {right} = appBarProps;
+    if(withProfilAvatarOnAppBar){
+      appBarProps.right = (...p)=>{
+         const r = typeof right =='function'? right(p) : right;
+         return <>
+            <ProfilAvatar renderedOnAppBar withLabel={false} size={40}  {...profilAvatarProps}/>
+            {React.isValidElement(r)? r : null}
+         </>
+      }
+    }
+    return <Container authProps={authProps} required={authRequired} testID={testID}>
         <ScreenWithoutAuthContainer
           {...props}
           withDrawer={withDrawer}
           allowDrawer={allowDrawer}
           authRequired = {authRequired}
-          right = {withProfilAvatarOnAppBar && <View testID={testID+"_ProfilAvatar_Container"}  {...profilAvatarContainerProps} style={[profilAvatarContainerProps.style,styles.profilAvatarContainer]} >
-            {<ProfilAvatar withLabel={false}  {...profilAvatarProps}/>}
-         </View> || null}
+          appBarProps={appBarProps}
       />
     </Container>
 }

package/src/layouts/Screen/ScreenWithoutAuthContainer.js

@@ -37,7 +37,7 @@ export default function MainScreenScreenWithoutAuthContainer(props) {
     contentContainerStyle,
     options,
     backAction,
-    appBarProps,
+    appBarProps:cAppbarProps,
     elevation,
     withFab,
     withNotifications,
@@ -63,7 +63,7 @@ export default function MainScreenScreenWithoutAuthContainer(props) {
   containerProps = defaultObj(containerProps);
   backgroundColor = theme.Colors.isValid(backgroundColor)? backgroundColor : theme.colors.background;
   options = defaultObj(options);
-  appBarProps = defaultObj(appBarProps);
+  const {right,left,...appBarProps} = defaultObj(cAppbarProps);
   title = defaultVal(title,appBarProps.title);
   subtitle = defaultVal(subtitle,appBarProps.subtitle);
   notificationsProps = {...Object.assign({},notificationsProps),...Object.assign({},appBarProps.notificationsProps)};
@@ -117,6 +117,7 @@ export default function MainScreenScreenWithoutAuthContainer(props) {
             {appBar === false ? null : React.isValidElement(appBar)? AppBar :  <AppBar 
                 testID={testID+'_AppBar'} 
                 {...appBarProps} 
+                left = {left}
                 backAction = {defaultVal(appBarProps.backAction,backAction)} 
                 elevation={defaultNumber(appBarProps.elevation,elevation)} 
                 notificationsProps = {notificationsProps}
@@ -124,6 +125,7 @@ export default function MainScreenScreenWithoutAuthContainer(props) {
                 ref={appBarRef} title={title} 
                 subtitle={subtitle}
                 withNotifications = {withNotifications}
+                right = {right}
             />}
             {withScrollView !== false ? (
               <ScrollView

package/src/pdf/Reader/index.js

@@ -0,0 +1,6 @@
+export default function(){
+    return null;
+}
+
+export const open = ()=>{
+};

package/src/pdf/Reader/index.web.js

@@ -1,178 +1,21 @@
-/**@see : https://github.com/pipwerks/PDFObject#readme */
-let {Dialog} = require("$ecomponents/Dialog")
-let Icon = require("$ecomponents/Icon")
-require("./styles.css")
-let PDFObject = require("pdfobject")
-let {MenuButton} = require("$ui")
-let isMSE = //checkEdge ? false : 
-            window.navigator && typeof window.navigator.msSaveOrOpenBlob == "function" ? true : false;
-class PDFViewer extends APP.Component {
-    constructor(props){
-        super(props);
-        APP.extend(this._events,{
-            resize : this.resetPos.bind(this)
-        })
-        this.autobind();
-    }
+import React from "$react";
+import DialogProvider from "$ecomponents/Dialog/Provider";
 
-    componentDidMount(){
-        super.componentDidMount();
-        this.updatePdfContent();
-        window.addEventListener('resize',this._events.resize, true)
-        this.resetPos();
-    }
-    resetPos (){
-        if(!this._isMounted()) return;
-        let pdfWrap = document.getElementById(this.pdfViewerWrapperDomId);
-        if(isDOMElement(pdfWrap)){
-            let parent = pdfWrap.parentNode;
-            let mP = pdfWrap.closest(".dialog.md-dialog-container");
-            if(isDOMElement(parent) && isDOMElement(mP)){
-                let maxHeight = mezr.height(parent);
-                let maxH2 = mezr.height(mP);
-                let min = Math.min(maxHeight,maxH2);
-                if(min == 0){
-                    min = "100%";
-                } else min = min+"px";
-                pdfWrap.style.height = min;
-            }
-        }
-    }
+let dialogRef = null;
 
-    componentDidUpdate(){
-        super.componentDidUpdate();
-        if(this.dialogRef && this.dialogRef.open){
-            this.dialogRef.open();
-        }
-        this.updatePdfContent()
-        this.resetPos();
-    }
-    componentWillUnmount(){
-        super.componentWillUnmount();
-        this.dialogRef = undefined;
-        window.removeEventListener('resize',this._events.resize, true)
-        this.clearEvents();
-    }
-    viewCapacitor (){
-        let f = window.PreviewAnyFile || (cordova && cordova.plugins.PreviewAnyFile);
-        if(f && f.preview){
-            f = f.preview;
-            let {file} = this.props;
-            APP.FILE.getCapacitorPDFromDataURL({content:file,fileName:this.props.fileName,success:({path})=>{
-                if(isFunction(f)){
-                    f(
-                        path,
-                        function(win){}, 
-                        function(err){
-                            console.log(err," pdf viewer in cap android ios")   
-                        }
-                    )
-                }
-            }}) 
-        }
-    }
-    updatePdfContent(){
-        let file = this.props.file;
-        if (isMSE) {
-            let b64 = dataURLToBase64(file);
-            if(b64){
-                var byteCharacters = atob(b64);
-                var byteNumbers = new Array(byteCharacters.length);
-                for (var i = 0; i < byteCharacters.length; i++) {
-                    byteNumbers[i] = byteCharacters.charCodeAt(i);
-                }
-                var byteArray = new Uint8Array(byteNumbers);
-                var blob = new Blob([byteArray], {
-                    type: 'application/pdf'
-                });   
-                return window.navigator.msSaveOrOpenBlob(blob, defaultStr(this.props.title,'données-impr')+".pdf");
-            }
-            return null;
-        }
-        if(isElectron()){
-            return ELECTRON.PRINTER.preview({
-                content:this.props.file,
-                fileName : this.props.fileName,
-                fileExtension : 'pdf',
-            });
-        }
-        if(isCapacitor(true)){
-            return this.viewCapacitor();
-        }
-        let dom = document.getElementById(this.pdfViewerWrapperDomId);
-        if(isDOMElement(dom)){
-            try {
-                this.pdfInstance = PDFObject.embed(file,dom);
-            } catch (e){
-                console.log(e,' error on loading pdf file')
-            }
-        }
-    }
-    UNSAFE_componentWillReceiveProps(nexProps,prevProps){
-        if(nexProps.file && nexProps.file != this.state.file){
-            this._pageNumber = 1;
-        }
-    }
-    onPrint (args){
-        console.log(args,' was printed');
-    }
-    getPrintSettings(){
-        return defaultObj(this.props.printProps,this.props.printOptions);
-    }
-    render (){
-        if(isMSE || isElectron() || isCapacitor(true)) return null;
-        let {file,dialogProps,title,onPrint,printProps,printOptions,fileName,...rest} = this.props;
-        dialogProps = defaultObj(dialogProps);
-        dialogProps.contentProps = defaultObj(dialogProps.contentProps)
-        dialogProps.contentProps.id = defaultStr(dialogProps.contentProps.id,this.dialogWrapperParentId,uniqid('dialog-content-wrp-par'))
-        this.dialogWrapperParentId = dialogProps.contentProps.id;
-        dialogProps.contentProps.className = classNames(dialogProps.contentProps.className,'no-padding pdf-viewer-dialog-content')
-        dialogProps.className = classNames(dialogProps.className,'pdf-viewer-dialog')
-        dialogProps.title = defaultStr(dialogProps.title,title)
-        rest = defaultObj(rest)
-        let {actions} = dialogProps;
-        let acts = []
-        let mIts = []
-        if(mIts.length > 0){
-            acts.push(
-                <MenuButton
-                    menuItems = {mIts}
-                    flat
-                    id = {uniqid("view-page-id-butt")}
-                >
-                    {<Icon name="material-more_vert" title={"pages"}/>}
-                </MenuButton>
-            )
-        }
-        Object.map(actions,(a,i)=>{
-            if(!a) return;
-            acts.push(a);
-        })
-        this.pdfViewerWrapperDomId = defaultStr(this.pdfViewerWrapperDomId,uniqid("pdf-viewer-wrapper-id"))
-        return (
-                <Dialog 
-                    key = {_uniqid("dialog-pdf-viewer-key-id")}
-                    {...dialogProps}
-                    ref = {(el)=>{
-                        if(el){
-                            this.dialogRef = el;
-                        }
-                    }}
-                    fullPage
-                    visible
-                    actions = {acts}
-                >
-                    <div className="pdf-viewer-wrapper w100 h100" id={this.pdfViewerWrapperDomId}></div>
-                </Dialog>
-          );
-    }
+export default function WebPDFReader(){
+    dialogRef = React.useRef(null);
+    return <>
+        <DialogProvider
+            ref = {dialogRef}
+            responsive = {false}
+        />
+    </>
 }
 
-module.exports = PDFViewer;
-PDFViewer.PDFObject = PDFObject;
-
-PDFViewer.propTypes = {
-    ...Document.propTypes,
-    /*** méthode appelée lorsque le document est imprimé */
-    onPrint : PropTypes.func,
+export const open = (props)=>{
+    if(!dialogRef || !dialogRef?.current) return;
+    DialogProvider.open({
+        ...props,
+    },dialogRef.current);
 }