@fto-consult/expo-ui 8.23.1 → 8.24.1

package/babel.config.js

@@ -20,6 +20,7 @@ module.exports = function(api,opts) {
     options.aliasMutator({...options,alias});
   }
   require(`${path.resolve(__dirname,"bin","generate-tables")}`)();//génère les tables des bases de données
+  require(`${path.resolve(__dirname,"bin","find-licenses")}`); //met à jour les licenses de l'application
   const plugins = (Array.isArray(opts.plugins) ? options.plugins : []);
   let reanimated = "react-native-reanimated/plugin";
   const filteredPlugins = plugins.filter((p)=>{

package/bin/create-app/dependencies.js

@@ -6,12 +6,12 @@ module.exports = {
 	"@pchmn/expo-material3-theme": "^1.3.2",
 	"@react-native-community/netinfo": "11.1.0",
 	"@react-native/assets-registry": "^0.72.0",
+	"react-native-get-random-values": "~1.8.0",
 	"@react-navigation/native": "^6.1.9",
 	"@react-navigation/native-stack": "^6.9.17",
 	"@react-navigation/stack": "^6.3.20",
 	"@shopify/flash-list": "1.6.3",
 	"expo": "~50.0.5",
-	"expo-barcode-scanner": "~12.9.2",
 	"expo-camera": "~14.0.3",
 	"expo-clipboard": "~5.0.1",
 	"expo-font": "~11.10.2",

package/bin/create-app.js

@@ -116,13 +116,10 @@ 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-barcode-scanner",barCodePermission]
     ];
     appSheme = name? sanitizeFileName(name).replace(/ /g, '') : null;
     const appJSONPath = path.join(projectRoot,"app.json");
@@ -179,15 +176,13 @@ const createAPPJSONFile = (projectRoot,{name,version})=>{
             if(!Array.isArray(appPlugins)){
               appPlugins = plugins;
             } else {
-              let hasFoundCamera = false, hasFoundImagePicker = false,hasFoundBarCode = false;
+              let hasFoundCamera = false, hasFoundImagePicker = 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;
                   } 
                 }
               });
@@ -197,9 +192,6 @@ const createAPPJSONFile = (projectRoot,{name,version})=>{
               if(!hasFoundCamera){
                 appPlugins.push(plugins[1]);
               }
-              if(!hasFoundBarCode){
-                appPlugins.push(plugins[2]);
-              }
             }
             appJSONManager.set({
               expo : {plugins:appPlugins}

package/bin/find-licenses.js

@@ -84,7 +84,7 @@ const findLicencesMain = (options)=>{
             if (a.toLowerCase() > b.toLowerCase()) return 1;
             return 0;
         });
-        const packageJSON = require("./package.json");
+        const packageJSON = require("../package.json");
         const content = {
             [packageJSON.name] : {
                 name : packageJSON.name,
@@ -108,7 +108,7 @@ const findLicencesMain = (options)=>{
 module.exports = ()=>{
     ///on génère les librairies open sources utilisées par l'application
     const root = path.resolve(process.cwd());
-    const expoUI = require("./expo-ui-path")();
+    const expoUI = require("../expo-ui-path")();
     const localNodeModule = path.resolve(root,"node_modules");
     const HelpScreen = path.resolve(expoUI,"src","screens","Help");
     const outputPath = path.resolve(HelpScreen,"openLibraries.js");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.23.1",
+  "version": "8.24.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",
@@ -46,7 +46,7 @@
     "delete-node-modules": "rimraf ./**/node_modules",
     "dev": "npx expo start --no-dev --minify -c",
     "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
-    "update": "npm i @fto-consult/common@latest @fto-consult/node-utils@latest react-native-web react-native-blob-util@latest react-native-big-list@latest apexcharts@latest file-saver@latest google-libphonenumber@latest  react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@5 react-native-paper-dates@latest react-virtuoso@latest tippy.js@latest xlsx@latest && npm run update-apexchart && npm run find-licenses"
+    "update": "npm i @fto-consult/common@latest @fto-consult/node-utils@latest react-native-web react-native-big-list@latest apexcharts@latest file-saver@latest google-libphonenumber@latest  react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@5 react-native-paper-dates@latest react-virtuoso@latest tippy.js@latest xlsx@latest && npm run update-apexchart && npm run find-licenses"
   },
   "bin": {
     "expo-ui": "./bin/index.js"
@@ -68,7 +68,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.23.1",
+    "@fto-consult/common": "^4.24.0",
     "@fto-consult/node-utils": "^1.4.7",
     "apexcharts": "^3.45.2",
     "crypto-browserify": "^3.12.0",
@@ -82,7 +82,6 @@
     "react-content-loader": "^6.2.1",
     "react-dom": "^18.2.0",
     "react-native-big-list": "^1.6.1",
-    "react-native-blob-util": "^0.19.6",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.4.0",
     "react-native-paper": "^5.12.3",

package/src/components/Barcode/Scanner/index.js

@@ -1,61 +1,98 @@
-import React, { useState, useEffect,useMemo } from '$react';
+import React, { useState, useEffect,useMemo,useRef } from '$react';
 import { View, StyleSheet} from 'react-native';
-import { BarCodeScanner } from 'expo-barcode-scanner';
+import { CameraView, Camera } from "expo-camera/next";
 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 { isNonNullString,defaultStr,defaultObj } from '$cutils';
 import Button from "$ecomponents/Button";
 import Dialog from "$ecomponents/Dialog";
+import {DialogProvider} from "$ecomponents/Form/FormData";
 
-export const scannerTypes = {back:"back",front:"front"};
+export const CameraFacing = {back:"back",front:"front"};
+export const FlashModes = {off:{code:"off",label:"Inactif"},on:{code:"on",label:"Actif"},auto:{code:"auto",label:"Automatique"}}
+export const CameraSettingsFields = {
+    enableTorch : {
+        type : "switch",
+        label : "Allumer la torche",
+        defaultValue : false,
+        checkedValue : true,
+        uncheckedValue : false,
+    },
+    flash : {
+      label : "Flash",
+      type : "select",
+      required : true,
+      items : FlashModes,
+      defaultValue : FlashModes.auto.code,
+    },
+}
 
 /***@see : https://docs.expo.dev/versions/latest/sdk/bar-code-scanner/ */
-export default function App({onScan,onGrantAccess,testID,onDenyAccess,scannerProps,onCancel,dialogProps}) {
+export default function BarCodeScanner({onScan,onGrantAccess,testID,onDenyAccess,cameraProps,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);
+  cameraProps = Object.assign({},cameraProps);
+  const getFlashMode = ()=>{
+      let {flash} = cameraProps;
+      if(isNonNullString(flash)){
+          flash = flash.toLowerCase().trim();
+          if(FlashModes[flash]) return FlashModes[flash].code;
+      }
+      return FlashModes.auto.code;
+  }
+  const [cameraSetting,setCameraSetting] = useState({
+    enableTorch : !!cameraProps.enableTorch,
+    flash : getFlashMode(cameraProps.flash),
+  });
+  useEffect(()=>{
+    const flash = getFlashMode();
+    if(flash !== cameraSetting.flash){
+        setCameraSetting({...cameraSetting,flash});
+    }
+  },[cameraProps.flash]);
+  useEffect(()=>{
+    const enableTorch = !!cameraProps.enableTorch;
+    if(enableTorch !== cameraSetting.enableTorch){
+      setCameraSetting({...cameraSetting,enableTorch});
+    }
+  },[!!cameraProps.enableTorch]);
   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);
+  const sFacing = useMemo(()=>{
+    let {facing} = cameraProps;
+    if(isNonNullString(facing)){
+      facing = facing.trim().toLowerCase();
+    } else return CameraFacing.back;
+    return CameraFacing[facing] || CameraFacing.back;
+  },[cameraProps.facing]);
+  const [facing,setFacing] = useState(sFacing);
   useEffect(()=>{
-    const type = getCameraType();
-    if(type !== scannerType){
-      setScannerType(type);
+    if(sFacing !== facing){
+      setFacing(sFacing);
     }
-  },scannerProps.type)
-  const isBack = scannerType === scannerTypes.back;
+  },[sFacing]);
+  const isBack = facing === CameraFacing.back;
   useEffect(() => {
-    const getBarCodeScannerPermissions = async () => {
-      const { status } = await BarCodeScanner.requestPermissionsAsync();
-      setHasPermission(status === 'granted');
+    const getCameraPermissions = async () => {
+      const { status } = await Camera.requestCameraPermissionsAsync();
+      setHasPermission(status === "granted");
     };
-
-    getBarCodeScannerPermissions();
+    getCameraPermissions();
   }, []);
-
+  //const torchEnabledRef = useRef(cameraSetting.enableTorch);
+  //const prevTorchEnabled = React.usePrevious(torchEnabledRef.current);
   const handleBarCodeScanned = ({ type, data,...rest }) => {
-    //setScanned(true);
+    if(cameraSetting.enableTorch){
+      setCameraSetting({...cameraSetting,enableTorch:false});
+    }
     if(typeof onScan =="function"){
         onScan({type,data,code:data,barCode:data,...rest});
     }
@@ -84,12 +121,30 @@ export default function App({onScan,onGrantAccess,testID,onDenyAccess,scannerPro
       icon : "camera-flip",
       tooltip : `Cliquez pour basculer à la camera ${isBack ? "frontable":"arrière"}`,
       onPress : ()=>{
-        setScannerType(isBack ? scannerTypes.front : scannerTypes.back);
+        setFacing(isBack ? CameraFacing.front : CameraFacing.back);
       }
   };
   return <Dialog 
     fullPage 
-    actions={[switchCameraBtn]} 
+    actions={[
+        switchCameraBtn,
+        {
+          text : "Options de la camera",
+          icon : "material-settings",
+          tooltip : `Définir les options de la camera`,
+          onPress : ()=>{
+            DialogProvider.open({
+                tile : "Options de la camera",
+                data : cameraSetting,
+                fields : CameraSettingsFields,
+                onSuccess : ({data})=>{
+                  setCameraSetting(data);
+                  DialogProvider.close();
+                },
+            })
+          }
+      }
+    ]} 
     title = {`Scanner un code barre`}
     {...dialogProps}
     onBackActionPress={cancel}
@@ -102,13 +157,14 @@ export default function App({onScan,onGrantAccess,testID,onDenyAccess,scannerPro
           <ActivityIndicator size={'large'}/>
         </View>}
       </View> : <View style={[theme.styles.flex1]} testID={testID}>
-          <BarCodeScanner
+          <CameraView
             ratio='16:9'
             testID={testID+"_ScannerContent"}
-            {...scannerProps}
-            type={scannerType}
-            style={[theme.styles.flex1,{width:"100%",height:"100%"},scannerProps.style]}
-            onBarCodeScanned={handleBarCodeScanned}
+            {...cameraProps}
+            {...cameraSetting}
+            facing = {facing}
+            style={[theme.styles.flex1,{width:"100%",height:"100%"},cameraProps.style]}
+            onBarcodeScanned={handleBarCodeScanned}
           />
           <View style={[styles.row,theme.styles.w100]}>
               <Button
@@ -141,6 +197,10 @@ const styles = StyleSheet.create({
     flexWrap :"wrap",
   }
 });
+
+/***
+  @see : https://docs.expo.dev/versions/latest/sdk/camera-next
+*/
 BarCodeScanner.propTypes = {
     onScan : PropTypes.func,
     onGrantAccess : PropTypes.func, //lorsque la permission est allouée

package/src/components/Barcode/Scanner/index.web.js

@@ -1,3 +1,5 @@
 export default function BarCodeScanner(){
     return null;
-}
+}
+
+BarCodeScanner.propTypes = {}

package/src/screens/Help/openLibraries.js

@@ -1,7 +1,7 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
 		"name": "@fto-consult/expo-ui",
-		"version": "8.19.0",
+		"version": "8.24.0",
 		"repository": {
 			"type": "git",
 			"url": "git+https://github.com/borispipo/expo-ui.git"
@@ -34,7 +34,7 @@ module.exports = {
 		"license": "MIT"
 	},
 	"@fto-consult/common": {
-		"version": "4.19.4",
+		"version": "4.24.0",
 		"url": "https://github.com/borispipo/common#readme",
 		"license": "ISC"
 	},
@@ -135,6 +135,11 @@ module.exports = {
 		"url": "https://github.com/web-ridge/react-native-paper-dates#readme",
 		"license": "MIT"
 	},
+	"react-native-uuid": {
+		"version": "2.0.1",
+		"url": "https://github.com/eugenehp/react-native-uuid#readme",
+		"license": "MIT"
+	},
 	"react-native-web": {
 		"version": "0.19.10",
 		"url": "git://github.com/necolas/react-native-web.git",

package/src/uuid/deps.js

@@ -0,0 +1 @@
+export default {}

package/src/uuid/deps.native.js

@@ -0,0 +1,2 @@
+import 'react-native-get-random-values';
+export default {}

package/src/uuid/index.js

@@ -1,3 +1,4 @@
+import "./deps";
 import uuid from 'react-native-uuid';
 const {parse,unparse,validate,version,v1,v3,v4,v5,NIL,DNS,URL,OID,X500,} = uuid;
 export {parse,unparse,validate,version,v1,v3,v4,v5,NIL,DNS,URL,OID,X500}