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

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

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
.icon(size: 32)
.foregroundColor(.red)
VStack(spacing: 8) { VStack(spacing: 8) {
Text(item.name) Text(item.name)
.itemName() .itemName()
HStack { HStack {
Text("lastModified") Text("lastModified")
Spacer() Spacer()
Text("fileSize") 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
@ -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.

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
.icon(size: 32)
.foregroundColor(.red)
Text(item.name) Text(item.name)
.itemName() .itemName()
Image.chevronRight Image.chevronRight
.icon(size: 16) .icon(size: 16)
.foregroundColor(.secondary) .foregroundColor(.secondary)
.font(.headline) .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")
} }

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)