@fortawesome/free-solid-svg-icons#faChevronUp JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faChevronUp.
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: index.js From dnp-website with MIT License | 6 votes |
|
render() {
return (
<div className={this.state.class}>
<button
title="back to top"
onClick={() => {
this.scrollToTop()
}}
className={styles.scrollUp}
>
<FontAwesomeIcon icon={faChevronUp} size="1x" />
</button>
<button
title="down"
className={styles.scrollDown}
onClick={() => {
this.scrollStepDown()
}}
>
<FontAwesomeIcon icon={faChevronDown} size="1x" />
</button>
</div>
)
}
Example #2
| Source File: faLibrary.js From cosmoscan-front with Apache License 2.0 | 6 votes |
|
library.add( faBars, faTimes, faChevronDown, faChevronUp, faCalendarAlt, faTelegramPlane, faTwitter, faMediumM, faRedditAlien, faQuestionCircle, faCheck, faSearch, );
Example #3
| Source File: dropdown.js From open-jobboard with Apache License 2.0 | 5 votes |
|
Dropdown = props => {
const { selectedItems, onChangeSelected } = props;
const [activeState, setActiveState] = useState(false)
return (
<div className={styles.dropdown}>
<div
className={styles.dropdown__label}
onClick={ () =>
!activeState && window.setTimeout(() => {
setActiveState(prevActiveState => !prevActiveState)
}, 10)
}
role="button"
tabIndex="0"
>
{props.title} <FontAwesomeIcon className="icon-right" icon={activeState ? faChevronUp : faChevronDown} />
</div>
{activeState && (
<div className={styles.dropdown__menu}>
<OutsideClickHandler
onOutsideClick={ () =>
window.setTimeout(() => {
setActiveState(prevActiveState => !prevActiveState)
}, 10)
}
>
<ul className={styles.dropdown__menu_list}>
{props.options.map((option, index) => {
let selected = false;
if (typeof option === 'string') {
selected = selectedItems.indexOf(option) !== - 1 ? true : false
} else {
selected = JSON.stringify(selectedItems) === JSON.stringify(option) ? true : false
}
return (
<li
// className={styles.dropdown__menu-option}
key={`option-${index}`}>
<ItemOptions
item={option}
selected={selected}
onChangeSelected={() => onChangeSelected(option)}
/>
</li>
)
})}
</ul>
</OutsideClickHandler>
</div>
)}
</div>
)
}
Example #4
| Source File: topic-links.js From react-simple-boilerplate with MIT License | 5 votes |
|
TopicLinks = ({topics, activeTopic, activeDoc}) => {
const [expanded, setExpanded] = useState(activeTopic)
const [hoverType, setHoverType] = useState('')
const [currentHover, setCurrentHover] = useState('')
const onTopicMouseEnter = (topic) => {
setCurrentHover(topic)
setHoverType('topic')
}
const onDocMouseEnter = (doc) => {
setCurrentHover(doc)
setHoverType('doc')
}
const onMouseLeave = () => {
setCurrentHover('')
setHoverType('')
}
useEffect(() => console.log('render'))
return (
<div>
{Object.keys(topics).map((topic, index) => (
<div key={index} className='px-2'>
<div
className={`d-flex w-100 rounded p-1 ${currentHover === topic && hoverType === 'topic'? 'bg-light' : ''} ${activeTopic === topic? 'text-primary' : ''}`}
style={{ cursor: 'pointer' }}
onClick={() => setExpanded(topic === expanded? '': topic)}
onMouseEnter={() => onTopicMouseEnter(topic)}
onMouseLeave={onMouseLeave} >
<div className='mr-auto'>{topic}</div>
<div><FontAwesomeIcon icon={topic === expanded? faChevronUp : faChevronDown} /></div>
</div>
<div className={`pl-2 ${topic !== expanded? 'd-none' : ''}`} >
{topics[topic].map(({title, id}, index) => (
<Link key={index} href='/docs/[id]' as={`/docs/${id}`}>
<a className='text-decoration-none'>
<div
className={`rounded p-1 ${currentHover === title && hoverType === 'doc'? 'bg-light' : ''} ${activeDoc === title? 'text-primary' : 'text-dark'}`}
onMouseEnter={() => onDocMouseEnter(title)}
onMouseLeave={onMouseLeave} >
{title}
</div>
</a>
</Link>
))}
</div>
</div>
))}
</div>
);
}
Example #5
| 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>
)
}
