export const configMenuInitialState: ConfigMenuStateInterface = {
isConfirmMenuVisible: false
};
export function EventsHistoryConfigMenu (): JSX.Element {
const {
configMenu: {
isConfirmMenuVisible
}
} = useReduxState('configMenu');
const configMenuRef: React.MutableRefObject<HTMLDivElement> = useRef<HTMLDivElement>(null);
return (
<>
<div ref={configMenuRef} className={styles['config-menu']}></div>
{
isConfirmMenuVisible && (
<div className={styles['confirm-menu']}></div>
<ScrollToBottom configMenuRef={configMenuRef} />
)
}
</>
);
}
export function openConfirmMenuAction () {
return function (dispatch: Dispatch<any>): void {
dispatch(setConfigConfirmMenuScrollToBottomActive(true));
dispatch(setConfigConfirmMenuVisibility(true));
};
}
interface ScrollToBottomProps {
configMenuRef: React.MutableRefObject<HTMLDivElement>;
}
function ScrollToBottom (props: ScrollToBottomProps): null {
const {
configMenu: {
isScrollToBottomActive
}
} = useReduxState('configMenu');
const dispatch = useDispatch();
useEffect(function (): () => void {
if (isScrollToBottomActive) {
const sectionElement: any = props.configMenuRef?.current?.parentNode?.parentNode?.parentNode?.parentNode?.parentNode;
if (sectionElement) {
sectionElement.scrollTop = sectionElement.scrollHeight;
}
}
return function onUnmount (): void {
dispatch(setScrollToBottomActive(false));
};
}, []);
return null;
}
