@fto-consult/expo-ui 8.9.0 → 8.10.0

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 CHANGED
@@ -1,111 +1,111 @@
1
- {
2
- "name": "@fto-consult/expo-ui",
3
- "version": "8.9.0",
4
- "description": "Bibliothèque de composants UI Expo,react-native",
5
- "scripts": {
6
- "clear-npx-cache": "npx clear-npx-cache",
7
- "publish1": "npm publish --access=public",
8
- "unpublish": "npm -f unpublish @fto-consult/expo-ui",
9
- "build-web": "",
10
- "start": "npx expo start --dev --no-minify",
11
- "start-d": "npx expo start -c --no-dev --no-minify",
12
- "start-p": "npm run start-d",
13
- "start-no-minify": "npx expo start --no-dev --minify",
14
- "start-no-dev": "npx expo start --no-dev --minify",
15
- "expo-start-client": "npx expo start --dev --no-minify --dev-client",
16
- "start-m": "npx expo start - c--dev--no -minify",
17
- "android": "npx expo start --android -c",
18
- "ios": "npx expo start --ios",
19
- "web": "npx expo start --web",
20
- "web-c": "npx expo start --web -c",
21
- "eject": "expo eject",
22
- "emulator": "npm run android-emulator",
23
- "web-server": "npx serve web-build",
24
- "build-android": "eas build --clear-cache -p android --profile preview",
25
- "build-android-local": "eas build --platform android --local",
26
- "build-android-dist": "eas build --clear-cache -p android",
27
- "build-ios": "eas build --clear-cache -p ios --profile preview",
28
- "build-ios-dist": "eas build --clear-cache -p ios",
29
- "install-apk": "adb -s emulator-5554 install myapp.apk",
30
- "android-emulator": "emulator -avd EMULATOR",
31
- "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
32
- "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
33
- "compile-electron": "webpack --env platform=electron",
34
- "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
35
- "electron": "electron ./electron",
36
- "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
37
- "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
38
- "electron-c": "npm run compile-electron && npm run electron",
39
- "electron-p": "npm run compile-electron-p && npm run electron",
40
- "update-app-version": "node ./update-app-version.js",
41
- "find-licenses": "node ./find-licenses.js",
42
- "fix-dependencies": "expo-cli doctor --fix-dependencies",
43
- "expo-fix": "npx expo install --fix",
44
- "update-apexchart": "node ./bin/update-appex-chart.js",
45
- "test-bin": "node ./bin/index.js",
46
- "update-appexchart": "npm run update-apexchart",
47
- "delete-node-modules": "rimraf ./**/node_modules",
48
- "dev": "npx expo start --no-dev --minify -c",
49
- "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
50
- "update-app": "expo @emotion/native@latest react-native-big-list@latest @pchmn/expo-material3-theme@latest @emotion/native@latest @react-navigation/stack react-native-blob-util @react-navigation/native@latest @react-navigation/native-stack@latest && npx expo install --fix",
51
- "update": "npm i @fto-consult/node-utils@latest apexcharts@latest file-saver@latest google-libphonenumber@latest @fto-consult/common@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@5 react-native-paper-dates@latest react-virtuoso@latest tippy.js@latest websql@latest xlsx@latest react-native-web@latest react-dom@latest react-native-get-random-values@latest && npm run update-apexchart && npm run find-licenses"
52
- },
53
- "bin": {
54
- "expo-ui": "./bin/index.js"
55
- },
56
- "repository": {
57
- "type": "git",
58
- "url": "git+https://github.com/borispipo/expo-ui.git"
59
- },
60
- "keywords": [
61
- "Expo",
62
- "React-Native"
63
- ],
64
- "author": "Boris Fouomene",
65
- "license": "ISC",
66
- "bugs": {
67
- "url": "https://github.com/borispipo/expo-ui/issues"
68
- },
69
- "homepage": "https://github.com/borispipo/expo-ui#readme",
70
- "dependencies": {
71
- "@emotion/react": "^11.11.1",
72
- "@faker-js/faker": "^8.0.2",
73
- "@fto-consult/common": "^4.11.2",
74
- "@fto-consult/node-utils": "^1.4.7",
75
- "apexcharts": "^3.45.2",
76
- "commander": "^11.1.0",
77
- "crypto-browserify": "^3.12.0",
78
- "file-saver": "^2.0.5",
79
- "google-libphonenumber": "^3.2.34",
80
- "html2canvas": "^1.4.1",
81
- "htmlparser2-without-node-native": "^3.9.2",
82
- "is-plain-obj": "^4.1.0",
83
- "js-base64": "^3.7.5",
84
- "jsbarcode": "^3.11.6",
85
- "prop-types": "^15.8.1",
86
- "react": "^18.2.0",
87
- "react-content-loader": "^6.2.1",
88
- "react-dom": "^18.2.0",
89
- "react-native-get-random-values": "^1.10.0",
90
- "react-native-iphone-x-helper": "^1.3.1",
91
- "react-native-mime-types": "^2.4.0",
92
- "react-native-paper": "^5.12.1",
93
- "react-native-paper-dates": "^0.21.7",
94
- "react-native-web": "^0.19.10",
95
- "react-virtuoso": "^4.6.2",
96
- "readable-stream": "^4.5.2",
97
- "sanitize-filename": "^1.6.3",
98
- "sharp-cli": "^2.1.0",
99
- "stream-browserify": "^3.0.0",
100
- "tippy.js": "^6.3.7",
101
- "websql": "^2.0.3",
102
- "xlsx": "^0.18.5"
103
- },
104
- "devDependencies": {
105
- "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
106
- "@expo/metro-config": "~0.17.1",
107
- "@expo/webpack-config": "^19.0.1",
108
- "babel-plugin-inline-dotenv": "^1.7.0",
109
- "babel-plugin-module-resolver": "^5.0.0"
110
- }
111
- }
1
+ {
2
+ "name": "@fto-consult/expo-ui",
3
+ "version": "8.10.0",
4
+ "description": "Bibliothèque de composants UI Expo,react-native",
5
+ "scripts": {
6
+ "clear-npx-cache": "npx clear-npx-cache",
7
+ "publish1": "npm publish --access=public",
8
+ "unpublish": "npm -f unpublish @fto-consult/expo-ui",
9
+ "build-web": "",
10
+ "start": "npx expo start --dev --no-minify",
11
+ "start-d": "npx expo start -c --no-dev --no-minify",
12
+ "start-p": "npm run start-d",
13
+ "start-no-minify": "npx expo start --no-dev --minify",
14
+ "start-no-dev": "npx expo start --no-dev --minify",
15
+ "expo-start-client": "npx expo start --dev --no-minify --dev-client",
16
+ "start-m": "npx expo start - c--dev--no -minify",
17
+ "android": "npx expo start --android -c",
18
+ "ios": "npx expo start --ios",
19
+ "web": "npx expo start --web",
20
+ "web-c": "npx expo start --web -c",
21
+ "eject": "expo eject",
22
+ "emulator": "npm run android-emulator",
23
+ "web-server": "npx serve web-build",
24
+ "build-android": "eas build --clear-cache -p android --profile preview",
25
+ "build-android-local": "eas build --platform android --local",
26
+ "build-android-dist": "eas build --clear-cache -p android",
27
+ "build-ios": "eas build --clear-cache -p ios --profile preview",
28
+ "build-ios-dist": "eas build --clear-cache -p ios",
29
+ "install-apk": "adb -s emulator-5554 install myapp.apk",
30
+ "android-emulator": "emulator -avd EMULATOR",
31
+ "flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
32
+ "test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
33
+ "compile-electron": "webpack --env platform=electron",
34
+ "compile-electron-p": "webpack --config ./electron/webpack.config.js --mode=production",
35
+ "electron": "electron ./electron",
36
+ "logcat": "adb -d logcat com.ftc.apps.salite1:E > errors.txt",
37
+ "logcat-export": "adb -d logcat com.ftc.apps.salite1 *:S > logcat.txt",
38
+ "electron-c": "npm run compile-electron && npm run electron",
39
+ "electron-p": "npm run compile-electron-p && npm run electron",
40
+ "update-app-version": "node ./update-app-version.js",
41
+ "find-licenses": "node ./find-licenses.js",
42
+ "fix-dependencies": "expo-cli doctor --fix-dependencies",
43
+ "expo-fix": "npx expo install --fix",
44
+ "update-apexchart": "node ./bin/update-appex-chart.js",
45
+ "test-bin": "node ./bin/index.js",
46
+ "update-appexchart": "npm run update-apexchart",
47
+ "delete-node-modules": "rimraf ./**/node_modules",
48
+ "dev": "npx expo start --no-dev --minify -c",
49
+ "modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
50
+ "update-app": "expo @emotion/native@latest react-native-big-list@latest @pchmn/expo-material3-theme@latest @emotion/native@latest @react-navigation/stack react-native-blob-util @react-navigation/native@latest @react-navigation/native-stack@latest && npx expo install --fix",
51
+ "update": "npm i @fto-consult/node-utils@latest apexcharts@latest file-saver@latest google-libphonenumber@latest @fto-consult/common@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@5 react-native-paper-dates@latest react-virtuoso@latest tippy.js@latest websql@latest xlsx@latest react-native-web@latest react-dom@latest react-native-get-random-values@latest && npm run update-apexchart && npm run find-licenses"
52
+ },
53
+ "bin": {
54
+ "expo-ui": "./bin/index.js"
55
+ },
56
+ "repository": {
57
+ "type": "git",
58
+ "url": "git+https://github.com/borispipo/expo-ui.git"
59
+ },
60
+ "keywords": [
61
+ "Expo",
62
+ "React-Native"
63
+ ],
64
+ "author": "Boris Fouomene",
65
+ "license": "ISC",
66
+ "bugs": {
67
+ "url": "https://github.com/borispipo/expo-ui/issues"
68
+ },
69
+ "homepage": "https://github.com/borispipo/expo-ui#readme",
70
+ "dependencies": {
71
+ "@emotion/react": "^11.11.1",
72
+ "@faker-js/faker": "^8.0.2",
73
+ "@fto-consult/common": "^4.11.2",
74
+ "@fto-consult/node-utils": "^1.4.7",
75
+ "apexcharts": "^3.45.2",
76
+ "commander": "^11.1.0",
77
+ "crypto-browserify": "^3.12.0",
78
+ "file-saver": "^2.0.5",
79
+ "google-libphonenumber": "^3.2.34",
80
+ "html2canvas": "^1.4.1",
81
+ "htmlparser2-without-node-native": "^3.9.2",
82
+ "is-plain-obj": "^4.1.0",
83
+ "js-base64": "^3.7.5",
84
+ "jsbarcode": "^3.11.6",
85
+ "prop-types": "^15.8.1",
86
+ "react": "^18.2.0",
87
+ "react-content-loader": "^6.2.1",
88
+ "react-dom": "^18.2.0",
89
+ "react-native-get-random-values": "^1.10.0",
90
+ "react-native-iphone-x-helper": "^1.3.1",
91
+ "react-native-mime-types": "^2.4.0",
92
+ "react-native-paper": "^5.12.1",
93
+ "react-native-paper-dates": "^0.21.7",
94
+ "react-native-web": "^0.19.10",
95
+ "react-virtuoso": "^4.6.2",
96
+ "readable-stream": "^4.5.2",
97
+ "sanitize-filename": "^1.6.3",
98
+ "sharp-cli": "^2.1.0",
99
+ "stream-browserify": "^3.0.0",
100
+ "tippy.js": "^6.3.7",
101
+ "websql": "^2.0.3",
102
+ "xlsx": "^0.18.5"
103
+ },
104
+ "devDependencies": {
105
+ "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
106
+ "@expo/metro-config": "~0.17.1",
107
+ "@expo/webpack-config": "^19.0.1",
108
+ "babel-plugin-inline-dotenv": "^1.7.0",
109
+ "babel-plugin-module-resolver": "^5.0.0"
110
+ }
111
+ }
@@ -1,4 +1,4 @@
1
- import {useRef,useState,forwardRef,useMergeRefs,useEffect,useMemo} from "$react";
1
+ import React,{useRef,useState,forwardRef,useMergeRefs,useEffect,useMemo} from "$react";
2
2
  import Generator from "../Generator";
3
3
  import PropTypes from "prop-types";
4
4
  import View from "$ecomponents/View";
@@ -18,6 +18,7 @@ import Color from "$ecomponents/Color";
18
18
  import Expandable from "$ecomponents/Expandable";
19
19
  import session from "$session";
20
20
  const sessionKey = "appDesigner-sess"
21
+ import { encode } from "../Generator/utils";
21
22
 
22
23
  const fontOptionsKeys = ["bold","italic","bold italic"];
23
24
  const alignments = ["left","center","right"];
@@ -25,30 +26,35 @@ const alignments = ["left","center","right"];
25
26
  const BarcodeDesigner = forwardRef(({
26
27
  format,testID,onReady,text,value,flat,onChange,width,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight,
27
28
  sessionName,
29
+ bottomContent,
30
+ leftContent,
31
+ rightContent,
32
+ topContent,
33
+ saveAction,
28
34
  ...rest
29
35
  },ref)=>{
30
36
  testID = defaultStr(testID,'RNBarcodeDesigner');
31
37
  const sKey = sessionName ? `${sessionKey}-${sessionName}` : null;
32
- const getSession = x=> !isNonNullString(sessionName)? {} : defaultObj(session.get(sKey));
33
- const sData = getSession();
38
+ const sData = !isNonNullString(sessionName)? {} : defaultObj(session.get(sKey));
34
39
  Dimensions.useWindowDimensions();
35
40
  const innerRef = useRef(null);
36
41
  const sFormat = !isNonNullString(format) || !barcodeFormats.includes(format) ? isNonNullString(sData.format) && barcodeFormats.includes(sData.format) ? sData.format : defaultBarcodeFormat : format;
37
42
  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";
43
+ const sFontOptions = isNonNullString(fontOptions) && fontOptionsKeys.includes(fontOptions) ? fontOptions : isNonNullString(sData.fontOptions) && fontOptionsKeys.includes(sData?.fontOptions) ? sData.fontOptions : "bold";
39
44
  const sTextAlign = isNonNullString(textAlign) && alignments.includes(textAlign)? textAlign : isNonNullString(sData.textAlign) && alignments.includes(sData.textAlign)? sData.textAlign : "center";
40
45
  const sTextPosition = isNonNullString(textPosition) && ["top","bottom"].includes(textPosition) ? textPosition : isNonNullString(sData.textPosition) && ["top","bottom"].includes(sData.textPosition) ? sData.textPosition : "bottom";
41
46
  const sFontSize = typeof fontSize ==='number'? fontSize : typeof sData.fontSize ==='number'? sData.fontSize : 20;
42
47
  const sLineColor = theme.Colors.isValid(lineColor)? lineColor : theme.Colors.isValid(sData.lineColor)? sData?.linceColor:"#000000";
43
48
  const sBackground = theme.Colors.isValid(background)? background : theme.Colors.isValid(sData.background)? sData.background : "#ffffff";
44
49
  const sTextMargin = typeof textMargin =='number'? textMargin : typeof sData.textMargin =='number'? sData.textMargin : 2;
50
+ const sValue = isNonNullString(value)? value : isNonNullString(sData.value)? sData.value : "";
45
51
  const sMargins = {};
46
52
  Object.map({marginTop,marginBottom,marginLeft,marginRight},(val,k)=>{
47
53
  sMargins[k] = typeof v =='number'? v : typeof sData[k] == null ? sData[k] : 10;
48
54
  });
49
55
  const marginKeys = Object.keys(sMargins);
50
56
  const [state,setState] = useState({
51
- format : sFormat,height:sHeight,width : sWidth,value,displayValue :sDisplayValue,fontOptions : sFontOptions,textAlign:sTextAlign,
57
+ format : sFormat,height:sHeight,width : sWidth,value:sValue,displayValue :sDisplayValue,fontOptions : sFontOptions,textAlign:sTextAlign,
52
58
  textPosition : sTextPosition,fontSize : sFontSize,lineColor:sLineColor,background:sBackground,textMargin:sTextMargin,...sMargins
53
59
  });
54
60
  useEffect(()=>{
@@ -59,18 +65,28 @@ const BarcodeDesigner = forwardRef(({
59
65
  onChange({data:state,state,setState});
60
66
  }
61
67
  },[state]);
68
+ const isValid = encode(state)!==null;
69
+ const args = {state,setState,sessionName,isValid,isMobile,isTablet,isDesktop,getState:()=>state,getData:()=>state};
70
+ leftContent = typeof leftContent =='function'? leftContent(args) : leftContent;
71
+ rightContent = typeof rightContent =='function'? rightContent(args) : rightContent;
72
+ bottomContent = typeof bottomContent =='function'? bottomContent(args) : bottomContent;
73
+ topContent = typeof topContent =='function'? topContent(args) : topContent;
74
+ saveAction = typeof saveAction =='function'? saveAction(args) : saveAction;
62
75
  const isMobile = Dimensions.isMobileMedia(),isTablet= Dimensions.isTabletMedia(),isDesktop= Dimensions.isDesktopMedia();
63
76
  const cellProps = {}
64
- const inputProps = {mode:"flat",style:{width:"100%"},containerProps:{style:[]}}
77
+ const inputProps = {mode:"flat",affix:false,style:{width:"100%",paddingLeft:10},labelProps:{style:{paddingLeft:10}},containerProps:{style:[]}}
65
78
  return <Surface {...rest} testID={testID} style={[theme.styles.w100,theme.styles.p2,rest.style]}>
66
79
  <View testID={testID+"SurfaceContent"} style={[isMobile || isTablet && {flexDirection:"column"},{justifyContent:"flex-start",alignItems:"flex-start"},isDesktop && {flexDirection:"row"}]}>
67
- <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%"}]}>
68
- <Expandable defaultExpanded title={<Label primary textBold fontSize={15} children={"Options du Designer"}/>}>
80
+ <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%"}]}>
81
+ <Expandable defaultExpanded title={<View style={[theme.styles.row,theme.styles.flexWrap,theme.styles.alignItemsCenter,theme.styles.justifyContentSpaceBetween]}>
82
+ <Label primary textBold fontSize={15} children={"Options du Designer"}/>
83
+ {React.isValidElement(saveAction)? saveAction : null}
84
+ </View>}>
69
85
  <View {...cellProps}>
70
86
  <TextField
71
87
  {...inputProps}
72
88
  label = {"Valeur de test"}
73
- defaultValue = {value}
89
+ defaultValue = {state.value}
74
90
  onChange = {({value})=>{
75
91
  setState({...state,value});
76
92
  }}
@@ -230,7 +246,9 @@ const BarcodeDesigner = forwardRef(({
230
246
  </Expandable>
231
247
  </View>
232
248
  <View testID={`${testID}_DesignerContainer`} style={[!isDesktop && {width:"100%"},{flexDirection:"column"},theme.styles.p1]}>
233
- <View testID={testID+"_DesignerContent"} style={[theme.styles.w100,theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexStart]}>
249
+ {React.isValidElement(topContent)? topContent : null}
250
+ <View testID={testID+"_DesignerContent"} style={[theme.styles.w100,theme.styles.row,theme.styles.justifyContentFlexStart,theme.styles.alignItemsFlexCenter]}>
251
+ {React.isValidElement(leftContent)? leftContent : null}
234
252
  <Generator
235
253
  {...state}
236
254
  displayValue = {!!state.displayValue}
@@ -240,12 +258,14 @@ const BarcodeDesigner = forwardRef(({
240
258
  }}
241
259
  ref = {useMergeRefs(ref,innerRef)}
242
260
  />
261
+ {React.isValidElement(rightContent) ?rightContent : null}
243
262
  </View>
263
+ {React.isValidElement(bottomContent) ? bottomContent : null}
244
264
  </View>
245
265
  </View>
246
266
  </Surface>
247
267
  });
248
-
268
+ const contentType = PropTypes.oneOfType([PropTypes.func,PropTypes.node]);
249
269
  export const barcodeSetingsFields = {
250
270
  sessionName : PropTypes.string,
251
271
  format : PropTypes.oneOf(barcodeFormats),
@@ -268,6 +288,11 @@ export const barcodeSetingsFields = {
268
288
  marginLeft : PropTypes.number,
269
289
  marginRight : PropTypes.number,
270
290
  onChange : PropTypes.func,
291
+ topContent : contentType, //le contenu de l'élément à rendre en haut du Générateur
292
+ bottomContent : contentType,//le contenu de l'élément à rendre en haut du content
293
+ leftContent : contentType,
294
+ saveAction : contentType,
295
+ rightContent : contentType, //le contenu à render à droite du générateur
271
296
  }
272
297
 
273
298
  BarcodeDesigner.displayName = "BarcodeDesigner";
@@ -2,39 +2,34 @@ 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
+ import View from "$ecomponents/View";
5
6
 
6
7
  ///@see : https://lindell.me/JsBarcode/
7
8
  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
9
  testID = defaultStr(testID,"RN_GeneratorWebSVG");
9
10
  const idRef = useRef(defaultStr(id,uniqid("bar-code-generator-web")));
11
+ const innerRef = useRef(null);
10
12
  const error = React.isValidElement(errorText)? errorText : null;
11
13
  if(error){
12
14
  displayValue = false;
13
15
  }
16
+ const supportedProps = {format,width,flat,text,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight};
14
17
  useEffect(()=>{
15
18
  const element = document.querySelector(`#${idRef.current}`);
16
19
  if(!element) return;
17
20
  if(!error){
18
21
  try {
19
- JsBarcode(`#${idRef.current}`).init();
22
+ JsBarcode(`#${idRef.current}`,value,supportedProps);
20
23
  if(typeof onReady ==="function"){
21
- setTimeout(()=>{
22
- onReady();
23
- },50);
24
+ onReady();
24
25
  }
25
- } catch(e){
26
- }
26
+ } catch(e){}
27
27
  }
28
- },[value,error,format,id,testID,width,height,displayValue,flat,text,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight])
29
- const jsProps = {};
30
- const supportedProps = {value,format,width,flat,text,height,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight};
31
- Object.keys(supportedProps).map(key=>{
32
- if(supportedProps[key] !== undefined){
33
- jsProps[`jsbarcode-${key.toLowerCase()}`] = String(supportedProps[key]);
34
- }
35
- });
28
+ },[value,error,format,width,height,displayValue,flat,text,fontOptions,font,textAlign,textPosition,textMargin,fontSize,background,lineColor,margin,marginTop,marginBottom,marginLeft,marginRight])
36
29
  if(error) return error;
37
- return <svg {...jsProps} id={`${idRef.current}`} ref={ref} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
30
+ return <View style={[{alignSelf:'center'}]} ref={ref}>
31
+ <canvas id={`${idRef.current}`} data-test-id={`${testID}`} className="bar-code-generator-svg"/>
32
+ </View>
38
33
  });
39
34
 
40
35
  BarcodeGeneratorComponent.displayName = "BarcodeGeneratorComponent";
@@ -16,7 +16,7 @@ const BarcodeGeneratorComponent = forwardRef(({width,height,lineColor,errorText,
16
16
  >{child}</Label> : null;
17
17
  useEffect(()=>{
18
18
  if(typeof onReady =='function'){
19
- setTimeout(onReady,50);
19
+ onReady();
20
20
  }
21
21
  },[width,height,lineColor,bars,value,format,id,testID,text,flat,displayValue,fontOptions,font,textAlign,textPosition,textMargin,fontSize,backgroun,margin,marginTop,marginBottom,marginLeft,marginRight])
22
22
  containerProps = Object.assign({},containerProps);
@@ -5,7 +5,7 @@ import theme,{StyleProp} from "$theme";
5
5
  import {defaultStr,defaultObj,isNonNullString,extendObj,uniqid,isDataURL} from "$cutils";
6
6
  import Generator from "./Generator";
7
7
  import {isMobileNative} from "$cplatform";
8
- import { defaultBarcodeFormat,barcodeFormats,jsbarcodePropTypes,prepareOptions } from './utils';
8
+ import { defaultBarcodeFormat,barcodeFormats,jsbarcodePropTypes,encode } from './utils';
9
9
  import { captureRef } from '$expo-ui/view-shot';
10
10
  import Base64 from "$base64";
11
11
  import Label from "$ecomponents/Label";
@@ -28,13 +28,12 @@ const BarcodeGenerator = forwardRef(({
28
28
  background,
29
29
  dataURLOptions,
30
30
  id,
31
+ onReady,
31
32
  ...rest
32
33
  },ref) => {
33
34
  dataURLOptions = defaultObj(dataURLOptions);
34
35
  testID = defaultStr(testID,"RNBarcodeGenerator");
35
36
  const innerRef = useRef(null);
36
- const isReadyRef = useRef(false);
37
- const setReady = ()=> isReadyRef.current = true;
38
37
  const style = theme.flattenStyle(cStyle);
39
38
  const idRef = useRef(defaultStr(id,uniqid("bar-code-generator-web")));
40
39
  background = theme.Colors.isValid(background) ? background : style.backgroundColor = theme.Colors.isValid(style.backgroundColor)? style.backgroundColor : '#ffffff';
@@ -121,58 +120,58 @@ const BarcodeGenerator = forwardRef(({
121
120
  }
122
121
  }, [value, width, height, format, lineColor, maxWidth]);
123
122
  useEffect(()=>{
124
- if(autoConvertToDataURL === true){
123
+ if(true || autoConvertToDataURL === true){
125
124
  toDataURL();
126
125
  }
127
126
  },[format,value,width,height,lineColor])
128
127
  const toDataURL = ()=>{
129
128
  return new Promise((resolve,reject)=>{
129
+ const cb2 = (x, y, width, height) => {
130
+ return captureRef(innerRef.current,extendObj({},{
131
+ quality: 1,
132
+ format: 'png',
133
+ result : "data-uri",
134
+ width,
135
+ height,
136
+ },dataURLOptions)).then((r)=>{
137
+ if(isDataURL(r) && typeof onConvertToDataURL =="function"){
138
+ onConvertToDataURL({dataURL:r});
139
+ }
140
+ resolve({dataURL:r,width,height});
141
+ }).catch((e)=>{
142
+ console.log(e," is capturing data url");
143
+ reject(e);
144
+ });
145
+ };
130
146
  if(!isMobileNative() && typeof document !=="undefined" && typeof document?.querySelector =='function'){
131
- const element = document.querySelector(`#${idRef.current}`);
132
- if(element && window?.XMLSerializer){
147
+ const canvas = document.querySelector(`#${idRef.current}`);
148
+ if(canvas){
149
+ if(typeof canvas?.toDataURL =='function'){
150
+ return resolve(canvas.toDataURL());
151
+ }
152
+ } else {
133
153
  try {
134
- const xml = new XMLSerializer().serializeToString(element);
135
- const r = 'data:image/svg+xml;base64,' + Base64.encode(xml);
136
- if(isDataURL(r) && typeof onConvertToDataURL =="function"){
137
- onConvertToDataURL(r);
138
- }
139
- return resolve(r);
140
- } catch (e){
141
- }
142
- }
143
- }
144
- return innerRef.current?.measureInWindow((x, y, width, height) => {
145
- const cb = ()=>{
146
- return captureRef(innerRef.current,extendObj({},{
147
- quality: 1,
148
- format: 'png',
149
- result : "data-uri",
150
- width,
151
- height,
152
- },dataURLOptions)).then((r)=>{
153
- if(isDataURL(r) && typeof onConvertToDataURL =="function"){
154
- onConvertToDataURL(r);
155
- }
156
- }).catch((e)=>{
157
- console.log(e," is capturing data url");
154
+ const {width,height} = canvas?.getBoundingClientRect();
155
+ return cb2(undefined,undefined,width,height);
156
+ } catch(e){
158
157
  reject(e);
159
- });
158
+ }
160
159
  }
161
- if(!isReadyRef.current){
162
- return setTimeout(cb,50);
163
- }
164
- return cb();
165
- });
166
- })
160
+ }
161
+ return innerRef.current?.measureInWindow(cb2);
162
+ });
167
163
  }
168
- React.setRef(ref,toDataURL);
169
164
  return (<Generator
170
165
  {...rest}
171
166
  errorText = {error ? <Label style={{textAlign:'center'}} error fontSize={15} textBold>
172
167
  {error?.toString()}
173
168
  </Label>: null}
174
169
  id = {idRef.current}
175
- onReady = {setReady}
170
+ onReady = {()=>{
171
+ if(typeof onReady =="function"){
172
+ return onReady({toDataURL});
173
+ }
174
+ }}
176
175
  value = {value}
177
176
  bars = {bars}
178
177
  format = {format}
@@ -182,48 +181,16 @@ const BarcodeGenerator = forwardRef(({
182
181
  width = {isMobileNative()?barCodeWidth:width}
183
182
  height = {height}
184
183
  lineColor = {lineColor}
185
- ref = {useMergeRefs(ref,innerRef)}
184
+ ref = {(el)=>{
185
+ if(el){
186
+ el.toDataURL = toDataURL;
187
+ }
188
+ innerRef.current = el;
189
+ React.setRef(ref,el);
190
+ }}
186
191
  />);
187
192
  });
188
193
 
189
- /****
190
- encode le barcode passé en paramètre
191
- @return {null|object}
192
- @param {string|object}
193
- si object alors : {
194
- value {string}, la valeur à vérifier
195
- format {string}, le code du format à vérifier
196
- }
197
- si string alors {value:{string}}, le format par défaut est le code128
198
- @param {string} format, si value est un objet alors le second paramètre peut être considéré comme le format
199
- */
200
- export const encode = (options,format)=>{
201
- if(isNonNullString(options)){
202
- options = {text:options};
203
- } else options = defaultObj(options);
204
- const {text:cText,value:cValue,format:cFormat,...rest} = options;
205
- const text = defaultStr(options.value,options.text);
206
- format = defaultStr(format,options.format);
207
- if(!isNonNullString(text)) return null;
208
- if(!isNonNullString(format) || !barcodeFormats.includes(format)){
209
- format = defaultBarcodeFormat
210
- }
211
- try {
212
- const encoder = new barcodes[format](text, {
213
- format,
214
- displayValue : true,
215
- flat: true,
216
- ...rest,
217
- });
218
- if (!encoder.valid()) {
219
- return null;
220
- }
221
- return encoder.encode();
222
- } catch (e){
223
- return null;
224
- }
225
- }
226
-
227
194
  BarcodeGenerator.propTypes = {
228
195
  value: PropTypes.string,
229
196
  ...jsbarcodePropTypes,
@@ -62,4 +62,42 @@ export const prepareOptions = ({textPosition,fontOptions,fontSize,textMargin,tex
62
62
  svgStyle,
63
63
  style,
64
64
  }
65
- }
65
+ }
66
+
67
+ /****
68
+ encode le barcode passé en paramètre
69
+ @return {null|object}
70
+ @param {string|object}
71
+ si object alors : {
72
+ value {string}, la valeur à vérifier
73
+ format {string}, le code du format à vérifier
74
+ }
75
+ si string alors {value:{string}}, le format par défaut est le code128
76
+ @param {string} format, si value est un objet alors le second paramètre peut être considéré comme le format
77
+ */
78
+ export const encode = (options,format)=>{
79
+ if(isNonNullString(options)){
80
+ options = {text:options};
81
+ } else options = defaultObj(options);
82
+ const {text:cText,value:cValue,format:cFormat,...rest} = options;
83
+ const text = defaultStr(options.value,options.text);
84
+ format = defaultStr(format,options.format);
85
+ if(!isNonNullString(text)) return null;
86
+ if(!isNonNullString(format) || !barcodeFormats.includes(format)){
87
+ format = defaultBarcodeFormat
88
+ }
89
+ try {
90
+ const encoder = new barcodes[format](text, {
91
+ format,
92
+ displayValue : true,
93
+ flat: true,
94
+ ...rest,
95
+ });
96
+ if (!encoder.valid()) {
97
+ return null;
98
+ }
99
+ return encoder.encode();
100
+ } catch (e){
101
+ return null;
102
+ }
103
+ }
@@ -1,12 +1,15 @@
1
1
  import {default as Scanner} from "./Scanner";
2
2
  import {default as Generator} from "./Generator";
3
3
  import {default as Designer} from "./Designer";
4
+ import { generate } from "./utils";
4
5
  export * from "./Scanner";
5
6
  export * from "./Generator";
6
7
  export * from "./Designer";
8
+ export * from "./utils";
7
9
 
8
10
  Scanner.Generator = Generator;
9
11
  Scanner.Designer = Designer;
12
+ Scanner.generate = generate;
10
13
 
11
14
  export default Scanner;
12
15
 
@@ -0,0 +1,55 @@
1
+
2
+ import {defaultNumber,isNonNullString} from "$cutils";
3
+ import Preloader from "$preloader";
4
+ import JsBarcode from "jsbarcode";
5
+
6
+ /*** permet de generer une liste des codes barres à partir des props passés en paramètre
7
+ */
8
+ export function generate ({startSequence,onFinish,barcodeTemplate,barcodeOptions,endSequence,generate}){
9
+ startSequence = Math.ceil(defaultNumber(startSequence,1));
10
+ endSequence = Math.ceil(defaultNumber(endSequence,startSequence+1));
11
+ if(startSequence > endSequence) {
12
+ return Promise.reject({
13
+ message : `Impossible de généner les codes barres car la séquence de début ${startSequence} est supérieure à la sequence de fin ${endSequence}`
14
+ });
15
+ }
16
+ const promises = [],data = [];;
17
+ barcodeOptions = defaultObj(barcodeOptions);
18
+ delete barcodeOptions.value;
19
+ delete barcodeOptions.text;
20
+ const length = (endSequence-startSequence)+1;
21
+ const prefix = `Génération de ${length.formatNumber()} code barres`;
22
+ Preloader.open(`${prefix}....`);
23
+ generate = typeof generate =='function'? generate : x=>undefined;
24
+ return new Promise((resolve,reject)=>{
25
+ setTimeout(()=>{
26
+ for(let sequence=startSequence;sequence<=endSequence;sequence++){
27
+ promises.push(new Promise((resolve)=>{
28
+ const canvas = document.createElement('canvas');
29
+ const b = generate({sequence,template:barcodeTemplate,barcodeTemplate});
30
+ const barcode = isNonNullString(b)? b : defaultStr(barcodeTemplate);//.replaceAll("{sequence}",sequence)
31
+ if(barcode){
32
+ Preloader.open(`${prefix} [${barcode}]...`)
33
+ try {
34
+ JsBarcode(canvas,barcode,barcodeOptions);
35
+ const dataURL = canvas.toDataURL();
36
+ const ret = {barcode,dataURL};
37
+ data.push(ret)
38
+ resolve(ret)
39
+ } catch(e){
40
+ resolve({error:e})
41
+ }
42
+ } else {
43
+ resolve({message:`Invalid barcode for sequence ${sequence}`,sequence,barcode})
44
+ }
45
+ }));
46
+ }
47
+ return Promise.all(promises).then(()=>{
48
+ resolve(data);
49
+ }).catch((e)=>{
50
+ console.log(e," generation barcode");
51
+ reject(e);
52
+ }).finally(Preloader.close);
53
+ },500);
54
+ });
55
+ }
@@ -0,0 +1,5 @@
1
+ export function generate(){
2
+ return Promise.reject({
3
+ message : `La fonction de génération des codes barre n'est pas supportée sur cette plateforme`
4
+ })
5
+ }
package/src/pdf/index.js CHANGED
@@ -55,7 +55,7 @@ export const getFields = (config)=>{
55
55
  @paramm {multiple},
56
56
  @param {object} formDataProps, les prpops à passer au DialogProvider
57
57
  */
58
- export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>{
58
+ export const getPrintSettings = ({multiple,duplicateDocOnPage,pageBreakBeforeEachDoc,sessionName,formDataProps,...rest})=>{
59
59
  formDataProps = Object.assign({},formDataProps);
60
60
  const hasSession = isNonNullString(sessionName);
61
61
  if(hasSession){
@@ -66,7 +66,7 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
66
66
  const sessionData = hasSession ? defaultObj(session.get(sessionName)) : {};
67
67
  const config = {...sessionData,...defaultObj(formDataProps.data)};
68
68
  const fields = extendObj(true,{},formDataProps.fields,{
69
- duplicateDocOnPage : {
69
+ duplicateDocOnPage : duplicateDocOnPage !== false ? {
70
70
  text :'Dupliquer le(s) document(s)',
71
71
  type : 'switch',
72
72
  defaultValue : 0,
@@ -90,8 +90,8 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
90
90
  }
91
91
  }
92
92
  }
93
- },
94
- pageBreakBeforeEachDoc : {
93
+ } : undefined,
94
+ pageBreakBeforeEachDoc : pageBreakBeforeEachDoc !==false ? {
95
95
  text :'Saut de page par document',
96
96
  type : 'switch',
97
97
  defaultValue : 1,
@@ -105,8 +105,8 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
105
105
  }
106
106
  return v;
107
107
  }
108
- },
109
- pageMarginAfterEachDoc : {
108
+ } : null,
109
+ pageMarginAfterEachDoc : duplicateDocOnPage !== false ? {
110
110
  text : "Marge après chaque document",
111
111
  tooltip : 'Spécifiez le nombre de ligne à ajouter comme marge après chaque document',
112
112
  defaultValue : 2,
@@ -121,7 +121,7 @@ export const getPrintSettings = ({multiple,sessionName,formDataProps,...rest})=>
121
121
  }
122
122
  return v;
123
123
  }
124
- },
124
+ } : undefined,
125
125
  },getFields(formDataProps.data))
126
126
  return new Promise((resolve,reject)=>{
127
127
  return DialogProvider.open({
@@ -39,18 +39,7 @@ export async function captureRef(view, options) {
39
39
  h2cOptions.y = options.y;
40
40
  }
41
41
  return html2canvas(view, h2cOptions).then((renderedCanvas)=>{
42
- if (false && options.width && options.height) {
43
- // Resize result
44
- const resizedCanvas = document.createElement('canvas');
45
- const resizedContext = resizedCanvas.getContext('2d');
46
- resizedCanvas.height = options.height;
47
- resizedCanvas.width = options.width;
48
- console.log(options.width," is dddd ",options);
49
- resizedContext.drawImage(renderedCanvas, 0, 0, resizedCanvas.width, resizedCanvas.height);
50
- renderedCanvas = resizedCanvas;
51
- }
52
42
  const dataUrl = renderedCanvas.toDataURL("image/" + options.format, options.quality);
53
- console.log(dataUrl," is ddddddddddd")
54
43
  if (options.result === "data-uri" || options.result === "tmpfile") return dataUrl;
55
44
  return dataUrl.replace(/data:image\/(\w+);base64,/, '');
56
45
  });