Skip to content

fix: can't auto close dialog when lost focus #5977

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.

Sign up for GitHub

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

Merged
guanbinrui merged 8 commits into from
Apr 6, 2022
Merged

fix: can't auto close dialog when lost focus #5977

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9738049
fix: auto close dialog when lost focus
lelenei Mar 28, 2022
29d016f
fix: reply review
lelenei Mar 29, 2022
fe52b96
fix: reply review
lelenei Mar 31, 2022
1bb96c7
fix: reply review
lelenei Apr 2, 2022
bdebe21
Merge remote-tracking branch 'origin/develop' into lelenei/mf-44
lelenei Apr 6, 2022
18f59ca
fix: tradeview position
lelenei Apr 6, 2022
debf896
Merge remote-tracking branch 'origin/develop' into lelenei/mf-44
lelenei Apr 6, 2022
09def3e
fix: remove icon section
lelenei Apr 6, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 10 additions & 7 deletions packages/mask/src/plugins/Trader/SNSAdaptor/trending/TrendingPopper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ export interface TrendingPopperProps {
PopperProps?: Partial<PopperProps>
}

const TIMEOUT = 1500

export function TrendingPopper(props: TrendingPopperProps) {
const popperRef = useRef<{ update(): void } | null>(null)
const [freezed, setFreezed] = useState(false) // disable any click
Expand All @@ -21,6 +23,8 @@ export function TrendingPopper(props: TrendingPopperProps) {
const [type, setType] = useState<TagType | undefined>()
const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)
const [availableDataProviders, setAvailableDataProviders] = useState<DataProvider[]>([])
const popper = useRef<HTMLDivElement | null>(null)
const [mouseIn, setMouseIn] = useState(false)

// #region select token and provider dialog could be open by trending view
const onFreezed = useCallback((ev) => setFreezed(ev.open), [])
Expand Down Expand Up @@ -66,14 +70,12 @@ export function TrendingPopper(props: TrendingPopperProps) {
// close popper if scroll out of visual screen
const position = useWindowScroll()
useEffect(() => {
if (!anchorEl) return
const { top } = anchorEl.getBoundingClientRect()
if (
top < 0 || // out off top bound
top > document.documentElement.clientHeight // out off bottom bound
)
if (!popper.current) return
const { top, height } = popper.current?.getBoundingClientRect()
if ((top < 0 && -1 * top > height) || top > document.documentElement.clientHeight)
// out off bottom bound
setAnchorEl(null)
}, [anchorEl, Math.floor(position.y / 50)])
}, [popper, Math.floor(position.y / 50)])
// #endregion

if (locked) return null
Expand All @@ -84,6 +86,7 @@ export function TrendingPopper(props: TrendingPopperProps) {
if (!freezed) setAnchorEl(null)
}}>
<Popper
ref={popper}
open={Boolean(anchorEl)}
anchorEl={anchorEl}
disablePortal
Expand Down
1 change: 0 additions & 1 deletion packages/plugins/CrossChainBridge/src/base.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { languages } from './locales/languages'

export const base: Plugin.Shared.Definition = {
ID: PLUGIN_ID,
icon: '\u{1F9EA}',
name: { fallback: PLUGIN_NAME },
description: { fallback: PLUGIN_DESCRIPTION },
publisher: { name: { fallback: '' }, link: '' },
Expand Down