@fto-consult/expo-ui 6.1.3 → 6.1.5

package/babel.config.js

@@ -46,6 +46,9 @@ module.exports = function(api,opts) {
   }
   
   return {
+    presets: [
+      ['babel-preset-expo']
+    ],
     plugins : [
       ["inline-dotenv",inlineDovOptions],
       ["module-resolver", {"alias": alias}],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.1.3",
+  "version": "6.1.5",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {

package/src/App.js

@@ -10,7 +10,7 @@ import APP from "$app";
 import {isMobileNative} from "$cplatform";
 import {setDeviceIdRef} from "$capp";
 import appConfig from "$capp/config";
-import {showPrompt} from "$components/Dialog/confirm";
+import {showPrompt} from "$ecomponents/Dialog/confirm";
 import { AppState } from 'react-native'
 import {canFetchOffline} from "$capi/utils";
 import {defaultNumber} from "$cutils";

package/src/auth/ProviderSelector.js

@@ -1,13 +1,13 @@
 // Copyright 2022 @fto-consult/Boris Fouomene. All rights reserved.
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
-import Button from "$components/Button";
-import Menu from "$components/Menu";
+import Button from "$ecomponents/Button";
+import Menu from "$ecomponents/Menu";
 import theme from "$theme";
 import React from "$react";
 import {isObj,defaultStr,defaultObj} from "$cutils";
 import PropTypes from "prop-types";
-import View from "$components/View";
+import View from "$ecomponents/View";
 
 /****le selecteur de provider, pour l'authentification */
 const ProviderSelector = React.forwardRef(({providers,anchorProps,containerProps,anchor,activeProvider,testID,onChange,...props},ref)=>{

package/src/components/AppBar/Content.js

@@ -1,86 +1,124 @@
-import React from '$react';
-import {Platform,StyleSheet,Pressable,View} from 'react-native';
+import * as React from 'react';
+import {
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+  View,
+} from 'react-native';
 import Label from "$ecomponents/Label";
-import theme,{Colors,StyleProp} from "$theme";
-import PropTypes from "prop-types";
+import theme,{Colors} from "$theme";
+import {isIos,isWeb} from "$cplatform";
 import {defaultObj,defaultStr} from "$cutils";
-import {isIos,isAndroid,isWeb} from "$cplatform";
-
-const AppbarContent = React.forwardRef(({
+const AppbarContent = ({
   color: titleColor,
   subtitle,
-  subtitleProps,
   subtitleStyle,
   onPress,
+  disabled,
   style,
-  titleProps,
   titleRef,
   titleStyle,
   title,
-  testID,
+  theme: themeOverrides,
   containerProps,
+  titleProps,
+  subtitleProps,
+  testID,
   ...rest
-},ref) => {
-
-  const titleTextColor = titleColor ? titleColor : theme.colors.primaryText;
-  titleProps = defaultObj(titleProps);
-  subtitleProps = defaultObj(subtitleProps);
-  testID = defaultStr(testID,"RN_AppBarContentComponent")
-  subtitle = subtitle === false ? null : subtitle;
-  const subtitleColor = Colors.setAlpha(titleTextColor,0.7);
-
-  return (
-    <Pressable testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
-      <View
-        pointerEvents="box-none"
-        style={[styles.container, style]}
-        {...rest}
-        testID = {testID}
-        ref = {ref}
-      >
-        <Label
+}) => {
+  
+    const titleTextColor = Colors.isValid(titleColor) ? titleColor : theme.colors.primaryText;
+    titleProps = defaultObj(titleProps);
+    subtitleProps = defaultObj(subtitleProps);
+    testID = defaultStr(testID,"RN_AppBarContentComponent")
+    subtitle = subtitle === false ? null : subtitle;
+    const subtitleColor = Colors.setAlpha(titleTextColor,0.7);
+   const webStyle = isWeb() && theme.styles.webFontFamilly;
+   const content = (
+    <View
+      pointerEvents="box-none"
+      style={[styles.container, style]}
+      testID={testID}
+      {...rest}
+    >
+      <Label
           ref={titleRef}
-          testID = {testID+"_Title"}
           {...titleProps}
           style={[
             {
               color: titleTextColor,
               ...(isIos()? theme.fonts.regular: theme.fonts.medium),
             },
-            isWeb() && theme.styles.webFontFamilly,
+            webStyle,
             titleProps.style,
             titleStyle,
           ]}
           numberOfLines={1}
           accessible
-          // @ts-ignore Type '"heading"' is not assignable to type ...
-          role={Platform.OS === 'web' ? 'heading' : 'header'}
+          accessibilityRole={
+            onPress
+              ? 'none'
+              : Platform.OS === 'web'
+              ? ('heading')
+              : 'header'
+          }
+          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+          accessibilityTraits="header"
+          testID={`${testID}-title-text`}
         >
           {title}
+      </Label>
+      {subtitle ? (
+        <Label
+          testID = {testID+"_Subtitle"}
+          {...subtitleProps}
+          style={[styles.subtitle, { color: subtitleColor },webStyle, subtitleProps.style, subtitleStyle]}
+          numberOfLines={1}
+        >
+          {subtitle}
         </Label>
-        {subtitle ? (
-          <Label
-            testID = {testID+"_Subtitle"}
-            {...subtitleProps}
-            style={[styles.subtitle, { color: subtitleColor }, subtitleProps.style, subtitleStyle]}
-            numberOfLines={1}
-          >
-            {subtitle}
-          </Label>
-        ) : null}
-      </View>
-    </Pressable>
+      ) : null}
+    </View>
   );
-});
 
-AppbarContent.displayName = 'Appbar.Content';
+  if (onPress) {
+    return (
+      <TouchableWithoutFeedback
+        testID={testID+"_Container"}
+        {...containerProps}
+        accessibilityRole={touchableRole}
+        accessibilityTraits={touchableRole}
+        accessibilityComponentType="button"
+        onPress={onPress}
+        disabled={disabled}
+      >
+        {content}
+      </TouchableWithoutFeedback>
+    );
+  }
+  return content;
+};
+
+AppbarContent.displayName = 'AppbarComponent.Content';
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    paddingHorizontal: 5,
-    justifyContent : 'center',
-    alignItems : 'flex-start',
+    paddingHorizontal: 12,
+  },
+  v3DefaultContainer: {
+    paddingHorizontal: 0,
+  },
+  v3MediumContainer: {
+    paddingHorizontal: 0,
+    justifyContent: 'flex-end',
+    paddingBottom: 24,
+  },
+  v3LargeContainer: {
+    paddingHorizontal: 0,
+    paddingTop: 36,
+    justifyContent: 'flex-end',
+    paddingBottom: 28,
   },
   title: {
     fontSize: Platform.OS === 'ios' ? 17 : 20,
@@ -90,43 +128,12 @@ const styles = StyleSheet.create({
   },
 });
 
+const iosTouchableRole = ['button', 'header'];
+const touchableRole = Platform.select({
+  ios: iosTouchableRole,
+  default: iosTouchableRole[0],
+});
+
 export default AppbarContent;
-const titleType = PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.node,
-    PropTypes.bool,
-])
 
-AppbarContent.propTypes = {
-    /**
-   * Custom StyleProp for the text.
-   */
-  StyleProp: PropTypes.string,
-  /**
-   * Text for the title.
-   */
-  title: titleType,
-  /**
-   * Style for the title.
-   */
-  titleStyle: StyleProp,
-  /**
-   * Reference for the title.
-   */
-  titleRef : PropTypes.any,
-  /**
-   * @deprecated Deprecated in v5.x
-   * Text for the subtitle.
-   */
-  subtitle : titleType,
-  /**
-   * @deprecated Deprecated in v5.x
-   * Style for the subtitle.
-   */
-  subtitleStyle: StyleProp,
-  /**
-   * Function to execute on press.
-   */
-  onPress : PropTypes.func,
-  style : StyleProp
-}
+AppbarContent.displayName = "AppBarContentComponent";

package/src/components/AppBar/Content2.js

@@ -0,0 +1,132 @@
+import React from '$react';
+import {Platform,StyleSheet,Pressable,View} from 'react-native';
+import Label from "$ecomponents/Label";
+import theme,{Colors,StyleProp} from "$theme";
+import PropTypes from "prop-types";
+import {defaultObj,defaultStr} from "$cutils";
+import {isIos,isAndroid,isWeb} from "$cplatform";
+
+const AppbarContent = React.forwardRef(({
+  color: titleColor,
+  subtitle,
+  subtitleProps,
+  subtitleStyle,
+  onPress,
+  style,
+  titleProps,
+  titleRef,
+  titleStyle,
+  title,
+  testID,
+  containerProps,
+  ...rest
+},ref) => {
+
+  const titleTextColor = titleColor ? titleColor : theme.colors.primaryText;
+  titleProps = defaultObj(titleProps);
+  subtitleProps = defaultObj(subtitleProps);
+  testID = defaultStr(testID,"RN_AppBarContentComponent")
+  subtitle = subtitle === false ? null : subtitle;
+  const subtitleColor = Colors.setAlpha(titleTextColor,0.7);
+
+  return (
+    <Pressable testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
+      <View
+        pointerEvents="box-none"
+        style={[styles.container, style]}
+        {...rest}
+        testID = {testID}
+        ref = {ref}
+      >
+        <Label
+          ref={titleRef}
+          testID = {testID+"_Title"}
+          {...titleProps}
+          style={[
+            {
+              color: titleTextColor,
+              ...(isIos()? theme.fonts.regular: theme.fonts.medium),
+            },
+            isWeb() && theme.styles.webFontFamilly,
+            titleProps.style,
+            titleStyle,
+          ]}
+          numberOfLines={1}
+          accessible
+          // @ts-ignore Type '"heading"' is not assignable to type ...
+          role={Platform.OS === 'web' ? 'heading' : 'header'}
+        >
+          {title}
+        </Label>
+        {subtitle ? (
+          <Label
+            testID = {testID+"_Subtitle"}
+            {...subtitleProps}
+            style={[styles.subtitle, { color: subtitleColor }, subtitleProps.style, subtitleStyle]}
+            numberOfLines={1}
+          >
+            {subtitle}
+          </Label>
+        ) : null}
+      </View>
+    </Pressable>
+  );
+});
+
+AppbarContent.displayName = 'Appbar.Content';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingHorizontal: 5,
+    justifyContent : 'center',
+    alignItems : 'flex-start',
+  },
+  title: {
+    fontSize: Platform.OS === 'ios' ? 17 : 20,
+  },
+  subtitle: {
+    fontSize: Platform.OS === 'ios' ? 11 : 14,
+  },
+});
+
+export default AppbarContent;
+const titleType = PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.node,
+    PropTypes.bool,
+])
+
+AppbarContent.propTypes = {
+    /**
+   * Custom StyleProp for the text.
+   */
+  StyleProp: PropTypes.string,
+  /**
+   * Text for the title.
+   */
+  title: titleType,
+  /**
+   * Style for the title.
+   */
+  titleStyle: StyleProp,
+  /**
+   * Reference for the title.
+   */
+  titleRef : PropTypes.any,
+  /**
+   * @deprecated Deprecated in v5.x
+   * Text for the subtitle.
+   */
+  subtitle : titleType,
+  /**
+   * @deprecated Deprecated in v5.x
+   * Style for the subtitle.
+   */
+  subtitleStyle: StyleProp,
+  /**
+   * Function to execute on press.
+   */
+  onPress : PropTypes.func,
+  style : StyleProp
+}

package/src/components/AppBar/index.js

@@ -125,19 +125,15 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
    const hasRight = React.isValidElement(renderedActions) || React.isValidElement(renderedRight);
     return (
       <Appbar.Header elevation={elevation} {...appBarProps}  testID={testID} style={[styles.header,{backgroundColor},elevStyle,appBarProps.style]} onLayout={onPageResize}>
-        <View style={styles.title2Back} testID={testID+"_AppBarBack2Titlte"}>
-          {backAction}
-          <Content {...defaultObj(appBarProps.contentProps)} 
-              title={title}
-              titleProps = {{...titleProps,style:[styles.title,{color:primaryText},titleProps.style]}}
-              subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
-              subtitleProps = {subtitleProps}
-          />
-        </View>
-        {hasRight ? <View testID={testID+"_Actions"} style={styles.actions2right}>
-          {renderedActions}
-          {renderedRight}
-        </View> : null}
+        {backAction}
+         <Content {...defaultObj(appBarProps.contentProps)} 
+            title={title}
+            titleProps = {{...titleProps,style:[styles.title,{color:primaryText},titleProps.style]}}
+            subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
+            subtitleProps = {subtitleProps}
+        />
+        {renderedActions}
+        {renderedRight}
       </Appbar.Header>
     );
 });

package/src/components/Avatar/index.js

@@ -7,7 +7,7 @@ import Text from "./Text";
 import theme from "$theme";
 import AvatarImage from "./Image";
 import { Pressable } from "react-native";
-import Tooltip from "$components/Tooltip";
+import Tooltip from "$ecomponents/Tooltip";
 
 const defaultSize = 40;
 

package/src/components/Chart/appexChart/index.js

@@ -1,6 +1,6 @@
 import ApexChart from 'apexcharts/dist/apexcharts.min';
 import React from "$react";
-import View from "$components/View";
+import View from "$ecomponents/View";
 import { destroyChart } from './utils';
 import theme from "$theme";
 

package/src/components/Countries/Flag.js

@@ -1,10 +1,10 @@
 import React from "$react";
-import Image from "$components/Image";
+import Image from "$ecomponents/Image";
 import { getCountry,styles} from "./utils";
 import {isNonNullString,defaultStr,isNumber} from "$cutils";
 import View from "$ecomponents/View"
 import theme from "$theme";
-import Label from "$components/Label";
+import Label from "$ecomponents/Label";
 
 export default function CountryFlagComponent({code,label,withName,withCode,text,containerProps,labelProps,withLabel,testID,...props}){
     if(!isNonNullString(code)) return null;

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

@@ -10,7 +10,7 @@ import Label from "$ecomponents/Label";
 import theme from "$theme"
 import Expandable from "$ecomponents/Expandable";
 import { Dimensions } from "react-native";
-import Grid from "$components/Grid";
+import Grid from "$ecomponents/Grid";
 import { Pressable } from "react-native";
 import Tooltip from "$ecomponents/Tooltip";
 

package/src/components/Datagrid/RenderType.js

@@ -1,6 +1,6 @@
 import {get,set} from "./Common/session";
 import Icon from "$ecomponents/Icon";
-import {notify} from "$ecomponents/Dialog";
+import notify from "$enotify";
 import {isDesktopMedia} from "$cplatform/dimensions";
 import {defaultStr} from "$cutils";
 import {Menu} from "$ecomponents/BottomSheet";

package/src/components/Date/PeriodAction.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 import React from "$react";
-import TextField from "$components/TextField";
+import TextField from "$ecomponents/TextField";
 import {isNonNullString} from "$cutils";
 import DateLib from "$date";
 

package/src/components/Drawer/DrawerLayout/index.js

@@ -17,7 +17,7 @@ import Preloader from "$epreloader";
 import {Elevations} from "$ecomponents/Surface";
 
 const MIN_SWIPE_DISTANCE = 3;
-const DEVICE_WIDTH = parseFloat(Dimensions.get('window').width);
+const DEVICE_WIDTH = Math.max(Dimensions.get('window').width,280);
 const THRESHOLD = DEVICE_WIDTH / 2;
 const VX_MAX = 0.1;
 

package/src/components/FieldSet/index.js

@@ -3,8 +3,8 @@
 // license that can be found in the LICENSE file.
 
 import React from "$react";
-import View from "$components/View";
-import Label from "$components/Label";
+import View from "$ecomponents/View";
+import Label from "$ecomponents/Label";
 import PropTypes from 'prop-types';
 import { StyleSheet } from "react-native";
 import {defaultStr,defaultObj} from "$cutils";

package/src/components/Filter/index.js

@@ -15,7 +15,7 @@ import React,{Component as AppComponent} from "$react";
 import theme from "$theme";
 import {isMobileMedia} from "$cplatform/dimensions";
 import { ActivityIndicator } from "react-native-paper";
-import DialogProvider from "$components/Form/FormData/DialogProvider";
+import DialogProvider from "$ecomponents/Form/FormData/DialogProvider";
 import FilterBetweenComponent from "./BetweenComponent";
 
 const manualRunKey = "manual-run";

package/src/components/Form/Action.js

@@ -1,6 +1,6 @@
 import React from "$react";
 import PropTypes from "prop-types";
-import Button from "$components/Button";
+import Button from "$ecomponents/Button";
 import notify from "$notify";
 import FormsManager from "./utils/FormsManager";
 import {uniqid} from "$cutils";

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

@@ -20,7 +20,7 @@ import defaultKeyboardEvents from "../utils/keyboardEvents";
 import sprintf from "./sprintf";
 import ErrorMessage from "$ecomponents/ErrorBoundary/ErrorMessage";
 import { UPPER_CASE, LOWER_CASE} from "$common/lib/validator";
-import Label from "$components/Label";
+import Label from "$ecomponents/Label";
 
 
 export default class Field extends AppComponent {

package/src/components/Form/FormData/FieldsContent.js

@@ -1,5 +1,5 @@
 import React from "$react";
-import Divider from "$components/Divider";
+import Divider from "$ecomponents/Divider";
 import {isObj,isNonNullString,defaultStr,defaultObj} from "$utils";
 import getComponentFromType from "./componentsTypes";
 import appConfig from "$capp/config";

package/src/components/Grid/Cell.js

@@ -83,6 +83,7 @@ const GridCellComponent = React.forwardRef((p,ref)=>{
         {...props}
         testID={testID} 
         mediaQueryUpdateNativeProps = {(args)=>{
+            console.log("calling ",args);
             if(typeof mediaQueryUpdateNativeProps =='function' && mediaQueryUpdateNativeProps(args) === false) return;
             return getSizeStyle(p);
         }}

package/src/components/Grid/Grid.js

@@ -1,5 +1,5 @@
 import React from  '$react';
-import {Pressable,StyleSheet} from 'react-native';
+import {Pressable,StyleSheet,useWindowDimensions} from 'react-native';
 import {grid} from "$theme";
 import {defaultStr} from "$cutils";
 import PropTypes from "prop-types";

package/src/components/Image/index.js

@@ -2,7 +2,7 @@ import {Image,View} from "react-native";
 import Menu from "$ecomponents/Menu";
 import Avatar from "$ecomponents/Avatar";
 import {isDecimal,setQueryParams,isValidURL,defaultDecimal,defaultStr as defaultString,isDataURL,isPromise,defaultBool,isObj,isNonNullString} from "$cutils";
-import {notify} from "$ecomponents/Dialog";
+import notify from "$enotify";
 let maxWidthDiff = 150, maxHeightDiff = 150;
 import {StyleSheet} from "react-native";
 import React from "$react";

package/src/components/Menu/Menu.js

@@ -1,5 +1,5 @@
 import React,{BaseComponent as AppComponent} from '$react';
-import View from "$components/View";
+import View from "$ecomponents/View";
 import { ScrollView } from 'react-native';
 import {
   Platform,
@@ -14,7 +14,6 @@ import {
 import BackHandler from "$ecomponents/BackHandler";
 import PropTypes from "prop-types";
 import { withTheme,Surface,Portal} from 'react-native-paper';
-//import Surface from "$components/Surface";
 import { NativeModules} from 'react-native';
 import {defaultDecimal,extendObj} from "$cutils";
 import theme,{StylePropTypes} from "$theme";

package/src/components/Snackbar/index.js

@@ -16,7 +16,7 @@ import useEventCallback from '$react/useEventCallback';
 import PropTypes from "prop-types";
 import Surface from '$ecomponents/Surface';
 import Label from "$ecomponents/Label"
-import Button from "$components/Button";
+import Button from "$ecomponents/Button";
 
 const DURATION_SHORT = 4000;
 const DURATION_MEDIUM = 7000;

package/src/layouts/DatabaseStatistics/index.js

@@ -1,5 +1,5 @@
 import Screen from "$screen";
-import Grid,{Cell} from "$components/Grid";
+import Grid,{Cell} from "$ecomponents/Grid";
 import {defaultStr,defaultNumber,defaultVal} from "$cutils";
 import React from "$react";
 import DatabaseStatistic from "./DatabaseStatistic";

package/src/media/index.js

@@ -1,5 +1,5 @@
 import {isObj} from "$cutils";
-import {notify} from "$components/Dialog";
+import notify from "$enotify";
 import Camera from "./camera";
 import {isMobileNative} from "$platform";
 import React from "react";

package/src/screens/Auth/PermProfile.js

@@ -1,20 +1,19 @@
-import showConfirm from "$components/Dialog/confirm";
+import showConfirm from "$ecomponents/Dialog/confirm";
 import notify from "$notify";
 import {defaultArray,arrayValueExists,defaultStr,uniqid} from "$cutils";
 import userDbName from "$database/tables/users/dbName";
 import Auth from "$auth";
 import getData from "$database/getData";
 import getDB from "$database/getDB";
-import {FormData,getForm,getFormData} from "$components/Form";
-import Icon from "$components/Icon";
+import Icon from "$ecomponents/Icon";
 import React from "$react";
-import Label from "$components/Label";
+import Label from "$ecomponents/Label";
 import {open as showPreloader,close as hidePreloader} from "$preloader";
-import Expandable from "$components/Expandable";
+import Expandable from "$ecomponents/Expandable";
 import theme from "$theme";
-import View from "$components/View";
-import Link from "$components/Link";
-import Button from "$components/Button";
+import View from "$ecomponents/View";
+import Link from "$ecomponents/Link";
+import Button from "$ecomponents/Button";
 
 const tableName = Auth.permProfilesTableName.toUpperCase();
 

package/src/screens/Auth/PermProfiles.js

@@ -2,7 +2,7 @@ import FormDataScreen from "$elayouts/Screen/FormData";
 import {defaultStr,defaultObj} from "$cutils";
 import PermLines from "./PermLines";
 import PropTypes from "prop-types";
-import Label from "$components/Label";
+import Label from "$ecomponents/Label";
 import theme from "$theme";
 
 export const screenName = "PermProfileScreens";

package/src/screens/Help/PrivacyPolicy/content.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Label from "$components/Label";
+import Label from "$ecomponents/Label";
 
 export default function ContentPrivacy (){
     return <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>

package/src/screens/Help/TermsOfUses/content.js

@@ -2,7 +2,7 @@
 // Use of this source code is governed by a BSD-style
 // license that can be found in the LICENSE file.
 
-import Label from "$components/Label";
+import Label from "$ecomponents/Label";
 
 export default function ContentTermsOfUses (){
     return <Label primary style={{fontSize:15,fontWeight:'bold',padding:10}}>