@fto-consult/expo-ui 6.23.2 → 6.23.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.23.2",
+  "version": "6.23.3",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -66,7 +66,7 @@
     "@emotion/native": "^11.11.0",
     "@expo/html-elements": "^0.5.1",
     "@expo/vector-icons": "^13.0.0",
-    "@fto-consult/common": "^3.25.0",
+    "@fto-consult/common": "^3.26.0",
     "@gorhom/portal": "^1.0.14",
     "@pchmn/expo-material3-theme": "^1.3.1",
     "@react-native-async-storage/async-storage": "1.18.2",

package/src/components/Chip/index.js

@@ -247,7 +247,7 @@ const styles = StyleSheet.create({
   text: {
     minHeight: 24,
     lineHeight: 24,
-    verticalAlign: 'center',
+    verticalAlign: 'middle',
     marginVertical: 4,
   },
   avatar: {

package/src/components/Date/DatePickerInput/index.js

@@ -7,7 +7,7 @@ import i18n from "$i18n";
 import {defaultStr} from "$cutils";
 import DateLib from "$lib/date";
 import PropTypes from "prop-types";
-import TextField from "$ecomponents/TextField";
+import TextField,{inputModes} from "$ecomponents/TextField";
 import Icon from "$ecomponents/Icon";
 import {StyleSheet,View} from "react-native";
 import DatePickerModal from '../DatePickerModal'
@@ -183,7 +183,7 @@ const DatePickerInput = React.forwardRef(({
           label={labelText}
           defaultValue={formattedValue}
           placeholder={inputFormatLabel}
-          inputMode={'number-pad'}
+          inputMode={inputModes.number}
           mask={inputFormat}
           keyboardAppearance={theme.dark ? 'dark' : 'default'}
           error={hasError}

package/src/components/Dialog/DialogTitle.js

@@ -42,6 +42,6 @@ DialogTitleComponent.displayName = "DialogTitleComponent";
 const styles = StyleSheet.create({
     container : {
         marginTop:10,fontSize:16,marginHorizontal:10,lineHeight:25,marginBottom:10,
-        fontWeight : '550',
+        fontWeight : '500',
     }
 })

package/src/components/PhoneInput/index.js

@@ -1,6 +1,6 @@
 import React from "$react";
 import {defaultObj,defaultStr,isNonNullString} from "$cutils";
-import TextField from "$ecomponents/TextField";
+import TextField,{inputModes} from "$ecomponents/TextField";
 import { StyleSheet,Image,Pressable} from 'react-native';
 import PropTypes from "prop-types";
 import theme,{DISABLED_OPACITY} from "$theme";
@@ -175,7 +175,7 @@ export default function PhoneInputComponent(props){
                             </>
                         </Pressable>
                     }
-                    inputMode ={keyboardTypes.number}
+                    inputMode ={inputModes.number}
                     defaultValue = {state.displayValue}
                     onChange = {(args)=>{
                         const {value:nValue} = args;

package/src/components/TextField/index.js

@@ -9,7 +9,7 @@ import Icon,{COPY_ICON} from "$ecomponents/Icon";
 import Label from "$ecomponents/Label";
 import {isAndroid as _isAndroid,isIos as _isIos,isWeb as _isWeb} from "$cplatform";
 import {isMobileMedia,isDesktopMedia} from "$cplatform/dimensions";
-import {keyboardTypes,FONT_SIZE,parseDecimal,HEIGHT,outlinedMode,modes,flatMode,normalMode,shadowMode} from "./utils";
+import {keyboardTypes,inputModes,FONT_SIZE,parseDecimal,HEIGHT,outlinedMode,modes,flatMode,normalMode,shadowMode} from "./utils";
 import {copyTextToClipboard} from "$clipboard/utils";
 import Surface from "$ecomponents/Surface";
 import View from "$ecomponents/View";
@@ -17,8 +17,6 @@ const PADDING_HORIZONTAL_FLAT_MODE = 2;
 
 export const LINE_HEIGHT = 10;
 
-const EnterKey = "Enter".toLowerCase();
-const BackSpaceKey = "Backspace".toLowerCase();
 
 export * from "./utils";
 
@@ -100,27 +98,23 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
     readOnly = defaultBool(readOnly,false);
 
     const isEditable = !disabled && !readOnly;
-    inputMode = defaultStr(inputMode).toLowerCase();
-    let hasFountKeyboardType = false;
-    if(isNonNullString(inputMode)){
-        if(!keyboardTypes[inputMode]){
-            for(let i in keyboardTypes){
-                if(inputMode === keyboardTypes[i]){
-                    hasFountKeyboardType = true;
-                }
-            }
-        }
+    inputMode = defaultStr(inputMode,inputModes.default).toLowerCase();
+    if(type === "phone" || type =="email"){
+        inputMode = inputModes.phone;
     }
-    if(!hasFountKeyboardType && (!inputMode || !keyboardTypes[inputMode])){
+    const hasFountKeyboardType = inputModes[inputMode.toLowerCase().trim()];
+    if(!hasFountKeyboardType && (!inputMode || !inputModes[inputMode])){
         if(canValueBeDecimal){
-            inputMode = keyboardTypes.decimal;
+            inputMode = inputModes.decimal;
         } else if(type == "email"){
-            inputMode = keyboardTypes.email;
+            inputMode = inputModes.email;
         } else if(type =="phone" || type =="tel"){
-            inputMode = keyboardTypes.phone;
-        } else if(!keyboardTypes[type]){
-            inputMode = keyboardTypes.default;
-        }
+            inputMode = inputModes.phone;
+        } if(inputModes[type]){
+            inputMode = inputModes[type];
+        }  else {
+            inputMode = inputModes.default;
+        } 
     }
     const isSecureText = type =="password"?true : false;
     const [secureTextEntry,setSecureTextEntry] = React.useState(isSecureText);
@@ -350,7 +344,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
                 backgroundColor : 'transparent',
                 color : !error && !isFocused && Colors.isValid(flattenStyle.color)?flattenStyle.color : inputColor,
                 fontSize,
-                verticalAlign: 'center',//multiline ? 'top' : 'center',
+                verticalAlign: 'middle',
                 overflow : 'hidden',
             },
             isWeb && { outline: 'none'},
@@ -366,6 +360,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
         ],
         secureTextEntry,
         inputMode,
+        keyboardType : inputMode in inputModes ? keyboardTypes[inputMode] : keyboardTypes.default,
         autoCapitalize : upper?(isAndroid?'characters':"none"):autoCapitalize,
         value : currentDefaultValue,
         realValue : text,

package/src/components/TextField/utils.js

@@ -1 +1,83 @@
-export * from "$common/TextField";
+// 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.
+/****
+ *  @namespace TextField
+ *  contient un ensemble d'utilitaires pour la création du composant TextField
+ */
+import {defaultStr,parseDecimal as NParseDecimal,defaultDecimal} from "$cutils";
+
+
+export const flatMode = 'flat';
+export const outlinedMode = 'outlined';
+export const normalMode = "normal";
+export const shadowMode = "shadow";
+
+export const defaultMode = outlinedMode;
+
+export const modes = {flat:flatMode,shadow:shadowMode,outlined:outlinedMode,normal:normalMode};
+
+export const modesObject = {
+    flat : {
+        code : flatMode,
+        label : 'Flottant',
+    },
+    shadow : {
+        code : shadowMode,
+        label : 'Ombre',
+    },
+    normal : {
+        code : normalMode,
+        label : 'Normal',
+    },
+    outlined : {
+        code : outlinedMode,
+        label : 'Décrit',
+    }
+}
+
+
+export const HEIGHT = 56;
+
+
+export const AutoCapitalizeTypes = {
+    characters : "characters", ///all characters.
+    words : "words", //first letter of each word.
+    sentences :"sentences", //first letter of each sentence (default).
+    none : "none", ///don't auto capitalize anything.
+}
+
+export const keyboardTypes = {
+    default : 'default',
+    number : "number-pad",
+    numberPad : "number-pad",
+    decimal : "decimal-pad",
+    numeric : "numeric",
+    email : "email-address",
+    tel : "phone-pad",
+    phone : "phone-pad",
+}
+
+export const inputModes = {
+    default : 'none',
+    number : "numberic",
+    decimal : "decimal",
+    numeric : "numeric",
+    email : "email",
+    tel : "tel",
+    phone : "tel",
+    search : "search",
+    url : "url",
+}
+export const FONT_SIZE = 16;
+
+export const parseDecimal = (v,type,preserveDecimalLength)=>{
+    type = defaultStr(type).trim().toLowerCase();
+    if((type =='number' || type =='decimal') && !isDecimal(v)){
+        if(v == undefined || v == null){
+            v = '';
+        }
+        v = defaultDecimal(NParseDecimal(v,preserveDecimalLength),0);
+    }
+    return v;
+}

package/src/context/Provider.js

@@ -7,6 +7,7 @@ import {isObj,isNonNullString} from "$cutils";
 import eMainScreens from "$escreens/mainScreens";
 import {ExpoUIContext} from "./hooks";
 import Login from "$eauth/Login";
+import {modes} from "$ecomponents/TextField";
 
 /*****
     les utilitaires disponibles à passer au provider : 
@@ -75,7 +76,17 @@ const Provider = ({children,getTableData,navigation,components,convertFiltersToS
           }
         }
         theme.fonts = newTheme.fonts;
-        return typeof extendAppTheme == 'function'? extendAppTheme(theme)  : theme;
+        const r = typeof extendAppTheme == 'function'? extendAppTheme(theme2)  : theme2;
+        return {
+          ...r,
+          get textFieldMode (){
+            /***** possibilité de charger le mode d'affichage par défaut des champs textuels dans le theme de l'application */
+            if(typeof Theme.current.textFieldMode =='string' && Theme.current.textFieldMode && modes[Theme.current.textFieldMode]){
+                return modes[Theme.current.textFieldMode];
+            }
+            return isMobileMedia()? modes.shadow : modes.flat;
+          }
+        }
     }
     return <ExpoUIContext.Provider 
       value={{