create common component for information row

DroidKaigi · Aug 5, 2023 · 2a5482e · 2a5482e
1 parent 9ea26fc
commit 2a5482e
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 71 deletions.
diff --git a/app-ios/Modules/Package.swift b/app-ios/Modules/Package.swift
@@ -26,6 +26,7 @@ var package = Package(
             name: "About",
             dependencies: [
                 "Assets",
+                "Component",
                 "shared",
                 "Model",
                 "Theme",
@@ -49,6 +50,13 @@ var package = Package(
             ]
         ),
 
+        .target(
+            name: "Component",
+            dependencies: [
+                "Theme",
+            ]
+        ),
+
         .target(
             name: "FloorMap",
             dependencies: [
@@ -68,6 +76,7 @@ var package = Package(
             name: "Session",
             dependencies: [
                 "Assets",
+                "Component",
                 "Model",
                 "shared",
                 "Theme",

diff --git a/app-ios/Modules/Sources/About/AboutView.swift b/app-ios/Modules/Sources/About/AboutView.swift
@@ -1,4 +1,5 @@
 import Assets
+import Component
 import SwiftUI
 import Theme
 
@@ -14,46 +15,26 @@ public struct AboutView: View {
                         .font(Font.system(size: 16))
                     Spacer().frame(height: 12)
                     VStack(alignment: .leading, spacing: 12) {
-                        HStack(spacing: 0) {
-                            Assets.Icons.info.swiftUIImage
-                            Spacer().frame(width: 8)
-                            Text("日時")
-                                .font(Font.system(size: 14, weight: .semibold))
-                            Spacer().frame(width: 12)
-                            Text("2023.09.14(木) 〜 16(土) 3日間")
-                                .font(Font.system(size: 14, weight: .semibold))
-                        }
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .foregroundStyle(
-                            AssetColors.Surface.onSurfaceVariant.swiftUIColor
+                        InformationRow(
+                            icon: Assets.Icons.info.swiftUIImage,
+                            title: "日時",
+                            content: "2023.09.14(木) 〜 16(土) 3日間"
                         )
-                        HStack(spacing: 0) {
-                            Assets.Icons.info.swiftUIImage
-                            Spacer().frame(width: 8)
-                            Text("場所")
-                                .font(Font.system(size: 14, weight: .semibold))
-                            Spacer().frame(width: 12)
-                            Text("ベルサール渋谷ガーデン")
-                                .font(Font.system(size: 14, weight: .semibold))
-                            Spacer().frame(width: 8)
-                            Button {
-                                // TODO: Open map
-                            } label: {
-                                Text("地図を見る")
-                                    .font(Font.system(size: 14, weight: .semibold))
-                                    .underline()
-                                    .foregroundStyle(AssetColors.Primary.primary.swiftUIColor)
-                            }
-                        }
-                        .frame(maxWidth: .infinity, alignment: .leading)
-                        .foregroundStyle(
-                            AssetColors.Surface.onSurfaceVariant.swiftUIColor
+                        InformationRow(
+                            icon: Assets.Icons.info.swiftUIImage,
+                            title: "場所",
+                            content: "ベルサール渋谷ガーデン",
+                            action: .init(
+                                label: "地図を見る",
+                                action: {
+                                    // TODO: Open map
+                                }
+                            )
                         )
                     }
                     .padding(.vertical, 20)
                     .padding(.horizontal, 16)
-                    // TODO: Use SurfaceContainerLow
-                    .background(AssetColors.Surface.surfaceContainer.swiftUIColor)
+                    .background(AssetColors.Surface.surfaceContainerLow.swiftUIColor)
                     .clipShape(RoundedRectangle(cornerRadius: 12))
                     Spacer().frame(height: 32)
                     SectionTitle(title: "Credits")

diff --git a/app-ios/Modules/Sources/Component/InformationRow.swift b/app-ios/Modules/Sources/Component/InformationRow.swift
@@ -0,0 +1,74 @@
+import SwiftUI
+import Theme
+
+public struct InformationRow: View {
+    private let icon: Image
+    private let title: String
+    private let content: String
+    private let action: Action?
+
+    public struct Action {
+        let label: String
+        let action: () -> Void
+
+        public init(label: String, action: @escaping () -> Void) {
+            self.label = label
+            self.action = action
+        }
+    }
+
+    public init(
+        icon: Image,
+        title: String,
+        content: String,
+        action: Action? = nil
+    ) {
+        self.icon = icon
+        self.title = title
+        self.content = content
+        self.action = action
+    }
+
+    public var body: some View {
+        HStack {
+            icon
+            HStack(spacing: 12) {
+                Text(title)
+                    .font(Font.system(size: 14, weight: .semibold))
+                HStack {
+                    Text(content)
+                        .font(Font.system(size: 14, weight: .semibold))
+                    if let action = action {
+                        Button {
+                            action.action()
+                        } label: {
+                            Text(action.label)
+                                .font(Font.system(size: 14, weight: .semibold))
+                                .underline()
+                                .foregroundStyle(
+                                    AssetColors.Primary.primary.swiftUIColor
+                                )
+                        }
+                    }
+                }
+
+            }
+        }
+        .frame(maxWidth: .infinity, alignment: .leading)
+        .foregroundStyle(
+            AssetColors.Surface.onSurfaceVariant.swiftUIColor
+        )
+    }
+}
+
+#Preview {
+    InformationRow(
+        icon: Image(systemName: "clock"),
+        title: "日付",
+        content: "2023.09.14 / 11:20 ~ 12:00 (40分)",
+        action: .init(
+            label: "地図を見る",
+            action: {}
+        )
+    )
+}
diff --git a/app-ios/Modules/Sources/Session/SessionInformationRow.swift b/app-ios/Modules/Sources/Session/SessionInformationRow.swift
diff --git a/app-ios/Modules/Sources/Session/SessionView.swift b/app-ios/Modules/Sources/Session/SessionView.swift
@@ -1,4 +1,5 @@
 import Assets
+import Component
 import Model
 import shared
 import SwiftUI
@@ -40,22 +41,22 @@ public struct SessionView: View {
                     .frame(maxWidth: .infinity, alignment: .leading)
                     .background(AssetColors.Surface.surfaceVariant.swiftUIColor)
                 VStack(alignment: .leading) {
-                    SessionInformationRow(
+                    InformationRow(
                         icon: Assets.Icons.schedule.swiftUIImage,
                         title: "日付",
                         content: dateString
                     )
-                    SessionInformationRow(
+                    InformationRow(
                         icon: Assets.Icons.locationOn.swiftUIImage,
                         title: "場所",
                         content: viewModel.timetableItem.room.name.currentLangTitle
                     )
-                    SessionInformationRow(
+                    InformationRow(
                         icon: Assets.Icons.language.swiftUIImage,
                         title: "対応言語",
                         content: viewModel.timetableItem.language.langOfSpeaker
                     )
-                    SessionInformationRow(
+                    InformationRow(
                         icon: Assets.Icons.category.swiftUIImage,
                         title: "カテゴリ",
                         content: viewModel.timetableItem.category.title.currentLangTitle