chore: small changes

src/file-list/README.md

@@ -11,17 +11,20 @@ https://luna.liriliri.io/?path=/story/file-list
 Add the following script and style to your page.
 
 ```html
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-data-grid/luna-data-grid.css" />
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-file-list/luna-file-list.css" />
+<script src="//cdn.jsdelivr.net/npm/luna-data-grid/luna-data-grid.js"></script>
 <script src="//cdn.jsdelivr.net/npm/luna-file-list/luna-file-list.js"></script>
 ```
 
 You can also get it on npm.
 
 ```bash
-npm install luna-file-list --save
+npm install luna-file-list luna-data-grid --save
 ```
 
 ```javascript
+import 'luna-data-grid/luna-data-grid.css'
 import 'luna-file-list/luna-file-list.css'
 import LunaFileList from 'luna-file-list'
 ```
@@ -30,3 +33,13 @@ import LunaFileList from 'luna-file-list'
 
 * directory(string): Current directory.
 * files(IFile[]): File list.
+* listView(boolean): Show files in list view.
+
+## Types
+
+### IFile
+
+* ctime(number): Create time.
+* directory(boolean): Whether file is a directory.
+* name(string): File name.
+* size(number): File size.

src/file-list/index.ts

@@ -1,32 +1,84 @@
+import stripIndent from 'licia/stripIndent'
+import $ from 'licia/$'
 import Component, { IComponentOptions } from '../share/Component'
+import LunaDataGrid from 'luna-data-grid'
 import { exportCjs } from '../share/util'
 
 /** IOptions */
 export interface IOptions extends IComponentOptions {
   /** File list. */
   files?: IFile[]
+  /** Show files in list view. */
+  listView?: boolean
   /** Current directory. */
   directory?: string
 }
 
+/** IFile */
 export interface IFile {
+  /** File name. */
   name: string
-  thumbnail?: string
+  /** Create time. */
+  ctime: number
+  /** File size. */
   size?: number
+  /** Whether file is a directory. */
   directory: boolean
 }
 
 /**
  * List files in the directory.
  */
 export default class FileList extends Component<IOptions> {
+  private $iconView: $.$
+  private listView: LunaDataGrid
   constructor(container: HTMLElement, options: IOptions = {}) {
     super(container, { compName: 'file-list' }, options)
 
     this.initOptions(options, {
       files: [],
+      listView: false,
       directory: '',
     })
+
+    this.initTpl()
+    this.$iconView = this.find('.icon-view')
+
+    const listViewContainer = this.find('.list-view').get(0) as HTMLElement
+    this.listView = new LunaDataGrid(listViewContainer, {
+      columns: [
+        {
+          id: 'name',
+          title: 'Name',
+          weight: 20,
+        },
+      ],
+    })
+
+    this.render()
+  }
+  private initTpl() {
+    this.$container.html(
+      this.c(stripIndent`
+        <div class="icon-view"></div>
+        <div class="list-view"></div>
+      `)
+    )
+  }
+  private render() {
+    const { files, listView } = this.options
+
+    if (listView) {
+      this.renderListView(files)
+    } else {
+      this.renderIconView(files)
+    }
+  }
+  private renderIconView(files: IFile[]) {
+    this.$iconView.html(JSON.stringify(files))
+  }
+  private renderListView(files: IFile[]) {
+    this.listView.setData([])
   }
 }
 

src/file-list/package.json

@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "description": "List files in the directory",
   "luna": {
-    "test": false
+    "test": false,
+    "dependencies": [
+      "data-grid"
+    ]
   }
 }

src/file-list/story.js

@@ -2,11 +2,18 @@ import 'luna-file-list.css'
 import FileList from 'luna-file-list.js'
 import readme from './README.md'
 import story from '../share/story'
+import { boolean } from '@storybook/addon-knobs'
+import files from './files.json'
 
 const def = story(
   'file-list',
   (container) => {
-    const fileList = new FileList(container)
+    const listView = boolean('List View', false)
+
+    const fileList = new FileList(container, {
+      listView,
+      files,
+    })
 
     return fileList
   },