@fto-consult/expo-ui 8.8.2 → 8.9.0

package/package.json

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

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

@@ -0,0 +1,279 @@
+import {useRef,useState,forwardRef,useMergeRefs,useEffect,useMemo} from "$react";
+import Generator from "../Generator";
+import PropTypes from "prop-types";
+import View from "$ecomponents/View";
+import { barcodeFormats,defaultBarcodeFormat } from "../Generator/utils";
+import SimpleSelect from "$ecomponents/SimpleSelect";
+import { isNonNullString,defaultStr,defaultNumber,defaultObj } from "$cutils";
+import notify from "$cnotify";
+import TextField from "$ecomponents/TextField";
+import theme from "$theme";
+import Surface from "$ecomponents/Surface";
+import Dimensions from "$cdimensions";
+import Divider from "$ecomponents/Divider";
+import Label from "$ecomponents/Label";
+import Switch from "$ecomponents/Switch";
+import Icon from "$ecomponents/Icon";
+import Color from "$ecomponents/Color";
+import Expandable from "$ecomponents/Expandable";
+import session from "$session";
+const sessionKey = "appDesigner-sess"
+
+const fontOptionsKeys = ["bold","italic","bold italic"];
+const alignments = ["left","center","right"];
+
+const BarcodeDesigner = forwardRef(({
+        format,testID,onReady,text,value,flat,onChange,width,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight,
+        sessionName,
+        ...rest
+    },ref)=>{
+    testID = defaultStr(testID,'RNBarcodeDesigner');
+    const sKey = sessionName ? `${sessionKey}-${sessionName}` : null;
+    const getSession = x=> !isNonNullString(sessionName)? {} : defaultObj(session.get(sKey));
+    const sData = getSession();
+    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 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 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,
+        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 isMobile = Dimensions.isMobileMedia(),isTablet= Dimensions.isTabletMedia(),isDesktop= Dimensions.isDesktopMedia();
+    const cellProps = {}
+    const inputProps = {mode:"flat",style:{width:"100%"},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,paddingBottom:20,borderRightColor:theme.colors.divider,borderRightWidth:1}:{width:"100%"}]}>
+                <Expandable defaultExpanded title={<Label primary textBold fontSize={15} children={"Options du Designer"}/>}>
+                    <View {...cellProps}>
+                        <TextField
+                            {...inputProps}
+                            label = {"Valeur de test"}
+                            defaultValue = {value}
+                            onChange = {({value})=>{
+                                setState({...state,value});
+                            }}
+                        />
+                    </View>
+                    <View {...cellProps}>
+                        <SimpleSelect
+                            inputProps = {inputProps}
+                            items ={barcodeFormats}
+                            label = {"Format du code"}
+                            defaultValue = {state.format}
+                            itemValue = {({item,index})=>item}
+                            renderItem = {({item,index})=>item}
+                            onChange = {({value})=>{
+                                if(!value) return notify.error("Merci de sélectionner un format");
+                                if(value === state.format) return;
+                                setState({...state,format:value});
+                            }}
+                         /> 
+                    </View>
+                    <View {...cellProps}>
+                        <TextField
+                            {...inputProps}
+                            label = {"Hauteur des barres"}
+                            type ="number"
+                            defaultValue = {state.height}
+                            onChange = {({value})=>{
+                                setState({...state,height:value});
+                            }}
+                        />
+                    </View>
+                    <View {...cellProps}>
+                        <TextField
+                            {...inputProps}
+                            type ="number"
+                            label = {"Longueur des barres"}
+                            defaultValue = {state.width}
+                            onChange = {({value})=>{
+                                setState({...state,width:value});
+                            }}
+                        />
+                    </View>
+                    <View {...cellProps}>
+                        <Switch
+                            label = {"Afficher la valeur"}
+                            defaultValue = {state.displayValue}
+                            onChange = {({value})=>{
+                                setState({...state,displayValue:value});
+                            }}
+                        />
+                    </View>
+                    <View {...cellProps}>
+                        <SimpleSelect
+                            inputProps = {inputProps}
+                            items ={[{code:"bold",label:"Gras"},{code:"bold italic",label:"Gras, Italic"},{code:"italic",label:"Italic"}]}
+                            label = {"Police de texte"}
+                            defaultValue = {state.fontOptions}
+                            itemValue = {({item,index})=>item.code}
+                            renderItem = {({item,index})=>item.label}
+                            onChange = {({value})=>{
+                                if(value === state.fontOptions) return;
+                                setState({...state,fontOptions:value});
+                            }}
+                         /> 
+                    </View>
+                    <View {...cellProps}>
+                        <SimpleSelect
+                            inputProps = {inputProps}
+                            items ={[{code:"left",label:"A gauche"},{code:"center",label:"Au centre"},{code:"right",label:"A droite"}]}
+                            label = {"Aligner le texte"}
+                            defaultValue = {state.textAlign}
+                            itemValue = {({item,index})=>item.code}
+                            renderItem = {({item,index})=>item.label}
+                            onChange = {({value})=>{
+                                if(value === state.textAlign) return;
+                                setState({...state,textAlign:value});
+                            }}
+                         /> 
+                    </View>
+                    <View {...cellProps}>
+                        <SimpleSelect
+                            inputProps = {inputProps}
+                            items ={[{code:"top",label:"En haut"},{code:"bottom",label:"En bas"}]}
+                            label = {"Postion du texte"}
+                            defaultValue = {state.textPosition}
+                            itemValue = {({item,index})=>item.code}
+                            renderItem = {({item,index})=>item.label}
+                            onChange = {({value})=>{
+                                if(value === state.textPosition) return;
+                                setState({...state,textPosition:value});
+                            }}
+                         /> 
+                    </View>
+                    <View {...cellProps}>
+                        <TextField
+                            {...inputProps}
+                            type ="number"
+                            label = {"Police du texte"}
+                            defaultValue = {state.fontSize}
+                            onChange = {({value})=>{
+                                if(state.fontSize === value) return;
+                                setState({...state,fontSize:value});
+                            }}
+                        />
+                    </View>
+                    <View {...cellProps}>
+                        <Color
+                            {...inputProps}
+                            label = {"Couleur de texte|ligne"}
+                            defaultValue = {state.lineColor}
+                            onChange = {({value})=>{
+                                if(state.lineColor === value) return;
+                                setState({...state,lineColor:value});
+                            }}
+                        />
+                    </View>
+                    <View {...cellProps}>
+                        <Color
+                            {...inputProps}
+                            label = {"Couleur d'arrière plan"}
+                            defaultValue = {state.background}
+                            onChange = {({value})=>{
+                                if(state.background === value) return;
+                                setState({...state,background:value});
+                            }}
+                        />
+                    </View>
+                    <View {...cellProps}>
+                        <TextField
+                            {...inputProps}
+                            type ="number"
+                            label = {"Espace entre texte de code barre"}
+                            tooltip = {"Spécifiez l'espace entre le texte et le code barre généré"}
+                            defaultValue = {state.textMargin}
+                            onChange = {({value})=>{
+                                if(state.textMargin === value) return;
+                                setState({...state,textMargin:value});
+                            }}
+                        />
+                    </View>
+                    {marginKeys.map((m)=>{
+                        const ml = m.toLowerCase();
+                        const label = ml.includes("top")? "Haut" : ml.includes("bottom") ?  "Bas" : ml.includes("right") ? "Droite" : "Gauche";
+                        return <TextField
+                            {...inputProps}
+                            key = {m}
+                            type ="number"
+                            label = {`Marge ${label}`}
+                            title = {`Spécifiez l'espace laissé en ${label} après le code barre`}
+                            defaultValue = {state.fontSize}
+                            onChange = {({value})=>{
+                                if(state[m] === value) return;
+                                setState({...state,[m]:value});
+                            }}
+                        />
+                    })}
+                </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]}>
+                    <Generator
+                        {...state}
+                        displayValue = {!!state.displayValue}
+                        autoConvertToDataURL = {false}
+                        onConvertToDataURL = {(dataURL)=>{
+                            console.log(dataURL,"converting to dataurl");
+                        }}
+                        ref = {useMergeRefs(ref,innerRef)}
+                    />
+                </View>
+            </View>
+        </View>
+    </Surface>
+});
+
+export const barcodeSetingsFields = {
+    sessionName : PropTypes.string,
+    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,
+    onChange : PropTypes.func,
+}
+
+BarcodeDesigner.displayName = "BarcodeDesigner";
+
+BarcodeDesigner.propTypes = {
+    ...Generator.propTypes,
+}
+
+export default BarcodeDesigner;

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

@@ -1,22 +1,31 @@
-import {forwardRef,useRef,useEffect} from "$react";
+import React,{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)=>{
+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)=>{
     testID = defaultStr(testID,"RN_GeneratorWebSVG");
     const idRef = useRef(defaultStr(id,uniqid("bar-code-generator-web")));
+    const error = React.isValidElement(errorText)? errorText : null;
+    if(error){
+        displayValue = false;
+    }
     useEffect(()=>{
         const element = document.querySelector(`#${idRef.current}`);
         if(!element) return;
-        JsBarcode(`#${idRef.current}`).init();
-        if(typeof onReady ==="function"){
-            setTimeout(()=>{
-                onReady();
-            },50);
+        if(!error){
+            try {
+                JsBarcode(`#${idRef.current}`).init();
+                if(typeof onReady ==="function"){
+                    setTimeout(()=>{
+                        onReady();
+                    },50);
+                }
+            } catch(e){
+            }
         }
-    },[value,format,id,testID,width,height,displayValue,flat,text,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight])
+    },[value,error,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=>{
@@ -24,6 +33,7 @@ const BarcodeGeneratorComponent = forwardRef(({value,format,id,testID,onReady,te
             jsProps[`jsbarcode-${key.toLowerCase()}`] = String(supportedProps[key]);
         }
     });
+    if(error) return error;
     return <svg {...jsProps} id={`${idRef.current}`} ref={ref} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
 });
 

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

@@ -1,13 +1,14 @@
 import React,{forwardRef,useEffect} from "$react";
 import Svg, { Path } from 'react-native-svg';
 import Label from "$ecomponents/Label";
-import {defaultStr,defaultNumber} from "$cutils";
+import {defaultStr} 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)=>{
+const BarcodeGeneratorComponent = forwardRef(({width,height,lineColor,errorText,bars,value,onReady,format,id,testID,text,flat,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,margin,marginTop,marginBottom,marginLeft,marginRight,containerProps},ref)=>{
     testID = defaultStr(testID,"RNBarCodeGeneratorComponent");
     const child = React.isValidElement(text,true)? text : displayValue !== false && value || null;
+    const error = React.isValidElement(errorText)? errorText : null;
     const {style,svgStyle,displayChildOnTop} = prepareOptions({textPosition,fontOptions,fontSize,textMargin,textAlign,margin,marginLeft,marginRight,marginTop,marginBottom});
     const children = child? <Label
         testID = {`${testID}_Label`}
@@ -19,16 +20,17 @@ const BarcodeGeneratorComponent = forwardRef(({width,height,lineColor,bars,value
         }
     },[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 
+    return <View ref = {ref} id={id} testID={testID+"_Container"} {...containerProps} style={[{alignSelf:"center"},theme.Colors.isValid(background) && {backgroundColor:background},containerProps.style]}>
+        {!error && displayChildOnTop ? chilren : null}
+        {!error ? <Svg 
             testID={testID}
             height={height} width={width} fill={lineColor}
             style = {svgStyle}
           >
             <Path d={bars.join(' ')} />
-        </Svg>
-        {!displayChildOnTop ? children : null}
+        </Svg> : null}
+        {!error && !displayChildOnTop ? children : null}
+        {error}
     </View>
 });
 

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

@@ -8,6 +8,7 @@ import {isMobileNative} from "$cplatform";
 import { defaultBarcodeFormat,barcodeFormats,jsbarcodePropTypes,prepareOptions } from './utils';
 import { captureRef } from '$expo-ui/view-shot';
 import Base64 from "$base64";
+import Label from "$ecomponents/Label";
 
 export * from "./utils";
 
@@ -24,7 +25,7 @@ const BarcodeGenerator = forwardRef(({
   autoConvertToDataURL,
   onConvertToDataURL,
   maxWidth,
-  backgroundColor,
+  background,
   dataURLOptions,
   id,
   ...rest
@@ -36,7 +37,7 @@ const BarcodeGenerator = forwardRef(({
   const setReady = ()=> isReadyRef.current = true;
    const style = theme.flattenStyle(cStyle);
    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';
+  background = theme.Colors.isValid(background) ? background :  style.backgroundColor = theme.Colors.isValid(style.backgroundColor)? style.backgroundColor : '#ffffff';
   lineColor = theme.Colors.isValid(lineColor)? lineColor : '#000000';
   if(!isNonNullString(format)){
     format = defaultBarcodeFormat;
@@ -90,8 +91,11 @@ const BarcodeGenerator = forwardRef(({
 
   
 
-  const { bars, barCodeWidth } = useMemo(() => {
+  const { bars, barCodeWidth,error } = useMemo(() => {
     try {
+      if(!value){
+        throw new Error(`Valeur du code barre invalide!!\n Merci de spécifier une valeur non nulle`)
+      }
       const encoded = encode({value,width,height,format,lineColor,maxWidth});
       if(!encoded){
         throw new Error(`code barre ${value} invalide pour le format sélectionné ${format}`);
@@ -99,23 +103,22 @@ const BarcodeGenerator = forwardRef(({
       const barCodeWidth = encoded.data.length * width;
       return {
         bars: drawSvgBarCode(encoded),
+        error : false,
         barCodeWidth:
           typeof maxWidth === 'number' && barCodeWidth > maxWidth
             ? maxWidth
             : barCodeWidth,
       };
     } catch (error) {
-      if (__DEV__) {
-        console.error(error.message);
-      }
       if (onError) {
         onError(error);
       }
+      return {
+        bars: [],
+        barCodeWidth: 0,
+        error,
+      };
     }
-    return {
-      bars: [],
-      barCodeWidth: 0,
-    };
   }, [value, width, height, format, lineColor, maxWidth]);
   useEffect(()=>{
     if(autoConvertToDataURL === true){
@@ -135,7 +138,6 @@ const BarcodeGenerator = forwardRef(({
               }
               return resolve(r);
           } catch (e){
-              console.log(e," isdddddd");
           }   
         }
       }
@@ -166,13 +168,17 @@ const BarcodeGenerator = forwardRef(({
   React.setRef(ref,toDataURL);
   return (<Generator
     {...rest}
+    errorText = {error ? <Label style={{textAlign:'center'}} error fontSize={15} textBold>
+    {error?.toString()}
+  </Label>: null}
     id = {idRef.current}
     onReady = {setReady}
     value = {value}
     bars = {bars}
     format = {format}
+    error = {error}
     testID = {testID}
-    background = {backgroundColor}
+    background = {background}
     width = {isMobileNative()?barCodeWidth:width}
     height = {height}
     lineColor = {lineColor}
@@ -195,11 +201,11 @@ 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;
+  const text = defaultStr(options.value,options.text);
   format = defaultStr(format,options.format);
   if(!isNonNullString(text)) return null;
-  if(!isNonNullString(format) || !barcodeFormats[format]){
+  if(!isNonNullString(format) || !barcodeFormats.includes(format)){
     format = defaultBarcodeFormat
   }
   try {
@@ -213,13 +219,13 @@ export const encode = (options,format)=>{
       return null;
     }
     return encoder.encode();
-  } catch{
+  } catch (e){
     return null;
   }
 }
 
 BarcodeGenerator.propTypes = {
-  value: PropTypes.string.isRequired,
+  value: PropTypes.string,
   ...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

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

@@ -7,7 +7,7 @@ export const barcodeFormats = Object.keys(barcodes);
 export const defaultBarcodeFormat = 'CODE128';
 
 export const jsbarcodePropTypes = {
-    value : PropTypes.string.isRequired,
+    value : PropTypes.string,
     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,
@@ -27,6 +27,7 @@ export const jsbarcodePropTypes = {
     marginBottom : PropTypes.number,
     marginLeft : PropTypes.number,
     marginRight : PropTypes.number,
+    errorText : PropTypes.node,
     valid : PropTypes.func,//function(valid){}	
 }
 
@@ -35,7 +36,7 @@ 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);
+    textMargin = typeof textMargin =="number"? textMargin : 2;
     const style = {
         fontSize:defaultNumber(fontSize,20),
         textAlign : ["center","left","right"].includes(textAlign)  && textAlign ||"center",
@@ -50,10 +51,10 @@ export const prepareOptions = ({textPosition,fontOptions,fontSize,textMargin,tex
     if(displayChildOnTop){
         style.marginBottom = textMargin;
     } else style.marginTop = textMargin;
-    margin = defaultNumber(margin,10);
+    margin = typeof margin =='number' ? margin : 10;
     const svgStyle = {};
     Object.map({marginTop,marginBottom,marginLeft,marginRight},(v,i)=>{
-        svgStyle[i] = defaultNumber(v,margin);
+        svgStyle[i] = typeof v =='number'? v : margin;
     });
     return {
         displayChildOnTop,

package/src/components/Barcode/index.js

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

package/src/components/Expandable/index.js

@@ -26,6 +26,7 @@ const ExpandableComponent = React.forwardRef(({
   onLongPress,
   expanded: expandedProp,
   expandedIcon,
+  defaultExpanded,
   expandIconProps,
   unexpandedIcon,
   leftProps,
@@ -57,7 +58,7 @@ const ExpandableComponent = React.forwardRef(({
   expandIconPosition = defaultStr(expandIconPosition,"right").toLowerCase().trim();
   const isIconPositionLeft = expandIconPosition =='left'? true : false;
   const isControlled = typeof expandedProp =='boolean'? true : false;
-  const [expanded, setExpanded] = React.useState(isControlled ? expandedProp : false);
+  const [expanded, setExpanded] = React.useState(isControlled ? expandedProp : !!defaultExpanded);
   const handlePressAction = (e) => {
     onPress?.({...React.getOnPressArgs(e),expanded:!expanded,checked:!expanded});
     if (!isControlled) {