@fto-consult/expo-ui 2.10.5 → 2.11.1

package/normalize-countries.js

@@ -0,0 +1,51 @@
+// 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.
+
+const fs = require("fs");
+const path = require("path");
+const dir =  path.join(__dirname,"src","components","Countries","resources");
+const countries = require(path.join(dir,"countries.json"));
+
+const normalized = [];
+const normalizedSQL = [];
+const exportedCountries = [];
+
+for(let i in countries){
+    const country = countries[i];
+    if(!country || !country.name || !country.iso2 || typeof country.iso2 !='string') continue;
+    const code = country.iso2.toUpperCase().trim();
+    const c = {
+        code,
+        name : country.name,
+        dialCode : country.dialCode,
+    };
+    exportedCountries.push({
+        ...country,
+        iso2 : code,
+        ...c,
+    })
+    normalized.push(c);
+    normalizedSQL.push("("+escapeQuotes(c.code)+","+escapeQuotes(c.name)+","+escapeQuotes(c.dialCode)+")")
+}
+writeFile(path.join(dir,"countries-normalized.json"),JSON.stringify(exportedCountries, null, 2))
+writeFile(path.join(dir,"countries.sql"),"INSERT INTO countries(code,name,dialCode) \n\tVALUES \n\t\t"+normalizedSQL.join(",\n\t\t"))
+writeFile(path.join(dir,"countries-with-not-extra.json"),JSON.stringify(normalized, null, 2))
+
+function writeFile(path, contents, cb) {
+    const p = require('path').dirname(path);
+    if(!fs.existsSync(p)){
+       try {
+          fs.mkdirSync(p,{ recursive: true});
+       } catch(e){}
+    }
+    if(fs.existsSync(p)){
+      return fs.writeFileSync(path, contents, cb);
+    }
+    throw {message : 'impossible de créer le repertoire '+p};
+  }
+
+  function escapeQuotes (str){
+    if(!str || typeof str !='string') return "''";
+    return "'"+str.replace(/'/g, "\\'\\'")+"'";
+  }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "2.10.5",
+  "version": "2.11.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -65,8 +65,7 @@
     "@expo/metro-config": "^0.4.0",
     "@expo/vector-icons": "^13.0.0",
     "@expo/webpack-config": "^0.17.2",
-    "@fto-consult/common": "^1.19.5",
-    "@fto-consult/expo-ui": "^2.9.2",
+    "@fto-consult/common": "^1.19.8",
     "@gorhom/portal": "^1.0.14",
     "@react-native-async-storage/async-storage": "~1.17.3",
     "@react-native-community/datetimepicker": "6.5.2",

package/src/components/BackToTop/index.js

@@ -1,7 +1,6 @@
 import Fab from "$ecomponents/Fab";
 import {isObj,defaultStr,defaultVal,defaultObj} from "$utils";
 import React from "$react";
-import { StyleSheet } from 'react-native';
 import PropTypes from "prop-types";
 
 const SCREEN_INDENT = 20;
@@ -23,23 +22,21 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
     const isMounted = React.useIsMounted();
     const {onPress,accessibilityLabel,onBackToTop,onVisibilityChange,position,icon,...rProps} = props;
     const rest = defaultObj(rProps);
-    const [state,setState] = React.useStateIfMounted({
-        visible : false,
-    });
+    const [visible,setVisible] = React.useState(false);
     const open = ()=>{
-        if(!isMounted() || state.visible)return;
-        setState({...state,visible:true});
+        if(!isMounted() || visible)return;
+        setVisible(true);
     }
     const close = ()=>{
-        if(!isMounted() || !state.visible)return;
-        setState({...state,visible:false});
+        if(!isMounted() || !visible)return;
+        setVisible(false);
     }
  
     const context = {open,close,
         toggleVisibility:(event)=>{
             if(!isMounted()) return;
             let v = toggleVisibility(event);
-            if(typeof v =='boolean' && v !== state.visible){
+            if(typeof v =='boolean' && v !== visible){
                 return v ? open() : close();
             }
             return undefined;
@@ -50,7 +47,7 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
         if(onVisibilityChange){
             onVisibilityChange({context,visible});
         }
-    },[state.visible])
+    },[visible])
     const style = defaultStr(position).toLowerCase() =='right' ? {
         right: 0
     }  : {left : 0};
@@ -58,7 +55,7 @@ const BackToTopComponent = React.forwardRef((props,ref)=>{
     React.useEffect(()=>{
         React.setRef(ref,context);
     },[])
-    return !state.visible ? null :  <Fab
+    return !visible ? null :  <Fab
         {...rest}
         accessibilityLabel = {defaultStr(rest.accessibilityLabel,'Retour en haut')}
         onPress = {(e)=>{

package/src/components/Countries/Flag.js

@@ -0,0 +1,31 @@
+import React from "$react";
+import Image from "$components/Image";
+import { getCountry,styles} from "./utils";
+import {isNonNullString,defaultStr,isNumber} from "$utils";
+import View from "$ecomponents/View"
+import theme from "$theme";
+import Label from "$components/Label";
+
+export default function CountryFlagComponent({code,label,withName,withCode,text,containerProps,labelProps,withLabel,tesID,...props}){
+    if(!isNonNullString(code)) return null;
+    const country = getCountry(code);
+    tesID = defaultStr(tesID,"RN_CountryFlagComponent");
+    if(!country) return <Label tesID={tesID+"_NotFoundCode"}>{code}</Label>;
+    //console.log(country," is county");
+    containerProps = Object.assign({},containerProps);
+    labelProps = Object.assign({},labelProps);
+    return <View  {...containerProps} testID={tesID} style={[theme.styles.row,containerProps.style]}>
+        {(isNonNullString(country.image) || isNumber(country.image)) ? 
+            <Image  
+            accessibilityIgnoresInvertColors 
+            tesID ={tesID+"Image"}
+            {...props}
+            size = {25} 
+            style={[props.style]} 
+            src={country.image}
+        /> : null}
+        {<Label tesID={tesID+"_Label"} {...labelProps} style={[labelProps.style,{marginLeft:5}]}>
+            {withName || withLabel ? country.name : withCode ? country.code.toUpperCase() : null}
+        </Label>}
+    </View>
+}

package/src/components/Countries/SelectCountry.js

@@ -1,6 +1,6 @@
 import React from "$react";
 import SimpleSelect from "$ecomponents/SimpleSelect";
-import { countries } from "./utils";
+import { countries,styles} from "./utils";
 import View from "$ecomponents/View";
 import {StyleSheet,Image} from "react-native";
 import {defaultObj} from "$utils";
@@ -15,9 +15,10 @@ export const getCountryFieldProps = (props)=>{
     let {imageProps,...rest} = props;
     imageProps = defaultObj(imageProps);
     return {
-        text : 'Pays',
+        label : defaultStr(props.label,props.text,'Pays'),
         type : 'select',
         items : countries,
+        upper : true,
         dialogProps : {title:'Sélectionner un pays'},
         getItemValue : ({item})=>item.code,
         compare : (a,b)=>{
@@ -50,18 +51,6 @@ SelectCoutryComponent.propTypes = {
     imageProps : PropTypes.object, ///les props à appliquer aux images affichées
 }
 
-const styles = StyleSheet.create({
-    renderedImage : {
-        flexDirection : "row",
-        alignItems : 'center',
-        justifyContent : 'flex-start',
-        flex : 1,
-    },
-    flagImage : {
-        borderWidth:0,
-        width : 30,
-        height : 20,
-    },
-})
+
 
 

package/src/components/Countries/index.js

@@ -2,4 +2,6 @@ export * from "./utils";
 
 export * from "./SelectCountry";
 
+export {default as Flag} from "./Flag";
+
 export {default as SelectCountry} from "./SelectCountry";