added react icons
This commit is contained in:
parent
deed778cc7
commit
adeddc7994
@ -17,6 +17,7 @@
|
||||
"react": "^17.0.2",
|
||||
"react-contexify": "^5.0.0",
|
||||
"react-dom": "^17.0.2",
|
||||
"react-icons": "^4.2.0",
|
||||
"react-scripts": "4.0.3",
|
||||
"typescript": "^4.1.2",
|
||||
"web-vitals": "^1.0.1"
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React, { useRef } from "react"
|
||||
import { useEffect } from "react"
|
||||
import { useState } from "react"
|
||||
import { MdCreateNewFolder } from "react-icons/md"
|
||||
|
||||
interface Props {
|
||||
onPressed?: (dirName: string)=>void
|
||||
@ -26,7 +27,7 @@ const CreateDirButton: React.FC<Props> = (props) => {
|
||||
|
||||
}}
|
||||
>
|
||||
Create Dir
|
||||
<MdCreateNewFolder size="40"/>
|
||||
</button>
|
||||
<div className={`${!show?"hidden":""} flex`}>
|
||||
<form
|
||||
|
@ -1,6 +1,7 @@
|
||||
import React from "react"
|
||||
import PropTypes from "prop-types"
|
||||
import { Directory } from "../generated/graphql"
|
||||
import { MdFolderOpen } from "react-icons/md"
|
||||
|
||||
interface Props {
|
||||
dir: Directory
|
||||
@ -10,7 +11,7 @@ const DirectoryElement: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<>
|
||||
<td>
|
||||
📂 {props.dir.name}
|
||||
<MdFolderOpen className="inline"/> {props.dir.name}
|
||||
</td>
|
||||
<td>
|
||||
</td>
|
||||
|
@ -105,18 +105,26 @@ const FileBrowser: React.FC = () => {
|
||||
await handleDrop(files)
|
||||
}}
|
||||
>
|
||||
<FileUploadButton
|
||||
onUpload={(files)=>handleDrop(files)}
|
||||
/>
|
||||
<div className="flex justify-between">
|
||||
<Breadcrum path={path} onDirClick={(newPath)=>{
|
||||
setPath(newPath)
|
||||
}}/>
|
||||
<div className="ml-auto">
|
||||
<CreateDirButton
|
||||
onPressed={async (dirName)=>{
|
||||
await createDirMutation({variables:{path:dirName}})
|
||||
refetchDir()
|
||||
}}
|
||||
/>
|
||||
<Breadcrum path={path} onDirClick={(newPath)=>{
|
||||
setPath(newPath)
|
||||
}}/>
|
||||
</div>
|
||||
<div>
|
||||
<FileUploadButton
|
||||
onUpload={(files)=>handleDrop(files)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{loading &&
|
||||
<div>Loading...</div> // TODO: center
|
||||
|
@ -3,6 +3,7 @@ import PropTypes from "prop-types"
|
||||
import { File } from "../generated/graphql"
|
||||
import sizeToReadable from "../functions/sizeToReadable"
|
||||
import dateFormat from "../functions/dateFomat"
|
||||
import { FaRegFileAlt } from "react-icons/fa"
|
||||
|
||||
interface Props {
|
||||
file: File
|
||||
@ -12,7 +13,7 @@ const FileElement: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<>
|
||||
<td>
|
||||
📄 {props.file.name}
|
||||
<FaRegFileAlt className="inline" /> {props.file.name}
|
||||
</td>
|
||||
<td>
|
||||
{dateFormat(props.file.lastModified)}
|
||||
|
@ -1,5 +1,6 @@
|
||||
import React from "react"
|
||||
import { useRef } from "react"
|
||||
import { MdFileUpload } from "react-icons/md"
|
||||
|
||||
interface Props {
|
||||
onUpload?: (files: FileList)=>void
|
||||
@ -12,7 +13,7 @@ const FileUploadButton: React.FC<Props> = (props) => {
|
||||
return (
|
||||
<>
|
||||
<button onClick={()=>inputRef.current?.click()} >
|
||||
Upload files
|
||||
<MdFileUpload size="40"/>
|
||||
</button>
|
||||
<input type="file" multiple className="hidden" ref={inputRef} onInput={()=>{
|
||||
if (inputRef.current && inputRef.current.files){
|
||||
|
10
yarn.lock
10
yarn.lock
@ -11955,6 +11955,11 @@ react-error-overlay@^6.0.9:
|
||||
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
|
||||
integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
|
||||
|
||||
react-icons@^4.2.0:
|
||||
version "4.2.0"
|
||||
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
|
||||
integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
|
||||
|
||||
react-is@^16.7.0, react-is@^16.8.1:
|
||||
version "16.13.1"
|
||||
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
|
||||
@ -13169,11 +13174,6 @@ spdy@^4.0.2:
|
||||
select-hose "^2.0.0"
|
||||
spdy-transport "^3.0.0"
|
||||
|
||||
spectre.css@^0.5.9:
|
||||
version "0.5.9"
|
||||
resolved "https://registry.yarnpkg.com/spectre.css/-/spectre.css-0.5.9.tgz#86c732d093036d9fdc0a2ba570f005e4023ae6ca"
|
||||
integrity sha512-9jUqwZmCnvflrxFGcK+ize43TvjwDjqMwZPVubEtSIHzvinH0TBUESm1LcOJx3Ur7bdPaeOHQIjOqBl1Y5kLFw==
|
||||
|
||||
split-on-first@^1.0.0:
|
||||
version "1.1.0"
|
||||
resolved "https://registry.npmjs.org/split-on-first/-/split-on-first-1.1.0.tgz"
|
||||
|
Loading…
Reference in New Issue
Block a user