crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added lock body scroll for search in header

Browse Source
This commit is contained in:
Piotr Janosz
2019-07-26 17:07:11 +02:00
committed by fabioberger
parent 42e0d608c8
commit 1ba54af4e2
2 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/website/ts/components/docs/search/autocomplete.tsx
View File

@@ -125,7 +125,9 @@ const CustomAutoComplete: React.FC<IAutoCompleteProps> = ({ isHome = false, hits
getSectionSuggestions={getSectionSuggestions} getSectionSuggestions={getSectionSuggestions}
/> />
</AutocompleteWrapper> </AutocompleteWrapper>
{currentRefinement && <AutocompleteOverlay onClick={onSuggestionsClearRequested} />} {currentRefinement && (
<AutocompleteOverlay onClick={onSuggestionsClearRequested} shouldLockScroll={!isHome} />
)}
</> </>
); );
}; };

9
packages/website/ts/components/docs/search/autocomplete_overlay.tsx
View File

@@ -3,10 +3,13 @@ import styled from 'styled-components';
interface IAutocompleteOverlayProps { interface IAutocompleteOverlayProps {
onClick: () => void; onClick: () => void;
shouldLockScroll?: boolean;
} }
export const AutocompleteOverlay: React.FC<IAutocompleteOverlayProps> = ({ onClick }) => { export const AutocompleteOverlay: React.FC<IAutocompleteOverlayProps> = ({ onClick, shouldLockScroll }) => {
// useLockBodyScroll(); if (shouldLockScroll) {
useLockBodyScroll();
}
return <Overlay onClick={onClick} />; return <Overlay onClick={onClick} />;
}; };
@@ -28,7 +31,7 @@ const Overlay = styled.div<IAutocompleteOverlayProps>`
`; `;
// This could be extracted to reuse // This could be extracted to reuse
function useLockBodyScroll() { function useLockBodyScroll(): void {
useLayoutEffect(() => { useLayoutEffect(() => {
// Get original value of body styles // Get original value of body styles
const { maxHeight, overflowY } = window.getComputedStyle(document.body); const { maxHeight, overflowY } = window.getComputedStyle(document.body);