1
0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-22 05:51:18 +00:00

use custom MenuList component

This commit is contained in:
slowbackspace 2019-03-29 14:54:32 +01:00
parent c0702d32a8
commit 7f0794176d
2 changed files with 42 additions and 0 deletions

View File

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

View File

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