ButterflyEffect/uniswap-interface-uncensored
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Workaround for popover placement on elements that move, styling for small amounts of search results

Browse Source
This commit is contained in:
Moody Salem 2020-05-23 20:08:12 -04:00
parent 175e93fbba
commit 2a751b9892
No known key found for this signature in database
GPG Key ID: 8CB5CD10385138DB
3 changed files with 18 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/Popover/index.tsx
View File

@ -3,6 +3,7 @@ import React, { useState } from 'react'
import { createPortal } from 'react-dom'
import { usePopper } from 'react-popper'
import styled, { keyframes } from 'styled-components'
import useInterval from '../../hooks/useInterval'
const fadeIn = keyframes`
from {
@ -105,7 +106,7 @@ export default function Popover({ content, showPopup, children }: PopoverProps)
const [referenceElement, setReferenceElement] = useState<HTMLDivElement>(null)
const [popperElement, setPopperElement] = useState<HTMLDivElement>(null)
const [arrowElement, setArrowElement] = useState<HTMLDivElement>(null)
const { styles, attributes } = usePopper(referenceElement, popperElement, {
const { styles, update, attributes } = usePopper(referenceElement, popperElement, {
placement: 'auto',
strategy: 'fixed',
modifiers: [
@ -127,6 +128,8 @@ export default function Popover({ content, showPopup, children }: PopoverProps)
document.getElementById('popover-container')
)
useInterval(update, showPopup ? 100 : null)
return (
<>
<ReferenceElement ref={setReferenceElement}>{children}</ReferenceElement>

8
src/components/SearchModal/PairList.tsx
View File

@ -25,7 +25,13 @@ export default function PairList({
}
return (
<FixedSizeList itemSize={54} height={500} itemCount={pairs.length} width="100%" style={{ flex: '1' }}>
<FixedSizeList
itemSize={54}
height={500}
itemCount={pairs.length}
width="100%"
style={{ flex: '1', minHeight: 200 }}
>
{({ index, style }) => {
const pair = pairs[index]

8
src/components/SearchModal/TokenList.tsx
View File

@ -47,7 +47,13 @@ export default function TokenList({
return <ModalInfo>{t('noToken')}</ModalInfo>
}
return (
<FixedSizeList width="100%" height={500} itemCount={tokens.length} itemSize={50} style={{ flex: '1' }}>
<FixedSizeList
width="100%"
height={500}
itemCount={tokens.length}
itemSize={50}
style={{ flex: '1', minHeight: 200 }}
>
{({ index, style }) => {
const { address, symbol } = tokens[index]