@fto-consult/expo-ui 6.41.0 → 6.42.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/babel.config.alias.js
CHANGED
|
@@ -74,10 +74,6 @@ module.exports = (opts)=>{
|
|
|
74
74
|
r.$ehooks = path.resolve(expo,"context","hooks");
|
|
75
75
|
///le chemin racine du projet expo-ui
|
|
76
76
|
r["$expo-ui-root-path"] = r["$expo-ui-root"]= path.resolve(expo,"..");
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
///on génère les librairies open sources utilisées par l'application
|
|
80
|
-
require("./find-licenses");
|
|
81
77
|
const $assets = r.$assets;
|
|
82
78
|
const $electron = path.resolve(dir,"electron");
|
|
83
79
|
const electronPaths = {
|
package/bin/create-app.js
CHANGED
|
@@ -34,6 +34,7 @@ module.exports = function(parsedArgs,{projectRoot:root}){
|
|
|
34
34
|
"main": "node_modules/expo/AppEntry.js",
|
|
35
35
|
"scripts" : {
|
|
36
36
|
start : "npx expo start -c",
|
|
37
|
+
"dev" : "npx expo start --no-dev --minify -c",
|
|
37
38
|
"serve-web" : "npx serve web-build --single",
|
|
38
39
|
"build-web" : "npx expo export:web",
|
|
39
40
|
"build-android" : "npx eas build --platform android",
|
package/metro.config.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fto-consult/expo-ui",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.42.0",
|
|
4
4
|
"description": "Bibliothèque de composants UI Expo,react-native",
|
|
5
5
|
"main": "main",
|
|
6
6
|
"scripts": {
|
|
@@ -8,7 +8,6 @@
|
|
|
8
8
|
"publish1": "npm publish --access=public",
|
|
9
9
|
"unpublish": "npm -f unpublish @fto-consult/expo-ui",
|
|
10
10
|
"build-web": "",
|
|
11
|
-
"dev": "npx expo start -c --no-minify",
|
|
12
11
|
"start": "npx expo start --dev --no-minify",
|
|
13
12
|
"start-d": "npx expo start -c --no-dev --no-minify",
|
|
14
13
|
"start-p": "npm run start-d",
|
|
@@ -44,6 +43,7 @@
|
|
|
44
43
|
"update-apexchart": "node ./bin/update-appex-chart.js",
|
|
45
44
|
"update-appexchart": "npm run update-apexchart",
|
|
46
45
|
"delete-node-modules": "rimraf ./**/node_modules",
|
|
46
|
+
"dev" : "npx expo start --no-dev --minify -c",
|
|
47
47
|
"modifier-url-remote-git": "git remote set-url origin 'https://borispipo@github.com/borispipo/smart-eneo.git'",
|
|
48
48
|
"update": "npm i expo @emotion/native@latest react-native-big-list@latest apexcharts@latest file-saver@latest fs-extra@latest google-libphonenumber@latest @pchmn/expo-material3-theme@latest @emotion/native@latest @fto-consult/common@latest @react-navigation/stack react-native-blob-util react-native-gesture-handler@latest react-native-iphone-x-helper@latest react-native-mime-types@latest react-native-paper@latest react-native-paper-dates@latest @react-navigation/native@latest @react-navigation/native-stack@latest react-virtuoso@latest tippy.js@latest websql@latest xlsx@latest && npx expo install --fix && npm run update-apexchart && npm run find-licenses"
|
|
49
49
|
},
|
|
@@ -18,7 +18,7 @@
|
|
|
18
18
|
animations.entering.duration(duration).withCallback(enteringCallback);
|
|
19
19
|
animations.exiting.duration(duration).withCallback(exitingCallback);
|
|
20
20
|
} else {
|
|
21
|
-
animations = getDefaultAnimation({duration,enteringCallback,exitingCallback
|
|
21
|
+
animations = getDefaultAnimation({duration,enteringCallback,exitingCallback});
|
|
22
22
|
}
|
|
23
23
|
|
|
24
24
|
return <Animated.View
|
|
@@ -14,10 +14,10 @@ import KeyboardAvoidingView from "$ecomponents/KeyboardAvoidingView";
|
|
|
14
14
|
import {Elevations} from "$ecomponents/Surface";
|
|
15
15
|
import {defaultStr} from "$cutils";
|
|
16
16
|
import View from "$ecomponents/View";
|
|
17
|
-
import {Easing} from "react-native";
|
|
18
17
|
import Portal from "$ecomponents/Portal";
|
|
19
18
|
import { ScrollView } from "react-native";
|
|
20
19
|
import BackHandler from "$ecomponents/BackHandler";
|
|
20
|
+
import Reanimated, { useSharedValue,Easing, withTiming,useAnimatedStyle, } from 'react-native-reanimated';
|
|
21
21
|
import {
|
|
22
22
|
Pressable,
|
|
23
23
|
Animated,
|
|
@@ -27,7 +27,7 @@ import {
|
|
|
27
27
|
Button,
|
|
28
28
|
Platform
|
|
29
29
|
} from "react-native";
|
|
30
|
-
|
|
30
|
+
import Animation from "$ecomponents/Animation";
|
|
31
31
|
export const defaultHeight = 300;
|
|
32
32
|
|
|
33
33
|
const useNativeDriver = false;
|
|
@@ -75,29 +75,17 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
75
75
|
} else {
|
|
76
76
|
height = Math.max(winHeight/3,defaultHeight);
|
|
77
77
|
}
|
|
78
|
-
const [
|
|
79
|
-
|
|
80
|
-
pan: new Animated.ValueXY(),
|
|
81
|
-
visible : typeof customVisible === 'boolean'?customVisible : false,
|
|
82
|
-
});
|
|
78
|
+
const [pan,setPan] = React.useState(new Animated.ValueXY());
|
|
79
|
+
const [visible,setVisible] = React.useState(typeof customVisible === 'boolean'?customVisible : false);
|
|
83
80
|
const isMounted = React.useIsMounted();
|
|
84
|
-
const {pan,animatedHeight,visible} = state;
|
|
85
81
|
const prevVisible = React.usePrevious(visible);
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
visible:false,
|
|
90
|
-
animatedHeight: new Animated.Value(0)
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
|
|
82
|
+
const animatedHeight = useSharedValue(0);
|
|
83
|
+
const hasCallCallbackRef = React.useState(false);
|
|
84
|
+
|
|
94
85
|
const open = ()=>{
|
|
95
86
|
if(!isMounted() || visible)return;
|
|
96
|
-
|
|
87
|
+
setVisible(true);
|
|
97
88
|
};
|
|
98
|
-
const getAnimValue = ()=>{
|
|
99
|
-
return animatedHeight?.__getValue();
|
|
100
|
-
}
|
|
101
89
|
const subscription = React.useRef(null);
|
|
102
90
|
const handleBack = React.useCallback((e)=>{
|
|
103
91
|
if (dismissable) {
|
|
@@ -120,22 +108,30 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
120
108
|
handleBack
|
|
121
109
|
);
|
|
122
110
|
}
|
|
123
|
-
|
|
111
|
+
|
|
112
|
+
const closeModal = (cb)=>{
|
|
124
113
|
removeListeners();
|
|
125
|
-
if(!isMounted()) return;
|
|
126
|
-
const
|
|
127
|
-
|
|
128
|
-
|
|
114
|
+
//if(!isMounted()) return;
|
|
115
|
+
const callback = ()=>{
|
|
116
|
+
if(hasCallCallbackRef.current) return;
|
|
117
|
+
if(visible){
|
|
118
|
+
setVisible(false);
|
|
119
|
+
}
|
|
120
|
+
if(typeof cb =='function'){
|
|
121
|
+
cb();
|
|
122
|
+
}
|
|
123
|
+
hasCallCallbackRef.current = true;
|
|
124
|
+
};
|
|
125
|
+
hasCallCallbackRef.current = false;
|
|
126
|
+
if(animatedHeight.value != 0){
|
|
127
|
+
animatedHeight.value = withTiming(0,{
|
|
128
|
+
duration: closeDuration,
|
|
129
|
+
callback,
|
|
130
|
+
});
|
|
131
|
+
setTimeout(callback,closeDuration+100);
|
|
132
|
+
} else {
|
|
133
|
+
callback();
|
|
129
134
|
}
|
|
130
|
-
return Animated.timing(animatedHeight, {
|
|
131
|
-
useNativeDriver,
|
|
132
|
-
toValue: minClosingHeight,
|
|
133
|
-
easing : Easing.linear,
|
|
134
|
-
duration: closeDuration
|
|
135
|
-
}).start(()=>{
|
|
136
|
-
pan.setValue({ x: 0, y: 0 });
|
|
137
|
-
forceCloseModal();
|
|
138
|
-
});
|
|
139
135
|
}
|
|
140
136
|
const [panResponder] = React.useState(PanResponder.create({
|
|
141
137
|
onStartShouldSetPanResponder: () => closeOnDragDown,
|
|
@@ -152,11 +148,16 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
152
148
|
}
|
|
153
149
|
}
|
|
154
150
|
}))
|
|
155
|
-
|
|
151
|
+
const animatedStyles = useAnimatedStyle(() => ({
|
|
152
|
+
height : animatedHeight.value,
|
|
153
|
+
}));
|
|
156
154
|
React.useEffect(()=>{
|
|
157
155
|
if(typeof customVisible !=='boolean' || customVisible === visible) return;
|
|
158
156
|
if(customVisible){
|
|
159
|
-
|
|
157
|
+
if(animatedHeight.value >0){
|
|
158
|
+
animatedHeight.value = withTiming(0);
|
|
159
|
+
}
|
|
160
|
+
setVisible(true);
|
|
160
161
|
} else {
|
|
161
162
|
closeModal();
|
|
162
163
|
}
|
|
@@ -169,29 +170,25 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
169
170
|
if(visible){
|
|
170
171
|
addListener();
|
|
171
172
|
pan.setValue({ x: 0, y: 0 });
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
173
|
+
animatedHeight.value = withTiming(height,{
|
|
174
|
+
callback : ()=>{
|
|
175
|
+
if (typeof onOpen === "function") onOpen(props)
|
|
176
|
+
},
|
|
175
177
|
duration: openDuration,
|
|
176
|
-
|
|
177
|
-
}).start(()=>{
|
|
178
|
-
if (typeof onOpen === "function") onOpen(props)
|
|
179
|
-
});
|
|
178
|
+
})
|
|
180
179
|
} else {
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
onDismiss
|
|
184
|
-
|
|
180
|
+
closeModal(()=>{
|
|
181
|
+
if (typeof onClose === "function") onClose(props);
|
|
182
|
+
else if(onDismiss){
|
|
183
|
+
onDismiss(props);
|
|
184
|
+
}
|
|
185
|
+
});
|
|
185
186
|
}
|
|
186
187
|
},[visible])
|
|
187
188
|
|
|
188
189
|
const panStyle = {
|
|
189
190
|
transform: pan.getTranslateTransform()
|
|
190
191
|
};
|
|
191
|
-
const slideUp = animatedHeight.interpolate({
|
|
192
|
-
inputRange: [0, 1],
|
|
193
|
-
outputRange: [0, height],
|
|
194
|
-
});
|
|
195
192
|
const actionProps = Object.assign({},rest.actionProps);
|
|
196
193
|
const backdropProps = defaultObj(backdropProps);
|
|
197
194
|
//actionProps.size = actionProps.size || 25;
|
|
@@ -257,10 +254,10 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
257
254
|
activeOpacity={1}
|
|
258
255
|
onPress={() => (closeOnPressMask && dismissable !== false ? closeModal() : null)}
|
|
259
256
|
/>
|
|
260
|
-
<
|
|
257
|
+
<Reanimated.View
|
|
261
258
|
{...(!dragFromTopOnly && panResponder.panHandlers)}
|
|
262
259
|
testID = {testID+"_Container"} {...containerProps}
|
|
263
|
-
style={[styles.container,containerProps.style,{
|
|
260
|
+
style={[styles.container,containerProps.style,{borderTopWidth:borderWidth,borderTopColor:borderColor,backgroundColor:theme.colors.surface},Elevations[elevation],panStyle,animatedStyles]}
|
|
264
261
|
>
|
|
265
262
|
{closeOnDragDown && (
|
|
266
263
|
<View
|
|
@@ -293,7 +290,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
293
290
|
<KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>{children}</KeyboardAvoidingView>
|
|
294
291
|
</View>}
|
|
295
292
|
</View>
|
|
296
|
-
</
|
|
293
|
+
</Reanimated.View>
|
|
297
294
|
</View>
|
|
298
295
|
</Portal>
|
|
299
296
|
);
|
|
@@ -329,8 +326,8 @@ BottomSheetComponent.defaultProps = {
|
|
|
329
326
|
animationType: isNativeMobile ? "slide" : "fade",//Background animation ("none", "fade", "slide")
|
|
330
327
|
height:undefined,//Height of Bottom Sheet
|
|
331
328
|
minClosingHeight: 0,//Minimum height of Bottom Sheet before close
|
|
332
|
-
openDuration:
|
|
333
|
-
closeDuration:
|
|
329
|
+
openDuration: 500,//Open Bottom Sheet animation duration
|
|
330
|
+
closeDuration: 500,
|
|
334
331
|
closeOnDragDown: true,//Use gesture drag down to close Bottom Sheet
|
|
335
332
|
dragFromTopOnly: false, //Drag only the top area of the draggableIcon to close Bottom Sheet instead of the whole content
|
|
336
333
|
closeOnPressMask: true, //Press the area outside to close Bottom Sheet
|
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = {"@fto-consult/expo-ui":{"
|
|
1
|
+
module.exports = {"@fto-consult/expo-ui":{"version":"6.41.1","url":"https://github.com/borispipo/expo-ui#readme","license":"ISC"},"@expo/metro-config":{"version":"0.10.7","url":"https://github.com/expo/expo.git","license":"MIT"},"@expo/webpack-config":{"version":"19.0.0","url":"https://github.com/expo/expo-cli.git","license":"MIT"},"babel-plugin-inline-dotenv":{"version":"1.7.0","url":"https://github.com/brysgo/babel-plugin-inline-dotenv#readme","license":"ISC"},"babel-plugin-module-resolver":{"version":"5.0.0","url":"https://github.com/tleunen/babel-plugin-module-resolver.git","license":"MIT"}};
|