feat: add FileSearch UI

HOUSHENGREN · May 3, 2023 · cc67a95 · cc67a95
1 parent 3244424
commit cc67a95
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 11 deletions.
diff --git a/src/App.js b/src/App.js
@@ -1,16 +1,23 @@
 // import logo from './logo.svg';
 import FileSearch from './components/FileSearch';
+import FileList from './components/FileList'
+import defaultFiles from './utils/defaultFiles';
 import './App.css';
 import 'bootstrap/dist/css/bootstrap.min.css'
 
 function App() {
   return (
     <div className="App container-fluid">
       <div className='row'>
-        <div className='col-3 bg-danger left-pane'>
-          <FileSearch onFileSearch={() => console.log(666)} title='My document'>2</FileSearch>
+        <div className='col-6 left-pane'>
+          <FileSearch onFileSearch={(value) => console.log(666, value)} title='My document'></FileSearch>
+          <FileList 
+            files={defaultFiles}
+            onFileClick={(id) => {console.log('777cli', id)}}
+            onFileDelete={(id) => {console.log('777delete', id)}}
+          ></FileList>
         </div>
-        <div className='col-9 left-pane'>55</div>
+        <div className='col-6 left-pane'>55</div>
       </div>
     </div>
   );

diff --git a/src/components/FileList.js b/src/components/FileList.js
@@ -2,15 +2,52 @@ import { useState, useEffect } from "react"
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faEdit, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { faMarkdown } from '@fortawesome/free-brands-svg-icons'
+import propTypes from 'prop-types'
+
+const FileList = ({files, onFileClick, onSaveEdit, onFileDelete}) => {
 
-const FileList = () => {
     return (
-        <ul class="list-group">
-            <li class="list-group-item active" aria-current="true">An active item</li>
-            <li class="list-group-item">A second item</li>
-            <li class="list-group-item">A third item</li>
-            <li class="list-group-item">A fourth item</li>
-            <li class="list-group-item">And a fifth one</li>
+        <ul className="list-group list-group-flush file-list">
+            {
+                files.map(file => (
+                    <li 
+                        className="list-group-item bg-light row d-flex align-items-center file-item"
+                        key={file.id}
+                    >
+                        <span className="col-2">
+                            <FontAwesomeIcon icon={faMarkdown}></FontAwesomeIcon>
+                        </span>
+                        <span className="col-8" onClick={() => { onFileClick(file.id) }}>{file.title}</span>
+                        <button 
+                            type="button"
+                            className="icon-button col-1"
+                            // onClick={() => { onSaveEdit(file.id) }}
+                        >
+                            <FontAwesomeIcon title="编辑" size="lg" icon={faEdit} />
+                        </button>
+                        <button 
+                            type="button"
+                            className="icon-button col-1"
+                            onClick={() => { onFileDelete(file.id) }}
+                        >
+                            <FontAwesomeIcon title="删除" size="lg" icon={faTrash} />
+                        </button>
+                    </li>
+                ))
+            }
         </ul>
     )
-}
+}
+
+FileList.propTypes = {
+    files: propTypes.array,
+    onFileClick: propTypes.func,
+    onFileDelete: propTypes.func,
+    // onSaveEdit: propTypes.func
+}
+
+FileList.defaultProps = {
+    files: []
+}
+
+export default FileList
diff --git a/src/utils/defaultFiles.js b/src/utils/defaultFiles.js
@@ -0,0 +1,28 @@
+const defaultFiles = [
+    {
+        id: 111,
+        title: 'file222',
+        body: 'should be careful',
+        createAt: 3215465454
+    },
+    {
+        id: 121,
+        title: 'file25',
+        body: '# should be honesty',
+        createAt: 32154654465
+    },
+    {
+        id: 141,
+        title: 'file272',
+        body: 'should be funny',
+        createAt: 3215465454786
+    },
+    {
+        id: 1145,
+        title: 'file782',
+        body: '## should be happy',
+        createAt: 321546547896
+    }
+]
+
+export default defaultFiles