@fto-consult/expo-ui 6.0.1 → 6.1.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.
Files changed (60) hide show
  1. package/babel.config.js +62 -64
  2. package/package.json +4 -4
  3. package/src/auth/avatarProps/index.js +1 -1
  4. package/src/components/AppBar/Content.js +4 -4
  5. package/src/components/AppBar/index.js +39 -18
  6. package/src/components/BackHandler/index.android.js +3 -0
  7. package/src/components/BackHandler/index.js +23 -0
  8. package/src/components/BottomSheet/Sheet.js +1 -2
  9. package/src/components/Button/index.js +3 -3
  10. package/src/components/Checkbox/index.js +2 -3
  11. package/src/components/Chip/index.js +5 -5
  12. package/src/components/Color/ColorPicker.js +7 -7
  13. package/src/components/Color/index.js +5 -5
  14. package/src/components/Countries/Flag.js +1 -1
  15. package/src/components/Countries/SelectCountry.js +1 -1
  16. package/src/components/Datagrid/Common/Common.js +0 -1
  17. package/src/components/Datagrid/Common/utils.js +1 -2
  18. package/src/components/Date/DatePickerInput/index.js +4 -4
  19. package/src/components/Date/Time.js +3 -3
  20. package/src/components/Dialog/confirm/showConfirmOrAlertOrPrompt.js +1 -1
  21. package/src/components/DragResize/DragResizeBlock.js +3 -3
  22. package/src/components/Drawer/DrawerItems/_DrawerItem.js +1 -1
  23. package/src/components/Dropdown/index.js +9 -17
  24. package/src/components/Expandable/index.js +1 -1
  25. package/src/components/Fab/GroupComponent.js +4 -5
  26. package/src/components/Filter/BetweenComponent.js +1 -1
  27. package/src/components/Filter/index.js +1 -1
  28. package/src/components/Form/Fields/Field.js +7 -16
  29. package/src/components/Form/Fields/{IDField.js → IdField.js} +1 -1
  30. package/src/components/Form/Fields/SelectTableData/Component.js +1 -1
  31. package/src/components/Form/FormData/FormData.js +1 -1
  32. package/src/components/Form/List/List.js +15 -15
  33. package/src/components/Grid/Cell.js +1 -1
  34. package/src/components/HeavyScreen/index.js +5 -8
  35. package/src/components/Icon/Icon.js +13 -5
  36. package/src/components/Icon/IconButton.js +1 -1
  37. package/src/components/Image/index.js +6 -7
  38. package/src/components/Label/index.js +4 -4
  39. package/src/components/Menu/Item.js +1 -1
  40. package/src/components/Menu/Menu.js +2 -2
  41. package/src/components/Menu/index.js +2 -2
  42. package/src/components/Modal/index.js +3 -3
  43. package/src/components/PhoneInput/index.js +3 -3
  44. package/src/components/Radio/index.js +2 -3
  45. package/src/components/SelectCurrency/Format.js +3 -4
  46. package/src/components/SelectCurrency/index.js +3 -3
  47. package/src/components/SimpleSelect/index.js +6 -9
  48. package/src/components/Slider/index.js +2 -3
  49. package/src/components/Snackbar/index.js +1 -1
  50. package/src/components/SplashScreen/index.js +1 -1
  51. package/src/components/Switch/index.js +3 -4
  52. package/src/components/Tab/TabItem.js +1 -1
  53. package/src/components/TextField/index.js +17 -20
  54. package/src/components/Tooltip/Popover/index.web.js +1 -1
  55. package/src/components/Tooltip/index.js +1 -1
  56. package/src/index.js +2 -1
  57. package/src/layouts/ProfilAvatar/index.js +2 -2
  58. package/src/layouts/Screen/ScreenWithOrWithoutAuthContainer.js +1 -1
  59. package/src/layouts/Screen/TableData.js +1 -1
  60. package/src/screens/ScreenWrapper.js +1 -1
package/babel.config.js CHANGED
@@ -1,66 +1,64 @@
1
1
  module.exports = function(api,opts) {
2
- opts = typeof opts =='object' && opts ? opts : {};
3
- api = api && typeof api =='object'? api : {};
4
- ///les chemin vers la variable d'environnement, le chemin du fichier .env,@see : https://github.com/brysgo/babel-plugin-inline-dotenv
5
- //console.log(environmentPath," is envvv ",opts);
6
- const path = require("path");
7
- const fs = require("fs");
8
- const dir = path.resolve(__dirname);
9
- typeof api.cache =='function' && api.cache(true);
10
- const inlineDovOptions = { unsafe: true};
11
- const options = {base:dir,...opts,platform:"expo"};
12
- const environmentPath = require("./copy-env-file")();
13
- if(fs.existsSync(environmentPath)){
14
- inlineDovOptions.path ='./.env';
15
- }
16
- /*** par défaut, les variables d'environnements sont stockés dans le fichier .env situé à la racine du projet, référencée par la prop base */
17
- const alias = require("./babel.config.alias")(options);
18
- const $ecomponents = alias.$ecomponents|| null;
19
- const eAppex = $ecomponents && path.resolve($ecomponents,"Chart","appexChart");
20
- if(eAppex && fs.existsSync(eAppex)){
21
- const appexPathHtml = path.resolve(eAppex,"index.html");
22
- const $eelectron = alias.$eelectron || null;
23
- const expoRoot = alias["$expo-ui-root-path"] || null;
24
- const expoRootModulesP = expoRoot && fs.existsSync(path.resolve(expoRoot,"node_modules")) && path.resolve(expoRoot,"node_modules") || null;
25
- const aDistPath = path.join("apexcharts","dist","apexcharts.min.js");
26
- const nodeModulesPath = expoRootModulesP && fs.existsSync(path.resolve(expoRootModulesP,aDistPath)) ? expoRootModulesP : alias.$enodeModulesPath;
27
- if(nodeModulesPath && fs.existsSync(nodeModulesPath) && $eelectron && fs.existsSync($eelectron)){
28
- const writeFilePath = path.resolve($eelectron,"utils","writeFile.js");
29
- const appexDistPath = path.resolve(nodeModulesPath,"apexcharts","dist","apexcharts.min.js");
30
- if(fs.existsSync(writeFilePath) && fs.existsSync(appexDistPath)){
31
- const jsContent = fs.readFileSync(appexDistPath, 'utf8')
32
- const writeFile = require(`${writeFilePath}`);
33
- //overite appex chart html file
34
- writeFile(appexPathHtml,`
35
- <html>
36
- <head>
37
- <meta name="viewport" content="width=device-width, initial-scale=1.0" />
38
- <script>${jsContent}</script>
39
- </head>
40
- <body>
41
- </body>
42
- </html>
43
- `);
44
- //console.log("appexchart file overwrited*******************")
45
- }
2
+ opts = typeof opts =='object' && opts ? opts : {};
3
+ api = api && typeof api =='object'? api : {};
4
+ ///les chemin vers la variable d'environnement, le chemin du fichier .env,@see : https://github.com/brysgo/babel-plugin-inline-dotenv
5
+ //console.log(environmentPath," is envvv ",opts);
6
+ const path = require("path");
7
+ const fs = require("fs");
8
+ const dir = path.resolve(__dirname);
9
+ typeof api.cache =='function' && api.cache(true);
10
+ const inlineDovOptions = { unsafe: true};
11
+ const options = {base:dir,...opts,platform:"expo"};
12
+ const environmentPath = require("./copy-env-file")();
13
+ if(fs.existsSync(environmentPath)){
14
+ inlineDovOptions.path ='./.env';
15
+ }
16
+ /*** par défaut, les variables d'environnements sont stockés dans le fichier .env situé à la racine du projet, référencée par la prop base */
17
+ const alias = require("./babel.config.alias")(options);
18
+ const $ecomponents = alias.$ecomponents|| null;
19
+ const eAppex = $ecomponents && path.resolve($ecomponents,"Chart","appexChart");
20
+ if(eAppex && fs.existsSync(eAppex)){
21
+ const appexPathHtml = path.resolve(eAppex,"index.html");
22
+ const $eelectron = alias.$eelectron || null;
23
+ const expoRoot = alias["$expo-ui-root-path"] || null;
24
+ const expoRootModulesP = expoRoot && fs.existsSync(path.resolve(expoRoot,"node_modules")) && path.resolve(expoRoot,"node_modules") || null;
25
+ const aDistPath = path.join("apexcharts","dist","apexcharts.min.js");
26
+ const nodeModulesPath = expoRootModulesP && fs.existsSync(path.resolve(expoRootModulesP,aDistPath)) ? expoRootModulesP : alias.$enodeModulesPath;
27
+ if(nodeModulesPath && fs.existsSync(nodeModulesPath) && $eelectron && fs.existsSync($eelectron)){
28
+ const writeFilePath = path.resolve($eelectron,"utils","writeFile.js");
29
+ const appexDistPath = path.resolve(nodeModulesPath,"apexcharts","dist","apexcharts.min.js");
30
+ if(fs.existsSync(writeFilePath) && fs.existsSync(appexDistPath)){
31
+ const jsContent = fs.readFileSync(appexDistPath, 'utf8')
32
+ const writeFile = require(`${writeFilePath}`);
33
+ //overite appex chart html file
34
+ writeFile(appexPathHtml,`
35
+ <html>
36
+ <head>
37
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
38
+ <script>${jsContent}</script>
39
+ </head>
40
+ <body>
41
+ </body>
42
+ </html>
43
+ `);
46
44
  }
47
- }
48
-
49
- return {
50
- presets: [
51
- ['babel-preset-expo']/*,
52
- ["@babel/preset-react", {"runtime": "automatic"}],*/
53
- ],
54
- plugins : [
55
- ["inline-dotenv",inlineDovOptions],
56
- ["module-resolver", {"alias": alias}],
57
- ['@babel/plugin-proposal-export-namespace-from'],
58
- ['transform-inline-environment-variables',{
59
- "include": [
60
- "NODE_ENV"
61
- ]
62
- }],
63
- ['react-native-reanimated/plugin'],
64
- ],
65
- };
66
- };
45
+ }
46
+ }
47
+
48
+ return {
49
+ presets: [
50
+ ['babel-preset-expo']
51
+ ],
52
+ plugins : [
53
+ ["inline-dotenv",inlineDovOptions],
54
+ ["module-resolver", {"alias": alias}],
55
+ ['@babel/plugin-proposal-export-namespace-from'],
56
+ ['transform-inline-environment-variables',{
57
+ "include": [
58
+ "NODE_ENV"
59
+ ]
60
+ }],
61
+ ['react-native-reanimated/plugin'],
62
+ ],
63
+ };
64
+ };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fto-consult/expo-ui",
3
- "version": "6.0.1",
3
+ "version": "6.1.1",
4
4
  "description": "Bibliothèque de composants UI Expo,react-native",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -75,7 +75,7 @@
75
75
  "expo": "^49.0.0",
76
76
  "expo-camera": "~13.4.2",
77
77
  "expo-clipboard": "~4.3.0",
78
- "expo-font": "^11.1.1",
78
+ "expo-font": "~11.4.0",
79
79
  "expo-image-picker": "~14.3.1",
80
80
  "expo-linking": "~5.0.2",
81
81
  "expo-sqlite": "~11.3.1",
@@ -96,7 +96,7 @@
96
96
  "react-native-blob-util": "^0.18.3",
97
97
  "react-native-gesture-handler": "~2.12.0",
98
98
  "react-native-iphone-x-helper": "^1.3.1",
99
- "react-native-mime-types": "^2.4.0",
99
+ "react-native-mime-types": "^2.3.0",
100
100
  "react-native-paper": "^5.9.1",
101
101
  "react-native-paper-dates": "^0.18.12",
102
102
  "react-native-reanimated": "~3.3.0",
@@ -105,6 +105,7 @@
105
105
  "react-native-svg": "13.9.0",
106
106
  "react-native-web": "~0.19.6",
107
107
  "react-native-webview": "13.2.2",
108
+ "react-navigation": "^4.4.4",
108
109
  "react-virtuoso": "^4.3.11",
109
110
  "sharp-cli": "^4.1.1",
110
111
  "tippy.js": "^6.3.7",
@@ -113,7 +114,6 @@
113
114
  },
114
115
  "devDependencies": {
115
116
  "@expo/metro-config": "^0.7.1",
116
- "@expo/webpack-config": "^18.0.1",
117
117
  "babel-plugin-inline-dotenv": "^1.7.0",
118
118
  "babel-plugin-module-resolver": "^4.1.0",
119
119
  "babel-plugin-transform-inline-environment-variables": "^0.4.4"
package/src/auth/avatarProps/index.js CHANGED
@@ -5,7 +5,7 @@ import {isNativeMobile} from "$platform";
5
5
  import defaultSrc from "./defaultAvatar";
6
6
  export default {
7
7
  accordion:false,
8
- editable : !isNativeMobile(),
8
+ readOnly : isNativeMobile(),
9
9
  text : 'Avatar',
10
10
  type : 'image',
11
11
  defaultSrc,
package/src/components/AppBar/Content.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from '$react';
2
- import {Platform,StyleSheet,TouchableWithoutFeedback,View} from 'react-native';
2
+ import {Platform,StyleSheet,Pressable,View} from 'react-native';
3
3
  import Label from "$ecomponents/Label";
4
4
  import theme,{Colors,StyleProp} from "$theme";
5
5
  import PropTypes from "prop-types";
@@ -30,7 +30,7 @@ const AppbarContent = React.forwardRef(({
30
30
  const subtitleColor = Colors.setAlpha(titleTextColor,0.7);
31
31
 
32
32
  return (
33
- <TouchableWithoutFeedback testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
33
+ <Pressable testID={testID+"_Container"} {...defaultObj(containerProps)} onPress={onPress} disabled={!onPress}>
34
34
  <View
35
35
  pointerEvents="box-none"
36
36
  style={[styles.container, style]}
@@ -54,7 +54,7 @@ const AppbarContent = React.forwardRef(({
54
54
  numberOfLines={1}
55
55
  accessible
56
56
  // @ts-ignore Type '"heading"' is not assignable to type ...
57
- accessibilityRole={Platform.OS === 'web' ? 'heading' : 'header'}
57
+ role={Platform.OS === 'web' ? 'heading' : 'header'}
58
58
  >
59
59
  {title}
60
60
  </Label>
@@ -69,7 +69,7 @@ const AppbarContent = React.forwardRef(({
69
69
  </Label>
70
70
  ) : null}
71
71
  </View>
72
- </TouchableWithoutFeedback>
72
+ </Pressable>
73
73
  );
74
74
  });
75
75
 
package/src/components/AppBar/index.js CHANGED
@@ -7,7 +7,7 @@ import theme,{Colors,flattenStyle} from "$theme";
7
7
  import {StyleSheet} from "react-native";
8
8
  import {goBack as navGoBack,useNavigation,useRoute,useScreenOptions } from "$cnavigation";
9
9
  import PropTypes from "prop-types";
10
- import { Dimensions,View,TouchableWithoutFeedback} from "react-native";
10
+ import { Dimensions,View,Pressable} from "react-native";
11
11
  import Content from "./Content";
12
12
  import Icon from "$ecomponents/Icon";
13
13
  import {Elevations} from "$ecomponents/Surface";
@@ -81,9 +81,9 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
81
81
  }
82
82
  backAction = React.isValidElement(backAction)? backAction : null;
83
83
  if(!backAction && BackActionComponent){
84
- backAction = <BackActionComponent back={options.back} ref={backActionRef} {...backActionProps} onPress={onBackActionPress} />
84
+ backAction = <BackActionComponent containerColor="transparent" testID="RN_AppBarBackAction" back={options.back} ref={backActionRef} {...backActionProps} onPress={onBackActionPress} />
85
85
  } else if(backAction){
86
- backAction = <TouchableWithoutFeedback
86
+ backAction = <Pressable
87
87
  {...backActionProps}
88
88
  ref = {backActionRef}
89
89
  onPress={onBackActionPress}
@@ -114,23 +114,30 @@ const AppBarComponent = React.forwardRef((props,ref)=> {
114
114
  titleProps = defaultObj(titleProps);
115
115
  React.setRef(ref,context);
116
116
  testID = defaultStr(testID,"RN_AppBarComponent")
117
+ const renderedActions = renderSplitedActions(splitedActions,{
118
+ ...defaultObj(menuProps,appBarProps.menuProps),
119
+ anchorProps : {
120
+ style : anchorStyle,
121
+ color : anchorStyle.color,
122
+ }
123
+ });
124
+ const renderedRight = React.isValidElement(rightContent) && rightContent || right;
125
+ const hasRight = React.isValidElement(renderedActions) || React.isValidElement(renderedRight);
117
126
  return (
118
127
  <Appbar.Header elevation={elevation} {...appBarProps} testID={testID} style={[styles.header,{backgroundColor},elevStyle,appBarProps.style]} onLayout={onPageResize}>
119
- {backAction}
120
- <Content {...defaultObj(appBarProps.contentProps)}
121
- title={title}
122
- titleProps = {{...titleProps,style:[styles.title,{color:primaryText},titleProps.style]}}
123
- subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
124
- subtitleProps = {subtitleProps}
125
- />
126
- {renderSplitedActions(splitedActions,{
127
- ...defaultObj(menuProps,appBarProps.menuProps),
128
- anchorProps : {
129
- style : anchorStyle,
130
- color : anchorStyle.color,
131
- }
132
- })}
133
- {React.isValidElement(rightContent) && rightContent || right}
128
+ <View style={styles.title2Back} testID={testID+"_AppBarBack2Titlte"}>
129
+ {backAction}
130
+ <Content {...defaultObj(appBarProps.contentProps)}
131
+ title={title}
132
+ titleProps = {{...titleProps,style:[styles.title,{color:primaryText},titleProps.style]}}
133
+ subtitle = {defaultVal(subtitle,params.subtitle,options.subtitle)}
134
+ subtitleProps = {subtitleProps}
135
+ />
136
+ </View>
137
+ {hasRight ? <View testID={testID+"_Actions"} style={styles.actions2right}>
138
+ {renderedActions}
139
+ {renderedRight}
140
+ </View> : null}
134
141
  </Appbar.Header>
135
142
  );
136
143
  });
@@ -144,9 +151,23 @@ const styles = StyleSheet.create({
144
151
  fontSize : TITLE_FONT_SIZE,
145
152
  fontWeight : 'bold'
146
153
  },
154
+ title2Back : {
155
+ flexDirection : "row",
156
+ justifyContent : "start",
157
+ alignItems : "center",
158
+ },
159
+ actions2right : {
160
+ flexDirection : "row",
161
+ justifyContent : "start",
162
+ alignItems : "center",
163
+ },
147
164
  header : {
148
165
  paddingHorizontal : 5,
149
166
  paddingRight : 10,
167
+ justifyContent : "space-between",
168
+ alignItems : "center",
169
+ flexDirection : "row",
170
+ w : "100%"
150
171
  },
151
172
  })
152
173
 
package/src/components/BackHandler/index.android.js ADDED
@@ -0,0 +1,3 @@
1
+ import { BackHandler } from "react-native";
2
+
3
+ export default BackHandler;
package/src/components/BackHandler/index.js ADDED
@@ -0,0 +1,23 @@
1
+ /**
2
+ * Copyright (c) Nicolas Gallagher.
3
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
4
+ *
5
+ * This source code is licensed under the MIT license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ *
8
+ * @flow
9
+ */
10
+
11
+ function emptyFunction() {}
12
+
13
+ const BackHandler = {
14
+ exitApp: emptyFunction,
15
+ addEventListener() {
16
+ return {
17
+ remove: emptyFunction
18
+ };
19
+ },
20
+ removeEventListener: emptyFunction
21
+ };
22
+
23
+ export default BackHandler;
package/src/components/BottomSheet/Sheet.js CHANGED
@@ -17,9 +17,8 @@ import View from "$ecomponents/View";
17
17
  import {Easing} from "react-native";
18
18
  import Portal from "$ecomponents/Portal";
19
19
  import { ScrollView } from "react-native";
20
-
20
+ import BackHandler from "$ecomponents/BackHandler";
21
21
  import {
22
- BackHandler,
23
22
  TouchableOpacity,
24
23
  Animated,
25
24
  PanResponder,
package/src/components/Button/index.js CHANGED
@@ -50,7 +50,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
50
50
  accessible,
51
51
  backgroundColor,
52
52
  borderColor,
53
- accessibilityRole,
53
+ role,
54
54
  contentContainerProps,
55
55
  loadingProps,
56
56
  rounded,
@@ -243,7 +243,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
243
243
  // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
244
244
  accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
245
245
  accessibilityComponentType="button"
246
- accessibilityRole={disabled?accessibilityRole || "button":undefined}
246
+ role={disabled?role || "button":undefined}
247
247
  accessibilityState={{ disabled }}
248
248
  accessible={accessible}
249
249
  disabled={disabled}
@@ -254,7 +254,7 @@ const ButtonComponent = React.forwardRef((prs,ref) => {
254
254
  >
255
255
  <View testID={testID+"_Content"} {...contentProps} style={[styles.content, contentStyle,noPadding && theme.styles.noPadding,noMargin && theme.styles.noMargin]}>
256
256
  {React.isValidElement(left)? left : typeof left =='function' ?left(leftRProps):null}
257
- {icon && isLoading !== true ? (
257
+ {icon && isLoading !== true && false ? (
258
258
  <View style={[iconStyle,{color:textColor},iconProps.style]} testID={testID+"_IconContainer"}>
259
259
  {React.isValidElement(icon)?icon : <Icon
260
260
  testID={testID+"_Icon"}
package/src/components/Checkbox/index.js CHANGED
@@ -37,7 +37,6 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
37
37
  labelStyle,
38
38
  helperText,
39
39
  position,
40
- editable,
41
40
  disabled,
42
41
  readOnly,
43
42
  primaryOnCheck,
@@ -48,7 +47,7 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
48
47
  ...p
49
48
  } = props;
50
49
  disabled = defaultBool(disabled,false);
51
- const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
50
+ const isEditable = !disabled && readOnly !== true ? true : false;
52
51
  const pointerEvents = isEditable ? "auto" : "none";
53
52
  p = defaultObj(p);
54
53
  checkedValue = defaultVal(checkedValue,1);
@@ -124,7 +123,7 @@ const CheckboxComponent = React.forwardRef((props,ref)=>{
124
123
  {...p}
125
124
  testID = {testID}
126
125
  disabled = {disabled}
127
- editable = {isEditable}
126
+ readOnly = {!isEditable}
128
127
  pointerEvents = {pointerEvents}
129
128
  style = {[styles.checkbox,style]}
130
129
  position = {position}
package/src/components/Chip/index.js CHANGED
@@ -4,7 +4,7 @@ import {
4
4
  Animated,
5
5
  Platform,
6
6
  StyleSheet,
7
- TouchableWithoutFeedback,
7
+ Pressable,
8
8
  } from 'react-native';
9
9
  import Icon from "$ecomponents/Icon";
10
10
  import {Text,TouchableRipple } from 'react-native-paper';
@@ -131,7 +131,7 @@ const ChipComponent = React.forwardRef(({
131
131
  // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
132
132
  accessibilityTraits={accessibilityTraits}
133
133
  accessibilityComponentType="button"
134
- accessibilityRole="button"
134
+ role="button"
135
135
  accessibilityState={accessibilityState}
136
136
  testID={testID+"_Container"}
137
137
  >
@@ -195,12 +195,12 @@ const ChipComponent = React.forwardRef(({
195
195
  </TouchableRipple>
196
196
  {onClose ? (
197
197
  <View style={styles.closeButtonStyle} testID={testID+"_CloseButtonContainer"}>
198
- <TouchableWithoutFeedback
198
+ <Pressable
199
199
  onPress={onPress}
200
200
  // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
201
201
  accessibilityTraits="button"
202
202
  accessibilityComponentType="button"
203
- accessibilityRole="button"
203
+ role="button"
204
204
  accessibilityLabel={closeIconAccessibilityLabel}
205
205
  testID={testID+"_CloseButtonRipple"}
206
206
  >
@@ -217,7 +217,7 @@ const ChipComponent = React.forwardRef(({
217
217
  />
218
218
  )}
219
219
  </View>
220
- </TouchableWithoutFeedback>
220
+ </Pressable>
221
221
  </View>
222
222
  ) : null}
223
223
  </Surface>
package/src/components/Color/ColorPicker.js CHANGED
@@ -7,7 +7,7 @@ import {
7
7
  Image,
8
8
  PanResponder,
9
9
  StyleSheet,
10
- TouchableWithoutFeedback,
10
+ Pressable,
11
11
  } from 'react-native';
12
12
 
13
13
  import Elevations from '$ecomponents/Surface/Elevations';
@@ -399,20 +399,20 @@ export default class ColorPickerComponent extends Component {
399
399
  renderSwatches () {
400
400
  this.swatches = this.props.palette.map((c,i) => (
401
401
  <View testID={"RN_ColorPicker_SWATCHES"} style={[styles.swatch,theme.styles.cursorPointer,{backgroundColor:c}]} key={'S'+i} hitSlop={this.props.swatchesHitSlop}>
402
- <TouchableWithoutFeedback onPress={x=>this.onSwatchPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
402
+ <Pressable onPress={x=>this.onSwatchPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
403
403
  <Animated.View style={[styles.swatchTouch,{backgroundColor:c,transform:[{scale:this.swatchAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]} />
404
- </TouchableWithoutFeedback>
404
+ </Pressable>
405
405
  </View>
406
406
  ))
407
407
  }
408
408
  renderDiscs () {
409
409
  this.disc = (`1`).repeat(this.props.discreteLength).split('').map((c,i) => (
410
410
  <View testID={"RN_ColorPicker_DISC"} style={[styles.swatch,{backgroundColor:this.state.hueSaturation}]} key={'D'+i} hitSlop={this.props.swatchesHitSlop}>
411
- <TouchableWithoutFeedback style={[theme.styles.cursorPointer]} onPress={x=>this.onDiscPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
411
+ <Pressable style={[theme.styles.cursorPointer]} onPress={x=>this.onDiscPress(c,i)} hitSlop={this.props.swatchesHitSlop}>
412
412
  <Animated.View style={[styles.swatchTouch,{backgroundColor:this.state.hueSaturation,transform:[{scale:this.discAnim[i].interpolate({inputRange:[0,0.5,1],outputRange:[0.666,1,0.666]})}]}]}>
413
413
  <View style={[styles.wheelImg,{backgroundColor:'#000',opacity:1-(i>=9?1:(i*11/100))}]}></View>
414
414
  </Animated.View>
415
- </TouchableWithoutFeedback>
415
+ </Pressable>
416
416
  </View>
417
417
  )).reverse()
418
418
  this.tryForceUpdate()
@@ -428,7 +428,7 @@ export default class ColorPickerComponent extends Component {
428
428
  sliderHidden,
429
429
  discrete,
430
430
  disabled,
431
- editable,
431
+ readOnly,
432
432
  row,
433
433
  testID : customTestId,
434
434
  } = this.props
@@ -520,7 +520,7 @@ export default class ColorPickerComponent extends Component {
520
520
  testID={`${testID}_ColorPickerInput`}
521
521
  enableCopy
522
522
  label = ''
523
- editable = {editable}
523
+ readOnly = {readOnly}
524
524
  disabled = {disabled}
525
525
  defaultValue = {hex}
526
526
  {...restProps}
package/src/components/Color/index.js CHANGED
@@ -10,11 +10,11 @@ import {isMobileOrTabletMedia} from "$cplatform/dimensions";
10
10
  import {defaultStr,defaultObj} from "$cutils";
11
11
 
12
12
  const ColorPickerComponent = React.forwardRef ((props,ref)=>{
13
- let {defaultValue,label,rippleColor,onChange,text,containerProp,editable,disabled,readOnly,...rest} = props;
13
+ let {defaultValue,label,rippleColor,onChange,text,containerProp,disabled,readOnly,...rest} = props;
14
14
  containerProp = defaultObj(containerProp);
15
15
  disabled = defaultBool(disabled,false);
16
16
  readOnly = defaultBool(readOnly,false);
17
- const isEditable = !disabled && readOnly !== true && editable !== false ? true : false;
17
+ const isEditable = !disabled && readOnly !== true ? true : false;
18
18
  const pointerEvents = isEditable ? "auto" : "none";
19
19
  const isMob = isMobileOrTabletMedia();
20
20
  const _label = defaultStr(label,text);
@@ -69,7 +69,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
69
69
  return <>
70
70
  <TouchableOpacity
71
71
  {...containerProp}
72
- accessibilityRole="button"
72
+ role="button"
73
73
  disabled = {!isEditable}
74
74
  pointerEvents = {pointerEvents}
75
75
  accessibilityLabel={defaultStr(label,text)}
@@ -84,7 +84,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
84
84
  mode = {mode}
85
85
  ref = {ref}
86
86
  label = {defaultVal(label,_label)}
87
- editable = {false}
87
+ readOnly = {true}
88
88
  disabled = {disabled}
89
89
  selectionColor = {selectionColor}
90
90
  color = {selectionColor}
@@ -124,7 +124,7 @@ const ColorPickerComponent = React.forwardRef ((props,ref)=>{
124
124
  color={color}
125
125
  thumbSize={40}
126
126
  disabled = {disabled}
127
- editable = {isEditable}
127
+ readOnly = {!isEditable}
128
128
  onColorChange={onColorChange}
129
129
  onColorChangeComplete={onColorChangeComplete}
130
130
  />
package/src/components/Countries/Flag.js CHANGED
@@ -19,7 +19,7 @@ export default function CountryFlagComponent({code,label,withName,withCode,text,
19
19
  <Image
20
20
  accessibilityIgnoresInvertColors
21
21
  testID ={testID+"Image"}
22
- editable = {false}
22
+ readOnly = {true}
23
23
  {...props}
24
24
  size = {25}
25
25
  style={[props.style]}
package/src/components/Countries/SelectCountry.js CHANGED
@@ -39,7 +39,7 @@ export const getCountryFieldProps = (props)=>{
39
39
  },
40
40
  renderItem : ({item})=>{
41
41
  return <View style={[styles.renderedImage]}>
42
- {(isNonNullString(item.image) || isNumber(item.image)) && <Image editable = {false} accessibilityIgnoresInvertColors {...imageProps} style={[styles.flagImage,{marginRight:10},imageProps.style]} source={isNumber(item.image)?item.image:{uri:item.image}}/>}
42
+ {(isNonNullString(item.image) || isNumber(item.image)) && <Image readOnly= {true} accessibilityIgnoresInvertColors {...imageProps} style={[styles.flagImage,{marginRight:10},imageProps.style]} source={isNumber(item.image)?item.image:{uri:item.image}}/>}
43
43
  <Label>{item.label}</Label>
44
44
  </View>
45
45
  },
package/src/components/Datagrid/Common/Common.js CHANGED
@@ -2451,7 +2451,6 @@ export default class CommonDatagridComponent extends AppComponent {
2451
2451
  render,
2452
2452
  readOnly,
2453
2453
  disabled,
2454
- editable,
2455
2454
  visible,
2456
2455
  defaultValue,
2457
2456
  id,
package/src/components/Datagrid/Common/utils.js CHANGED
@@ -74,7 +74,6 @@ export const renderRowCell = (arg)=>{
74
74
  multiple : undefined,
75
75
  readOnly : undefined,
76
76
  disabled : undefined,
77
- editable : undefined,
78
77
  data : rowData,
79
78
  columnField,
80
79
  }
@@ -116,7 +115,7 @@ export const renderRowCell = (arg)=>{
116
115
  columnDef = defaultObj(columnDef)
117
116
  columnDef = {...columnDef,...defaultObj(columnDef.datagrid)};
118
117
  columnDef.size = defaultDecimal(columnDef.size,50);
119
- columnDef.editable = defaultBool(columnDef.editable,false)
118
+ columnDef.readOnly = defaultBool(columnDef.readOnly,true)
120
119
  columnDef.rounded = defaultBool(columnDef.rounded,columnDef.round,true);
121
120
  columnDef.src = rowData[columnField];
122
121
  _render = <Image {...columnDef}/>
package/src/components/Date/DatePickerInput/index.js CHANGED
@@ -38,7 +38,7 @@ const DatePickerInput = React.forwardRef(({
38
38
  left : customLeft,
39
39
  helperText,
40
40
  format,
41
- disabled,readOnly,editable
41
+ disabled,readOnly
42
42
  ,text,
43
43
  withLabel,
44
44
  style,
@@ -90,7 +90,7 @@ const DatePickerInput = React.forwardRef(({
90
90
  }
91
91
 
92
92
 
93
- const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
93
+ const isEditable = disabled !== true && readOnly !== true ?true : false;
94
94
  withModal = defaultBool(withModal,true);
95
95
  if(!isEditable){
96
96
  withModal = false;
@@ -174,7 +174,7 @@ const DatePickerInput = React.forwardRef(({
174
174
  affix = {false}
175
175
  {...rest}
176
176
  style = {[styles.input,style]}
177
- editable = {isEditable}
177
+ readOnly = {!isEditable}
178
178
  disabled = {disabled}
179
179
  left = {left}
180
180
  right = {right}
@@ -183,7 +183,7 @@ const DatePickerInput = React.forwardRef(({
183
183
  label={labelText}
184
184
  defaultValue={formattedValue}
185
185
  placeholder={inputFormatLabel}
186
- keyboardType={'number-pad'}
186
+ inputMode={'number-pad'}
187
187
  mask={inputFormat}
188
188
  keyboardAppearance={theme.dark ? 'dark' : 'default'}
189
189
  error={hasError}
package/src/components/Date/Time.js CHANGED
@@ -44,10 +44,10 @@ export const timeToString = (value,withSeconds)=>{
44
44
  return value.substring(0,5);
45
45
  }
46
46
  export default function TimePickerComponent (props){
47
- let {right:customRight,upper,anchorProps,dialogProps,withLabel,inputProps,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,editable,withModal,readOnly,...rest} = props;
47
+ let {right:customRight,upper,anchorProps,dialogProps,withLabel,inputProps,containerProps,mode,onChange,withSeconds,cancelLabel,confirmLabel,label,text,upperCase,defaultValue,disabled,withModal,readOnly,...rest} = props;
48
48
  rest = defaultObj(rest);
49
49
  inputProps = defaultObj(inputProps);
50
- const isEditable = disabled !== true && readOnly !== true && editable !== false?true : false;
50
+ const isEditable = disabled !== true && readOnly !== true?true : false;
51
51
  withModal = defaultBool(withModal,true);
52
52
  if(!isEditable){
53
53
  withModal = false;
@@ -127,7 +127,7 @@ export default function TimePickerComponent (props){
127
127
  label = {label}
128
128
  right = {right}
129
129
  disabled = {disabled}
130
- editable = {false}
130
+ readOnly = {true}
131
131
  handleOpacity = {false}
132
132
  style = {[rest.style,!disabled && {opacity:1,color:theme.colors.text}]}
133
133
  contentContainerProps = {{...defaultObj(rest.contentContainerProps),pointerEvents:'auto'}}