@fto-consult/expo-ui 6.25.2 → 6.25.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "6.25.2",
+  "version": "6.25.3",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "main": "index.js",
   "scripts": {
@@ -92,6 +92,7 @@
     "fs-extra": "^11.1.1",
     "google-libphonenumber": "^3.2.33",
     "htmlparser2-without-node-native": "^3.9.2",
+    "pdfmake": "^0.2.7",
     "process": "^0.11.10",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",

package/src/components/Datagrid/Common/Common.js

@@ -1706,6 +1706,15 @@ export default class CommonDatagridComponent extends AppComponent {
                 label : "Exporter les entêtes des groupes",
                 defaultValue :1,
             },
+            fields : {
+                text : "Champs à exporter",
+                items : this.state.columns,
+                type : "select",
+                itemValue : ({item,index})=>index,
+                filter : ({item,index})=> isObj(item) && item.exportable !== false,
+                renderItem : ({item,index})=> item?.label || item?.text || index,
+                multiple : true,
+            },
             /*abreviateValues : {
                 text : "Abréger les valeurs numériques",
                 type : "switch",
@@ -1718,147 +1727,164 @@ export default class CommonDatagridComponent extends AppComponent {
             },
         }
    }
-   /***@see : https://docs.sheetjs.com/docs/api/utilities */
-   exportToExcel(){
-        const skey = "export-to-excel";
+   SetExportOptions({excel}){
+        const skey = excel ? "export-to-excel":"export-to-other";
         const isOnlytotal = this.state.displayOnlySectionListHeaders;
-        let displayOnlyHeader = this.canDisplayOnlySectionListHeaders() && isOnlytotal;
+        const displayOnlyHeader = this.canDisplayOnlySectionListHeaders() && isOnlytotal;
         const sData = defaultObj(this.getSessionData(skey));
-        return DialogProvider.open({
-            title : "Paramètre d'export excel",
-            data : sData,
-            fields : {
-                ...this.getExportableFields(),
-                sheetName : {
-                    label : 'Nom de la feuille excel',
-                    format : "hashtag",
-                    required : true,
+        return new Promise((resolve,reject)=>{
+            return DialogProvider.open({
+                title : `Paramètre d'export ${excel?"excel":"pdf"}`,
+                data : sData,
+                fields : {
+                    ...this.getExportableFields(),
+                    sheetName : excel && {
+                        label : 'Nom de la feuille excel',
+                        format : "hashtag",
+                        required : true,
+                    },
+                    exportOnlyTotal : displayOnlyHeader && {
+                        label : "Exporter uniquemnt les totaux",
+                        defaultValue : 0,
+                        type : "switch",
+                    },
+                    aggregatedValues : displayOnlyHeader ? {
+                        label : "Exporter uniquement les totaux aggrégées",
+                        defaultValue : 0,
+                        type : "switch",
+                    }  : null,
                 },
-                exportOnlyTotal : displayOnlyHeader && {
-                    label : "Exporter uniquemnt les totaux",
-                    defaultValue : 0,
-                    type : "switch",
+                actions : [{text:'Exporter',icon : "check"}],
+                onSuccess: (args)=>{
+                    args.sessionKeyName = skey;   
+                    args.displayOnlyHeader = displayOnlyHeader;
+                    args.isOnlytotal = isOnlytotal;
+                    args.sessionData = sData;
+                    DialogProvider.close();
+                    resolve(args);
+                    return args;
                 },
-                aggregatedValues : displayOnlyHeader ? {
-                    label : "Exporter uniquement les totaux aggrégées",
-                    defaultValue : 0,
-                    type : "switch",
-                }  : null,
-            },
-            actions : [{text:'Exporter',icon : "check"}],
-            onSuccess:({data:config})=>{
-                this.setSessionData(skey,config);
-                config.fileName = sprintf(config.fileName);
-                config.sheetName = sanitizeSheetName(config.sheetName);
-                const data = [];
-                let totalColumns = 0;
-                const cols = {};
-                DialogProvider.close();
-                Preloader.open("préparation des données...");
-                const footers = this.getFooters();
-                if(displayOnlyHeader && config.aggregatedValues){
-                    const fValues = this.getFooterValues();
-                    const headers = ["Fonction d'agrégation"];
-                    const aggregatorFunctions = this.aggregatorFunctions;
-                    Object.map(footers,(f,i)=>{
-                        const col = this.state.columns[i];
-                        if(!col || col.visible === false) return;
-                        headers.push(defaultStr(col.label,col.text));
-                        cols[i] = col;
+                onCancel : reject,
+            })
+        })
+   }
+   /***@see : https://docs.sheetjs.com/docs/api/utilities */
+   exportToExcel(){
+        return this.SetExportOptions({excel:true}).then(({sessionKeyName,isOnlytotal,displayOnlyHeader,data:config})=>{
+            this.setSessionData(sessionKeyName,config);
+            config.fileName = sprintf(config.fileName);
+            config.sheetName = sanitizeSheetName(config.sheetName);
+            const data = [];
+            let totalColumns = 0;
+            const cols = {};
+            Preloader.open("préparation des données...");
+            const footers = this.getFooters();
+            const hasFields = !!config.fields.length;
+            const fields = config.fields;
+            if(displayOnlyHeader && config.aggregatedValues){
+                const fValues = this.getFooterValues();
+                const headers = ["Fonction d'agrégation"];
+                const aggregatorFunctions = this.aggregatorFunctions;
+                Object.map(footers,(f,i)=>{
+                    if(hasFields && !fields.includes(i)) return;
+                    const col = this.state.columns[i];
+                    if(!col || col.visible === false) return;
+                    headers.push(defaultStr(col.label,col.text));
+                    cols[i] = col;
+                });
+                data.push(headers);
+                Object.map(aggregatorFunctions,(ag,i)=>{
+                    const d = [defaultStr(ag.label,ag.text,i)];
+                    Object.map(fValues,(footer,field)=>{
+                        if(!cols[field]) return;
+                        d.push(defaultNumber(footer[i]))
                     });
-                    data.push(headers);
-                    Object.map(aggregatorFunctions,(ag,i)=>{
-                        const d = [defaultStr(ag.label,ag.text,i)];
-                        Object.map(fValues,(footer,field)=>{
-                            if(!cols[field]) return;
-                            d.push(defaultNumber(footer[i]))
-                        });
-                        data.push(d);
-                    })
-                } else {
-                    const headers = [];
-                    const hFooters = defaultObj(this.sectionListHeaderFooters);
-                    const agFunc = this.state.aggregatorFunction;
-                    const canExportOnlyTotal = isOnlytotal || (config.exportOnlyTotal && displayOnlyHeader);
-                    if(canExportOnlyTotal){
-                        headers.push("");
-                    }
-                    Object.map(this.state.columns,(col,i)=>{
-                        if(!isObj(col) || col.visible === false || this.isSelectableColumn(col,i) || i === this.getIndexColumnName()) return;
-                        if(canExportOnlyTotal && !(i in footers)) return;
-                        cols[i] = col;
-                        headers.push(defaultStr(col.label,col.text));
-                        totalColumns++;
-                    })
-                    data.push(headers);
-                    Object.map(this.state.data,(dat,index)=>{
-                        ///si l'on a a faire à une colonne de type entete
-                        const d = [];
-                        if(dat.isSectionListHeader){
-                            if(!config.displayTotals && !canExportOnlyTotal) return;
-                            const {sectionListHeaderKey:key} = dat;
-                            const val = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
-                            d.push(val);
-                            if(!canExportOnlyTotal){
-                                for(let i = 1;i<totalColumns;i++){
-                                    d.push(null);
-                                }
-                                data.push(d);
-                            } else {
-                                const hF = hFooters[key];
-                                if(isObj(hF) && isNonNullString(agFunc)){
-                                    const dd = [];
-                                    Object.map(cols,(col,i)=>{
-                                        if(i in hF){
-                                                const ff = hF[i];
-                                                dd.push(defaultNumber(ff[agFunc]));
-                                            } else {
-                                                dd.push(null);
-                                            }
-                                    });
-                                    if(canExportOnlyTotal){
-                                        dd.unshift(val);
-                                        data.push(dd);
-                                    } else {
-                                        data.push(d);
-                                        data.push(dd);
-                                    }
+                    data.push(d);
+                })
+            } else {
+                const headers = [];
+                const hFooters = defaultObj(this.sectionListHeaderFooters);
+                const agFunc = this.state.aggregatorFunction;
+                const canExportOnlyTotal = isOnlytotal || (config.exportOnlyTotal && displayOnlyHeader);
+                if(canExportOnlyTotal){
+                    headers.push("");
+                }
+                Object.map(this.state.columns,(col,i)=>{
+                    if(hasFields && !fields.includes(i)) return;
+                    if(!isObj(col) || col.visible === false || this.isSelectableColumn(col,i) || i === this.getIndexColumnName()) return;
+                    if(canExportOnlyTotal && !(i in footers)) return;
+                    cols[i] = col;
+                    headers.push(defaultStr(col.label,col.text));
+                    totalColumns++;
+                })
+                data.push(headers);
+                Object.map(this.state.data,(dat,index)=>{
+                    ///si l'on a a faire à une colonne de type entete
+                    const d = [];
+                    if(dat.isSectionListHeader){
+                        if(!config.displayTotals && !canExportOnlyTotal) return;
+                        const {sectionListHeaderKey:key} = dat;
+                        const val = key === this.emptySectionListHeaderValue ? this.getEmptySectionListHeaderValue() : key;
+                        d.push(val);
+                        if(!canExportOnlyTotal){
+                            for(let i = 1;i<totalColumns;i++){
+                                d.push(null);
+                            }
+                            data.push(d);
+                        } else {
+                            const hF = hFooters[key];
+                            if(isObj(hF) && isNonNullString(agFunc)){
+                                const dd = [];
+                                Object.map(cols,(col,i)=>{
+                                    if(i in hF){
+                                            const ff = hF[i];
+                                            dd.push(defaultNumber(ff[agFunc]));
+                                        } else {
+                                            dd.push(null);
+                                        }
+                                });
+                                if(canExportOnlyTotal){
+                                    dd.unshift(val);
+                                    data.push(dd);
                                 } else {
                                     data.push(d);
+                                    data.push(dd);
                                 }
+                            } else {
+                                data.push(d);
                             }
-                        } else if(!canExportOnlyTotal) {
-                            Object.map(cols,(col,i)=>{
-                                const isDateField = defaultStr(col.type).toLowerCase().contains("date");
-                                d.push(this.renderRowCell({
-                                    data : dat,
-                                    rowData : dat,
-                                    rowCounterIndex : index,
-                                    rowIndex : index,
-                                    formatValue : false,
-                                    renderRowCell : false,
-                                    columnField : defaultStr(col.field,i),
-                                    columnDef :{
-                                        ...col,
-                                        ...(isDateField?{format:config.dateFormat}:{})
-                                    }
-                                }));
-                            })   
-                            data.push(d);
                         }
-                    });
-                }
-                const wb = XLSX.utils.book_new();
-                const ws = XLSX.utils.aoa_to_sheet(data);
-                XLSX.utils.book_append_sheet(wb, ws, config.sheetName);
-                FileSystem.writeExcel({...config,workbook:wb}).then(({path})=>{
-                    if(isNonNullString(path)){
-                        notify.success("Fichier enregistré dans le répertoire {0}".sprintf(path))
+                    } else if(!canExportOnlyTotal) {
+                        Object.map(cols,(col,i)=>{
+                            const isDateField = defaultStr(col.type).toLowerCase().contains("date");
+                            d.push(this.renderRowCell({
+                                data : dat,
+                                rowData : dat,
+                                rowCounterIndex : index,
+                                rowIndex : index,
+                                formatValue : false,
+                                renderRowCell : false,
+                                columnField : defaultStr(col.field,i),
+                                columnDef :{
+                                    ...col,
+                                    ...(isDateField?{format:config.dateFormat}:{})
+                                }
+                            }));
+                        })   
+                        data.push(d);
                     }
-                 }).finally(()=>{
-                    Preloader.close();
-                })
+                });
             }
+            const wb = XLSX.utils.book_new();
+            const ws = XLSX.utils.aoa_to_sheet(data);
+            XLSX.utils.book_append_sheet(wb, ws, config.sheetName);
+            FileSystem.writeExcel({...config,workbook:wb}).then(({path})=>{
+                if(isNonNullString(path)){
+                    notify.success("Fichier enregistré dans le répertoire {0}".sprintf(path))
+                }
+             }).finally(()=>{
+                Preloader.close();
+            })
         })
    }
    exportToPdf(){

package/src/components/Dialog/DialogContent.js

@@ -2,10 +2,10 @@ import KeyboardAvoidingView from "../KeyboardAvoidingView";
 import React  from "$react";
 import { useWindowDimensions } from "react-native";
 
-const DialogContentComponent = ({isPreloader,isFullScreen,...props})=>{
+const DialogContentComponent = ({isPreloader,title,children,isFullScreen,...props})=>{
     const isFull = isFullScreen();
     //useWindowDimensions();
-    const content = React.useMemo(()=>props.children,[isPreloader]);
+    const content = React.useMemo(()=>children,[isPreloader,title,children]);
     return isPreloader || !isFull ? content : <KeyboardAvoidingView>{content}</KeyboardAvoidingView>
 }
 export default DialogContentComponent;

package/src/components/Dropdown/index.js

@@ -967,7 +967,6 @@ class DropdownComponent extends AppComponent {
         const renderingItems = this.getItems();
         const isDisabled = readOnly || disabled?true:false;
         const isBigList = this.isBigList;
-        const ListComponent = isBigList ? BigList : List;
         const autoFocus = canAutoFocusSearchField({visible,items:renderingItems});
         dialogProps = defaultObj(dialogProps);
         if(this.props.name =="RG_Compta"){
@@ -1063,7 +1062,7 @@ class DropdownComponent extends AppComponent {
                     {isMob && helperText ? <View testID = {testID+"_HelperText"} style={[styles.helperText]}>
                         {helperText}
                     </View>: null}
-                    <ListComponent
+                    <BigList
                         testID = {testID+"_List"}
                         {...listProps}
                         ref = {this.listRef}

package/src/components/Label/index.js

@@ -10,7 +10,7 @@ const defaultSelectable = canTextBeSelectable();
 
 export const EllipsizeMode = {'head':'head','middle':'middle', 'tail':'tail' , 'clip':'clip'}
 
-const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSize,testID,wrap,id,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
+const LabelComponent = React.forwardRef(({ children,selectable,role,color,upperCase,fontSize,testID,wrap,id,wrapText,error,underlined,splitText,secondary,primary,bold,textBold,disabled,text,style,...rest},ref)=> {
     children = defaultVal(children,text);
     let isText = false;
     if(!React.isValidElement(children) && Array.isArray(children) && children.length){
@@ -58,6 +58,8 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
     if(disabled){
         r1.pointerEvents = "none";
     }
+    selectable = !!(selectable || defaultSelectable);
+    r2.userSelect = selectable?"none":"all";
     if(isNonNullString(children) || isText || typeof children ==='number'){
         if(!isText){
             children +="";
@@ -68,7 +70,10 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
         if(fontSize){
             r1.fontSize = fontSize;
         }
-        return (<Text  allowFontScaling = {true} ref = {ref} selectable={defaultSelectable} 
+        if(selectable){
+            r2.userSelect = "text";
+        }
+        return (<Text  allowFontScaling = {true} ref = {ref} 
             {...rest} {...restProps} testID={testID} disabled={disabled} 
             role={typeof role =='string' && role && supportedRoles.includes(role.trim()) && role.trim() || undefined}
             style={[styles.label,splitText?styles.wrap:null,splitText?styles.w100:null,bold?styles.bold:null,r2,style,r1,styles.webFontFamilly]}>{children}</Text>)
@@ -92,7 +97,7 @@ const LabelComponent = React.forwardRef(({ children,role,color,upperCase,fontSiz
             }
             return children;
         }
-        return <View ref = {ref} selectable={defaultSelectable} {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
+        return <View ref = {ref}  {...rest} {...restProps} testID = {testID} style={viewStyle} disabled={disabled}>{children}</View>
     }
     return null;
 })
@@ -114,7 +119,10 @@ LabelComponentExported.propTypes = {
     color : PropTypes.string,
     selectable : PropTypes.bool, //si le texte est sélectionnable
     underlined : PropTypes.bool,//si le style underlined sera appliqué au label
-    splitText : PropTypes.bool,///si le texte lorsqu'il est long sera splité
+    splitText : PropTypes.bool,///si le texte lorsqu'il est long sera splité,
+    /*useSelect : PropTypes.oneOfType([
+        'auto', 'text', 'none', 'contain', 'all'
+    ])*/
 }
 
 export default LabelComponentExported;

package/src/components/List/hooks.js

@@ -10,17 +10,14 @@ export const useList = ({items,filter,prepareItems,...props})=>{
     const context = contextRef.current;
     context.itemsRefs = Array.isArray(context.itemsRefs) && context.itemsRefs || [];
     context.prepareItems = defaultFunc((prepareItems === false ? (items)=> items:null),prepareItems,customPrepareItems);
-    contextRef.prevItems = React.usePrevious(items);
-    const getItems = React.useCallback(()=>{
-        if(items === context.prevItems && context.items) {
-            return context.items;
+    const canPrepareItems = prepareItems === false ? false : true;
+    context.items = contextRef.items = React.useMemo(()=>{
+        const r = context.prepareItems(items,filter);
+        if(!Array.isArray(r)){
+            console.error(r," is not valid list data array",items,props);
+            return [];
         }
-        return context.prepareItems(items,filter);
-    },[items]);
-    context.items = contextRef.items = prepareItems === false ? items : getItems();
-    if(!Array.isArray(context.items)){
-        console.error(context.items," is not valid list data array",items,props);
-        context.items = [];
-    }
+        return r;
+    },[items,canPrepareItems]);
     return context;
 }

package/src/components/Table/Header/CellHeader.js

@@ -9,7 +9,6 @@ import styles from "../styles";
 export default function TableCellMainHeaderComponent({columnField,columnDef,style,colArgs,...props}){
     const {sortedColumn,renderHeaderCell,colsWidths} = useTable();
     const width = colsWidths[columnField];
-    const isSelectableColumnName = columnDef.isSelectableColumnName;
     const children = React.useMemo(()=>{
         const content = typeof renderHeaderCell =='function'? renderHeaderCell(colArgs) : defaultVal(columnDef.text,columnDef.label,columnField);
         if(!React.isValidElement(content,true)){

package/src/components/Table/Row/Cell/Content.js

@@ -6,8 +6,8 @@ import {classNames} from "$cutils";
 import { StyleSheet } from "react-native";
 import Label from "$ecomponents/Label";
 
-function TableCellContentComponent({children,style,...rest}){
-    return (<td  {...rest} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
+function TableCellContentComponent({children,columnDef,testID,columnField,style,...rest}){
+    return (<td  data-test-id={testID||"RN_TableCellComoponent"} className={classNames(rest.className,"table-row-cell")} style={StyleSheet.flatten([style])}>
         {children}
     </td>);
 }

package/src/print/createPDF/index.js

@@ -0,0 +1,20 @@
+const pdfMake = require('pdfmake/build/pdfmake.js');
+const pdfFonts = require('pdfmake/build/vfs_fonts.js');
+pdfMake.vfs = pdfFonts.pdfMake.vfs;
+
+const fonts = {
+	Roboto: {
+		normal: 'Roboto-Regular.ttf',
+		bold: 'Roboto-Medium.ttf',
+		italics: 'Roboto-Italic.ttf',
+		bolditalics: 'Roboto-MediumItalic.ttf'
+    },
+};
+pdfMake.fonts = fonts;
+function createPDF(args){
+    return pdfMake.createPdf(args);
+};
+
+export {fonts};
+export default createPDF;
+export {createPDF};

package/src/print/formatText.js

@@ -0,0 +1,84 @@
+function isAplhanumeric(char) {
+    const x = `${char || ""}`.charCodeAt(0);
+    if (!char || Number.isNaN(x)) {
+        return false;
+    }
+    return !!((x >= 65 && x <= 90)
+        || (x >= 97 && x <= 122)
+        || (x >= 48 && x <= 57));
+}
+function getIndexes(text, wildcard) {
+    const indices = [];
+    for (let i = 0; i < text.length; i += 1) {
+        if (text[i] === wildcard) {
+            if (indices.length % 2) {
+                if (text[i - 1] === " "
+                    || isAplhanumeric(text[i + 1])) {
+                    break;
+                }
+                else {
+                    indices.push(i);
+                }
+            }
+            else if (typeof (text[i + 1]) === "undefined"
+                || text[i + 1] === " "
+                || isAplhanumeric(text[i - 1])) {
+                break;
+            }
+            else {
+                indices.push(i);
+            }
+        }
+        else if (text[i].charCodeAt(0) === 10 && indices.length % 2) {
+            indices.pop();
+        }
+    }
+    if (indices.length % 2) {
+        // we have unclosed tags
+        indices.pop();
+    }
+    return indices;
+}
+function injectTags(text, indices, rule) {
+    let e = 0;
+    indices.forEach((value, index) => {
+        const tag = (index % 2)
+            ? rule.closeTag
+            : rule.openTag;
+        let v = value;
+        v += e;
+        text = text.substr(0, v) + tag + text.substr(v + 1);
+        e += (tag.length - 1);
+    });
+    return text;
+}
+function execRule(text, rule) {
+    const indices = getIndexes(text, rule.wildcard);
+    return injectTags(text, indices, rule);
+}
+function parseText(text, rules) {
+    const final = rules.reduce((transformed, rule) => {
+        return execRule(transformed, rule);
+    }, text);
+    return final.replace(/\n/gi, "<br>");
+}
+export const whatsappRules = [
+    {
+        closeTag: "</strong>",
+        openTag: "<strong>",
+        wildcard: "*",
+    },
+    {
+        closeTag: "</i>",
+        openTag: "<i>",
+        wildcard: "_",
+    },
+    {
+        closeTag: "</s>",
+        openTag: "<s>",
+        wildcard: "~",
+    },
+];
+export default function format(text, rules) {
+    return parseText(text, rules || whatsappRules);
+}

package/src/print/index.js

@@ -0,0 +1,13 @@
+
+import $session from "$session";
+import {isDOMElement} from "$cutils/dom";
+let formatField = require("../exporter/formatField");
+let {outlineText} = require("./svg");
+let printingPageFormats = {};
+
+/*** vérifie si le contenu désiré pour l'impression est valide */
+
+import createPDF from ("./createPDF");
+import notify from "$cnotify";
+
+module.exports = printTB;

package/src/print/pdf/formats/defaultFormats.js

@@ -0,0 +1,28 @@
+function populateFormats (){
+    let i = 4;
+    const formats = {};
+    while(i>=0){
+        let format = "A"+i;
+        let size = {};
+        formats[format] = {
+            code : format,
+            label : format,
+            pageFormat : format,
+            pageWidth : 0,
+            pageHeight : 0,
+            displayLogo : 1,
+            displaySocialReason : 1,
+            displayIdentifier : 1,
+            displayThirdPartiesIdentifier : 1,
+            pageOrientation : 'portrait',
+            topMargin : 15,
+            leftMargin : 15,
+            rightMargin : 15,
+            bottomMargin : 0,
+            ...size
+        }
+        i-=1;
+    }
+    return formats;
+}
+export default populateFormats();

package/src/print/pdf/formats/defaultPageFormat.js

@@ -0,0 +1 @@
+export default "A4";

package/src/print/pdf/formats/defaultPageOrientation.js

@@ -0,0 +1 @@
+export default 'portrait';