use custom MenuList component

pull/480/head
slowbackspace 5 years ago
parent c0702d32a8
commit 7f0794176d

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

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

Loading…
Cancel
Save