@fto-consult/expo-ui 8.6.0 → 8.7.0

package/bin/create-app/dependencies.js

@@ -11,6 +11,7 @@ module.exports = {
     "@react-navigation/stack": "^6.3.20",
     "@shopify/flash-list": "1.6.3",
     "expo": "^50.0.2",
+    "expo-barcode-scanner": "~12.9.2",
     "expo-camera": "~14.0.1",
     "expo-clipboard": "~5.0.1",
     "expo-font": "~11.10.2",

package/bin/create-app.js

@@ -116,10 +116,13 @@ const createAPPJSONFile = (projectRoot,{name,version})=>{
       "cameraPermission" : `Autoriser $(PRODUCT_NAME) à accéder à votre camera`
     }, cameraPluginsOptions = {
       "cameraPermission" : `Autoriser $(PRODUCT_NAME) à accéder à votre camera`
+    }, barCodePermission = {
+      "cameraPermission": "Autoriser $(PRODUCT_NAME) à accéder à la caméra."
     };
     const plugins = [
       ["expo-image-picker",imagePluginOptions],
-      ["expo-camera",cameraPluginsOptions]
+      ["expo-camera",cameraPluginsOptions],
+      ["expo-barcode-scanner",barCodePermission]
     ];
     appSheme = name? sanitizeFileName(name).replace(/ /g, '') : null;
     const appJSONPath = path.join(projectRoot,"app.json");
@@ -176,14 +179,16 @@ const createAPPJSONFile = (projectRoot,{name,version})=>{
             if(!Array.isArray(appPlugins)){
               appPlugins = plugins;
             } else {
-              let hasFoundCamera = false, hasFoundImagePicker = false;
+              let hasFoundCamera = false, hasFoundImagePicker = false,hasFoundBarCode = false;
               appPlugins.map(pl=>{
                 if(Array.isArray(pl)){
                   if(typeof pl[0] ==="expo-image-picker"){
                     hasFoundImagePicker = true;
                   } else if(pl[0] === "expo-camera"){
                     hasFoundCamera = true;
-                  }   
+                  }  else if(pl[0] =="expo-barcode-scanner"){
+                    hasFoundBarCode = true;
+                  } 
                 }
               });
               if(!hasFoundImagePicker){
@@ -192,6 +197,9 @@ const createAPPJSONFile = (projectRoot,{name,version})=>{
               if(!hasFoundCamera){
                 appPlugins.push(plugins[1]);
               }
+              if(!hasFoundBarCode){
+                appPlugins.push(plugins[2]);
+              }
             }
             appJSONManager.set({
               expo : {plugins:appPlugins}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.6.0",
+  "version": "8.7.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",

package/src/components/BarcodeScanner/index.js

@@ -0,0 +1,148 @@
+import React, { useState, useEffect,useMemo } from '$react';
+import { View, StyleSheet} from 'react-native';
+import { BarCodeScanner } from 'expo-barcode-scanner';
+import theme from "$theme";
+import ActivityIndicator from "$ecomponents/ActivityIndicator";
+import Label from "$ecomponents/Label";
+import PropTypes from "prop-types";
+import { isNonNullString,defaultStr } from '$cutils';
+import Button from "$ecomponents/Button";
+import Dialog from "$ecomponents/Dialog";
+
+export const scannerTypes = {back:"back",front:"front"};
+
+/***@see : https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/ */
+export default function App({onScan,onGrantAccess,testID,onDenyAccess,scannerProps,onCancel,dialogProps}) {
+  testID = defaultStr(testID,"RN_BarCodeScanner");
+  const [hasPermission, setHasPermission] = useState(null);
+  const [visible,setVisible] = useState(true);
+  dialogProps = Object.assign({},dialogProps);
+  scannerProps = Object.assign({},scannerProps);
+  const prevVisible = React.usePrevious(visible);
+  const cancelRef = React.useRef(false);
+  const cancel = ()=>{
+    cancelRef.current = true;
+    setVisible(false);
+  }
+  const getCameraType = ()=>{
+    let {type} = scannerProps;
+    if(isNonNullString(type)){
+      type = type.toLowerCase().trim();
+    } else type  = scannerTypes.back;
+    if(!scannerTypes[type]){
+      type = scannerTypes.back;
+    }
+    return type;
+  }
+  const sType = useMemo(()=>{
+    return getCameraType();
+  },[scannerProps.type]);
+  const [scannerType,setScannerType] = useState(sType);
+  useEffect(()=>{
+    const type = getCameraType();
+    if(type !== scannerType){
+      setScannerType(type);
+    }
+  },scannerProps.type)
+  const isBack = scannerType === scannerTypes.back;
+  useEffect(() => {
+    const getBarCodeScannerPermissions = async () => {
+      const { status } = await BarCodeScanner.requestPermissionsAsync();
+      setHasPermission(status === 'granted');
+    };
+
+    getBarCodeScannerPermissions();
+  }, []);
+
+  const handleBarCodeScanned = ({ type, data,...rest }) => {
+    //setScanned(true);
+    if(typeof onScan =="function"){
+        onScan({type,data,code:data,barCode:data,...rest});
+    }
+    setVisible(false);
+  };
+  useEffect(()=>{
+    if(hasPermission ===false){
+        if(typeof onDenyAccess =="function"){
+            return onDenyAccess();
+        }
+    } else if(hasPermission !== null){
+        if(typeof onGrantAccess =="function"){
+            onGrantAccess();
+        }
+    }
+  },[hasPermission]);
+  useEffect(()=>{
+    if(prevVisible === visible) return;
+    if(prevVisible && !visible && cancelRef.current && typeof onCancel =="function"){
+        onCancel();
+    }
+    cancelRef.current = false;
+  },[visible]);
+  const switchCameraBtn = {
+      text : "Pivoter la camera",
+      icon : "camera-flip",
+      tooltip : `Cliquez pour basculer à la camera ${isBack ? "frontable":"arrière"}`,
+      onPress : ()=>{
+        setScannerType(isBack ? scannerTypes.front : scannerTypes.back);
+      }
+  };
+  return <Dialog 
+    fullPage 
+    actions={[switchCameraBtn]} 
+    title = {`Scanner un code barre`}
+    {...dialogProps}
+    onBackActionPress={cancel}
+    visible = {visible}
+  >
+      {hasPermission === null || hasPermission === false ? <View style={[styles.center]}>
+        {hasPermission === false ? <Label fontSize={18} error textBold>Accès à la camera refusée. Vous devez autoriser l'accès à la camera.</Label> : 
+        <View style={[styles.row]}>
+          <Label fontSize={18} warning textBold>Demande d'autorisation pour l'accès à la camera...</Label>
+          <ActivityIndicator size={'large'}/>
+        </View>}
+      </View> : <View style={[theme.styles.flex1]} testID={testID}>
+          <BarCodeScanner
+            ratio='16:9'
+            testID={testID+"_ScannerContent"}
+            {...scannerProps}
+            type={scannerType}
+            style={[theme.styles.flex1,{width:"100%",height:"100%"},scannerProps.style]}
+            onBarCodeScanned={handleBarCodeScanned}
+          />
+          <View style={[styles.row,theme.styles.w100]}>
+              <Button
+                primary
+                {...switchCameraBtn}
+                style={[theme.styles.p1]}
+              />
+              <Button
+                error
+                children = {"Annuler"}
+                icon = "camera-off"
+                title = {"Cliquez pour annuler l'opération"}
+                onPress = {cancel}
+              />
+          </View>
+        </View>}
+  </Dialog>;
+}
+const styles = StyleSheet.create({
+  center : {
+    justifyContent : "center",
+    alignItems  : "center",
+    flexDirection : "column",
+    flex : 1,
+  },
+  row : {
+    flexDirection : "row",
+    justifyContent : "center",
+    alignItems : "center",
+    flexWrap :"wrap",
+  }
+});
+BarCodeScanner.propTypes = {
+    onScan : PropTypes.func,
+    onGrantAccess : PropTypes.func, //lorsque la permission est allouée
+    onDenyAccess : PropTypes.func, //lorsque la permission est refusée
+}

package/src/components/BarcodeScanner/index.web.js

@@ -0,0 +1,3 @@
+export default function BarCodeScanner(){
+    return null;
+}

package/src/components/Image/index.js

@@ -174,8 +174,8 @@ export default function ImageComponent(props){
                 setEditorProps({...editorProps,visible:true,...props})
             })
         },
-        pickImage : (opts)=>{
-            opts = getCropProps(opts);
+        pickImage : ()=>{
+            const opts = getCropProps(defaultObj(pickImageProps));
             opts.base64 = true;
             return pickImage(opts).then((image)=>handlePickedImage(image,opts));
         },
@@ -229,7 +229,9 @@ export default function ImageComponent(props){
             label : 'Enregistrer une photo',
             icon : 'camera',
             onPress : (a)=>{
-                takePhoto().then(handlePickedImage);
+                const opts = getCropProps(defaultObj(pickImageProps));
+                opts.base64 = true;
+                takePhoto(opts).then(handlePickedImage);
             }
         })
     }

package/src/layouts/ProfilAvatar/index.js

@@ -113,6 +113,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
                 if(!withLabel){
                     return <View testID={"RNProfilAvatar_AvatarContainer"} style={[theme.styles.row,theme.styles.alignItemsCenter]}>
                         <Image
+                            pickImageProps = {{quality:0.4}}
                             {...props} 
                             {...aProps}
                             size={size}

package/src/media/index.js

@@ -65,7 +65,7 @@ export const pickImageOrVideo = (options)=>{
     return checkPermission().then(()=>{
         return new Promise((resolve,reject)=>{
             ImagePicker.launchImageLibraryAsync(getFilePickerOptions(options)).then((result)=>{
-                if(!result.cancelled) {
+                if(!result.cancelled && !result.canceled) {
                     resolve(prepareImageResult(result));
                 } else {
                     notify.warning("Opération annulée par l'utilisateur");
@@ -116,7 +116,7 @@ export const takePhoto = (options)=>{
         return checkPermission(ImagePicker.requestCameraPermissionsAsync).then((perm)=>{
             options = {base64:true,...Object.assign({},options)}
             return ImagePicker.launchCameraAsync({...getFilePickerOptions(options)}).then((result)=>{
-                if(!result.cancelled) {
+                if(!result.cancelled && !result.canceled) {
                     resolve(prepareImageResult(result));
                 } else {
                     notify.warning("Opération annulée par l'utilisateur");

package/src/media/utils.js

@@ -9,7 +9,7 @@ export const getFilePickerOptions = (options)=>{
         base64 : false, //Whether to also include the image data in Base64 format.
         exif : false, //Whether to also include the EXIF data for the image. On iOS the EXIF data does not include GPS tags in the camera case.
         mediaTypes : ImagePicker.MediaTypeOptions.All, //@see : https://docs.expo.dev/versions/latest/sdk/imagepicker/#mediatypeoptions
-        quality : 1, //Specify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
+        quality : 0.5, //Specify the quality of compression, from 0 to 1. 0 means compress for small size, 1 means compress for maximum quality.
     },options);
 }
 /*** retourne les ooptions pour la capture d'une photo