rmorawski/standardnotes-app-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(dev-only): files table view

Browse Source
This commit is contained in:
Aman Harwara
2022-12-24 16:48:55 +05:30
parent 7e7c5e14ab
commit 77cb6e7891
2 changed files with 7 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/web/src/javascripts/Components/FilesTableView/FilesTableView.tsx
View File

@@ -154,6 +154,8 @@ const FilesTableView = ({ application, filesController, featuresController, link
const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | undefined>(undefined) const [contextMenuPosition, setContextMenuPosition] = useState<{ x: number; y: number } | undefined>(undefined)
const isSmallBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm) const isSmallBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.sm)
const isMediumBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.md)
const isLargeBreakpoint = useMediaQuery(MutuallyExclusiveMediaQueryBreakpoints.lg)
const columnDefs: TableColumn<FileItem>[] = useMemo( const columnDefs: TableColumn<FileItem>[] = useMemo(
() => [ () => [
@@ -196,7 +198,7 @@ const FilesTableView = ({ application, filesController, featuresController, link
}, },
{ {
name: 'Attached to', name: 'Attached to',
hidden: isSmallBreakpoint, hidden: isSmallBreakpoint || isMediumBreakpoint || isLargeBreakpoint,
cell: (file) => { cell: (file) => {
const links = [ const links = [
...naturalSort(application.items.referencesForItem(file), 'title').map((item) => ...naturalSort(application.items.referencesForItem(file), 'title').map((item) =>
@@ -229,7 +231,7 @@ const FilesTableView = ({ application, filesController, featuresController, link
}, },
}, },
], ],
[application.items, isSmallBreakpoint], [application.items, isLargeBreakpoint, isMediumBreakpoint, isSmallBreakpoint],
) )
const getRowId = useCallback((file: FileItem) => file.uuid, []) const getRowId = useCallback((file: FileItem) => file.uuid, [])

6
packages/web/src/javascripts/Components/Table/Table.tsx
View File

@@ -46,8 +46,8 @@ function TableRow<Data>({
key={index} key={index}
className={classNames( className={classNames(
'relative overflow-hidden border-b border-border py-3 px-3', 'relative overflow-hidden border-b border-border py-3 px-3',
index === 0 && 'ml-3', /* index === 0 && 'ml-3',
index === array.length - 1 && 'mr-3', index === array.length - 1 && 'mr-3', */
row.isSelected && 'bg-info-backdrop', row.isSelected && 'bg-info-backdrop',
canSelectRows && 'cursor-pointer', canSelectRows && 'cursor-pointer',
canSelectRows && isHovered && 'bg-contrast', canSelectRows && isHovered && 'bg-contrast',
@@ -95,7 +95,7 @@ function Table<Data>({ table }: { table: Table<Data> }) {
</div> </div>
)} )}
<div <div
className="relative grid w-full overflow-x-hidden" className="relative grid w-full overflow-x-hidden px-3"
role="grid" role="grid"
aria-colcount={colCount} aria-colcount={colCount}
aria-rowcount={rowCount} aria-rowcount={rowCount}