Files
WebControlCenter/src/utility/custom-hooks.ts
2025-09-04 20:25:15 -04:00

106 lines
3.1 KiB
TypeScript

/**
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
*/
import {useState, useEffect, useRef, Dispatch, SetStateAction, RefObject} from 'react';
import {DirectionType, ITableSort} from 'interfaces/tableProps';
import AuthService from 'services/Authentication.service';
const getWidth = () => window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
export const useCurrentWidth = (): number => {
const [width, setWidth] = useState(getWidth());
useEffect(() => {
const resizeListener = () => setWidth(getWidth());
window.addEventListener('resize', resizeListener);
return () => window.removeEventListener('resize', resizeListener);
}, []);
return width;
};
export const useComponentVisible = (
initialIsVisible: boolean
): {
ref: RefObject<HTMLDivElement>;
isComponentVisible: boolean;
setIsComponentVisible: Dispatch<SetStateAction<boolean>>;
} => {
const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
const ref = useRef(null);
const handleClickOutside = () => {
setIsComponentVisible(false);
};
useEffect(() => {
document.addEventListener('click', handleClickOutside, true);
return () => {
document.removeEventListener('click', handleClickOutside, true);
};
}, []);
return {
ref,
isComponentVisible,
setIsComponentVisible
};
};
export const useHeightResize = (heightOffset: number): [number] => {
const [height, setHeight] = useState(window.innerHeight - heightOffset);
useEffect(() => {
const handleResize = () => {
setHeight(window.innerHeight - heightOffset);
};
window.addEventListener('resize', handleResize);
return () => window.removeEventListener('resize', handleResize);
// eslint-disable-next-line
}, []);
return [height];
};
export const useSearch = (propsSearchValue?: string): [string, Dispatch<SetStateAction<string>>] => {
const [searchValue, setSearchValue] = useState<string | undefined>(propsSearchValue);
useEffect(() => {
setSearchValue(propsSearchValue);
}, [propsSearchValue, setSearchValue]);
return [searchValue, setSearchValue];
};
export const useSort = ({sortColumn, sortDirection}: Partial<ITableSort>): [ITableSort, Dispatch<SetStateAction<ITableSort>>] => {
const [sortData, setSortData] = useState<ITableSort | null>(null);
useEffect(() => {
if ((sortColumn && !sortData) || sortColumn !== sortData?.sortColumn || sortDirection !== sortData?.sortDirection) {
const newSortDirection = sortDirection || sortData?.sortDirection || DirectionType.Asc;
const newSortColumn = sortColumn || sortData?.sortColumn;
setSortData({
sortDirection: newSortDirection,
sortColumn: newSortColumn ?? ''
});
}
}, [sortColumn, sortDirection, sortData, setSortData]);
return [sortData, setSortData];
};
export const useLoginStatus = (applicationId: string): [boolean] => {
const [isLoggedIn, setLoginStatus] = useState(false);
useEffect(() => {
AuthService.hasLoginToken().then((response: boolean) => setLoginStatus(response));
}, [applicationId]);
return [isLoggedIn];
};