refactor: improve code readability by formatting and restructuring useRef and useCallback hooks in EnterpriseDataTable component
This commit is contained in:
@@ -193,7 +193,8 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
const { t } = useEnterpriseModuleTranslationContext();
|
const { t } = useEnterpriseModuleTranslationContext();
|
||||||
const { dataServices } = useEnterpriseModuleDataServiceContext<E>();
|
const { dataServices } = useEnterpriseModuleDataServiceContext<E>();
|
||||||
const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } = useEnterpriseModuleSelectionContext<E>();
|
const { selectedRows, setSelectedRows, metaData, setMetaData, filterData, setFilterData } =
|
||||||
|
useEnterpriseModuleSelectionContext<E>();
|
||||||
const navigation = useEnterpriseModuleNavigationContext();
|
const navigation = useEnterpriseModuleNavigationContext();
|
||||||
|
|
||||||
const { config } = useEnterpriseModuleConfigContext();
|
const { config } = useEnterpriseModuleConfigContext();
|
||||||
@@ -214,12 +215,14 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
// Search & Filter State
|
// Search & Filter State
|
||||||
// ---------------------------------------------------------------------------
|
// ---------------------------------------------------------------------------
|
||||||
const searchRef = useRef<string>((filterData?.[searchKey] as string) || '');
|
const searchRef = useRef<string>((filterData?.[searchKey] as string) || '');
|
||||||
const filterRef = useRef<Record<string, any>>((() => {
|
const filterRef = useRef<Record<string, any>>(
|
||||||
if (!filterData) return {};
|
(() => {
|
||||||
const copy = { ...filterData };
|
if (!filterData) return {};
|
||||||
delete copy[searchKey];
|
const copy = { ...filterData };
|
||||||
return copy;
|
delete copy[searchKey];
|
||||||
})());
|
return copy;
|
||||||
|
})(),
|
||||||
|
);
|
||||||
|
|
||||||
const [searchValue, setSearchValue] = useState(searchRef.current);
|
const [searchValue, setSearchValue] = useState(searchRef.current);
|
||||||
|
|
||||||
@@ -227,12 +230,15 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
setSearchValue(e.currentTarget.value);
|
setSearchValue(e.currentTarget.value);
|
||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
const handleSearchKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
|
const handleSearchKeyDown = useCallback(
|
||||||
if (e.key === 'Enter') {
|
(e: React.KeyboardEvent<HTMLInputElement>) => {
|
||||||
searchRef.current = searchValue;
|
if (e.key === 'Enter') {
|
||||||
gridApiRef.current?.refreshServerSide({ purge: true });
|
searchRef.current = searchValue;
|
||||||
}
|
gridApiRef.current?.refreshServerSide({ purge: true });
|
||||||
}, [searchValue]);
|
}
|
||||||
|
},
|
||||||
|
[searchValue],
|
||||||
|
);
|
||||||
|
|
||||||
const handleSearchClear = useCallback(() => {
|
const handleSearchClear = useCallback(() => {
|
||||||
setSearchValue('');
|
setSearchValue('');
|
||||||
@@ -248,7 +254,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
const filterKeys = filterConfig?.defaultValues
|
const filterKeys = filterConfig?.defaultValues
|
||||||
? Object.keys(filterConfig.defaultValues)
|
? Object.keys(filterConfig.defaultValues)
|
||||||
: Object.keys(filterData).filter(
|
: Object.keys(filterData).filter(
|
||||||
(key) => key !== searchKey && !['page', 'limit', 'order_by', 'order_type'].includes(key)
|
(key) => key !== searchKey && !['page', 'limit', 'order_by', 'order_type'].includes(key),
|
||||||
);
|
);
|
||||||
|
|
||||||
return filterKeys.filter((key) => {
|
return filterKeys.filter((key) => {
|
||||||
@@ -680,7 +686,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
try {
|
try {
|
||||||
const request = params.request;
|
const request = params.request;
|
||||||
|
|
||||||
const limit = perPage
|
const limit = perPage;
|
||||||
const page = Math.floor((request.startRow ?? 0) / limit) + 1;
|
const page = Math.floor((request.startRow ?? 0) / limit) + 1;
|
||||||
|
|
||||||
// Extract sorting information from the request
|
// Extract sorting information from the request
|
||||||
@@ -694,7 +700,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
limit,
|
limit,
|
||||||
order_by: orderBy,
|
order_by: orderBy,
|
||||||
order_type: orderType,
|
order_type: orderType,
|
||||||
...filterRef.current
|
...filterRef.current,
|
||||||
};
|
};
|
||||||
|
|
||||||
if (searchRef.current) {
|
if (searchRef.current) {
|
||||||
@@ -737,9 +743,17 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
if (params.api) {
|
if (params.api) {
|
||||||
// Attach the server-side datasource to the grid API
|
// Attach the server-side datasource to the grid API
|
||||||
params.api.setGridOption('serverSideDatasource', datasource);
|
params.api.setGridOption('serverSideDatasource', datasource);
|
||||||
|
|
||||||
|
// Synchronously jump to the restored page immediately after attaching the datasource.
|
||||||
|
// This ensures the grid doesn't reset our page back to 1.
|
||||||
|
// NOTE: This relies on `serverSideInitialRowCount` being provided so the grid knows
|
||||||
|
// there are enough pages to jump to!
|
||||||
|
if (isPaginated && metaData?.page && metaData.page > 1) {
|
||||||
|
params.api.paginationGoToPage(metaData.page - 1);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
[datasource, setSelectedRows],
|
[datasource, setSelectedRows, isPaginated, metaData],
|
||||||
);
|
);
|
||||||
|
|
||||||
// Triggered whenever the row selection in the grid changes
|
// Triggered whenever the row selection in the grid changes
|
||||||
@@ -851,6 +865,7 @@ export function EnterpriseDataTable<E extends BaseEntity>(props: EnterpriseDataT
|
|||||||
pagination={isPaginated}
|
pagination={isPaginated}
|
||||||
paginationPageSize={isPaginated ? perPage : undefined}
|
paginationPageSize={isPaginated ? perPage : undefined}
|
||||||
paginationPageSizeSelector={isPaginated ? [10, 15, 20, 50] : undefined}
|
paginationPageSizeSelector={isPaginated ? [10, 15, 20, 50] : undefined}
|
||||||
|
serverSideInitialRowCount={metaData?.total ?? undefined}
|
||||||
columnDefs={finalColumnDefs}
|
columnDefs={finalColumnDefs}
|
||||||
defaultColDef={defaultColDef}
|
defaultColDef={defaultColDef}
|
||||||
animateRows={true}
|
animateRows={true}
|
||||||
|
|||||||
Reference in New Issue
Block a user