diff options
author | Francesco Agosti <francesco.agosti93@gmail.com> | 2019-01-03 20:36:18 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-01-03 20:36:18 +0800 |
commit | c1150824dc0019da72d1a78586d1ba722626c78c (patch) | |
tree | d7c656316045dd2da21a8512d0a3c569ec935bba /packages/instant/src/components/erc20_token_selector.tsx | |
parent | 1ddf1087dd327b2ef35165518ee91eb457b84174 (diff) | |
parent | 1ceb3c96645fd3682c59459fdce996cdf5f216cf (diff) | |
download | dexon-0x-contracts-c1150824dc0019da72d1a78586d1ba722626c78c.tar dexon-0x-contracts-c1150824dc0019da72d1a78586d1ba722626c78c.tar.gz dexon-0x-contracts-c1150824dc0019da72d1a78586d1ba722626c78c.tar.bz2 dexon-0x-contracts-c1150824dc0019da72d1a78586d1ba722626c78c.tar.lz dexon-0x-contracts-c1150824dc0019da72d1a78586d1ba722626c78c.tar.xz dexon-0x-contracts-c1150824dc0019da72d1a78586d1ba722626c78c.tar.zst dexon-0x-contracts-c1150824dc0019da72d1a78586d1ba722626c78c.zip |
Merge pull request #1480 from 0xProject/feature/instant/performance-boost
[instant] No more laggy input
Diffstat (limited to 'packages/instant/src/components/erc20_token_selector.tsx')
-rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 77 |
1 files changed, 51 insertions, 26 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index cb8a8c797..a26fb5cf5 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -21,12 +21,12 @@ export interface ERC20TokenSelectorState { searchQuery: string; } -export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> { +export class ERC20TokenSelector extends React.PureComponent<ERC20TokenSelectorProps> { public state: ERC20TokenSelectorState = { searchQuery: '', }; public render(): React.ReactNode { - const { tokens, onTokenSelect } = this.props; + const { tokens } = this.props; return ( <Container height="100%"> <Container marginBottom="10px"> @@ -42,12 +42,11 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> tabIndex={-1} /> <Container overflow="scroll" height="calc(100% - 90px)" marginTop="10px"> - {_.map(tokens, token => { - if (!this._isTokenQueryMatch(token)) { - return null; - } - return <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />; - })} + <TokenRowFilter + tokens={tokens} + onClick={this._handleTokenClick} + searchQuery={this.state.searchQuery} + /> </Container> </Container> ); @@ -59,8 +58,32 @@ export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> }); analytics.trackTokenSelectorSearched(searchQuery); }; + private readonly _handleTokenClick = (token: ERC20Asset): void => { + this.props.onTokenSelect(token); + }; +} + +interface TokenRowFilterProps { + tokens: ERC20Asset[]; + onClick: (token: ERC20Asset) => void; + searchQuery: string; +} + +class TokenRowFilter extends React.Component<TokenRowFilterProps> { + public render(): React.ReactNode { + return _.map(this.props.tokens, token => { + if (!this._isTokenQueryMatch(token)) { + return null; + } + return <TokenSelectorRow key={token.assetData} token={token} onClick={this.props.onClick} />; + }); + } + public shouldComponentUpdate(nextProps: TokenRowFilterProps): boolean { + const arePropsDeeplyEqual = _.isEqual(nextProps, this.props); + return !arePropsDeeplyEqual; + } private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => { - const { searchQuery } = this.state; + const { searchQuery } = this.props; const searchQueryLowerCase = searchQuery.toLowerCase().trim(); if (searchQueryLowerCase === '') { return true; @@ -76,7 +99,7 @@ interface TokenSelectorRowProps { onClick: (token: ERC20Asset) => void; } -class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { +class TokenSelectorRow extends React.PureComponent<TokenSelectorRowProps> { public render(): React.ReactNode { const { token } = this.props; const circleColor = token.metaData.primaryColor || 'black'; @@ -131,21 +154,23 @@ const getTokenIcon = (symbol: string): React.StatelessComponent | undefined => { } }; -const TokenSelectorRowIcon: React.StatelessComponent<TokenSelectorRowIconProps> = props => { - const { token } = props; - const iconUrlIfExists = token.metaData.iconUrl; +class TokenSelectorRowIcon extends React.PureComponent<TokenSelectorRowIconProps> { + public render(): React.ReactNode { + const { token } = this.props; + const iconUrlIfExists = token.metaData.iconUrl; - const TokenIcon = getTokenIcon(token.metaData.symbol); - const displaySymbol = assetUtils.bestNameForAsset(token); - if (!_.isUndefined(iconUrlIfExists)) { - return <img src={iconUrlIfExists} />; - } else if (!_.isUndefined(TokenIcon)) { - return <TokenIcon />; - } else { - return ( - <Text fontColor={ColorOption.white} fontSize="8px"> - {displaySymbol} - </Text> - ); + const TokenIcon = getTokenIcon(token.metaData.symbol); + const displaySymbol = assetUtils.bestNameForAsset(token); + if (!_.isUndefined(iconUrlIfExists)) { + return <img src={iconUrlIfExists} />; + } else if (!_.isUndefined(TokenIcon)) { + return <TokenIcon />; + } else { + return ( + <Text fontColor={ColorOption.white} fontSize="8px"> + {displaySymbol} + </Text> + ); + } } -}; +} |