release(file-list): v0.5.6

Author: surunzi

src/file-list/README.md

@@ -11,22 +11,28 @@ 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-menu/luna-menu.css" />
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-data-grid/luna-data-grid.css" />
+<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-drag-selector/luna-drag-selector.css" />
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-icon-list/luna-icon-list.css" />
 <link rel="stylesheet" href="//cdn.jsdelivr.net/npm/luna-file-list/luna-file-list.css" />
+<script src="//cdn.jsdelivr.net/npm/luna-menu/luna-menu.js"></script>
 <script src="//cdn.jsdelivr.net/npm/luna-data-grid/luna-data-grid.js"></script>
+<script src="//cdn.jsdelivr.net/npm/luna-drag-selector/luna-drag-selector.js"></script>
 <script src="//cdn.jsdelivr.net/npm/luna-icon-list/luna-icon-list.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 luna-icon-list luna-data-grid --save
+npm install luna-file-list luna-icon-list luna-drag-selector luna-data-grid luna-menu --save
 ```
 
 ```javascript
+import 'luna-menu/luna-menu.css'
 import 'luna-data-grid/luna-data-grid.css'
+import 'luna-drag-selector/luna-drag-selector.css'
 import 'luna-icon-list/luna-icon-list.css'
 import 'luna-file-list/luna-file-list.css'
 import LunaFileList from 'luna-file-list'
@@ -55,6 +61,7 @@ const fileList = new LunaFileList(container, {
 ### IFile
 
 * directory(boolean): Whether file is a directory.
+* mime(string): MIME type.
 * mode(string | number): File mode.
 * mtime(Date): Modified timestamp.
 * name(string): File name.

src/file-list/package.json

@@ -1,6 +1,6 @@
 {
   "name": "file-list",
-  "version": "0.5.5",
+  "version": "0.5.6",
   "description": "List files in the directory",
   "luna": {
     "react": true,

src/file-list/react.tsx

@@ -14,52 +14,52 @@ interface IFileListProps extends IOptions {
 }
 
 const LunaFileList: FC<IFileListProps> = (props) => {
-  const fileListRef = useRef<HTMLDivElement>(null)
-  const fileList = useRef<FileList>()
+  const containerRef = useRef<HTMLDivElement>(null)
+  const fileListRef = useRef<FileList>()
   const prevProps = usePrevious(props)
 
   useEffect(() => {
-    fileList.current = new FileList(fileListRef.current!, {
+    fileListRef.current = new FileList(containerRef.current!, {
       files: props.files,
       listView: props.listView,
       filter: props.filter,
       columns: props.columns,
       theme: props.theme,
     })
 
-    return () => fileList.current?.destroy()
+    return () => fileListRef.current?.destroy()
   }, [])
 
-  useEvent<FileList>(fileList, 'select', prevProps?.onSelect, props.onSelect)
+  useEvent<FileList>(fileListRef, 'select', prevProps?.onSelect, props.onSelect)
   useEvent<FileList>(
-    fileList,
+    fileListRef,
     'deselect',
     prevProps?.onDeselect,
     props.onDeselect
   )
-  useEvent<FileList>(fileList, 'click', prevProps?.onClick, props.onClick)
+  useEvent<FileList>(fileListRef, 'click', prevProps?.onClick, props.onClick)
   useEvent<FileList>(
-    fileList,
+    fileListRef,
     'dblclick',
     prevProps?.onDoubleClick,
     props.onDoubleClick
   )
   useEvent<FileList>(
-    fileList,
+    fileListRef,
     'contextmenu',
     prevProps?.onContextMenu,
     props.onContextMenu
   )
 
   each(['theme', 'filter', 'files', 'listView'], (key: keyof IOptions) => {
-    useOption<FileList, IOptions>(fileList, key, props[key])
+    useOption<FileList, IOptions>(fileListRef, key, props[key])
   })
 
   return (
     <div
       className={props.className || ''}
       style={props.style}
-      ref={fileListRef}
+      ref={containerRef}
     />
   )
 }