@fortawesome/free-solid-svg-icons#faFolderPlus TypeScript Examples
The following examples show how to use
@fortawesome/free-solid-svg-icons#faFolderPlus.
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: FileSystem.tsx From MagicUI with Apache License 2.0 | 5 votes |
|
function ProjectManageTools() {
const user = useSelector((state: IStoreState) => state.user);
const dslFile = useSelector((state: IStoreState) => state.dslFile);
const openFileItems = useSelector((state: IStoreState) => state.openFileItems);
const dispatch = useDispatch();
const handleCreateFile = () => {
modal(cancel => (
<NewFileOrFolderModal fileType="file" cancel={cancel} email={user.email} folder={dslFile.folder}
dispatch={dispatch}/>
));
};
const handleCreateFolder = () => {
modal(cancel => (
<NewFileOrFolderModal fileType="folder" cancel={cancel} email={user.email} folder={dslFile.folder}
dispatch={dispatch}/>
));
};
const handleDeleteFile = () => {
modal(cancel => <Confirm title={`Do you want to delete ${dslFile.filename}`} cancel={cancel} confirm={() => {
deleteDslFile(user.email, dslFile.id, dslFile.fileId).then(v => {
if (!v.err) {
toast('delete file!');
dispatch(localDeleteFile(dslFile.id));
let i = 0, check = false;
for (let item of openFileItems.items) {
if (v.id === item.id) {
check = true;
break
}
i++;
}
console.log(check, i - 1);
check && dispatch(closeFile(i - 1, dslFile.id, dslFile.fileId));
cancel();
}
});
}}/>);
};
return (
<div className={style.project_manage_tools}>
<button className={style.mk_file_btn} onClick={handleCreateFile}>
<FontAwesomeIcon icon={faPlus}/>
</button>
<button className={style.mk_dir_btn} onClick={handleCreateFolder}>
<FontAwesomeIcon icon={faFolderPlus}/>
</button>
<button className={style.delete_btn} onClick={handleDeleteFile}>
<FontAwesomeIcon icon={faTrash}/>
</button>
</div>
);
}
Example #2
| Source File: FileSwitcher.tsx From frontend.ro with MIT License | 4 votes |
|
render() {
const {
readOnly,
maxHeight,
folderStructure,
selectedFileKey,
feedbacks: feedbacksProp,
} = this.props;
const {
ctxMenuKey,
isCollapsed,
ctxMenuType,
dropdownStyle,
isGeneratingArchive,
} = this.state;
let { renamedAsset } = this.state;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
renamedAsset = renamedAsset || { key: null };
const files = folderStructure.files.map((f) => ({ ...f, icon: FileIcons.getIcon(f.name) }));
const feedbacks = new Feedbacks(null, feedbacksProp || []).getTypesByFileKey();
return (
<div
className={`
${styles['file-switcher']}
${readOnly ? styles['is--read-only'] : ''}
${isCollapsed ? styles['is--collapsed'] : ''}`}
ref={this.fileSwitcherRef}
style={{ width: `${INITIAL_WIDTH_PX}px`, minWidth: `${MIN_WIDTH_PX}px`, maxHeight: `${maxHeight}px` }}
>
{isCollapsed && (
<Button onClick={this.toggleCollapse} title="Browse files" className={`${styles['toggle-button']}`}>
<img src={FileIcons.getIconUrl('svg')} alt="File SVG icon" />
</Button>
)}
<div className={styles.controls}>
<div>
{!readOnly && (
<Button onClick={() => this.newFile()} title="New file">
<FontAwesomeIcon icon={faPlus} width="18" height="18" />
</Button>
)}
{!readOnly && (
<Button onClick={() => this.newFolder()} title="New folder">
<FontAwesomeIcon icon={faFolderPlus} width="18" height="18" />
</Button>
)}
<Button
onClick={this.onDownload}
loading={isGeneratingArchive}
title="Download to device"
>
<FontAwesomeIcon icon={faCloudDownloadAlt} width="18" height="18" />
</Button>
</div>
<Button onClick={this.toggleCollapse} title="Collapse panel">
<FontAwesomeIcon icon={faChevronLeft} width="18" height="18" />
</Button>
</div>
{/* <Scroll className="is--fliped-x"> */}
<div>
{folderStructure.folders.map((folder, index) => (
<FolderBrowse
key={folder.key}
folderKey={folder.key}
folderStructure={folderStructure}
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
feedbacks={feedbacks}
readOnly={readOnly}
selectFile={this.selectFile}
selectedFileKey={selectedFileKey}
renamedAsset={renamedAsset}
ctxMenuKey={ctxMenuKey}
openMenu={this.openMenu}
enterEditMode={this.enterEditMode}
onRename={this.onRename}
saveAsset={this.saveAsset}
/>
))}
<FilesList
readOnly={readOnly}
files={files}
feedbacks={feedbacks}
selectedFileKey={selectedFileKey}
ctxMenuKey={ctxMenuKey}
selectFile={this.selectFile}
enterEditMode={this.enterEditMode}
openMenu={this.openMenu}
renamedAsset={renamedAsset}
onRename={this.onRename}
saveAsset={this.saveAsset}
/>
</div>
{/* </Scroll> */}
<List className={styles['dropdown-menu']} style={dropdownStyle}>
{ctxMenuType === 'FOLDER' && (
<>
<li>
<Button onClick={() => this.newFile(ctxMenuKey)}>
<FontAwesomeIcon icon={faFileAlt} width="18" height="18" />
New file
</Button>
</li>
<li>
<Button onClick={() => this.newFolder(ctxMenuKey)}>
<FontAwesomeIcon icon={faFolder} width="18" height="18" />
New folder
</Button>
</li>
</>
)}
<li>
<Button onClick={() => this.enterEditMode(ctxMenuKey)}>
<FontAwesomeIcon icon={faEdit} width="18" height="18" />
Rename
</Button>
</li>
<li>
<Button onClick={() => this.deleteFileOrFolder(ctxMenuKey)}>
<FontAwesomeIcon icon={faTrashAlt} width="18" height="18" />
Delete
</Button>
</li>
</List>
<HResizable onResize={this.onResize} />
</div>
);
}
Example #3
| Source File: ProjectItem.tsx From argo-react with MIT License | 4 votes |
|
ProjectItem: React.FC<IProjectItemProps> = ({
type,
projectName,
latestDeployment,
domains,
subdomains,
hnsDomains,
hnsSubdomains,
ensDomains,
githubUrl,
updateTime,
repo,
index,
}) => {
const history = useHistory();
const { setSelectedProject } = useContext<IActionModel>(ActionContext);
const { selectedOrg } = useContext<IStateModel>(StateContext);
let displayGithubRepo = "";
if (githubUrl) {
displayGithubRepo = githubUrl.substring(19, githubUrl.length - 4);
}
const isDomainOrSubPresent =
(domains && domains.length > 0) ||
(subdomains && subdomains.length > 0) ||
(hnsDomains && hnsDomains.length > 0) ||
(hnsSubdomains && hnsSubdomains.length > 0) ||
(ensDomains && ensDomains.length > 0);
const domainsAttached = [
...(domains || []),
...(subdomains || []),
...(hnsDomains || []),
...(hnsSubdomains || []),
...(ensDomains || []),
];
return (
<div className="project-item" key={index}>
{type === "filled" && (
<>
<div className="project-item-header">
<h3
className="project-item-title"
onClick={(e) => {
setSelectedProject(null);
history.push(`/org/${selectedOrg?._id}/sites/${repo?._id}/overview`);
}}
>
{projectName}
</h3>
{(latestDeployment || isDomainOrSubPresent) && (
<button
type="button"
className="project-item-visit-button"
onClick={(e) =>
window.open(
`${
domainsAttached.length > 0
? `${
domainsAttached[0].type.indexOf("handshake") !== -1
? "http"
: "https"
}://${domainsAttached[0].name}`
: latestDeployment
}`,
"_blank",
"noopener",
)
}
>
Visit
</button>
)}
</div>
{isDomainOrSubPresent && (
<div className="project-item-body less-bottom-margin">
<span className="project-item-live-key">Site live at</span>
{domains &&
domains.map((d: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${d.name}`}
className="project-item-live-value"
target="_blank"
rel="noopener noreferrer"
key={i}
>
{d.name}
</a>
{(i !== a.length - 1 ||
(subdomains && subdomains.length > 0) ||
(hnsDomains && hnsDomains.length > 0) ||
(hnsSubdomains && hnsSubdomains.length > 0) ||
(ensDomains && ensDomains.length > 0)) && (
<span className="comma-sep">,</span>
)}
</>
))}
{subdomains &&
subdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`https://${s.name}`}
className="project-item-live-value"
target="_blank"
rel="noopener noreferrer"
key={i}
>
{s.name}
</a>
{(i !== a.length - 1 ||
(hnsDomains && hnsDomains.length > 0) ||
(hnsSubdomains && hnsSubdomains.length > 0) ||
(ensDomains && ensDomains.length > 0)) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsDomains &&
hnsDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="project-item-live-value"
target="_blank"
rel="noopener noreferrer"
key={i}
>
{s.name}
</a>
{(i !== a.length - 1 ||
(hnsSubdomains && hnsSubdomains.length > 0) ||
(ensDomains && ensDomains.length > 0)) && (
<span className="comma-sep">,</span>
)}
</>
))}
{hnsSubdomains &&
hnsSubdomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="project-item-live-value"
target="_blank"
rel="noopener noreferrer"
key={i}
>
{s.name}
</a>
{(i !== a.length - 1 ||
(ensDomains && ensDomains.length > 0)) && (
<span className="comma-sep">,</span>
)}
</>
))}
{ensDomains &&
ensDomains.map((s: IDomain, i: number, a: IDomain[]) => (
<>
<a
href={`http://${s.name}`}
className="project-item-live-value"
target="_blank"
rel="noopener noreferrer"
key={i}
>
{s.name}
</a>
{i !== a.length - 1 && <span className="comma-sep">,</span>}
</>
))}
</div>
)}
<div className="project-item-body">
<span className="project-item-live-key">
{latestDeployment ? "Latest deployed at" : ""}
</span>
<a
href={`${latestDeployment}`}
target="_blank"
rel="noopener noreferrer"
className="project-item-live-value"
>
{latestDeployment}
</a>
</div>
<div className="project-item-footer">
<div className="project-item-git-integration">
<FontAwesomeIcon icon={faGithub}></FontAwesomeIcon>
<a
href={`${githubUrl}`}
target="_blank"
rel="noopener noreferrer"
className="git-name"
>
{displayGithubRepo}
</a>
</div>
<div className="project-item-updated-time">Updated {updateTime}</div>
</div>
</>
)}
{type === "skeleton" && (
<>
<div className="project-item-header">
<h3 className="project-item-title">
<Skeleton width={180} duration={2} />
</h3>
</div>
<div className="project-item-body">
<span className="project-item-live-key">
<Skeleton width={200} duration={2} />
</span>
<span className="project-item-live-value">
<Skeleton width={300} duration={2} />
</span>
</div>
<div className="project-item-footer">
<div className="project-item-git-integration">
<Skeleton width={150} duration={2} />
</div>
<div className="project-item-updated-time">
<Skeleton width={120} duration={2} />
</div>
</div>
</>
)}
{type === "empty" && (
<div
className="project-item-empty"
onClick={(e) => history.push("/deploy/new")}
>
<div className="project-item-content">
<div className="project-item-icon">
<FontAwesomeIcon icon={faFolderPlus}></FontAwesomeIcon>
</div>
<div className="project-item-icon-title">Import Project</div>
</div>
</div>
)}
</div>
);
}
