Merge pull request #115 from Patrik-Stas/feature/ui-value-copy

Add copy value button to UI

Author: Patrik-Stas

indypool-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-daemon",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "author": "Patrik Staš",
   "license": "ISC",
   "description": "Application scanning Hyperledger Indy blockchain for fetching and processing transactions.",

indyscan-api-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-api-client",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "author": "Patrik Staš",
   "license": "ISC",
   "description": "IndyScan HTTP API client.",

indyscan-api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-api",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "Web application to browse Hyperledger Indy blockchain transactions.",
   "main": "index.js",
   "scripts": {

indyscan-daemon-api-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-daemon-api-client",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "author": "Patrik Staš",
   "license": "ISC",
   "description": "IndyScan Daemon HTTP API client.",

indyscan-daemon-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-daemon-ui",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "author": "Patrik Staš",
   "license": "ISC",
   "description": "UI to view and manage the state of indyscan-daemon.",

indyscan-daemon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-daemon",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "author": "Patrik Staš",
   "license": "ISC",
   "description": "Application scanning Hyperledger Indy blockchain for fetching and processing transactions.",

indyscan-storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-storage",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "author": "Patrik Staš",
   "license": "ISC",
   "description": "",

indyscan-txtype/package.json

@@ -1,6 +1,6 @@
 {
   "name": "indyscan-txtype",
-  "version": "4.3.1",
+  "version": "4.4.0",
   "description": "",
   "main": "index.js",
   "scripts": {

indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.js

@@ -0,0 +1,63 @@
+import React, { useState } from 'react'
+import './BadgedValueDisplay.scss'
+import { Icon, Label, List } from 'semantic-ui-react'
+import ReactTooltip from 'react-tooltip'
+import { renderValuesAsBadges } from '../Common'
+
+export function BadgedValueDisplay (props) {
+
+  const [copied, setCopied] = useState(false)
+
+  function renderKeyValuePair (key, value, keyValueId, color = 'red') {
+    return (
+      <List.Item key={keyValueId} style={{ marginTop: 5 }}>
+        <Label color={color} horizontal>
+          <div className="tooltip">
+            { copied === key &&
+               < span className="tooltiptext">Copied</span>
+            }
+            <Icon data-tip data-for="registerTip"
+                  name='copy outline icon'
+                  style={{ cursor: 'pointer', marginRight: '1em' }}
+                  onClick={() => {
+                    navigator.clipboard.writeText(value)
+                    setCopied(key)
+                    setTimeout(() => setCopied(null), 400)
+                  }}
+            >
+            </Icon>
+          </div>
+          {key}
+        </Label>
+
+        {Array.isArray(value) ? renderValuesAsBadges(key, value) : <Label>{value.toString().trim()}</Label>}
+      </List.Item>
+    )
+  }
+
+  function renderKeyValues (obj, groupId, color) {
+    let items = []
+    let i = 0
+    for (let [key, value] of Object.entries(obj)) {
+      if (value) {
+        if (Array.isArray(value) && value.length > 0) {
+          items.push(renderKeyValuePair(key, value, `${groupId}-${i}`, color))
+        } else {
+          let stringified = value.toString().trim()
+          if (stringified) {
+            items.push(renderKeyValuePair(key, value, `${groupId}-${i}`, color))
+          } else {
+            continue
+          }
+        }
+        i++
+      }
+    }
+    return items
+  }
+
+  return <div>
+    {renderKeyValues(props.obj, props.groupId, props.color)}
+  </div>
+}
+

indyscan-webapp/components/BadgedValueDisplay/BadgedValueDisplay.scss

@@ -0,0 +1,27 @@
+  /* Tooltip container */
+.tooltip {
+  position: relative;
+  display: inline-block;
+}
+
+/* Tooltip text */
+.tooltip .tooltiptext {
+  visibility: visible;
+  width: 60px;
+  background-color: black;
+  color: #fff;
+  text-align: center;
+  padding: 5px 0;
+  border-radius: 6px;
+
+  /* Position the tooltip text - see examples below! */
+  position: absolute;
+  left: -50px;
+  bottom: 0.3em;
+  z-index: 1;
+}
+
+///* Show the tooltip text when you mouse over the tooltip container */
+//.tooltip:hover .tooltiptext {
+//  visibility: visible;
+//}