m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Fix popover hiding (#18843)

Browse Source 
* Fix popover hiding

* Fix popover hiding

* Add debounce to scroll event

---------

Co-authored-by: David Walsh <davidwalsh83@gmail.com>
This commit is contained in:
Dominik Rudzki 2023-05-03 20:32:29 +02:00 committed by GitHub
parent e8ede35dd1
commit 9a583635c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 20 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
ui/components/app/terms-of-use-popup/terms-of-use-popup.js
View File

@ -1,5 +1,6 @@
import React, { useContext, useEffect, useRef, useState } from 'react'; import React, { useContext, useEffect, useRef, useState } from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { debounce } from 'lodash';
import { I18nContext } from '../../../contexts/i18n'; import { I18nContext } from '../../../contexts/i18n';
import Popover from '../../ui/popover'; import Popover from '../../ui/popover';
import { import {
@ -28,6 +29,7 @@ export default function TermsOfUsePopup({ onAccept }) {
const t = useContext(I18nContext); const t = useContext(I18nContext);
const trackEvent = useContext(MetaMetricsContext); const trackEvent = useContext(MetaMetricsContext);
const [isTermsOfUseChecked, setIsTermsOfUseChecked] = useState(false); const [isTermsOfUseChecked, setIsTermsOfUseChecked] = useState(false);
const [shouldShowScrollButton, setShouldShowScrollButton] = useState(true);
const popoverRef = useRef(); const popoverRef = useRef();
const bottomRef = React.createRef(); const bottomRef = React.createRef();
@ -39,6 +41,16 @@ export default function TermsOfUsePopup({ onAccept }) {
}); });
}; };
const handleDebouncedScroll = debounce((target) => {
setShouldShowScrollButton(
target.scrollHeight - target.scrollTop !== target.clientHeight,
);
}, 100);
const handleScroll = (e) => {
handleDebouncedScroll(e.target);
};
useEffect(() => { useEffect(() => {
trackEvent({ trackEvent({
category: MetaMetricsEventCategory.Onboarding, category: MetaMetricsEventCategory.Onboarding,
@ -54,8 +66,9 @@ export default function TermsOfUsePopup({ onAccept }) {
<Popover <Popover
className="terms-of-use__popover" className="terms-of-use__popover"
popoverRef={popoverRef} popoverRef={popoverRef}
onScroll={handleScroll}
showScrollDown={shouldShowScrollButton}
title={t('termsOfUseTitle')} title={t('termsOfUseTitle')}
showScrollDown
onScrollDownButtonClick={handleScrollDownClick} onScrollDownButtonClick={handleScrollDownClick}
footerProps={{ footerProps={{
justifyContent: AlignItems.center, justifyContent: AlignItems.center,

6
ui/components/ui/popover/popover.component.js
View File

@ -57,6 +57,7 @@ const Popover = ({
footerClassName, footerClassName,
onBack, onBack,
onClose, onClose,
onScroll,
className, className,
contentClassName, contentClassName,
showArrow, showArrow,
@ -133,6 +134,7 @@ const Popover = ({
{children ? ( {children ? (
<Box <Box
className={classnames('popover-content', contentClassName)} className={classnames('popover-content', contentClassName)}
onScroll={onScroll}
{...{ ...defaultContentProps, ...contentProps }} {...{ ...defaultContentProps, ...contentProps }}
> >
{children} {children}
@ -201,6 +203,10 @@ Popover.propTypes = {
* onClose handler * onClose handler
*/ */
onClose: PropTypes.func, onClose: PropTypes.func,
/**
* onScroll handler
*/
onScroll: PropTypes.func,
CustomBackground: PropTypes.func, CustomBackground: PropTypes.func,
/** /**
* Add custom CSS class for content * Add custom CSS class for content