Skip to content

Commit e04ba09

Browse files
osugikojiosugikoji
committed
feature: add components
1 parent b19f293 commit e04ba09

File tree

11 files changed

+430
-41
lines changed

11 files changed

+430
-41
lines changed

‎sample/ios/YChatApp/UI/Component/BallonMessage/BallonMessage.swift‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
//
2+
// BallonMessage.swift
3+
// ychat-ios
4+
//
5+
// Created by Koji Osugi on 08/04/23.
6+
// Copyright © 2023 orgName. All rights reserved.
7+
//
8+
9+
import SwiftUI
10+
11+
struct BallonSenderMessage: View {
12+
private var text: String
13+
14+
private var isError = false
15+
16+
init(_ text: String, isError: Bool = false) {
17+
self.text = text
18+
self.isError = isError
19+
}
20+
21+
var body: some View {
22+
HStack(spacing: 4) {
23+
Spacer()
24+
Spacer().frame(width: 60)
25+
HStack(spacing: 8) {
26+
Text(text)
27+
.foregroundColor(.onAccent)
28+
.style(.mediumBody)
29+
if isError {
30+
Icon.warning.image(.red)
31+
}
32+
}
33+
.padding(.horizontal, 16)
34+
.padding(.vertical, 8)
35+
.background(Color.accent)
36+
.cornerRadius(16, corners: [.bottomLeft, .topLeft, .topRight])
37+
}
38+
}
39+
}
40+
41+
struct BallonBotMessage: View {
42+
private var text: String
43+
44+
init(_ text: String) {
45+
self.text = text
46+
}
47+
48+
var body: some View {
49+
HStack {
50+
HStack(alignment: .top, spacing: 4) {
51+
Circle()
52+
.fill(.green)
53+
.frame(width: 40, height: 40)
54+
.overlay { Icon.bot.image(.white) }
55+
ZStack {
56+
Text(text)
57+
.foregroundColor(.text1)
58+
.style(.mediumBody)
59+
.multilineTextAlignment(.leading)
60+
}
61+
.padding(.horizontal, 16)
62+
.padding(.vertical, 8)
63+
.background(Color.text4)
64+
.cornerRadius(16, corners: [.bottomLeft, .bottomLeft, .topRight])
65+
}
66+
Spacer().frame(width: 60)
67+
Spacer()
68+
}
69+
}
70+
}
71+
72+
struct BallonTyping: View {
73+
var body: some View {
74+
HStack {
75+
ZStack {
76+
TypingLoading()
77+
}
78+
.padding(.horizontal, 16)
79+
.padding(.vertical, 8)
80+
.background(Color.text4)
81+
.cornerRadius(16, corners: [.bottomLeft, .bottomLeft, .topRight])
82+
Spacer()
83+
}
84+
}
85+
}
86+
87+
internal struct BallonMessage_Previews: PreviewProvider {
88+
static var previews: some View {
89+
VStack {
90+
BallonSenderMessage("Say this is a test")
91+
BallonSenderMessage("Say this is a test", isError: true)
92+
BallonBotMessage("This is indeed a test.")
93+
BallonTyping()
94+
}
95+
}
96+
}

‎sample/ios/YChatApp/UI/Component/Bar/SideMenu.swift‎

Lines changed: 18 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ struct SideMenu<SidebarContent: View>: View {
1313
private let width: CGFloat
1414
private let bgColor: Color
1515
private let content: SidebarContent
16-
16+
1717
init(
1818
isVisible: Binding<Bool>,
1919
width: CGFloat = UIScreen.main.bounds.size.width * 0.7,
@@ -25,7 +25,7 @@ struct SideMenu<SidebarContent: View>: View {
2525
self.bgColor = bgColor
2626
self.content = content()
2727
}
28-
28+
2929
var body: some View {
3030
ZStack {
3131
GeometryReader { _ in
@@ -34,25 +34,28 @@ struct SideMenu<SidebarContent: View>: View {
3434
.background(.black.opacity(0.6))
3535
.opacity(isVisible ? 1 : 0)
3636
.animation(.easeInOut.delay(0.2), value: isVisible)
37-
.onTapGesture {
38-
isVisible.toggle()
39-
}
37+
.onTapGesture { isVisible.toggle() }
4038
sideMenuStructure()
4139
}
42-
.edgesIgnoringSafeArea(.all)
4340
}
44-
41+
4542
@ViewBuilder
4643
private func sideMenuStructure() -> some View {
47-
HStack(alignment: .top) {
48-
ZStack(alignment: .top) {
49-
bgColor
50-
content
44+
GeometryReader { proxy in
45+
HStack(alignment: .top) {
46+
ZStack(alignment: .top) {
47+
bgColor
48+
VStack {
49+
Spacer().frame(height: 1)
50+
content.padding(.top, proxy.safeAreaInsets.top)
51+
}
52+
}
53+
.frame(width: width)
54+
.offset(x: isVisible ? 0 : -width)
55+
.animation(.default, value: isVisible)
56+
Spacer()
5157
}
52-
.frame(width: width)
53-
.offset(x: isVisible ? 0 : -width)
54-
.animation(.default, value: isVisible)
55-
Spacer()
58+
.edgesIgnoringSafeArea(.all)
5659
}
5760
}
5861
}

‎sample/ios/YChatApp/UI/Component/Button/ButtonContained.swift‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
//
2+
// ButtonContained.swift
3+
// ychat-ios
4+
//
5+
// Created by Koji Osugi on 07/04/23.
6+
// Copyright © 2023 orgName. All rights reserved.
7+
//
8+
9+
import SwiftUI
10+
11+
struct ButtonContained: View {
12+
private var text: String
13+
private var onAction: () -> Void
14+
15+
init(
16+
_ text: String,
17+
onAction: @escaping () -> Void = {}
18+
) {
19+
self.text = text
20+
self.onAction = onAction
21+
}
22+
23+
var body: some View {
24+
Button(action: { onAction() }) {
25+
Text(text.capitalized)
26+
.foregroundColor(.onAccent)
27+
.style(.smallTitle)
28+
.frame(minWidth: 0, maxWidth: .infinity)
29+
.padding()
30+
}
31+
.background(Color.accent)
32+
.cornerRadius(8)
33+
}
34+
}
35+
36+
internal struct ButtonContainedLight_Previews: PreviewProvider {
37+
static var previews: some View {
38+
ButtonContained("Button Contained")
39+
.padding(.horizontal, 16)
40+
}
41+
}
42+
43+
internal struct ButtonContainedDark_Previews: PreviewProvider {
44+
static var previews: some View {
45+
ButtonContained("Button Contained")
46+
.padding(.horizontal, 16)
47+
.preferredColorScheme(.dark)
48+
}
49+
}

‎sample/ios/YChatApp/UI/Component/Button/ButtonOutlined.swift‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
//
2+
// ButtonOutlined.swift
3+
// ychat-ios
4+
//
5+
// Created by Koji Osugi on 07/04/23.
6+
// Copyright © 2023 orgName. All rights reserved.
7+
//
8+
9+
import SwiftUI
10+
11+
struct ButtonOutlined: View {
12+
private var text: String
13+
private var onAction: () -> Void
14+
15+
init(
16+
_ text: String,
17+
onAction: @escaping () -> Void = {}
18+
) {
19+
self.text = text
20+
self.onAction = onAction
21+
}
22+
23+
var body: some View {
24+
Button(action: { onAction() }) {
25+
Text(text.capitalized)
26+
.foregroundColor(.accent)
27+
.style(.smallTitle)
28+
.frame(minWidth: 0, maxWidth: .infinity)
29+
.padding()
30+
.overlay(
31+
RoundedRectangle(cornerRadius: 8)
32+
.stroke(Color.accent, lineWidth: 1)
33+
)
34+
}
35+
}
36+
}
37+
38+
internal struct ButtonOutlinedLight_Previews: PreviewProvider {
39+
static var previews: some View {
40+
ButtonOutlined("Button Outlined")
41+
.padding(.horizontal, 16)
42+
}
43+
}
44+
45+
internal struct ButtonOutlinedDark_Previews: PreviewProvider {
46+
static var previews: some View {
47+
ButtonOutlined("Button Outlined")
48+
.padding(.horizontal, 16)
49+
.preferredColorScheme(.dark)
50+
}
51+
}

‎sample/ios/YChatApp/UI/Component/Button/ImageButton.swift‎

Lines changed: 4 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -9,35 +9,24 @@
99
import SwiftUI
1010

1111
struct ImageButton: View {
12-
private let icon: UIImage
13-
private var color: Color?
12+
private let icon: Icon
1413
private let action: () -> Void
1514

1615
init(
17-
_ icon: UIImage,
18-
color: Color? = nil,
16+
_ icon: Icon,
1917
action: @escaping () -> Void = {}
2018
) {
2119
self.icon = icon
22-
self.color = color
2320
self.action = action
2421
}
2522

2623
var body: some View {
27-
Button(action: action) {
28-
if let color = color {
29-
Image(uiImage: icon)
30-
.renderingMode(.template)
31-
.foregroundColor(color)
32-
} else {
33-
Image(uiImage: icon)
34-
}
35-
}
24+
Button(action: action) { icon.image() }
3625
}
3726
}
3827

3928
struct ImageButton_Previews: PreviewProvider {
4029
static var previews: some View {
41-
ImageButton(Icon.menu.uiImage)
30+
ImageButton(Icon.menu)
4231
}
4332
}

0 commit comments

Comments
 (0)