@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 +111 -111
- package/src/components/Barcode/Designer/index.js +36 -11
- package/src/components/Barcode/Generator/Generator.js +10 -15
- package/src/components/Barcode/Generator/Generator.native.js +1 -1
- package/src/components/Barcode/Generator/index.js +45 -78
- package/src/components/Barcode/Generator/utils.js +39 -1
- package/src/components/Barcode/index.js +3 -0
- package/src/components/Barcode/utils.js +55 -0
- package/src/components/Barcode/utils.native.js +5 -0
- package/src/pdf/index.js +7 -7
- package/src/view-shot/index.js +0 -11
package/package.json
CHANGED
@@ -1,111 +1,111 @@
|
|
1
|
-
{
|
2
|
-
"name": "@fto-consult/expo-ui",
|
3
|
-
"version": "8.
|
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
|
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)
|
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,
|
68
|
-
<Expandable defaultExpanded title={<
|
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
|
-
|
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}
|
22
|
+
JsBarcode(`#${idRef.current}`,value,supportedProps);
|
20
23
|
if(typeof onReady ==="function"){
|
21
|
-
|
22
|
-
onReady();
|
23
|
-
},50);
|
24
|
+
onReady();
|
24
25
|
}
|
25
|
-
} catch(e){
|
26
|
-
}
|
26
|
+
} catch(e){}
|
27
27
|
}
|
28
|
-
},[value,error,format,
|
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 <
|
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
|
-
|
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,
|
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
|
132
|
-
if(
|
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
|
-
|
135
|
-
|
136
|
-
|
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
|
-
|
162
|
-
|
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 = {
|
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 = {
|
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
|
+
}
|
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({
|
package/src/view-shot/index.js
CHANGED
@@ -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
|
});
|