@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 CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fto-consult/expo-ui",
3
- "version": "6.53.3",
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.49.0",
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 {createMaterial3Theme,getMaterial3Theme} from "@pchmn/expo-material3-theme";
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 customColors = React.useMemo(()=>{
72
- const colors = getColors();
73
- if(false && userThemeName){
74
- const t = `${userThemeName}`;
75
- const c = Colors.isValid(defaultTheme?.colors?.primary)? createMaterial3Theme(defaultTheme.colors.primary) : null,
76
- c2 = Colors.isValid(defaultTheme?.colors.secondary)? createMaterial3Theme(defaultTheme?.colors.secondary) :null;
77
- ['light','dark'].map((l)=>{
78
- if(c && c[l]){
79
- const name = `${t}-primary-${l}`;
80
- colors[name] = {name,primaryName:userThemeName,secondaryName:`primary-${l}`,...c[l]};
81
- }
82
- if(c2 && c2[l]){
83
- const name2 = `${t}-secondary-${l}`;
84
- colors[name2] = {name:name2,primaryName:userThemeName,secondaryName:`secondary-${l}`,...c2[l]};
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
- return colors;
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
- dat.text = Colors.isValid(dat.text)? dat.text : dat.onBackground || dat.onSurface;
177
- const cols = dat.dark ? darkColors : lightColors;
178
- ["warning","error","info","success","divider"].map((c)=>{
179
- if(!Colors.isValid(dat[c])){
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 : theme.colors.primaryText;
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 isDark = theme.isDark();
46
- const primaryText = isDark? theme.colors.surfaceText : theme.colors.primaryText,
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:primaryText},titleProps.style]}}
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 = theme.colors.primaryText;
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 = defaultVal(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.errorText : Colors.isValid(labelStyle.color) ? labelStyle.color : theme.colors.primary,
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.errorText : Colors.isValid(borderColor)? borderColor : undefined;
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.surfaceText,
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()) return ;
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
- return this.progressBarRef.current.setIsLoading(loading,()=>{
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 : theme.colors.primaryText;
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.errorText,backgroundColor:theme.colors.error},no.style];
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.primaryText,backgroundColor:theme.colors.primary},yes.style]
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
- /*if(typeof no.onClick !=='function'){
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.primaryText,backgroundColor:theme.primary},yes.style]);
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.primaryText;
16
+ color = theme.colors.onPrimary;
17
17
  } else if(secondary){
18
18
  backgroundColor = theme.colors.secondary;
19
- color = theme.colors.secondaryText;
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.primaryText;
168
+ color = theme.colors.onPrimary;
169
169
  } else if(secondary){
170
170
  backgroundColor = theme.colors.secondary;
171
- color = theme.colors.secondaryText;
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.primaryText,backgroundColor:theme.colors.primary}])
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.secondaryText,backgroundColor:theme.colors.secondary}])
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((a,b,c)=>{
142
+ React.useOnRender((...args)=>{
143
143
  updateTableHeadCss();
144
- if(onRender && onRender(a,b,c));
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.primaryText,backgroundColor:theme.colors.primary,padding:10,borderRadius:5}]}>{content}</Label>
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>
@@ -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 } from '@pchmn/expo-material3-theme';
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
- //const colorScheme = useColorScheme();
64
- appConfig.extendAppTheme = (theme)=>{
64
+ const colorScheme = useColorScheme();
65
+ const isColorShemeDark = colorScheme ==="dark";
66
+ appConfig.extendAppTheme = (theme,Theme,...rest)=>{
65
67
  if(!isObj(theme)) return;
66
- const newTheme = theme.dark || theme.isDark ? { ...MD3DarkTheme, colors: pTheme.dark } : { ...MD3LightTheme, colors: pTheme.light };
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.primaryText},customChevronIconProps.style],
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.53.0","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.49.0","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-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"}};
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"}};