@fto-consult/expo-ui 8.8.0 → 8.8.1

package/babel.config.alias.js

@@ -26,6 +26,7 @@ module.exports = (opts)=>{
     r["$emedia"] = path.resolve(expo,"media");
     r["$enavigation"] = path.resolve(expo,"navigation");
     r["$escreens"] = path.resolve(expo,"screens");
+    r["$eview-shot"] = path.resolve(expo,"view-shot");
     ///les screens principaux de l'application
     r["$escreen"] = r["$eScreen"] = path.resolve(expo,"layouts/Screen");
     r["$eassets"] = path.resolve(dir,"assets");

package/bin/create-app/dependencies.js

@@ -31,5 +31,6 @@ module.exports = {
     "react-native-svg": "14.1.0",
     "react-native-webview": "13.6.4",
     "react-native-gesture-handler": "~2.14.0",
-    "react-native-reanimated": "~3.6.0"
+    "react-native-reanimated": "~3.6.0",
+    "react-native-view-shot": "3.8.0"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fto-consult/expo-ui",
-  "version": "8.8.0",
+  "version": "8.8.1",
   "description": "Bibliothèque de composants UI Expo,react-native",
   "scripts": {
     "clear-npx-cache": "npx clear-npx-cache",
@@ -77,6 +77,7 @@
     "crypto-browserify": "^3.12.0",
     "file-saver": "^2.0.5",
     "google-libphonenumber": "^3.2.34",
+    "html2canvas": "^1.4.1",
     "htmlparser2-without-node-native": "^3.9.2",
     "is-plain-obj": "^4.1.0",
     "js-base64": "^3.7.5",

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

@@ -0,0 +1,34 @@
+import {forwardRef,useRef,useEffect} from "$react";
+import {uniqid,defaultStr} from "$cutils";
+import JsBarcode from "jsbarcode";
+import {jsbarcodePropTypes } from "./utils";
+
+///@see : https://lindell.me/JsBarcode/
+const BarcodeGeneratorComponent = forwardRef(({value,format,id,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")));
+    useEffect(()=>{
+        const element = document.querySelector(`#${idRef.current}`);
+        if(!element) return;
+        JsBarcode(`#${idRef.current}`).init();
+        if(typeof onReady ==="function"){
+            setTimeout(()=>{
+                onReady();
+            },50);
+        }
+    },[value,format,id,testID,width,height,displayValue,flat,text,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight])
+    const jsProps = {};
+    const supportedProps = {value,format,width,flat,text,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight};
+    Object.keys(supportedProps).map(key=>{
+        if(supportedProps[key] !== undefined){
+            jsProps[`jsbarcode-${key.toLowerCase()}`] = String(supportedProps[key]);
+        }
+    });
+    return <svg {...jsProps} id={`${idRef.current}`} ref={ref} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
+});
+
+BarcodeGeneratorComponent.displayName = "BarcodeGeneratorComponent";
+
+BarcodeGeneratorComponent.propTypes = jsbarcodePropTypes
+
+export default BarcodeGeneratorComponent;

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

@@ -0,0 +1,37 @@
+import React,{forwardRef,useEffect} from "$react";
+import Svg, { Path } from 'react-native-svg';
+import Label from "$ecomponents/Label";
+import {defaultStr,defaultNumber} from "$cutils";
+import theme from "$theme";
+import View from "$ecomponents/View";
+import { prepareOptions } from "./utils";
+const BarcodeGeneratorComponent = forwardRef(({width,height,lineColor,bars,value,onReady,format,id,testID,text,flat,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,backgroun,margin,marginTop,marginBottom,marginLeft,marginRight,containerProps},ref)=>{
+    testID = defaultStr(testID,"RNBarCodeGeneratorComponent");
+    const child = React.isValidElement(text,true)? text : displayValue !== false && value || null;
+    const {style,svgStyle,displayChildOnTop} = prepareOptions({textPosition,fontOptions,fontSize,textMargin,textAlign,margin,marginLeft,marginRight,marginTop,marginBottom});
+    const children = child? <Label
+        testID = {`${testID}_Label`}
+        style = {[theme.styles.w100,style,theme.Colors.isValid(lineColor) && {color:lineColor}]}
+    >{child}</Label> : null;
+    useEffect(()=>{
+        if(typeof onReady =='function'){
+            setTimeout(onReady,50);
+        }
+    },[width,height,lineColor,bars,value,format,id,testID,text,flat,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,backgroun,margin,marginTop,marginBottom,marginLeft,marginRight])
+    containerProps = Object.assign({},containerProps);
+    return <View ref = {ref} id={id} testID={testID+"_Container"} {...containerProps} style={[{alignSelf:"center"},containerProps.style]}>
+        {displayChildOnTop ? chilren : null}
+        <Svg 
+            testID={testID}
+            height={height} width={width} fill={lineColor}
+            style = {svgStyle}
+          >
+            <Path d={bars.join(' ')} />
+        </Svg>
+        {!displayChildOnTop ? children : null}
+    </View>
+});
+
+BarcodeGeneratorComponent.displayName = "BarcodeGeneratorComponent";
+
+export default BarcodeGeneratorComponent;

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

@@ -1,43 +1,48 @@
-import React, { useMemo } from '$react';
+import React, { useMemo,forwardRef,useEffect,defaultNumber,useRef,useMergeRefs} from '$react';
 import PropTypes from 'prop-types';
-import View from "$ecomponents/View";
-import Label from "$ecomponents/Label";
-import Svg, { Path } from 'react-native-svg';
 import barcodes from 'jsbarcode/src/barcodes';
-import theme from "$theme";
-import {defaultStr,defaultObj,isNonNullString} from "$cutils";
+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 { captureRef } from '$expo-ui/view-shot';
+import Base64 from "$base64";
 
-export const barCodeFormats = Object.keys(barcodes);
+export * from "./utils";
 
-const Barcode = ({
+const BarcodeGenerator = forwardRef(({
   value = '',
   width = 2,
   height = 100,
   format,
-  color,
-  text,
+  lineColor,
+  children,
   testID,
-  textStyle,
   style:cStyle,
   onError,
+  autoConvertToDataURL,
+  onConvertToDataURL,
   maxWidth,
-  svgProps,
-  header,
-  childrenProps,
+  backgroundColor,
+  dataURLOptions,
+  id,
   ...rest
-}) => {
+},ref) => {
+  dataURLOptions = defaultObj(dataURLOptions);
   testID = defaultStr(testID,"RNBarcodeGenerator");
-  svgProps = defaultObj(svgProps);
+  const innerRef = useRef(null);
+  const isReadyRef = useRef(false);
+  const setReady = ()=> isReadyRef.current = true;
    const style = theme.flattenStyle(cStyle);
-  style.backgroundColor = theme.Colors.isValid(style.backgroundColor)? style.backgroundColor : '#ffffff';
-  color = theme.Colors.isValid(color)? color : '#000000';
-  header = typeof header =="string" && header ? <Label testID={`${testID}_Header`} style={[{color}]}>header</Label> : React.isComponent(header)? header : null;
-  children = typeof children =="string" && children ? <Label testID={`${testID}_Header`} style={[theme.styles.textAlignCenter,{color}]}>children</Label> : React.isComponent(children)? children : null;
+   const idRef = useRef(defaultStr(id,uniqid("bar-code-generator-web")));
+  backgroundColor = theme.Colors.isValid(backgroundColor) ? backgroundColor :  style.backgroundColor = theme.Colors.isValid(style.backgroundColor)? style.backgroundColor : '#ffffff';
+  lineColor = theme.Colors.isValid(lineColor)? lineColor : '#000000';
   if(!isNonNullString(format)){
-    format = 'CODE128';
-  } else if(!barCodeFormats.includes(format)){
-    console.warn(`Format de code bar [${format}] est invalide, il sera remplacé par le format 'CODE128'. Vous devez spécifier un format parmi la liste : [${barCodeFormats.join(",")}]`,children,rest)
-    format = 'CODE128';
+    format = defaultBarcodeFormat;
+  } else if(!barcodeFormats.includes(format)){
+    console.warn(`Format de code bar [${format}] est invalide, il sera remplacé par le format [${defaultBarcodeFormat}]. Vous devez spécifier un format parmi la liste : [${barcodeFormats.join(",")}]`,children,rest)
+    format = defaultBarcodeFormat;
   }
   const drawRect = (x, y, width, height) => {
     return `M${x},${y}h${width}v${height}h-${width}z`;
@@ -83,30 +88,14 @@ const Barcode = ({
     return rects;
   };
 
-  const encode = (text, Encoder) => {
-    if (typeof text !== 'string' || text.length === 0) {
-      throw new Error('Barcode value must be a non-empty string');
-    }
-    const encoder = new Encoder(text, {
-      width,
-      format,
-      height,
-      color,
-      flat: true,
-    });
-    if (!encoder.valid()) {
-      throw new Error('Invalid barcode for selected format.');
-    }
-    return encoder.encode();
-  };
+  
 
   const { bars, barCodeWidth } = useMemo(() => {
     try {
-      const encoder = barcodes[format];
-      if (!encoder) {
-        throw new Error('Invalid barcode format.');
+      const encoded = encode({value,width,height,format,lineColor,maxWidth});
+      if(!encoded){
+        throw new Error(`code barre ${value} invalide pour le format sélectionné ${format}`);
       }
-      const encoded = encode(value, encoder);
       const barCodeWidth = encoded.data.length * width;
       return {
         bars: drawSvgBarCode(encoded),
@@ -127,37 +116,117 @@ const Barcode = ({
       bars: [],
       barCodeWidth: 0,
     };
-  }, [value, width, height, format, color, maxWidth]);
+  }, [value, width, height, format, lineColor, maxWidth]);
+  useEffect(()=>{
+    if(autoConvertToDataURL === true){
+      toDataURL();
+    }
+  },[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){
+              console.log(e," isdddddd");
+          }   
+        }
+      }
+      return innerRef.current?.measureInWindow((x, y, width, height) => {
+        const cb = ()=>{
+          return captureRef(innerRef.current,extendObj({},{
+            quality: 1,
+            format: 'png',
+            result : "data-uri",
+            width,
+            height,
+          },dataURLOptions)).then((r)=>{
+              if(isDataURL(r) && typeof onConvertToDataURL =="function"){
+                onConvertToDataURL(r);
+              }
+          }).catch((e)=>{
+            console.log(e," is capturing data url");
+            reject(e);
+          });
+        }
+        if(!isReadyRef.current){
+          return setTimeout(cb,50);
+        }
+        return cb(); 
+      });
+    })
+  }
+  React.setRef(ref,toDataURL);
+  return (<Generator
+    {...rest}
+    id = {idRef.current}
+    onReady = {setReady}
+    value = {value}
+    bars = {bars}
+    format = {format}
+    testID = {testID}
+    background = {backgroundColor}
+    width = {isMobileNative()?barCodeWidth:width}
+    height = {height}
+    lineColor = {lineColor}
+    ref = {useMergeRefs(ref,innerRef)}
+  />);
+});
 
-  return (
-    <View
-      {...rest}
-      style={[theme.styles.alignItemsCenter,style]}
-      testID = {testID}
-    >
-      <Svg 
-        height={height} width={barCodeWidth} fill={color}
-        {...svgProps}
-      >
-        <Path d={bars.join(' ')} />
-      </Svg>
-      {children ?  <Label>{children}</Label> : null}
-    </View>
-  );
-};
+/****
+  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 = defaultStr(options.value,options.text);
+  const {text:cText,value:cValue,format:cFormat,...rest} = options;
+  format = defaultStr(format,options.format);
+  if(!isNonNullString(text)) return null;
+  if(!isNonNullString(format) || !barcodeFormats[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{
+    return null;
+  }
+}
 
-Barcode.propTypes = {
+BarcodeGenerator.propTypes = {
   value: PropTypes.string.isRequired,
-  header : PropTypes.node,//le header à afficher
-  format: PropTypes.oneOf(barCodeFormats),
-  width: PropTypes.number,
+  ...jsbarcodePropTypes,
+  dataURLOptions : PropTypes.object,//les options à utiliser pour la convertion en data url
+  onConvertToDataURL : PropTypes.func,//lorsque la valeur est converti au format data url
   maxWidth: PropTypes.number,
-  height: PropTypes.number,
-  color: PropTypes.string,//la couleur des ligne du code barre généré
-  text: PropTypes.node,
-  textStyle: PropTypes.object,
-  style: PropTypes.object,
+  style: StyleProp,
   onError: PropTypes.func,
+  autoConvertToDataURL : PropTypes.bool,//si la valeur sera auto converti en url lorsque le composant sera monté
 };
 
-export default Barcode;
+export default BarcodeGenerator;

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

@@ -0,0 +1,64 @@
+import barcodes from 'jsbarcode/src/barcodes';
+import PropTypes from "prop-types";
+import {defaultObj} from "$cutils";
+
+export const barcodeFormats = Object.keys(barcodes);
+
+export const defaultBarcodeFormat = 'CODE128';
+
+export const jsbarcodePropTypes = {
+    value : PropTypes.string.isRequired,
+    format : PropTypes.oneOf(barcodeFormats),
+    width : PropTypes.number, //The width option is the width of a single bar., default : 2
+    height : PropTypes.number,//The height of the barcode., default 100,
+    text : PropTypes.string, //Overide the text that is diplayed
+    displayValue : PropTypes.bool,
+    fontOptions : PropTypes.string,//With fontOptions you can add bold or italic text to the barcode.
+    font : PropTypes.string,
+    textAlign : PropTypes.oneOf(["center","left","right"]), //Set the horizontal alignment of the text. Can be left / center / right.
+    textPosition : PropTypes.oneOf(["bottom","top"]),//Set the vertical position of the text. Can be bottom / top., default bottom
+    textMargin : PropTypes.number,//default : 2, Set the space between the barcode and the text.
+    fontSize : PropTypes.number,//Set the size of the text., default : 20,
+    flat : PropTypes.bool, //Only for EAN8/EAN13
+    background : PropTypes.string,//Set the background of the barcode., default #ffffff
+    lineColor: PropTypes.string,//Set the color of the bars and the text., default #000000
+    margin : PropTypes.number,//deafult : 10, Set the space margin around the barcode. If nothing else is set, all side will inherit the margins property but can be replaced if you want to set them separably.
+    marginTop : PropTypes.number,
+    marginBottom : PropTypes.number,
+    marginLeft : PropTypes.number,
+    marginRight : PropTypes.number,
+    valid : PropTypes.func,//function(valid){}	
+}
+
+export const JSBarcodePropTypes = jsbarcodePropTypes;
+
+export const prepareOptions = ({textPosition,fontOptions,fontSize,textMargin,textAlign,margin,marginLeft,marginRight,marginTop,marginBottom})=>{
+    const displayChildOnTop = defaultStr(textPosition,"bottom").toLowerCase().trim() ==="top";
+    fontOptions = defaultStr(fontOptions,"bold").toLowerCase();
+    textMargin = defaultNumber(textMargin,2);
+    const style = {
+        fontSize:defaultNumber(fontSize,20),
+        textAlign : ["center","left","right"].includes(textAlign)  && textAlign ||"center",
+        backgroundColor : "transparent",
+    };
+    if(fontOptions.includes("bold")){
+        style.fontWeight = "bold";
+    }
+    if(fontOptions.includes("italic")){
+        style.fontStyle = "italic";
+    }
+    if(displayChildOnTop){
+        style.marginBottom = textMargin;
+    } else style.marginTop = textMargin;
+    margin = defaultNumber(margin,10);
+    const svgStyle = {};
+    Object.map({marginTop,marginBottom,marginLeft,marginRight},(v,i)=>{
+        svgStyle[i] = defaultNumber(v,margin);
+    });
+    return {
+        displayChildOnTop,
+        fontOptions,
+        svgStyle,
+        style,
+    }
+}

package/src/components/Barcode/index.js

@@ -1,6 +1,7 @@
 import {default as Scanner} from "./Scanner";
 import {default as Generator} from "./Generator";
 export * from "./Scanner";
+export * from "./Generator";
 
 Scanner.Generator = Generator;
 

package/src/view-shot/index.js

@@ -0,0 +1,71 @@
+import html2canvas from "html2canvas";
+import { isNonNullString,defaultObj } from "$cutils";
+/***
+    @param : view, les options de la vie
+    @param {object} : 
+        options (object) --
+        An optional map of optional options
+        format (string) -- "png" | "jpg" | "webm", defaults to "png", "webm" supported only on Android.
+        quality (number) -- Number between 0 and 1 where 0 is worst quality and 1 is best, defaults to 1
+        result (string) -- The type for the resulting image. - 'tmpfile' -- (default) Return a temporary file uri. - 'base64' -- base64 encoded image. - 'data-uri' -- base64 encoded image with data-uri prefix.
+        height (number) -- Height of result in pixels
+        width (number) -- Width of result in pixels
+        snapshotContentContainer (bool) -- if true and when view is a ScrollView, the "content container" height will be evaluated instead of the container height
+*/
+export async function captureRef(view, options) {
+  options = defaultObj(options);
+  if (options.result === "tmpfile") {
+    return Promise.reject({message : `Tmpfile is not implemented for web. Try base64 or file.\nFor compatibility, it currently returns the same result as data-uri`})
+  }
+  if(!isNonNullString(options.format) || !["png","jpg","webm"].includes(options.format.toLowerCase())){
+    options.format = "png";
+  } else options.format = options.format.toLowerCase();
+  options.quality = typeof options.quality =="number"? options.quality : 1;
+  if(!isNonNullString(options.result) || !['base64','data-uri'].includes(options.result.toLowerCase())){
+    options.result = "data-uri";
+  } else options.result = options.result.toLowerCase();
+  // TODO: implement snapshotContentContainer option
+  const h2cOptions = {};
+  if(typeof options.width =="number"){
+    h2cOptions.width = options.width;
+  }
+  if(typeof options.height =="number"){
+    h2cOptions.height = options.height;
+  }
+  if(typeof options.x =="number"){
+    h2cOptions.x = options.x;
+  }
+  if(typeof options.y =='number'){
+    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,/, '');
+  });
+}
+
+export function captureScreen(options) {
+  return captureRef(window.document.body, options);
+}
+
+export function releaseCapture(uri) {
+  return null;
+}
+
+export default {
+  captureRef,
+  captureScreen,
+  releaseCapture
+}

package/src/view-shot/index.native.js

@@ -0,0 +1,2 @@
+export * from "react-native-view-shot";
+export {default} from "react-native-view-shot";