From d8aed375922df750aa42e9b35749640a5c54eb0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ramiro=20Bl=C3=A1zquez?= <ramirobg94@gmail.com>
Date: Sat, 26 Aug 2023 21:37:39 +0200
Subject: [PATCH] copy to clipboard

---
 ios/Podfile.lock                              |  6 ++++
 package.json                                  |  1 +
 src/arena-mobile-ui/colors/index.js           |  4 +++
 .../Attributes/Coordinate/Preview/index.js    |  4 +++
 .../Attributes/common/Base/Preview/index.js   | 14 ++++++++-
 .../Attributes/common/Base/Preview/styles.js  |  3 +-
 .../common/CopyToClipboard/component.js       | 31 +++++++++++++++++++
 .../common/CopyToClipboard/index.js           |  1 +
 .../common/CopyToClipboard/styles.js          | 13 ++++++++
 yarn.lock                                     |  5 +++
 10 files changed, 79 insertions(+), 3 deletions(-)
 create mode 100644 src/form/Attributes/common/CopyToClipboard/component.js
 create mode 100644 src/form/Attributes/common/CopyToClipboard/index.js
 create mode 100644 src/form/Attributes/common/CopyToClipboard/styles.js

diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 0f86e87d..d840224d 100644
--- a/ios/Podfile.lock
+++ b/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
diff --git a/package.json b/package.json
index 28d5ed30..682057a3 100644
--- a/package.json
+++ b/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",
diff --git a/src/arena-mobile-ui/colors/index.js b/src/arena-mobile-ui/colors/index.js
index 209b93c9..4db96d14 100644
--- a/src/arena-mobile-ui/colors/index.js
+++ b/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,
diff --git a/src/form/Attributes/Coordinate/Preview/index.js b/src/form/Attributes/Coordinate/Preview/index.js
index 1b3ceb16..4f13ff99 100644
--- a/src/form/Attributes/Coordinate/Preview/index.js
+++ b/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
diff --git a/src/form/Attributes/common/Base/Preview/index.js b/src/form/Attributes/common/Base/Preview/index.js
index 7ac8827d..bd09aedf 100644
--- a/src/form/Attributes/common/Base/Preview/index.js
+++ b/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(() => {
diff --git a/src/form/Attributes/common/Base/Preview/styles.js b/src/form/Attributes/common/Base/Preview/styles.js
index cd0ad36e..53678d22 100644
--- a/src/form/Attributes/common/Base/Preview/styles.js
+++ b/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',
diff --git a/src/form/Attributes/common/CopyToClipboard/component.js b/src/form/Attributes/common/CopyToClipboard/component.js
new file mode 100644
index 00000000..91cc38c3
--- /dev/null
+++ b/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;
diff --git a/src/form/Attributes/common/CopyToClipboard/index.js b/src/form/Attributes/common/CopyToClipboard/index.js
new file mode 100644
index 00000000..2e331cd2
--- /dev/null
+++ b/src/form/Attributes/common/CopyToClipboard/index.js
@@ -0,0 +1 @@
+export {default} from './component';
diff --git a/src/form/Attributes/common/CopyToClipboard/styles.js b/src/form/Attributes/common/CopyToClipboard/styles.js
new file mode 100644
index 00000000..2df71107
--- /dev/null
+++ b/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;
diff --git a/yarn.lock b/yarn.lock
index eb016e4d..d86ebbcf 100644
--- a/yarn.lock
+++ b/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"