@fortawesome/free-solid-svg-icons#faEllipsisH JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faEllipsisH.
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: activeAuction.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let box = this.props.box;
return (
<Col key={box.id} xs="12" md="6" lg="6" xl="4">
<PlaceBidModal
isOpen={this.state.bidModal}
box={this.props.box}
close={this.openBid}
assemblerModal={this.props.assemblerModal}
/>
<MyBidsModal
isOpen={this.state.myBidsModal}
box={this.props.box}
close={this.openMyBids}
highText="current active bid"
/>
<BidHistory
close={this.openDetails}
box={this.props.box}
isOpen={this.state.detailsModal}
/>
<div className="card mb-3 bg-white widget-chart" style={
{
'opacity': this.props.box.isFinished || this.state.loading ? 0.6 : 1
}
}>
<Row style={{marginTop: 8}}>
<Col className="text-truncate">
<b data-tip={this.props.box.tokenName}>{this.props.box.tokenName}</b>
</Col>
{(this.props.box.royalty > 0 || this.props.box.totalIssued > 1) &&
<Col className="text-truncate">
{this.props.box.royalty > 0 &&
<i data-tip={`Includes ${this.props.box.royalty / 10}% royalty on secondary sales`} style={{fontSize: '12px'}}
className="font-weight-light">{`${this.props.box.royalty / 10}% royalty`}</i>}
{this.props.box.totalIssued > 1 &&
<i data-tip={`This is a Fungible Token with total issuance of ${this.props.box.totalIssued}`}
style={{fontSize: '12px'}}
className="font-weight-light">{` - ${this.props.box.assets[0].amount} out of ${this.props.box.totalIssued}`}</i>}</Col>
}
</Row>
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction="left">
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisH}/>
</DropdownToggle>
<DropdownMenu className="dropdown-menu-md-left">
<Nav vertical>
<NavItem className="nav-item-header">
General
</NavItem>
<NavItem>
<NavLink
href={
'#/auction/specific/' +
// this.props.box.boxId
(this.props.box.stableId? this.props.box.stableId : this.props.box.boxId)
}
>
Link to Auction
</NavLink>
<NavLink
onClick={() => this.openMyBids()}
>
My Bids
</NavLink>
<NavLink
onClick={() =>
this.setState({
detailsModal: true,
})
}
>
Details
</NavLink>
</NavItem>
</Nav>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="widget-chart-content">
<ResponsiveContainer height={10}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.loading}
/>
</ResponsiveContainer>
<ReactTooltip effect="solid" place="bottom"/>
<ArtworkMedia preload={this.props.preload} box={this.props.box}/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
style={{
flex: 1,
justifyContent: 'center',
alignItems: 'center',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
<div style={textStyle}>{this.props.box.description}</div>
<b
style={{cursor: "pointer"}}
onClick={() => this.props.updateParams('artist', this.props.box.artist)}
>
{' '}- By {friendlyAddress(this.props.box.artist, 5)}
</b>
</p>
</div>
</div>
</div>
<div className='mb-2'>
<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '13px'
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 5)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
fontSize: '13px'
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Bidder{' '}
{friendlyAddress(this.props.box.bidder, 5)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see current bidder's address"
style={{
fontSize: '1rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<FooterSection box={this.props.box} loading={(val) => this.setState({loading: val})}
assemblerModal={this.props.assemblerModal} openBid={this.openBid}/>
</div>
</Col>
);
}
Example #2
| Source File: Tables.js From volt-react-dashboard with MIT License | 4 votes |
|
TransactionsTable = () => {
const totalTransactions = transactions.length;
const TableRow = (props) => {
const { invoiceNumber, subscription, price, issueDate, dueDate, status } = props;
const statusVariant = status === "Paid" ? "success"
: status === "Due" ? "warning"
: status === "Canceled" ? "danger" : "primary";
return (
<tr>
<td>
<Card.Link as={Link} to={Routes.Invoice.path} className="fw-normal">
{invoiceNumber}
</Card.Link>
</td>
<td>
<span className="fw-normal">
{subscription}
</span>
</td>
<td>
<span className="fw-normal">
{issueDate}
</span>
</td>
<td>
<span className="fw-normal">
{dueDate}
</span>
</td>
<td>
<span className="fw-normal">
${parseFloat(price).toFixed(2)}
</span>
</td>
<td>
<span className={`fw-normal text-${statusVariant}`}>
{status}
</span>
</td>
<td>
<Dropdown as={ButtonGroup}>
<Dropdown.Toggle as={Button} split variant="link" className="text-dark m-0 p-0">
<span className="icon icon-sm">
<FontAwesomeIcon icon={faEllipsisH} className="icon-dark" />
</span>
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>
<FontAwesomeIcon icon={faEye} className="me-2" /> View Details
</Dropdown.Item>
<Dropdown.Item>
<FontAwesomeIcon icon={faEdit} className="me-2" /> Edit
</Dropdown.Item>
<Dropdown.Item className="text-danger">
<FontAwesomeIcon icon={faTrashAlt} className="me-2" /> Remove
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</td>
</tr>
);
};
return (
<Card border="light" className="table-wrapper table-responsive shadow-sm">
<Card.Body className="pt-0">
<Table hover className="user-table align-items-center">
<thead>
<tr>
<th className="border-bottom">#</th>
<th className="border-bottom">Bill For</th>
<th className="border-bottom">Issue Date</th>
<th className="border-bottom">Due Date</th>
<th className="border-bottom">Total</th>
<th className="border-bottom">Status</th>
<th className="border-bottom">Action</th>
</tr>
</thead>
<tbody>
{transactions.map(t => <TableRow key={`transaction-${t.invoiceNumber}`} {...t} />)}
</tbody>
</Table>
<Card.Footer className="px-3 border-0 d-lg-flex align-items-center justify-content-between">
<Nav>
<Pagination className="mb-2 mb-lg-0">
<Pagination.Prev>
Previous
</Pagination.Prev>
<Pagination.Item active>1</Pagination.Item>
<Pagination.Item>2</Pagination.Item>
<Pagination.Item>3</Pagination.Item>
<Pagination.Item>4</Pagination.Item>
<Pagination.Item>5</Pagination.Item>
<Pagination.Next>
Next
</Pagination.Next>
</Pagination>
</Nav>
<small className="fw-bold">
Showing <b>{totalTransactions}</b> out of <b>25</b> entries
</small>
</Card.Footer>
</Card.Body>
</Card>
);
}
