@fto-consult/expo-ui 6.28.1 → 6.29.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/app.config.json +1 -1
- package/package.json +2 -2
- package/src/components/Datagrid/Test/index.js +1 -1
- package/src/components/Dialog/Dialog.js +2 -5
- package/src/components/Modal/index.js +6 -4
- package/src/components/Portal/index copy.js +13 -0
- package/src/components/Portal/index.js +3 -12
- package/src/components/SimpleSelect/index.js +1 -1
- package/src/components/TextField/index.js +1 -1
- package/src/index.js +10 -13
- package/src/screens/Help/openLibraries.js +1 -1
- package/src/test-screens/Home.js +0 -2
- package/src/components/FadeInOut/index.js +0 -70
package/app.config.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fto-consult/expo-ui",
|
|
3
|
-
"version": "6.
|
|
3
|
+
"version": "6.29.1",
|
|
4
4
|
"description": "Bibliothèque de composants UI Expo,react-native",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@expo/html-elements": "^0.5.1",
|
|
69
69
|
"@expo/vector-icons": "^13.0.0",
|
|
70
70
|
"@faker-js/faker": "^8.0.2",
|
|
71
|
-
"@fto-consult/common": "^3.29.
|
|
71
|
+
"@fto-consult/common": "^3.29.8",
|
|
72
72
|
"@pchmn/expo-material3-theme": "^1.3.1",
|
|
73
73
|
"@react-native-async-storage/async-storage": "1.18.2",
|
|
74
74
|
"@react-native-community/datetimepicker": "7.2.0",
|
|
@@ -7,7 +7,7 @@ import React from "$react";
|
|
|
7
7
|
import { faker } from '@faker-js/faker';
|
|
8
8
|
export default function TestDatagridComponent({count,...props}){
|
|
9
9
|
const data = React.useMemo(()=>{
|
|
10
|
-
count = typeof count =='number' && count >
|
|
10
|
+
count = typeof count =='number' && count > 5 ? count : 100;
|
|
11
11
|
return faker.helpers.multiple(createRandomUser, {
|
|
12
12
|
count,
|
|
13
13
|
});
|
|
@@ -14,7 +14,6 @@ import DialogTitle from './DialogTitle';
|
|
|
14
14
|
import {MAX_WIDTH,SCREEN_INDENT,MIN_HEIGHT} from "./utils";
|
|
15
15
|
import {isMobileOrTabletMedia,isMobileMedia} from "$cplatform/dimensions";
|
|
16
16
|
import Platform,{isMobileNative} from "$cplatform";
|
|
17
|
-
import Portal from "$ecomponents/Portal";
|
|
18
17
|
import Icon,{BACK_ICON} from "$ecomponents/Icon";
|
|
19
18
|
import {ACTION_ICON_SIZE} from "$ecomponents/AppBar";
|
|
20
19
|
import DialogFooter from "./DialogFooter";
|
|
@@ -183,8 +182,7 @@ const DialogComponent = React.forwardRef((props,ref)=>{
|
|
|
183
182
|
{content}
|
|
184
183
|
</ScrollView>
|
|
185
184
|
}
|
|
186
|
-
return <
|
|
187
|
-
<ModalComponent
|
|
185
|
+
return <ModalComponent
|
|
188
186
|
onDismiss={(e)=>{
|
|
189
187
|
return handleBack(e,false);
|
|
190
188
|
}}
|
|
@@ -272,8 +270,7 @@ const DialogComponent = React.forwardRef((props,ref)=>{
|
|
|
272
270
|
/> : null}
|
|
273
271
|
</Surface>
|
|
274
272
|
</DialogContent>
|
|
275
|
-
|
|
276
|
-
</Portal>
|
|
273
|
+
</ModalComponent>
|
|
277
274
|
});
|
|
278
275
|
export default DialogComponent;
|
|
279
276
|
|
|
@@ -15,6 +15,7 @@ import {
|
|
|
15
15
|
getStatusBarHeight,
|
|
16
16
|
getBottomSpace,
|
|
17
17
|
} from 'react-native-iphone-x-helper';
|
|
18
|
+
import {isMobileNative} from "$cplatform";
|
|
18
19
|
|
|
19
20
|
import {defaultObj} from "$cutils";
|
|
20
21
|
|
|
@@ -40,8 +41,9 @@ const ModalComponent = React.forwardRef((props,ref)=>{
|
|
|
40
41
|
isPreloader,
|
|
41
42
|
children,
|
|
42
43
|
...rest
|
|
43
|
-
|
|
44
|
-
|
|
44
|
+
} = props;
|
|
45
|
+
animate = animate !== false ? isMobileNative() : false;
|
|
46
|
+
rest = defaultObj(rest);
|
|
45
47
|
contentContainerProps = defaultObj(contentContainerProps);
|
|
46
48
|
backdropProps = defaultObj(backdropProps);
|
|
47
49
|
const subscription = React.useRef(null);
|
|
@@ -98,9 +100,9 @@ const ModalComponent = React.forwardRef((props,ref)=>{
|
|
|
98
100
|
},100);
|
|
99
101
|
},[visible]);
|
|
100
102
|
const Anim = React.useMemo(()=>{
|
|
101
|
-
return animate
|
|
103
|
+
return animate ? Animation : View;
|
|
102
104
|
},[animate]);
|
|
103
|
-
const wrapperProps = animate
|
|
105
|
+
const wrapperProps = animate ? {enteringCallback:callback,exitingCallback:callback} : {};
|
|
104
106
|
return !visible?null: <Portal>
|
|
105
107
|
<Anim
|
|
106
108
|
ref={ref}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/***
|
|
2
|
+
* MIT License
|
|
3
|
+
Copyright (c) 2020 Mo Gorhom
|
|
4
|
+
@see : https://github.com/gorhom/react-native-portal
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
export {default} from "./Portal";
|
|
8
|
+
|
|
9
|
+
export {default as PortalHost} from "./PortalHost";
|
|
10
|
+
|
|
11
|
+
export {default as PortalProvider} from "./PortalProvider";
|
|
12
|
+
|
|
13
|
+
export * from "./hooks";
|
|
@@ -1,13 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
* MIT License
|
|
3
|
-
Copyright (c) 2020 Mo Gorhom
|
|
4
|
-
@see : https://github.com/gorhom/react-native-portal
|
|
5
|
-
*/
|
|
1
|
+
import {Portal} from "react-native-paper";
|
|
6
2
|
|
|
7
|
-
export
|
|
8
|
-
|
|
9
|
-
export {default as PortalHost} from "./PortalHost";
|
|
10
|
-
|
|
11
|
-
export {default as PortalProvider} from "./PortalProvider";
|
|
12
|
-
|
|
13
|
-
export * from "./hooks";
|
|
3
|
+
export default Portal;
|
|
4
|
+
export const PortalHost = Portal.Host;
|
|
@@ -289,7 +289,7 @@ const SimpleSelect = React.forwardRef((props,ref)=>{
|
|
|
289
289
|
rippleColor={undefined}
|
|
290
290
|
onLayout={onLayout}
|
|
291
291
|
>
|
|
292
|
-
|
|
292
|
+
{anchor}
|
|
293
293
|
</Pressable>
|
|
294
294
|
const getItemLayout = typeof listProps.itemHeight ==='number' && listProps.itemHeight ? (data, index) => (
|
|
295
295
|
{length: listProps.itemHeight, offset: listProps.itemHeight * index, index}
|
|
@@ -291,7 +291,7 @@ const TextFieldComponent = React.forwardRef((componentProps,inputRef)=>{
|
|
|
291
291
|
const currentDefaultValue = alwaysUseLabel && displayText == emptyValue ? "" : displayText;
|
|
292
292
|
const withAutoHeight = typeof autoHeight === 'boolean'? autoHeight : false;
|
|
293
293
|
const height = withAutoHeight || multiline ? undefined : tHeight;
|
|
294
|
-
const inputStyle2 = withAutoHeight || multiline ? {height : Math.min(heightRef.current,250)} : null;
|
|
294
|
+
const inputStyle2 = withAutoHeight || multiline ? {height : Math.min(Math.max(heightRef.current,MULTIPLE_HEIGHT),250)} : null;
|
|
295
295
|
const containerStyle = StyleSheet.flatten(containerProps.style) || {};
|
|
296
296
|
const inputProps= {
|
|
297
297
|
caretHidden : false,
|
package/src/index.js
CHANGED
|
@@ -27,7 +27,6 @@ import DialogProvider from "$ecomponents/Dialog/Provider";
|
|
|
27
27
|
import SimpleSelect from '$ecomponents/SimpleSelect';
|
|
28
28
|
import {Provider as AlertProvider} from '$ecomponents/Dialog/confirm/Alert';
|
|
29
29
|
import { DialogProvider as FormDataDialogProvider } from '$eform/FormData';
|
|
30
|
-
import {PortalProvider,CustomPortal} from '$ecomponents/Portal';
|
|
31
30
|
import ErrorBoundaryProvider from "$ecomponents/ErrorBoundary/Provider";
|
|
32
31
|
import notify, {notificationRef} from "$notify";
|
|
33
32
|
import DropdownAlert from '$ecomponents/Dialog/DropdownAlert';
|
|
@@ -283,7 +282,7 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount})
|
|
|
283
282
|
},
|
|
284
283
|
}}
|
|
285
284
|
>
|
|
286
|
-
<
|
|
285
|
+
<Portal.Host testID="RN_NativePaperPortalHost">
|
|
287
286
|
<ErrorBoundaryProvider/>
|
|
288
287
|
<PreloaderProvider/>
|
|
289
288
|
<DialogProvider responsive testID={"RN_MainAppDialogProvider"}/>
|
|
@@ -291,17 +290,15 @@ function App({init:initApp,initialRouteName:appInitialRouteName,render,onMount})
|
|
|
291
290
|
<FormDataDialogProvider/>
|
|
292
291
|
<BottomSheetProvider/>
|
|
293
292
|
<DropdownAlert ref={notificationRef}/>
|
|
294
|
-
<
|
|
295
|
-
<
|
|
296
|
-
|
|
297
|
-
<
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
</Portal.Host>
|
|
304
|
-
</PortalProvider>
|
|
293
|
+
<ErrorBoundary>
|
|
294
|
+
<StatusBar/>
|
|
295
|
+
<SplashScreen isLoaded={isLoaded}>
|
|
296
|
+
<PreferencesContext.Provider value={preferences}>
|
|
297
|
+
{React.isValidElement(content) && content || child}
|
|
298
|
+
</PreferencesContext.Provider>
|
|
299
|
+
</SplashScreen>
|
|
300
|
+
</ErrorBoundary>
|
|
301
|
+
</Portal.Host>
|
|
305
302
|
</PaperProvider>
|
|
306
303
|
</GestureHandlerRootView>
|
|
307
304
|
</AuthProvider>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
module.exports = {"@
|
|
1
|
+
module.exports = {"@FTO-CONSULT/EXPO-UI":{"name":"@FTO-CONSULT/EXPO-UI","version":"6.28.1","homepage":"https://github.com/borispipo/expo-ui#readme"}};
|
package/src/test-screens/Home.js
CHANGED
|
@@ -1,70 +0,0 @@
|
|
|
1
|
-
import React, { useEffect, useRef } from "react";
|
|
2
|
-
import { Animated } from "react-native";
|
|
3
|
-
import PropTypes from "prop-types";
|
|
4
|
-
import { StyleProp } from "$theme";
|
|
5
|
-
|
|
6
|
-
const DEFAULT_DURATION = 300;
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
const FadeInOutComponent = React.forwardRef(({
|
|
10
|
-
children,
|
|
11
|
-
visible,
|
|
12
|
-
duration = DEFAULT_DURATION,
|
|
13
|
-
rotate,
|
|
14
|
-
scale,
|
|
15
|
-
style,
|
|
16
|
-
onShow,
|
|
17
|
-
useNativeDriver = true,
|
|
18
|
-
...rest
|
|
19
|
-
},ref) => {
|
|
20
|
-
const fadeAnim = useRef(new Animated.Value(visible ? 1 : 0)).current;
|
|
21
|
-
|
|
22
|
-
useEffect(() => {
|
|
23
|
-
Animated.timing(fadeAnim, {
|
|
24
|
-
toValue: visible ? 1 : 0,
|
|
25
|
-
duration: duration,
|
|
26
|
-
useNativeDriver: useNativeDriver,
|
|
27
|
-
}).start();
|
|
28
|
-
setTimeout(()=>{
|
|
29
|
-
if(visible && onShow){
|
|
30
|
-
onShow();
|
|
31
|
-
}
|
|
32
|
-
},10)
|
|
33
|
-
}, [visible]);
|
|
34
|
-
|
|
35
|
-
const transform = [{ perspective: 1000 }];
|
|
36
|
-
|
|
37
|
-
if (scale) {
|
|
38
|
-
transform.push({ scale: fadeAnim });
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
if (rotate) {
|
|
42
|
-
transform.push({
|
|
43
|
-
rotate: fadeAnim.interpolate({
|
|
44
|
-
inputRange: [0, 1],
|
|
45
|
-
outputRange: ["0deg", "360deg"],
|
|
46
|
-
}),
|
|
47
|
-
});
|
|
48
|
-
}
|
|
49
|
-
rest = Object.assign({},rest);
|
|
50
|
-
return (
|
|
51
|
-
<Animated.View testID={'RN_FadeInOut'} {...rest} ref={ref} style={[style,{ opacity: fadeAnim, transform }]}>
|
|
52
|
-
{children}
|
|
53
|
-
</Animated.View>
|
|
54
|
-
);
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
export default FadeInOutComponent;
|
|
58
|
-
|
|
59
|
-
FadeInOutComponent.propTypes = {
|
|
60
|
-
visible: PropTypes.bool,
|
|
61
|
-
children : PropTypes.any,
|
|
62
|
-
duration : PropTypes.number,
|
|
63
|
-
rotate : PropTypes.bool,
|
|
64
|
-
scale : PropTypes.bool,
|
|
65
|
-
style : StyleProp,
|
|
66
|
-
onShow : PropTypes.func,
|
|
67
|
-
useNativeDriver : PropTypes.bool,
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
FadeInOutComponent.displayName = "FadeInOutComponent";
|