@fto-consult/expo-ui 8.8.3 → 8.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.8.3",
+  "version": "8.9.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",

package/src/components/Barcode/Designer/index.js

@@ -1,4 +1,4 @@
-import {useRef,useState,forwardRef,useMergeRefs,useEffect,useMemo} from "$react";
+import React,{useRef,useState,forwardRef,useMergeRefs,useEffect,useMemo} from "$react";
 import Generator from "../Generator";
 import PropTypes from "prop-types";
 import View from "$ecomponents/View";
@@ -18,64 +18,77 @@ import Color from "$ecomponents/Color";
 import Expandable from "$ecomponents/Expandable";
 import session from "$session";
 const sessionKey = "appDesigner-sess"
+import { encode } from "../Generator/utils";
 
 const fontOptionsKeys = ["bold","italic","bold italic"];
 const alignments = ["left","center","right"];
 
 const BarcodeDesigner = forwardRef(({
-        format,testID,onReady,text,value,flat,width,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight,
+        format,testID,onReady,text,value,flat,onChange,width,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight,
         sessionName,
+        bottomContent,
+        leftContent,
+        rightContent,
+        topContent,
+        saveAction,
         ...rest
     },ref)=>{
     testID = defaultStr(testID,'RNBarcodeDesigner');
     const sKey = sessionName ? `${sessionKey}-${sessionName}` : null;
-    const getSession = x=> !isNonNullString(sessionName)? {} : defaultObj(session.get(sKey));
-    const sData = getSession();
+    const sData = !isNonNullString(sessionName)? {} : defaultObj(session.get(sKey));
     Dimensions.useWindowDimensions();
     const innerRef = useRef(null);
     const sFormat = !isNonNullString(format) || !barcodeFormats.includes(format) ? isNonNullString(sData.format) && barcodeFormats.includes(sData.format) ? sData.format : defaultBarcodeFormat : format;
     const sHeight = defaultNumber(height,sData.height,100), sWidth = defaultNumber(width,sData.w100,2), sDisplayValue = typeof displayValue =='boolean'? displayValue :sData.displayValue !== undefined ? sData.displayValue:true;
-    const sFontOptions = isNonNullString(fontOptions) && fontOptionsKeys.includes(fontOptions) ?  fontOptions : isNonNullString(sData.fontOptions) ? fontOptionsKeys.includes(sData?.fontOptions) : "bold";
+    const sFontOptions = isNonNullString(fontOptions) && fontOptionsKeys.includes(fontOptions) ?  fontOptions : isNonNullString(sData.fontOptions) && fontOptionsKeys.includes(sData?.fontOptions) ? sData.fontOptions : "bold";
     const sTextAlign = isNonNullString(textAlign) && alignments.includes(textAlign)? textAlign : isNonNullString(sData.textAlign) && alignments.includes(sData.textAlign)? sData.textAlign : "center";
     const sTextPosition = isNonNullString(textPosition) && ["top","bottom"].includes(textPosition) ? textPosition : isNonNullString(sData.textPosition) && ["top","bottom"].includes(sData.textPosition) ? sData.textPosition : "bottom";
     const sFontSize = typeof fontSize ==='number'? fontSize : typeof sData.fontSize ==='number'? sData.fontSize : 20;
     const sLineColor  = theme.Colors.isValid(lineColor)? lineColor : theme.Colors.isValid(sData.lineColor)? sData?.linceColor:"#000000";
     const sBackground = theme.Colors.isValid(background)? background : theme.Colors.isValid(sData.background)? sData.background : "#ffffff";
     const sTextMargin = typeof textMargin =='number'? textMargin : typeof sData.textMargin =='number'? sData.textMargin : 2;
+    const sValue = isNonNullString(value)? value : isNonNullString(sData.value)? sData.value : "";
     const sMargins = {};
     Object.map({marginTop,marginBottom,marginLeft,marginRight},(val,k)=>{
         sMargins[k] = typeof v =='number'? v : typeof sData[k] == null ? sData[k] : 10;
     });
     const marginKeys = Object.keys(sMargins);
     const [state,setState] = useState({
-        format : sFormat,height:sHeight,width : sWidth,value,displayValue :sDisplayValue,fontOptions : sFontOptions,textAlign:sTextAlign,
+        format : sFormat,height:sHeight,width : sWidth,value:sValue,displayValue :sDisplayValue,fontOptions : sFontOptions,textAlign:sTextAlign,
         textPosition : sTextPosition,fontSize : sFontSize,lineColor:sLineColor,background:sBackground,textMargin:sTextMargin,...sMargins
     });
     useEffect(()=>{
         if(sessionName){
             session.set(sKey,state);
         }
+        if(typeof onChange =='function'){
+            onChange({data:state,state,setState});
+        }
     },[state]);
+    const isValid = encode(state)!==null;
+    const args = {state,setState,sessionName,isValid,isMobile,isTablet,isDesktop,getState:()=>state,getData:()=>state};
+    leftContent = typeof leftContent =='function'? leftContent(args) : leftContent;
+    rightContent = typeof rightContent =='function'? rightContent(args) : rightContent;
+    bottomContent = typeof bottomContent =='function'? bottomContent(args) : bottomContent;
+    topContent = typeof topContent =='function'? topContent(args) : topContent;
+    saveAction = typeof saveAction =='function'? saveAction(args) : saveAction;
     const isMobile = Dimensions.isMobileMedia(),isTablet= Dimensions.isTabletMedia(),isDesktop= Dimensions.isDesktopMedia();
     const cellProps = {}
-    const inputProps = {mode:"flat",style:{width:"100%"},containerProps:{style:[]}}
+    const inputProps = {mode:"flat",affix:false,style:{width:"100%",paddingLeft:10},labelProps:{style:{paddingLeft:10}},containerProps:{style:[]}}
     return <Surface {...rest} testID={testID} style={[theme.styles.w100,theme.styles.p2,rest.style]}>
         <View testID={testID+"SurfaceContent"} style={[isMobile || isTablet && {flexDirection:"column"},{justifyContent:"flex-start",alignItems:"flex-start"},isDesktop && {flexDirection:"row"}]}>
-            <View elevation={isDesktop?5:0} testID={`${testID}_SettingsContainer`} style={[{paddingHorizontal:5},isDesktop? {width:400,marginRight:10,borderRightColor:theme.colors.divider,borderRightWidth:1}:{width:"100%"}]}>
-                {false && isDesktop ? <View testID={`${testID}_DesignerOptions`} style={[theme.styles.w100]}>
+            <View elevation={isDesktop?5:0} testID={`${testID}_SettingsContainer`} style={[{paddingHorizontal:5},isDesktop? {width:400,marginRight:10,paddingBottom:20,borderColor:theme.colors.divider,borderWidth:1}:{width:"100%"}]}>
+                <Expandable defaultExpanded title={<View style={[theme.styles.row,theme.styles.flexWrap,theme.styles.alignItemsCenter,theme.styles.justifyContentSpaceBetween]}>
                     <Label primary textBold fontSize={15} children={"Options du Designer"}/>
-                    <Divider style={[theme.styles.w100,{marginTop:5}]}/>
-                </View>:null}
-                <Expandable defaultExpanded title={<Label primary textBold fontSize={15} children={"Options du Designer"}/>}>
+                    {React.isValidElement(saveAction)? saveAction : null}
+                </View>}>
                     <View {...cellProps}>
                         <TextField
                             {...inputProps}
                             label = {"Valeur de test"}
-                            defaultValue = {value}
+                            defaultValue = {state.value}
                             onChange = {({value})=>{
-                                if(value){
-                                    setState({...state,value});
-                                }
+                                setState({...state,value});
                             }}
                         />
                     </View>
@@ -97,7 +110,7 @@ const BarcodeDesigner = forwardRef(({
                     <View {...cellProps}>
                         <TextField
                             {...inputProps}
-                            label = {"Hauteur de la barre"}
+                            label = {"Hauteur des barres"}
                             type ="number"
                             defaultValue = {state.height}
                             onChange = {({value})=>{
@@ -109,7 +122,7 @@ const BarcodeDesigner = forwardRef(({
                         <TextField
                             {...inputProps}
                             type ="number"
-                            label = {"Longueur de la barre"}
+                            label = {"Longueur des barres"}
                             defaultValue = {state.width}
                             onChange = {({value})=>{
                                 setState({...state,width:value});
@@ -233,7 +246,9 @@ const BarcodeDesigner = forwardRef(({
                 </Expandable>
             </View>
             <View testID={`${testID}_DesignerContainer`} style={[!isDesktop && {width:"100%"},{flexDirection:"column"},theme.styles.p1]}> 
-                 <View testID={testID+"_DesignerContent"} style={[theme.styles.w100,theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>
+                 {React.isValidElement(topContent)? topContent : null}
+                 <View testID={testID+"_DesignerContent"} style={[theme.styles.w100,theme.styles.row,theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexCenter]}>
+                    {React.isValidElement(leftContent)? leftContent : null}
                     <Generator
                         {...state}
                         displayValue = {!!state.displayValue}
@@ -243,12 +258,14 @@ const BarcodeDesigner = forwardRef(({
                         }}
                         ref = {useMergeRefs(ref,innerRef)}
                     />
+                    {React.isValidElement(rightContent) ?rightContent : null}
                 </View>
+                {React.isValidElement(bottomContent) ? bottomContent : null}
             </View>
         </View>
     </Surface>
 });
-
+const contentType = PropTypes.oneOfType([PropTypes.func,PropTypes.node]);
 export const barcodeSetingsFields = {
     sessionName : PropTypes.string,
     format : PropTypes.oneOf(barcodeFormats),
@@ -270,6 +287,12 @@ export const barcodeSetingsFields = {
     marginBottom : PropTypes.number,
     marginLeft : PropTypes.number,
     marginRight : PropTypes.number,
+    onChange : PropTypes.func,
+    topContent : contentType, //le contenu de l'élément à rendre en haut du Générateur
+    bottomContent : contentType,//le contenu de l'élément à rendre en haut du content
+    leftContent : contentType,
+    saveAction : contentType,
+    rightContent : contentType, //le contenu à render à droite du générateur
 }
 
 BarcodeDesigner.displayName = "BarcodeDesigner";

package/src/components/Barcode/Generator/Generator.js

@@ -2,6 +2,7 @@ import React,{forwardRef,useRef,useEffect} from "$react";
 import {uniqid,defaultStr} from "$cutils";
 import JsBarcode from "jsbarcode";
 import {jsbarcodePropTypes } from "./utils";
+import View from "$ecomponents/View";
 
 ///@see : https://lindell.me/JsBarcode/
 const BarcodeGeneratorComponent = forwardRef(({value,format,id,errorText,testID,onReady,text,flat,width,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight,valid},ref)=>{
@@ -34,7 +35,9 @@ const BarcodeGeneratorComponent = forwardRef(({value,format,id,errorText,testID,
         }
     });
     if(error) return error;
-    return <svg {...jsProps} id={`${idRef.current}`} ref={ref} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
+    return <View style={[{alignSelf:'center'}]} ref={ref}>
+        <svg {...jsProps} id={`${idRef.current}`} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
+    </View>
 });
 
 BarcodeGeneratorComponent.displayName = "BarcodeGeneratorComponent";

package/src/components/Barcode/Generator/index.js

@@ -5,7 +5,7 @@ import theme,{StyleProp} from "$theme";
 import {defaultStr,defaultObj,isNonNullString,extendObj,uniqid,isDataURL} from "$cutils";
 import Generator from "./Generator";
 import {isMobileNative} from "$cplatform";
-import { defaultBarcodeFormat,barcodeFormats,jsbarcodePropTypes,prepareOptions } from './utils';
+import { defaultBarcodeFormat,barcodeFormats,jsbarcodePropTypes,encode } from './utils';
 import { captureRef } from '$expo-ui/view-shot';
 import Base64 from "$base64";
 import Label from "$ecomponents/Label";
@@ -127,21 +127,7 @@ const BarcodeGenerator = forwardRef(({
   },[format,value,width,height,lineColor])
   const toDataURL = ()=>{
     return new Promise((resolve,reject)=>{
-      if(!isMobileNative() && typeof document !=="undefined" && typeof document?.querySelector =='function'){
-        const element = document.querySelector(`#${idRef.current}`);
-        if(element && window?.XMLSerializer){
-          try {
-              const xml = new XMLSerializer().serializeToString(element);
-              const r = 'data:image/svg+xml;base64,' + Base64.encode(xml);
-              if(isDataURL(r) && typeof onConvertToDataURL =="function"){
-                onConvertToDataURL(r);
-              }
-              return resolve(r);
-          } catch (e){
-          }   
-        }
-      }
-      return innerRef.current?.measureInWindow((x, y, width, height) => {
+      const cb2 = (x, y, width, height) => {
         const cb = ()=>{
           return captureRef(innerRef.current,extendObj({},{
             quality: 1,
@@ -151,8 +137,9 @@ const BarcodeGenerator = forwardRef(({
             height,
           },dataURLOptions)).then((r)=>{
               if(isDataURL(r) && typeof onConvertToDataURL =="function"){
-                onConvertToDataURL(r);
+                onConvertToDataURL({dataURL:r});
               }
+              resolve({dataURL:r,width,height});
           }).catch((e)=>{
             console.log(e," is capturing data url");
             reject(e);
@@ -162,10 +149,17 @@ const BarcodeGenerator = forwardRef(({
           return setTimeout(cb,50);
         }
         return cb(); 
-      });
+      };
+      if(!isMobileNative() && typeof document !=="undefined" && typeof document?.querySelector =='function'){
+        const element = document.querySelector(`#${idRef.current}`);
+        if(element && typeof element?.getBoundingClientRect =='function'){
+          const {width,height} = element.getBoundingClientRect();
+          return cb2(undefined,undefined,width,height);
+        }
+      }
+      return innerRef.current?.measureInWindow(cb2);
     })
   }
-  React.setRef(ref,toDataURL);
   return (<Generator
     {...rest}
     errorText = {error ? <Label style={{textAlign:'center'}} error fontSize={15} textBold>
@@ -182,48 +176,16 @@ const BarcodeGenerator = forwardRef(({
     width = {isMobileNative()?barCodeWidth:width}
     height = {height}
     lineColor = {lineColor}
-    ref = {useMergeRefs(ref,innerRef)}
+    ref = {(el)=>{
+      if(el){
+        el.toDataURL = toDataURL;
+      }
+      innerRef.current = el;
+      React.setRef(ref,el);
+    }}
   />);
 });
 
-/****
-  encode le barcode passé en paramètre
-  @return {null|object}
-  @param {string|object}
-    si object alors : {
-      value {string}, la valeur à vérifier
-      format {string}, le code du format à vérifier
-    }
-    si string alors {value:{string}}, le format par défaut est le code128
-  @param {string} format, si value est un objet alors le second paramètre peut être considéré comme le format
-*/
-export const encode = (options,format)=>{
-  if(isNonNullString(options)){
-    options = {text:options};
-  } else options = defaultObj(options);
-  const {text:cText,value:cValue,format:cFormat,...rest} = options;
-  const text = defaultStr(options.value,options.text);
-  format = defaultStr(format,options.format);
-  if(!isNonNullString(text)) return null;
-  if(!isNonNullString(format) || !barcodeFormats.includes(format)){
-    format = defaultBarcodeFormat
-  }
-  try {
-    const encoder = new barcodes[format](text, {
-      format,
-      displayValue : true,
-      flat: true,
-      ...rest,
-    });
-    if (!encoder.valid()) {
-      return null;
-    }
-    return encoder.encode();
-  } catch (e){
-    return null;
-  }
-}
-
 BarcodeGenerator.propTypes = {
   value: PropTypes.string,
   ...jsbarcodePropTypes,

package/src/components/Barcode/Generator/utils.js

@@ -62,4 +62,42 @@ export const prepareOptions = ({textPosition,fontOptions,fontSize,textMargin,tex
         svgStyle,
         style,
     }
-}
+}
+
+/****
+  encode le barcode passé en paramètre
+  @return {null|object}
+  @param {string|object}
+    si object alors : {
+      value {string}, la valeur à vérifier
+      format {string}, le code du format à vérifier
+    }
+    si string alors {value:{string}}, le format par défaut est le code128
+  @param {string} format, si value est un objet alors le second paramètre peut être considéré comme le format
+*/
+export const encode = (options,format)=>{
+    if(isNonNullString(options)){
+      options = {text:options};
+    } else options = defaultObj(options);
+    const {text:cText,value:cValue,format:cFormat,...rest} = options;
+    const text = defaultStr(options.value,options.text);
+    format = defaultStr(format,options.format);
+    if(!isNonNullString(text)) return null;
+    if(!isNonNullString(format) || !barcodeFormats.includes(format)){
+      format = defaultBarcodeFormat
+    }
+    try {
+      const encoder = new barcodes[format](text, {
+        format,
+        displayValue : true,
+        flat: true,
+        ...rest,
+      });
+      if (!encoder.valid()) {
+        return null;
+      }
+      return encoder.encode();
+    } catch (e){
+      return null;
+    }
+}

package/src/pdf/index.js

@@ -55,7 +55,7 @@ export const getFields = (config)=>{
     @paramm {multiple}, 
     @param {object} formDataProps, les prpops à passer au DialogProvider
 */
-export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>{
+export const getPrintSettings = ({multiple,duplicateDocOnPage,pageBreakBeforeEachDoc,sessionName,formDataProps,...rest})=>{
     formDataProps = Object.assign({},formDataProps);
     const hasSession = isNonNullString(sessionName);
     if(hasSession){
@@ -66,7 +66,7 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
     const sessionData = hasSession ? defaultObj(session.get(sessionName)) : {};
     const config = {...sessionData,...defaultObj(formDataProps.data)};
     const fields = extendObj(true,{},formDataProps.fields,{
-        duplicateDocOnPage : {
+        duplicateDocOnPage : duplicateDocOnPage !== false ? {
             text :'Dupliquer le(s) document(s)',
             type : 'switch',
             defaultValue :  0,
@@ -90,8 +90,8 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
                     }
                 }
             }
-        },
-        pageBreakBeforeEachDoc : {
+        } : undefined,
+        pageBreakBeforeEachDoc : pageBreakBeforeEachDoc !==false ? {
             text :'Saut de page par document',
             type : 'switch',
             defaultValue :  1,
@@ -105,8 +105,8 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
                 }
                 return v;
             }
-        },
-        pageMarginAfterEachDoc : {
+        } : null,
+        pageMarginAfterEachDoc : duplicateDocOnPage !== false ? {
             text : "Marge après chaque document",
             tooltip : 'Spécifiez le nombre de ligne à ajouter comme marge après chaque document',
             defaultValue : 2,
@@ -121,7 +121,7 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
                 }
                 return v;
             }
-        },
+        } : undefined,
     },getFields(formDataProps.data))
     return new Promise((resolve,reject)=>{
         return DialogProvider.open({

package/src/view-shot/index.js

@@ -39,18 +39,7 @@ export async function captureRef(view, options) {
     h2cOptions.y = options.y;
   }
   return html2canvas(view, h2cOptions).then((renderedCanvas)=>{
-    if (false && options.width && options.height) {
-        // Resize result
-        const resizedCanvas = document.createElement('canvas');
-        const resizedContext = resizedCanvas.getContext('2d');
-        resizedCanvas.height = options.height;
-        resizedCanvas.width = options.width;
-        console.log(options.width," is dddd ",options);
-        resizedContext.drawImage(renderedCanvas, 0, 0, resizedCanvas.width, resizedCanvas.height);
-        renderedCanvas = resizedCanvas;
-      }
       const dataUrl = renderedCanvas.toDataURL("image/" + options.format, options.quality);
-      console.log(dataUrl," is ddddddddddd")
       if (options.result === "data-uri" || options.result === "tmpfile") return dataUrl;
       return dataUrl.replace(/data:image\/(\w+);base64,/, '');
   });