diff --git a/CHANGELOG.md b/CHANGELOG.md index cb8e081f..62fb3871 100644 --- a/CHANGELOG.md +++ b/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 diff --git a/package.json b/package.json index c57b55b4..7d69adc9 100644 --- a/package.json +++ b/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", diff --git a/src/components/basic/StaticTable/EditField.tsx b/src/components/basic/StaticTable/EditField.tsx new file mode 100644 index 00000000..2811a22d --- /dev/null +++ b/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 + 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 ( +
+
+ { + addInputValue(e.target.value) + }} + onKeyPress={(event) => {void (async() => { + if (event.key === 'Enter' && !inputErrorMessage) { + setInputField(false) + await handleEdit(inputValue) + } + })()}} + onClick={(e) => { + e.stopPropagation() + }} + value={inputValue} + /> +
+ {inputErrorMessage && ( + + + + + + )} + { + setInputField(false) + }} + sx={{ marginTop: '25px' }} + /> +
+ ) + } + + return ( +
+ {inputField ? ( + renderInputField() + ) : ( + + {value} + + { + handleEditFn(value as string) + }} + sx={{ + fontSize: '18px', + color: '#888888', + cursor: 'pointer', + '&:hover': { + color: '#0088CC', + }, + }} + /> + + + )} +
+ ) +} diff --git a/src/components/basic/StaticTable/VerticalTableNew.tsx b/src/components/basic/StaticTable/VerticalTableNew.tsx new file mode 100644 index 00000000..b8f82653 --- /dev/null +++ b/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 ( + + + + {data.head.map((col, c) => ( + + ))} + + + + {data.body.map((row, rIndex) => ( + + {row.map((col, cindex) => ( + + ))} + + ))} + +
+ {col} +
+ {typeof col === 'string' ? ( + {col} + ) : ( + col + )} +
+ ) +} diff --git a/src/components/basic/StaticTable/types.ts b/src/components/basic/StaticTable/types.ts index 2807b988..697572c1 100644 --- a/src/components/basic/StaticTable/types.ts +++ b/src/components/basic/StaticTable/types.ts @@ -19,6 +19,7 @@ ********************************************************************************/ import type React from 'react' + export interface TableType { head: string[] body: string[][] | React.FC[][] diff --git a/src/components/index.tsx b/src/components/index.tsx index 197392a9..8fceaa56 100644 --- a/src/components/index.tsx +++ b/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'