Implemented the DocumentItem view component and also, moved some UI code to the Image+Helpers and Text+Helpers extensions.

This commit is contained in:
Javier Cicchelli 2022-12-03 06:56:38 +01:00
parent d108f17646
commit dafef542f1
5 changed files with 142 additions and 23 deletions

View File

@ -15,6 +15,9 @@
02AE650A29363DC1005A4AF3 /* BeRealUITests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02AE650929363DC1005A4AF3 /* BeRealUITests.swift */; };
02AE650C29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02AE650B29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift */; };
02B334E8293A93DC00C45E31 /* FolderItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02B334E7293A93DC00C45E31 /* FolderItem.swift */; };
02CE5554293B130100730DC9 /* DocumentItem.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5553293B130100730DC9 /* DocumentItem.swift */; };
02CE5557293B134200730DC9 /* Image+Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5556293B134200730DC9 /* Image+Helpers.swift */; };
02CE5559293B1AB600730DC9 /* Text+Helpers.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02CE5558293B1AB600730DC9 /* Text+Helpers.swift */; };
02FFFD7B29395DD200306533 /* String+Constants.swift in Sources */ = {isa = PBXBuildFile; fileRef = 02FFFD7A29395DD200306533 /* String+Constants.swift */; };
4694AAA0293A7C8800D54903 /* Modules in Frameworks */ = {isa = PBXBuildFile; productRef = 4694AA9F293A7C8800D54903 /* Modules */; };
/* End PBXBuildFile section */
@ -49,6 +52,9 @@
02AE650929363DC1005A4AF3 /* BeRealUITests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BeRealUITests.swift; sourceTree = "<group>"; };
02AE650B29363DC1005A4AF3 /* BeRealUITestsLaunchTests.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BeRealUITestsLaunchTests.swift; sourceTree = "<group>"; };
02B334E7293A93DC00C45E31 /* FolderItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = FolderItem.swift; sourceTree = "<group>"; };
02CE5553293B130100730DC9 /* DocumentItem.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = DocumentItem.swift; sourceTree = "<group>"; };
02CE5556293B134200730DC9 /* Image+Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Image+Helpers.swift"; sourceTree = "<group>"; };
02CE5558293B1AB600730DC9 /* Text+Helpers.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Text+Helpers.swift"; sourceTree = "<group>"; };
02FFFD7A29395DD200306533 /* String+Constants.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "String+Constants.swift"; sourceTree = "<group>"; };
/* End PBXFileReference section */
@ -141,6 +147,7 @@
02B334E2293A908800C45E31 /* Browse */ = {
isa = PBXGroup;
children = (
02CE5555293B131D00730DC9 /* Extensions */,
02B334E6293A93CE00C45E31 /* Components */,
02B334E5293A93C400C45E31 /* Views */,
);
@ -158,10 +165,20 @@
isa = PBXGroup;
children = (
02B334E7293A93DC00C45E31 /* FolderItem.swift */,
02CE5553293B130100730DC9 /* DocumentItem.swift */,
);
path = Components;
sourceTree = "<group>";
};
02CE5555293B131D00730DC9 /* Extensions */ = {
isa = PBXGroup;
children = (
02CE5556293B134200730DC9 /* Image+Helpers.swift */,
02CE5558293B1AB600730DC9 /* Text+Helpers.swift */,
);
path = Extensions;
sourceTree = "<group>";
};
02FFFD7929395DBF00306533 /* Extensions */ = {
isa = PBXGroup;
children = (
@ -313,6 +330,9 @@
files = (
02B334E8293A93DC00C45E31 /* FolderItem.swift in Sources */,
02AE64F129363DBF005A4AF3 /* ContentView.swift in Sources */,
02CE5554293B130100730DC9 /* DocumentItem.swift in Sources */,
02CE5557293B134200730DC9 /* Image+Helpers.swift in Sources */,
02CE5559293B1AB600730DC9 /* Text+Helpers.swift in Sources */,
02AE64EF29363DBF005A4AF3 /* BeRealApp.swift in Sources */,
02FFFD7B29395DD200306533 /* String+Constants.swift in Sources */,
);

View File

@ -0,0 +1,71 @@
//
// DocumentItem.swift
// Browse
//
// Created by Javier Cicchelli on 03/12/2022.
// Copyright © 2022 Röck+Cöde. All rights reserved.
//
import SwiftUI
struct DocumentItem: View {
// MARK: Properties
let name: String
let lastModified: String
let fileSize: String
// MARK: Body
var body: some View {
HStack(spacing: 16) {
Image.document
.icon(size: 32)
.foregroundColor(.red)
VStack {
Text(name)
.itemName()
HStack {
Text(lastModified)
Spacer()
Text(fileSize)
}
.font(.subheadline)
.foregroundColor(.secondary)
}
}
.padding(16)
}
}
// MARK: - Image+Constants
private extension Image {
static let document = Image(systemName: "doc.fill")
}
// MARK: - Previews
struct DocumentItem_Previews: PreviewProvider {
static var previews: some View {
DocumentItem(
name: "Some document name goes in here...",
lastModified: "Some few hours ago",
fileSize: "23,5 Mbytes"
)
.previewDisplayName("Document item")
DocumentItem(
name: "Some very, extremely long document name goes in here...",
lastModified: "Yesterday",
fileSize: "235,6 Kbytes"
)
.previewDisplayName("Document item with long name")
}
}

View File

@ -23,11 +23,7 @@ struct FolderItem: View {
.foregroundColor(.red)
Text(name)
.font(.headline)
.foregroundColor(.primary)
.lineLimit(1)
.truncationMode(.middle)
.frame(maxWidth: .infinity, alignment: .leading)
.itemName()
Image.chevronRight
.icon(size: 16)
@ -39,26 +35,11 @@ struct FolderItem: View {
}
// MARK: - Image
// MARK: - Image+Constants
private extension Image {
// MARK: Constants
static let folder = Image(systemName: "folder.fill")
static let document = Image(systemName: "doc.fill")
static let chevronRight = Image(systemName: "chevron.right")
// MARK: Functions
func icon(size: CGFloat) -> some View {
self
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(width: size, height: size)
}
}
// MARK: - Previews
@ -66,9 +47,9 @@ private extension Image {
struct BrowseItem_Previews: PreviewProvider {
static var previews: some View {
FolderItem(name: "Some folder name goes in here...")
.previewDisplayName("Browse item for folders")
.previewDisplayName("Folder item")
FolderItem(name: "Some very, extremely long folder name goes in here...")
.previewDisplayName("Browse item for folders with long name")
.previewDisplayName("Folder item with long name")
}
}

View File

@ -0,0 +1,24 @@
//
// Image+Helpers.swift
// Browse
//
// Created by Javier Cicchelli on 03/12/2022.
// Copyright © 2022 Röck+Cöde. All rights reserved.
//
import SwiftUI
extension Image {
/// Resizes an image to a given size.
/// - Parameter size: A size to which an image will be resized.
/// - Returns: An resized image rendered as an erasured view.
func icon(size: CGFloat) -> some View {
self
.resizable()
.renderingMode(.template)
.scaledToFit()
.frame(width: size, height: size)
}
}

View File

@ -0,0 +1,23 @@
//
// Text+Helpers.swift
// BeReal
//
// Created by Javier Cicchelli on 03/12/2022.
// Copyright © 2022 Röck+Cöde. All rights reserved.
//
import SwiftUI
extension Text {
/// Renders a text for the name of a folder or document item.
/// - Returns: A formatted text rendered as an erasured view.
func itemName() -> some View {
self
.font(.headline)
.lineLimit(1)
.truncationMode(.middle)
.foregroundColor(.primary)
.frame(maxWidth: .infinity, alignment: .leading)
}
}