@fto-consult/expo-ui 8.11.0 → 8.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.11.0",
+  "version": "8.12.0",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",
@@ -70,7 +70,7 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@faker-js/faker": "^8.0.2",
-    "@fto-consult/common": "^4.13.0",
+    "@fto-consult/common": "^4.13.9",
     "@fto-consult/node-utils": "^1.4.7",
     "apexcharts": "^3.45.2",
     "commander": "^11.1.0",

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

@@ -253,9 +253,6 @@ const BarcodeDesigner = forwardRef(({
                         {...state}
                         displayValue = {!!state.displayValue}
                         autoConvertToDataURL = {false}
-                        onConvertToDataURL = {(dataURL)=>{
-                            console.log(dataURL,"converting to dataurl");
-                        }}
                         ref = {useMergeRefs(ref,innerRef)}
                     />
                     {React.isValidElement(rightContent) ?rightContent : null}

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

@@ -5,10 +5,9 @@ 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)=>{
+const BarcodeGeneratorComponent = forwardRef(({value,as:asTag,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)=>{
     testID = defaultStr(testID,"RN_GeneratorWebSVG");
     const idRef = useRef(defaultStr(id,uniqid("bar-code-generator-web")));
-    const innerRef = useRef(null);
     const error = React.isValidElement(errorText)? errorText : null;
     if(error){
         displayValue = false;
@@ -27,9 +26,8 @@ const BarcodeGeneratorComponent = forwardRef(({value,format,id,errorText,testID,
         }
     },[value,error,format,width,height,displayValue,flat,text,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight])
     if(error) return error;
-    return <View style={[{alignSelf:'center'}]} ref={ref}>
-        <canvas id={`${idRef.current}`} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
-    </View>
+    const Tag = asTag || "img";
+    return <Tag id={`${idRef.current}`} ref={ref} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
 });
 
 BarcodeGeneratorComponent.displayName = "BarcodeGeneratorComponent";

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

@@ -5,15 +5,14 @@ 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,encode } from './utils';
-import { captureRef } from '$expo-ui/view-shot';
-import Base64 from "$base64";
+import { defaultBarcodeFormat,barcodeFormats,toDataURL,jsbarcodePropTypes,encode } from './utils';
 import Label from "$ecomponents/Label";
 
 export * from "./utils";
 
 const BarcodeGenerator = forwardRef(({
   value = '',
+  as,
   width = 2,
   height = 100,
   format,
@@ -119,57 +118,27 @@ const BarcodeGenerator = forwardRef(({
       };
     }
   }, [value, width, height, format, lineColor, maxWidth]);
+  const _toDataURL = ()=>{
+      return toDataURL(innerRef.current,{
+        onConvertToDataURL,dataURLOptions,
+      });
+  }
   useEffect(()=>{
-    if(true || autoConvertToDataURL === true){
-      toDataURL();
+    if(autoConvertToDataURL === true){
+      _toDataURL();
     }
   },[format,value,width,height,lineColor])
-  const toDataURL = ()=>{
-    return new Promise((resolve,reject)=>{
-      const cb2 = (x, y, width, height) => {
-        return captureRef(innerRef.current,extendObj({},{
-          quality: 1,
-          format: 'png',
-          result : "data-uri",
-          width,
-          height,
-        },dataURLOptions)).then((r)=>{
-            if(isDataURL(r) && typeof onConvertToDataURL =="function"){
-              onConvertToDataURL({dataURL:r});
-            }
-            resolve({dataURL:r,width,height});
-        }).catch((e)=>{
-          console.log(e," is capturing data url");
-          reject(e);
-        }); 
-      };
-      if(!isMobileNative() && typeof document !=="undefined" && typeof document?.querySelector =='function'){
-        const canvas = document.querySelector(`#${idRef.current}`);
-        if(canvas){
-          if(typeof canvas?.toDataURL =='function'){
-            return resolve(canvas.toDataURL());
-         }
-        } else {
-          try {
-            const {width,height} = canvas?.getBoundingClientRect();
-            return cb2(undefined,undefined,width,height);
-          } catch(e){
-            reject(e);
-          }
-        }
-      }
-      return innerRef.current?.measureInWindow(cb2);
-    });
-  }
+  
   return (<Generator
     {...rest}
+    as={as}
     errorText = {error ? <Label style={{textAlign:'center'}} error fontSize={15} textBold>
     {error?.toString()}
   </Label>: null}
     id = {idRef.current}
     onReady = {()=>{
       if(typeof onReady =="function"){
-        return onReady({toDataURL});
+        return onReady({toDataURL:_toDataURL});
       }
     }}
     value = {value}
@@ -181,12 +150,9 @@ const BarcodeGenerator = forwardRef(({
     width = {isMobileNative()?barCodeWidth:width}
     height = {height}
     lineColor = {lineColor}
-    ref = {(el)=>{
-      if(el){
-        el.toDataURL = toDataURL;
-      }
-      innerRef.current = el;
-      React.setRef(ref,el);
+    ref = {(element)=>{
+      innerRef.current = element;
+      React.setRef(ref,{element,toDataURL});
     }}
   />);
 });

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

@@ -1,6 +1,9 @@
 import barcodes from 'jsbarcode/src/barcodes';
 import PropTypes from "prop-types";
-import {defaultObj} from "$cutils";
+import {defaultObj,defaultNumber} from "$cutils";
+import { captureRef } from '$expo-ui/view-shot';
+import {isDataURL} from "$cutils";
+import {isMobileNative} from "$cplatform";
 
 export const barcodeFormats = Object.keys(barcodes);
 
@@ -101,3 +104,63 @@ export const encode = (options,format)=>{
       return null;
     }
 }
+
+
+/*** exporte au format dataURL
+  @param {domElement|nativeElement} element, l'élement dom ou l'élément react native
+  @param {object} options, les options supplémentaires
+*/
+export const toDataURL = (element,options)=>{
+  if(!element){
+    return Promise.reject({message:`Impossible de convertir le code barre en dataURL, rassurer vous que le premier argument de la fonction toDataURL soit un élément dom ou un élement  react natif`,options})
+  }
+  options = defaultObj(options);
+  const {onConvertToDataURL,...dataURLOptions} = options;
+  return new Promise((resolve,reject)=>{
+    const final = (dataURL,rest)=>{
+        dataURL = isDataURL(dataURL)? dataURL : undefined;
+        const result = {...defaultObj(rest),dataURL};
+        if(dataURL){
+          if(typeof onConvertToDataURL =="function"){
+            onConvertToDataURL(result);
+          }
+          return resolve(result);
+        }
+        reject({...result,message:`Image non valide!! le fichier dataURL généré est non valide`,status:false})
+    }
+    const cb2 = (x, y, width, height) => {
+      return captureRef(element,extendObj({},{
+        quality: 1,
+        format: 'png',
+        result : "data-uri",
+        width,
+        height,
+      },dataURLOptions)).then(final).catch((e)=>{
+        console.log(e," is capturing data url");
+        reject(e);
+      }); 
+    };
+    if(!isMobileNative() && typeof document !=="undefined" && typeof document?.querySelector =='function'){
+      if(typeof element?.toDataURL =='function'){
+        const {width,height} = typeof element.getBoundingClientRect =="function"? element.getBoundingClientRect() : {};
+        return final(element.toDataURL(),{width,height});
+      }
+      const src = typeof element?.getAttribute =='function' && element?.getAttribute("src");
+      if(isDataURL(src)){
+        const width = defaultNumber(element.width,element.naturalWidth,element.clientWidth);
+        const height = defaultNumber(element.height,element.naturalHeight,element.clientHeight);
+        return final(src,{width,height});
+      }
+      try {
+        const ob = element?.getBoundingClientRect();
+        if(isObj(ob)){
+          const {width,height} = ob;
+          return cb2(undefined,undefined,width,height);
+        }
+      } catch(e){
+        reject(e);
+      }
+    }
+    return element?.measureInWindow(cb2);
+  });
+}

package/src/components/Barcode/utils.js

@@ -2,6 +2,7 @@
 import {defaultNumber,isNonNullString} from "$cutils";
 import Preloader from "$preloader";
 import JsBarcode from "jsbarcode";
+import { toDataURL } from "./Generator/utils";
 
 /*** permet de generer une liste des codes barres à partir des props passés en paramètre
 */
@@ -25,18 +26,31 @@ export function generate ({startSequence,onFinish,barcodeTemplate,barcodeOptions
         setTimeout(()=>{
             for(let sequence=startSequence;sequence<=endSequence;sequence++){
                 promises.push(new Promise((resolve)=>{
-                    const canvas = document.createElement('canvas');
+                    const hasSerializer = typeof window?.XMLSerializer !=="undefined" && window?.XMLSerializer; 
+                    const canvas = document.createElement(hasSerializer ? 'svg':'img');
                     const b = generate({sequence,template:barcodeTemplate,barcodeTemplate});
                     const barcode = isNonNullString(b)? b : defaultStr(barcodeTemplate);//.replaceAll("{sequence}",sequence)
                     if(barcode){
                         Preloader.open(`${prefix} [${barcode}]...`)
                         try {
                             JsBarcode(canvas,barcode,barcodeOptions);
-                            const dataURL = canvas.toDataURL();
-                            const ret = {barcode,dataURL};
-                            data.push(ret)
-                            resolve(ret)
+                            if(hasSerializer){
+                                const serializer = new XMLSerializer();
+                                const svg = serializer.serializeToString(canvas);
+                                const ret = {svg,barcode};
+                                data.push(ret)
+                                return resolve(ret);
+                            }
+                            return toDataURL(canvas).then((ret)=>{
+                                ret = {...ret,barcode};
+                                data.push(ret)
+                                resolve(ret)
+                            }).catch((e)=>{
+                                console.log(e," converting ",barcode," to data url")
+                                resolve({message:`Unable to convert barcode ${barcode} to dataURL`,status:false})
+                            })
                         } catch(e){
+                            console.log(e," occurred on generating barcode ",barcode," for sequence ",sequence);
                             resolve({error:e})
                         }
                     } else {
@@ -44,7 +58,7 @@ export function generate ({startSequence,onFinish,barcodeTemplate,barcodeOptions
                     }
                 }));
             }
-            return Promise.all(promises).then(()=>{
+            return Promise.all(promises).then((allD)=>{
                 resolve(data);
             }).catch((e)=>{
                 console.log(e," generation barcode");