copy to clipboard

ios/Podfile.lock

@@ -380,6 +380,8 @@ PODS:
     - React-perflogger (= 0.69.9)
   - RNCAsyncStorage (1.18.2):
     - React-Core
+  - RNCClipboard (1.11.2):
+    - React-Core
   - RNCMaskedView (0.1.11):
     - React
   - RNCPicker (2.4.10):
@@ -512,6 +514,7 @@ DEPENDENCIES:
   - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - "RNCClipboard (from `../node_modules/@react-native-clipboard/clipboard`)"
   - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
   - "RNCPicker (from `../node_modules/@react-native-picker/picker`)"
   - RNDeviceInfo (from `../node_modules/react-native-device-info`)
@@ -628,6 +631,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNCClipboard:
+    :path: "../node_modules/@react-native-clipboard/clipboard"
   RNCMaskedView:
     :path: "../node_modules/@react-native-community/masked-view"
   RNCPicker:
@@ -710,6 +715,7 @@ SPEC CHECKSUMS:
   React-runtimeexecutor: df1518d092e8c74cafddc56690d1ac386ec24d7a
   ReactCommon: fac40473e2c4117522384027ab33ad0cb6717dc5
   RNCAsyncStorage: ddc4ee162bfd41b0d2c68bf2d95acd81dd7f1f93
+  RNCClipboard: 3f0451a8100393908bea5c5c5b16f96d45f30bfc
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
   RNCPicker: 0bc2f0a29abcca7b7ed44a2d036aac9ab6d25700
   RNDeviceInfo: 475a4c447168d0ad4c807e48ef5e0963a0f4eb1b

package.json

@@ -16,6 +16,7 @@
     "@miblanchard/react-native-slider": "^2.3.1",
     "@openforis/arena-core": "0.0.162",
     "@react-native-async-storage/async-storage": "^1.18.2",
+    "@react-native-clipboard/clipboard": "^1.11.2",
     "@react-native-community/hooks": "^3.0.0",
     "@react-native-community/masked-view": "^0.1.11",
     "@react-native-picker/picker": "^2.4.10",

src/arena-mobile-ui/colors/index.js

@@ -126,10 +126,12 @@ export const primaryContrastTextLight = grey50;
 export const white = grey0;
 export const black = grey900;
 export const backgroundDarker = neutralDarker;
+export const backgroundDark = neutralDark;
 export const background = neutralLightest;
 export const backgroundLight = white;
 export const backgroundLighter = neutralLighter;
 export const activeBackground = secondaryLightest;
+export const disabledBackground = neutralDark;
 
 export const borderColor = neutralLight;
 export const borderColorContrast = neutralLightest;
@@ -152,11 +154,13 @@ const DarkTheme = {
 
   // -- backgrounds
   backgroundDarker: neutralLighter,
+  backgroundDark: neutralLight,
   background: black,
   backgroundLight: neutralDark,
   backgroundLighter: neutralDarker,
   activeBackground: secondary,
   neutralLightest: neutralDarkest,
+  disabledBackground: neutralLight,
 
   borderColorContrast: neutralLighter,
   borderColor: neutralDarker,

src/form/Attributes/Coordinate/Preview/index.js

@@ -26,6 +26,10 @@ const OpenInMap = ({nodeDef}) => {
     });
   };
 
+  if (!nodes[0]?.value?.x || !nodes[0]?.value?.y) {
+    return null;
+  }
+
   return (
     <View>
       <Button

src/form/Attributes/common/Base/Preview/index.js

@@ -10,6 +10,8 @@ import Pressable from 'arena-mobile-ui/components/Pressable';
 import TextBase from 'arena-mobile-ui/components/Texts/TextBase';
 import useThemedStyles from 'arena-mobile-ui/hooks/useThemedStyles';
 import {useCode} from 'form/Attributes/Code/Preview/hooks';
+import {getValueAsString} from 'form/Attributes/common/BaseInput/Form';
+import CopyToClipboard from 'form/Attributes/common/CopyToClipboard';
 import AttributeHeader from 'form/common/Header';
 import Validation from 'form/common/Validation';
 import {selectors as formSelectors} from 'state/form';
@@ -59,6 +61,7 @@ const BasePreviewNode = ({
   const disabled = useSelector(state =>
     formSelectors.isNodeDefDisabled(state, nodeDef),
   );
+  const isReadOnly = NodeDefs.isReadOnly(nodeDef);
 
   const handleSelectNodeAndNodeDef = useSelectNodeAndNodeDef({node, nodeDef});
 
@@ -102,6 +105,9 @@ const BasePreviewNode = ({
         disabled={disabled}>
         {nodeRendered}
       </Pressable>
+      {isReadOnly && (
+        <CopyToClipboard value={getValueAsString(nodeDef, node)} />
+      )}
 
       {canDelete && <BaseDeletePreviewNode node={node} />}
     </View>
@@ -162,7 +168,13 @@ const _BasePreviewContainer = ({nodeDef, nodes, children}) => {
   }, [styles, disabled, lastNodeDefUuid, nodeDef]);
 
   const hidden = useMemo(() => {
-    return !applicable && NodeDefs.isHiddenWhenNotRelevant(cycle)(nodeDef);
+    const layoutProps = NodeDefs.getLayoutProps(cycle)(nodeDef);
+
+    return (
+      !applicable &&
+      NodeDefs.isHiddenWhenNotRelevant(cycle)(nodeDef) &&
+      layoutProps.hiddenInMobile
+    );
   }, [applicable, cycle, nodeDef]);
 
   const header = useMemo(() => {

src/form/Attributes/common/Base/Preview/styles.js

@@ -22,8 +22,7 @@ const styles = ({colors, baseStyles}) =>
       paddingHorizontal: baseStyles.bases.BASE_3,
     },
     disabled: {
-      opacity: 0.5,
-      backgroundColor: colors.backgroundDarker,
+      backgroundColor: colors.disabledBackground,
     },
     basePreviewContainer: {
       flexDirection: 'row',

src/form/Attributes/common/CopyToClipboard/component.js

@@ -0,0 +1,31 @@
+import Clipboard from '@react-native-clipboard/clipboard';
+import React, {useCallback} from 'react';
+
+import {TouchableIcon} from 'arena-mobile-ui/components/TouchableIcons';
+import useThemedStyles from 'arena-mobile-ui/hooks/useThemedStyles';
+
+import _styles from './styles';
+
+const CopyToClipboard = ({customStyle, value}) => {
+  const styles = useThemedStyles(_styles);
+
+  const touchableStyle = [styles.entitySelectorButton, customStyle];
+
+  const handleCopytoClipboard = useCallback(() => {
+    Clipboard.setString(value);
+  }, [value]);
+
+  return (
+    <TouchableIcon
+      iconName="content-copy"
+      onPress={handleCopytoClipboard}
+      customStyle={touchableStyle}
+    />
+  );
+};
+
+CopyToClipboard.defaultProps = {
+  customStyle: null,
+};
+
+export default CopyToClipboard;

src/form/Attributes/common/CopyToClipboard/index.js

@@ -0,0 +1 @@
+export {default} from './component';

src/form/Attributes/common/CopyToClipboard/styles.js

@@ -0,0 +1,13 @@
+import {StyleSheet} from 'react-native';
+
+const styles = ({baseStyles, colors}) =>
+  StyleSheet.create({
+    entitySelectorButton: {
+      margin: baseStyles.bases.BASE_2,
+      padding: baseStyles.bases.BASE,
+      borderRadius: baseStyles.bases.BASE,
+      backgroundColor: colors.neutralLightest,
+    },
+  });
+
+export default styles;

yarn.lock

@@ -2383,6 +2383,11 @@
   dependencies:
     merge-options "^3.0.4"
 
+"@react-native-clipboard/clipboard@^1.11.2":
+  version "1.11.2"
+  resolved "https://registry.yarnpkg.com/@react-native-clipboard/clipboard/-/clipboard-1.11.2.tgz#e826d0336b34e67294aaffa6878308900bc7d197"
+  integrity sha512-bHyZVW62TuleiZsXNHS1Pv16fWc0fh8O9WvBzl4h2fykqZRW9a+Pv/RGTH56E3X2PqzHP38K5go8zmCZUoIsoQ==
+
 "@react-native-community/cli-clean@^8.0.4":
   version "8.0.4"
   resolved "https://registry.yarnpkg.com/@react-native-community/cli-clean/-/cli-clean-8.0.4.tgz#97e16a20e207b95de12e29b03816e8f2b2c80cc7"