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