Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

๐Ÿ”€ :: DesignSystem SMSSelectionControls ์ œ์ž‘ #37

Merged
merged 17 commits into from
May 22, 2023
Merged
Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
e70aa84
:lipstick: SMSSelectionControls ์ œ์ž‘
kimsh153 May 9, 2023
715d732
:recycle: SMSSelctionControls
kimsh153 May 9, 2023
4fb864d
:recycle: Group ์‚ญ์ œ
kimsh153 May 9, 2023
abab51c
:lipstick: RadioButtonComponent
kimsh153 May 15, 2023
6eef1cf
Merge branch 'master' of https://github.com/GSM-MSG/SMS-iOS into 36-sโ€ฆ
kimsh153 May 15, 2023
3d7d4ad
:fire: ์ด์ƒํ•œ ์ฝ”๋“œ ์ง€์šฐ๊ธฐ =
kimsh153 May 15, 2023
94053a1
Merge branch 'master' of https://github.com/GSM-MSG/SMS-iOS into 36-sโ€ฆ
kimsh153 May 18, 2023
e25c2a4
:recycle: Comment ์ˆ˜์ •
kimsh153 May 22, 2023
1a75279
:recycle: init ์ˆ˜์ •
kimsh153 May 22, 2023
6535fe1
:recycle: Public ์ „ํ™˜
kimsh153 May 22, 2023
80e8c8e
:recycle: Comment ์ˆ˜์ •
kimsh153 May 22, 2023
8c29c2a
Merge branch 'master' of https://github.com/GSM-MSG/SMS-iOS into 36-sโ€ฆ
kimsh153 May 22, 2023
1208295
:recycle: Commnet ์ˆ˜์ •
kimsh153 May 22, 2023
fdc43eb
:recycle: ๋”ฐ๋กœ ๋…ธ๋Š”๊ฑฐ ์ˆ˜์ •
kimsh153 May 22, 2023
8a8091a
:recycle: ๋”ฐ๋กœ ๋…ธ๋Š”๊ฑฐ ์ˆ˜์ •
kimsh153 May 22, 2023
f326a31
:boom: ๊ฒฐ๊ตญ ํ•ด๊ฒฐ์ฑ…์„ ์ฐพ์ง€ ๋ชปํ•˜๊ณ  ์ฒ˜์Œ์œผ๋กœ ๋Œ์•„์™”์Šต๋‹ˆ๋‹ค
kimsh153 May 22, 2023
97479aa
:recycle: PressedSelectionButtonStyle
kimsh153 May 22, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 12 additions & 29 deletions Projects/Core/DesignSystem/Demo/Sources/DemoView.swift
Original file line number Diff line number Diff line change
@@ -1,44 +1,27 @@
import DesignSystem
import SwiftUI

struct DemoView: View {
@State var isPresentedBottomSheet = false
var body: some View {
public struct DemoView: View {
@State var isOn = true
@State var selection: Int? = 0

public var body: some View {
VStack {
Group {
CTAButton(text: "CTA Default", style: .default) {
withAnimation {
isPresentedBottomSheet = true
RadioComponent(selection: $selection) {
ForEach(0..<4) { index in
HStack {
SMSSelectionControls(tag: index)
Text("asdfasdf")
}
.radioTag(index)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๊ทผ๋ฐ ์ด๊ฑฐ .radioTag๊ฐ€

Button {
             value.selection = tag
             value.onTapReceive?(tag)
         } label: {
             content
         }
         .buttonStyle(.plain)

์ด๊ฑฐ๋กœ ๊ฐ์‹ธ๊ณ  SMSSelectionControls ํƒœ๊ทธ๋„

 Button {
             value.selection = tag
             value.onTapReceive?(tag)
         } label: {
             ZStack {
                 Circle()
                     .stroke(tag == value.selection ? Color.sms(.primary(.p2)) : Color.sms(.neutral(.n20)), lineWidth: 2)
                     .frame(width: 20, height: 20)

                 Circle()
                     .fill(tag == value.selection ? Color.sms(.primary(.p2)) : .clear)
                     .frame(width: 12, height: 12)
             }
         }
         .buttonStyle(CustomButtonStyle(isOn: tag == value.selection))

์ด๋ ‡๊ฒŒ ๊ฐ์‹ธ๋†“๋Š”๊ฑฐ๋ฉด ์—„ ๋ฏธ๋ฌ˜ํ•˜์ง€ ์•Š์•„์š”?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๊ทธ ๋””์ž์ด๋„ˆ๋ถ„์ด ๋ง์”€ํ•˜์‹ ๊ฑธ๋กœ๋Š” ๋ฒ„ํŠผ๋งŒ ๋ˆŒ๋Ÿฌ์ ธ์•ผํ•œ๋‹ค๊ณ  ํ•˜์‹œ๊ธธ๋ž˜ ์š”์ฒญ์‚ฌํ•ญ๋Œ€๋กœ ์ˆ˜์ •ํ–ˆ์Šต๋‹ˆ๋‹ค

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์ˆ˜์ •๋œ ์ฝ”๋“œ ๋งž๋‚˜์š”?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

๋„ค.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์ง€๊ธˆ๋„ text๋ž‘ ๊ฐ™์ด ๋ˆŒ๋ฆฌ๋Š”๋ฐ์š”?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์•„ ์•„๋‹ˆ๋„ค, ์–ด๋Šฌ ์ปค๋ฐ‹์ด ๋„ˆ๋ฌด ์ฝ”๋“œ๊ฐ€ ํ—ท๊ฐˆ๋ฆฌ๊ฒŒ ์ปค๋ฐ‹๋ผ์„œ;

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์ฉ ์ฃ„์†กํ•จ๋‹ค

}
}
}
.padding(8)

NavigationLink {
AView()
} label: {
Text("A")
}
}
.smsBottomSheet(isShowing: $isPresentedBottomSheet) {
RoundedRectangle(cornerRadius: 8)
.fill(Color.sms(.neutral(.n20)))
.frame(maxWidth: .infinity)
.frame(height: 500)
.padding(.horizontal)
}
}
}

struct AView: View {
@Environment(\.dismiss) var dismiss

var body: some View {
Text("A")
.smsBackButton(dismiss: dismiss)
}
}

struct DemoView_Previews: PreviewProvider {
static var previews: some View {
NavigationView {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import SwiftUI

public struct RadioComponent<T: Hashable, Content: View>: View {
private let value: RadioValue<T>
private let content: () -> Content

public init(
selection: Binding<T?>,
@ViewBuilder _ content: @escaping () -> Content,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

content ์ด ์นœ๊ตฌ label์ด ์™œ _ ์ธ๊ฑฐ์ฃ ?

onTapReceive: ((T?) -> Void)? = nil
) {
self.value = RadioValue(selection: selection, onTapReceive: onTapReceive)
self.content = content
}

public var body: some View {
content()
.environmentObject(value)
}
}

class RadioValue<T: Hashable>: ObservableObject {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์ƒ์†ํ•  ์—ฌ์ง€๊ฐ€ ์—†์œผ๋‹ˆ final๋กœ ์ฒ˜๋ฆฌํ•˜๋Š”๊ฒŒ ์ข‹์ง€ ์•Š์„๊นŒ์š”?

typealias TapReceiveAction = (T?) -> Void

@Binding var selection: T?
var onTapReceive: (TapReceiveAction)?

init(selection: Binding<T?>, onTapReceive: (TapReceiveAction)? = nil) {
_selection = selection
self.onTapReceive = onTapReceive
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
import SwiftUI

public struct SMSSelectionControls<T: Hashable>: View {
@EnvironmentObject private var value: RadioValue<T>
private var tag: T?

public init(tag: T) {
self.tag = tag
}

public var body: some View {
Button {
value.selection = tag
value.onTapReceive?(tag)
} label: {
ZStack {
Circle()
.stroke(tag == value.selection ? Color.sms(.primary(.p2)) : Color.sms(.neutral(.n20)), lineWidth: 2)
.frame(width: 20, height: 20)

Circle()
.fill(tag == value.selection ? Color.sms(.primary(.p2)) : .clear)
.frame(width: 12, height: 12)
}
}
.buttonStyle(CustomButtonStyle(isOn: tag == value.selection))
}
}

private struct CustomButtonStyle: ButtonStyle {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

private์ด๊ธด ํ•˜์ง€๋งŒ CustomButotnStyle๋ณด๋‹ค ๋” ์ง๊ด€์ ์ธ ์ด๋ฆ„์€ ์—†์„๊นŒ์š”?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

SMSelectionControlsStyle๋กœ ์ˆ˜์ •ํ• ๊นŒ์š”?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

์ด๊ฑฐ๋Š” ํŠน์ • SelectionControl ๊ทธ ์ž์ฒด๋ณด๋‹ค๋Š” SelectionControl์ด ๋ˆŒ๋ ธ์„ ๋•Œ gray์ƒ‰์ด ์ƒ๊ธฐ๋Š” style์•„๋‹Œ๊ฐ€์š”? ์ข€ ๋‹ค๋ฅธ ์ด๋ฆ„์€ ์—†๋‚˜์š”?

var isOn: Bool

init(isOn: Bool) {
self.isOn = isOn
}

@ViewBuilder
func makeBody(configuration: Configuration) -> some View {
Circle()
.fill(self.isOn && configuration.isPressed ? Color.sms(.neutral(.n20)) : Color.clear)
.overlay {
configuration.label
}
.frame(width: 32, height: 32)
}
}

public struct RadioTag<T: Hashable>: ViewModifier {
@EnvironmentObject private var value: RadioValue<T>
private var tag: T?

init(_ tag: T?) {
self.tag = tag
}

public func body(content: Content) -> some View {
Button {
value.selection = tag
value.onTapReceive?(tag)
} label: {
content
}
.buttonStyle(.plain)
}
}

extension View {
public func radioTag<T: Hashable>(_ tag: T?) -> some View {
self.modifier(RadioTag(tag))
}
}