feat(vertical table): add new vertical table

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 3.0.16
+
+- Add new Vertical Table for code optimization
+
 ## 3.0.15
 
 - Add support for customization and custom themes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "3.0.15",
+  "version": "3.0.16",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/StaticTable/EditField.tsx

@@ -0,0 +1,129 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Typography } from '@mui/material'
+import { useState } from 'react'
+import EditIcon from '@mui/icons-material/Edit'
+import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'
+import CloseIcon from '@mui/icons-material/Close'
+import { Input } from '../../../main'
+import { Tooltips } from '../ToolTips'
+
+export type EditFieldType = string | number | boolean
+
+export const EditField = ({
+  value,
+  handleEdit,
+  isValid,
+  errorMessage
+}: {
+  value: EditFieldType
+  handleEdit: (value: EditFieldType) => void | Promise<void>
+  isValid?: (value: string) => unknown
+  errorMessage?: string
+}) => {
+
+  const [inputField, setInputField] = useState(false)
+  const [inputValue, setInputValue] = useState('')
+  const [inputErrorMessage, setInputErrorMessage] = useState('')
+
+  const handleEditFn = (value: string) => {
+    setInputErrorMessage('')
+    setInputValue(value ?? '')
+    setInputField(true)
+  }
+
+  const addInputValue = (value: string) => {
+    setInputValue(value)
+    isValid &&
+      setInputErrorMessage(
+        !isValid(value.trim()) ? errorMessage ?? '' : ''
+      )
+  }
+
+  const renderInputField = () => {
+    return (
+      <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
+        <div style={{ width: '100%' }}>
+          <Input
+            onChange={(e) => {
+              addInputValue(e.target.value)
+            }}
+            onKeyPress={(event) => {void (async() => {
+              if (event.key === 'Enter' && !inputErrorMessage) {
+                setInputField(false)
+                await handleEdit(inputValue)
+              }
+            })()}}
+            onClick={(e) => {
+              e.stopPropagation()
+            }}
+            value={inputValue}
+          />
+        </div>
+        {inputErrorMessage && (
+          <Tooltips
+            color="dark"
+            tooltipPlacement="bottom-start"
+            tooltipText={inputErrorMessage}
+          >
+            <span>
+              <ErrorOutlineIcon sx={{ marginTop: '35px' }} color="error" />
+            </span>
+          </Tooltips>
+        )}
+        <CloseIcon
+          onClick={() => {
+            setInputField(false)
+          }}
+          sx={{ marginTop: '25px' }}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div>
+      {inputField ? (
+        renderInputField()
+      ) : (
+        <span
+          style={{ cursor: 'pointer', display: 'flex', flexDirection: 'row' }}
+        >
+          <Typography variant="body3">{value}</Typography>
+          <span style={{ marginLeft: 'auto' }}>
+            <EditIcon
+              onClick={() => {
+                handleEditFn(value as string)
+              }}
+              sx={{
+                fontSize: '18px',
+                color: '#888888',
+                cursor: 'pointer',
+                '&:hover': {
+                  color: '#0088CC',
+                },
+              }}
+            />
+          </span>
+        </span>
+      )}
+    </div>
+  )
+}

src/components/basic/StaticTable/VerticalTableNew.tsx

@@ -0,0 +1,90 @@
+/********************************************************************************
+ * Copyright (c) 2024 Contributors to the Eclipse Foundation
+ *
+ * See the NOTICE file(s) distributed with this work for additional
+ * information regarding copyright ownership.
+ *
+ * This program and the accompanying materials are made available under the
+ * terms of the Apache License, Version 2.0 which is available at
+ * https://www.apache.org/licenses/LICENSE-2.0.
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ ********************************************************************************/
+
+import { Typography } from '@mui/material'
+
+export type TableCellType = string | number | boolean | JSX.Element
+export interface VerticalTableType {
+  head: TableCellType[]
+  body: TableCellType[][]
+  edit?: Array<
+    Array<{
+      icon: boolean
+      copyValue?: string
+      inputValue?: string
+      clickableLink?: string
+      isValid?: (value: string) => unknown
+      errorMessage?: string
+    }>
+  >
+  copy?: Array<
+    Array<{
+      icon: boolean
+      copyValue?: string
+    }>
+  >
+}
+
+
+export const VerticalTableNew = ({ data }: { data: VerticalTableType }) => {
+  return (
+    <table style={{borderCollapse: 'collapse',  width: '100%'}}>
+      <thead>
+        <tr>
+          {data.head.map((col, c) => (
+            <th
+              style={{
+                backgroundColor: '#ecf0f4',
+                padding: '10px 15px',
+                textAlign: 'left',
+              }}
+              key={JSON.stringify(c)}
+            >
+              <Typography variant="label3">{col}</Typography>
+            </th>
+          ))}
+        </tr>
+      </thead>
+      <tbody>
+        {data.body.map((row, rIndex) => (
+          <tr key={JSON.stringify(rIndex)}>
+            {row.map((col, cindex) => (
+              <td
+                key={JSON.stringify(cindex)}
+                style={{
+                  width: '50%',
+                  padding: '10px 15px',
+                  borderBottom: '1px solid #f1f1f1',
+                  whiteSpace: 'normal',
+                  wordBreak: 'break-all',
+                }}
+              >
+                {typeof col === 'string' ? (
+                  <Typography variant="body3">{col}</Typography>
+                ) : (
+                  col
+                )}
+              </td>
+            ))}
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  )
+}

src/components/basic/StaticTable/types.ts

@@ -19,6 +19,7 @@
  ********************************************************************************/
 
 import type React from 'react'
+
 export interface TableType {
   head: string[]
   body: string[][] | React.FC[][]

src/components/index.tsx

@@ -45,6 +45,8 @@ export { SharedThemeProvider } from './basic/SharedThemeProvider'
 export { Tab } from './basic/Tabs/Tab'
 export { TabPanel } from './basic/Tabs/TabPanel'
 export { StaticTable } from './basic/StaticTable'
+export { VerticalTableNew } from './basic/StaticTable/VerticalTableNew'
+export { EditField } from './basic/StaticTable/EditField'
 export { Table, StatusTag } from './basic/Table'
 export { PageLoadingTable } from './basic/Table/PageLoadingTable'
 export { Tabs } from './basic/Tabs/Tabs'
@@ -111,6 +113,7 @@ export type { CardItems } from './content/Cards'
 export type { NavigationProps } from './content/Navigation'
 export type { PageNotificationsProps } from './basic/Notifications/PageNotification'
 export type { TableType } from './basic/StaticTable/types'
+export type { VerticalTableType, TableCellType } from './basic/StaticTable/VerticalTableNew'
 export type { ImageType } from './basic/ImageGallery/types'
 export type { DateType } from './basic/Datepicker'
 export { StatusVariants } from './content/Cards/CardChip'