rock-n-code/my-files-sample
rock-n-code/my-files-sample
1
0
Fork 0
Code Releases Wiki Activity

Improved the FolderItem and the DocumentItem components to support the item selection.

Browse Source
This commit is contained in:
Javier Cicchelli 2022-12-14 01:43:31 +01:00
parent 98db94d180
commit 0ecc4810fa
3 changed files with 69 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
Modules/Sources/Browse/UI/Components/DocumentItem.swift
View File

@ -13,33 +13,38 @@ struct DocumentItem: View {
// MARK: Properties
let item: FileSystemItem
let select: ItemIdClosure
let download: ItemIdClosure
let delete: ItemIdClosure
// MARK: Body
var body: some View {
HStack(spacing: 16) {
Image.document
.icon(size: 32)
.foregroundColor(.red)
VStack(spacing: 8) {
Text(item.name)
.itemName()
Button {
select(item.id)
} label: {
HStack(spacing: 16) {
Image.document
.icon(size: 32)
.foregroundColor(.red)
HStack {
Text("lastModified")
VStack(spacing: 8) {
Text(item.name)
.itemName()
Spacer()
Text("fileSize")
HStack {
Text("lastModified")
Spacer()
Text("fileSize")
}
.font(.subheadline)
.foregroundColor(.secondary)
}
.font(.subheadline)
.foregroundColor(.secondary)
}
.padding(.vertical, 4)
}
.padding(.vertical, 4)
.swipeActions(
edge: .trailing,
allowsFullSwipe: true
@ -57,7 +62,7 @@ struct DocumentItem: View {
}
}
.tint(.red)
Button {
download(item.id)
} label: {
@ -73,7 +78,7 @@ struct DocumentItem: View {
.tint(.orange)
}
}
}
// MARK: - Helpers
@ -99,6 +104,8 @@ struct DocumentItem_Previews: PreviewProvider {
size: .random(in: 1 ... 100),
lastModifiedAt: .now
)) { _ in
// select closure with item id.
} download: { _ in
// download closure with item id.
} delete: { _ in
// delete closure with item id.
@ -112,6 +119,8 @@ struct DocumentItem_Previews: PreviewProvider {
size: .random(in: 1 ... 100),
lastModifiedAt: .now
)) { _ in
// select closure with item id.
} download: { _ in
// download closure with item id.
} delete: { _ in
// delete closure with item id.

37
Modules/Sources/Browse/UI/Components/FolderItem.swift
View File

@ -13,25 +13,30 @@ struct FolderItem: View {
// MARK: Properties
let item: FileSystemItem
let select: ItemIdClosure
let delete: ItemIdClosure
// MARK: Body
var body: some View {
HStack(spacing: 16) {
Image.folder
.icon(size: 32)
.foregroundColor(.red)
Text(item.name)
.itemName()
Image.chevronRight
.icon(size: 16)
.foregroundColor(.secondary)
.font(.headline)
Button {
select(item.id)
} label: {
HStack(spacing: 16) {
Image.folder
.icon(size: 32)
.foregroundColor(.red)
Text(item.name)
.itemName()
Image.chevronRight
.icon(size: 16)
.foregroundColor(.secondary)
.font(.headline)
}
.padding(.vertical, 8)
}
.padding(.vertical, 8)
.swipeActions(
edge: .trailing,
allowsFullSwipe: true
@ -69,6 +74,8 @@ struct BrowseItem_Previews: PreviewProvider {
id: "1234567890",
name: "Some folder name goes in here..."
)) { _ in
// select closure with item id.
} delete: { _ in
// delete closure with item id.
}
.previewDisplayName("Folder item")
@ -77,7 +84,9 @@ struct BrowseItem_Previews: PreviewProvider {
id: "1234567890",
name: "Some very, extremely long folder name goes in here..."
)) { _ in
// delete closire with item id.
// select closure with item id.
} delete: { _ in
// delete closure with item id.
}
.previewDisplayName("Folder item with long name")
}

34
Modules/Sources/Browse/UI/Views/BrowseView.swift
View File

@ -18,7 +18,7 @@ public struct BrowseView: View {
// MARK: States
@State private var items: [any FileSystemIdIdentifiable] = []
@State private var items: [any FileSystemItemIdentifiable] = []
// MARK: Properties
@ -46,22 +46,24 @@ public struct BrowseView: View {
// MARK: Body
public var body: some View {
List {
ForEach(items, id: \.id) { item in
switch item {
case is Folder:
FolderItem(item: item) { id in
// TODO: delete the item id from the backend.
}
case is Document:
DocumentItem(item: item) { id in
// TODO: download the item id from the backend.
} delete: { id in
// TODO: delete the item id from the backend.
}
default:
EmptyView()
List(items, id: \.id) { item in
switch item {
case is Folder:
FolderItem(item: item) { id in
// TODO: browse to the item id in another view.
} delete: { id in
// TODO: delete the item id from the backend.
}
case is Document:
DocumentItem(item: item) { id in
// TODO: show the item id in a viewer...
} download: { id in
// TODO: download the item id from the backend.
} delete: { id in
// TODO: delete the item id from the backend.
}
default:
EmptyView()
}
}
.listStyle(.inset)