@fortawesome/free-solid-svg-icons#faArrowRight JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faArrowRight.
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 (
<nav className={styles.navbar}>
<ul className={styles.dropdown}>
{dropdowns.map(dropdown => {
return (
<a
href={`#${dropdown}-title`}
onClick={() => {
this.boldButton(dropdown)
}}
className={classNames(styles.listSet, {
[styles.listSetBold]: this.state.bold === dropdown,
})}
>
<div>
{this.state.selectedLink && this.state.bold === dropdown ? (
<FontAwesomeIcon
icon={faArrowRight}
className={styles.dropdownArrow}
/>
) : (
""
)}
{dropdown}
</div>
</a>
)
})}
</ul>
</nav>
)
}
Example #2
| Source File: App.js From lrc-staking-dapp with MIT License | 6 votes |
|
library.add( far, fas, faBookReader, faArrowLeft, faArrowRight, faQuestionCircle, faCopy, faSignOutAlt, faEdit, faAngleDown, faExternalLinkAlt, fab, faEthereum, faTwitter, faDiscord, faUnlink, faSearch, faFortAwesome, faExchangeAlt, faChartPie, faGlobe, faDonate, faDollarSign, );
Example #3
| Source File: index.js From Webiu with MIT License | 6 votes |
|
PublicationsList = ({title, items=[], limit, suffle, publications, achievements}) => {
const suffledItems = suffle ? items.sort(() => Math.random() - 0.5) : items
return (
<div className="publications-list-component">
<Container>
{!title || (
<Row>
<Col>
<h1 className="title">{title}</h1>
</Col>
</Row>
)}
{publications ? <Row>
{suffledItems.map((item, i) => !limit || i < limit ? (
<PublicationListItem
key={i}
{...item}
/>
) : null)}
</Row> : null}
{achievements ? <Row>
{suffledItems.map((item, i) => !limit || i<limit ? (
<AchievementListItem
key={i}
{...item}
/>
) : null)}
</Row> : null}
<Row>
<Col className="view-all-btn-container">
{!limit || <a href='/publications' className="btn-publications">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
</Col>
</Row>
</Container>
</div>
)
}
Example #4
| Source File: Slider.js From amazon-next with MIT License | 6 votes |
|
function SamplePrevArrow({ className, style, onClick }) {
return (
<button
type="button"
className={`${className} right-5 lg:right-0 button button--text button--icon cursor-pointer`}
style={{
...style,
}}
onClick={onClick}
>
<FontAwesomeIcon icon={faArrowRight} color="#000000" size="sm" />
</button>
);
}
Example #5
| Source File: Slider.js From amazon-next with MIT License | 6 votes |
|
function SampleNextArrow({ className, style, onClick }) {
return (
<button
className={`${className} lg:right-5 button button--text button--icon cursor-pointer`}
style={{
...style,
}}
type="button"
onClick={onClick}
>
<FontAwesomeIcon icon={faArrowRight} color="#000000" size="sm" />
</button>
);
}
Example #6
| Source File: index.js From dnp-website with MIT License | 6 votes |
|
render() {
return (
<nav className={styles.navbar}>
<ul className={styles.dropdownContent}>
{usecases.map(usecase => {
return (
<Link
spy={true}
smooth={true}
to={`#${usecase}-title`}
onClick={() => {
this.boldButton(usecase)
}}
className={classNames(styles.listSet, {
[styles.listSetBold]: this.state.bold === usecase,
})}
>
<div>
{this.state.bold === usecase ? (
<FontAwesomeIcon
icon={faArrowRight}
className={styles.selectorArrow}
/>
) : (
""
)}
{usecase}
</div>
</Link>
)
})}
</ul>
</nav>
)
}
Example #7
| Source File: AbilityTargeting.jsx From ashteki with GNU Affero General Public License v3.0 | 6 votes |
|
render() {
let targetCards = [];
if (this.props.targets) {
targetCards = this.props.targets.map((target) => this.renderSimpleCard(target));
}
return (
<div className='prompt-control-targeting'>
{this.renderSimpleCard(this.props.source)}
{targetCards.length > 0 && <FontAwesomeIcon icon={faArrowRight} />}
{targetCards}
</div>
);
}
Example #8
| Source File: FilePath.jsx From UniDrive with GNU General Public License v2.0 | 5 votes |
|
render() {
const {
email, folder, oId, pIndex, updatePath, userId, shareFile, moveWithin,
} = this.props;
const deleteFunc = loadAuthParam(email, this.delete);
const renameFunc = loadAuthParam(email, this.rename);
const starFunc = loadAuthParam(email, this.star);
const findPermissionFunc = loadAuthParam(email, this.findPermission);
const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
return (
<span className="file-path">
<span>
{' '}
<FontAwesomeIcon icon={faChevronRight} />
<ContextMenuTrigger id={folder.id + userId.toString() + oId.toString()}>
<button type="button" className="path-btn" onClick={() => updatePath(userId, oId, pIndex)}>{folder.name}</button>
</ContextMenuTrigger>
<ContextMenu className="context-menu" id={folder.id + userId.toString() + oId.toString()}>
<MenuItem className="menu-item" onClick={() => window.open(folder.webViewLink, 'blank')}>
<FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
View on Google Drive
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => shareFile(folder.id, window.prompt('Email Address of sharee: '))}>
<FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
Share
</MenuItem>
<MenuItem className="menu-item" onClick={() => moveWithin(userId, folder, 'root')}>
<FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
Move to Root
</MenuItem>
<MenuItem className="menu-item" onClick={() => renameFunc()}>
<FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
Rename
</MenuItem>
<MenuItem className="menu-item" onClick={() => starFunc()}>
<FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
{ (folder.starred) ? 'Remove From Starred' : 'Add to Starred' }
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => { if (window.confirm('This item and all its contents will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
<FontAwesomeIcon className="menu-icon" icon={faTrash} />
Delete
</MenuItem>
</ContextMenu>
</span>
</span>
);
}
Example #9
| Source File: index.js From Webiu with MIT License | 5 votes |
|
Carousel = ({data, header}) => {
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const previousSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === 0;
const index = shouldResetIndex ? lastIndex : currentImageIndex - 1;
setCurrentImageIndex(index);
}
const nextSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === lastIndex;
const index = shouldResetIndex ? 0 : currentImageIndex + 1;
setCurrentImageIndex(index);
}
const ImageSlide = ({ url }) => {
return (
<div className="image-slide">
<div className="slider-image-div">
<img className="slider-image" src={url.image} alt="slider-logo" />
</div>
<div className="slider-title">
<h4>{url.title}</h4><hr />
</div>
<div className="slider-content">
<p>{url.content}</p>
</div>
</div>
);
}
return (
<div>
{header ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faSlidersH} /> {header}</h2>
</div> : null}
<Container>
{data ? <div className="carousel">
<FontAwesomeIcon className="icon icon-left" icon={faArrowLeft} onClick={previousSlide} />
<ImageSlide url={ data[currentImageIndex] } />
<FontAwesomeIcon className="icon icon-right" icon={faArrowRight} onClick={nextSlide} />
</div> : null}
</Container>
</div>
);
}
Example #10
| Source File: index.js From Webiu with MIT License | 5 votes |
|
GitterRoomsList = ({title, groupId, gitterOrganizationName, gitterToken, limit, small}) => {
const [loading, setLoading] = useState(true)
const [rooms, setRooms] = useState(null)
useEffect(() => {
getRooms()
}, [])
const getRooms = () => {
const fetchUrl = `https://api.gitter.im/v1/groups/${groupId}/rooms?access_token=${gitterToken}`
setLoading(true)
fetch(fetchUrl).then((res) => res.json()).then((data) => {
setRooms(data)
setLoading(false)
})
.catch((err) => {
throw err
});
}
const renderRoomList = () => (
rooms.map((item, i) => {
if (i < limit){
return (
<Col md={4} key={item.uri}>
<GitterRoomItem
name={item.name}
avatarUrl={item.avatarUrl}
roomUrl={`https://gitter.im/${item.url}`}
userCount={item.userCount}
visible={item.public}
/>
</Col>
)
}
return null
})
)
return (
<div className="gitter-rooms-list-component">
<Container>
<Row>
<Col md={12}>
{title ? <h1 className={small ? "gitter-rooms-list-title-small" : "gitter-rooms-list-title"}>{title}</h1> : null}
</Col>
{loading || !rooms ? <Col md={12}><p>Loading...</p></Col> : renderRoomList()}
</Row>
<Row>
<Col className="view-all-btn-container">
{loading || !rooms ? null : <a href={`https://gitter.im/${gitterOrganizationName}`} className="gitter-btn" target="_blank" rel="noreferrer">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
</Col>
</Row>
</Container>
</div>
)
}
Example #11
| Source File: index.js From Webiu with MIT License | 5 votes |
|
MailingListFeed = ({title, feedUrl, small}) => {
const [loading, setLoading] = useState(true)
const [feed, setFeed] = useState(null)
useEffect(() => {
getFeed()
}, [])
const getFeed = () => {
const feedFetchUrl = `https://api.rss2json.com/v1/api.json?rss_url=${feedUrl}`
setLoading(true)
fetch(feedFetchUrl).then((res) => res.json()).then((data) => {
setFeed(data)
setLoading(false)
})
.catch((err) => {
throw err
});
}
const renderFeedItemList = () => (
feed && feed.items ? feed.items.map(item => (
<Col md={12} key={item.guid}>
<MailingListFeedItem
image={item.thumbnail}
author={item.author}
title={item.title}
description={item.description}
publishedDate={item.pubDate}
slug={item.link}
/>
</Col>
)): null
)
const width = small ? "50%" : "100%";
return (
<div className="mailing-list-feed-component">
<Container>
<Row style={{width: width}}>
<Col md={12}>
<h1 className={small ? "mailing-list-feed-title-small" : "mailing-list-feed-title"}>{title}</h1>
</Col>
{loading || !feed || !feed.items ? <Col md={12}><p>Loading...</p></Col>: renderFeedItemList()}
</Row>
<Row>
<Col className="view-all-btn-container">
{loading || !feed || !feed.items ? null : <a href={feed.feed.link} className="btn" target="_blank">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
</Col>
</Row>
</Container>
</div>
)
}
Example #12
| Source File: index.js From Webiu with MIT License | 5 votes |
|
ProjectsList = ({title, showSearchBar, searchPlaceHolder, items=[], limit, suffle = false}) => {
const suffledItems = suffle ? items.sort(() => Math.random() - 0.5) : items
const [searchItem, setSearchItem] = useState("");
const [searchResults, setSearchResults] = useState(suffledItems);
const handleSearch = async (searchItem) => {
const results = suffledItems.filter(item =>
item.title.toLowerCase().includes(searchItem)
);
setSearchItem(searchItem);
setSearchResults(results);
}
return (
<div className="project-list-component">
{!title || (
<div className="header-component">
<Row>
<Col>
<h2 className="title"><FontAwesomeIcon className="icon" icon={faCode} /> {title}</h2>
</Col>
</Row>
</div>
)}
{showSearchBar ?
<div className="projects-search">
{showSearchBar ? <SearchBar input={searchItem} handleSearch={handleSearch} placeHolder={searchPlaceHolder} />: null}
</div>
: null}
<Container>
<Row>
{searchResults.map((item, i) => !limit || i < limit ? (
<ProjectListItem
key={i}
{...item}
/>
) : null)}
</Row>
<Row>
<Col className="view-all-btn-container">
{!limit || <a href='/projects' className="btn-projects">Many More <FontAwesomeIcon icon={faArrowRight}/></a>}
</Col>
</Row>
</Container>
</div>
)
}
Example #13
| Source File: index.js From Webiu with MIT License | 5 votes |
|
Testimonial = ({data, header}) => {
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const previousSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === 0;
const index = shouldResetIndex ? lastIndex : currentImageIndex - 1;
setCurrentImageIndex(index);
}
const nextSlide = () => {
const lastIndex = data.length - 1;
const shouldResetIndex = currentImageIndex === lastIndex;
const index = shouldResetIndex ? 0 : currentImageIndex + 1;
setCurrentImageIndex(index);
}
const ImageSlide = ({ url }) => {
return (
<div>
<div className="pn_testimonial_box">
<p className="test-description text-justify">{url.description}</p>
<div className="row">
<div className="col-md-6 pn_review_profile">
<img src={url.image} className="border-radius-12 float-right" alt="client" />
<span className="test-user">{url.name}</span>
</div>
<div className="col-md-6 pn_review_rating d-flex justify-content-end">
5
<img className="image-radius aligncenter"
src="https://desklib.com/static/src/assets/images/v2/star_rating.svg"
alt="client-stars" />
</div>
</div>
</div>
</div>
);
}
return (
<div>
{header ? <div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faComments} /> {header}</h2>
</div> : null}
<Container>
{data ? <div className="carousel">
<FontAwesomeIcon className="icon icon-left" icon={faArrowLeft} onClick={previousSlide} />
<ImageSlide url={ data[currentImageIndex] } />
<FontAwesomeIcon className="icon icon-right" icon={faArrowRight} onClick={nextSlide} />
</div> : null}
</Container>
</div>
);
}
Example #14
| Source File: File.jsx From UniDrive with GNU General Public License v2.0 | 4 votes |
|
// export default function File(props) {
render() {
const {
data, email, moveWithin, oId, openFolder, shareFile, userId,
} = this.props;
const {
id, webViewLink, iconLink, name, mimeType, starred,
} = data;
const copyFunc = loadAuthParam(email, this.copy);
const deleteFunc = loadAuthParam(email, this.delete);
const renameFunc = loadAuthParam(email, this.rename);
const starFunc = loadAuthParam(email, this.star);
const findPermissionFunc = loadAuthParam(email, this.findPermission);
const findFilePermissionFunc = loadAuthParam(email, this.findFilePermission);
const deletePermissionFunc = loadAuthParam(email, this.deletePermission);
if (mimeType !== 'application/vnd.google-apps.folder') {
// if file
return (
<div>
<ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
<a href={webViewLink} target="blank">
<div className="file-container">
<div className="file-image-container">
<img className="file-img" src={iconLink} alt="File icon" />
</div>
<div className="file-name">
{name}
</div>
</div>
</a>
</ContextMenuTrigger>
<ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
<MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
<FontAwesomeIcon className="faOpen menu-icon" icon={faFolderOpen} />
Open
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
<FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
Share
</MenuItem>
<MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
<FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
Move to Root
</MenuItem>
<MenuItem className="menu-item" onClick={() => renameFunc()}>
<FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
Rename
</MenuItem>
<MenuItem className="menu-item" onClick={() => copyFunc()}>
<FontAwesomeIcon className="faCopy menu-icon" icon={faCopy} />
Make a copy
</MenuItem>
<MenuItem className="menu-item" onClick={() => starFunc()}>
<FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
{ (starred) ? 'Remove From Starred' : 'Add to Starred' }
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will be placed in the trash. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
<FontAwesomeIcon className="menu-icon" icon={faTrash} />
Delete
</MenuItem>
</ContextMenu>
</div>
);
}
// if folder
return (
<div>
<ContextMenuTrigger id={id + userId.toString() + oId.toString()}>
<div className="folder-container" onClick={() => openFolder(userId, oId, data)}>
<div className="folder-content-container">
<img className="folder-img" src={iconLink} alt="File icon" />
<p className="folder-name">{name}</p>
</div>
</div>
</ContextMenuTrigger>
<ContextMenu className="context-menu" id={id + userId.toString() + oId.toString()}>
<MenuItem className="menu-item" onClick={() => window.open(webViewLink, 'blank')}>
<FontAwesomeIcon className="faGoogle menu-icon" icon={faGoogleDrive} />
View on Google Drive
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => shareFile(id, window.prompt('Email Address of sharee: '))}>
<FontAwesomeIcon className="faShare menu-icon" icon={faShare} />
Share
</MenuItem>
<MenuItem className="menu-item" onClick={() => moveWithin(userId, data, 'root')}>
<FontAwesomeIcon className="faArrowRight menu-icon" icon={faArrowRight} />
Move to Root
</MenuItem>
<MenuItem className="menu-item" onClick={() => renameFunc(userId, id)}>
<FontAwesomeIcon className="faPencil menu-icon" icon={faPencilAlt} />
Rename
</MenuItem>
<MenuItem className="menu-item" onClick={() => starFunc()}>
<FontAwesomeIcon className="faStar menu-icon" icon={faStar} />
{ (starred) ? 'Remove From Starred' : 'Add to Starred' }
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => { if (window.confirm('This item will become unrecoverable. Proceed?')) { deleteFunc(findPermissionFunc, findFilePermissionFunc, deletePermissionFunc); } }}>
<FontAwesomeIcon className="menu-icon" icon={faTrash} />
Delete
</MenuItem>
</ContextMenu>
</div>
);
}
Example #15
| Source File: Navigation.jsx From jitsi-party with MIT License | 4 votes |
|
render() {
const onClick = this.props.onClick;
const { north, south, east, west } = this.props.directions || {};
const mapButtonClass = this.props.showMapTooltip
? "map-button animated"
: "map-button";
const pokeButtonClass = this.state.showPokeOptions
? "poke-button focused"
: "poke-button";
const room = this.props.currentRoom.room;
const audio = this.props.rooms[room].audio;
const roomType = this.props.rooms[room].type;
const events = this.props.events;
const users = _.flatten(Object.values(this.props.users));
const handleClickMap = () => this.props.handleOpenModal("map");
const handleClickEvents = () => this.props.handleOpenModal("events");
const handleClickEmail = () => this.props.handleOpenModal("email");
return (
<div className="navigation-container">
<div className="column settings-container">
<div className="map-button-container">
{this.props.showMapButton && !this.props.hideSettings && (
<button
className={mapButtonClass}
title={Config.tooltips.map}
disabled={false}
onClick={handleClickMap}
>
<FontAwesomeIcon icon={faMap} />
</button>
)}
{/* {this.props.showMapTooltip &&
<div className="map-tooltip">you have unlocked the party map!</div>
} */}
</div>
<div className="events-button-container">
{events && events.length > 0 && !this.props.hideSettings && (
<button
className="events-button"
title={Config.tooltips.events}
onClick={handleClickEvents}
>
<FontAwesomeIcon icon={faCalendar} />
</button>
)}
</div>
<div className="email-button-container">
{Config.moderation &&
!_.isEmpty(Config.moderation.moderatorEmails) && (
<button
className="email-button"
title={Config.tooltips.moderator}
onClick={handleClickEmail}
>
<FontAwesomeIcon icon={faEnvelope} />
</button>
)}
</div>
{roomType.toUpperCase() === "CHATSTREAM" &&
this.props.currentRoom.entered &&
!this.props.hideSettings ? (
<div className="chat-button-container">
<button
className={mapButtonClass}
title={Config.tooltips.chat}
disabled={false}
onClick={() =>
this.setState({ hideChat: !this.state.hideChat })
}
>
<FontAwesomeIcon icon={faCommentAlt} />
</button>
</div>
) : null}
<div className="poke-button-container">
{Config.poke &&
this.props.isPokingUnlocked &&
!this.props.hideSettings && (
<button
className={pokeButtonClass}
title={Config.tooltips.poke}
onClick={this.handleClickPokeButton.bind(this)}
>
<FontAwesomeIcon icon={Config.poke.fontAwesomeIcon} />
</button>
)}
{this.state.showPokeOptions && (
<PokeOptions
users={users}
handlePoke={this.handlePoke.bind(this)}
/>
)}
</div>
<div className="audio-button-container">
{audio && (
<AudioPlayer
src={audio.path}
autoPlay={audio.autoPlay}
hide={audio.hideControls}
onChange={this.handleAudioChanged.bind(this)}
></AudioPlayer>
)}
</div>
</div>
<div className="column">
<button
className="west"
disabled={!west}
onClick={() => onClick(west)}
>
<FontAwesomeIcon icon={faArrowLeft} />
<span className="navigation-room-name">
{_.get(this.props.rooms[west], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="north"
disabled={!north}
onClick={() => onClick(north)}
>
<FontAwesomeIcon icon={faArrowUp} />
<span className="navigation-room-name">
{_.get(this.props.rooms[north], "name")}
</span>
</button>
<button
className="south"
disabled={!south}
onClick={() => onClick(south)}
>
<FontAwesomeIcon icon={faArrowDown} />
<span className="navigation-room-name">
{_.get(this.props.rooms[south], "name")}
</span>
</button>
</div>
<div className="column">
<button
className="east"
disabled={!east}
onClick={() => onClick(east)}
>
<FontAwesomeIcon icon={faArrowRight} />
<span className="navigation-room-name">
{_.get(this.props.rooms[east], "name")}
</span>
</button>
</div>
<div className="column column-avatar">
<div className="puck-wrapper">
<img
src={
Config.avatars[this.props.user.avatar.type].images[
this.props.user.avatar.color
]
}
/>
</div>
</div>
</div>
);
}
Example #16
| 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>
)
}
Example #17
| Source File: SwapTokenWidget.js From katanapools with GNU General Public License v2.0 | 4 votes |
|
render() {
const {tokenData} = this.props;
const {showTransaferSelect, selectedTransferToken, selectedReceiveToken, showReceiveSelect,
transferAmount, receiveAmount, totalFee, pathMeta, transactionFee, widgetError
} = this.state;
let transferFromTokenSelect = <span/>;
let receiveToTokenSelect = <span/>;
if (showTransaferSelect) {
transferFromTokenSelect =
(<div className="token-select-dropdown">
<TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.transferSelectChanged}/>
</div>
)
}
if (showReceiveSelect) {
receiveToTokenSelect = (
<div className="token-select-dropdown">
<TokenSuggestionList tokenData={tokenData} tokenSelectChanged={this.receiveSelectChanged}/>
</div>
)
}
if (tokenData.length === 0 || selectedTransferToken === undefined || selectedReceiveToken === undefined) {
return (
<div className="swap-token--loading-container">
<div className="spinner-icon">
<FontAwesomeIcon icon={faSpinner} size="lg" rotation={270} pulse/>
</div>
</div>);
}
let pathMetaData = <span/>;
if (pathMeta && pathMeta.length > 0) {
pathMetaData = pathMeta.map(function(item, idx){
let pointerArrow = <span/>;
if (idx < pathMeta.length - 1) {
pointerArrow =
<div className="arrow-right-container">
<FontAwesomeIcon icon={faArrowRight} />
</div>
}
return (
<div className="meta-item-cell-container" key={idx}>
<div className="meta-item-cell">
<div className="token-label-cell">{item.meta.symbol}</div>
<div className="token-name-cell">{item.meta.name}</div>
</div>
{pointerArrow}
</div>)
})
}
let errorData = <span/>;
if (widgetError && widgetError.length > 0) {
errorData = <div className="error">{widgetError}</div>
}
return (
<div className="swap-token-container">
<div className="card">
<div className="text">
<Row>
<Col lg={5}>
<div className="h4 token-transfer-label">Transfer </div>
<div className="token-label-amount-container">
<Row>
<Col lg={4} className="token-label-select-col">
<div className="token-label-container" onClick={this.openTransferSelectDropdown}>
<img src={selectedTransferToken.imageURI} className="token-preview-image"/>
<div className="token-preview-text">{selectedTransferToken.symbol}</div>
<FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
</div>
{transferFromTokenSelect}
</Col>
<Col lg={8} className="token-amount-col">
<Form.Control size="sm" type="number" placeholder="Amount" onChange={this.transferAmountChanged} value={transferAmount}/>
</Col>
</Row>
</div>
</Col>
<Col lg={2}>
<div className="token-transfer-arrow-container">
<div>
<FontAwesomeIcon icon={faArrowLeft} className="arrow-container"/>
</div>
<div className="bottom-arrow-container arrow-container">
<FontAwesomeIcon icon={faArrowRight}/>
</div>
</div>
</Col>
<Col lg={5}>
<div className="h4 token-transfer-label">Receive</div>
<div className="token-label-amount-container">
<Row>
<Col lg={4} className="token-label-select-col">
<div className="token-label-container" onClick={this.openReceiveSelectDropdown}>
<img src={selectedReceiveToken.imageURI} className="token-preview-image"/>
<div className="token-preview-text">{selectedReceiveToken.symbol}</div>
<FontAwesomeIcon icon={faChevronCircleDown} className="dropdown-circle"/>
</div>
{receiveToTokenSelect}
</Col>
<Col lg={8} className="token-amount-col">
<Form.Control size="sm" type="text" placeholder="Amount" value={receiveAmount}
onChange={this.receiveAmountChanged}/>
</Col>
</Row>
</div>
</Col>
</Row>
<Row className="swap-action-btn-container">
<Col lg={8}>
{errorData}
</Col>
<Col lg={3}>
Total Fees: {transactionFee} {selectedReceiveToken.symbol}
</Col>
<Col lg={1}>
<Button onClick={this.submitSwapTransaction}>Swap</Button>
</Col>
</Row>
<Row>
<Col lg={12} className="network-path-label">
Network path :
</Col>
<Col lg={12} className="network-path-data">
{pathMetaData}
</Col>
</Row>
</div>
</div>
</div>
)
}
Example #18
| Source File: index.jsx From 8086.js with MIT License | 4 votes |
|
export default function ButtonsContainer() {
const classes = useStyles();
const dispatch = useDispatch();
const code = useSelector(selectCode);
const emulatorState = useSelector(selectState);
const loadCode = () => {
emulator.loadCode(code);
};
const stepForwardClick = () => {
const len = emulatorState.registers.future.length;
if (len === 0) return;
dispatch(stepForward());
};
const stepBackClick = () => {
const len = emulatorState.registers.past.length;
if (len === 0) return;
dispatch(stepBack());
};
const runFromPointClick = () => {
Object.entries(emulatorState.registers.present)
.map((o) => {
const [k, v] = o;
if (
['H', 'L'].includes(k[1])
&& ['A', 'B', 'C', 'D'].includes(k[0])
) {
emulator.cpu.registers.regs[`${k[0]}X`].set(v, k[1]);
} else {
emulator.cpu.registers.regs[k].set(v);
}
return o;
});
Object.values(emulatorState.memory.present)
.map((v, i) => {
emulator.cpu.memory.set(i, v);
return v;
});
try {
loadCode();
emulator.cpu.step();
dispatch(executeStep({
registers: emulator.getRegisters(),
memory: emulator.getSerialisableMemory(),
}));
} catch (err) {
dispatch(raiseError({
name: err.name,
token: err.token,
message: err.message,
position: err.position,
lineNumber: err.lineNumber,
}));
}
};
const runAllClick = () => {
emulator.resetState();
dispatch(resetRegMemState());
// eslint-disable-next-line no-constant-condition
while (true) {
try {
loadCode();
emulator.cpu.step();
dispatch(executeStep({
registers: emulator.getRegisters(),
memory: emulator.getSerialisableMemory(),
}));
} catch (err) {
break;
}
}
};
const pastLength = emulatorState.registers.past.length;
const backClass = pastLength > 0 ? '' : classes.disabledIcon;
const futureLength = emulatorState.registers.future.length;
const forwardClass = futureLength > 0 ? '' : classes.disabledIcon;
return (
<div className={classes.buttonsContainer}>
<div className={classes.buttonWrapper}>
<button type="button" className={classes.button} onClick={stepBackClick}>
<sup className={classes.count}>{pastLength}</sup>
<FontAwesomeIcon icon={faArrowLeft} className={backClass} />
</button>
<button type="button" className={classes.button} onClick={runFromPointClick}>
<FontAwesomeIcon icon={faPlay} className={classes.playIcon} />
</button>
<button type="button" className={classes.button} onClick={stepForwardClick}>
<FontAwesomeIcon icon={faArrowRight} className={forwardClass} />
<sup className={classes.count}>{futureLength}</sup>
</button>
<button type="button" className={classes.button} onClick={runAllClick}>
<FontAwesomeIcon icon={faForward} />
</button>
</div>
</div>
);
}
Example #19
| Source File: index.js From Webiu with MIT License | 4 votes |
|
MediumFeed = ({title, mediumUrl, small, limit}) => {
const [loading, setLoading] = useState(true)
const [feed, setFeed] = useState(null)
useEffect(() => {
getFeed()
}, [])
const getFeed = () => {
const feedFetchUrl = `https://api.rss2json.com/v1/api.json?rss_url=${mediumUrl}`
setLoading(true)
fetch(feedFetchUrl).then((res) => res.json()).then((data) => {
setFeed(data)
setLoading(false)
})
.catch((err) => { throw err });
}
const renderSmallFeedItemList = () => {
return feed.items.map((item, index) => {
if (index < limit) {
return (
<FeedItemSmall
key={item.guid}
title={item.title}
publishedDate={item.pubDate}
image={item.thumbnail}
author={item.author}
slug={item.link}
/>
)
}
})
}
const renderFeedItemList = () => (
<Container>
<Row>
{feed.items.map((item, index) => {
if(index < limit) {
return (
<Col md={6} key={item.guid}>
<FeedItem
title={item.title}
publishedDate={item.pubDate}
image={item.thumbnail}
author={item.author}
slug={item.link}
/>
</Col>
)
}
})}
</Row>
<Row>
<Col className="view-all-btn-container">
{loading || !feed || !feed.items ? null :
<a href={feed.feed.link} className="medium-btn" target="_blank" rel="noreferrer">
Many More <FontAwesomeIcon icon={faArrowRight}/>
</a>}
</Col>
</Row>
</Container>
)
return (
<div className="medium-feed-component">
{!small ?
<div className="header-component">
<h2><FontAwesomeIcon className="icon-h2" icon={faBlog} /> {title}</h2>
</div>
:
<p className="medium-feed-title">{title}</p>}
{loading || !feed ? <span /> : (
small ? renderSmallFeedItemList() : renderFeedItemList()
)}
</div>
)
}
