From bcd19b9384f70aa6ead33af84d1c6a50446e264b Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Wed, 10 Jan 2024 18:39:06 +0530 Subject: [PATCH 1/4] feat(statictable): add copy icon value --- CHANGELOG.md | 4 ++ package.json | 2 +- .../basic/StaticTable/StaticTable.stories.tsx | 1 + .../basic/StaticTable/VerticalTable.tsx | 38 +++++++++++++++++-- src/components/basic/StaticTable/types.ts | 1 + 5 files changed, 42 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index d3560ebf..d930bfc1 100644 --- 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/package.json b/package.json index 0a3da3b8..5434470b 100644 --- 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 index 06b65aeb..be9d5235 100644 --- 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: 'nidhi', 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 index 60138162..76988599 100644 --- 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('') const [inputField, setInputField] = useState<{ row: unknown column: unknown @@ -144,8 +146,8 @@ export const VerticalTable = ({ >
{inputField && - inputField.row === r && - inputField.column === c ? ( + inputField.row === r && + inputField.column === c ? ( renderInputField(r, c) ) : ( )} + {data?.edit?.[r]?.[c].copyValue && + ( + c !== 0 && + { + const value = data?.edit?.[r]?.[c].copyValue?.toString() ?? '' + await navigator.clipboard.writeText(value) + setCopied(value) + setTimeout(() => { + setCopied('') + }, 1000) + }} + > + + + ) + } {data?.edit?.[r]?.[c].icon && !inputField && (c === 0 ? ( diff --git a/src/components/basic/StaticTable/types.ts b/src/components/basic/StaticTable/types.ts index e5fad764..22baf815 100644 --- 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 From e47d7293325a5eaa5c38cea10deecba220af8c9f Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Wed, 10 Jan 2024 18:55:18 +0530 Subject: [PATCH 2/4] feat(statictable): fix code smells --- src/components/basic/StaticTable/StaticTable.stories.tsx | 2 +- src/components/basic/StaticTable/VerticalTable.tsx | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/basic/StaticTable/StaticTable.stories.tsx b/src/components/basic/StaticTable/StaticTable.stories.tsx index be9d5235..51622c0a 100644 --- a/src/components/basic/StaticTable/StaticTable.stories.tsx +++ b/src/components/basic/StaticTable/StaticTable.stories.tsx @@ -51,7 +51,7 @@ Table.args = { }, { icon: true, - copyValue: 'nidhi', + 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 index 76988599..178dfd2b 100644 --- a/src/components/basic/StaticTable/VerticalTable.tsx +++ b/src/components/basic/StaticTable/VerticalTable.tsx @@ -105,6 +105,10 @@ export const VerticalTable = ({ ) } + const renderTextvalue = (text: string|undefined) => { + return text ?? '' + } + return ( { - const value = data?.edit?.[r]?.[c].copyValue?.toString() ?? '' + const value = renderTextvalue(data?.edit?.[r]?.[c].copyValue?.toString()) await navigator.clipboard.writeText(value) setCopied(value) setTimeout(() => { @@ -206,7 +210,7 @@ export const VerticalTable = ({ Date: Wed, 10 Jan 2024 18:58:01 +0530 Subject: [PATCH 3/4] feat(statictable): update dependencies --- DEPENDENCIES | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/DEPENDENCIES b/DEPENDENCIES index a9503625..0513a5a6 100644 --- 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 From 3a794aad983f991b79735fe8c0c2aff1cd40c215 Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Wed, 10 Jan 2024 19:18:59 +0530 Subject: [PATCH 4/4] feat(statictable): fix code smells --- .../basic/StaticTable/VerticalTable.tsx | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/basic/StaticTable/VerticalTable.tsx b/src/components/basic/StaticTable/VerticalTable.tsx index 178dfd2b..a9a569dc 100644 --- a/src/components/basic/StaticTable/VerticalTable.tsx +++ b/src/components/basic/StaticTable/VerticalTable.tsx @@ -105,9 +105,7 @@ export const VerticalTable = ({ ) } - const renderTextvalue = (text: string|undefined) => { - return text ?? '' - } + const renderTextvalue = (text: string | undefined) => text ?? '' return (
{ - const value = renderTextvalue(data?.edit?.[r]?.[c].copyValue?.toString()) - await navigator.clipboard.writeText(value) - setCopied(value) - setTimeout(() => { - setCopied('') - }, 1000) + onClick={() => { + void (async () => { + const value = renderTextvalue(data?.edit?.[r]?.[c].copyValue?.toString()) + await navigator.clipboard.writeText(value) + setCopied(value) + setTimeout(() => { + setCopied('') + }, 1000) + })() }} >