diff --git a/package.json b/package.json index e043a53c..2b01cd4b 100644 --- a/package.json +++ b/package.json @@ -70,6 +70,7 @@ "react-select": "^2.3.0", "react-textarea-autosize": "^7.1.0", "react-transition-group": "^2.5.3", + "react-window": "^1.7.1", "redbox-react": "^1.6.0", "redux": "4.0.1", "redux-logger": "^3.0.6", diff --git a/src/actions/TokenActions.js b/src/actions/TokenActions.js index dcea4e55..409360c6 100644 --- a/src/actions/TokenActions.js +++ b/src/actions/TokenActions.js @@ -44,10 +44,7 @@ export const load = ($input: string, network: string): AsyncAction => async ( ); if (result.length > 0) { - // TODO: Temporary fix for async select - // async react-select starts getting very laggy - // when options is a large list (>200 items) - return result.slice(0, 100); + return result; } const info = await dispatch(BlockchainActions.getTokenInfo(input, network)); diff --git a/src/views/Wallet/views/Account/Summary/components/MenuList/index.js b/src/views/Wallet/views/Account/Summary/components/MenuList/index.js new file mode 100644 index 00000000..7412a16e --- /dev/null +++ b/src/views/Wallet/views/Account/Summary/components/MenuList/index.js @@ -0,0 +1,40 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import styled from 'styled-components'; +import { colors } from 'trezor-ui-components'; +import { FixedSizeList } from 'react-window'; + +const StyledList = styled(FixedSizeList)` + padding: 0; + box-shadow: 'none'; + background: colors.WHITE; + border-left: 1px solid ${colors.DIVIDER}; + border-right: 1px solid ${colors.DIVIDER}; + border-bottom: 1px solid ${colors.DIVIDER}; +`; + +const MenuList = ({ children, options, maxHeight, getValue }) => { + const height = 32; + const [value] = getValue(); + const initialOffset = options.indexOf(value) * height; + + return ( + + {({ index, style }) =>
{children[index]}
} +
+ ); +}; + +MenuList.propTypes = { + children: PropTypes.node, + options: PropTypes.array, + maxHeight: PropTypes.number, + getValue: PropTypes.func, +}; + +export default MenuList; diff --git a/src/views/Wallet/views/Account/Summary/ethereum/index.js b/src/views/Wallet/views/Account/Summary/ethereum/index.js index 776c310c..2788da89 100644 --- a/src/views/Wallet/views/Account/Summary/ethereum/index.js +++ b/src/views/Wallet/views/Account/Summary/ethereum/index.js @@ -18,6 +18,7 @@ import { import Content from 'views/Wallet/components/Content'; import { FONT_WEIGHT, FONT_SIZE } from 'config/variables'; import l10nCommonMessages from 'views/common.messages'; +import MenuList from '../components/MenuList'; import l10nSummaryMessages from '../common.messages'; import AccountBalance from '../components/Balance'; import AddedToken from '../components/Token'; @@ -134,6 +135,7 @@ const AccountSummary = (props: Props) => { defaultOptions value={null} isMulti={false} + components={{ MenuList }} placeholder={props.intl.formatMessage( l10nSummaryMessages.TR_TYPE_IN_A_TOKEN_NAME )} diff --git a/yarn.lock b/yarn.lock index ba86673d..2afe40f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7403,6 +7403,11 @@ mem@^4.0.0: mimic-fn "^1.0.0" p-is-promise "^2.0.0" +"memoize-one@>=3.1.1 <6": + version "5.0.2" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.2.tgz#6aba5276856d72fb44ead3efab86432f94ba203d" + integrity sha512-o7lldN4fs/axqctc03NF+PMhd2veRrWeJ2n2GjEzUPBD4F9rmNg4A+bQCACIzwjHJEXuYv4aFFMaH35KZfHUrw== + memoize-one@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-4.0.0.tgz#fc5e2f1427a216676a62ec652cf7398cfad123db" @@ -9281,6 +9286,14 @@ react-transition-group@^2.5.3: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" +react-window@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/react-window/-/react-window-1.7.1.tgz#c1db640415b97b85bc0a1c66eb82dadabca39b86" + integrity sha512-y4/Qc98agCtHulpeI5b6K2Hh8J7TeZIfvccBVesfqOFx4CS+TSUpnJl1/ipeXzhfvzPwvVEmaU/VosQ6O5VhTg== + dependencies: + "@babel/runtime" "^7.0.0" + memoize-one ">=3.1.1 <6" + "react@^15.4.2 || ^16.0.0": version "16.2.0" resolved "https://registry.yarnpkg.com/react/-/react-16.2.0.tgz#a31bd2dab89bff65d42134fa187f24d054c273ba"