@fto-consult/expo-ui 6.41.1 → 6.42.1
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 +0 -4
- package/metro.config.js +2 -0
- package/package.json +1 -1
- package/src/components/Animation/native/index.js +1 -1
- package/src/components/BottomSheet/Sheet.js +62 -60
- package/src/components/Form/FormData/FormData.js +3 -0
- package/src/components/Form/List/List.js +12 -6
- package/src/layouts/Screen/FormData/List.js +3 -0
- package/src/screens/Help/openLibraries.js +1 -1
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/metro.config.js
CHANGED
package/package.json
CHANGED
|
@@ -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
|
|
@@ -6,7 +6,7 @@ import Label from "$ecomponents/Label";
|
|
|
6
6
|
import { renderActions } from "$ecomponents/Dialog";
|
|
7
7
|
import {isObjOrArray,defaultVal,defaultObj} from "$cutils";
|
|
8
8
|
import {renderSplitedActions} from "$ecomponents/AppBar/utils";
|
|
9
|
-
import {isWeb,isNativeMobile} from "$cplatform";
|
|
9
|
+
import {isWeb,isNativeMobile,isTouchDevice} from "$cplatform";
|
|
10
10
|
import Divider from "$ecomponents/Divider";
|
|
11
11
|
import {isMobileOrTabletMedia} from "$cplatform/dimensions";
|
|
12
12
|
import APP from "$capp/instance";
|
|
@@ -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,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,20 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
75
75
|
} else {
|
|
76
76
|
height = Math.max(winHeight/3,defaultHeight);
|
|
77
77
|
}
|
|
78
|
-
const [
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
});
|
|
78
|
+
const [pan] = React.useState(new Animated.ValueXY());
|
|
79
|
+
const [visible,setVisible] = React.useState(typeof customVisible === 'boolean'?customVisible : false);
|
|
80
|
+
const heightRef = React.useRef(height);
|
|
81
|
+
heightRef.current = height;
|
|
83
82
|
const isMounted = React.useIsMounted();
|
|
84
|
-
const {pan,animatedHeight,visible} = state;
|
|
85
83
|
const prevVisible = React.usePrevious(visible);
|
|
86
|
-
const
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
animatedHeight: new Animated.Value(0)
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
|
|
84
|
+
const animatedHeight = useSharedValue(0);
|
|
85
|
+
const hasCallCallbackRef = React.useState(false);
|
|
86
|
+
const visibleRef = React.useRef(visible);
|
|
87
|
+
visibleRef.current = visible;
|
|
94
88
|
const open = ()=>{
|
|
95
89
|
if(!isMounted() || visible)return;
|
|
96
|
-
|
|
90
|
+
setVisible(true);
|
|
97
91
|
};
|
|
98
|
-
const getAnimValue = ()=>{
|
|
99
|
-
return animatedHeight?.__getValue();
|
|
100
|
-
}
|
|
101
92
|
const subscription = React.useRef(null);
|
|
102
93
|
const handleBack = React.useCallback((e)=>{
|
|
103
94
|
if (dismissable) {
|
|
@@ -120,43 +111,58 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
120
111
|
handleBack
|
|
121
112
|
);
|
|
122
113
|
}
|
|
123
|
-
|
|
114
|
+
|
|
115
|
+
const closeModal = (cb)=>{
|
|
124
116
|
removeListeners();
|
|
125
117
|
if(!isMounted()) return;
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
118
|
+
pan.setValue({ x: 0, y: 0 });
|
|
119
|
+
const callback = ()=>{
|
|
120
|
+
if(hasCallCallbackRef.current) return;
|
|
121
|
+
if(visibleRef.current){
|
|
122
|
+
setVisible(false);
|
|
123
|
+
}
|
|
124
|
+
if(typeof cb =='function'){
|
|
125
|
+
cb();
|
|
126
|
+
}
|
|
127
|
+
hasCallCallbackRef.current = true;
|
|
128
|
+
};
|
|
129
|
+
hasCallCallbackRef.current = false;
|
|
130
|
+
if(animatedHeight.value != 0){
|
|
131
|
+
animatedHeight.value = withTiming(0,{
|
|
132
|
+
duration: closeDuration,
|
|
133
|
+
callback,
|
|
134
|
+
});
|
|
135
|
+
setTimeout(callback,closeDuration+100);
|
|
136
|
+
} else {
|
|
137
|
+
callback();
|
|
129
138
|
}
|
|
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
139
|
}
|
|
140
140
|
const [panResponder] = React.useState(PanResponder.create({
|
|
141
141
|
onStartShouldSetPanResponder: () => closeOnDragDown,
|
|
142
142
|
onPanResponderMove: (e, gestureState) => {
|
|
143
|
-
|
|
144
|
-
|
|
143
|
+
const diff = gestureState.dy > 0 ? animatedHeight.value - gestureState.dy : Math.min(heightRef.current,animatedHeight.value-gestureState.dy);
|
|
144
|
+
if(diff >0 && diff !== animatedHeight.value){
|
|
145
|
+
animatedHeight.value = withTiming(diff,{duration:100});
|
|
145
146
|
}
|
|
146
147
|
},
|
|
147
|
-
onPanResponderRelease: (e, gestureState) => {
|
|
148
|
+
onPanResponderRelease: (e, gestureState) => {
|
|
149
|
+
const height = animatedHeight.value;
|
|
148
150
|
if (height/3 - gestureState.dy < 0) {
|
|
149
151
|
closeModal();
|
|
150
|
-
} else {
|
|
151
|
-
Animated.spring(pan, { toValue: { x: 0, y: 0 }, useNativeDriver}).start();
|
|
152
152
|
}
|
|
153
153
|
}
|
|
154
154
|
}))
|
|
155
|
-
|
|
155
|
+
const animatedStyles = useAnimatedStyle(() => ({
|
|
156
|
+
height : animatedHeight.value,
|
|
157
|
+
transform :[{ translateX: 0 }],
|
|
158
|
+
}));
|
|
156
159
|
React.useEffect(()=>{
|
|
157
160
|
if(typeof customVisible !=='boolean' || customVisible === visible) return;
|
|
158
161
|
if(customVisible){
|
|
159
|
-
|
|
162
|
+
if(animatedHeight.value >0){
|
|
163
|
+
animatedHeight.value = withTiming(0);
|
|
164
|
+
}
|
|
165
|
+
setVisible(true);
|
|
160
166
|
} else {
|
|
161
167
|
closeModal();
|
|
162
168
|
}
|
|
@@ -169,29 +175,25 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
169
175
|
if(visible){
|
|
170
176
|
addListener();
|
|
171
177
|
pan.setValue({ x: 0, y: 0 });
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
178
|
+
animatedHeight.value = withTiming(height,{
|
|
179
|
+
callback : ()=>{
|
|
180
|
+
if (typeof onOpen === "function") onOpen(props)
|
|
181
|
+
},
|
|
175
182
|
duration: openDuration,
|
|
176
|
-
|
|
177
|
-
}).start(()=>{
|
|
178
|
-
if (typeof onOpen === "function") onOpen(props)
|
|
179
|
-
});
|
|
183
|
+
})
|
|
180
184
|
} else {
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
onDismiss
|
|
184
|
-
|
|
185
|
+
closeModal(()=>{
|
|
186
|
+
if (typeof onClose === "function") onClose(props);
|
|
187
|
+
else if(onDismiss){
|
|
188
|
+
onDismiss(props);
|
|
189
|
+
}
|
|
190
|
+
});
|
|
185
191
|
}
|
|
186
192
|
},[visible])
|
|
187
193
|
|
|
188
194
|
const panStyle = {
|
|
189
195
|
transform: pan.getTranslateTransform()
|
|
190
196
|
};
|
|
191
|
-
const slideUp = animatedHeight.interpolate({
|
|
192
|
-
inputRange: [0, 1],
|
|
193
|
-
outputRange: [0, height],
|
|
194
|
-
});
|
|
195
197
|
const actionProps = Object.assign({},rest.actionProps);
|
|
196
198
|
const backdropProps = defaultObj(backdropProps);
|
|
197
199
|
//actionProps.size = actionProps.size || 25;
|
|
@@ -236,7 +238,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
236
238
|
React.setRef(ref,null);
|
|
237
239
|
}
|
|
238
240
|
},[]);
|
|
239
|
-
const dragFromTopOnly = typeof dragFromTopOnly ==='boolean' ? dragFromTopOnly : withScrollView !== false ? true :
|
|
241
|
+
const dragFromTopOnly = typeof dragFromTopOnly ==='boolean' ? dragFromTopOnly : withScrollView !== false ? true : isTouchDevice();
|
|
240
242
|
const testID = defaultStr(customTestID,"RN_BottomSheetComponent");
|
|
241
243
|
const containerProps = defaultObj(customContainerProps);
|
|
242
244
|
const elevation = typeof customElevation =='number'? Math.ceil(customElevation) : 10;
|
|
@@ -257,10 +259,10 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
257
259
|
activeOpacity={1}
|
|
258
260
|
onPress={() => (closeOnPressMask && dismissable !== false ? closeModal() : null)}
|
|
259
261
|
/>
|
|
260
|
-
<
|
|
262
|
+
<Reanimated.View
|
|
261
263
|
{...(!dragFromTopOnly && panResponder.panHandlers)}
|
|
262
264
|
testID = {testID+"_Container"} {...containerProps}
|
|
263
|
-
style={[styles.container,containerProps.style,{
|
|
265
|
+
style={[styles.container,containerProps.style,{borderTopWidth:borderWidth,borderTopColor:borderColor,backgroundColor:theme.colors.surface},Elevations[elevation],panStyle,styles.animated,animatedStyles]}
|
|
264
266
|
>
|
|
265
267
|
{closeOnDragDown && (
|
|
266
268
|
<View
|
|
@@ -293,7 +295,7 @@ const BottomSheetComponent = React.forwardRef((props,ref)=> {
|
|
|
293
295
|
<KeyboardAvoidingView testID={testID+"_KeyboardAvoidingView"}>{children}</KeyboardAvoidingView>
|
|
294
296
|
</View>}
|
|
295
297
|
</View>
|
|
296
|
-
</
|
|
298
|
+
</Reanimated.View>
|
|
297
299
|
</View>
|
|
298
300
|
</Portal>
|
|
299
301
|
);
|
|
@@ -520,7 +520,7 @@ export default class FormListComponent extends AppComponent {
|
|
|
520
520
|
this.restDatagridProps = dgProps;
|
|
521
521
|
this._onRowsClick = dgProps.onRowPress;
|
|
522
522
|
listContent = <Datagrid
|
|
523
|
-
testID = {testID+"
|
|
523
|
+
testID = {testID+"_FormListDatagrid"}
|
|
524
524
|
{...dgProps}
|
|
525
525
|
onRowPress = {this.onRowPress.bind(this)}
|
|
526
526
|
rowKey = {dgProps.rowKey === false || this.props.rowKey === false ? undefined : defaultStr(dgProps.rowKey,this.props.rowKey,dgProps.indexField,this.props.indexField,'_id')}
|
|
@@ -547,8 +547,8 @@ export default class FormListComponent extends AppComponent {
|
|
|
547
547
|
if(!React.isValidElement(addIcon,true)){
|
|
548
548
|
addIcon = isObj(addIcon) ? <Button {...addIconObj} {...addIcon}/> : null;
|
|
549
549
|
}
|
|
550
|
-
listContent = <View testID={testID+"
|
|
551
|
-
<View testID={testID+"
|
|
550
|
+
listContent = <View testID={testID+"_FormList"} {...ListProps} style={[styles.listContainer,ListProps.styles]}>
|
|
551
|
+
<View testID={testID+"_FormListHeaderContainer"} style={[styles.row]}>
|
|
552
552
|
{!isCurrentDisplayTable && addIcon ? <List.Subheader>{addIcon}</List.Subheader> : null}
|
|
553
553
|
{canRenderTable && this.canChangeDisplayType && <List.Subheader >
|
|
554
554
|
<Button
|
|
@@ -561,7 +561,7 @@ export default class FormListComponent extends AppComponent {
|
|
|
561
561
|
</Button>
|
|
562
562
|
</List.Subheader>}
|
|
563
563
|
</View>
|
|
564
|
-
<View testID={testID+"
|
|
564
|
+
<View testID={testID+"_FormListWrapper"} style={[theme.styles.ph1]}>
|
|
565
565
|
<FlashList
|
|
566
566
|
items = {allData}
|
|
567
567
|
responsive
|
|
@@ -647,7 +647,7 @@ export default class FormListComponent extends AppComponent {
|
|
|
647
647
|
</View>
|
|
648
648
|
</View>
|
|
649
649
|
}
|
|
650
|
-
return <View testID={testID+"
|
|
650
|
+
return <View testID={testID+"_FormListContainer"} style={[styles.container]}>
|
|
651
651
|
{listContent}
|
|
652
652
|
</View>
|
|
653
653
|
}
|
|
@@ -792,5 +792,11 @@ const styles = StyleSheet.create({
|
|
|
792
792
|
},
|
|
793
793
|
item : {
|
|
794
794
|
paddingRight : 0,
|
|
795
|
-
}
|
|
795
|
+
},
|
|
796
|
+
listContainer : {
|
|
797
|
+
width : "100%"
|
|
798
|
+
},
|
|
799
|
+
container : {
|
|
800
|
+
width : "100%"
|
|
801
|
+
},
|
|
796
802
|
})
|
|
@@ -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"}};
|