react-bootstrap#ListGroupItem JavaScript Examples
The following examples show how to use
react-bootstrap#ListGroupItem.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: ExploreTokens.js From katanapools with GNU General Public License v2.0 | 5 votes |
|
render() {
const {tokens: {convertibleTokens, fromPathListWithRate, toPathListWithRate, fromPathLoading, toPathLoading}} = this.props;
const {selectedFromIdx, selectedToIdx, searchFromToken, searchToToken, fromConvertibleTokens,
toConvertibleTokens, fromToken, toToken} = this.state;
const self = this;
let fromTokenSelector = <span/>;
let toTokenSelector = <span/>;
if (convertibleTokens && convertibleTokens.length > 0) {
fromTokenSelector = <div>
<FormControl type="text" placeHolder="Search" value={searchFromToken} onChange={this.searchFromTokenChanged}/>
<ListGroup className="token-selector-list">
{fromConvertibleTokens.map(function(item, idx){
let itemActive = "";
if (idx === selectedFromIdx) {
itemActive = "cell-active";
}
let itemName = item.name.length > 10 ? item.name.substr(0, 10) + "..." : item.name;
return (<ListGroupItem key={`from-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.fromTokenChanged.bind(self, idx)}>
<div>
<img src={item.imageURI} className="symbol-image"/>
<div className="item-symbol">{item.symbol}</div>
</div>
<div className="">
{itemName}
</div>
</ListGroupItem>)
})}
</ListGroup>
</div>;
toTokenSelector = <div>
<FormControl type="text" placeHolder="Search" value={searchToToken} onChange={this.searchToTokenChanged}/>
<ListGroup className="token-selector-list">{toConvertibleTokens.map(function(item, idx){
let itemActive = "";
if (idx === selectedToIdx) {
itemActive = "cell-active";
}
let itemName = item.name.length > 10 ? item.name.substr(0, 10) + "..." : item.name;
return (<ListGroupItem key={`to-${idx}`} className={`token-display-cell ${itemActive}`} onClick={self.toTokenChanged.bind(self, idx)}>
<div>
<img src={item.imageURI} className="symbol-image"/>
<div className="item-symbol">{item.symbol}</div>
</div>
<div>
{itemName}
</div>
</ListGroupItem>)
})}</ListGroup>
</div>
}
return (
<Row className="explore-token-container">
<Col lg={2} xs={2} className="left-list-group">
{fromTokenSelector}
</Col>
<Col lg={8} xs={8} className="explore-paths-container">
<ViewPaths
fromToken={fromToken} toToken={toToken} fromPathLoading={fromPathLoading} toPathLoading={toPathLoading}
fromPathListWithRate={fromPathListWithRate}
toPathListWithRate={toPathListWithRate} transferAmountChanged={this.transferAmountChanged}
submitSwap={this.props.submitSwap} setProviderNotification={this.props.setProviderNotification}/>
</Col>
<Col lg={2} xs={2} style={{'paddingLeft': 0}} className="right-list-group">
{toTokenSelector}
</Col>
</Row>
)
}
Example #2
| Source File: ViewPools.js From katanapools with GNU General Public License v2.0 | 5 votes |
|
render() {
const { pool: {currentSelectedPool, poolTransactionStatus, currentViewPoolType}, poolData} = this.props;
let poolSelectionView = poolData;
if (currentViewPoolType === 'all') {
poolSelectionView = poolData;
} else if (currentViewPoolType === 'v1') {
poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '1'));
} else {
poolSelectionView = poolData.filter((pool) => (pool.poolVersion === '2'));
}
const {selectedPoolIndex, isError, errorMessage} = this.state;
const self = this;
let poolDataList = <span/>;
if (poolSelectionView.length === 0) {
poolDataList = <span/>;
} else {
poolDataList =
<span>
<ListGroupItem>
Symbol
</ListGroupItem>
{
poolSelectionView.map(function(poolRow, idx){
let cellActive = '';
if (idx === selectedPoolIndex) {
cellActive = 'cell-active';
}
return <ListGroupItem onClick={self.setSelectedPool.bind(self, poolRow, idx)} key={'pool-select-'+idx} className={`select-pool-toolbar ${cellActive}`}>
{poolRow.symbol}
</ListGroupItem>
})
}</span>
}
let selectedPool = (<div className="loading-spinner">
<FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
</div>
)
if (isNonEmptyObject(currentSelectedPool)) {
selectedPool = <SelectedPool {...this.props} currentSelectedPool={currentSelectedPool} setErrorMessage={this.setErrorMessage} resetErrorMessage={this.resetErrorMessage}/>
}
let transactionStatusMessage = <span/>;
if (isError) {
transactionStatusMessage = <Alert variant={"danger"}>
{errorMessage}
</Alert>
}
if (poolTransactionStatus.type === 'pending') {
transactionStatusMessage = <Alert variant={"info"}>
<FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/> {poolTransactionStatus.message}
</Alert>
}
if (poolTransactionStatus.type === 'error') {
transactionStatusMessage = <Alert variant={"danger"}>
<FontAwesomeIcon icon={faTimes}/> {poolTransactionStatus.message}
</Alert>
}
return (
<div>
{transactionStatusMessage}
<div className="app-toolbar-container">
<Row style={{'marginBottom': '40px'}}>
<Col lg={2}>
<ListGroup className="select-pool-group">
{poolDataList}
</ListGroup>
</Col>
<Col lg={10}>
{selectedPool}
</Col>
</Row>
</div>
</div>
)
}
Example #3
| Source File: ViewPaths.js From katanapools with GNU General Public License v2.0 | 4 votes |
|
render() {
let {fromToken, toToken, pathList} = this.props;
const {showMain, transferAmount} = this.state;
const self = this;
if (pathList.length === 0) {
return <span/>;
}
if (showMain) {
let viewAllPaths = <span/>;
if (pathList.length > 2) {
viewAllPaths = <div className="view-toggle-container" onClick={this.toggleHidePath}>{pathList.length - 2} more paths. View All <FontAwesomeIcon icon={faChevronDown}/></div>;
}
return (<div>
<div className="h6 conversion-path-header">
<Row>
<Col lg={8} xs={6}>
Conversion paths from {fromToken.symbol} to {toToken.symbol}
</Col>
<Col lg={4} xs={6} className="path-label-container">
<InputGroup className="mb-3">
<Form.Control type="text" placeholder="Amount" className="swap-amount-input"
value={transferAmount} onChange={this.tranferAmountChanged}/>
<InputGroup.Append>
<InputGroup.Text id="basic-addon2">{fromToken.symbol}</InputGroup.Text>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
</div>
{
pathList.slice(0, 2).map(function(item, idx){
let isBestPath = "";
if (idx === 0) {
isBestPath = "best-path";
}
return (<ListGroupItem key={`frompath-${idx}`} className={`path-row ${isBestPath}`}>
<Row>
<Col lg={10} className="token-path-display">
{item.path.map(function(cell, idx){
let pointerArrow = <span/>;
if (idx < item.path.length - 1) {
pointerArrow =
<div className="arrow-right-container">
<FontAwesomeIcon icon={faArrowRight} />
</div>
}
return <div className="meta-item-cell-container" key={cell.meta.symbol + "idx"}>
<div className="meta-item-cell">
<div className="token-label-cell">{cell.meta.symbol}</div>
<div className="token-name-cell">{cell.meta.name}</div>
</div>
{pointerArrow}
</div>
})}
<div className="path-conversion-price">{transferAmount} {item.path[0].meta.symbol} = {item.price} {item.path[item.path.length - 1].meta.symbol}</div>
</Col>
<Col lg={2}>
<Button className="path-swap-btn" onClick={self.submitSwap.bind(self, idx)}>Swap</Button>
</Col>
</Row>
</ListGroupItem>)
})}
{viewAllPaths}
</div>)
}
return (
<div>
<div className="h6 conversion-path-header">
<Row>
<Col lg={8} xs={6}>
Conversion paths from {fromToken.symbol} to {toToken.symbol}
</Col>
<Col lg={4} xs={6} className="path-label-container">
<InputGroup className="mb-3">
<Form.Control type="text" placeholder="Amount" className="swap-amount-input"
value={transferAmount} onChange={this.tranferAmountChanged}/>
<InputGroup.Append>
<InputGroup.Text id="basic-addon2">{fromToken.symbol}</InputGroup.Text>
</InputGroup.Append>
</InputGroup>
</Col>
</Row>
</div>
{
pathList.map(function(item, idx){
let isBestPath = "";
if (idx === 0) {
isBestPath = "best-path";
}
return (<ListGroupItem key={`frompath-${idx}`} className={`path-row ${isBestPath}`}>
<Row>
<Col lg={10} className="token-path-display">
{item.path.map(function(cell, idx){
let pointerArrow = <span/>;
if (idx < item.path.length - 1) {
pointerArrow =
<div className="arrow-right-container">
<FontAwesomeIcon icon={faArrowRight} />
</div>
}
return <div className="meta-item-cell-container" key={cell.meta.symbol + {idx}+"idx"}>
<div className="meta-item-cell">
<div className="token-label-cell">{cell.meta.symbol}</div>
<div className="token-name-cell">{cell.meta.name}</div>
</div>
{pointerArrow}
</div>
})}
<div className="path-conversion-price">{transferAmount} {item.path[0].meta.symbol} = {item.price} {item.path[item.path.length - 1].meta.symbol}</div>
</Col>
<Col lg={2}>
<Button className="path-swap-btn" onClick={self.submitSwap.bind(self, idx)}>Swap</Button>
</Col>
</Row>
</ListGroupItem>)
})}
<div className="view-toggle-container" onClick={this.toggleShowPath}>View less. <FontAwesomeIcon icon={faChevronUp}/>.</div>
</div>
)
}
