Merge pull request #82 from catenax-ng/feature/CPLP-3502/StaticTableC…

…opyIcon
eclipse-tractusx · Jan 11, 2024 · b75db80 · b75db80
2 parents cdfee9a + 3a794aa
commit b75db80
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.16
+
+- Add copy icon functionality in static table row
+
 ## 2.1.15
 
 - Add tooltip hint in stepper and make stepper responsive

diff --git a/DEPENDENCIES b/DEPENDENCIES
@@ -876,7 +876,7 @@ npm/npmjs/-/strip-final-newline/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/strip-indent/3.0.0, MIT, approved, clearlydefined
 npm/npmjs/-/strip-json-comments/3.1.1, MIT, approved, clearlydefined
 npm/npmjs/-/style-inject/0.3.0, MIT, approved, clearlydefined
-npm/npmjs/-/style-loader/3.3.3, MIT, approved, clearlydefined
+npm/npmjs/-/style-loader/3.3.3, MIT, approved, #12669
 npm/npmjs/-/stylehacks/5.1.1, MIT, approved, clearlydefined
 npm/npmjs/-/stylis/4.2.0, MIT, approved, #8409
 npm/npmjs/-/supports-color/5.5.0, MIT, approved, clearlydefined

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.15",
+  "version": "2.1.16",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

diff --git a/src/components/basic/StaticTable/StaticTable.stories.tsx b/src/components/basic/StaticTable/StaticTable.stories.tsx
@@ -51,6 +51,7 @@ Table.args = {
         },
         {
           icon: true,
+          copyValue: 'test',
           inputValue: 'row1 col2',
           isValid: (value) => console.log('Checking Validation', value),
           errorMessage: 'Please enter valid value.',

diff --git a/src/components/basic/StaticTable/VerticalTable.tsx b/src/components/basic/StaticTable/VerticalTable.tsx
@@ -19,10 +19,11 @@
  ********************************************************************************/
 
 import { useState } from 'react'
-import { Typography, Link } from '@mui/material'
+import { Typography, Link, Box } from '@mui/material'
 import EditIcon from '@mui/icons-material/Edit'
 import HelpOutlineIcon from '@mui/icons-material/HelpOutline'
 import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import CloseIcon from '@mui/icons-material/Close'
 import type { TableType } from './types'
 import { Input } from '../Input'
@@ -35,6 +36,7 @@ export const VerticalTable = ({
   data: TableType
   handleEdit?: (inputValue: string) => void
 }) => {
+  const [copied, setCopied] = useState<string>('')
   const [inputField, setInputField] = useState<{
     row: unknown
     column: unknown
@@ -103,6 +105,8 @@ export const VerticalTable = ({
     )
   }
 
+  const renderTextvalue = (text: string | undefined) => text ?? ''
+
   return (
     <table
       style={{ width: '100%', borderCollapse: 'collapse' }}
@@ -144,8 +148,8 @@ export const VerticalTable = ({
                 >
                   <div style={{ display: 'flex', alignItems: 'center' }}>
                     {inputField &&
-                    inputField.row === r &&
-                    inputField.column === c ? (
+                      inputField.row === r &&
+                      inputField.column === c ? (
                       renderInputField(r, c)
                     ) : (
                       <Link
@@ -168,13 +172,45 @@ export const VerticalTable = ({
                         </Typography>
                       </Link>
                     )}
+                    {data?.edit?.[r]?.[c].copyValue &&
+                      (
+                        c !== 0 &&
+                        <Box
+                          sx={{
+                            cursor: 'pointer',
+                            display: 'flex',
+                            color: copied === data?.edit?.[r]?.[c].copyValue ? '#00cc00' : '#eeeeee',
+                            ':hover': {
+                              color: copied === data?.edit?.[r]?.[c].copyValue ? '#00cc00' : '#cccccc',
+                            },
+                          }}
+                          onClick={() => {
+                            void (async () => {
+                              const value = renderTextvalue(data?.edit?.[r]?.[c].copyValue?.toString())
+                              await navigator.clipboard.writeText(value)
+                              setCopied(value)
+                              setTimeout(() => {
+                                setCopied('')
+                              }, 1000)
+                            })()
+                          }}
+                        >
+                          <ContentCopyIcon
+                            sx={{
+                              fontSize: '18px',
+                              marginLeft: '10px',
+                            }}
+                          />
+                        </Box>
+                      )
+                    }
                     {data?.edit?.[r]?.[c].icon &&
                       !inputField &&
                       (c === 0 ? (
                         <Tooltips
                           color="dark"
                           tooltipPlacement="bottom-start"
-                          tooltipText={data?.edit?.[r][c].inputValue ?? ''}
+                          tooltipText={renderTextvalue(data?.edit?.[r][c].inputValue)}
                         >
                           <HelpOutlineIcon
                             sx={{

diff --git a/src/components/basic/StaticTable/types.ts b/src/components/basic/StaticTable/types.ts
@@ -25,6 +25,7 @@ export interface TableType {
   edit?: Array<
     Array<{
       icon: boolean
+      copyValue?: string
       inputValue?: string
       clickableLink?: string
       isValid?: (value: string) => unknown