@fortawesome/free-solid-svg-icons#faAngleDown TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faAngleDown.
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: ButtonWithDropdown.tsx From calculate-my-odds with MIT License | 6 votes |
|
render() {
return (
<div className="button-with-dropdown-component">
<Button
className="main-button"
content={this.props.content}
icon={this.props.icon}
onClick={this.props.onClick}
/>
<div className="dropdown-container">
<Button
className="dropdown-button"
content={<FontAwesomeIcon icon={faAngleDown} />}
onClick={() => {
// TODO: Find a better solution than setTimeout
const newValue = !this.state.showDropdown;
setTimeout(() => {
this.setState({
showDropdown: newValue
});
}, 0);
}}
/>
<ContextMenu
show={this.state.showDropdown}
items={this.props.dropdownItems}
onRequestClose={() => this.setState({ showDropdown: false })}
width={this.props.dropdownWidth}
/>
</div>
</div>
);
}
Example #2
| Source File: App.tsx From TabMerger with GNU General Public License v3.0 | 6 votes |
|
/**
* Icons listed here no longer need to be imported in other files.
* Instead a string can be passed to the `icon` property.
* By default, the icons are all "solid", which is why `far` is also added ...
* ... simply do `icon={["far", "icon-name"]}` to use the "regular" version of "icon-name"
* @see https://fontawesome.com/v5.15/how-to-use/on-the-web/using-with/react#using
*/
library.add(
far,
faCog,
faSearch,
faTimes,
faWindowRestore,
faEllipsisV,
faWindowMaximize,
faTimesCircle,
faStar,
faMask,
faExclamationCircle,
faCopy,
faAngleDown,
faAngleUp,
faCheckCircle,
faUpload
);
Example #3
| Source File: icon.service.ts From WowUp with GNU General Public License v3.0 | 5 votes |
|
public constructor(private _matIconRegistry: MatIconRegistry, private _sanitizer: DomSanitizer) {
this.addSvg(faAngleDoubleDown);
this.addSvg(faArrowUp);
this.addSvg(faArrowDown);
this.addSvg(faSyncAlt);
this.addSvg(faTimes);
this.addSvg(faExternalLinkAlt);
this.addSvg(faQuestionCircle);
this.addSvg(faPlay);
this.addSvg(faClock);
this.addSvg(faBug);
this.addSvg(faLink);
this.addSvg(faDiscord);
this.addSvg(faGithub);
this.addSvg(faInfoCircle);
this.addSvg(faCodeBranch);
this.addSvg(faCaretDown);
this.addSvg(faExclamationTriangle);
this.addSvg(faCode);
this.addSvg(faPatreon);
this.addSvg(faCoins);
this.addSvg(faCompressArrowsAlt);
this.addSvg(faPencilAlt);
this.addSvg(faCheckCircle);
this.addSvg(faDiceD6);
this.addSvg(faSearch);
this.addSvg(faInfoCircle);
this.addSvg(faNewspaper);
this.addSvg(faCog);
this.addSvg(faAngleUp);
this.addSvg(faAngleDown);
this.addSvg(faChevronRight);
this.addSvg(faUserCircle);
this.addSvg(faEllipsisV);
this.addSvg(faCopy);
this.addSvg(farCheckCircle);
this.addSvg(faExclamation);
this.addSvg(faTrash);
this.addSvg(faHistory);
this.addSvg(faCaretSquareRight);
this.addSvg(faCaretSquareLeft);
this.addSvg(faMinimize);
this.addSvg(faUpRightFromSquare);
}
Example #4
| Source File: icons.font-awesome-solid.ts From dayz-server-manager with MIT License | 5 votes |
|
fontAwesomeSolidIcons = {
faAngleDown,
faAngleRight,
faArrowLeft,
faBars,
faBookOpen,
faChartArea,
faChartBar,
faChartPie,
faChevronDown,
faChevronUp,
faColumns,
faSearch,
faTable,
faTachometerAlt,
faUser,
faExclamationTriangle,
faSignOutAlt,
faCalendarAlt,
faCogs,
faClipboardList,
faHammer,
faTools,
faSync,
faLock,
faLockOpen,
faTrash,
faPlusCircle,
faSpinner,
faMap,
faAnchor,
faCity,
faChessRook,
faMountain,
faCampground,
faHome,
faUniversity,
faCrosshairs,
faPlane,
faWrench,
}
Example #5
| Source File: DSBlockDetailsPage.tsx From devex with GNU General Public License v3.0 | 4 votes |
|
DSBlockDetailsPage: React.FC = () => {
const { blockNum } = useParams()
const networkContext = useContext(NetworkContext)
const { dataService } = networkContext!
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState<string | null>(null)
const [data, setData] = useState<DsBlockObj | null>(null)
const [latestDSBlockNum, setLatestDSBlockNum] = useState<number | null>(null)
const [minerInfo, setMinerInfo] = useState<MinerInfo | null>(null)
const [currShardIdx, setCurrShardIdx] = useState<number>(0)
const [showMore, setShowMore] = useState<boolean>(false)
// Fetch data
useEffect(() => {
setIsLoading(true)
if (!dataService) return
let latestDSBlockNum: number
let receivedData: DsBlockObj
let minerInfo: MinerInfo
const getData = async () => {
try {
if (isNaN(blockNum))
throw new Error('Not a valid block number')
receivedData = await dataService.getDSBlockDetails(blockNum)
latestDSBlockNum = await dataService.getNumDSBlocks()
try { // wrapped in another try catch because it is optional
minerInfo = await dataService.getMinerInfo(blockNum)
} catch (e) { console.log(e) }
if (receivedData)
setData(receivedData)
if (latestDSBlockNum)
setLatestDSBlockNum(latestDSBlockNum)
if (minerInfo)
setMinerInfo(minerInfo)
} catch (e) {
console.log(e)
setError(e)
} finally {
setIsLoading(false)
}
}
getData()
return () => {
setData(null)
setLatestDSBlockNum(null)
setMinerInfo(null)
setError(null)
setCurrShardIdx(0)
setShowMore(false)
}
}, [blockNum, dataService])
return <>
{isLoading ? <div className='center-spinner'><Spinner animation="border" /></div> : null}
{error
? <NotFoundPage />
: data && (
<>
<div className='dsblock-header'>
<h3 className='mb-1'>
<span className='mr-1'>
<FontAwesomeIcon className='fa-icon' icon={faCubes} />
</span>
<span className='ml-2'>
DS Block
</span>
{' '}
<span className='subtext'>#{data.header.BlockNum}</span>
<LabelStar type='DS Block' />
</h3>
<span>
<QueryPreservingLink
className={parseInt(data.header.BlockNum) === 0
? 'disabled mr-3' : 'mr-3'}
to={`/dsbk/${parseInt(data.header.BlockNum) - 1}`}>
<FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareLeft} />
</QueryPreservingLink>
<QueryPreservingLink
className={latestDSBlockNum && parseInt(data.header.BlockNum) === latestDSBlockNum - 1 ? 'disabled' : ''}
to={`/dsbk/${parseInt(data.header.BlockNum) + 1}`}>
<FontAwesomeIcon size='2x' className='fa-icon' icon={faCaretSquareRight} />
</QueryPreservingLink>
</span>
</div>
<Card className='dsblock-details-card'>
<Card.Body>
<Container>
<Row>
<Col>
<div className='dsblock-detail'>
<span>Date:</span>
<span>
{timestampToDisplay(data.header.Timestamp)}
{' '}
({timestampToTimeago(data.header.Timestamp)})
</span>
</div>
</Col>
<Col>
<div className='dsblock-detail'>
<span>Difficulty:</span>
<span>{data.header.Difficulty}</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>DS Difficulty:</span>
<span>{data.header.DifficultyDS}</span>
</div>
</Col>
<Col>
<div className='dsblock-detail'>
<span>Gas Price:</span>
<span>{qaToZil(data.header.GasPrice)}</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>DS Leader:</span>
<span>
<QueryPreservingLink to={`/address/${pubKeyToZilAddr(data.header.LeaderPubKey)}`}>
{pubKeyToZilAddr(data.header.LeaderPubKey)}
</QueryPreservingLink>
</span>
</div>
</Col>
</Row>
<Row>
<Col>
<div className='dsblock-detail'>
<span>Signature:</span>
<span className='dsblock-signature'>{data.signature}</span>
</div>
</Col>
</Row>
</Container>
</Card.Body>
</Card>
{data.header.PoWWinners.length > 0 && (
<Card className='dsblock-details-card'>
<Card.Body>
<Container className='mono'>
<h6 className='mb-2'>PoW Winners</h6>
{data.header.PoWWinners.map((x, index) => <div key={index}>[{index}]
{' '}
<QueryPreservingLink to={`/address/${pubKeyToZilAddr(x)}`}>{pubKeyToZilAddr(x)}</QueryPreservingLink></div>)}
</Container>
</Card.Body>
</Card>
)}
{minerInfo &&
<>
<Collapse in={showMore}>
<Row>
<Col>
<Card className='miner-card'>
<Card.Body>
<Container className='mono'>
<Row className='justify-content-between'>
<span>DS Committee</span>
<span>Total: <strong>{minerInfo.dscommittee.length}</strong></span>
</Row>
<Row className='justify-content-center'>
{minerInfo.dscommittee.length > 0
? <MinerTable addresses={minerInfo.dscommittee} />
: <span className='my-3'>No addresses to show</span>
}
</Row>
</Container>
</Card.Body>
</Card>
</Col>
<Col>
<Card className='miner-card ml-auto'>
<Card.Body>
<Container className='mono'>
<Row className='justify-content-between'>
<Col>
<span>Shard {currShardIdx + 1} of {minerInfo.shards.length}</span>
</Col>
<Col className='text-center shard-toggle'>
<span>
<FontAwesomeIcon size='2x'
cursor='pointer'
onClick={currShardIdx === 0 ? undefined : () => (setCurrShardIdx(currShardIdx - 1))}
className={currShardIdx === 0 ? 'disabled' : ''} icon={faAngleLeft} />
<FontAwesomeIcon size='2x'
cursor='pointer'
onClick={currShardIdx === minerInfo.shards.length - 1 ? undefined : () => (setCurrShardIdx(currShardIdx + 1))}
className={currShardIdx === minerInfo.shards.length - 1 ? 'disabled ml-3' : 'ml-3'} icon={faAngleRight} />
</span>
</Col>
<Col className='text-right'>
<span>
Total:
{' '}
<strong>{minerInfo.shards[currShardIdx].nodes.length}</strong>
</span>
</Col>
</Row>
<Row className='justify-content-center'>
{minerInfo.shards[currShardIdx].nodes.length > 0
? <MinerTable addresses={minerInfo.shards[currShardIdx].nodes} />
: <span className='my-3'>No addresses to show</span>
}
</Row>
</Container>
</Card.Body>
</Card>
</Col>
</Row>
</Collapse>
</>
}
<Container className='showmore-container' onClick={() => setShowMore(!showMore)}>
<Row>
<FontAwesomeIcon icon={showMore ? faAngleUp : faAngleDown} size='2x' className='fa-icon' />
</Row>
</Container>
</>
)}
</>
}
