@fto-consult/expo-ui 8.14.4 → 8.15.0

package/babel.config.alias.js

@@ -2,7 +2,6 @@ const path = require("path");
 const fs = require("fs");
 
 module.exports = (opts)=>{
-    const isLocalDev = require("./is-local-dev")();
     const dir = path.resolve(__dirname);
     const projectRoot = typeof opts.projectRoot =='string' && fs.existsSync(opts.projectRoot.trim()) && opts.projectRoot.trim() || process.cwd();
     const assets = path.resolve(dir,"assets");
@@ -19,9 +18,7 @@ module.exports = (opts)=>{
     const expo = path.resolve(expoUI,"src");
     r["$ecomponents"] = r["$expo-components"] = path.resolve(expo,"components");
     r["$econfirm"] = path.resolve(r["$expo-components"],"Dialog","confirm");
-    r["$confirm"] = r["$confirm"] || r["$econfirm"];
     r["$eauth"] = path.resolve(expo,"auth");
-    r["$components"] = r["$components"] || r["$ecomponents"];
     r["$elayouts"] = path.resolve(expo,"layouts");
     r["$emedia"] = path.resolve(expo,"media");
     r["$enavigation"] = path.resolve(expo,"navigation");
@@ -36,8 +33,6 @@ module.exports = (opts)=>{
     r.$tableLink = r.$TableLink = r["$etableLink"] = r["$eTableLink"] = path.resolve(r["$ecomponents"],"TableLink");
     
     r["$Screen"] = r["$Screen"] || r["$eScreen"];
-    r["$screens"] = r["$screens"] || r["$escreens"];
-    
     r["$expo"] = r["$expo-ui"] = expo;
     r["$epreloader"] = path.resolve(expo,"components/Preloader");
     r["$eform"] = path.resolve(expo,"components","Form");
@@ -55,12 +50,7 @@ module.exports = (opts)=>{
     if(!r["$preloader"] || r["$preloader"] === r["$cpreloader"]){
         r["$preloader"] = r["$epreloader"];
     }
-    if(!r["$enotify"]){
-        r["$enotify"] = r["$cnotify"];
-    }
-    if(!r["$chart"]){
-        r["$chart"] = r["$echart"];
-    }
+    r["$enotify"] = r["$cnotify"];
     if(!r["$file-system"]){
         r["$file-system"] = r["$efile-system"];
     }
@@ -84,15 +74,5 @@ module.exports = (opts)=>{
     r.$electronProjectRoot = path.resolve(r.$projectRoot,"electron");
     r.$econtext = path.resolve(expo,"context");
     r.$epdf = path.resolve(expo,"pdf");
-    if(!r.$context){
-        r.$context = r.$econtext;
-    }
-    r["$erealm"] = path.resolve(expo,'realm');
-    if(!r.$realm){
-        r.$realm = r.$erealm;
-    }
-    const {withRealm} = opts; //si la prise en compte de la base de données realm est nécessaire
-    const $realmProvider = path.resolve(r.$realm,"Provider");
-    r.$erealmProvider = r.$realmProvider = false && !withRealm ? path.resolve($realmProvider,"realm.not-enabled.js") : $realmProvider;  
     return r;
 }

package/bin/create-app/metro.config.js

@@ -1 +1,38 @@
-module.exports = require("@fto-consult/expo-ui/metro.config.js");
+const path = require("path");
+const { getDefaultConfig } = require('@expo/metro-config');
+module.exports = function(opts){
+  opts = opts && typeof opts =='object'? opts : {};
+  let {assetExts,sourceExts} = opts;
+  assetExts = Array.isArray(assetExts)? assetExts: [];
+  sourceExts= Array.isArray(sourceExts)?sourceExts : [];
+  const projectRoot = path.resolve(process.cwd());
+  //@see : https://docs.expo.dev/versions/latest/config/metro/
+  const config = getDefaultConfig(projectRoot,{});
+  // 2. Let Metro know where to resolve packages and in what order
+  const nodeModulesPaths = (Array.isArray(config.resolver.nodeModulesPaths)?config.resolver.nodeModulesPaths : []);
+  const nodeModulePath = path.resolve(projectRoot, 'node_modules');
+  if(!nodeModulesPaths.includes(nodeModulePath)){
+    nodeModulesPaths.unshift(nodeModulePath);
+  }
+  config.resolver.nodeModulesPaths = nodeModulesPaths;
+  config.projectRoot = projectRoot;
+  config.resolver.assetExts = [
+     ...config.resolver.assetExts,
+     ...assetExts,
+     "db",
+     "txt"
+  ];
+  config.resolver.sourceExts = [
+      ...config.resolver.sourceExts,
+      ...sourceExts,"txt",
+      'jsx', 'js','tsx',
+  ]
+  
+  // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`
+  config.resolver.disableHierarchicalLookup = true;
+  
+  // Remove all console logs in production...
+  config.transformer.minifierConfig.compress.drop_console = false;
+  
+  return config;
+}

package/metro.config.js

@@ -2,7 +2,6 @@ const path = require("path");
 const fs = require("fs");
 const { getDefaultConfig } = require('@expo/metro-config');
 module.exports = function(opts){
-  const isDev = 'development' === process.env.NODE_ENV;
   opts = opts && typeof opts =='object'? opts : {};
   let {assetExts,sourceExts} = opts;
   assetExts = Array.isArray(assetExts)? assetExts: [];
@@ -20,17 +19,6 @@ module.exports = function(opts){
   if(hasTranspilePath){
     config.transformer.babelTransformerPath = transpilePath;
   }
-  config.watchFolders = Array.isArray(config.watchFolders) && config.watchFolders || [];
-  const isLocalTest = require("./is-local-dev")();
-  if(!isLocalTest && isDev){
-    config.watchFolders.push(localDir);
-  }
-  if(isDev){
-    const commonP = path.resolve(projectRoot,"node_modules","@fto-consult","common");
-    if(fs.existsSync(commonP)){
-      config.watchFolders.push(commonP);
-    }
-  }
   // 2. Let Metro know where to resolve packages and in what order
   const nodeModulesPaths = (Array.isArray(config.resolver.nodeModulesPaths)?config.resolver.nodeModulesPaths : []);
   const nodeModulePath = path.resolve(projectRoot, 'node_modules');
@@ -60,13 +48,5 @@ module.exports = function(opts){
   // 3. Force Metro to resolve (sub)dependencies only from the `nodeModulesPaths`, @see : https://docs.expo.dev/guides/monorepos/
   config.resolver.disableHierarchicalLookup = true;
   
-  /*config.platforms = Array.isArray(config.platforms) && config.platforms || [];
-  ['ios', 'android', 'windows', 'web',"electron"].map(p=>{
-    if(!config.platforms.includes(p)){
-       config.platforms.push(p);
-    }
-  });*/
-  ///on génère les librairies open sources utilisées par l'application
-  //require("./find-licenses");
   return config;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.14.4",
+  "version": "8.15.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",
@@ -48,7 +48,7 @@
     "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-app": "expo @emotion/native@latest react-native-big-list@latest @pchmn/expo-material3-theme@latest @emotion/native@latest @react-navigation/stack react-native-blob-util @react-navigation/native@latest @react-navigation/native-stack@latest  && npx expo install --fix",
-    "update": "npm i @fto-consult/node-utils@latest apexcharts@latest file-saver@latest google-libphonenumber@latest  @fto-consult/common@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 websql@latest xlsx@latest react-native-web@latest react-dom@latest react-native-get-random-values@latest && npm run update-apexchart && npm run find-licenses"
+    "update": "npm i @fto-consult/node-utils@latest apexcharts@latest file-saver@latest google-libphonenumber@latest  @fto-consult/common@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 websql@latest xlsx@latest react-native-get-random-values@latest && npm run update-apexchart && npm run find-licenses"
   },
   "bin": {
     "expo-ui": "./bin/index.js"
@@ -70,7 +70,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.13.9",
+    "@fto-consult/common": "^4.15.56",
     "@fto-consult/node-utils": "^1.4.7",
     "apexcharts": "^3.45.2",
     "commander": "^11.1.0",
@@ -89,7 +89,7 @@
     "react-native-get-random-values": "^1.10.0",
     "react-native-iphone-x-helper": "^1.3.1",
     "react-native-mime-types": "^2.4.0",
-    "react-native-paper": "^5.12.1",
+    "react-native-paper": "^5.12.3",
     "react-native-paper-dates": "^0.21.7",
     "react-native-web": "^0.19.10",
     "react-virtuoso": "^4.6.2",

package/src/AppEntry/index.js

@@ -33,13 +33,15 @@ import notify, {notificationRef} from "$notify";
 import DropdownAlert from '$ecomponents/Dialog/DropdownAlert';
 import { PreferencesContext } from '../Preferences';
 import ErrorBoundary from "$ecomponents/ErrorBoundary";
-import  {updateTheme,defaultTheme} from "$theme";
+import  mainTheme, {updateTheme,defaultTheme} from "$theme";
 import StatusBar from "$ecomponents/StatusBar";
 import {Provider as PaperProvider,Portal } from 'react-native-paper';
 import FontIcon from "$ecomponents/Icon/Font";
 import useContext from "$econtext/hooks";
 import { StyleSheet } from "react-native";
+import Logo from "$ecomponents/Logo";
 import AppEntryRootView from "./RootView";
+import View from "$ecomponents/View";
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 
 let MAX_BACK_COUNT = 1;
@@ -252,7 +254,9 @@ function App({init:initApp,initialRouteName:appInitialRouteName,children}) {
         containerProps.onStateChange(state,...rest);
       }
     }}
-    fallback = {React.isValidElement(containerProps.fallback) ? containerProps.fallback : null}
+    fallback = {React.isValidElement(containerProps.fallback) ? containerProps.fallback : <View style={[mainTheme.styles.flex1,mainTheme.styles.justifyContentCenter,mainTheme.styles.alignItemsCenter]}>
+       <Logo.Progress/>
+    </View>}
   >
         <Navigation
           initialRouteName = {defaultStr(hasGetStarted ? appInitialRouteName : getStartedRouteName,"Home")}

package/src/components/Checkbox/Checkbox.js

@@ -0,0 +1,183 @@
+import * as React from 'react';
+import {
+  Animated,
+  StyleSheet,
+  View,
+} from 'react-native';
+
+import { TouchableRipple } from 'react-native-paper';
+import PropTypes from "prop-types";
+import FontIcon from "$ecomponents/Icon/Font";
+import theme, {StyleProp} from "$theme";
+
+const ANIMATION_DURATION = 100;
+
+const CheckboxWeb = ({
+  status,
+  theme: themeOverrides,
+  disabled,
+  onPress,
+  testID,
+  rippleColor,
+  color,
+  ...rest
+}) => {
+  const { current: scaleAnim } = React.useRef(
+    new Animated.Value(1)
+  );
+  const isFirstRendering = React.useRef(true);
+
+  const {
+    animation: { scale },
+  } = theme;
+
+  React.useEffect(() => {
+    // Do not run animation on very first rendering
+    if (isFirstRendering.current) {
+      isFirstRendering.current = false;
+      return;
+    }
+
+    const checked = status === 'checked';
+
+    Animated.sequence([
+      Animated.timing(scaleAnim, {
+        toValue: 0.85,
+        duration: checked ? ANIMATION_DURATION * scale : 0,
+        useNativeDriver: false,
+      }),
+      Animated.timing(scaleAnim, {
+        toValue: 1,
+        duration: checked
+          ? ANIMATION_DURATION * scale
+          : ANIMATION_DURATION * scale * 1.75,
+        useNativeDriver: false,
+      }),
+    ]).start();
+  }, [status, scaleAnim, scale]);
+
+  const checked = status === 'checked';
+  const indeterminate = status === 'indeterminate';
+
+  const borderWidth = scaleAnim.interpolate({
+    inputRange: [0.8, 1],
+    outputRange: [7, 0],
+  });
+
+  const icon = indeterminate
+    ? 'minus-box'
+    : checked
+    ? 'checkbox-marked'
+    : 'checkbox-blank-outline';
+    const selectionControlColor = theme.Colors.isValid(color)? color : theme.colors.primary;
+  return (
+    <TouchableRipple
+      {...rest}
+      borderless
+      rippleColor={rippleColor}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityRole="checkbox"
+      accessibilityState={{ disabled, checked }}
+      accessibilityLiveRegion="polite"
+      style={styles.container}
+      testID={testID}
+      theme={theme}
+    >
+      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
+        <FontIcon
+          allowFontScaling={false}
+          name={icon}
+          size={24}
+          color={selectionControlColor}
+          direction="ltr"
+        />
+        <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
+          <Animated.View
+            style={[
+              styles.fill,
+              { borderColor: selectionControlColor },
+              { borderWidth },
+            ]}
+          />
+        </View>
+      </Animated.View>
+    </TouchableRipple>
+  );
+};
+
+CheckboxWeb.displayName = 'Checkbox.Android';
+
+const styles = StyleSheet.create({
+  container: {
+    borderRadius: 18,
+    width: 36,
+    height: 36,
+    padding: 6,
+  },
+  fillContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  fill: {
+    height: 14,
+    width: 14,
+  },
+});
+
+export default CheckboxWeb;
+
+CheckboxWeb.propTypes = {
+    status: PropTypes.oneOf(['checked','unchecked','indeterminate']),
+    /**
+     * Whether checkbox is disabled.
+     */
+    disabled : PropTypes.bool,
+    /**
+     * Label to be displayed on the item.
+     */
+    label: PropTypes.string,
+    /**
+     * Function to execute on press.
+     */
+    onPress : PropTypes.func,//(e) => void;
+    /**
+     * Function to execute on long press.
+     */
+    onLongPress : PropTypes.func,//(e) => void;
+    /**
+     * Type of background drawabale to display the feedback (Android).
+     * https://reactnative.dev/docs/pressable#rippleconfig
+     */
+    background: PropTypes.any,
+    accessibilityLabel : PropTypes.string,
+    /**
+     * Custom color for unchecked checkbox.
+     */
+    uncheckedColor : PropTypes.string,
+    /**
+     * Custom color for checkbox.
+     */
+    color : PropTypes.string,
+    /**
+     * Color of the ripple effect.
+     */
+    rippleColor : PropTypes.string,
+    /**
+     * Additional styles for container View.
+     */
+    style : StyleProp,
+    /**
+     * Specifies the largest possible scale a label font can reach.
+     */
+    labelMaxFontSizeMultiplier : PropTypes.number,
+    /**
+     * Style that is passed to Label element.
+     */
+    labelStyle : StyleProp,
+    testID : PropTypes.string,
+    /**
+     * Checkbox control position.
+     */
+    position : PropTypes.string,
+  }

package/src/components/Checkbox/Item.js

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import PropTypes from "prop-types";
+import {
+  StyleSheet,
+  View,
+} from 'react-native';
+import { StyleProp } from '$theme';
+import theme from "$theme";
+import Checkbox from './Checkbox';
+import { TouchableRipple,Text } from 'react-native-paper';
+
+const CheckboxItem = ({
+  style,
+  status,
+  label,
+  onPress,
+  onLongPress,
+  labelStyle,
+  theme: themeOverrides,
+  testID,
+  mode,
+  position = 'trailing',
+  accessibilityLabel = label,
+  disabled,
+  labelVariant = 'bodyLarge',
+  labelMaxFontSizeMultiplier = 1.5,
+  rippleColor,
+  background,
+  ...props
+}) => {
+  const checkboxProps = { ...props, status, theme, disabled };
+  const isLeading = position === 'leading';
+  const checkbox = <Checkbox {...checkboxProps} />
+
+  const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
+  const disabledTextColor = theme.isV3
+    ? theme.colors.onSurfaceDisabled
+    : theme.colors.disabled;
+  const textAlign = isLeading ? 'right' : 'left';
+
+  const computedStyle = {
+    color: disabled ? disabledTextColor : textColor,
+    textAlign,
+  }
+
+  return (
+    <TouchableRipple
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole="checkbox"
+      accessibilityState={{
+        checked: status === 'checked',
+        disabled,
+      }}
+      onPress={onPress}
+      onLongPress={onLongPress}
+      testID={testID}
+      disabled={disabled}
+      rippleColor={rippleColor}
+      theme={theme}
+      background={background}
+    >
+      <View
+        style={[styles.container, style]}
+        pointerEvents="none"
+        importantForAccessibility="no-hide-descendants"
+      >
+        {isLeading && checkbox}
+        <Text
+          variant={labelVariant}
+          testID={`${testID}-text`}
+          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
+          style={[
+            styles.label,
+            !theme.isV3 && styles.font,
+            computedStyle,
+            labelStyle,
+          ]}
+        >
+          {label}
+        </Text>
+        {!isLeading && checkbox}
+      </View>
+    </TouchableRipple>
+  );
+};
+
+CheckboxItem.displayName = 'Checkbox.Item';
+
+export default CheckboxItem;
+
+// @component-docs ignore-next-line
+export { CheckboxItem };
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingVertical: 8,
+    paddingHorizontal: 16,
+  },
+  label: {
+    flexShrink: 1,
+    flexGrow: 1,
+  },
+  font: {
+    fontSize: 16,
+  },
+});
+CheckboxItem.propTypes = {
+  status: PropTypes.oneOf(['checked','unchecked','indeterminate']),
+  /**
+   * Whether checkbox is disabled.
+   */
+  disabled : PropTypes.bool,
+  /**
+   * Label to be displayed on the item.
+   */
+  label: PropTypes.string,
+  /**
+   * Function to execute on press.
+   */
+  onPress : PropTypes.func,//(e) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress : PropTypes.func,//(e) => void;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background: PropTypes.any,
+  accessibilityLabel : PropTypes.string,
+  /**
+   * Custom color for unchecked checkbox.
+   */
+  uncheckedColor : PropTypes.string,
+  /**
+   * Custom color for checkbox.
+   */
+  color : PropTypes.string,
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor : PropTypes.string,
+  /**
+   * Additional styles for container View.
+   */
+  style : StyleProp,
+  /**
+   * Specifies the largest possible scale a label font can reach.
+   */
+  labelMaxFontSizeMultiplier : PropTypes.number,
+  /**
+   * Style that is passed to Label element.
+   */
+  labelStyle : StyleProp,
+  testID : PropTypes.string,
+  /**
+   * Checkbox control position.
+   */
+  position : PropTypes.string,
+  /**
+   * Whether `<Checkbox.Android />` or `<Checkbox.IOS />` should be used.
+   * Left undefined `<Checkbox />` will be used.
+   */
+  mode : PropTypes.oneOf(['android','ios'])
+}

package/src/components/Checkbox/Item.native.js

@@ -0,0 +1,13 @@
+import { Checkbox } from "react-native-paper";
+import {forwardRef} from "react";
+
+const CheckboxItemComponent = forwardRef((props,ref)=>{
+    return <Checkbox.Item
+        ref = {ref}
+        {...props}
+    />
+});
+
+export default CheckboxItemComponent;
+
+CheckboxItemComponent.displayName = "CheckboxItemComponent";

package/src/components/Checkbox/index.js

@@ -2,9 +2,11 @@ import { Checkbox } from 'react-native-paper';
 import View from "$ecomponents/View";
 import React from "$react";
 import {isUndefined,defaultObj,defaultVal,defaultStr} from "$cutils";
-import {isIos,isAndroid} from "$cplatform";
+import {isIos,isAndroid,isMobileNative} from "$cplatform";
 import theme,{Colors,DISABLED_OPACITY,ALPHA_OPACITY} from "$theme";
 import { StyleSheet } from 'react-native';
+import CheckboxItem from "./Item";
+
 export const checkedStatus = 'checked';
 export const uncheckedStatus = 'unchecked';
 import PropTypes from "prop-types";
@@ -13,6 +15,7 @@ import HelperText from "$ecomponents/HelperText";
 export const leftPosition = 'leading';
 export const rightPosition = "trailing";
 
+
 export const CHECKED_ICON_NAME = isIos()? 'check':'check';
 
 export const UNCHECKED_ICON_NAME = isIos() ?'' : '' 
@@ -119,8 +122,8 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
    testID = defaultStr(testID,"RN_CheckboxComponent");
    return <View testID={testID+"_Container"} {...containerProps} style={[containerProps.style,disabledStyle]} pointerEvents={pointerEvents}>
         <Tooltip
-            Component = {Checkbox.Item}
             {...p}
+            Component = {CheckboxItem}
             testID = {testID}
             disabled = {disabled}
             readOnly = {!isEditable}

package/src/components/Datagrid/SWRDatagrid.js

@@ -309,7 +309,13 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
                 return false;
             }}
             renderCustomPagination = {({context})=>{
-                if(!canPaginate()) return null;
+                if(!canPaginate()) {
+                    return <View testID={testID+"_PaginationLabel"}>
+                        <Label textBold primary style={{fontSize:15}}>
+                            {total.formatNumber()}
+                        </Label>
+                    </View>
+                }
                 const page = pageRef.current, totalPages = getTotalPages(), prevPage = getPrevPage(),nextPage = getNextPage();
                 const iconProp = {
                     size : 25,

package/src/components/Form/Fields/Field.js

@@ -1,6 +1,6 @@
 import PropTypes from "prop-types";
 import KeyboardEventHandler from "../KeyboardEventHandler";
-import { addMediaQueryUpdateStyeSubscription } from "$context/hooks";
+import { addMediaQueryUpdateStyeSubscription } from "$econtext/hooks";
 import Dimensions from "$cdimensions";
 const {getActions,getFormFields,Forms} = require("../utils")
 import TextField,{parseDecimal} from "$ecomponents/TextField";

package/src/components/Image/index.js

@@ -58,7 +58,7 @@ export default function ImageComponent(props){
         onChange,draw,round,drawText,drawLabel,rounded,defaultSrc,
         createSignatureOnly,pickImageProps,width,height,cropProps,size,resizeProps,containerProps,
         menuProps,pickUri,drawProps,imageProps,length,testID,withLabel,...rest} = props;
-    rest = defaultObj(rest);
+    const pickedImageRef = React.useRef(null);
     pickImageProps = defaultObj(pickImageProps);
     cropProps = defaultObj(cropProps);
     draw = defaultBool(draw,true);
@@ -144,6 +144,7 @@ export default function ImageComponent(props){
                 setSrc(imageSrc)
             });
         }
+        pickedImageRef.current = image;
         setSrc(imageSrc);
         return image;
     }
@@ -184,11 +185,15 @@ export default function ImageComponent(props){
         },
     }
     React.useEffect(()=>{
-        if(src === prevSrc)return;
+        if(src === prevSrc) {
+            pickedImageRef.current = null;
+            return;
+        }
         if(typeof onChange =='function'){
-            onChange({context,src,deleted:src == null?true:false,dataURL:src,dataUrl:src})
+            onChange({context,...defaultObj(pickedImageRef.current),src,deleted:src == null?true:false,dataURL:src,dataUrl:src})
         }
-    },[src])
+        pickedImageRef.current = null;
+    },[src]);
     React.useEffect(()=>{
         if(typeof onMount =='function'){
             onMount({context});

package/src/components/View/index.js

@@ -3,7 +3,7 @@ import PropTypes from "prop-types";
 import React from "$react";
 import {isMobileNative} from "$cplatform";
 import {debounce,isNumber,isNonNullString} from "$cutils";
-import {useMediaQueryUpdateStyle} from "$context/hooks";
+import {useMediaQueryUpdateStyle} from "$econtext/hooks";
 
 
 const ViewComponent = React.forwardRef(({onRender,onLayoutTimeout,pointerEvents,onLayout,autoHeight,autoWidth,elevation,...props},ref)=>{

package/src/screens/Auth/PermLine.js

@@ -1,7 +1,7 @@
 import PermText from "./PermText";
 import React from "$react";
 import Expandable from "$ecomponents/Expandable";
-import {defaultObj,defaultStr,arrayValueExists,isNonNullString,defaultVal} from "$cutils";
+import {defaultObj,defaultStr,isNonNullString,defaultVal} from "$cutils";
 import PropTypes from "prop-types";
 import {hasResource} from "./utils";
 import { StyleSheet } from "react-native";
@@ -55,12 +55,16 @@ const PermLine = ({text,cellProps,isUserMasterAdmin,withGrid,defaultActions,reso
     isUserMasterAdmin = !!isUserMasterAdmin;
     let checked = isUserMasterAdmin;
     const onToggleSingle = ({resource,checked,action})=>{
+        if(!resource){
+            console.error("Invalid resource toggle ",resource,checked,action);
+            return;
+        }
         if(isUserMasterAdmin || !isNonNullString(action) || !isNonNullString(resource) || !isNonNullString(allPerms[resource])){
             return;
         }
         const data = {...state.data};
         const allAction = defaultStr(allPerms[resource]);
-        if(allAction == "all"){
+        if(allAction === "all"){
             if(checked){
                 data[resource] = allAction;
             } else delete data[resource];
@@ -68,10 +72,10 @@ const PermLine = ({text,cellProps,isUserMasterAdmin,withGrid,defaultActions,reso
             data[resource] = defaultStr(data[resource]).toLowerCase();
             let spl = data[resource].split("2");
             if(checked){
-                if(action !== 'read' && arrayValueExists(allAction.toLowerCase().split("2"),'read') && !arrayValueExists(spl,'read')){
+                if(action !== 'read' && allAction.toLowerCase().split("2").includes('read') && !spl.includes('read')){
                     spl.push('read');
                 }
-                if(!arrayValueExists(spl,action,true)){
+                if(!spl.includes(action)){
                     spl.push(action);
                 }
             } else {
@@ -108,40 +112,43 @@ const PermLine = ({text,cellProps,isUserMasterAdmin,withGrid,defaultActions,reso
             onChange({data:state.data,resource,table});
         }
     },[state.data])
-    const content = [];
-    Object.map(perms,(perm,i)=>{
-        const pText = defaultStr(perm.text,perm.label);
-        if(!isObj(perm.actions)){
-            if(!isNonNullString(pText)) return null;
-            allPerms[i] = "all";
-            checked = isUserMasterAdmin? true : isNonNullString(state.data[i]);
-            if(!checked){
-                allChecked = false;
-            }
-            content.push(<PermText isUserMasterAdmin={isUserMasterAdmin} key = {i} table={table} tooltip={defaultStr(perm.tooltip,perm.title,perm.desc)} onToggle={onToggleSingle} text={pText} checked ={checked} resource={i} action ={'all'}/>);
-            return;
-        } 
-        allPerms[i] = "";
-        const splitP = defaultStr(state.data[i]).toLowerCase().split("2");
-        const pContent = []
-        const hasS = isNonNullString(text) && isNonNullString(pText) && pText.toLowerCase() != text.toLowerCase()
-        Object.map(perm.actions,(p,j)=>{
-            if(!isObj(p) || !isNonNullString(p.text)) return null;
-            allPerms[i] = (isNonNullString(allPerms[i])?(allPerms[i]+"2"):"")+j;
-            checked = isUserMasterAdmin? true : arrayValueExists(splitP,j,true);
-            if(!checked){
-                allChecked = false;
+    const content = React.useStableMemo(()=>{
+        const content = [];
+        Object.map(perms,(perm,i)=>{
+            const pText = defaultStr(perm.text,perm.label);
+            if(!isObj(perm.actions)){
+                if(!isNonNullString(pText)) return null;
+                allPerms[i] = "all";
+                checked = isUserMasterAdmin? true : isNonNullString(state.data[i]);
+                if(!checked){
+                    allChecked = false;
+                }
+                content.push(<PermText isUserMasterAdmin={isUserMasterAdmin} key = {i} table={table} tooltip={defaultStr(perm.tooltip,perm.title,perm.desc)} onToggle={onToggleSingle} text={pText} checked ={checked} resource={i} action ={'all'}/>);
+                return;
+            } 
+            allPerms[i] = "";
+            const splitP = defaultStr(state.data[i]).toLowerCase().split("2");
+            const pContent = []
+            const hasS = isNonNullString(text) && isNonNullString(pText) && pText.toLowerCase() != text.toLowerCase()
+            Object.map(perm.actions,(p,j)=>{
+                if(!isObj(p) || !isNonNullString(p.text)) return null;
+                allPerms[i] = (isNonNullString(allPerms[i])?(allPerms[i]+"2"):"")+j;
+                checked = isUserMasterAdmin? true : splitP.includes(j);
+                if(!checked){
+                    allChecked = false;
+                }
+                pContent.push(<PermText labelStyle ={hasS? styles.permChildren : undefined} isUserMasterAdmin={isUserMasterAdmin}  key={j} table={table} onToggle={onToggleSingle} tooltip={defaultStr(p.tooltip,p.title,p.desc)} text = {p.text} checked ={checked} actions={perm.actions} resource={i} action ={j}/>)
+            });
+            if(pContent.length){
+                content.push(<View key={i} style={{backgroundColor:theme.colors.surface}} testID={testID+"_Content_"+i}>
+                    {hasS ? <Label testID={testID+'_Label'}>{pText}</Label> : null}
+                    {pContent}
+                </View>)
             }
-            pContent.push(<PermText labelStyle ={hasS? styles.permChildren : undefined} isUserMasterAdmin={isUserMasterAdmin}  key={j} table={table} onToggle={onToggleSingle} tooltip={defaultStr(p.tooltip,p.title,p.desc)} text = {p.text} checked ={checked} actions={perm.actions} resource={i} action ={j}/>)
+    
         });
-        if(pContent.length){
-            content.push(<View key={i} style={{backgroundColor:theme.colors.surface}} testID={testID+"_Content_"+i}>
-                {hasS ? <Label testID={testID+'_Label'}>{pText}</Label> : null}
-                {pContent}
-            </View>)
-        }
-
-    });
+        return content;
+    },[perms,state.data,state.expanded]);
     if(!content.length) return null;
     return <Cell testID={testID+"_Cell"} tabletSize={6} desktopSize={4} phoneSize={12} {...cellProps}>
         <Expandable  
@@ -162,7 +169,8 @@ const PermLine = ({text,cellProps,isUserMasterAdmin,withGrid,defaultActions,reso
                     labelStyle = {false}
                     checked = {allChecked} 
                     disabled = {disabled}
-                    resource={resource} action={allPerms[resource]} 
+                    resource={resource} 
+                    action={allPerms[resource]} 
                     text={text} 
                     testID = {testID+"_"+table}
                     isUserMasterAdmin = {isUserMasterAdmin}

package/src/screens/Auth/PermText.js

@@ -7,6 +7,10 @@ import theme from "$theme";
 
 const PermText = React.forwardRef(({isUserMasterAdmin,disabled,assignPerm,testID,text,title,label,checked,labelStyle,table,type,onToggle,actions,action,resource,tooltip,...props},ref)=>{
     testID = defaultStr(testID,"RN_AuthPermTextComponent");
+    if(!resource){
+        console.error("invalid resource for perm text : resource = ",resource,action,type,text,title," table = ",table,tooltip,props);
+        return null;
+    }
     return <Checkbox
         title = {tooltip || title}
         ref = {ref}

package/src/screens/Help/openLibraries.js

@@ -1,7 +1,7 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
 		"name": "@fto-consult/expo-ui",
-		"version": "8.5.0",
+		"version": "8.14.5",
 		"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.11.1",
+		"version": "4.15.56",
 		"url": "https://github.com/borispipo/common#readme",
 		"license": "ISC"
 	},
@@ -67,11 +67,6 @@ module.exports = {
 		"url": "https://github.com/crypto-browserify/crypto-browserify",
 		"license": "MIT"
 	},
-	"expo": {
-		"version": "50.0.2",
-		"url": "https://github.com/expo/expo/tree/main/packages/expo",
-		"license": "MIT"
-	},
 	"file-saver": {
 		"version": "2.0.5",
 		"url": "https://github.com/eligrey/FileSaver.js#readme",
@@ -82,6 +77,11 @@ module.exports = {
 		"url": "https://ruimarinho.github.io/google-libphonenumber/",
 		"license": "(MIT AND Apache-2.0)"
 	},
+	"html2canvas": {
+		"version": "1.4.1",
+		"url": "https://html2canvas.hertzen.com",
+		"license": "MIT"
+	},
 	"htmlparser2-without-node-native": {
 		"version": "3.9.2",
 		"url": "git://github.com/fb55/htmlparser2.git",
@@ -95,6 +95,11 @@ module.exports = {
 		"version": "3.7.6",
 		"license": "BSD-3-Clause"
 	},
+	"jsbarcode": {
+		"version": "3.11.6",
+		"url": "https://github.com/lindell/JsBarcode#readme",
+		"license": "MIT"
+	},
 	"prop-types": {
 		"version": "15.8.1",
 		"url": "https://facebook.github.io/react/",
@@ -129,7 +134,7 @@ module.exports = {
 		"license": "MIT"
 	},
 	"react-native-paper": {
-		"version": "5.12.1",
+		"version": "5.12.3",
 		"url": "https://callstack.github.io/react-native-paper",
 		"license": "MIT"
 	},