@fto-consult/expo-ui 8.70.6 → 8.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.70.6",
+  "version": "8.72.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "react-native-paper-doc": "https://github.com/callstack/react-native-paper/tree/main/docs/docs/guides",
   "scripts": {

package/src/components/Button/Status.js

@@ -28,7 +28,7 @@ const ButtonStatusComponent = React.forwardRef(({status,withIcon,color,backgroun
     left = typeof left =='function'? left(rP) : left;
     right = typeof right =='function'? right(rP) : right;
     const icProps = {color,size:15,...iconProps,style:[theme.styles.noMargin,theme.styles.noPadding,iconProps.style],onPress}
-    return <Pressable ref={ref} onPres={onPress} testID={`${testID}_Container`} {...containerProps} style={[{borderRadius:15,paddingVertical:4,paddingHorizontal:10,alignSelf: 'flex-start'},theme.styles.row,theme.styles.flexWrap,backgroundColor && {backgroundColor},style]}>
+    return <Pressable ref={ref} onPres={onPress} testID={`${testID}_Container`} {...containerProps} style={[styles.button,theme.styles.row,theme.styles.flexWrap,backgroundColor && {backgroundColor},style]}>
         {React.isValidElement(left)? left : null}
         {withIcon !== false && React.isValidElement(icon,true) ? <Icon {...icProps} icon={icon} />:null}
         {label ? <Label testID={`${testID}_Label`} {...labelProps} style={[color && {color},{fontSize:13},labelProps.style]}>{label}</Label> : null}
@@ -46,6 +46,15 @@ ButtonStatusComponent.defaultProps = {
     editable : false,
 }
 
+const styles = StyleSheet.create({
+    button : {
+        borderRadius:15,
+        paddingVertical:4,
+        paddingHorizontal:10,
+        alignSelf: 'flex-start',
+    }
+});
+
 ButtonStatusComponent.propTypes = {
     label : PropTypes.oneOfType([ //le libelé à faire figurer sur le status
         PropTypes.node,

package/src/components/Date/FormatSelector.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 DateLib from "$date";
-import React from "$react";
+import React,{useState} from "$react";
 import {defaultObj,isNonNullString} from "$cutils";
 import SimpleSelect from "$ecomponents/SimpleSelect";
 import Provider from "$ecomponents/Dialog/Provider";
@@ -14,7 +14,9 @@ import { View } from "react-native";
 import Icon from "$ecomponents/Icon";
 
 const DateFormatSelector = React.forwardRef((props,ref)=>{
-    return <SimpleSelect ref={ref} {...selectDateFormatFieldProps(props)}/>
+    return <SimpleSelect
+        ref={ref} {...selectDateFormatFieldProps(props)}
+    />
 });
 
 DateFormatSelector.displayName = "DateFormatSelector";
@@ -70,6 +72,9 @@ export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,
                     if(typeof customOnAdd =='function'){
                         customOnAdd(valueRef.current);
                     }
+                    if(typeof onAddCustomFormat =="function"){
+                        onAddCustomFormat(valueRef.current);
+                    }
                     Provider.close();
                 }
             }],
@@ -77,11 +82,11 @@ export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,
     };
     inputProps = defaultObj(props.inputProps);
     return {
-        items : getDateFormatSelectorItems(),
         getItemValue : ({item})=>item.code,
         renderItem : dateFormatSelectorRenderItem,
         showAdd : true,
         label : "Format de date",
+        items : getDateFormatSelectorItems(props),
         ...props,
         inputProps : {
             enableCopy:false,...inputProps,
@@ -93,8 +98,6 @@ export const selectDateFormatFieldProps = ({onAdd:customOnAdd,onAddCustomFormat,
         },
         defaultValue : defaultStr(props.defaultValue,props.format),
         onAdd,
-        onAdd : undefined,
-        showAdd : false,
     }
 }
 export const getDateFormatSelectorItems = x=> Object.map(DateLib.sortedFormats,(format)=>{

package/src/components/DocumentPicker/index.js

@@ -2,31 +2,135 @@ import Button from "$ecomponents/Button";
 import React from "$react";
 import PropTypes from "prop-types";
 import { pickDocument } from "$emedia/document";
+import { StyleSheet } from "react-native";
+import {isObj,isNonNullString,extendObj,defaultObj,defaultBool} from "$cutils";
+import Label from "$ecomponents/Label";
+import theme from "$theme";
 
-const DocumentPickerComponent = React.forwardRef(({pickOptions,onSuccess,onCancel,onPress,...props},ref)=>{
-    return <Button 
+
+const DocumentPickerComponent = React.forwardRef(({pickOptions,label,error,left,errorText,labelProps,containerProps,text:cText,onChange,onCancel,style,onPress,...props},ref)=>{
+    const [assets,setAssets] = React.useState([]);
+    label = React.isValidElement(label,true) && label || React.isValidElement(cText,true) && cText || null;
+    const changedRef = React.useRef(null);
+    labelProps = defaultObj(labelProps);
+    containerProps = defaultObj(containerProps);
+    const multiple = defaultBool(pickOptions?.multiple,props.multiple);
+    const {text,tooltip} = React.useMemo(()=>{
+        let text = ``,tooltip = "";
+        let counter = 0;
+        let breakCounter = 0;
+        (Array.isArray(assets) ?assets:[assets]).map((a)=>{
+            if(!isObj(a) || !isNonNullString(a.name)) return;
+            tooltip+=`${tooltip?",":""}${a.name}`
+            if(counter < 1){
+                text+=`${text?",":""}${a.name}`
+            } else {
+                breakCounter++;
+            }
+            counter++;
+        });
+        return {
+            text : text+(breakCounter> 0?` et ${breakCounter.formatNumber()} de plus`:""),
+            tooltip,
+        }
+    },[assets]);
+    React.useEffect(()=>{
+        if(!isObj(changedRef.current)) return;
+        const args = changedRef.current;
+        changedRef.current = null;
+        if(typeof onChange =="function"){
+            onChange({...args,value:assets});
+        } 
+    },[assets]);
+    const textColor = error? theme.colors.error : theme.colors.text;
+    const textFieldMode = theme.textFieldMode;
+    const borderColor = theme.colors[error?"error":"divider"];
+    const isFlatMode = textFieldMode == "flat";
+    const containerStyle = isFlatMode ? {} : {paddingHorizontal : 10}
+    const labelColor = error ? theme.colors.error : theme.Colors.setAlpha(theme.colors.text,theme.ALPHA);
+    const rStyle = isFlatMode ? {borderWidth:0,borderBottomWidth:1,borderBottomColor:borderColor} : {
+        borderWidth : 1,
+        borderRadius:15,
+        borderColor,
+    };
+    const btn = <Button 
         onPress = {(...r)=>{
             if(typeof onPress =="function" && onPress(...r) === false) return;
-            pickDocument(pickOptions).then((r)=>{
-                if(typeof onSuccess =="function"){
-                    onSuccess(r);
+            pickDocument(extendObj({},pickOptions,{multiple})).then((r)=>{
+                r.assets = Array.isArray(r.assets)? r.assets : [];
+                if(!multiple){
+                    r.assets  = r.assets[0];
                 }
+                changedRef.current = r;
+                setAssets(r.assets);
             }).catch((r)=>{
                 if(typeof onCancel =="function"){
                     onCancel(r);
                 }
             });
         }}
-        ref={ref} {...props}/>
+        left = {(props)=>{
+            const c = typeof left =="function"? left(props) : React.isValidElement(left)? left : null;
+            const lL = <Label children={`Choisir ${multiple ? "des fichiers":"un fichier" }`} style={[styles.leftLabel,{color:textColor,borderRightColor:theme.colors.divider}]}/>;
+            return React.isValidElement(c)? <>
+                {c}{lL}
+            </> : lL;
+        }}
+        style = {[styles.button,style]}
+        upperCase ={false}
+        ref={ref} {...props}
+        children = {text || "Aucun fichier choisit"}
+        tooltip = {tooltip}
+        title = {tooltip}
+        labelProps = {{style:styles.label,splitText:true,numberOfLines : 1,color:textColor}}
+        containerProps = {{...containerProps,style:[styles.container,containerStyle,rStyle,containerProps.style]}}
+    />;
+    return  <>
+        {label?<Label {...labelProps} style={[{color:labelColor},labelProps.style]} children={label}/> : null}
+        {btn}
+        {errorText? <Label error children={errorText}/>:null}
+    </> 
 });
 
 DocumentPickerComponent.displayName = "DocumentPickerComponent";
 
 export default DocumentPickerComponent;
 
+const styles = StyleSheet.create({
+    button : {
+        alignSelf: 'flex-start',
+    },
+    leftLabel : {
+        paddingVertical : 12,
+        borderRightWidth : 1,
+        textWrap : "nowrap",
+        paddingRight : 7,
+    },
+    label : {
+        paddingHorizontal : 5,
+        textWrap : "wrap",
+        textAlign : "left",
+    },
+    container : {
+        marginTop : 5,
+    }
+});
+
 DocumentPickerComponent.propTypes = {
+    label : PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+        PropTypes.string,
+        PropTypes.number,
+    ]),
+    text : PropTypes.oneOfType([
+        PropTypes.node,
+        PropTypes.element,
+        PropTypes.string,
+        PropTypes.number,
+    ]),
     ...Object.assign({},Button.propTypes),
-    onSuccess : PropTypes.func,
+    onChange : PropTypes.func,
     onCancel : PropTypes.func,
     /*** @see : https://docs.expo.dev/versions/latest/sdk/document-picker/#documentpickeroptions */
     pickOptions : PropTypes.shape({

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

@@ -0,0 +1,63 @@
+import Field from "./Field";
+import DocumentPicker from "$ecomponents/DocumentPicker";
+import {isObj,defaultObj} from "$cutils";
+export default class FormFieldDocumentPicker extends Field {
+    canFocus(){
+        return false;
+    }
+    isValid(){
+        return true;
+    }
+    compareAssets(assets){
+        if(Array.isArray(assets)){
+            const previousValue = this.getPreviousValue();
+            const allPrev = Array.isArray(previousValue)? previousValue : [previousValue];
+            for(let i in assets){
+                let hasFound = false;
+                for(let j in allPrev){
+                    if(this.compareSingleAssets(assets[i],allPrev[j])) {
+                        hasFound = true;
+                    }
+                    if(hasFound) break;
+                }
+                if(!hasFound) return false;
+            }
+            return true;
+        } 
+        return this.compareSingleAssets(assets,this.getPreviousValue());
+    }
+    compareSingleAssets(assets,previousValue){
+        if(!isObj(assets) || !isObj(previousValue)) return false;
+        return previousValue.lastModified === assets.lastModified && previousValue.mimeType == assets.mimeType && previousValue.name === assets.name && previousValue.size == assets.size && previousValue.uri == assets.uri;
+    }
+    onChange(args){
+        const assets = Array.isArray(args.assets) ? args.assets : [args.assets];
+        const value = this.props.multiple ? assets:assets[0];
+        if(this.compareAssets(value)){
+            return ;
+        }
+        this.validate({...args,value,context:this});
+    }
+    getComponent(){
+        return DocumentPicker;
+    }
+    _render({pickOptions,...props}){
+        pickOptions = defaultObj(pickOptions,props);
+        if(typeof this.props.multiple =="boolean"){
+            pickOptions.multiple = this.props.multiple;
+        }
+        return <DocumentPicker
+           {...props}
+           pickOptions = {pickOptions}
+           onChange = {this.onChange.bind(this)}
+        />
+    }
+    isTextField(){
+        return false;
+    }
+}
+
+FormFieldDocumentPicker.propTypes = {
+    ...Field.propTypes,
+    ...DocumentPicker.propTypes,
+}

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

@@ -251,8 +251,7 @@ export default class Field extends AppComponent {
             }
             this.validatingValue = value;
             this.INITIAL_STATE._lastValidatingValue = value;
-            this.setState ({validValue:value,validatingValue:value,previousValue:this.state.validValue,errorText:"",error:false},()=>{
-                this._previousValue  = this.state.validValue;
+            this.setState ({validValue:value,previousValidatedValue:this.state.validValue,validatingValue:value,previousValue:this.state.validValue,errorText:"",error:false},()=>{
                 const fields = getFormFields(this.formName);
                 let canEnable = true;
                 for(var k in fields){
@@ -405,7 +404,7 @@ export default class Field extends AppComponent {
         return this.formName;
     }
     getOldValue () {
-        return this._previousValue;
+        return this.state.previousValidatedValue;
     }
     /*** la valeur qui a été validée 
      * @param : l'ensemble des données du formulaire à retourner
@@ -517,7 +516,7 @@ export default class Field extends AppComponent {
         return false;
     }
     getPreviousValue (){
-        return this._previousValue;
+        return this.state.previousValidatedValue;
     }
     hasValueChanged(value){
         return (stableHash(this.state.validatingValue) === stableHash(value))? false : true;
@@ -541,9 +540,8 @@ export default class Field extends AppComponent {
         this.__hasAlreadyValidated = true;
         this.validatingValue = value;
         if(((!this.canValidate()) && !this.isSelectField()) || this.isFilter()){
-            this._previousValue = this.state.validValue;
             this.trigger("validate",{...defaultObj(rest),context:this,value,event,oldValue:this.INITIAL_STATE._lastValidatingValue},(results)=>{
-                this.setState({validValue:value,validatingValue:value,sk:!this.state.sk,previousValue:this.state.validatingValue},()=>{
+                this.setState({validValue:value,previousValidatedValue:this.state.validValue,validatingValue:value,sk:!this.state.sk,previousValue:this.state.validatingValue},()=>{
                     if(isFunction(this.props.onValidate)){
                         this.props.onValidate({...defaultObj(rest),props:this.props,name:this.name,field:this.name,value,event,context:this,oldValue:this.INITIAL_STATE._lastValidatingValue});
                     }

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

@@ -23,19 +23,15 @@ export default class FormFieldImage extends Field {
             return ;
         }
         this.validate({...args,value:dataUrl,context:this});
-        /*if(isFunction(this.props.onChange)){
-            this.props.onChange({dataUrl,src:dataUrl,dataURL:dataUrl,previousSrc:previousValue});
-        }*/
     }
     getComponent(){
         return Image;
     }
-    _render(props){
-        let {dbName,onChange,...p}  = props;
-        p.onChange = this.onChange.bind(this);
+    _render({onChange,...p}){
         return <Image
            {...p}
            src={defaultVal(p.src,p.defaultValue)}
+           onChange={this.onChange.bind(this)}
         />
     }
     isTextField(){
@@ -46,20 +42,5 @@ export default class FormFieldImage extends Field {
 FormFieldImage.propTypes = {
     width : PropTypes.number,
     height : PropTypes.number,
-    /*** le nom du champ qu'on valide 
-     *  si fieldName est définie, alors, il est utilisé pour la validation du champ.
-     *  lorsque la valeur est mise à jour, on recherche en base toutes les objets ayant pour valeur ladite valeur
-     *  Si est trouvé, alors une erreur est retournée.
-     *  Dans le cas où fieldName est définie, alors, l'id n'est pas utilisé pour la validation
-     * 
-    */
-    fieldName : PropTypes.string,
-    ...Field.propTypes,
-    /*** le nom de la table dans laquelle l'idField est enreigistré */
-    table : PropTypes.string,
-    tableName : PropTypes.string, //idem à table
-    /*** le nom de la bd où l'id field est enregistré */
-    dbName : PropTypes.string,
-    //la longueur maximale du champ
-    maxLength:PropTypes.number
+    ...Field.propTypes
 }

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

@@ -1,6 +1,5 @@
 import SelectField from "./SelectField";
 import {selectDateFormatFieldProps,getDateFormatSelectorItems} from "$ecomponents/Date/FormatSelector";
-import DateLib from "$date";
 
 export default class FormFieldSelectDateFormat extends SelectField{
     constructor(props){

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

@@ -19,7 +19,8 @@ import "$cutils";
 import React from "$react";
 import SelectDateFormat from "./SelectDateFormat";
 import CurrencyFormat from "./CurrencyFormat";
-import SelectFontIcon from "./SelectFontIcon"
+import SelectFontIcon from "./SelectFontIcon";
+import DocumentPicker from "./DocumentPicker";
 
 const defFormFields = {
     Field,
@@ -43,6 +44,7 @@ const defFormFields = {
     ,SelectDateFormat
     ,Html
     ,SelectFontIcon,
+    DocumentPicker,
 }
 
 export default defFormFields;

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

@@ -30,6 +30,7 @@ export const getComponentTypes = ()=>{
         scheduler : Fields.Scheduler,
         default : Fields.TextField,
         selecticon : Fields.SelectFontIcon,
+        documentpicker : Fields.DocumentPicker,
         ...Fields,
     };
 }

package/src/components/TableLink/index.js

@@ -20,11 +20,16 @@ import TouchableRipple from "$ecomponents/TouchableRipple";
     dans le champ isStructData
 */
 const TableLinKComponent = React.forwardRef(({containerProps,children,labelProps,...props},ref)=>{
-    const {testID,onPressLink,disabled,readOnly,fetchData,navigate,isAllowed:checkIfAllowed,Component,...rest} = usePrepareProps(props);
+    const {testID,onPressLink,disabled,readOnly,fetchData,navigate,isAllowed:checkIfAllowed,onLongPres,Component,...rest} = usePrepareProps(props);
     containerProps = defaultObj(containerProps);
     labelProps = defaultObj(labelProps);
     const CP = disabled || readOnly ? View : TouchableRipple;
-    return <CP testID={testID} onLongPres={(e)=>React.stopEventPropagation(e)} {...containerProps} onPress={disabled || readOnly? undefined : onPressLink} style={[styles.container,containerProps.style]}>
+    return <CP testID={testID} onLongPres={(e,...rest)=>{
+        React.stopEventPropagation(e); 
+        if(typeof onLongPres =="function"){
+            onLongPres(e,...rest);
+        }
+    }} {...containerProps} onPress={disabled || readOnly? undefined : onPressLink} style={[styles.container,containerProps.style]}>
         <Tooltip testID={testID+"_Tooltip"} {...rest} style={[rest.style,{pointerEvents: disabled || readOnly ? 'none' : 'auto'}]} Component={Component}  onPress={disabled || readOnly?undefined:onPressLink} ref={ref}  readOnly={readOnly} disabled = {disabled}>
             <Label testID={testID+"_Label"} underlined primary {...labelProps} style={[_styles.lh15,labelProps.style]} disabled={disabled} readOnly={readOnly}>{children}</Label>
         </Tooltip>
@@ -90,7 +95,7 @@ TableLinKComponent.propTypes = {
     ///les props à utiliser pour afficher la table de données en cas de click sur le lien
     triggerProps : PropTypes.object,
     /*** l'id de la données à récupérer en cas de clic sur le lien */
-    id : PropTypes.oneOfType([PropTypes.number,PropTypes.string]),
+    id : PropTypes.oneOfType([PropTypes.number,PropTypes.string,PropTypes.array,PropTypes.object]),
     routeName : PropTypes.string,///la route via laquelle on devra naviguer
     routeParam : PropTypes.object,///les props à passer à la route en question
     children : PropTypes.node

package/src/screens/Help/openLibraries.js

@@ -1,6 +1,6 @@
 module.exports = {
 	"@fto-consult/expo-ui": {
-		"version": "8.70.3",
+		"version": "8.71.0",
 		"url": "https://github.com/borispipo/expo-ui#readme",
 		"license": "ISC"
 	},
@@ -39,16 +39,6 @@ module.exports = {
 		"url": "https://github.com/pchmn/expo-material3-theme#readme",
 		"license": "MIT"
 	},
-	"@react-native-async-storage/async-storage": {
-		"version": "1.21.0",
-		"url": "https://github.com/react-native-async-storage/async-storage#readme",
-		"license": "MIT"
-	},
-	"@react-native-community/datetimepicker": {
-		"version": "7.6.1",
-		"url": "https://github.com/react-native-community/datetimepicker#readme",
-		"license": "MIT"
-	},
 	"@react-native-community/netinfo": {
 		"version": "11.1.0",
 		"url": "https://github.com/react-native-netinfo/react-native-netinfo#readme",
@@ -109,6 +99,11 @@ module.exports = {
 		"url": "https://docs.expo.dev/versions/latest/sdk/clipboard",
 		"license": "MIT"
 	},
+	"expo-document-picker": {
+		"version": "11.10.1",
+		"url": "https://docs.expo.dev/versions/latest/sdk/document-picker/",
+		"license": "MIT"
+	},
 	"expo-font": {
 		"version": "11.10.3",
 		"url": "https://docs.expo.dev/versions/latest/sdk/font/",
@@ -194,6 +189,11 @@ module.exports = {
 		"url": "https://github.com/react-native-community/react-native-svg",
 		"license": "MIT"
 	},
+	"react-native-view-shot": {
+		"version": "3.8.0",
+		"url": "https://github.com/gre/react-native-view-shot",
+		"license": "MIT"
+	},
 	"react-native-webview": {
 		"version": "13.6.4",
 		"url": "https://github.com/react-native-webview/react-native-webview#readme",
@@ -208,5 +208,10 @@ module.exports = {
 		"version": "3.0.0",
 		"url": "https://github.com/browserify/stream-browserify",
 		"license": "MIT"
+	},
+	"vm": {
+		"version": "0.1.0",
+		"url": "https://github.com/DiegoRBaquero/node-vm#readme",
+		"license": "MIT"
 	}
 };