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