From 065961f2c2a56daee2f97dac9afe0abf55877b37 Mon Sep 17 00:00:00 2001 From: Kamy Date: Tue, 2 Jul 2024 11:19:07 -0400 Subject: [PATCH] fix(dataTable): fix the skeleton of datatable (#2332) * fix(datable): update the datatbale and detail skeleton closes2307 * fix(datable): update the datatbale and detail skeleton closes2307 * fix(datable): update the datatbale and detail skeleton closes2307 --- .../core/components/data-table/data-panel.tsx | 5 ++- .../components/data-table/data-skeleton.tsx | 37 +++++++++++++++++++ .../data-table/data-table-modal.tsx | 2 +- .../core/components/details/details-panel.tsx | 5 ++- .../components/details/details-skeleton.tsx | 21 +++++++++++ .../ui/button-drop-down/button-drop-down.tsx | 7 +--- packages/geoview-core/src/ui/index.ts | 1 + .../ui/list/checkbox-list/checkbox-list.tsx | 10 +---- packages/geoview-core/src/ui/table/table.tsx | 2 +- 9 files changed, 69 insertions(+), 21 deletions(-) create mode 100644 packages/geoview-core/src/core/components/data-table/data-skeleton.tsx create mode 100644 packages/geoview-core/src/core/components/details/details-skeleton.tsx diff --git a/packages/geoview-core/src/core/components/data-table/data-panel.tsx b/packages/geoview-core/src/core/components/data-table/data-panel.tsx index 93bfbc77608..dea210225f9 100644 --- a/packages/geoview-core/src/core/components/data-table/data-panel.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-panel.tsx @@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { useTheme } from '@mui/material/styles'; import { delay } from 'lodash'; -import { Box, FilterAltIcon, Skeleton } from '@/ui'; +import { Box, FilterAltIcon } from '@/ui'; import DataTable from './data-table'; import { useDataTableSelectedLayerPath, @@ -24,6 +24,7 @@ import { CONTAINER_TYPE, LAYER_STATUS, TABS } from '@/core/utils/constant'; import { MappedLayerDataType } from './data-table-types'; import { CV_DEFAULT_APPBAR_CORE } from '@/api/config/types/config-constants'; import { TypeContainerBox } from '@/core/types/global-types'; +import DataSkeleton from './data-skeleton'; interface DataPanelType { fullWidth?: boolean; @@ -219,7 +220,7 @@ export function Datapanel({ fullWidth = false, containerType = CONTAINER_TYPE.FO */ const renderContent = (): JSX.Element | null => { if (isLoading || memoIsLayerQueryStatusProcessing()) { - return ; + return ; } if (!isLayerDisabled() && isSelectedLayerHasFeatures()) { return ( diff --git a/packages/geoview-core/src/core/components/data-table/data-skeleton.tsx b/packages/geoview-core/src/core/components/data-table/data-skeleton.tsx new file mode 100644 index 00000000000..381730b9f6a --- /dev/null +++ b/packages/geoview-core/src/core/components/data-table/data-skeleton.tsx @@ -0,0 +1,37 @@ +import { useTheme } from '@mui/material/styles'; +import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper, Skeleton } from '@/ui'; + +/** + * Custom data table skeleton build with table and mui skelton + * @returns {JSX.Element} + */ +export default function DataSkeleton(): JSX.Element { + const theme = useTheme(); + + return ( + + + + + {[...Array(5).keys()].map((value) => ( + + + + ))} + + + + {[...Array(6).keys()].map((row) => ( + + {[...Array(5).keys()].map((value) => ( + + + + ))} + + ))} + +
+ + ); +} diff --git a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx index 4b32fdace4b..105e6ec6916 100644 --- a/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx +++ b/packages/geoview-core/src/core/components/data-table/data-table-modal.tsx @@ -7,7 +7,7 @@ import { DialogActions, DialogTitle, DialogContent, - Table, + MRTTable as Table, type MRT_ColumnDef as MRTColumnDef, Box, CircularProgress, diff --git a/packages/geoview-core/src/core/components/details/details-panel.tsx b/packages/geoview-core/src/core/components/details/details-panel.tsx index 4c2bdc2c37c..cbb3b3ff8e7 100644 --- a/packages/geoview-core/src/core/components/details/details-panel.tsx +++ b/packages/geoview-core/src/core/components/details/details-panel.tsx @@ -1,7 +1,7 @@ import { useState, useMemo, useCallback, useEffect, useRef } from 'react'; import { useTranslation } from 'react-i18next'; import { useTheme } from '@mui/material/styles'; -import { IconButton, Grid, ArrowForwardIosOutlinedIcon, ArrowBackIosOutlinedIcon, LayersClearOutlinedIcon, Box, Skeleton } from '@/ui'; +import { IconButton, Grid, ArrowForwardIosOutlinedIcon, ArrowBackIosOutlinedIcon, LayersClearOutlinedIcon, Box } from '@/ui'; import { useDetailsStoreActions, useDetailsCheckedFeatures, @@ -16,6 +16,7 @@ import { LayerListEntry, Layout } from '@/core/components/common'; import { getSxClasses } from './details-style'; import { FeatureInfo } from './feature-info-new'; import { LAYER_STATUS } from '@/core/utils/constant'; +import DetailsSkeleton from './details-skeleton'; interface DetailsPanelType { fullWidth?: boolean; @@ -430,7 +431,7 @@ export function DetailsPanel({ fullWidth = false }: DetailsPanelType): JSX.Eleme */ const renderContent = (): JSX.Element | null => { if (memoIsAllLayersQueryStatusProcessing()) { - return ; + return ; } if (memoSelectedLayerDataFeatures && memoSelectedLayerDataFeatures.length > 0) { return ( diff --git a/packages/geoview-core/src/core/components/details/details-skeleton.tsx b/packages/geoview-core/src/core/components/details/details-skeleton.tsx new file mode 100644 index 00000000000..8be1b61a9bc --- /dev/null +++ b/packages/geoview-core/src/core/components/details/details-skeleton.tsx @@ -0,0 +1,21 @@ +import { Box, Skeleton } from '@/ui'; + +/** + * Custom details skeleton build with mui skeleton component. + * @returns {JSX.Element} + */ +export default function DetailsSkeleton(): JSX.Element { + const sizes = ['15%', '10%', '15%', '25%', '10%', '20%', '10%']; + return ( + + + {sizes.map((size, index) => ( + + + + + ))} + + + ); +} diff --git a/packages/geoview-core/src/ui/button-drop-down/button-drop-down.tsx b/packages/geoview-core/src/ui/button-drop-down/button-drop-down.tsx index 2f31af1a7e6..504abcf0c92 100644 --- a/packages/geoview-core/src/ui/button-drop-down/button-drop-down.tsx +++ b/packages/geoview-core/src/ui/button-drop-down/button-drop-down.tsx @@ -24,7 +24,7 @@ export type ButtonDropDownProps = ButtonGroupProps & { export function ButtonDropDown(props: ButtonDropDownProps): JSX.Element { // #region PROPS **************************************************************************************************** - const { options, onButtonClick, ...otherProps } = props; + const { options, onButtonClick = null, ...otherProps } = props; const theme = useTheme(); const sxClasses = getSxClasses(theme); @@ -126,8 +126,3 @@ export function ButtonDropDown(props: ButtonDropDownProps): JSX.Element { // #endregion } - -// TODO: Refactor - Remove defaultProps as it's no longer a good practice -ButtonDropDown.defaultProps = { - onButtonClick: null, -}; diff --git a/packages/geoview-core/src/ui/index.ts b/packages/geoview-core/src/ui/index.ts index 505004d4227..d7497d85e1d 100644 --- a/packages/geoview-core/src/ui/index.ts +++ b/packages/geoview-core/src/ui/index.ts @@ -47,3 +47,4 @@ export * from './toolbar/toolbar'; export * from './tooltip/tooltip'; export * from './typography/typography'; export * from './popper/popper'; +export { Table, TableBody, TableCell, TableContainer, TableHead, TableRow } from '@mui/material'; diff --git a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx index 793a7a42496..13f75c40bbc 100644 --- a/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx +++ b/packages/geoview-core/src/ui/list/checkbox-list/checkbox-list.tsx @@ -36,7 +36,7 @@ export type CheckboxListItem = { * @returns JSX.Element The Component */ export function CheckboxList(props: CheckboxListProps): JSX.Element { - const { listItems, checkedValues, multiselect, onChecked } = props; + const { listItems, checkedValues, multiselect, onChecked = null } = props; const theme = useTheme(); const sxClasses = getSxClasses(theme); @@ -111,11 +111,3 @@ export function CheckboxList(props: CheckboxListProps): JSX.Element { ); } - -/** - * React's default properties for the CheckboxList - */ -// TODO: Refactor - Remove defaultProps as it's no longer a good practice -CheckboxList.defaultProps = { - onChecked: null, -}; diff --git a/packages/geoview-core/src/ui/table/table.tsx b/packages/geoview-core/src/ui/table/table.tsx index e1f298fa548..a8988f4c5f9 100644 --- a/packages/geoview-core/src/ui/table/table.tsx +++ b/packages/geoview-core/src/ui/table/table.tsx @@ -5,7 +5,7 @@ import { MaterialReactTable, MRT_TableOptions as MRTTableOptions, type MRT_RowDa * @param {MRTTableOptions} props props defined by material react table library. * @returns {JSX.Element} */ -export function Table(tableOptions: MRTTableOptions): JSX.Element { +export function MRTTable(tableOptions: MRTTableOptions): JSX.Element { return ; }