Add SettingsSegmentedPicker with title, subtitle, and titleAccessory support
This commit is contained in:
parent
835e41841b
commit
3e1d63740f
@ -489,9 +489,69 @@ SettingsNavigationRow(
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
### SegmentedPicker
|
### SettingsSegmentedPicker
|
||||||
|
|
||||||
A horizontal capsule-style picker.
|
A segmented picker with title, subtitle, and optional accessory (follows the same pattern as `SettingsToggle` and `SettingsSlider`).
|
||||||
|
|
||||||
|
```swift
|
||||||
|
// Basic picker
|
||||||
|
SettingsSegmentedPicker(
|
||||||
|
title: "Camera",
|
||||||
|
subtitle: "Choose between front and back camera lenses",
|
||||||
|
options: [("Front", .front), ("Back", .back)],
|
||||||
|
selection: $viewModel.cameraPosition,
|
||||||
|
accentColor: AppAccent.primary
|
||||||
|
)
|
||||||
|
|
||||||
|
// Premium picker with crown icon
|
||||||
|
SettingsSegmentedPicker(
|
||||||
|
title: "HDR Mode",
|
||||||
|
subtitle: "High Dynamic Range for better lighting in photos",
|
||||||
|
options: [("Off", .off), ("On", .on), ("Auto", .auto)],
|
||||||
|
selection: $viewModel.hdrMode,
|
||||||
|
accentColor: AppAccent.primary,
|
||||||
|
titleAccessory: {
|
||||||
|
Image(systemName: "crown.fill")
|
||||||
|
.foregroundStyle(AppStatus.warning)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.disabled(!isPremiumUnlocked)
|
||||||
|
```
|
||||||
|
|
||||||
|
**Refactoring**: Replace inline segmented pickers:
|
||||||
|
|
||||||
|
```swift
|
||||||
|
// ❌ BEFORE: Inline title/subtitle with SegmentedPicker
|
||||||
|
VStack(alignment: .leading, spacing: Design.Spacing.xxSmall) {
|
||||||
|
Text("Camera")
|
||||||
|
.font(.system(size: Design.BaseFontSize.medium, weight: .medium))
|
||||||
|
.foregroundStyle(.white)
|
||||||
|
|
||||||
|
Text("Choose between front and back camera lenses")
|
||||||
|
.font(.system(size: Design.BaseFontSize.caption))
|
||||||
|
.foregroundStyle(.white.opacity(Design.Opacity.medium))
|
||||||
|
|
||||||
|
SegmentedPicker(
|
||||||
|
title: "",
|
||||||
|
options: [("Front", .front), ("Back", .back)],
|
||||||
|
selection: $cameraPosition
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// ✅ AFTER: Use SettingsSegmentedPicker
|
||||||
|
SettingsSegmentedPicker(
|
||||||
|
title: "Camera",
|
||||||
|
subtitle: "Choose between front and back camera lenses",
|
||||||
|
options: [("Front", .front), ("Back", .back)],
|
||||||
|
selection: $cameraPosition
|
||||||
|
)
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### SegmentedPicker (Low-level)
|
||||||
|
|
||||||
|
A horizontal capsule-style picker without title/subtitle styling. Use `SettingsSegmentedPicker` for settings screens.
|
||||||
|
|
||||||
```swift
|
```swift
|
||||||
SegmentedPicker(
|
SegmentedPicker(
|
||||||
@ -708,7 +768,8 @@ SettingsCard(backgroundColor: AppSurface.card, borderColor: AppBorder.subtle) {
|
|||||||
| `SettingsToggle` | Boolean settings | `title`, `subtitle`, `isOn`, `titleAccessory` |
|
| `SettingsToggle` | Boolean settings | `title`, `subtitle`, `isOn`, `titleAccessory` |
|
||||||
| `SettingsSlider` | Numeric settings | `value`, `range`, `format`, icons |
|
| `SettingsSlider` | Numeric settings | `value`, `range`, `format`, icons |
|
||||||
| `SettingsNavigationRow` | Navigate to detail | `title`, `subtitle`, `destination` |
|
| `SettingsNavigationRow` | Navigate to detail | `title`, `subtitle`, `destination` |
|
||||||
| `SegmentedPicker` | Option selection | `title`, `options`, `selection` |
|
| `SettingsSegmentedPicker` | Option selection | `title`, `subtitle`, `options`, `titleAccessory` |
|
||||||
|
| `SegmentedPicker` | Low-level picker | `title`, `options`, `selection` |
|
||||||
| `SettingsRow` | Action rows | `systemImage`, `title`, `action` |
|
| `SettingsRow` | Action rows | `systemImage`, `title`, `action` |
|
||||||
| `SelectableRow` | Card selection | `title`, `isSelected`, `badge` |
|
| `SelectableRow` | Card selection | `title`, `isSelected`, `badge` |
|
||||||
| `BadgePill` | Price/tag badges | `text`, `isSelected` |
|
| `BadgePill` | Price/tag badges | `text`, `isSelected` |
|
||||||
|
|||||||
173
Sources/Bedrock/Views/Settings/SettingsSegmentedPicker.swift
Normal file
173
Sources/Bedrock/Views/Settings/SettingsSegmentedPicker.swift
Normal file
@ -0,0 +1,173 @@
|
|||||||
|
//
|
||||||
|
// SettingsSegmentedPicker.swift
|
||||||
|
// Bedrock
|
||||||
|
//
|
||||||
|
// A segmented picker with title, subtitle, and optional accessory.
|
||||||
|
//
|
||||||
|
|
||||||
|
import SwiftUI
|
||||||
|
|
||||||
|
/// A segmented picker setting with title, subtitle, and capsule-style buttons.
|
||||||
|
///
|
||||||
|
/// Use this for selecting from a small number of options (2-4) in settings.
|
||||||
|
///
|
||||||
|
/// ```swift
|
||||||
|
/// // Basic picker
|
||||||
|
/// SettingsSegmentedPicker(
|
||||||
|
/// title: "Camera",
|
||||||
|
/// subtitle: "Choose between front and back camera",
|
||||||
|
/// options: [("Front", .front), ("Back", .back)],
|
||||||
|
/// selection: $cameraPosition
|
||||||
|
/// )
|
||||||
|
///
|
||||||
|
/// // Premium picker with crown icon
|
||||||
|
/// SettingsSegmentedPicker(
|
||||||
|
/// title: "HDR Mode",
|
||||||
|
/// subtitle: "High Dynamic Range for better lighting",
|
||||||
|
/// options: [("Off", .off), ("On", .on), ("Auto", .auto)],
|
||||||
|
/// selection: $hdrMode,
|
||||||
|
/// titleAccessory: {
|
||||||
|
/// Image(systemName: "crown.fill")
|
||||||
|
/// .foregroundStyle(.orange)
|
||||||
|
/// }
|
||||||
|
/// )
|
||||||
|
/// ```
|
||||||
|
public struct SettingsSegmentedPicker<T: Equatable, Accessory: View>: View {
|
||||||
|
/// The main title text.
|
||||||
|
public let title: String
|
||||||
|
|
||||||
|
/// The subtitle/description text.
|
||||||
|
public let subtitle: String
|
||||||
|
|
||||||
|
/// The available options as (label, value) pairs.
|
||||||
|
public let options: [(String, T)]
|
||||||
|
|
||||||
|
/// Binding to the selected value.
|
||||||
|
@Binding public var selection: T
|
||||||
|
|
||||||
|
/// The accent color for the selected button.
|
||||||
|
public let accentColor: Color
|
||||||
|
|
||||||
|
/// Optional accessory view shown after the title (e.g., crown icon for premium).
|
||||||
|
public let titleAccessory: Accessory?
|
||||||
|
|
||||||
|
/// Creates a settings segmented picker.
|
||||||
|
/// - Parameters:
|
||||||
|
/// - title: The main title.
|
||||||
|
/// - subtitle: The subtitle description.
|
||||||
|
/// - options: Array of (label, value) tuples.
|
||||||
|
/// - selection: Binding to selected value.
|
||||||
|
/// - accentColor: The accent color (default: primary accent).
|
||||||
|
/// - titleAccessory: Optional view after title (e.g., premium crown).
|
||||||
|
public init(
|
||||||
|
title: String,
|
||||||
|
subtitle: String,
|
||||||
|
options: [(String, T)],
|
||||||
|
selection: Binding<T>,
|
||||||
|
accentColor: Color = .Accent.primary,
|
||||||
|
@ViewBuilder titleAccessory: () -> Accessory? = { nil as EmptyView? }
|
||||||
|
) {
|
||||||
|
self.title = title
|
||||||
|
self.subtitle = subtitle
|
||||||
|
self.options = options
|
||||||
|
self._selection = selection
|
||||||
|
self.accentColor = accentColor
|
||||||
|
self.titleAccessory = titleAccessory()
|
||||||
|
}
|
||||||
|
|
||||||
|
public var body: some View {
|
||||||
|
VStack(alignment: .leading, spacing: Design.Spacing.small) {
|
||||||
|
// Title row with optional accessory
|
||||||
|
HStack(spacing: Design.Spacing.xSmall) {
|
||||||
|
Text(title)
|
||||||
|
.font(.system(size: Design.BaseFontSize.medium, weight: .medium))
|
||||||
|
.foregroundStyle(.white)
|
||||||
|
|
||||||
|
if let titleAccessory {
|
||||||
|
titleAccessory
|
||||||
|
.font(.system(size: Design.BaseFontSize.small))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Subtitle
|
||||||
|
Text(subtitle)
|
||||||
|
.font(.system(size: Design.BaseFontSize.caption))
|
||||||
|
.foregroundStyle(.white.opacity(Design.Opacity.medium))
|
||||||
|
|
||||||
|
// Segmented buttons
|
||||||
|
HStack(spacing: Design.Spacing.small) {
|
||||||
|
ForEach(options.indices, id: \.self) { index in
|
||||||
|
let option = options[index]
|
||||||
|
Button {
|
||||||
|
selection = option.1
|
||||||
|
} label: {
|
||||||
|
Text(option.0)
|
||||||
|
.font(.system(size: Design.BaseFontSize.body, weight: .medium))
|
||||||
|
.foregroundStyle(selection == option.1 ? .black : .white.opacity(Design.Opacity.strong))
|
||||||
|
.padding(.vertical, Design.Spacing.small)
|
||||||
|
.frame(maxWidth: .infinity)
|
||||||
|
.background(
|
||||||
|
Capsule()
|
||||||
|
.fill(selection == option.1 ? accentColor : Color.white.opacity(Design.Opacity.subtle))
|
||||||
|
)
|
||||||
|
}
|
||||||
|
.buttonStyle(.plain)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.padding(.vertical, Design.Spacing.xSmall)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: - Convenience Initializer
|
||||||
|
|
||||||
|
extension SettingsSegmentedPicker where Accessory == EmptyView {
|
||||||
|
/// Creates a settings segmented picker without a title accessory.
|
||||||
|
public init(
|
||||||
|
title: String,
|
||||||
|
subtitle: String,
|
||||||
|
options: [(String, T)],
|
||||||
|
selection: Binding<T>,
|
||||||
|
accentColor: Color = .Accent.primary
|
||||||
|
) {
|
||||||
|
self.title = title
|
||||||
|
self.subtitle = subtitle
|
||||||
|
self.options = options
|
||||||
|
self._selection = selection
|
||||||
|
self.accentColor = accentColor
|
||||||
|
self.titleAccessory = nil
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// MARK: - Preview
|
||||||
|
|
||||||
|
#Preview {
|
||||||
|
VStack(spacing: Design.Spacing.large) {
|
||||||
|
SettingsSegmentedPicker(
|
||||||
|
title: "Camera",
|
||||||
|
subtitle: "Choose between front and back camera lenses",
|
||||||
|
options: [("Front", "front"), ("Back", "back")],
|
||||||
|
selection: .constant("front")
|
||||||
|
)
|
||||||
|
|
||||||
|
SettingsSegmentedPicker(
|
||||||
|
title: "Flash Mode",
|
||||||
|
subtitle: "Controls automatic flash behavior for photos",
|
||||||
|
options: [("Off", 0), ("On", 1), ("Auto", 2)],
|
||||||
|
selection: .constant(0)
|
||||||
|
)
|
||||||
|
|
||||||
|
SettingsSegmentedPicker(
|
||||||
|
title: "HDR Mode",
|
||||||
|
subtitle: "High Dynamic Range for better lighting in photos",
|
||||||
|
options: [("Off", "off"), ("On", "on"), ("Auto", "auto")],
|
||||||
|
selection: .constant("off"),
|
||||||
|
titleAccessory: {
|
||||||
|
Image(systemName: "crown.fill")
|
||||||
|
.foregroundStyle(.orange)
|
||||||
|
}
|
||||||
|
)
|
||||||
|
}
|
||||||
|
.padding()
|
||||||
|
.background(Color.Surface.overlay)
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user