@fto-consult/expo-ui 8.8.2 → 8.8.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +1 -1
- package/src/components/Barcode/Designer/index.js +281 -0
- package/src/components/Barcode/Generator/Generator.js +18 -8
- package/src/components/Barcode/Generator/Generator.native.js +9 -7
- package/src/components/Barcode/Generator/index.js +22 -16
- package/src/components/Barcode/Generator/utils.js +5 -4
- package/src/components/Barcode/index.js +4 -1
- package/src/components/Expandable/index.js +2 -1
package/package.json
CHANGED
@@ -0,0 +1,281 @@
|
|
1
|
+
import {useRef,useState,forwardRef,useMergeRefs,useEffect,useMemo} from "$react";
|
2
|
+
import Generator from "../Generator";
|
3
|
+
import PropTypes from "prop-types";
|
4
|
+
import View from "$ecomponents/View";
|
5
|
+
import { barcodeFormats,defaultBarcodeFormat } from "../Generator/utils";
|
6
|
+
import SimpleSelect from "$ecomponents/SimpleSelect";
|
7
|
+
import { isNonNullString,defaultStr,defaultNumber,defaultObj } from "$cutils";
|
8
|
+
import notify from "$cnotify";
|
9
|
+
import TextField from "$ecomponents/TextField";
|
10
|
+
import theme from "$theme";
|
11
|
+
import Surface from "$ecomponents/Surface";
|
12
|
+
import Dimensions from "$cdimensions";
|
13
|
+
import Divider from "$ecomponents/Divider";
|
14
|
+
import Label from "$ecomponents/Label";
|
15
|
+
import Switch from "$ecomponents/Switch";
|
16
|
+
import Icon from "$ecomponents/Icon";
|
17
|
+
import Color from "$ecomponents/Color";
|
18
|
+
import Expandable from "$ecomponents/Expandable";
|
19
|
+
import session from "$session";
|
20
|
+
const sessionKey = "appDesigner-sess"
|
21
|
+
|
22
|
+
const fontOptionsKeys = ["bold","italic","bold italic"];
|
23
|
+
const alignments = ["left","center","right"];
|
24
|
+
|
25
|
+
const BarcodeDesigner = forwardRef(({
|
26
|
+
format,testID,onReady,text,value,flat,width,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight,
|
27
|
+
sessionName,
|
28
|
+
...rest
|
29
|
+
},ref)=>{
|
30
|
+
testID = defaultStr(testID,'RNBarcodeDesigner');
|
31
|
+
const sKey = sessionName ? `${sessionKey}-${sessionName}` : null;
|
32
|
+
const getSession = x=> !isNonNullString(sessionName)? {} : defaultObj(session.get(sKey));
|
33
|
+
const sData = getSession();
|
34
|
+
Dimensions.useWindowDimensions();
|
35
|
+
const innerRef = useRef(null);
|
36
|
+
const sFormat = !isNonNullString(format) || !barcodeFormats.includes(format) ? isNonNullString(sData.format) && barcodeFormats.includes(sData.format) ? sData.format : defaultBarcodeFormat : format;
|
37
|
+
const sHeight = defaultNumber(height,sData.height,100), sWidth = defaultNumber(width,sData.w100,2), sDisplayValue = typeof displayValue =='boolean'? displayValue :sData.displayValue !== undefined ? sData.displayValue:true;
|
38
|
+
const sFontOptions = isNonNullString(fontOptions) && fontOptionsKeys.includes(fontOptions) ? fontOptions : isNonNullString(sData.fontOptions) ? fontOptionsKeys.includes(sData?.fontOptions) : "bold";
|
39
|
+
const sTextAlign = isNonNullString(textAlign) && alignments.includes(textAlign)? textAlign : isNonNullString(sData.textAlign) && alignments.includes(sData.textAlign)? sData.textAlign : "center";
|
40
|
+
const sTextPosition = isNonNullString(textPosition) && ["top","bottom"].includes(textPosition) ? textPosition : isNonNullString(sData.textPosition) && ["top","bottom"].includes(sData.textPosition) ? sData.textPosition : "bottom";
|
41
|
+
const sFontSize = typeof fontSize ==='number'? fontSize : typeof sData.fontSize ==='number'? sData.fontSize : 20;
|
42
|
+
const sLineColor = theme.Colors.isValid(lineColor)? lineColor : theme.Colors.isValid(sData.lineColor)? sData?.linceColor:"#000000";
|
43
|
+
const sBackground = theme.Colors.isValid(background)? background : theme.Colors.isValid(sData.background)? sData.background : "#ffffff";
|
44
|
+
const sTextMargin = typeof textMargin =='number'? textMargin : typeof sData.textMargin =='number'? sData.textMargin : 2;
|
45
|
+
const sMargins = {};
|
46
|
+
Object.map({marginTop,marginBottom,marginLeft,marginRight},(val,k)=>{
|
47
|
+
sMargins[k] = typeof v =='number'? v : typeof sData[k] == null ? sData[k] : 10;
|
48
|
+
});
|
49
|
+
const marginKeys = Object.keys(sMargins);
|
50
|
+
const [state,setState] = useState({
|
51
|
+
format : sFormat,height:sHeight,width : sWidth,value,displayValue :sDisplayValue,fontOptions : sFontOptions,textAlign:sTextAlign,
|
52
|
+
textPosition : sTextPosition,fontSize : sFontSize,lineColor:sLineColor,background:sBackground,textMargin:sTextMargin,...sMargins
|
53
|
+
});
|
54
|
+
useEffect(()=>{
|
55
|
+
if(sessionName){
|
56
|
+
session.set(sKey,state);
|
57
|
+
}
|
58
|
+
},[state]);
|
59
|
+
const isMobile = Dimensions.isMobileMedia(),isTablet= Dimensions.isTabletMedia(),isDesktop= Dimensions.isDesktopMedia();
|
60
|
+
const cellProps = {}
|
61
|
+
const inputProps = {mode:"flat",style:{width:"100%"},containerProps:{style:[]}}
|
62
|
+
return <Surface {...rest} testID={testID} style={[theme.styles.w100,theme.styles.p2,rest.style]}>
|
63
|
+
<View testID={testID+"SurfaceContent"} style={[isMobile || isTablet && {flexDirection:"column"},{justifyContent:"flex-start",alignItems:"flex-start"},isDesktop && {flexDirection:"row"}]}>
|
64
|
+
<View elevation={isDesktop?5:0} testID={`${testID}_SettingsContainer`} style={[{paddingHorizontal:5},isDesktop? {width:400,marginRight:10,borderRightColor:theme.colors.divider,borderRightWidth:1}:{width:"100%"}]}>
|
65
|
+
{false && isDesktop ? <View testID={`${testID}_DesignerOptions`} style={[theme.styles.w100]}>
|
66
|
+
<Label primary textBold fontSize={15} children={"Options du Designer"}/>
|
67
|
+
<Divider style={[theme.styles.w100,{marginTop:5}]}/>
|
68
|
+
</View>:null}
|
69
|
+
<Expandable defaultExpanded title={<Label primary textBold fontSize={15} children={"Options du Designer"}/>}>
|
70
|
+
<View {...cellProps}>
|
71
|
+
<TextField
|
72
|
+
{...inputProps}
|
73
|
+
label = {"Valeur de test"}
|
74
|
+
defaultValue = {value}
|
75
|
+
onChange = {({value})=>{
|
76
|
+
if(value){
|
77
|
+
setState({...state,value});
|
78
|
+
}
|
79
|
+
}}
|
80
|
+
/>
|
81
|
+
</View>
|
82
|
+
<View {...cellProps}>
|
83
|
+
<SimpleSelect
|
84
|
+
inputProps = {inputProps}
|
85
|
+
items ={barcodeFormats}
|
86
|
+
label = {"Format du code"}
|
87
|
+
defaultValue = {state.format}
|
88
|
+
itemValue = {({item,index})=>item}
|
89
|
+
renderItem = {({item,index})=>item}
|
90
|
+
onChange = {({value})=>{
|
91
|
+
if(!value) return notify.error("Merci de sélectionner un format");
|
92
|
+
if(value === state.format) return;
|
93
|
+
setState({...state,format:value});
|
94
|
+
}}
|
95
|
+
/>
|
96
|
+
</View>
|
97
|
+
<View {...cellProps}>
|
98
|
+
<TextField
|
99
|
+
{...inputProps}
|
100
|
+
label = {"Hauteur de la barre"}
|
101
|
+
type ="number"
|
102
|
+
defaultValue = {state.height}
|
103
|
+
onChange = {({value})=>{
|
104
|
+
setState({...state,height:value});
|
105
|
+
}}
|
106
|
+
/>
|
107
|
+
</View>
|
108
|
+
<View {...cellProps}>
|
109
|
+
<TextField
|
110
|
+
{...inputProps}
|
111
|
+
type ="number"
|
112
|
+
label = {"Longueur de la barre"}
|
113
|
+
defaultValue = {state.width}
|
114
|
+
onChange = {({value})=>{
|
115
|
+
setState({...state,width:value});
|
116
|
+
}}
|
117
|
+
/>
|
118
|
+
</View>
|
119
|
+
<View {...cellProps}>
|
120
|
+
<Switch
|
121
|
+
label = {"Afficher la valeur"}
|
122
|
+
defaultValue = {state.displayValue}
|
123
|
+
onChange = {({value})=>{
|
124
|
+
setState({...state,displayValue:value});
|
125
|
+
}}
|
126
|
+
/>
|
127
|
+
</View>
|
128
|
+
<View {...cellProps}>
|
129
|
+
<SimpleSelect
|
130
|
+
inputProps = {inputProps}
|
131
|
+
items ={[{code:"bold",label:"Gras"},{code:"bold italic",label:"Gras, Italic"},{code:"italic",label:"Italic"}]}
|
132
|
+
label = {"Police de texte"}
|
133
|
+
defaultValue = {state.fontOptions}
|
134
|
+
itemValue = {({item,index})=>item.code}
|
135
|
+
renderItem = {({item,index})=>item.label}
|
136
|
+
onChange = {({value})=>{
|
137
|
+
if(value === state.fontOptions) return;
|
138
|
+
setState({...state,fontOptions:value});
|
139
|
+
}}
|
140
|
+
/>
|
141
|
+
</View>
|
142
|
+
<View {...cellProps}>
|
143
|
+
<SimpleSelect
|
144
|
+
inputProps = {inputProps}
|
145
|
+
items ={[{code:"left",label:"A gauche"},{code:"center",label:"Au centre"},{code:"right",label:"A droite"}]}
|
146
|
+
label = {"Aligner le texte"}
|
147
|
+
defaultValue = {state.textAlign}
|
148
|
+
itemValue = {({item,index})=>item.code}
|
149
|
+
renderItem = {({item,index})=>item.label}
|
150
|
+
onChange = {({value})=>{
|
151
|
+
if(value === state.textAlign) return;
|
152
|
+
setState({...state,textAlign:value});
|
153
|
+
}}
|
154
|
+
/>
|
155
|
+
</View>
|
156
|
+
<View {...cellProps}>
|
157
|
+
<SimpleSelect
|
158
|
+
inputProps = {inputProps}
|
159
|
+
items ={[{code:"top",label:"En haut"},{code:"bottom",label:"En bas"}]}
|
160
|
+
label = {"Postion du texte"}
|
161
|
+
defaultValue = {state.textPosition}
|
162
|
+
itemValue = {({item,index})=>item.code}
|
163
|
+
renderItem = {({item,index})=>item.label}
|
164
|
+
onChange = {({value})=>{
|
165
|
+
if(value === state.textPosition) return;
|
166
|
+
setState({...state,textPosition:value});
|
167
|
+
}}
|
168
|
+
/>
|
169
|
+
</View>
|
170
|
+
<View {...cellProps}>
|
171
|
+
<TextField
|
172
|
+
{...inputProps}
|
173
|
+
type ="number"
|
174
|
+
label = {"Police du texte"}
|
175
|
+
defaultValue = {state.fontSize}
|
176
|
+
onChange = {({value})=>{
|
177
|
+
if(state.fontSize === value) return;
|
178
|
+
setState({...state,fontSize:value});
|
179
|
+
}}
|
180
|
+
/>
|
181
|
+
</View>
|
182
|
+
<View {...cellProps}>
|
183
|
+
<Color
|
184
|
+
{...inputProps}
|
185
|
+
label = {"Couleur de texte|ligne"}
|
186
|
+
defaultValue = {state.lineColor}
|
187
|
+
onChange = {({value})=>{
|
188
|
+
if(state.lineColor === value) return;
|
189
|
+
setState({...state,lineColor:value});
|
190
|
+
}}
|
191
|
+
/>
|
192
|
+
</View>
|
193
|
+
<View {...cellProps}>
|
194
|
+
<Color
|
195
|
+
{...inputProps}
|
196
|
+
label = {"Couleur d'arrière plan"}
|
197
|
+
defaultValue = {state.background}
|
198
|
+
onChange = {({value})=>{
|
199
|
+
if(state.background === value) return;
|
200
|
+
setState({...state,background:value});
|
201
|
+
}}
|
202
|
+
/>
|
203
|
+
</View>
|
204
|
+
<View {...cellProps}>
|
205
|
+
<TextField
|
206
|
+
{...inputProps}
|
207
|
+
type ="number"
|
208
|
+
label = {"Espace entre texte de code barre"}
|
209
|
+
tooltip = {"Spécifiez l'espace entre le texte et le code barre généré"}
|
210
|
+
defaultValue = {state.textMargin}
|
211
|
+
onChange = {({value})=>{
|
212
|
+
if(state.textMargin === value) return;
|
213
|
+
setState({...state,textMargin:value});
|
214
|
+
}}
|
215
|
+
/>
|
216
|
+
</View>
|
217
|
+
{marginKeys.map((m)=>{
|
218
|
+
const ml = m.toLowerCase();
|
219
|
+
const label = ml.includes("top")? "Haut" : ml.includes("bottom") ? "Bas" : ml.includes("right") ? "Droite" : "Gauche";
|
220
|
+
return <TextField
|
221
|
+
{...inputProps}
|
222
|
+
key = {m}
|
223
|
+
type ="number"
|
224
|
+
label = {`Marge ${label}`}
|
225
|
+
title = {`Spécifiez l'espace laissé en ${label} après le code barre`}
|
226
|
+
defaultValue = {state.fontSize}
|
227
|
+
onChange = {({value})=>{
|
228
|
+
if(state[m] === value) return;
|
229
|
+
setState({...state,[m]:value});
|
230
|
+
}}
|
231
|
+
/>
|
232
|
+
})}
|
233
|
+
</Expandable>
|
234
|
+
</View>
|
235
|
+
<View testID={`${testID}_DesignerContainer`} style={[!isDesktop && {width:"100%"},{flexDirection:"column"},theme.styles.p1]}>
|
236
|
+
<View testID={testID+"_DesignerContent"} style={[theme.styles.w100,theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>
|
237
|
+
<Generator
|
238
|
+
{...state}
|
239
|
+
displayValue = {!!state.displayValue}
|
240
|
+
autoConvertToDataURL = {false}
|
241
|
+
onConvertToDataURL = {(dataURL)=>{
|
242
|
+
console.log(dataURL,"converting to dataurl");
|
243
|
+
}}
|
244
|
+
ref = {useMergeRefs(ref,innerRef)}
|
245
|
+
/>
|
246
|
+
</View>
|
247
|
+
</View>
|
248
|
+
</View>
|
249
|
+
</Surface>
|
250
|
+
});
|
251
|
+
|
252
|
+
export const barcodeSetingsFields = {
|
253
|
+
sessionName : PropTypes.string,
|
254
|
+
format : PropTypes.oneOf(barcodeFormats),
|
255
|
+
width : PropTypes.number, //The width option is the width of a single bar., default : 2
|
256
|
+
height : PropTypes.number,//The height of the barcode., default 100,
|
257
|
+
text : PropTypes.string, //Overide the text that is diplayed
|
258
|
+
displayValue : PropTypes.bool,
|
259
|
+
fontOptions : PropTypes.string,//With fontOptions you can add bold or italic text to the barcode.
|
260
|
+
font : PropTypes.string,
|
261
|
+
textAlign : PropTypes.oneOf(["center","left","right"]), //Set the horizontal alignment of the text. Can be left / center / right.
|
262
|
+
textPosition : PropTypes.oneOf(["bottom","top"]),//Set the vertical position of the text. Can be bottom / top., default bottom
|
263
|
+
textMargin : PropTypes.number,//default : 2, Set the space between the barcode and the text.
|
264
|
+
fontSize : PropTypes.number,//Set the size of the text., default : 20,
|
265
|
+
flat : PropTypes.bool, //Only for EAN8/EAN13
|
266
|
+
background : PropTypes.string,//Set the background of the barcode., default #ffffff
|
267
|
+
lineColor: PropTypes.string,//Set the color of the bars and the text., default #000000
|
268
|
+
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.
|
269
|
+
marginTop : PropTypes.number,
|
270
|
+
marginBottom : PropTypes.number,
|
271
|
+
marginLeft : PropTypes.number,
|
272
|
+
marginRight : PropTypes.number,
|
273
|
+
}
|
274
|
+
|
275
|
+
BarcodeDesigner.displayName = "BarcodeDesigner";
|
276
|
+
|
277
|
+
BarcodeDesigner.propTypes = {
|
278
|
+
...Generator.propTypes,
|
279
|
+
}
|
280
|
+
|
281
|
+
export default BarcodeDesigner;
|
@@ -1,22 +1,31 @@
|
|
1
|
-
import {forwardRef,useRef,useEffect} from "$react";
|
1
|
+
import React,{forwardRef,useRef,useEffect} from "$react";
|
2
2
|
import {uniqid,defaultStr} from "$cutils";
|
3
3
|
import JsBarcode from "jsbarcode";
|
4
4
|
import {jsbarcodePropTypes } from "./utils";
|
5
5
|
|
6
6
|
///@see : https://lindell.me/JsBarcode/
|
7
|
-
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)=>{
|
7
|
+
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)=>{
|
8
8
|
testID = defaultStr(testID,"RN_GeneratorWebSVG");
|
9
9
|
const idRef = useRef(defaultStr(id,uniqid("bar-code-generator-web")));
|
10
|
+
const error = React.isValidElement(errorText)? errorText : null;
|
11
|
+
if(error){
|
12
|
+
displayValue = false;
|
13
|
+
}
|
10
14
|
useEffect(()=>{
|
11
15
|
const element = document.querySelector(`#${idRef.current}`);
|
12
16
|
if(!element) return;
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
onReady
|
17
|
-
|
17
|
+
if(!error){
|
18
|
+
try {
|
19
|
+
JsBarcode(`#${idRef.current}`).init();
|
20
|
+
if(typeof onReady ==="function"){
|
21
|
+
setTimeout(()=>{
|
22
|
+
onReady();
|
23
|
+
},50);
|
24
|
+
}
|
25
|
+
} catch(e){
|
26
|
+
}
|
18
27
|
}
|
19
|
-
},[value,format,id,testID,width,height,displayValue,flat,text,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight])
|
28
|
+
},[value,error,format,id,testID,width,height,displayValue,flat,text,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight])
|
20
29
|
const jsProps = {};
|
21
30
|
const supportedProps = {value,format,width,flat,text,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight};
|
22
31
|
Object.keys(supportedProps).map(key=>{
|
@@ -24,6 +33,7 @@ const BarcodeGeneratorComponent = forwardRef(({value,format,id,testID,onReady,te
|
|
24
33
|
jsProps[`jsbarcode-${key.toLowerCase()}`] = String(supportedProps[key]);
|
25
34
|
}
|
26
35
|
});
|
36
|
+
if(error) return error;
|
27
37
|
return <svg {...jsProps} id={`${idRef.current}`} ref={ref} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
|
28
38
|
});
|
29
39
|
|
@@ -1,13 +1,14 @@
|
|
1
1
|
import React,{forwardRef,useEffect} from "$react";
|
2
2
|
import Svg, { Path } from 'react-native-svg';
|
3
3
|
import Label from "$ecomponents/Label";
|
4
|
-
import {defaultStr
|
4
|
+
import {defaultStr} from "$cutils";
|
5
5
|
import theme from "$theme";
|
6
6
|
import View from "$ecomponents/View";
|
7
7
|
import { prepareOptions } from "./utils";
|
8
|
-
const BarcodeGeneratorComponent = forwardRef(({width,height,lineColor,bars,value,onReady,format,id,testID,text,flat,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,
|
8
|
+
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)=>{
|
9
9
|
testID = defaultStr(testID,"RNBarCodeGeneratorComponent");
|
10
10
|
const child = React.isValidElement(text,true)? text : displayValue !== false && value || null;
|
11
|
+
const error = React.isValidElement(errorText)? errorText : null;
|
11
12
|
const {style,svgStyle,displayChildOnTop} = prepareOptions({textPosition,fontOptions,fontSize,textMargin,textAlign,margin,marginLeft,marginRight,marginTop,marginBottom});
|
12
13
|
const children = child? <Label
|
13
14
|
testID = {`${testID}_Label`}
|
@@ -19,16 +20,17 @@ const BarcodeGeneratorComponent = forwardRef(({width,height,lineColor,bars,value
|
|
19
20
|
}
|
20
21
|
},[width,height,lineColor,bars,value,format,id,testID,text,flat,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,backgroun,margin,marginTop,marginBottom,marginLeft,marginRight])
|
21
22
|
containerProps = Object.assign({},containerProps);
|
22
|
-
return <View ref = {ref} id={id} testID={testID+"_Container"} {...containerProps} style={[{alignSelf:"center"},containerProps.style]}>
|
23
|
-
{displayChildOnTop ? chilren : null}
|
24
|
-
<Svg
|
23
|
+
return <View ref = {ref} id={id} testID={testID+"_Container"} {...containerProps} style={[{alignSelf:"center"},theme.Colors.isValid(background) && {backgroundColor:background},containerProps.style]}>
|
24
|
+
{!error && displayChildOnTop ? chilren : null}
|
25
|
+
{!error ? <Svg
|
25
26
|
testID={testID}
|
26
27
|
height={height} width={width} fill={lineColor}
|
27
28
|
style = {svgStyle}
|
28
29
|
>
|
29
30
|
<Path d={bars.join(' ')} />
|
30
|
-
</Svg>
|
31
|
-
{!displayChildOnTop ? children : null}
|
31
|
+
</Svg> : null}
|
32
|
+
{!error && !displayChildOnTop ? children : null}
|
33
|
+
{error}
|
32
34
|
</View>
|
33
35
|
});
|
34
36
|
|
@@ -8,6 +8,7 @@ import {isMobileNative} from "$cplatform";
|
|
8
8
|
import { defaultBarcodeFormat,barcodeFormats,jsbarcodePropTypes,prepareOptions } from './utils';
|
9
9
|
import { captureRef } from '$expo-ui/view-shot';
|
10
10
|
import Base64 from "$base64";
|
11
|
+
import Label from "$ecomponents/Label";
|
11
12
|
|
12
13
|
export * from "./utils";
|
13
14
|
|
@@ -24,7 +25,7 @@ const BarcodeGenerator = forwardRef(({
|
|
24
25
|
autoConvertToDataURL,
|
25
26
|
onConvertToDataURL,
|
26
27
|
maxWidth,
|
27
|
-
|
28
|
+
background,
|
28
29
|
dataURLOptions,
|
29
30
|
id,
|
30
31
|
...rest
|
@@ -36,7 +37,7 @@ const BarcodeGenerator = forwardRef(({
|
|
36
37
|
const setReady = ()=> isReadyRef.current = true;
|
37
38
|
const style = theme.flattenStyle(cStyle);
|
38
39
|
const idRef = useRef(defaultStr(id,uniqid("bar-code-generator-web")));
|
39
|
-
|
40
|
+
background = theme.Colors.isValid(background) ? background : style.backgroundColor = theme.Colors.isValid(style.backgroundColor)? style.backgroundColor : '#ffffff';
|
40
41
|
lineColor = theme.Colors.isValid(lineColor)? lineColor : '#000000';
|
41
42
|
if(!isNonNullString(format)){
|
42
43
|
format = defaultBarcodeFormat;
|
@@ -90,8 +91,11 @@ const BarcodeGenerator = forwardRef(({
|
|
90
91
|
|
91
92
|
|
92
93
|
|
93
|
-
const { bars, barCodeWidth } = useMemo(() => {
|
94
|
+
const { bars, barCodeWidth,error } = useMemo(() => {
|
94
95
|
try {
|
96
|
+
if(!value){
|
97
|
+
throw new Error(`Valeur du code barre invalide!!\n Merci de spécifier une valeur non nulle`)
|
98
|
+
}
|
95
99
|
const encoded = encode({value,width,height,format,lineColor,maxWidth});
|
96
100
|
if(!encoded){
|
97
101
|
throw new Error(`code barre ${value} invalide pour le format sélectionné ${format}`);
|
@@ -99,23 +103,22 @@ const BarcodeGenerator = forwardRef(({
|
|
99
103
|
const barCodeWidth = encoded.data.length * width;
|
100
104
|
return {
|
101
105
|
bars: drawSvgBarCode(encoded),
|
106
|
+
error : false,
|
102
107
|
barCodeWidth:
|
103
108
|
typeof maxWidth === 'number' && barCodeWidth > maxWidth
|
104
109
|
? maxWidth
|
105
110
|
: barCodeWidth,
|
106
111
|
};
|
107
112
|
} catch (error) {
|
108
|
-
if (__DEV__) {
|
109
|
-
console.error(error.message);
|
110
|
-
}
|
111
113
|
if (onError) {
|
112
114
|
onError(error);
|
113
115
|
}
|
116
|
+
return {
|
117
|
+
bars: [],
|
118
|
+
barCodeWidth: 0,
|
119
|
+
error,
|
120
|
+
};
|
114
121
|
}
|
115
|
-
return {
|
116
|
-
bars: [],
|
117
|
-
barCodeWidth: 0,
|
118
|
-
};
|
119
122
|
}, [value, width, height, format, lineColor, maxWidth]);
|
120
123
|
useEffect(()=>{
|
121
124
|
if(autoConvertToDataURL === true){
|
@@ -135,7 +138,6 @@ const BarcodeGenerator = forwardRef(({
|
|
135
138
|
}
|
136
139
|
return resolve(r);
|
137
140
|
} catch (e){
|
138
|
-
console.log(e," isdddddd");
|
139
141
|
}
|
140
142
|
}
|
141
143
|
}
|
@@ -166,13 +168,17 @@ const BarcodeGenerator = forwardRef(({
|
|
166
168
|
React.setRef(ref,toDataURL);
|
167
169
|
return (<Generator
|
168
170
|
{...rest}
|
171
|
+
errorText = {error ? <Label style={{textAlign:'center'}} error fontSize={15} textBold>
|
172
|
+
{error?.toString()}
|
173
|
+
</Label>: null}
|
169
174
|
id = {idRef.current}
|
170
175
|
onReady = {setReady}
|
171
176
|
value = {value}
|
172
177
|
bars = {bars}
|
173
178
|
format = {format}
|
179
|
+
error = {error}
|
174
180
|
testID = {testID}
|
175
|
-
background = {
|
181
|
+
background = {background}
|
176
182
|
width = {isMobileNative()?barCodeWidth:width}
|
177
183
|
height = {height}
|
178
184
|
lineColor = {lineColor}
|
@@ -195,11 +201,11 @@ export const encode = (options,format)=>{
|
|
195
201
|
if(isNonNullString(options)){
|
196
202
|
options = {text:options};
|
197
203
|
} else options = defaultObj(options);
|
198
|
-
const text = defaultStr(options.value,options.text);
|
199
204
|
const {text:cText,value:cValue,format:cFormat,...rest} = options;
|
205
|
+
const text = defaultStr(options.value,options.text);
|
200
206
|
format = defaultStr(format,options.format);
|
201
207
|
if(!isNonNullString(text)) return null;
|
202
|
-
if(!isNonNullString(format) || !barcodeFormats
|
208
|
+
if(!isNonNullString(format) || !barcodeFormats.includes(format)){
|
203
209
|
format = defaultBarcodeFormat
|
204
210
|
}
|
205
211
|
try {
|
@@ -213,13 +219,13 @@ export const encode = (options,format)=>{
|
|
213
219
|
return null;
|
214
220
|
}
|
215
221
|
return encoder.encode();
|
216
|
-
} catch{
|
222
|
+
} catch (e){
|
217
223
|
return null;
|
218
224
|
}
|
219
225
|
}
|
220
226
|
|
221
227
|
BarcodeGenerator.propTypes = {
|
222
|
-
value: PropTypes.string
|
228
|
+
value: PropTypes.string,
|
223
229
|
...jsbarcodePropTypes,
|
224
230
|
dataURLOptions : PropTypes.object,//les options à utiliser pour la convertion en data url
|
225
231
|
onConvertToDataURL : PropTypes.func,//lorsque la valeur est converti au format data url
|
@@ -7,7 +7,7 @@ export const barcodeFormats = Object.keys(barcodes);
|
|
7
7
|
export const defaultBarcodeFormat = 'CODE128';
|
8
8
|
|
9
9
|
export const jsbarcodePropTypes = {
|
10
|
-
value : PropTypes.string
|
10
|
+
value : PropTypes.string,
|
11
11
|
format : PropTypes.oneOf(barcodeFormats),
|
12
12
|
width : PropTypes.number, //The width option is the width of a single bar., default : 2
|
13
13
|
height : PropTypes.number,//The height of the barcode., default 100,
|
@@ -27,6 +27,7 @@ export const jsbarcodePropTypes = {
|
|
27
27
|
marginBottom : PropTypes.number,
|
28
28
|
marginLeft : PropTypes.number,
|
29
29
|
marginRight : PropTypes.number,
|
30
|
+
errorText : PropTypes.node,
|
30
31
|
valid : PropTypes.func,//function(valid){}
|
31
32
|
}
|
32
33
|
|
@@ -35,7 +36,7 @@ export const JSBarcodePropTypes = jsbarcodePropTypes;
|
|
35
36
|
export const prepareOptions = ({textPosition,fontOptions,fontSize,textMargin,textAlign,margin,marginLeft,marginRight,marginTop,marginBottom})=>{
|
36
37
|
const displayChildOnTop = defaultStr(textPosition,"bottom").toLowerCase().trim() ==="top";
|
37
38
|
fontOptions = defaultStr(fontOptions,"bold").toLowerCase();
|
38
|
-
textMargin =
|
39
|
+
textMargin = typeof textMargin =="number"? textMargin : 2;
|
39
40
|
const style = {
|
40
41
|
fontSize:defaultNumber(fontSize,20),
|
41
42
|
textAlign : ["center","left","right"].includes(textAlign) && textAlign ||"center",
|
@@ -50,10 +51,10 @@ export const prepareOptions = ({textPosition,fontOptions,fontSize,textMargin,tex
|
|
50
51
|
if(displayChildOnTop){
|
51
52
|
style.marginBottom = textMargin;
|
52
53
|
} else style.marginTop = textMargin;
|
53
|
-
margin =
|
54
|
+
margin = typeof margin =='number' ? margin : 10;
|
54
55
|
const svgStyle = {};
|
55
56
|
Object.map({marginTop,marginBottom,marginLeft,marginRight},(v,i)=>{
|
56
|
-
svgStyle[i] =
|
57
|
+
svgStyle[i] = typeof v =='number'? v : margin;
|
57
58
|
});
|
58
59
|
return {
|
59
60
|
displayChildOnTop,
|
@@ -1,10 +1,13 @@
|
|
1
1
|
import {default as Scanner} from "./Scanner";
|
2
2
|
import {default as Generator} from "./Generator";
|
3
|
+
import {default as Designer} from "./Designer";
|
3
4
|
export * from "./Scanner";
|
4
5
|
export * from "./Generator";
|
6
|
+
export * from "./Designer";
|
5
7
|
|
6
8
|
Scanner.Generator = Generator;
|
9
|
+
Scanner.Designer = Designer;
|
7
10
|
|
8
11
|
export default Scanner;
|
9
12
|
|
10
|
-
export {Generator,Scanner};
|
13
|
+
export {Generator,Scanner,Designer};
|
@@ -26,6 +26,7 @@ const ExpandableComponent = React.forwardRef(({
|
|
26
26
|
onLongPress,
|
27
27
|
expanded: expandedProp,
|
28
28
|
expandedIcon,
|
29
|
+
defaultExpanded,
|
29
30
|
expandIconProps,
|
30
31
|
unexpandedIcon,
|
31
32
|
leftProps,
|
@@ -57,7 +58,7 @@ const ExpandableComponent = React.forwardRef(({
|
|
57
58
|
expandIconPosition = defaultStr(expandIconPosition,"right").toLowerCase().trim();
|
58
59
|
const isIconPositionLeft = expandIconPosition =='left'? true : false;
|
59
60
|
const isControlled = typeof expandedProp =='boolean'? true : false;
|
60
|
-
const [expanded, setExpanded] = React.useState(isControlled ? expandedProp :
|
61
|
+
const [expanded, setExpanded] = React.useState(isControlled ? expandedProp : !!defaultExpanded);
|
61
62
|
const handlePressAction = (e) => {
|
62
63
|
onPress?.({...React.getOnPressArgs(e),expanded:!expanded,checked:!expanded});
|
63
64
|
if (!isControlled) {
|