Merge pull request #480 from trezor/feature/select-virtualized

Feature/Tokens select with custom MenuList using react-window

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",

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));

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 (
+        <StyledList
+            height={maxHeight}
+            itemCount={children.length}
+            itemSize={height}
+            initialScrollOffset={initialOffset}
+        >
+            {({ index, style }) => <div style={style}>{children[index]}</div>}
+        </StyledList>
+    );
+};
+
+MenuList.propTypes = {
+    children: PropTypes.node,
+    options: PropTypes.array,
+    maxHeight: PropTypes.number,
+    getValue: PropTypes.func,
+};
+
+export default MenuList;

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
                         )}

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"