@fto-consult/expo-ui 1.0.11 → 1.0.12
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,96 +1,97 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "@fto-consult/expo-ui",
|
|
3
|
-
"version": "1.0.
|
|
4
|
-
"description": "Bibliothèque de composants UI Expo,react-native",
|
|
5
|
-
"main": "index.js",
|
|
6
|
-
"scripts": {
|
|
7
|
-
"publish": "npm publish --access=public",
|
|
8
|
-
"unpublish": "npm -f unpublish @fto-consult/expo-ui",
|
|
9
|
-
"build-web": "",
|
|
10
|
-
"dev": "npx expo start -c --no-minify",
|
|
11
|
-
"start": "npx expo start --dev --no-minify",
|
|
12
|
-
"start-d": "npx expo start -c --no-dev --no-minify",
|
|
13
|
-
"start-p": "npm run start-d",
|
|
14
|
-
"expo-start-client": "npx expo start --dev --no-minify --dev-client",
|
|
15
|
-
"start-m": "npx expo start - c--dev--no -minify",
|
|
16
|
-
"android": "npx expo start --android -c",
|
|
17
|
-
"ios": "npx expo start --ios",
|
|
18
|
-
"web": "npx expo start --web",
|
|
19
|
-
"web-c": "npx expo start --web -c",
|
|
20
|
-
"eject": "expo eject",
|
|
21
|
-
"emulator": "npm run android-emulator",
|
|
22
|
-
"web-server": "npx serve web-build",
|
|
23
|
-
"build-android": "eas build --clear-cache -p android --profile preview",
|
|
24
|
-
"build-android-local": "eas build --platform android --local",
|
|
25
|
-
"build-android-dist": "eas build --clear-cache -p android",
|
|
26
|
-
"build-ios": "eas build --clear-cache -p ios --profile preview",
|
|
27
|
-
"build-ios-dist": "eas build --clear-cache -p ios",
|
|
28
|
-
"install-apk": "adb -s emulator-5554 install myapp.apk",
|
|
29
|
-
"android-emulator": "emulator -avd EMULATOR",
|
|
30
|
-
"flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
|
|
31
|
-
"build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
|
|
32
|
-
"test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
|
|
33
|
-
"compile-electron": "webpack --config ./electron/webpack.config.js",
|
|
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 doctor --fix-dependencies"
|
|
43
|
-
},
|
|
44
|
-
"repository": {
|
|
45
|
-
"type": "git",
|
|
46
|
-
"url": "git+https://github.com/borispipo/expo-ui.git"
|
|
47
|
-
},
|
|
48
|
-
"keywords": [
|
|
49
|
-
"Expo",
|
|
50
|
-
"React-Native"
|
|
51
|
-
],
|
|
52
|
-
"author": "Boris Fouomene",
|
|
53
|
-
"license": "ISC",
|
|
54
|
-
"bugs": {
|
|
55
|
-
"url": "https://github.com/borispipo/expo-ui/issues"
|
|
56
|
-
},
|
|
57
|
-
"homepage": "https://github.com/borispipo/expo-ui#readme",
|
|
58
|
-
"dependencies": {
|
|
59
|
-
"@babel/preset-react": "^7.18.6",
|
|
60
|
-
"@emotion/native": "^11.10.0",
|
|
61
|
-
"@expo/metro-config": "^0.4.0",
|
|
62
|
-
"@expo/webpack-config": "^0.17.2",
|
|
63
|
-
"@fto-consult/common": "^1.0.
|
|
64
|
-
"@gorhom/portal": "^1.0.14",
|
|
65
|
-
"@react-native-async-storage/async-storage": "~1.17.3",
|
|
66
|
-
"@react-native-community/netinfo": "9.3.0",
|
|
67
|
-
"@react-navigation/native": "^6.0.13",
|
|
68
|
-
"@react-navigation/native-stack": "^6.9.1",
|
|
69
|
-
"@shopify/flash-list": "1.1.0",
|
|
70
|
-
"babel-plugin-inline-dotenv": "^1.7.0",
|
|
71
|
-
"babel-plugin-root-import": "^6.6.0",
|
|
72
|
-
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
|
|
73
|
-
"circular-dependency-plugin": "^5.2.2",
|
|
74
|
-
"dotenv": "^16.0.3",
|
|
75
|
-
"expo": "^46.0.15",
|
|
76
|
-
"expo-camera": "~12.3.0",
|
|
77
|
-
"expo-linking": "~3.2.2",
|
|
78
|
-
"expo-status-bar": "~1.4.0",
|
|
79
|
-
"expo-system-ui": "~1.3.0",
|
|
80
|
-
"expo-web-browser": "~11.0.0",
|
|
81
|
-
"google-libphonenumber": "^3.2.31",
|
|
82
|
-
"parent-package-json": "^2.0.1",
|
|
83
|
-
"prop-types": "^15.8.1",
|
|
84
|
-
"react-content-loader": "^6.2.0",
|
|
85
|
-
"react-dom": "18.0.0",
|
|
86
|
-
"react-native": "0.69.6",
|
|
87
|
-
"react-native-big-list": "^1.5.5",
|
|
88
|
-
"react-native-gesture-handler": "~2.5.0",
|
|
89
|
-
"react-native-paper": "^4.12.5",
|
|
90
|
-
"react-native-reanimated": "~2.9.1",
|
|
91
|
-
"react-native-safe-area-context": "4.3.1",
|
|
92
|
-
"react-native-svg": "12.3.0",
|
|
93
|
-
"react-native-web": "~0.18.7",
|
|
94
|
-
"
|
|
95
|
-
|
|
96
|
-
}
|
|
1
|
+
{
|
|
2
|
+
"name": "@fto-consult/expo-ui",
|
|
3
|
+
"version": "1.0.12",
|
|
4
|
+
"description": "Bibliothèque de composants UI Expo,react-native",
|
|
5
|
+
"main": "index.js",
|
|
6
|
+
"scripts": {
|
|
7
|
+
"publish": "npm publish --access=public",
|
|
8
|
+
"unpublish": "npm -f unpublish @fto-consult/expo-ui",
|
|
9
|
+
"build-web": "",
|
|
10
|
+
"dev": "npx expo start -c --no-minify",
|
|
11
|
+
"start": "npx expo start --dev --no-minify",
|
|
12
|
+
"start-d": "npx expo start -c --no-dev --no-minify",
|
|
13
|
+
"start-p": "npm run start-d",
|
|
14
|
+
"expo-start-client": "npx expo start --dev --no-minify --dev-client",
|
|
15
|
+
"start-m": "npx expo start - c--dev--no -minify",
|
|
16
|
+
"android": "npx expo start --android -c",
|
|
17
|
+
"ios": "npx expo start --ios",
|
|
18
|
+
"web": "npx expo start --web",
|
|
19
|
+
"web-c": "npx expo start --web -c",
|
|
20
|
+
"eject": "expo eject",
|
|
21
|
+
"emulator": "npm run android-emulator",
|
|
22
|
+
"web-server": "npx serve web-build",
|
|
23
|
+
"build-android": "eas build --clear-cache -p android --profile preview",
|
|
24
|
+
"build-android-local": "eas build --platform android --local",
|
|
25
|
+
"build-android-dist": "eas build --clear-cache -p android",
|
|
26
|
+
"build-ios": "eas build --clear-cache -p ios --profile preview",
|
|
27
|
+
"build-ios-dist": "eas build --clear-cache -p ios",
|
|
28
|
+
"install-apk": "adb -s emulator-5554 install myapp.apk",
|
|
29
|
+
"android-emulator": "emulator -avd EMULATOR",
|
|
30
|
+
"flipper": "npx cross-env METRO_SERVER_PORT=19000 E:\\Studies\\react-native\\debugger\\Flipper-win\\Flipper.exe",
|
|
31
|
+
"build-electron": "electron-webpack && electron-builder --dir -c.compression=store",
|
|
32
|
+
"test:build": "electron-webpack && electron-builder --dir -c.compression=store -c.mac.identity=null",
|
|
33
|
+
"compile-electron": "webpack --config ./electron/webpack.config.js",
|
|
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 doctor --fix-dependencies"
|
|
43
|
+
},
|
|
44
|
+
"repository": {
|
|
45
|
+
"type": "git",
|
|
46
|
+
"url": "git+https://github.com/borispipo/expo-ui.git"
|
|
47
|
+
},
|
|
48
|
+
"keywords": [
|
|
49
|
+
"Expo",
|
|
50
|
+
"React-Native"
|
|
51
|
+
],
|
|
52
|
+
"author": "Boris Fouomene",
|
|
53
|
+
"license": "ISC",
|
|
54
|
+
"bugs": {
|
|
55
|
+
"url": "https://github.com/borispipo/expo-ui/issues"
|
|
56
|
+
},
|
|
57
|
+
"homepage": "https://github.com/borispipo/expo-ui#readme",
|
|
58
|
+
"dependencies": {
|
|
59
|
+
"@babel/preset-react": "^7.18.6",
|
|
60
|
+
"@emotion/native": "^11.10.0",
|
|
61
|
+
"@expo/metro-config": "^0.4.0",
|
|
62
|
+
"@expo/webpack-config": "^0.17.2",
|
|
63
|
+
"@fto-consult/common": "^1.0.17",
|
|
64
|
+
"@gorhom/portal": "^1.0.14",
|
|
65
|
+
"@react-native-async-storage/async-storage": "~1.17.3",
|
|
66
|
+
"@react-native-community/netinfo": "9.3.0",
|
|
67
|
+
"@react-navigation/native": "^6.0.13",
|
|
68
|
+
"@react-navigation/native-stack": "^6.9.1",
|
|
69
|
+
"@shopify/flash-list": "1.1.0",
|
|
70
|
+
"babel-plugin-inline-dotenv": "^1.7.0",
|
|
71
|
+
"babel-plugin-root-import": "^6.6.0",
|
|
72
|
+
"babel-plugin-transform-inline-environment-variables": "^0.4.4",
|
|
73
|
+
"circular-dependency-plugin": "^5.2.2",
|
|
74
|
+
"dotenv": "^16.0.3",
|
|
75
|
+
"expo": "^46.0.15",
|
|
76
|
+
"expo-camera": "~12.3.0",
|
|
77
|
+
"expo-linking": "~3.2.2",
|
|
78
|
+
"expo-status-bar": "~1.4.0",
|
|
79
|
+
"expo-system-ui": "~1.3.0",
|
|
80
|
+
"expo-web-browser": "~11.0.0",
|
|
81
|
+
"google-libphonenumber": "^3.2.31",
|
|
82
|
+
"parent-package-json": "^2.0.1",
|
|
83
|
+
"prop-types": "^15.8.1",
|
|
84
|
+
"react-content-loader": "^6.2.0",
|
|
85
|
+
"react-dom": "18.0.0",
|
|
86
|
+
"react-native": "0.69.6",
|
|
87
|
+
"react-native-big-list": "^1.5.5",
|
|
88
|
+
"react-native-gesture-handler": "~2.5.0",
|
|
89
|
+
"react-native-paper": "^4.12.5",
|
|
90
|
+
"react-native-reanimated": "~2.9.1",
|
|
91
|
+
"react-native-safe-area-context": "4.3.1",
|
|
92
|
+
"react-native-svg": "12.3.0",
|
|
93
|
+
"react-native-web": "~0.18.7",
|
|
94
|
+
"sharp-cli": "^3.0.0",
|
|
95
|
+
"tippy.js": "^6.3.7"
|
|
96
|
+
}
|
|
97
|
+
}
|
package/src/App.js
CHANGED
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
import {isFunction,defaultArray,isNonNullString} from "$utils";
|
|
2
|
-
|
|
3
|
-
const isDialog = dialog => dialog && typeof dialog !='boolean' && dialog.getId && dialog.getId() ? true : false;
|
|
4
|
-
const dialogs = {
|
|
5
|
-
current : null, //la boîte de dialogue actuelle
|
|
6
|
-
previous : null, //la boîte de dialogue précédente,
|
|
7
|
-
all : [], //la liste des Dialogs overts,
|
|
8
|
-
/*** retourne la dernière boîte de dialogue */
|
|
9
|
-
get current (){
|
|
10
|
-
dialogs.all = defaultArray(dialogs.all);
|
|
11
|
-
if(dialogs.all.length > 0) return dialogs.all[dialogs.all.length-1]
|
|
12
|
-
return null;
|
|
13
|
-
},
|
|
14
|
-
/*** définit la boîte de dialogue active */
|
|
15
|
-
set current(dialog){
|
|
16
|
-
return setCurrentDialog.call(APP,dialog)
|
|
17
|
-
},
|
|
18
|
-
/*** Démonte la boîte de dialogue passée en paramètre
|
|
19
|
-
* @param dialog, si dialog est omi alors c'est la boîte de dialogue active qui est supprimée
|
|
20
|
-
*/
|
|
21
|
-
unmount :function(dialog){
|
|
22
|
-
return unmountDialog.call(APP,dialog);
|
|
23
|
-
},
|
|
24
|
-
isDialog,
|
|
25
|
-
isValid : isDialog,
|
|
26
|
-
isCurrentActive :(dialog)=>{
|
|
27
|
-
return dialogs.current && dialogs.current.isVisible()? true : false;
|
|
28
|
-
},
|
|
29
|
-
/**** si la boîte de dialogue passé en paramètre est active */
|
|
30
|
-
isActive : (dialog)=>{
|
|
31
|
-
return isDialog(dialogs.current) && isDialog(dialog) && dialog.getId() === dialogs.current.getId() && dialog.isVisible()? true : false;
|
|
32
|
-
}
|
|
33
|
-
};
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
export const setCurrentDialog = dialogs.mount = dialogs.setCurrent = (dialog)=>{
|
|
37
|
-
if(isDialog(dialog) && dialog.isVisible() && dialogs.current !== dialog){
|
|
38
|
-
let _d = [];
|
|
39
|
-
dialogs.all = defaultArray(dialogs.all);
|
|
40
|
-
for(let i in dialogs.all){
|
|
41
|
-
if(dialogs.all[i] && dialogs.all[i].getId() != dialog.getId() && dialogs.all[i].isVisible()){
|
|
42
|
-
_d.push(dialogs.all[i]);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
_d.push(dialog);
|
|
46
|
-
dialogs.all = _d;
|
|
47
|
-
return true;
|
|
48
|
-
}
|
|
49
|
-
return false;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
export const unmountDialog = window.unmountDialog = (dialog) =>{
|
|
53
|
-
let _d = [];
|
|
54
|
-
dialog = isDialog(dialog) && isFunction(dialog.isVisible) ? dialog : dialogs.current;
|
|
55
|
-
let hasFound = false;
|
|
56
|
-
if(dialog){
|
|
57
|
-
dialogs.all = defaultArray(dialogs.all);
|
|
58
|
-
for(let i in dialogs.all){
|
|
59
|
-
if(dialogs.all[i] && dialogs.all[i].getId() == dialog.getId()){
|
|
60
|
-
hasFound = true;
|
|
61
|
-
} else if(dialogs.all[i] && dialogs.all[i].isVisible()){
|
|
62
|
-
_d.push(dialogs.all[i]);
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
dialogs.all = _d;
|
|
67
|
-
return hasFound;
|
|
68
|
-
}
|
|
69
|
-
|
|
1
|
+
import {isFunction,defaultArray,isNonNullString} from "$utils";
|
|
2
|
+
|
|
3
|
+
const isDialog = dialog => dialog && typeof dialog !='boolean' && dialog.getId && dialog.getId() ? true : false;
|
|
4
|
+
const dialogs = {
|
|
5
|
+
current : null, //la boîte de dialogue actuelle
|
|
6
|
+
previous : null, //la boîte de dialogue précédente,
|
|
7
|
+
all : [], //la liste des Dialogs overts,
|
|
8
|
+
/*** retourne la dernière boîte de dialogue */
|
|
9
|
+
get current (){
|
|
10
|
+
dialogs.all = defaultArray(dialogs.all);
|
|
11
|
+
if(dialogs.all.length > 0) return dialogs.all[dialogs.all.length-1]
|
|
12
|
+
return null;
|
|
13
|
+
},
|
|
14
|
+
/*** définit la boîte de dialogue active */
|
|
15
|
+
set current(dialog){
|
|
16
|
+
return setCurrentDialog.call(APP,dialog)
|
|
17
|
+
},
|
|
18
|
+
/*** Démonte la boîte de dialogue passée en paramètre
|
|
19
|
+
* @param dialog, si dialog est omi alors c'est la boîte de dialogue active qui est supprimée
|
|
20
|
+
*/
|
|
21
|
+
unmount :function(dialog){
|
|
22
|
+
return unmountDialog.call(APP,dialog);
|
|
23
|
+
},
|
|
24
|
+
isDialog,
|
|
25
|
+
isValid : isDialog,
|
|
26
|
+
isCurrentActive :(dialog)=>{
|
|
27
|
+
return dialogs.current && dialogs.current.isVisible()? true : false;
|
|
28
|
+
},
|
|
29
|
+
/**** si la boîte de dialogue passé en paramètre est active */
|
|
30
|
+
isActive : (dialog)=>{
|
|
31
|
+
return isDialog(dialogs.current) && isDialog(dialog) && dialog.getId() === dialogs.current.getId() && dialog.isVisible()? true : false;
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
export const setCurrentDialog = dialogs.mount = dialogs.setCurrent = (dialog)=>{
|
|
37
|
+
if(isDialog(dialog) && dialog.isVisible() && dialogs.current !== dialog){
|
|
38
|
+
let _d = [];
|
|
39
|
+
dialogs.all = defaultArray(dialogs.all);
|
|
40
|
+
for(let i in dialogs.all){
|
|
41
|
+
if(dialogs.all[i] && dialogs.all[i].getId() != dialog.getId() && dialogs.all[i].isVisible()){
|
|
42
|
+
_d.push(dialogs.all[i]);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
_d.push(dialog);
|
|
46
|
+
dialogs.all = _d;
|
|
47
|
+
return true;
|
|
48
|
+
}
|
|
49
|
+
return false;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
export const unmountDialog = window.unmountDialog = (dialog) =>{
|
|
53
|
+
let _d = [];
|
|
54
|
+
dialog = isDialog(dialog) && isFunction(dialog.isVisible) ? dialog : dialogs.current;
|
|
55
|
+
let hasFound = false;
|
|
56
|
+
if(dialog){
|
|
57
|
+
dialogs.all = defaultArray(dialogs.all);
|
|
58
|
+
for(let i in dialogs.all){
|
|
59
|
+
if(dialogs.all[i] && dialogs.all[i].getId() == dialog.getId()){
|
|
60
|
+
hasFound = true;
|
|
61
|
+
} else if(dialogs.all[i] && dialogs.all[i].isVisible()){
|
|
62
|
+
_d.push(dialogs.all[i]);
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
dialogs.all = _d;
|
|
67
|
+
return hasFound;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
70
|
export default dialogs;
|
|
@@ -1,90 +1,90 @@
|
|
|
1
|
-
import {isDecimal,isObj,defaultObj,extendObj,isNonNullString,isArray,defaultFunc,defaultStr,defaultVal} from "$utils";
|
|
2
|
-
import {getTheme,flattenStyle} from "$theme";
|
|
3
|
-
import React from "$react";
|
|
4
|
-
import {NotificationManager} from 'react-notifications';
|
|
5
|
-
|
|
6
|
-
export default function showConfirm (p,cb){
|
|
7
|
-
let {
|
|
8
|
-
yes,
|
|
9
|
-
title,
|
|
10
|
-
text,
|
|
11
|
-
defaultValue,
|
|
12
|
-
message,
|
|
13
|
-
msg,
|
|
14
|
-
onCancel,
|
|
15
|
-
onSuccess,
|
|
16
|
-
alert,
|
|
17
|
-
ok,
|
|
18
|
-
prompt,
|
|
19
|
-
confirm,
|
|
20
|
-
no,
|
|
21
|
-
type,
|
|
22
|
-
alertType,
|
|
23
|
-
buttons,
|
|
24
|
-
...options
|
|
25
|
-
} = defaultObj(p);
|
|
26
|
-
const theme = getTheme();
|
|
27
|
-
if(isDecimal(text)){
|
|
28
|
-
text = text+"";
|
|
29
|
-
}
|
|
30
|
-
title = defaultStr(title)
|
|
31
|
-
|
|
32
|
-
if(isNonNullString(no)){
|
|
33
|
-
no = {text:no}
|
|
34
|
-
}
|
|
35
|
-
if(isNonNullString(yes)){
|
|
36
|
-
yes = {text:yes}
|
|
37
|
-
}
|
|
38
|
-
if(buttons !== false && buttons !== null){
|
|
39
|
-
if(!isArray(buttons)){
|
|
40
|
-
buttons = [];
|
|
41
|
-
}
|
|
42
|
-
no = defaultObj(no)
|
|
43
|
-
if(!alert && no !== false){
|
|
44
|
-
no.text = defaultStr(no.text,'Non')
|
|
45
|
-
/*if(typeof no.onClick !=='function'){
|
|
46
|
-
no.onClick = defaultFunc(onCancel,cb);
|
|
47
|
-
}*/
|
|
48
|
-
no.style = flattenStyle([{color:theme.secondaryText,backgroundColor:theme.secondary},no.style]);
|
|
49
|
-
buttons.push(no);
|
|
50
|
-
} else no = null;
|
|
51
|
-
if(yes !== false){
|
|
52
|
-
yes = defaultObj(yes,ok)
|
|
53
|
-
yes.text = defaultStr(yes.text,alert?'OK':'Oui');
|
|
54
|
-
yes.style = flattenStyle([{color:theme.primaryText,backgroundColor:theme.primary},yes.style]);
|
|
55
|
-
/*if(typeof yes.onClick !=='function'){
|
|
56
|
-
yes.onClick = defaultFunc(onSuccess,cb);
|
|
57
|
-
}*/
|
|
58
|
-
buttons.push(yes);
|
|
59
|
-
}
|
|
60
|
-
} else {
|
|
61
|
-
buttons = [];
|
|
62
|
-
}
|
|
63
|
-
message = defaultVal(message,msg)
|
|
64
|
-
options = defaultObj(options);
|
|
65
|
-
if(isObj(yes)){
|
|
66
|
-
options.okButtonProps = extendObj(true,{},options.okButtonProps,yes);
|
|
67
|
-
options.okText = defaultVal(options.okText,yes.text,yes.label);
|
|
68
|
-
}
|
|
69
|
-
if(isObj(no)){
|
|
70
|
-
options.cancelButtonProps = extendObj(true,{},options.cancelButtonProps,no);
|
|
71
|
-
options.cancelText = defaultVal(options.cancelText,no.text,no.label);
|
|
72
|
-
options.closeIcon = React.isValidElement(no.icon)? no.icon : options.closeIcon;
|
|
73
|
-
}
|
|
74
|
-
//options.closeIcon = React.isValidElement(options.closeIcon)? options.closeIcon : <CloseOutlined />
|
|
75
|
-
options.onOk = defaultFunc(onSuccess,cb);
|
|
76
|
-
options.onCancel = onCancel;
|
|
77
|
-
if(alert){
|
|
78
|
-
options.closable = confirm? false : true;
|
|
79
|
-
type = "info";
|
|
80
|
-
}
|
|
81
|
-
type = defaultStr(alertType,type,"confirm").toLowerCase().trim();
|
|
82
|
-
const cB = defaultFunc(NotificationManager[type],NotificationManager.confirm);
|
|
83
|
-
return cB(message,title);
|
|
84
|
-
return cB({
|
|
85
|
-
...options,
|
|
86
|
-
content : message,
|
|
87
|
-
title,
|
|
88
|
-
onCancel,
|
|
89
|
-
})
|
|
90
|
-
}
|
|
1
|
+
import {isDecimal,isObj,defaultObj,extendObj,isNonNullString,isArray,defaultFunc,defaultStr,defaultVal} from "$utils";
|
|
2
|
+
import {getTheme,flattenStyle} from "$theme";
|
|
3
|
+
import React from "$react";
|
|
4
|
+
import {NotificationManager} from 'react-notifications';
|
|
5
|
+
|
|
6
|
+
export default function showConfirm (p,cb){
|
|
7
|
+
let {
|
|
8
|
+
yes,
|
|
9
|
+
title,
|
|
10
|
+
text,
|
|
11
|
+
defaultValue,
|
|
12
|
+
message,
|
|
13
|
+
msg,
|
|
14
|
+
onCancel,
|
|
15
|
+
onSuccess,
|
|
16
|
+
alert,
|
|
17
|
+
ok,
|
|
18
|
+
prompt,
|
|
19
|
+
confirm,
|
|
20
|
+
no,
|
|
21
|
+
type,
|
|
22
|
+
alertType,
|
|
23
|
+
buttons,
|
|
24
|
+
...options
|
|
25
|
+
} = defaultObj(p);
|
|
26
|
+
const theme = getTheme();
|
|
27
|
+
if(isDecimal(text)){
|
|
28
|
+
text = text+"";
|
|
29
|
+
}
|
|
30
|
+
title = defaultStr(title)
|
|
31
|
+
|
|
32
|
+
if(isNonNullString(no)){
|
|
33
|
+
no = {text:no}
|
|
34
|
+
}
|
|
35
|
+
if(isNonNullString(yes)){
|
|
36
|
+
yes = {text:yes}
|
|
37
|
+
}
|
|
38
|
+
if(buttons !== false && buttons !== null){
|
|
39
|
+
if(!isArray(buttons)){
|
|
40
|
+
buttons = [];
|
|
41
|
+
}
|
|
42
|
+
no = defaultObj(no)
|
|
43
|
+
if(!alert && no !== false){
|
|
44
|
+
no.text = defaultStr(no.text,'Non')
|
|
45
|
+
/*if(typeof no.onClick !=='function'){
|
|
46
|
+
no.onClick = defaultFunc(onCancel,cb);
|
|
47
|
+
}*/
|
|
48
|
+
no.style = flattenStyle([{color:theme.secondaryText,backgroundColor:theme.secondary},no.style]);
|
|
49
|
+
buttons.push(no);
|
|
50
|
+
} else no = null;
|
|
51
|
+
if(yes !== false){
|
|
52
|
+
yes = defaultObj(yes,ok)
|
|
53
|
+
yes.text = defaultStr(yes.text,alert?'OK':'Oui');
|
|
54
|
+
yes.style = flattenStyle([{color:theme.primaryText,backgroundColor:theme.primary},yes.style]);
|
|
55
|
+
/*if(typeof yes.onClick !=='function'){
|
|
56
|
+
yes.onClick = defaultFunc(onSuccess,cb);
|
|
57
|
+
}*/
|
|
58
|
+
buttons.push(yes);
|
|
59
|
+
}
|
|
60
|
+
} else {
|
|
61
|
+
buttons = [];
|
|
62
|
+
}
|
|
63
|
+
message = defaultVal(message,msg)
|
|
64
|
+
options = defaultObj(options);
|
|
65
|
+
if(isObj(yes)){
|
|
66
|
+
options.okButtonProps = extendObj(true,{},options.okButtonProps,yes);
|
|
67
|
+
options.okText = defaultVal(options.okText,yes.text,yes.label);
|
|
68
|
+
}
|
|
69
|
+
if(isObj(no)){
|
|
70
|
+
options.cancelButtonProps = extendObj(true,{},options.cancelButtonProps,no);
|
|
71
|
+
options.cancelText = defaultVal(options.cancelText,no.text,no.label);
|
|
72
|
+
options.closeIcon = React.isValidElement(no.icon)? no.icon : options.closeIcon;
|
|
73
|
+
}
|
|
74
|
+
//options.closeIcon = React.isValidElement(options.closeIcon)? options.closeIcon : <CloseOutlined />
|
|
75
|
+
options.onOk = defaultFunc(onSuccess,cb);
|
|
76
|
+
options.onCancel = onCancel;
|
|
77
|
+
if(alert){
|
|
78
|
+
options.closable = confirm? false : true;
|
|
79
|
+
type = "info";
|
|
80
|
+
}
|
|
81
|
+
type = defaultStr(alertType,type,"confirm").toLowerCase().trim();
|
|
82
|
+
const cB = defaultFunc(NotificationManager[type],NotificationManager.confirm);
|
|
83
|
+
return cB(message,title);
|
|
84
|
+
return cB({
|
|
85
|
+
...options,
|
|
86
|
+
content : message,
|
|
87
|
+
title,
|
|
88
|
+
onCancel,
|
|
89
|
+
})
|
|
90
|
+
}
|
|
@@ -1,103 +1,103 @@
|
|
|
1
|
-
.ftc-dialog.dialog,
|
|
2
|
-
.ftc-dialog.dialog .dialog-container,
|
|
3
|
-
.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container{
|
|
4
|
-
overflow: hidden!important;
|
|
5
|
-
overflow-y: hidden!important;
|
|
6
|
-
overflow-x: hidden!important;
|
|
7
|
-
width: 100%;
|
|
8
|
-
height: 100%;
|
|
9
|
-
padding-left: 0px!important;
|
|
10
|
-
padding-right: 0px!important;
|
|
11
|
-
margin: 0px!important;
|
|
12
|
-
}
|
|
13
|
-
.ftc-dialog.dialog,
|
|
14
|
-
.ftc-dialog.ftc-dialog-fullscreen .dialog-container{
|
|
15
|
-
width: 100%!important;
|
|
16
|
-
height: 100%!important;
|
|
17
|
-
}
|
|
18
|
-
.ftc-dialog.ftc-dialog-modal > .dialog-container {
|
|
19
|
-
display: flex!important;
|
|
20
|
-
flex-direction: column!important;
|
|
21
|
-
justify-content: center!important;
|
|
22
|
-
align-items: center!important;
|
|
23
|
-
}
|
|
24
|
-
.ftc-dialog.dialog .dialog-container > .dialog-content-container{
|
|
25
|
-
position: relative!important;
|
|
26
|
-
background-color: white;
|
|
27
|
-
}
|
|
28
|
-
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container {
|
|
29
|
-
max-width: 600px;
|
|
30
|
-
max-height: 80%;
|
|
31
|
-
padding: 0px!important;
|
|
32
|
-
margin: auto!important;
|
|
33
|
-
overflow-y: hidden!important;
|
|
34
|
-
overflow-x: hidden!important;
|
|
35
|
-
flex-grow:0!important;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.ftc-dialog.ftc-dialog-fullscreen > .dialog-container .dialog-content-container,
|
|
39
|
-
.ftc-dialog.ftc-dialog-fullscreen > .dialog-container{
|
|
40
|
-
display: block!important;
|
|
41
|
-
max-width: 100%!important;
|
|
42
|
-
max-height: 100%!important;
|
|
43
|
-
}
|
|
44
|
-
.ftc-dialog.ftc-dialog-fullscreen > .dialog-container {
|
|
45
|
-
padding-top: 56px;
|
|
46
|
-
}
|
|
47
|
-
.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content {
|
|
48
|
-
overflow: auto;
|
|
49
|
-
max-height: inherit;
|
|
50
|
-
max-width: inherit;
|
|
51
|
-
overflow-y: auto;
|
|
52
|
-
overflow-x: auto;
|
|
53
|
-
padding-bottom: 30px;
|
|
54
|
-
}
|
|
55
|
-
.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content > * {
|
|
56
|
-
padding-bottom: 30px;
|
|
57
|
-
padding-bottom: 0px;
|
|
58
|
-
margin-top: 0px;
|
|
59
|
-
margin-bottom: 0px;
|
|
60
|
-
}
|
|
61
|
-
.ftc-dialog.ftc-dialog-modal > .dialog-container .dialog-content-container .dialog-content > *{
|
|
62
|
-
margin-top: 0px!important;
|
|
63
|
-
}
|
|
64
|
-
.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content.has-scrollbar > * {
|
|
65
|
-
padding-bottom: 50px!important;
|
|
66
|
-
display: block;
|
|
67
|
-
}
|
|
68
|
-
|
|
69
|
-
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-header{
|
|
70
|
-
padding-top: 0;
|
|
71
|
-
padding-bottom: 0;
|
|
72
|
-
width: 100%;
|
|
73
|
-
}
|
|
74
|
-
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-footer {
|
|
75
|
-
position: absolute!important;
|
|
76
|
-
right: 0;
|
|
77
|
-
bottom: 0;
|
|
78
|
-
top: auto!important;
|
|
79
|
-
left : auto!important;
|
|
80
|
-
padding: 0px!important;
|
|
81
|
-
padding-top: 5px!important;
|
|
82
|
-
padding-bottom: 5px!important;
|
|
83
|
-
margin: 0px!important;
|
|
84
|
-
margin-bottom: 0px!important;
|
|
85
|
-
background-color:inherit;
|
|
86
|
-
width: 100%!important;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-content .md-grid .md-cell{
|
|
90
|
-
width: 100%!important;
|
|
91
|
-
margin-left: auto!important;
|
|
92
|
-
margin-right: auto!important;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
.ftc-dialog.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container .dialog-content{
|
|
96
|
-
max-height: 100%!important;
|
|
97
|
-
max-width: 100%!important;
|
|
98
|
-
}
|
|
99
|
-
|
|
100
|
-
.ftc-btn.ftc-dialog-action {
|
|
101
|
-
padding: 5px;
|
|
102
|
-
border-radius: 1px;
|
|
1
|
+
.ftc-dialog.dialog,
|
|
2
|
+
.ftc-dialog.dialog .dialog-container,
|
|
3
|
+
.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container{
|
|
4
|
+
overflow: hidden!important;
|
|
5
|
+
overflow-y: hidden!important;
|
|
6
|
+
overflow-x: hidden!important;
|
|
7
|
+
width: 100%;
|
|
8
|
+
height: 100%;
|
|
9
|
+
padding-left: 0px!important;
|
|
10
|
+
padding-right: 0px!important;
|
|
11
|
+
margin: 0px!important;
|
|
12
|
+
}
|
|
13
|
+
.ftc-dialog.dialog,
|
|
14
|
+
.ftc-dialog.ftc-dialog-fullscreen .dialog-container{
|
|
15
|
+
width: 100%!important;
|
|
16
|
+
height: 100%!important;
|
|
17
|
+
}
|
|
18
|
+
.ftc-dialog.ftc-dialog-modal > .dialog-container {
|
|
19
|
+
display: flex!important;
|
|
20
|
+
flex-direction: column!important;
|
|
21
|
+
justify-content: center!important;
|
|
22
|
+
align-items: center!important;
|
|
23
|
+
}
|
|
24
|
+
.ftc-dialog.dialog .dialog-container > .dialog-content-container{
|
|
25
|
+
position: relative!important;
|
|
26
|
+
background-color: white;
|
|
27
|
+
}
|
|
28
|
+
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container {
|
|
29
|
+
max-width: 600px;
|
|
30
|
+
max-height: 80%;
|
|
31
|
+
padding: 0px!important;
|
|
32
|
+
margin: auto!important;
|
|
33
|
+
overflow-y: hidden!important;
|
|
34
|
+
overflow-x: hidden!important;
|
|
35
|
+
flex-grow:0!important;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.ftc-dialog.ftc-dialog-fullscreen > .dialog-container .dialog-content-container,
|
|
39
|
+
.ftc-dialog.ftc-dialog-fullscreen > .dialog-container{
|
|
40
|
+
display: block!important;
|
|
41
|
+
max-width: 100%!important;
|
|
42
|
+
max-height: 100%!important;
|
|
43
|
+
}
|
|
44
|
+
.ftc-dialog.ftc-dialog-fullscreen > .dialog-container {
|
|
45
|
+
padding-top: 56px;
|
|
46
|
+
}
|
|
47
|
+
.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content {
|
|
48
|
+
overflow: auto;
|
|
49
|
+
max-height: inherit;
|
|
50
|
+
max-width: inherit;
|
|
51
|
+
overflow-y: auto;
|
|
52
|
+
overflow-x: auto;
|
|
53
|
+
padding-bottom: 30px;
|
|
54
|
+
}
|
|
55
|
+
.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content > * {
|
|
56
|
+
padding-bottom: 30px;
|
|
57
|
+
padding-bottom: 0px;
|
|
58
|
+
margin-top: 0px;
|
|
59
|
+
margin-bottom: 0px;
|
|
60
|
+
}
|
|
61
|
+
.ftc-dialog.ftc-dialog-modal > .dialog-container .dialog-content-container .dialog-content > *{
|
|
62
|
+
margin-top: 0px!important;
|
|
63
|
+
}
|
|
64
|
+
.ftc-dialog.dialog > .dialog-container .dialog-content-container .dialog-content.has-scrollbar > * {
|
|
65
|
+
padding-bottom: 50px!important;
|
|
66
|
+
display: block;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-header{
|
|
70
|
+
padding-top: 0;
|
|
71
|
+
padding-bottom: 0;
|
|
72
|
+
width: 100%;
|
|
73
|
+
}
|
|
74
|
+
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-footer {
|
|
75
|
+
position: absolute!important;
|
|
76
|
+
right: 0;
|
|
77
|
+
bottom: 0;
|
|
78
|
+
top: auto!important;
|
|
79
|
+
left : auto!important;
|
|
80
|
+
padding: 0px!important;
|
|
81
|
+
padding-top: 5px!important;
|
|
82
|
+
padding-bottom: 5px!important;
|
|
83
|
+
margin: 0px!important;
|
|
84
|
+
margin-bottom: 0px!important;
|
|
85
|
+
background-color:inherit;
|
|
86
|
+
width: 100%!important;
|
|
87
|
+
}
|
|
88
|
+
|
|
89
|
+
.ftc-dialog.ftc-dialog-modal .dialog-container > .dialog-content-container .dialog-content .md-grid .md-cell{
|
|
90
|
+
width: 100%!important;
|
|
91
|
+
margin-left: auto!important;
|
|
92
|
+
margin-right: auto!important;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.ftc-dialog.ftc-dialog.ftc-dialog-fullscreen .dialog-container > .dialog-content-container .dialog-content{
|
|
96
|
+
max-height: 100%!important;
|
|
97
|
+
max-width: 100%!important;
|
|
98
|
+
}
|
|
99
|
+
|
|
100
|
+
.ftc-btn.ftc-dialog-action {
|
|
101
|
+
padding: 5px;
|
|
102
|
+
border-radius: 1px;
|
|
103
103
|
}
|
|
@@ -1,155 +1,155 @@
|
|
|
1
|
-
import React from '$react';
|
|
2
|
-
import {isObj} from "$utils";
|
|
3
|
-
import ExpandableItem from './ExpandableItem';
|
|
4
|
-
import DrawerItem from './DrawerItem';
|
|
5
|
-
import DrawerSection from "./DrawerSection"
|
|
6
|
-
import PropTypes from "prop-types";
|
|
7
|
-
import Divider from "$ecomponents/Divider";
|
|
8
|
-
import View from "$ecomponents/View";
|
|
9
|
-
|
|
10
|
-
export * from "./utils";
|
|
11
|
-
|
|
12
|
-
const DrawerItemsComponent = React.forwardRef((props,ref)=> {
|
|
13
|
-
let {items:_items,minimized} = props;
|
|
14
|
-
_items = typeof _items ==='function'? _items(props) : _items;
|
|
15
|
-
if(React.isValidElement(_items)){
|
|
16
|
-
return _items;
|
|
17
|
-
}
|
|
18
|
-
const r = React.useMemo(()=>{
|
|
19
|
-
let items = []
|
|
20
|
-
const renderExpandableOrSection = ({item,key,items})=>{
|
|
21
|
-
const {section,items:itx2,...rest} = item;
|
|
22
|
-
if(section){
|
|
23
|
-
return <DrawerSection
|
|
24
|
-
{...rest}
|
|
25
|
-
minimized={minimized}
|
|
26
|
-
key={key}
|
|
27
|
-
>
|
|
28
|
-
{items}
|
|
29
|
-
</DrawerSection>
|
|
30
|
-
} else {
|
|
31
|
-
return <ExpandableItem
|
|
32
|
-
{...rest}
|
|
33
|
-
minimized={minimized}
|
|
34
|
-
key={key}
|
|
35
|
-
>
|
|
36
|
-
{items}
|
|
37
|
-
</ExpandableItem>;
|
|
38
|
-
}
|
|
39
|
-
}
|
|
40
|
-
Object.map(_items,(item,i)=>{
|
|
41
|
-
if(React.isValidElement(item)){
|
|
42
|
-
items.push(<React.Fragment key={i}>{item}</React.Fragment>)
|
|
43
|
-
}
|
|
44
|
-
if(typeof item ==='string' || typeof item =='number'){
|
|
45
|
-
item = {label:item+''};
|
|
46
|
-
}
|
|
47
|
-
if(!isObj(item)) return null;
|
|
48
|
-
if(isObj(item.items) || Array.isArray(item.items)){
|
|
49
|
-
const itx = []
|
|
50
|
-
Object.map(item.items,(it,j)=>{
|
|
51
|
-
if(!isObj(it)) return ;
|
|
52
|
-
getDefaultProps(it);
|
|
53
|
-
const r = renderItem({minimized,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
|
|
54
|
-
if(r){
|
|
55
|
-
itx.push(r);
|
|
56
|
-
}
|
|
57
|
-
});
|
|
58
|
-
if(itx.length){
|
|
59
|
-
items.push(renderExpandableOrSection({items:itx,key:i,item}))
|
|
60
|
-
}
|
|
61
|
-
} else {
|
|
62
|
-
const r = renderItem({minimized,renderExpandableOrSection,items:_items,item,key:i+"",props});
|
|
63
|
-
if(r){
|
|
64
|
-
items.push(r);
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
})
|
|
68
|
-
return items;
|
|
69
|
-
},[_items,minimized]);
|
|
70
|
-
return <View ref={ref}>
|
|
71
|
-
{r}
|
|
72
|
-
<View style={{height:30}}></View>
|
|
73
|
-
</View>
|
|
74
|
-
});
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
export default DrawerItemsComponent;
|
|
78
|
-
|
|
79
|
-
DrawerItemsComponent.displayName = "DrawerItemsComponent";
|
|
80
|
-
|
|
81
|
-
/*** les props des items du drawer */
|
|
82
|
-
const itemType = PropTypes.oneOfType([
|
|
83
|
-
PropTypes.shape({
|
|
84
|
-
label : PropTypes.string,
|
|
85
|
-
section : PropTypes.bool, //si le drawer est de type section
|
|
86
|
-
items : PropTypes.oneOfType([
|
|
87
|
-
PropTypes.arrayOf(PropTypes.object),
|
|
88
|
-
PropTypes.objectOf(PropTypes.object),
|
|
89
|
-
]),
|
|
90
|
-
divider : PropTypes.bool,
|
|
91
|
-
}),
|
|
92
|
-
PropTypes.string,
|
|
93
|
-
PropTypes.number,
|
|
94
|
-
PropTypes.node,
|
|
95
|
-
])
|
|
96
|
-
|
|
97
|
-
DrawerItemsComponent.propTypes = {
|
|
98
|
-
items : PropTypes.oneOfType([
|
|
99
|
-
PropTypes.array,
|
|
100
|
-
PropTypes.object,
|
|
101
|
-
PropTypes.arrayOf(itemType),
|
|
102
|
-
PropTypes.objectOf(itemType),
|
|
103
|
-
PropTypes.func,
|
|
104
|
-
PropTypes.node,
|
|
105
|
-
]).isRequired,
|
|
106
|
-
minimized : PropTypes.bool,
|
|
107
|
-
}
|
|
108
|
-
|
|
109
|
-
const getDefaultProps = function(item){
|
|
110
|
-
if(!isObj(item)) return null;
|
|
111
|
-
item.label = defaultVal(item.label,item.text,item.accessibilityLabel);
|
|
112
|
-
item.accessibilityLabel = defaultVal(item.accessibilityLabel,item.tooltip,item.label);
|
|
113
|
-
item.title = defaultVal(item.title,item.label);
|
|
114
|
-
return item;
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
const renderItem = ({item,minimized,renderExpandableOrSection,index,key})=>{
|
|
118
|
-
key = key||index;
|
|
119
|
-
if(React.isValidElement(item)){
|
|
120
|
-
return <React.Fragment key={key}>
|
|
121
|
-
{item}
|
|
122
|
-
</React.Fragment>
|
|
123
|
-
} else {
|
|
124
|
-
if(!item.label && !item.text && !item.icon) {
|
|
125
|
-
if(item.divider === true){
|
|
126
|
-
const {divider,...rest} = item;
|
|
127
|
-
return (<Divider key={key} {...rest}/>)
|
|
128
|
-
}
|
|
129
|
-
return null;
|
|
130
|
-
}
|
|
131
|
-
item = getDefaultProps(item);
|
|
132
|
-
if(isObj(item.items) || Array.isArray(item.items)){
|
|
133
|
-
const itx = [];
|
|
134
|
-
Object.map(item.items,(it,i)=>{
|
|
135
|
-
if(!isObj(it)) return null;
|
|
136
|
-
it = getDefaultProps(it);
|
|
137
|
-
itx.push(<DrawerItem
|
|
138
|
-
{...it}
|
|
139
|
-
minimized = {minimized}
|
|
140
|
-
key={key+i}
|
|
141
|
-
|
|
142
|
-
/>)
|
|
143
|
-
})
|
|
144
|
-
if(itx.length){
|
|
145
|
-
return renderExpandableOrSection({items:itx,key,item})
|
|
146
|
-
}
|
|
147
|
-
} else {
|
|
148
|
-
return <DrawerItem
|
|
149
|
-
minimized={minimized}
|
|
150
|
-
key={key}
|
|
151
|
-
{...item}
|
|
152
|
-
/>
|
|
153
|
-
}
|
|
154
|
-
}
|
|
1
|
+
import React from '$react';
|
|
2
|
+
import {isObj} from "$utils";
|
|
3
|
+
import ExpandableItem from './ExpandableItem';
|
|
4
|
+
import DrawerItem from './DrawerItem';
|
|
5
|
+
import DrawerSection from "./DrawerSection"
|
|
6
|
+
import PropTypes from "prop-types";
|
|
7
|
+
import Divider from "$ecomponents/Divider";
|
|
8
|
+
import View from "$ecomponents/View";
|
|
9
|
+
|
|
10
|
+
export * from "./utils";
|
|
11
|
+
|
|
12
|
+
const DrawerItemsComponent = React.forwardRef((props,ref)=> {
|
|
13
|
+
let {items:_items,minimized} = props;
|
|
14
|
+
_items = typeof _items ==='function'? _items(props) : _items;
|
|
15
|
+
if(React.isValidElement(_items)){
|
|
16
|
+
return _items;
|
|
17
|
+
}
|
|
18
|
+
const r = React.useMemo(()=>{
|
|
19
|
+
let items = []
|
|
20
|
+
const renderExpandableOrSection = ({item,key,items})=>{
|
|
21
|
+
const {section,items:itx2,...rest} = item;
|
|
22
|
+
if(section){
|
|
23
|
+
return <DrawerSection
|
|
24
|
+
{...rest}
|
|
25
|
+
minimized={minimized}
|
|
26
|
+
key={key}
|
|
27
|
+
>
|
|
28
|
+
{items}
|
|
29
|
+
</DrawerSection>
|
|
30
|
+
} else {
|
|
31
|
+
return <ExpandableItem
|
|
32
|
+
{...rest}
|
|
33
|
+
minimized={minimized}
|
|
34
|
+
key={key}
|
|
35
|
+
>
|
|
36
|
+
{items}
|
|
37
|
+
</ExpandableItem>;
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
Object.map(_items,(item,i)=>{
|
|
41
|
+
if(React.isValidElement(item)){
|
|
42
|
+
items.push(<React.Fragment key={i}>{item}</React.Fragment>)
|
|
43
|
+
}
|
|
44
|
+
if(typeof item ==='string' || typeof item =='number'){
|
|
45
|
+
item = {label:item+''};
|
|
46
|
+
}
|
|
47
|
+
if(!isObj(item)) return null;
|
|
48
|
+
if(isObj(item.items) || Array.isArray(item.items)){
|
|
49
|
+
const itx = []
|
|
50
|
+
Object.map(item.items,(it,j)=>{
|
|
51
|
+
if(!isObj(it)) return ;
|
|
52
|
+
getDefaultProps(it);
|
|
53
|
+
const r = renderItem({minimized,renderExpandableOrSection,items:item.items,item:it,key:i+j,props});
|
|
54
|
+
if(r){
|
|
55
|
+
itx.push(r);
|
|
56
|
+
}
|
|
57
|
+
});
|
|
58
|
+
if(itx.length){
|
|
59
|
+
items.push(renderExpandableOrSection({items:itx,key:i,item}))
|
|
60
|
+
}
|
|
61
|
+
} else {
|
|
62
|
+
const r = renderItem({minimized,renderExpandableOrSection,items:_items,item,key:i+"",props});
|
|
63
|
+
if(r){
|
|
64
|
+
items.push(r);
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
})
|
|
68
|
+
return items;
|
|
69
|
+
},[_items,minimized]);
|
|
70
|
+
return <View ref={ref}>
|
|
71
|
+
{r}
|
|
72
|
+
<View style={{height:30}}></View>
|
|
73
|
+
</View>
|
|
74
|
+
});
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
export default DrawerItemsComponent;
|
|
78
|
+
|
|
79
|
+
DrawerItemsComponent.displayName = "DrawerItemsComponent";
|
|
80
|
+
|
|
81
|
+
/*** les props des items du drawer */
|
|
82
|
+
const itemType = PropTypes.oneOfType([
|
|
83
|
+
PropTypes.shape({
|
|
84
|
+
label : PropTypes.string,
|
|
85
|
+
section : PropTypes.bool, //si le drawer est de type section
|
|
86
|
+
items : PropTypes.oneOfType([
|
|
87
|
+
PropTypes.arrayOf(PropTypes.object),
|
|
88
|
+
PropTypes.objectOf(PropTypes.object),
|
|
89
|
+
]),
|
|
90
|
+
divider : PropTypes.bool,
|
|
91
|
+
}),
|
|
92
|
+
PropTypes.string,
|
|
93
|
+
PropTypes.number,
|
|
94
|
+
PropTypes.node,
|
|
95
|
+
])
|
|
96
|
+
|
|
97
|
+
DrawerItemsComponent.propTypes = {
|
|
98
|
+
items : PropTypes.oneOfType([
|
|
99
|
+
PropTypes.array,
|
|
100
|
+
PropTypes.object,
|
|
101
|
+
PropTypes.arrayOf(itemType),
|
|
102
|
+
PropTypes.objectOf(itemType),
|
|
103
|
+
PropTypes.func,
|
|
104
|
+
PropTypes.node,
|
|
105
|
+
]).isRequired,
|
|
106
|
+
minimized : PropTypes.bool,
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
const getDefaultProps = function(item){
|
|
110
|
+
if(!isObj(item)) return null;
|
|
111
|
+
item.label = defaultVal(item.label,item.text,item.accessibilityLabel);
|
|
112
|
+
item.accessibilityLabel = defaultVal(item.accessibilityLabel,item.tooltip,item.label);
|
|
113
|
+
item.title = defaultVal(item.title,item.label);
|
|
114
|
+
return item;
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
const renderItem = ({item,minimized,renderExpandableOrSection,index,key})=>{
|
|
118
|
+
key = key||index;
|
|
119
|
+
if(React.isValidElement(item)){
|
|
120
|
+
return <React.Fragment key={key}>
|
|
121
|
+
{item}
|
|
122
|
+
</React.Fragment>
|
|
123
|
+
} else {
|
|
124
|
+
if(!item.label && !item.text && !item.icon) {
|
|
125
|
+
if(item.divider === true){
|
|
126
|
+
const {divider,...rest} = item;
|
|
127
|
+
return (<Divider key={key} {...rest}/>)
|
|
128
|
+
}
|
|
129
|
+
return null;
|
|
130
|
+
}
|
|
131
|
+
item = getDefaultProps(item);
|
|
132
|
+
if(isObj(item.items) || Array.isArray(item.items)){
|
|
133
|
+
const itx = [];
|
|
134
|
+
Object.map(item.items,(it,i)=>{
|
|
135
|
+
if(!isObj(it)) return null;
|
|
136
|
+
it = getDefaultProps(it);
|
|
137
|
+
itx.push(<DrawerItem
|
|
138
|
+
{...it}
|
|
139
|
+
minimized = {minimized}
|
|
140
|
+
key={key+i}
|
|
141
|
+
|
|
142
|
+
/>)
|
|
143
|
+
})
|
|
144
|
+
if(itx.length){
|
|
145
|
+
return renderExpandableOrSection({items:itx,key,item})
|
|
146
|
+
}
|
|
147
|
+
} else {
|
|
148
|
+
return <DrawerItem
|
|
149
|
+
minimized={minimized}
|
|
150
|
+
key={key}
|
|
151
|
+
{...item}
|
|
152
|
+
/>
|
|
153
|
+
}
|
|
154
|
+
}
|
|
155
155
|
}
|