@fortawesome/free-solid-svg-icons#faEllipsisV JavaScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faEllipsisV.
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 ErgoAuctionHouse with MIT License | 6 votes |
|
render() {
const {enableMobileMenu, enableMobileMenuSmall} = this.props;
return (
<Fragment>
<div className="app-header__mobile-menu">
<div onClick={this.toggleMobileSidebar}>
<Hamburger
active={enableMobileMenu}
type="elastic"
onClick={this.toggleMobileSidebar}
/>
</div>
</div>
<div className="app-header__menu">
<span onClick={this.toggleMobileSmall}>
<Button size="sm"
className={cx("btn-icon btn-icon-only", {active: enableMobileMenuSmall})}
color="primary"
onClick={this.toggleMobileSmall}>
<div className="btn-icon-wrapper"><FontAwesomeIcon icon={faEllipsisV}/></div>
</Button>
</span>
</div>
</Fragment>
)
}
Example #2
| Source File: activitycarddropdown.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ActivityCardDropDown = ({ iconColor }) => {
const IconColor = iconColor ? iconColor : "#084892";
const dispatch = useDispatch();
return (
<div className="curriki-utility-activity-dropdown">
<Dropdown className="activity-dropdown check ">
<Dropdown.Toggle className="activity-dropdown-btn">
<FontAwesomeIcon
icon={faEllipsisV}
style={{ fontSize: "13px", color: IconColor, marginLeft: "5px" }}
/>
{/* <span>EditActivity</span> */}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={() => {
dispatch({
type: "SET_ACTIVE_ACTIVITY_SCREEN",
payload: "addactivity",
});
}}
>
<FontAwesomeIcon icon={faEdit} className="mr-2" />
Edit
</Dropdown.Item>
<Dropdown.Item>
<FontAwesomeIcon icon={faCopy} className="mr-2" />
Duplicate
</Dropdown.Item>
<Dropdown.Item>
<FontAwesomeIcon icon={faTrash} className="mr-2" />
Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}
Example #3
| Source File: activityprojectdropdown.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
ActivityProjectCardDropDown = ({ iconColor }) => {
const IconColor = iconColor ? iconColor : "#084892";
return (
<div className="curriki-utility-activity-project-dropdown">
<Dropdown className="activity-dropdown check ">
<Dropdown.Toggle className="activity-dropdown-btn">
<FontAwesomeIcon
icon={faEllipsisV}
style={{ fontSize: "13px", color: IconColor, marginLeft: "5px" }}
/>
{/* <span>EditActivity</span> */}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item>
<a className="links " href="#">
Project #1
</a>
</Dropdown.Item>
<Dropdown.Item>
<a className="links " href="#">
Project #2
</a>
</Dropdown.Item>
<Dropdown.Item>
<a className="links " href="#">
Project #3
</a>
</Dropdown.Item>
<Dropdown.Item>
<a className="links " href="#">
Project #4
</a>
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}
Example #4
| Source File: dropdownedit.js From ActiveLearningStudio-react-client with GNU Affero General Public License v3.0 | 5 votes |
|
DropDownEdit = ({ iconColor, data }) => {
const IconColor = iconColor ? iconColor : '#084892';
const dispatch = useDispatch();
return (
<div className="curriki-utility-activity-dropdown">
<Dropdown className="activity-dropdown check ">
<Dropdown.Toggle className="activity-dropdown-btn">
<FontAwesomeIcon icon={faEllipsisV} style={{ fontSize: '13px', color: IconColor, marginLeft: '5px' }} />
{/* <span>EditActivity</span> */}
</Dropdown.Toggle>
<Dropdown.Menu>
<Dropdown.Item
onClick={async () => {
toast.info('Duplicating project...', {
className: 'project-loading',
closeOnClick: false,
closeButton: false,
position: toast.POSITION.BOTTOM_RIGHT,
autoClose: 10000,
icon: '',
});
const result = await dispatch(cloneh5pvideo(data.id));
toast.dismiss();
Swal.fire({
html: result.message,
icon: 'success',
});
}}
>
<FontAwesomeIcon icon={faCopy} className="mr-2" />
Duplicate
</Dropdown.Item>
<Dropdown.Item
className
onClick={() => {
Swal.fire({
title: 'Are you sure you want to delete this activity?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: 'Yes',
denyButtonText: 'No',
}).then((result) => {
if (result.isConfirmed) {
dispatch(deleteVideo(data.id));
}
});
}}
>
<FontAwesomeIcon icon={faTrash} className="mr-2" />
Delete
</Dropdown.Item>
</Dropdown.Menu>
</Dropdown>
</div>
);
}
Example #5
| Source File: Job.component.js From hiring-system with GNU General Public License v3.0 | 5 votes |
|
Job = ({ job }) => {
const {
userId,
jobTitle,
jobCreatorLogo,
jobLocation,
// jobApplyURL,
jobCreator,
dateModified,
jobDescription,
jobWorkType,
} = job;
const [dropdownOpen, setDropdownOpen] = useState(false);
const toggle = () => setDropdownOpen((prevState) => !prevState);
return (
<ListGroupItem className="job-card" key={userId}>
<div className="d-flex flex-column">
<div className="job-card--header mb-3">
{jobCreatorLogo ? (
<img className="job-image" src={jobCreatorLogo} alt={jobCreator} />
) : (
<h3 className="company mr-4">{jobCreator}</h3>
)}
<span className="text-tiny job-time">
{moment(dateModified).fromNow()}
</span>
<Dropdown
className="drop-down-icon"
isOpen={dropdownOpen}
toggle={toggle}
>
<DropdownToggle>
<FontAwesomeIcon icon={faEllipsisV} />
</DropdownToggle>
<DropdownMenu right>
<DropdownItem>
<FontAwesomeIcon icon={faHeart} className="mr-1" /> Save Job
</DropdownItem>
<DropdownItem>
<FontAwesomeIcon icon={faBan} className="mr-2" />
Not Interested
</DropdownItem>
</DropdownMenu>
</Dropdown>
</div>
<div className="mr-auto">
<h4 className="job-card--title text-dark">{jobTitle}</h4>
<h6 className="text-muted">
<FontAwesomeIcon icon={faMapMarkerAlt} />
<span className="ml-2">{jobLocation}</span>
</h6>
<p>
{jobDescription.replace(/(<([^>]+)>)/gi, "").substring(0, 100)} ...
</p>
<Badge className="p-2 mt-1 mr-2" color="primary">
{jobWorkType}
</Badge>
</div>
</div>
</ListGroupItem>
);
}
Example #6
| Source File: Menu.jsx From covid with GNU General Public License v3.0 | 5 votes |
|
// Renders the widget's popup actions menu
function WidgetMenu (props) {
const { onClick, options, id, ...restProps } = props
const [anchorEl, setAnchorEl] = React.useState(null)
const open = Boolean(anchorEl)
// Sets the element where the popup menu will open next to
const handleClickOpen = (event) => setAnchorEl(event.currentTarget)
const handleClose = () => setAnchorEl(null)
// When an element is clicked, close menu and call parent's onClick
const handleClickElement = (value) => {
handleClose()
onClick(value)
}
// Render the open icon button and, if in open
// state, the menu with all elements but `view`
return (
<>
<IconButton
aria-label='actions'
aria-controls={anchorEl ? `widget-menu-${id}` : null}
aria-haspopup='true'
onClick={handleClickOpen}
>
<FontAwesomeIcon icon={faEllipsisV} />
</IconButton>
{anchorEl
? (
<Menu
id={`widget-menu-${id}`}
anchorEl={anchorEl}
keepMounted
open={open}
onClose={handleClose}
PaperProps={{
style: {
width: '20ch'
}
}}
>
{Object.keys(options)
.filter((option) => option !== 'view')
.map((option) => (
<WidgetMenuItem
key={option}
option={option}
onClick={handleClickElement}
icon={options[option].icon}
label={
typeof options[option].label === 'function'
? options[option].label(restProps)
: options[option].label
}
/>
))}
</Menu>
)
: null}
</>
)
}
Example #7
| Source File: activeOther.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
let box = this.props.box;
return (
<Col key={box.id} lg="6" xl="4" md="6">
<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}
/>
<ArtworkDetails
box={this.props.box}
isOpen={this.state.infoModal}
close={() =>
this.setState({
infoModal: !this.state.infoModal,
})
}
/>
<div className="card mb-3 bg-white widget-chart" style={
{
'opacity': this.props.box.isFinished ? 0.6 : 1
}
}>
<b class="fsize-1 text-truncate" style={{marginTop: 8}}>{this.props.box.tokenName}</b>
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction="left">
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisV}/>
</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
}
>
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={20}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.state.loading}
/>
</ResponsiveContainer>
<div className="d-inline-flex">
<span className="widget-numbers">
{this.props.box.value / 1e9} ERG
</span>
</div>
<div className="widget-chart-wrapper chart-wrapper-relative justify justify-content-lg-start">
<div
onClick={() => {
this.setState({infoModal: true})
}}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
className="widget-subheading m-1"
>
<span
data-tip={this.props.box.assets[0].tokenId}
>
{friendlyToken(this.props.box.assets[0], true, 8)}
</span>
<i
onClick={() =>
this.showIssuingTx(this.props.box)
}
data-tip="see issuing transaction"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Bidder{' '}
{friendlyAddress(this.props.box.bidder, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see current bidder's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<ReactTooltip effect="solid" place="bottom"/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
onClick={() => {
this.setState({infoModal: true})
}}
style={{
flex: 1,
cursor: 'pointer',
justifyContent: 'center',
alignItems: 'center',
height: '100px',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
{this.props.box.description}
<Link
to={'/auction/active?type=other&artist=' + this.props.box.artist}
>
<b
>
{' '}- By {friendlyAddress(this.props.box.artist, 4)}
</b></Link>
</p>
</div>
</div>
</div>
<div className="widget-chart-wrapper chart-wrapper-relative">
<Button
onClick={() => this.openMyBids()}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-layers"> </i>
<span>My Bids</span>
</Button>
<Button
onClick={() => this.openBid()}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-pencil"> </i>
<span>Place Bid</span>
</Button>
<Button
onClick={() => {
this.setState({detailsModal: true});
}}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-chart-bars"> </i>
<span>Details</span>
</Button>
</div>
<FooterSection box={this.props.box} loading={(val) => this.setState({loading: val})} assemblerModal={this.props.assemblerModal} openBid={this.openBid}/>
</div>
</Col>
);
}
Example #8
| Source File: historyBox.js From ErgoAuctionHouse with MIT License | 4 votes |
|
render() {
return (
<Col key={this.props.box.id} md="4">
<ArtworkDetails
box={this.props.box}
isOpen={this.state.infoModal}
close={() =>
this.setState({
infoModal: !this.state.infoModal,
})
}
/>
<MyBidsModal
isOpen={this.state.myBidsModal}
box={this.props.box}
close={this.openMyBids}
highText='winner'
/>
<BidHistory close={this.openDetails} box={this.props.box} isOpen={this.state.detailsModal}/>
<div className="card mb-3 widget-chart">
<div className="widget-chart-actions">
<UncontrolledButtonDropdown direction='left'>
<DropdownToggle color="link">
<FontAwesomeIcon icon={faEllipsisV}/>
</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}
>Go to Auction's specific Link</NavLink>
</NavItem>
</Nav>
</DropdownMenu>
</UncontrolledButtonDropdown>
</div>
<div className="widget-chart-content">
<ResponsiveContainer height={20}>
<SyncLoader
css={override}
size={8}
color={'#0086d3'}
loading={this.props.box.loader}
/>
</ResponsiveContainer>
<div className="d-inline-flex">
{this.props.box.curBid >= this.props.box.minBid && <span className="widget-numbers">
{longToCurrency(this.props.box.curBid, -1, this.props.box.currency)} {this.props.box.currency}
</span>}
{this.props.box.curBid < this.props.box.minBid && <span className="widget-numbers">
-
</span>}
{this.props.box.isArtwork && <span
onClick={() => this.setState({artDetail: true})}
data-tip="Artwork NFT"
className="icon-wrapper rounded-circle opacity-7 m-2 font-icon-wrapper">
<i className="lnr-picture icon-gradient bg-plum-plate fsize-4"/>
<ArtworkDetails
box={this.props.box}
isOpen={this.state.artDetail}
close={() => this.setState({artDetail: !this.state.artDetail})}
/>
</span>}
</div>
<ArtworkMedia preload={false} avoidFav={true} box={this.props.box}/>
<div className="widget-chart-wrapper chart-wrapper-relative justify justify-content-lg-start">
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span
data-tip={this.props.box.assets[0].tokenId}
>
{friendlyToken(this.props.box.assets[0], true, 8)}
</span>
<i
onClick={() =>
this.showIssuingTx(this.props.box)
}
data-tip="see issuing transaction"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.seller}>
Seller{' '}
{friendlyAddress(this.props.box.seller, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.seller)
}
data-tip="see seller's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
<div
style={{
display: 'flex',
justifyContent: 'center',
}}
className="widget-subheading m-1"
>
<span data-tip={this.props.box.bidder}>
Winner{' '}
{friendlyAddress(this.props.box.bidder, 8)}
</span>
<i
onClick={() =>
this.showAddress(this.props.box.bidder)
}
data-tip="see winner's address"
style={{
fontSize: '1.5rem',
marginLeft: '5px',
}}
className="pe-7s-help1 icon-gradient bg-night-sky"
/>
</div>
</div>
<ReactTooltip effect="solid" place="bottom"/>
<div className="widget-chart-wrapper chart-wrapper-relative">
<div
onClick={() => {
this.setState({infoModal: true})
}}
style={{
flex: 1,
cursor: 'pointer',
justifyContent: 'center',
alignItems: 'center',
height: '100px',
overflowY: 'hidden',
overflowX: 'hidden',
fontSize: '12px',
}}
>
<p className="text-primary mr-2 ml-2">
{this.props.box.description}
<Link
to={'/auction/active?type=other&artist=' + this.props.box.artist}
>
<b
>
{' '}- By {friendlyAddress(this.props.box.artist, 4)}
</b></Link>
</p>
</div>
</div>
</div>
<div className="widget-chart-wrapper chart-wrapper-relative">
<Button
onClick={() => this.openMyBids()}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-layers"> </i>
<span>My Bids</span>
</Button>
<Button
onClick={() => this.showTx(this.props.box.finalTx? this.props.box.finalTx : this.props.box.spentTransactionId)}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-exit-up"> </i>
<span>Final Transaction</span>
</Button>
<Button
onClick={() => {
this.setState({detailsModal: true});
}}
outline
className="btn-outline-light m-2 border-0"
color="primary"
>
<i className="nav-link-icon lnr-chart-bars"> </i>
<span>Details</span>
</Button>
</div>
<CardFooter>
<ResponsiveContainer height={60}>
<Col className="widget-description">
Up by
<span className="text-success pl-1 pr-1">
<FontAwesomeIcon icon={faAngleUp}/>
<span className="pl-1">
{this.props.box.increase}%
</span>
</span>
in comparision to the initial bid
</Col>
</ResponsiveContainer>
</CardFooter>
</div>
</Col>
);
}
Example #9
| Source File: User.jsx From UniDrive with GNU General Public License v2.0 | 4 votes |
|
render() {
const { looseFilesIsDisplayed } = this.state;
const {
closePath, filterFunc, idToken, looseFileList, moveExternal,
moveWithin, openFolder, openFolderList, refreshFunc, removeFunc, sortFunc,
topLevelFolderList, updatePath, userId,
} = this.props;
const { name, email, picture } = parseIDToken(idToken);
const createFunc = loadAuthParam(email, this.create);
return (
<ContextMenuTrigger className="user" id={userId.toString()}>
<button
type="button"
className="user-banner"
onClick={() => this.viewToggle()}
onKeyDown={() => this.viewToggle()}
>
<img className="profile-picture" src={picture} alt="Account profile" />
<span className="profile-text">
{' '}
<span className="profile-name">{name}</span>
{' '}
<span className="profile-email">
(
{email}
)
</span>
</span>
<ContextMenuTrigger className="context-menu" id={userId.toString()} holdToDisplay={0}>
<FontAwesomeIcon className="fa-ellipsis menu-icon" icon={faEllipsisV} size="lg" onClick={(event) => this.handleIconClick(event, () => {})} title="Options" />
</ContextMenuTrigger>
</button>
<ContextMenu className="context-menu" id={userId.toString()}>
<MenuItem className="menu-item upload">
<SubMenu
className="context-menu sub-menu-upload"
title={
(
<span>
<FontAwesomeIcon className="fa-plus menu-icon" icon={faPlus} onClick={(event) => this.handleIconClick(event, () => {})} />
Create New...
</span>
)
}
>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.folder', 'New Folder')}>
<FontAwesomeIcon className="fa-folder menu-icon" icon={faFolderPlus} />
Folder
</MenuItem>
<hr className="divider" />
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.document', 'New Doc')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.document" alt="Google Doc icon" />
Google Doc
</MenuItem>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.spreadsheet', 'New Sheet')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.spreadsheet" alt="Google Speardsheet icon" />
Google Sheets
</MenuItem>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.presentation', 'New Presentation')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.presentation" alt="Google Slides icon" />
Google Slides
</MenuItem>
<MenuItem className="menu-item" onClick={() => createFunc('application/vnd.google-apps.form', 'New Form')}>
<img className="menu-icon" src="https://drive-thirdparty.googleusercontent.com/16/type/application/vnd.google-apps.form" alt="Google Forms icon" />
Google Forms
</MenuItem>
</SubMenu>
</MenuItem>
<label htmlFor={email}>
<MenuItem className="menu-item">
<FontAwesomeIcon className="fa-upload menu-icon" icon={faUpload} />
<input
type="file"
id={email}
className="file-input"
onChange={(e) => this.uploadController(e, idToken)}
multiple
/>
Upload
</MenuItem>
</label>
<MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => this.toggleLoose())}>
<FontAwesomeIcon className="fa-eye-slash menu-icon" icon={(looseFilesIsDisplayed) ? faEyeSlash : faEye} />
Toggle Folder View
</MenuItem>
<MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => refreshFunc(userId))}>
<FontAwesomeIcon className="fa-sync menu-icon" icon={faSyncAlt} />
Refresh Account
</MenuItem>
<MenuItem className="menu-item" onClick={(event) => this.handleIconClick(event, () => removeFunc(userId))}>
<FontAwesomeIcon className="fa-trash menu-icon" icon={faTrash} />
Remove Account
</MenuItem>
</ContextMenu>
<div style={{ display: 'none' }} className="Files/Folders" ref={this.props.forwardRef}>
<Filters
filterFunc={filterFunc}
sortFunc={sortFunc}
userId={userId}
/>
<TopLevelFolderList
email={email}
userId={userId}
topLevelFolderList={topLevelFolderList}
shareFile={loadAuthParam(email, this.shareFile)}
moveWithin={moveWithin}
moveExternal={moveExternal}
refreshFunc={refreshFunc}
openFolder={openFolder}
/>
<OpenFolderList
email={email}
userId={userId}
openFolderList={openFolderList}
shareFile={loadAuthParam(email, this.shareFile)}
moveWithin={moveWithin}
moveExternal={moveExternal}
refreshFunc={refreshFunc}
openFolder={openFolder}
closePath={closePath}
updatePath={updatePath}
/>
{looseFilesIsDisplayed && (
<LooseFileList
email={email}
userId={userId}
looseFileList={looseFileList}
shareFile={loadAuthParam(email, this.shareFile)}
moveWithin={moveWithin}
moveExternal={moveExternal}
refreshFunc={refreshFunc}
/>
)}
</div>
</ContextMenuTrigger>
);
}
