Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
…eact-hal into jialecl-addingExternal
  • Loading branch information
Jialecl committed Apr 8, 2024
2 parents b42564c + 5f681d5 commit 15d514f
Show file tree
Hide file tree
Showing 4 changed files with 334 additions and 303 deletions.
2 changes: 1 addition & 1 deletion lib/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
"peerDependencies": {
"react": "^18.x",
"react-dom": "^18.x",
"@dxc-technology/halstack-react": "^11.0.0",
"@dxc-technology/halstack-react": "^12.0.0",
"@dxc-technology/halstack-client": "^1.5.0"
}
}
161 changes: 83 additions & 78 deletions lib/src/components/HalTable.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import {
DxcPaginator,
DxcFlex,
DxcTypography,
HalstackProvider,
} from "@dxc-technology/halstack-react";
import { HalApiCaller } from "@dxc-technology/halstack-client";
import styled from "styled-components";
Expand Down Expand Up @@ -116,87 +117,91 @@ const HalTable = ({
const { onPageChange, sort } = navigationFunctions;

return (
<div>
<DxcTable>
<thead>
<tr>
{columns.map((column) => (
<th
key={`tableHeader_${column.header}`}
aria-sort={
column.sortProperty === sortColumn
? "ascending"
: `-${column.sortProperty}` === sortColumn
? "descending"
: "none"
}
>
<HeaderContainer
role={column.sortProperty ? "button" : undefined}
onClick={() => sortByColumn(column.sortProperty, sort, sortColumn)}
tabIndex={column.sortProperty ? 0 : -1}
isSortable={column.sortProperty ? true : false}
<HalstackProvider>
<div>
<DxcTable>
<thead>
<tr>
{columns.map((column) => (
<th
key={`tableHeader_${column.header}`}
aria-sort={
column.sortProperty === sortColumn
? "ascending"
: `-${column.sortProperty}` === sortColumn
? "descending"
: "none"
}
>
<span>{column.header}</span>
{column.sortProperty && (
<SortIcon>{getIconForSortableColumn(column.sortProperty, sortColumn)}</SortIcon>
)}
</HeaderContainer>
</th>
))}
</tr>
</thead>
<tbody>
{!isLoading &&
collectionItems.length > 0 &&
collectionItems.map((collectionItem, i) => (
<tr key={`tr-${i}`}>
{columns.map((columnProperty) => (
<td key={`tr-${i}-${columnProperty.displayProperty}`}>
{columnProperty.onClickItemFunction ? (
<LinkRow
onClick={() => {
columnProperty.onClickItemFunction(collectionItem);
}}
>
{getCellInfo(collectionItem, columnProperty)}
</LinkRow>
) : (
getCellInfo(collectionItem, columnProperty)
<HeaderContainer
role={column.sortProperty ? "button" : undefined}
onClick={() => sortByColumn(column.sortProperty, sort, sortColumn)}
tabIndex={column.sortProperty ? 0 : -1}
isSortable={column.sortProperty ? true : false}
>
<span>{column.header}</span>
{column.sortProperty && (
<SortIcon>
{getIconForSortableColumn(column.sortProperty, sortColumn)}
</SortIcon>
)}
</td>
))}
</tr>
))}
</tbody>
</DxcTable>
{isLoading ? (
<DxcFlex justifyContent="center">
<DxcSpinner margin="xxlarge" label="Fetching data" />
</DxcFlex>
) : (
!error &&
!collectionItems.length && (
<MessageContainer>
<DxcTypography color="#888888">There are no items in this list.</DxcTypography>
</HeaderContainer>
</th>
))}
</tr>
</thead>
<tbody>
{!isLoading &&
collectionItems.length > 0 &&
collectionItems.map((collectionItem, i) => (
<tr key={`tr-${i}`}>
{columns.map((columnProperty) => (
<td key={`tr-${i}-${columnProperty.displayProperty}`}>
{columnProperty.onClickItemFunction ? (
<LinkRow
onClick={() => {
columnProperty.onClickItemFunction(collectionItem);
}}
>
{getCellInfo(collectionItem, columnProperty)}
</LinkRow>
) : (
getCellInfo(collectionItem, columnProperty)
)}
</td>
))}
</tr>
))}
</tbody>
</DxcTable>
{isLoading ? (
<DxcFlex justifyContent="center">
<DxcSpinner margin="xxlarge" label="Fetching data" />
</DxcFlex>
) : (
!error &&
!collectionItems.length && (
<MessageContainer>
<DxcTypography color="#888888">There are no items in this list.</DxcTypography>
</MessageContainer>
)
)}
{!error && totalCollectionItems > 0 && (
<DxcPaginator
totalItems={totalCollectionItems}
itemsPerPage={itemsPerPage}
currentPage={page}
showGoToPage={true}
onPageChange={onPageChange}
/>
)}
{error && (
<MessageContainer hasError={true}>
<DxcTypography color="#d0011b">{error}</DxcTypography>
</MessageContainer>
)
)}
{!error && totalCollectionItems > 0 && (
<DxcPaginator
totalItems={totalCollectionItems}
itemsPerPage={itemsPerPage}
currentPage={page}
showGoToPage={true}
onPageChange={onPageChange}
/>
)}
{error && (
<MessageContainer hasError={true}>
<DxcTypography color="#d0011b">{error}</DxcTypography>
</MessageContainer>
)}
</div>
)}
</div>
</HalstackProvider>
);
};

Expand Down
Loading

0 comments on commit 15d514f

Please sign in to comment.