From b51734f180b779e22808f5e39e55569bb4f862b3 Mon Sep 17 00:00:00 2001 From: Jamie Date: Thu, 28 Oct 2021 07:43:37 -0700 Subject: [PATCH] broken list --- package.json | 4 + src-tauri/src/filesystem/retrieve.rs | 5 ++ src/components/file/FileList.tsx | 122 ++++++++++++++------------ src/components/file/Sidebar.tsx | 52 ++++++++--- src/components/layout/TopBar.tsx | 3 +- src/components/os/trafficLights.tsx | 2 +- src/components/primative/Button.tsx | 6 +- src/components/primative/Checkbox.tsx | 3 +- src/components/primative/Dropdown.tsx | 7 +- src/components/primative/Input.tsx | 6 +- src/components/primative/Toggle.tsx | 2 +- src/style.css | 9 ++ yarn-error.log | 40 +++++++-- yarn.lock | 46 ++++++++-- 14 files changed, 207 insertions(+), 100 deletions(-) diff --git a/package.json b/package.json index 46fce106e..e4f2a1c2a 100644 --- a/package.json +++ b/package.json @@ -11,6 +11,8 @@ "@types/react": "^17.0.18", "@types/react-dom": "^17.0.9", "@types/react-router-dom": "^5.3.1", + "@types/react-virtualized-auto-sizer": "^1.0.1", + "@types/react-window": "^1.8.5", "@types/tailwindcss": "^2.2.1", "concurrently": "^6.2.1", "prettier": "^2.3.2", @@ -49,6 +51,8 @@ "react-router-dom": "^5.2.0", "react-spline": "^1.2.1", "react-virtualized": "^9.22.3", + "react-virtualized-auto-sizer": "^1.0.6", + "react-window": "^1.8.6", "rooks": "^5.7.1", "tailwindcss": "^2.2.16", "vite": "^2.4.4", diff --git a/src-tauri/src/filesystem/retrieve.rs b/src-tauri/src/filesystem/retrieve.rs index 182a018fd..a9c72b615 100644 --- a/src-tauri/src/filesystem/retrieve.rs +++ b/src-tauri/src/filesystem/retrieve.rs @@ -39,3 +39,8 @@ pub async fn get_dir_with_contents(path: &str) -> Result { contents: files, }) } + +pub async fn get_directory(path: &str) { + // 1. search db for path + // 2. get directory shallow +} diff --git a/src/components/file/FileList.tsx b/src/components/file/FileList.tsx index 0d95833d6..4aae83eba 100644 --- a/src/components/file/FileList.tsx +++ b/src/components/file/FileList.tsx @@ -1,21 +1,22 @@ -import { DocumentIcon, DotsVerticalIcon, FilmIcon, FolderIcon } from '@heroicons/react/solid'; -import clsx from 'clsx'; -import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'; -import { IFile } from '../../types'; -import byteSize from 'pretty-bytes'; -import { useKey, useOnWindowResize, useWindowSize } from 'rooks'; +import { DotsVerticalIcon } from '@heroicons/react/solid'; import { invoke } from '@tauri-apps/api'; +import { convertFileSrc } from '@tauri-apps/api/tauri'; +import clsx from 'clsx'; +import byteSize from 'pretty-bytes'; +import React, { forwardRef, useEffect, useMemo, useRef } from 'react'; +import AutoSizer from 'react-virtualized-auto-sizer'; +import { FixedSizeList as List } from 'react-window'; +import { useKey, useWindowSize } from 'rooks'; +import { DirectoryResponse } from '../../screens/Explorer'; +// import { List, ListRowRenderer } from 'react-virtualized'; +import { useAppState } from '../../store/app'; import { useCurrentDir, useExplorerStore, useFile, - useSelectedFile, useSelectedFileIndex } from '../../store/explorer'; -import { DirectoryResponse } from '../../screens/Explorer'; -import { List, ListRowRenderer } from 'react-virtualized'; -import { useAppState } from '../../store/app'; -import { convertFileSrc } from '@tauri-apps/api/tauri'; +import { IFile } from '../../types'; interface IColumn { column: string; @@ -23,6 +24,8 @@ interface IColumn { width: number; } +const PADDING_SIZE = 130; + // Function ensure no types are loss, but guarantees that they are Column[] function ensureIsColumns(data: T) { return data; @@ -53,7 +56,7 @@ export const FileList: React.FC<{}> = (props) => { const seletedRowIndex = useSelectedFileIndex(currentDir?.id as number); useEffect(() => { - if (seletedRowIndex != null) VList.current?.scrollToRow(seletedRowIndex); + if (seletedRowIndex != null) VList.current?.scrollToItem(seletedRowIndex); }, [seletedRowIndex]); useKey('ArrowUp', (e) => { @@ -68,42 +71,18 @@ export const FileList: React.FC<{}> = (props) => { explorer.selectFile(explorer.currentDir as number, explorer.selectedFile.id, 'below'); }); - // function isRowOutOfView(rowHeight: number, rowIndex: number) { - // const scrollTop = scrollContainer.current?.scrollTop || 0; - // } - - const rowRenderer: ListRowRenderer = ({ - index, // Index of row - isScrolling, // The List is currently being scrolled - isVisible, // This row is visible within the List (eg it is not an overscanned row) - key, // Unique key within array of rendered rows - parent, // Reference to the parent List (instance) - style // Style object to be applied to row (to position it); - // This must be passed through to the rendered row element. - }) => { - const row = currentDir?.children?.[index] as IFile; - - // If row content is complex, consider rendering a light-weight placeholder while scrolling. - const content = ( - - ); - return ( -
- {content} -
- ); - }; - - const width = (tableContainer.current?.getBoundingClientRect().width || 0) - 30; - const height = (tableContainer.current?.getBoundingClientRect().height || 0) - 140; - - return useMemo( - () => ( -
-

{currentDir?.name}

+ const listInnerElement = forwardRef(({ style, ...rest }, ref) => ( +
+
+

{currentDir?.name}

{columns.map((col) => ( @@ -118,15 +97,44 @@ export const FileList: React.FC<{}> = (props) => { ))}
- +
+ {rest.children} +
+ )); + + const Row = ({ index, key, style }: any) => { + const row = currentDir?.children?.[index] as IFile; + + return ( +
+ +
+ ); + }; + + return useMemo( + () => ( +
+ + {({ width, height }) => ( + + {Row} + + )} +
), [size.innerWidth, currentDir?.id, tableContainer.current] diff --git a/src/components/file/Sidebar.tsx b/src/components/file/Sidebar.tsx index 2bbbebf2a..2171b6774 100644 --- a/src/components/file/Sidebar.tsx +++ b/src/components/file/Sidebar.tsx @@ -1,11 +1,16 @@ import { + BookOpenIcon, CogIcon, CollectionIcon, CubeTransparentIcon, DatabaseIcon, + FolderIcon, + LibraryIcon, PhotographIcon, + PlusIcon, ServerIcon } from '@heroicons/react/solid'; +import clsx from 'clsx'; import { Book, Camera, @@ -19,11 +24,13 @@ import { HardDrives, MonitorPlay, Package, - Planet + Planet, + Plus } from 'phosphor-react'; import React, { useEffect } from 'react'; import { NavLink, NavLinkProps } from 'react-router-dom'; import { useLocations } from '../../store/locations'; +import { Button } from '../primative'; import { Dropdown } from '../primative/Dropdown'; import { DefaultProps } from '../primative/types'; @@ -39,15 +46,20 @@ interface SidebarProps extends DefaultProps {} const SidebarLink = (props: NavLinkProps) => ( {props.children} ); -const Icon = ({ component: Icon }: any) => ; +const Icon = ({ component: Icon, ...props }: any) => ( + +); const Heading: React.FC<{}> = ({ children }) => (
{children}
@@ -59,7 +71,7 @@ export const Sidebar: React.FC = (props) => { console.log({ locations }); return ( -
+
= (props) => { }} // buttonIcon={} buttonText="Jamie's Library" - items={[[{ name: `Jamie's Library` }, { name: 'Subto' }], [{ name: 'Add Library' }]]} + items={[ + [{ name: `Jamie's Library`, selected: true }, { name: 'Subto' }], + [ + { name: 'Library Settings', icon: CogIcon }, + { name: 'Add Library', icon: PlusIcon } + ] + ]} />
@@ -90,12 +108,22 @@ export const Sidebar: React.FC = (props) => { Locations {locations.map((location, index) => { return ( - - - {location.name} -
- {location.is_removable && } - +
+ + + {location.name} +
+ {location.is_removable && ( + + )} + +
); })}
diff --git a/src/components/layout/TopBar.tsx b/src/components/layout/TopBar.tsx index 8c23b6d31..cb47fe2dc 100644 --- a/src/components/layout/TopBar.tsx +++ b/src/components/layout/TopBar.tsx @@ -18,7 +18,6 @@ import { FolderPlus, HouseSimple, Key, - List, SquaresFour, Tag, TerminalWindow @@ -66,7 +65,7 @@ export const TopBar: React.FC = (props) => { <>
= (props) => { return (
= ({ loading, ...props }) => {