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

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

@ -13,25 +13,30 @@ struct FolderItem: View {
// MARK: Properties // MARK: Properties
let item: FileSystemItem let item: FileSystemItem
let select: ItemIdClosure
let delete: ItemIdClosure let delete: ItemIdClosure
// MARK: Body // MARK: Body
var body: some View { var body: some View {
HStack(spacing: 16) { Button {
Image.folder select(item.id)
.icon(size: 32) } label: {
.foregroundColor(.red) HStack(spacing: 16) {
Image.folder
Text(item.name) .icon(size: 32)
.itemName() .foregroundColor(.red)
Image.chevronRight Text(item.name)
.icon(size: 16) .itemName()
.foregroundColor(.secondary)
.font(.headline) Image.chevronRight
.icon(size: 16)
.foregroundColor(.secondary)
.font(.headline)
}
.padding(.vertical, 8)
} }
.padding(.vertical, 8)
.swipeActions( .swipeActions(
edge: .trailing, edge: .trailing,
allowsFullSwipe: true allowsFullSwipe: true
@ -69,6 +74,8 @@ struct BrowseItem_Previews: PreviewProvider {
id: "1234567890", id: "1234567890",
name: "Some folder name goes in here..." name: "Some folder name goes in here..."
)) { _ in )) { _ in
// select closure with item id.
} delete: { _ in
// delete closure with item id. // delete closure with item id.
} }
.previewDisplayName("Folder item") .previewDisplayName("Folder item")
@ -77,7 +84,9 @@ struct BrowseItem_Previews: PreviewProvider {
id: "1234567890", id: "1234567890",
name: "Some very, extremely long folder name goes in here..." name: "Some very, extremely long folder name goes in here..."
)) { _ in )) { _ in
// delete closire with item id. // select closure with item id.
} delete: { _ in
// delete closure with item id.
} }
.previewDisplayName("Folder item with long name") .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 // MARK: States
@State private var items: [any FileSystemIdIdentifiable] = [] @State private var items: [any FileSystemItemIdentifiable] = []
// MARK: Properties // MARK: Properties
@ -46,22 +46,24 @@ public struct BrowseView: View {
// MARK: Body // MARK: Body
public var body: some View { public var body: some View {
List { List(items, id: \.id) { item in
ForEach(items, id: \.id) { item in switch item {
switch item { case is Folder:
case is Folder: FolderItem(item: item) { id in
FolderItem(item: item) { id in // TODO: browse to the item id in another view.
// TODO: delete the item id from the backend. } delete: { 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()
} }
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) .listStyle(.inset)