diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 09:55:37 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-11-02 09:55:37 +0800 |
commit | e2ff7b7c846fa97b56d6bd36192329dd8f485af0 (patch) | |
tree | b4f6bf7cc949f9f5c98ed0f21bf700a5c18298fc /packages/instant/src/components | |
parent | 209b2c9dcb6e9e81011b64e7b8bad719dec35379 (diff) | |
download | dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.gz dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.bz2 dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.lz dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.xz dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.tar.zst dexon-0x-contracts-e2ff7b7c846fa97b56d6bd36192329dd8f485af0.zip |
feat: add basic token search functionality
Diffstat (limited to 'packages/instant/src/components')
-rw-r--r-- | packages/instant/src/components/erc20_token_selector.tsx | 59 | ||||
-rw-r--r-- | packages/instant/src/components/search_input.tsx | 26 | ||||
-rw-r--r-- | packages/instant/src/components/ui/input.tsx | 1 |
3 files changed, 75 insertions, 11 deletions
diff --git a/packages/instant/src/components/erc20_token_selector.tsx b/packages/instant/src/components/erc20_token_selector.tsx index a9728365b..4a3724052 100644 --- a/packages/instant/src/components/erc20_token_selector.tsx +++ b/packages/instant/src/components/erc20_token_selector.tsx @@ -7,20 +7,57 @@ import { assetUtils } from '../util/asset'; import { SearchInput } from './search_input'; import { Circle, Container, Flex, Text } from './ui'; +import { bool } from 'prop-types'; export interface ERC20TokenSelectorProps { tokens: ERC20Asset[]; onTokenSelect: (token: ERC20Asset) => void; } -export const ERC20TokenSelector: React.StatelessComponent<ERC20TokenSelectorProps> = ({ tokens, onTokenSelect }) => ( - <Container> - <SearchInput placeholder="Search tokens..." width="100%" /> - <Container overflow="scroll" height="325px" marginTop="10px"> - {_.map(tokens, token => <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />)} - </Container> - </Container> -); +export interface ERC20TokenSelectorState { + searchQuery?: string; +} + +export class ERC20TokenSelector extends React.Component<ERC20TokenSelectorProps> { + public state: ERC20TokenSelectorState = { + searchQuery: undefined, + }; + public render(): React.ReactNode { + const { tokens, onTokenSelect } = this.props; + return ( + <Container> + <SearchInput + placeholder="Search tokens..." + width="100%" + value={this.state.searchQuery} + onChange={this._handleSearchInputChange} + /> + <Container overflow="scroll" height="275px" marginTop="10px"> + {_.map(tokens, token => { + if (!this._isTokenQueryMatch(token)) { + return null; + } + return <TokenSelectorRow key={token.assetData} token={token} onClick={onTokenSelect} />; + })} + </Container> + </Container> + ); + } + private readonly _handleSearchInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => { + const searchQuery = event.target.value; + this.setState({ + searchQuery, + }); + }; + private readonly _isTokenQueryMatch = (token: ERC20Asset): boolean => { + const { searchQuery } = this.state; + if (_.isUndefined(searchQuery)) { + return true; + } + const stringToSearch = `${token.metaData.name} ${token.metaData.symbol}`; + return _.includes(stringToSearch.toLowerCase(), searchQuery.toLowerCase()); + }; +} interface TokenSelectorRowProps { token: ERC20Asset; @@ -53,13 +90,13 @@ class TokenSelectorRow extends React.Component<TokenSelectorRowProps> { </Flex> </Circle> </Container> - <Text fontWeight={700} fontColor={ColorOption.black}> + <Text fontSize="14px" fontWeight={700} fontColor={ColorOption.black}> {displaySymbol} </Text> <Container margin="0px 5px"> - <Text> - </Text> + <Text fontSize="14px"> - </Text> </Container> - <Text>{token.metaData.name}</Text> + <Text fontSize="14px">{token.metaData.name}</Text> </Flex> </Container> </Container> diff --git a/packages/instant/src/components/search_input.tsx b/packages/instant/src/components/search_input.tsx new file mode 100644 index 000000000..f082eaa16 --- /dev/null +++ b/packages/instant/src/components/search_input.tsx @@ -0,0 +1,26 @@ +import * as _ from 'lodash'; +import * as React from 'react'; + +import { ColorOption } from '../style/theme'; + +import { Container, Flex, Icon, Input, InputProps } from './ui'; + +export interface SearchInputProps extends InputProps { + backgroundColor?: ColorOption; +} + +export const SearchInput: React.StatelessComponent<SearchInputProps> = props => ( + <Container backgroundColor={props.backgroundColor} borderRadius="3px" padding=".5em .3em"> + <Flex justify="flex-start" align="flex-end"> + <Icon width={14} height={14} icon="search" color={ColorOption.lightGrey} padding="0px 12px" /> + <Input {...props} fontSize="14px" fontColor={props.fontColor} /> + </Flex> + </Container> +); + +SearchInput.displayName = 'SearchInput'; + +SearchInput.defaultProps = { + backgroundColor: ColorOption.lightestGrey, + fontColor: ColorOption.grey, +}; diff --git a/packages/instant/src/components/ui/input.tsx b/packages/instant/src/components/ui/input.tsx index 65cf838b0..a884ff7cb 100644 --- a/packages/instant/src/components/ui/input.tsx +++ b/packages/instant/src/components/ui/input.tsx @@ -9,6 +9,7 @@ export interface InputProps { fontSize?: string; fontColor?: ColorOption; placeholder?: string; + onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void; } export const Input = |