-
Notifications
You must be signed in to change notification settings - Fork 8.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[RAC][Analyzer] Make analyzer full screen mode compatible with EuiDataGrid's #110723
Changes from all commits
4ac37aa
fc0a932
fc19c16
df8154d
278b4fe
bf54b4f
8daf073
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -5,7 +5,7 @@ | |
* 2.0. | ||
*/ | ||
|
||
import { useCallback, useMemo } from 'react'; | ||
import { useCallback, useMemo, useState } from 'react'; | ||
import { useDispatch } from 'react-redux'; | ||
|
||
import { SCROLLING_DISABLED_CLASS_NAME } from '../../../../common/constants'; | ||
|
@@ -29,6 +29,25 @@ export const resetScroll = () => { | |
}, 0); | ||
}; | ||
|
||
export const setDataGridFullScreen = (isExpanded: boolean) => { | ||
const clickEvent = new KeyboardEvent('click', { | ||
view: window, | ||
bubbles: true, | ||
cancelable: true, | ||
}); | ||
const dataGridIsFullScreen = document.querySelector('.euiDataGrid--fullScreen') !== null; | ||
const dataGridFullScreenButtonNew = document.querySelector( | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. my hacky sense love it, however my gray hair are telling me to not go for it and just ask EUI to create a callback on the full screen action. I really appreciate the ingenuity here. I am sorry if I disappoint you but a safer bet it is to go with @stephmilovic 's PR to just disable the full screen on the analyzer for now. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @paulewing are you ok with that? |
||
'[data-test-subj="dataGridFullScrenButton"]' | ||
); | ||
const dataGridFullScreenButtonOld = document.querySelector( | ||
'[data-test-subj="dataGridFullScreenButton"]' | ||
); | ||
const dataGridFullScreenButton = dataGridFullScreenButtonNew || dataGridFullScreenButtonOld; | ||
if (dataGridIsFullScreen !== isExpanded && dataGridFullScreenButton) { | ||
dataGridFullScreenButton.dispatchEvent(clickEvent); | ||
} | ||
}; | ||
|
||
interface GlobalFullScreen { | ||
globalFullScreen: boolean; | ||
setGlobalFullScreen: (fullScreen: boolean) => void; | ||
|
@@ -46,9 +65,11 @@ export const useGlobalFullScreen = (): GlobalFullScreen => { | |
const setGlobalFullScreen = useCallback( | ||
(fullScreen: boolean) => { | ||
if (fullScreen) { | ||
setDataGridFullScreen(true); | ||
document.body.classList.add(SCROLLING_DISABLED_CLASS_NAME); | ||
resetScroll(); | ||
} else { | ||
setDataGridFullScreen(false); | ||
document.body.classList.remove(SCROLLING_DISABLED_CLASS_NAME); | ||
resetScroll(); | ||
} | ||
|
@@ -71,9 +92,10 @@ export const useTimelineFullScreen = (): TimelineFullScreen => { | |
const dispatch = useDispatch(); | ||
const timelineFullScreen = | ||
useShallowEqualSelector(inputsSelectors.timelineFullScreenSelector) ?? false; | ||
|
||
const setTimelineFullScreen = useCallback( | ||
(fullScreen: boolean) => dispatch(inputsActions.setFullScreen({ id: 'timeline', fullScreen })), | ||
(fullScreen: boolean) => { | ||
dispatch(inputsActions.setFullScreen({ id: 'timeline', fullScreen })); | ||
}, | ||
[dispatch] | ||
); | ||
const memoizedReturn = useMemo( | ||
|
@@ -85,3 +107,14 @@ export const useTimelineFullScreen = (): TimelineFullScreen => { | |
); | ||
return memoizedReturn; | ||
}; | ||
|
||
export const useIsDataGridExpanded = () => { | ||
const [isDataGridExpanded, setDataGridExpanded] = useState(false); | ||
const onMutation = useCallback(() => { | ||
const isExpanded = document.querySelector('.euiDataGrid--fullScreen') !== null; | ||
setDataGridExpanded(isExpanded); | ||
}, [setDataGridExpanded]); | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. i think you should be able to remove this setter as a dependency because it is coming from useState |
||
return useMemo(() => { | ||
return { onMutation, isDataGridExpanded }; | ||
}, [onMutation, isDataGridExpanded]); | ||
}; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
oof
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
can you please put a
// TODO
with a link to the Eui issue so we remember to come back and refactor once a method is available. @chandlerprall could you please help us find an eui issue?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
elastic/eui#5126