@fto-consult/expo-ui 6.53.3 → 6.54.4
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 +2 -2
- package/src/auth/ThemeSelector/index.js +71 -36
- package/src/components/AppBar/Content.js +3 -2
- package/src/components/AppBar/index.js +4 -6
- package/src/components/AppBar/utils.js +12 -3
- package/src/components/Button/index.js +2 -2
- package/src/components/ContentLoader/Loader/index.js +1 -1
- package/src/components/Datagrid/Common/Common.js +8 -10
- package/src/components/Dialog/Dialog.js +2 -2
- package/src/components/Dialog/confirm/showConfirmOrAlertOrPrompt.js +2 -2
- package/src/components/Dialog/showConfirmOrAlertOrPrompt.js +2 -8
- package/src/components/Fab/Fab.js +2 -2
- package/src/components/Fab/Group.js +4 -4
- package/src/components/List/Virtuoso/index.js +2 -2
- package/src/components/Tooltip/Popover/index.js +1 -1
- package/src/context/Provider.js +16 -6
- package/src/layouts/ProfilAvatar/index.js +1 -1
- package/src/screens/Help/openLibraries.js +1 -1
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fto-consult/expo-ui",
|
3
|
-
"version": "6.
|
3
|
+
"version": "6.54.4",
|
4
4
|
"description": "Bibliothèque de composants UI Expo,react-native",
|
5
5
|
"main": "main",
|
6
6
|
"scripts": {
|
@@ -70,7 +70,7 @@
|
|
70
70
|
"@expo/html-elements": "^0.5.1",
|
71
71
|
"@expo/vector-icons": "^13.0.0",
|
72
72
|
"@faker-js/faker": "^8.0.2",
|
73
|
-
"@fto-consult/common": "^3.
|
73
|
+
"@fto-consult/common": "^3.50.3",
|
74
74
|
"@pchmn/expo-material3-theme": "^1.3.1",
|
75
75
|
"@react-native-async-storage/async-storage": "1.18.2",
|
76
76
|
"@react-native-community/datetimepicker": "7.2.0",
|
@@ -16,8 +16,10 @@ import Icon from "$ecomponents/Icon";
|
|
16
16
|
import {open,close} from "$preloader";
|
17
17
|
import {fields,getThemeData} from "$theme/utils";
|
18
18
|
import {modes} from "$ecomponents/TextField/utils";
|
19
|
-
import {
|
19
|
+
import { useColorScheme } from "react-native";
|
20
|
+
import {createMaterial3Theme,useMaterial3Theme,getMaterial3Theme,isDynamicThemeSupported} from "@pchmn/expo-material3-theme";
|
20
21
|
import notify from "$cnotify";
|
22
|
+
import appConfig from "$capp/config";
|
21
23
|
|
22
24
|
const mColors = [
|
23
25
|
{
|
@@ -56,6 +58,8 @@ const isDocEditing = ({data})=>{
|
|
56
58
|
return data && isNonNullString(data.name)? true : false;
|
57
59
|
};
|
58
60
|
|
61
|
+
|
62
|
+
|
59
63
|
export const getThemeFieldProps = (props,ref)=>{
|
60
64
|
props = defaultObj(props);
|
61
65
|
let {user,showAdd,onValidate,onChange,onUpsert,...rest} = props;
|
@@ -68,24 +72,65 @@ export const getThemeFieldProps = (props,ref)=>{
|
|
68
72
|
const userThemeName = defaultStr(userTheme.name,defaultTheme.name);
|
69
73
|
const isDark = theme.isDark() || theme.isDarkUI();
|
70
74
|
const defTheme = isDark ? {...defaultDarkTheme.colors,dark:true} : {...defaultLightTheme.colors,dark:false};
|
71
|
-
const
|
72
|
-
|
73
|
-
if(
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
75
|
+
const colorScheme = useColorScheme();
|
76
|
+
const prepareTheme = (_theme)=>{
|
77
|
+
if(!isObj(_theme)) return _theme;
|
78
|
+
const dark = _theme.dark;
|
79
|
+
const cols = dark ? darkColors : lightColors;
|
80
|
+
_theme.divider = Colors.isValid(_theme.divider)? _theme.divider : cols.divider;
|
81
|
+
_theme.text = Colors.isValid(_theme.text) ? _theme.text : _theme.onBackground || _theme.onSurface;
|
82
|
+
["primary","secondary"].map((p)=>{
|
83
|
+
const k = `on${p.ucFirst()}`;
|
84
|
+
if(_theme[k] && _theme[p]){
|
85
|
+
if(Colors.getContrast(_theme[k]) === Colors.getContrast(_theme[p])){
|
86
|
+
_theme[k] = dark ? Colors.lighten(_theme[k]) : Colors.darken(_theme[k]);
|
87
|
+
}
|
88
|
+
}
|
89
|
+
});
|
90
|
+
["warning","error","info","success","divider"].map((c)=>{
|
91
|
+
if(!Colors.isValid(_theme[c])){
|
92
|
+
_theme[c] = cols[c];
|
93
|
+
}
|
94
|
+
const onKey = `on${c.ucFirst()}`;
|
95
|
+
_theme[onKey] = _theme[onKey] || cols[onKey];
|
96
|
+
});
|
97
|
+
if(!Colors.isValid(_theme.primaryOnSurface)){
|
98
|
+
if( Colors.getContrast(_theme.primary) === Colors.getContrast(_theme.onSurface)){
|
99
|
+
_theme.primaryOnSurface = _theme.primary;
|
100
|
+
} else {
|
101
|
+
_theme.primaryOnSurface = _theme.onSurface;
|
102
|
+
}
|
87
103
|
}
|
88
|
-
|
104
|
+
if(!Colors.isValid(_theme.secondaryOnSurface)){
|
105
|
+
if(Colors.getContrast(_theme.secondary) == Colors.getContrast(_theme.onSurface)){
|
106
|
+
_theme.secondaryOnSurface = _theme.secondary
|
107
|
+
} else {
|
108
|
+
_theme.secondaryOnSurface = _theme.onSurface;
|
109
|
+
}
|
110
|
+
}
|
111
|
+
return _theme;
|
112
|
+
}
|
113
|
+
const customColors = React.useMemo(()=>{
|
114
|
+
const colors = getColors({withNamed:false});
|
115
|
+
const namedColors = getColors({withDefaults:false});
|
116
|
+
const nColors = {};
|
117
|
+
mColors.map((c,index)=>{
|
118
|
+
try {
|
119
|
+
const name = `custom${index+1}`;
|
120
|
+
['light','dark'].map((sheme)=>{
|
121
|
+
const n = `${name}-${sheme}`;
|
122
|
+
const t = getMaterial3Theme(c[sheme]);
|
123
|
+
nColors[n] = prepareTheme({
|
124
|
+
name:n,
|
125
|
+
primaryName : c[sheme],
|
126
|
+
secondaryName : n,
|
127
|
+
...t[sheme],
|
128
|
+
dark:sheme ==="dark",
|
129
|
+
});
|
130
|
+
});
|
131
|
+
} catch(e){console.log(e," preparing theme")}
|
132
|
+
});
|
133
|
+
return {...colors,...nColors,...namedColors};
|
89
134
|
},[]);
|
90
135
|
const itemsRef = React.useRef({...defaultObj(user.customThemes),...customColors});
|
91
136
|
fields.textFieldMode = {
|
@@ -93,8 +138,10 @@ export const getThemeFieldProps = (props,ref)=>{
|
|
93
138
|
items : {...modes,none:{code:'',label:'Dynamique'}},
|
94
139
|
text : 'Mode d\'affichage des champs de texte'
|
95
140
|
}
|
141
|
+
fields.dark = Object.assign({},fields.dark);
|
142
|
+
fields.dark.defaultValue = colorScheme =="dark"? 1 : 0;
|
96
143
|
const showThemeExplorer = (data)=>{
|
97
|
-
data = defaultObj(data,defTheme);
|
144
|
+
const dat2 = data = defaultObj(data,defTheme);
|
98
145
|
fields.name.disabled = ({data})=> data && isNonNullString(data.name);
|
99
146
|
const title = data && data.name ? ("Modifier ["+data.name+"]") : ('Nouv theme['+loginId+"]");
|
100
147
|
const isEditing = isDocEditing(data);
|
@@ -172,23 +219,11 @@ export const getThemeFieldProps = (props,ref)=>{
|
|
172
219
|
onSuccess : ({data})=>{
|
173
220
|
try {
|
174
221
|
const theme = createMaterial3Theme(data.color)
|
175
|
-
const dat = {...data,...Object.assign({},(data.dark? theme.dark : theme?.light))};
|
176
|
-
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
dat[c] = cols[c];
|
181
|
-
const onKey = `on${c.ucFirst()}`;
|
182
|
-
dat[onKey] = dat[onKey] || cols[onKey];
|
183
|
-
}
|
184
|
-
})
|
185
|
-
if(isObj(dat)){
|
186
|
-
delete dat.color;
|
187
|
-
//Provider.close();
|
188
|
-
setTimeout(()=>{
|
189
|
-
showThemeExplorer(dat);
|
190
|
-
},500);
|
191
|
-
}
|
222
|
+
const dat = prepareTheme({...data,...Object.assign({},(data.dark? theme.dark : theme?.light))});
|
223
|
+
delete dat.color;
|
224
|
+
setTimeout(()=>{
|
225
|
+
showThemeExplorer(dat);
|
226
|
+
},200);
|
192
227
|
} catch(e){
|
193
228
|
notify.error(e);
|
194
229
|
Provider.close();
|
@@ -9,6 +9,7 @@ import Label from "$ecomponents/Label";
|
|
9
9
|
import theme,{Colors} from "$theme";
|
10
10
|
import {isIos,isWeb} from "$cplatform";
|
11
11
|
import {defaultObj,defaultStr} from "$cutils";
|
12
|
+
import { getThemeColors} from './utils';
|
12
13
|
const AppbarContent = ({
|
13
14
|
color: titleColor,
|
14
15
|
subtitle,
|
@@ -26,8 +27,8 @@ const AppbarContent = ({
|
|
26
27
|
testID,
|
27
28
|
...rest
|
28
29
|
}) => {
|
29
|
-
|
30
|
-
const titleTextColor = Colors.isValid(titleColor) ? titleColor :
|
30
|
+
const {color:tColor} = getThemeColors();
|
31
|
+
const titleTextColor = Colors.isValid(titleColor) ? titleColor : tColor;
|
31
32
|
titleProps = defaultObj(titleProps);
|
32
33
|
subtitleProps = defaultObj(subtitleProps);
|
33
34
|
testID = defaultStr(testID)+"_RN_AppBarContent";
|
@@ -2,7 +2,7 @@ import React from "$react"
|
|
2
2
|
import { Appbar} from 'react-native-paper';
|
3
3
|
import {defaultObj,defaultVal,defaultStr} from "$cutils";
|
4
4
|
import APP from "$capp/instance"
|
5
|
-
import {isSplitedActions,renderSplitedActions,splitActions,TITLE_FONT_SIZE} from "./utils";
|
5
|
+
import {isSplitedActions,renderSplitedActions,splitActions,TITLE_FONT_SIZE,getThemeColors} from "./utils";
|
6
6
|
import theme,{Colors,flattenStyle} from "$theme";
|
7
7
|
import {StyleSheet} from "react-native";
|
8
8
|
import {goBack as navGoBack,useNavigation,useRoute,useScreenOptions } from "$cnavigation";
|
@@ -42,10 +42,8 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
|
|
42
42
|
route = defaultObj(route,useRoute());
|
43
43
|
options = defaultObj(options,useScreenOptions());
|
44
44
|
const navigation = useNavigation();
|
45
|
-
const
|
46
|
-
const
|
47
|
-
backgroundColor = isDark? theme.colors.surface : theme.colors.primary;
|
48
|
-
const anchorStyle = {color:primaryText};
|
45
|
+
const {onPrimary,backgroundColor} = getThemeColors();
|
46
|
+
const anchorStyle = {color:onPrimary};
|
49
47
|
const params = defaultObj(route.params);
|
50
48
|
appBarProps = Object.assign({},appBarProps);
|
51
49
|
const getCallAgs = ()=>{
|
@@ -120,7 +118,7 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
|
|
120
118
|
{backAction}
|
121
119
|
<Content {...defaultObj(appBarProps.contentProps)}
|
122
120
|
title={title}
|
123
|
-
titleProps = {{...titleProps,style:[styles.title,{color:
|
121
|
+
titleProps = {{...titleProps,style:[styles.title,{color:onPrimary},titleProps.style]}}
|
124
122
|
subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
|
125
123
|
subtitleProps = {subtitleProps}
|
126
124
|
testID={testID+"_Content"}
|
@@ -20,17 +20,26 @@ export const getMaxActions = (windowWidth) => {
|
|
20
20
|
|
21
21
|
export const isSplitedActions = (actions)=> isObj(actions) && Array.isArray(actions.actions) && Array.isArray(actions.menus);
|
22
22
|
|
23
|
+
export const getThemeColors = ()=>{
|
24
|
+
const isDark = theme.isDark() || theme.colors.dark ,onPrimary = isDark? theme.colors.onSurface : theme.colors.onPrimary;
|
25
|
+
return {
|
26
|
+
onPrimary,
|
27
|
+
color : onPrimary,
|
28
|
+
backgroundColor : isDark? theme.colors.surface : theme.colors.primary
|
29
|
+
}
|
30
|
+
}
|
31
|
+
|
23
32
|
const renderAction = ({action,isAlert,actionProps,opts,isAppBarAction,isAppBarActionStyle,key,ActionComponent,isMobile}) => {
|
24
33
|
let {Component,isFormAction,...rest} = action;
|
25
34
|
actionProps = defaultObj(actionProps);
|
26
35
|
rest = Object.assign({},rest);
|
27
36
|
rest.accessibilityLabel = defaultStr(rest.accessibilityLabel,rest.title,rest.text,rest.label,rest.children);
|
28
|
-
const color =
|
37
|
+
const {color} = getThemeColors();
|
29
38
|
|
30
39
|
rest.style = {...defaultObj(StyleSheet.flatten(actionProps.style)),elevation:0,...defaultObj(StyleSheet.flatten(rest.style))};
|
31
40
|
if(isAppBarActionStyle !== false && (isAppBarAction || opts.isAppBarAction)){
|
32
|
-
rest.color =
|
33
|
-
rest.style.color = defaultVal(rest.style.color,color)
|
41
|
+
rest.color = defaultStr(color);
|
42
|
+
rest.style.color = defaultVal(rest.style.color,color);
|
34
43
|
}
|
35
44
|
if(isAppBarAction && isMobile){
|
36
45
|
rest.tooltip = defaultVal(rest.title,rest.label,rest.text);
|
@@ -145,7 +145,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
|
|
145
145
|
|
146
146
|
labelStyle = StyleSheet.flatten([labelStyle]);
|
147
147
|
const disabled = isDisabled || isLoading;
|
148
|
-
let textColor = Colors.isValid(style.color)? style.color : Colors.isValid(buttonColor)?buttonColor : isCancelButton? theme.colors.
|
148
|
+
let textColor = Colors.isValid(style.color)? style.color : Colors.isValid(buttonColor)?buttonColor : isCancelButton? theme.colors.onError : Colors.isValid(labelStyle.color) ? labelStyle.color : theme.colors.primary,
|
149
149
|
borderWidth;
|
150
150
|
const restButtonStyle = {
|
151
151
|
opacity : disabled ? DISABLED_OPACITY : undefined
|
@@ -156,7 +156,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
|
|
156
156
|
contentProps = defaultObj(contentProps);
|
157
157
|
if (!disabled && hasElevation) {
|
158
158
|
backgroundColor = Colors.isValid(style.backgroundColor)?style.backgroundColor : Colors.isValid(backgroundColor)? backgroundColor : isCancelButton ? style.backgroundColor = theme.colors.error : undefined;
|
159
|
-
borderColor = Colors.isValid(style.borderColor)? style.borderColor : isCancelButton ? theme.styles.
|
159
|
+
borderColor = Colors.isValid(style.borderColor)? style.borderColor : isCancelButton ? theme.styles.onError : Colors.isValid(borderColor)? borderColor : undefined;
|
160
160
|
}
|
161
161
|
if(theme.isDark() && !hasElevation){
|
162
162
|
textColor = white;
|
@@ -7,7 +7,7 @@ export * from "./RLoader";
|
|
7
7
|
|
8
8
|
const RContentLoader = React.forwardRef((props,ref)=>{
|
9
9
|
const rest = theme.isDark()? {
|
10
|
-
backgroundColor : theme.colors.
|
10
|
+
backgroundColor : theme.colors.onSurface,
|
11
11
|
foregroundColor : theme.colors.text,
|
12
12
|
} : {};
|
13
13
|
return <ContentLoader
|
@@ -2390,20 +2390,16 @@ export default class CommonDatagridComponent extends AppComponent {
|
|
2390
2390
|
const showFooters = true;
|
2391
2391
|
const displayOnlySectionListHeaders = !!!this.state.displayOnlySectionListHeaders;
|
2392
2392
|
this.setSessionData("displayOnlySectionListHeaders",displayOnlySectionListHeaders);
|
2393
|
+
this.toggleHidePreloaderOnRender(true);
|
2393
2394
|
if(!displayOnlySectionListHeaders){
|
2394
2395
|
return this.setIsLoading(true,()=>{
|
2395
2396
|
this.prepareData({data:this.INITIAL_STATE.data,displayOnlySectionListHeaders},(state)=>{
|
2396
2397
|
this.setState({...state,showFooters});
|
2397
2398
|
})
|
2398
|
-
})
|
2399
|
+
},true);
|
2399
2400
|
} else {
|
2400
2401
|
this.setIsLoading(true,()=>{
|
2401
|
-
const data =
|
2402
|
-
this.state.data.map((d)=>{
|
2403
|
-
if(isObj(d) && d.isSectionListHeader === true){
|
2404
|
-
data.push(d);
|
2405
|
-
}
|
2406
|
-
});
|
2402
|
+
const data = this.state.data.filter((d)=>d?.isSectionListHeader === true);
|
2407
2403
|
this.setState({data,displayOnlySectionListHeaders,showFooters});
|
2408
2404
|
},true)
|
2409
2405
|
}
|
@@ -3574,7 +3570,9 @@ export default class CommonDatagridComponent extends AppComponent {
|
|
3574
3570
|
this[this.hidePreloaderOnRenderKey] = !!toggle;
|
3575
3571
|
}
|
3576
3572
|
onRender(){
|
3577
|
-
if(!this.canHidePreloaderOnRender() && this.isTableData() && this.canFetchOnlyVisibleColumns())
|
3573
|
+
if(!this.canHidePreloaderOnRender() && this.isTableData() && this.canFetchOnlyVisibleColumns()) {
|
3574
|
+
return;
|
3575
|
+
}
|
3578
3576
|
if(typeof this.props.onRender ==='function' && this.props.onRender({context:this}) === false){
|
3579
3577
|
return ;
|
3580
3578
|
}
|
@@ -3605,8 +3603,8 @@ export default class CommonDatagridComponent extends AppComponent {
|
|
3605
3603
|
this.isRenderingRef.current = true;
|
3606
3604
|
} else if(this.isRenderingRef.current === true){
|
3607
3605
|
return setTimeout(cb,timeout);;
|
3608
|
-
|
3609
|
-
|
3606
|
+
}
|
3607
|
+
return this.progressBarRef.current.setIsLoading(loading,()=>{
|
3610
3608
|
setTimeout(cb,timeout);
|
3611
3609
|
});
|
3612
3610
|
} else {
|
@@ -15,7 +15,7 @@ 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
17
|
import Icon,{BACK_ICON} from "$ecomponents/Icon";
|
18
|
-
import {ACTION_ICON_SIZE} from "$ecomponents/AppBar";
|
18
|
+
import {ACTION_ICON_SIZE,getThemeColors} from "$ecomponents/AppBar";
|
19
19
|
import DialogFooter from "./DialogFooter";
|
20
20
|
import { Dimensions } from "react-native";
|
21
21
|
import Surface from "$ecomponents/Surface";
|
@@ -88,7 +88,7 @@ const DialogComponent = React.forwardRef((props,ref)=>{
|
|
88
88
|
appBarProps = defaultObj(appBarProps);
|
89
89
|
subtitle = subtitle !== false ? defaultVal(appBarProps.subtitle,modalProps.subtitle,subtitle) : null;
|
90
90
|
backActionProps = Object.assign({},backActionProps);
|
91
|
-
backActionProps.color = Colors.isValid(backActionProps.color)? backActionProps.color :
|
91
|
+
backActionProps.color = Colors.isValid(backActionProps.color)? backActionProps.color : getThemeColors().onPrimary;
|
92
92
|
cancelButton = cancelButton === false || modalProps.cancelButton === false ? null : isObj(cancelButton)? {...cancelButton} : {};
|
93
93
|
if(isNonNullString(no)){
|
94
94
|
no = {label:no};
|
@@ -70,7 +70,7 @@ export default function showConfirm (p,cb){
|
|
70
70
|
no.text = defaultStr(no.text,'Non');
|
71
71
|
const {onPress} = no;
|
72
72
|
no.testID = testID+"_NoCancelButton";
|
73
|
-
no.style = [{color:theme.colors.
|
73
|
+
no.style = [{color:theme.colors.onError,backgroundColor:theme.colors.error},no.style];
|
74
74
|
no.onPress = (args)=>{
|
75
75
|
args = React.getOnPressArgs(args);
|
76
76
|
setArgsValue(args);
|
@@ -83,7 +83,7 @@ export default function showConfirm (p,cb){
|
|
83
83
|
yes = defaultObj(yes,ok)
|
84
84
|
yes.text = defaultStr(yes.text,alert?'OK':'Oui');
|
85
85
|
yes.testID = testID+"_YesOkButton";
|
86
|
-
yes.style = [{color:theme.colors.
|
86
|
+
yes.style = [{color:theme.colors.onPrimary,backgroundColor:theme.colors.primary},yes.style]
|
87
87
|
const {onPress} = yes;
|
88
88
|
yes.onPress = (args)=>{
|
89
89
|
args = React.getOnPressArgs(args);
|
@@ -42,19 +42,13 @@ export default function showConfirm (p,cb){
|
|
42
42
|
no = defaultObj(no)
|
43
43
|
if(!alert && no !== false){
|
44
44
|
no.text = defaultStr(no.text,'Non')
|
45
|
-
|
46
|
-
no.onClick = defaultFunc(onCancel,cb);
|
47
|
-
}*/
|
48
|
-
no.style = flattenStyle([{color:theme.secondaryText,backgroundColor:theme.secondary},no.style]);
|
45
|
+
no.style = flattenStyle([{color:theme.colors.onSecondary,backgroundColor:theme.colors.secondary},no.style]);
|
49
46
|
buttons.push(no);
|
50
47
|
} else no = null;
|
51
48
|
if(yes !== false){
|
52
49
|
yes = defaultObj(yes,ok)
|
53
50
|
yes.text = defaultStr(yes.text,alert?'OK':'Oui');
|
54
|
-
yes.style = flattenStyle([{color:theme.
|
55
|
-
/*if(typeof yes.onClick !=='function'){
|
56
|
-
yes.onClick = defaultFunc(onSuccess,cb);
|
57
|
-
}*/
|
51
|
+
yes.style = flattenStyle([{color:theme.colors.onPrimary,backgroundColor:theme.colors.primary},yes.style]);
|
58
52
|
buttons.push(yes);
|
59
53
|
}
|
60
54
|
} else {
|
@@ -13,10 +13,10 @@ const FabComponent = React.forwardRef((props,ref)=>{
|
|
13
13
|
let backgroundColor = Colors.isValid(style.backgroundColor)? style.backgroundColor : undefined;
|
14
14
|
if(!backgroundColor || primary){
|
15
15
|
backgroundColor = theme.colors.primary;
|
16
|
-
color = theme.colors.
|
16
|
+
color = theme.colors.onPrimary;
|
17
17
|
} else if(secondary){
|
18
18
|
backgroundColor = theme.colors.secondary;
|
19
|
-
color = theme.colors.
|
19
|
+
color = theme.colors.onSecondary;
|
20
20
|
}
|
21
21
|
return <FAB
|
22
22
|
testID='RN_FabComponent'
|
@@ -165,10 +165,10 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
|
|
165
165
|
color = Colors.isValid(color)? color : undefined;
|
166
166
|
if(!backgroundColor || primary){
|
167
167
|
backgroundColor = theme.colors.primary;
|
168
|
-
color = theme.colors.
|
168
|
+
color = theme.colors.onPrimary;
|
169
169
|
} else if(secondary){
|
170
170
|
backgroundColor = theme.colors.secondary;
|
171
|
-
color = theme.colors.
|
171
|
+
color = theme.colors.onSecondary;
|
172
172
|
}
|
173
173
|
const actions = React.useMemo(()=>{
|
174
174
|
if(!open) return []
|
@@ -183,9 +183,9 @@ const FabGroupComponent = React.forwardRef((props,innerRef)=>{
|
|
183
183
|
if(typeof isAllowed =='function' && isAllowed() === false) return null;
|
184
184
|
if(isNonNullString(perm) && !isAllowedFromStr(perm)) return false;
|
185
185
|
if(primary){
|
186
|
-
restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.
|
186
|
+
restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.onPrimary,backgroundColor:theme.colors.primary}])
|
187
187
|
} else if(secondary){
|
188
|
-
restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.
|
188
|
+
restItem.style = StyleSheet.flatten([restItem.style,{color:theme.colors.onSecondary,backgroundColor:theme.colors.secondary}])
|
189
189
|
}
|
190
190
|
if(isAllowed === false) return null;
|
191
191
|
actions.push(restItem);
|
@@ -139,9 +139,9 @@ const VirtuosoListComponent = React.forwardRef(({onRender,id,tableHeadId,fixedHe
|
|
139
139
|
window.removeEventListener('scroll', handleScroll,true);
|
140
140
|
}
|
141
141
|
},[]);
|
142
|
-
React.useOnRender((
|
142
|
+
React.useOnRender((...args)=>{
|
143
143
|
updateTableHeadCss();
|
144
|
-
if(onRender && onRender(
|
144
|
+
if(onRender && onRender(...args));
|
145
145
|
},Math.max(Array.isArray(items) && items.length/10 || 0,500));
|
146
146
|
const listP = responsive ? {
|
147
147
|
listClassName : classNames(listClassName,"rn-virtuoso-list",responsive && gridClassName)
|
@@ -167,7 +167,7 @@ const TooltipPopoverComponent = React.forwardRef(({
|
|
167
167
|
>
|
168
168
|
<Label
|
169
169
|
onLayout={onInnerContentLayout}
|
170
|
-
style={[{color:theme.colors.
|
170
|
+
style={[{color:theme.colors.onPrimary,backgroundColor:theme.colors.primary,padding:10,borderRadius:5}]}>{content}</Label>
|
171
171
|
</View>
|
172
172
|
</Pressable>
|
173
173
|
</View>
|
package/src/context/Provider.js
CHANGED
@@ -1,9 +1,10 @@
|
|
1
1
|
import React from "$react";
|
2
2
|
import appConfig from "$capp/config";
|
3
3
|
import {MD3LightTheme,MD3DarkTheme} from "react-native-paper";
|
4
|
-
import { useMaterial3Theme
|
4
|
+
import { useMaterial3Theme,isDynamicThemeSupported} from '@pchmn/expo-material3-theme';
|
5
|
+
import { useColorScheme } from 'react-native';
|
5
6
|
import {colorsAlias,Colors} from "$theme";
|
6
|
-
import {isObj,isNonNullString,defaultStr} from "$cutils";
|
7
|
+
import {isObj,isNonNullString,defaultStr,extendObj} from "$cutils";
|
7
8
|
import {getMainScreens} from "$escreens/mainScreens";
|
8
9
|
import {ExpoUIContext} from "./hooks";
|
9
10
|
import Login from "$eauth/Login";
|
@@ -60,10 +61,13 @@ const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,c
|
|
60
61
|
if(convertFiltersToSQL !== undefined){
|
61
62
|
appConfig.set("convertFiltersToSQL",convertFiltersToSQL);
|
62
63
|
}
|
63
|
-
|
64
|
-
|
64
|
+
const colorScheme = useColorScheme();
|
65
|
+
const isColorShemeDark = colorScheme ==="dark";
|
66
|
+
appConfig.extendAppTheme = (theme,Theme,...rest)=>{
|
65
67
|
if(!isObj(theme)) return;
|
66
|
-
const
|
68
|
+
const isDark = theme.dark || theme.isDark || isDynamicThemeSupported && isColorShemeDark ;
|
69
|
+
const elevation = defaultObj(theme.elevation,isDark ? pTheme.dark?.elevation : pTheme.light?.elevation)
|
70
|
+
const newTheme = isDark ? { ...MD3DarkTheme, colors: pTheme.dark } : { ...MD3LightTheme, colors: pTheme.light };
|
67
71
|
for(let i in newTheme){
|
68
72
|
if(i !== 'colors' && !(i in theme)){
|
69
73
|
theme[i] = newTheme[i];
|
@@ -87,9 +91,15 @@ const Provider = ({children,getTableData,handleHelpScreen,navigation,swrConfig,c
|
|
87
91
|
}
|
88
92
|
}
|
89
93
|
theme.fonts = newTheme.fonts;
|
90
|
-
const r = typeof extendAppTheme == 'function'? extendAppTheme(theme) : theme;
|
94
|
+
const r = typeof extendAppTheme == 'function'? extendAppTheme(theme,Theme,...rest) : theme;
|
91
95
|
const _theme = (isObj(r) ? r : theme);
|
92
96
|
const customCSS = _theme.customCSS;
|
97
|
+
extendObj(Theme,{
|
98
|
+
elevations : elevation,
|
99
|
+
elevation,
|
100
|
+
colorScheme,
|
101
|
+
isDynamicThemeSupported,
|
102
|
+
})
|
93
103
|
return {
|
94
104
|
..._theme,
|
95
105
|
get customCSS(){
|
@@ -109,7 +109,7 @@ const UserProfileAvatarComponent = React.forwardRef(({drawerRef,chevronIconProps
|
|
109
109
|
secondary : true,
|
110
110
|
...customChevronIconProps,
|
111
111
|
...aProps,
|
112
|
-
style : [styles.icon,withLabel=== false && {color:theme.colors.
|
112
|
+
style : [styles.icon,withLabel=== false && {color:theme.colors.onPrimary},customChevronIconProps.style],
|
113
113
|
}
|
114
114
|
if(!withLabel){
|
115
115
|
return <View testID={"RNProfilAvatar_AvatarContainer"} style={[theme.styles.row,theme.styles.alignItemsCenter]}>
|
@@ -1 +1 @@
|
|
1
|
-
module.exports = {"@fto-consult/expo-ui":{"name":"@fto-consult/expo-ui","version":"6.
|
1
|
+
module.exports = {"@fto-consult/expo-ui":{"name":"@fto-consult/expo-ui","version":"6.54.3","repository":{"type":"git","url":"git+https://github.com/borispipo/expo-ui.git"},"homepage":"https://github.com/borispipo/expo-ui#readme"},"@emotion/native":{"version":"11.11.0","url":"https://emotion.sh","license":"MIT"},"@emotion/react":{"version":"11.11.1","url":"https://github.com/emotion-js/emotion/tree/main/packages/react","license":"MIT"},"@expo/html-elements":{"version":"0.5.1","url":"https://github.com/expo/expo/tree/main/packages/html-elements","license":"MIT"},"@expo/metro-config":{"version":"0.10.7","url":"https://github.com/expo/expo.git","license":"MIT"},"@expo/vector-icons":{"version":"13.0.0","url":"https://expo.github.io/vector-icons","license":"MIT"},"@expo/webpack-config":{"version":"19.0.0","url":"https://github.com/expo/expo-cli.git","license":"MIT"},"@faker-js/faker":{"version":"8.0.2","url":"https://github.com/faker-js/faker.git","license":"MIT"},"@fto-consult/common":{"version":"3.50.3","url":"https://github.com/borispipo/common#readme","license":"ISC"},"@pchmn/expo-material3-theme":{"version":"1.3.1","url":"https://github.com/pchmn/expo-material3-theme#readme","license":"MIT"},"@react-native-async-storage/async-storage":{"version":"1.18.2","url":"https://github.com/react-native-async-storage/async-storage#readme","license":"MIT"},"@react-native-community/datetimepicker":{"version":"7.2.0","url":"https://github.com/react-native-community/datetimepicker#readme","license":"MIT"},"@react-native-community/netinfo":{"version":"9.3.10","url":"https://github.com/react-native-netinfo/react-native-netinfo#readme","license":"MIT"},"@react-native/assets-registry":{"version":"0.72.0","url":"git@github.com:facebook/react-native.git","license":"MIT"},"@react-navigation/native":{"version":"6.1.8","url":"https://reactnavigation.org","license":"MIT"},"@react-navigation/native-stack":{"version":"6.9.14","url":"https://github.com/software-mansion/react-native-screens#readme","license":"MIT"},"@react-navigation/stack":{"version":"6.3.18","url":"https://reactnavigation.org/docs/stack-navigator/","license":"MIT"},"@shopify/flash-list":{"version":"1.4.3","url":"https://shopify.github.io/flash-list/","license":"MIT"},"apexcharts":{"version":"3.43.0","url":"https://apexcharts.com","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"},"expo":{"version":"49.0.13","url":"https://github.com/expo/expo/tree/main/packages/expo","license":"MIT"},"expo-camera":{"version":"13.4.4","url":"https://docs.expo.dev/versions/latest/sdk/camera/","license":"MIT"},"expo-clipboard":{"version":"4.3.1","url":"https://docs.expo.dev/versions/latest/sdk/clipboard","license":"MIT"},"expo-font":{"version":"11.4.0","url":"https://docs.expo.dev/versions/latest/sdk/font/","license":"MIT"},"expo-image-picker":{"version":"14.3.2","url":"https://docs.expo.dev/versions/latest/sdk/imagepicker/","license":"MIT"},"expo-linking":{"version":"5.0.2","url":"https://docs.expo.dev/versions/latest/sdk/linking","license":"MIT"},"expo-sqlite":{"version":"11.3.3","url":"https://docs.expo.dev/versions/latest/sdk/sqlite/","license":"MIT"},"expo-status-bar":{"version":"1.6.0","url":"https://docs.expo.dev/versions/latest/sdk/status-bar/","license":"MIT"},"expo-system-ui":{"version":"2.4.0","url":"https://docs.expo.dev/versions/latest/sdk/system-ui","license":"MIT"},"expo-web-browser":{"version":"12.3.2","url":"https://docs.expo.dev/versions/latest/sdk/webbrowser/","license":"MIT"},"file-saver":{"version":"2.0.5","url":"https://github.com/eligrey/FileSaver.js#readme","license":"MIT"},"fs-extra":{"version":"11.1.1","url":"https://github.com/jprichardson/node-fs-extra","license":"MIT"},"google-libphonenumber":{"version":"3.2.33","url":"https://ruimarinho.github.io/google-libphonenumber/","license":"(MIT AND Apache-2.0)"},"htmlparser2-without-node-native":{"version":"3.9.2","url":"git://github.com/fb55/htmlparser2.git","license":"MIT"},"is-plain-obj":{"version":"4.1.0","license":"MIT"},"js-base64":{"version":"3.7.5","license":"BSD-3-Clause"},"pdfmake":{"version":"0.2.7","url":"http://pdfmake.org","license":"MIT"},"process":{"version":"0.11.10","url":"git://github.com/shtylman/node-process.git","license":"MIT"},"prop-types":{"version":"15.8.1","url":"https://facebook.github.io/react/","license":"MIT"},"react":{"version":"18.2.0","url":"https://reactjs.org/","license":"MIT"},"react-content-loader":{"version":"6.2.1","url":"https://github.com/danilowoz/react-content-loader","license":"MIT"},"react-dom":{"version":"18.2.0","url":"https://reactjs.org/","license":"MIT"},"react-native":{"version":"0.72.5","license":"MIT"},"react-native-big-list":{"version":"1.6.1","url":"https://marcocesarato.github.io/react-native-big-list-docs/","license":"GPL-3.0-or-later"},"react-native-blob-util":{"version":"0.18.6","url":"https://github.com/RonRadtke/react-native-blob-util","license":"MIT"},"react-native-gesture-handler":{"version":"2.12.1","url":"https://github.com/software-mansion/react-native-gesture-handler#readme","license":"MIT"},"react-native-iphone-x-helper":{"version":"1.3.1","url":"https://github.com/ptelad/react-native-iphone-x-helper#readme","license":"MIT"},"react-native-mime-types":{"version":"2.4.0","license":"MIT"},"react-native-mmkv":{"version":"2.10.2","url":"https://github.com/mrousavy/react-native-mmkv#readme","license":"(MIT AND BSD-3-Clause)"},"react-native-paper":{"version":"5.10.6","url":"https://callstack.github.io/react-native-paper","license":"MIT"},"react-native-paper-dates":{"version":"0.19.7","url":"https://github.com/web-ridge/react-native-paper-dates#readme","license":"MIT"},"react-native-reanimated":{"version":"3.3.0","url":"https://github.com/software-mansion/react-native-reanimated#readme","license":"MIT"},"react-native-safe-area-context":{"version":"4.6.3","url":"https://github.com/th3rdwave/react-native-safe-area-context#readme","license":"MIT"},"react-native-screens":{"version":"3.22.1","url":"https://github.com/software-mansion/react-native-screens#readme","license":"MIT"},"react-native-svg":{"version":"13.9.0","url":"https://github.com/react-native-community/react-native-svg","license":"MIT"},"react-native-web":{"version":"0.19.9","url":"git://github.com/necolas/react-native-web.git","license":"MIT"},"react-native-webview":{"version":"13.2.2","url":"https://github.com/react-native-webview/react-native-webview#readme","license":"MIT"},"react-virtuoso":{"version":"4.6.0","url":"https://virtuoso.dev/","license":"MIT"},"sharp-cli":{"version":"2.1.0","url":"https://github.com/vseventer/sharp-cli","license":"MIT"},"tippy.js":{"version":"6.3.7","url":"https://atomiks.github.io/tippyjs/","license":"MIT"},"uninstall":{"version":"0.0.0","license":"MIT"},"websql":{"version":"2.0.3","url":"git://github.com/nolanlawson/node-websql.git","license":"Apache-2.0"},"xlsx":{"version":"0.18.5","url":"https://sheetjs.com/","license":"Apache-2.0"}};
|