@momo-kits/native-kits 0.0.1-beta.5 → 0.0.2-alpha.1

package/ios/Swipeable/SwipeCell.swift

@@ -1,6 +1,193 @@
 import Foundation
 import SwiftUI
 
+private let swipeActionWidth: CGFloat = 56
+
+// MARK: - Swipe
+
+public struct Swipe<Content: View>: View {
+    @Environment(\.appTheme) private var theme
+
+    private let leftActions: [SwipeAction]
+    private let rightActions: [SwipeAction]
+    private let height: CGFloat
+    private let itemRadius: CGFloat
+    private let onSwipeableOpen: () -> Void
+    private let onSwipeableClose: () -> Void
+    private let onSwipeableLeftOpen: () -> Void
+    private let onSwipeableRightOpen: () -> Void
+    private let content: () -> Content
+
+    @State private var offsetX: CGFloat = 0
+    @State private var dragStartOffsetX: CGFloat?
+
+    public init(
+        leftActions: [SwipeAction] = [],
+        rightActions: [SwipeAction] = [],
+        height: CGFloat = 56,
+        itemRadius: CGFloat = 0,
+        onSwipeableOpen: @escaping () -> Void = {},
+        onSwipeableClose: @escaping () -> Void = {},
+        onSwipeableLeftOpen: @escaping () -> Void = {},
+        onSwipeableRightOpen: @escaping () -> Void = {},
+        @ViewBuilder content: @escaping () -> Content
+    ) {
+        self.leftActions = Array(leftActions.prefix(3))
+        self.rightActions = Array(rightActions.prefix(3))
+        self.height = height
+        self.itemRadius = itemRadius
+        self.onSwipeableOpen = onSwipeableOpen
+        self.onSwipeableClose = onSwipeableClose
+        self.onSwipeableLeftOpen = onSwipeableLeftOpen
+        self.onSwipeableRightOpen = onSwipeableRightOpen
+        self.content = content
+    }
+
+    public var body: some View {
+        let leftWidth = swipeActionWidth * CGFloat(leftActions.count)
+        let rightWidth = swipeActionWidth * CGFloat(rightActions.count)
+        let shape = RoundedRectangle(cornerRadius: itemRadius)
+
+        ZStack {
+            if !leftActions.isEmpty {
+                HStack(spacing: 0) {
+                    ForEach(Array(leftActions.enumerated()), id: \.offset) { _, action in
+                        SwipeActionButton(
+                            action: action,
+                            height: height,
+                            itemRadius: itemRadius,
+                            defaultBackgroundColor: theme.colors.primary
+                        )
+                    }
+                    Spacer(minLength: 0)
+                }
+            }
+
+            if !rightActions.isEmpty {
+                HStack(spacing: 0) {
+                    Spacer(minLength: 0)
+                    ForEach(Array(rightActions.enumerated()), id: \.offset) { _, action in
+                        SwipeActionButton(
+                            action: action,
+                            height: height,
+                            itemRadius: itemRadius,
+                            defaultBackgroundColor: theme.colors.error.primary
+                        )
+                    }
+                }
+            }
+
+            ZStack {
+                theme.colors.background.surface
+                content()
+            }
+            .frame(maxWidth: .infinity)
+            .frame(height: height)
+            .clipShape(shape)
+            .offset(x: offsetX)
+            .gesture(
+                DragGesture(minimumDistance: 8, coordinateSpace: .local)
+                    .onChanged { value in
+                        dragOnChanged(value: value, leftWidth: leftWidth, rightWidth: rightWidth)
+                    }
+                    .onEnded { _ in
+                        dragStartOffsetX = nil
+                        snapToClosest(leftWidth: leftWidth, rightWidth: rightWidth)
+                    }
+            )
+        }
+        .frame(maxWidth: .infinity)
+        .frame(height: height)
+        .clipped()
+    }
+
+    private func dragOnChanged(value: DragGesture.Value, leftWidth: CGFloat, rightWidth: CGFloat) {
+        if dragStartOffsetX == nil {
+            dragStartOffsetX = offsetX
+        }
+
+        let proposedOffset = (dragStartOffsetX ?? 0) + value.translation.width
+        offsetX = min(max(proposedOffset, -rightWidth), leftWidth)
+    }
+
+    private func snapToClosest(leftWidth: CGFloat, rightWidth: CGFloat) {
+        let target: CGFloat
+
+        if offsetX > leftWidth * 0.5, !leftActions.isEmpty {
+            onSwipeableLeftOpen()
+            onSwipeableOpen()
+            target = leftWidth
+        } else if offsetX < -rightWidth * 0.5, !rightActions.isEmpty {
+            onSwipeableRightOpen()
+            onSwipeableOpen()
+            target = -rightWidth
+        } else {
+            onSwipeableClose()
+            target = 0
+        }
+
+        withAnimation(.easeOut(duration: 0.2)) {
+            offsetX = target
+        }
+    }
+}
+
+public extension Swipe where Content == EmptyView {
+    init(
+        leftActions: [SwipeAction] = [],
+        rightActions: [SwipeAction] = [],
+        height: CGFloat = 56,
+        itemRadius: CGFloat = 0,
+        onSwipeableOpen: @escaping () -> Void = {},
+        onSwipeableClose: @escaping () -> Void = {},
+        onSwipeableLeftOpen: @escaping () -> Void = {},
+        onSwipeableRightOpen: @escaping () -> Void = {}
+    ) {
+        self.init(
+            leftActions: leftActions,
+            rightActions: rightActions,
+            height: height,
+            itemRadius: itemRadius,
+            onSwipeableOpen: onSwipeableOpen,
+            onSwipeableClose: onSwipeableClose,
+            onSwipeableLeftOpen: onSwipeableLeftOpen,
+            onSwipeableRightOpen: onSwipeableRightOpen
+        ) {
+            EmptyView()
+        }
+    }
+}
+
+private struct SwipeActionButton: View {
+    let action: SwipeAction
+    let height: CGFloat
+    let itemRadius: CGFloat
+    let defaultBackgroundColor: Color
+
+    var body: some View {
+        SwiftUI.Button(action: action.onPress) {
+            VStack(spacing: Spacing.XXS) {
+                if !action.icon.isEmpty {
+                    Icon(source: action.icon, size: 20, color: Colors.black01)
+                }
+
+                if !action.label.isEmpty {
+                    MomoText(
+                        action.label,
+                        typography: .labelSMedium,
+                        color: Colors.black01,
+                        maxLines: 1
+                    )
+                }
+            }
+            .frame(width: swipeActionWidth, height: height)
+            .background(action.backgroundColor ?? defaultBackgroundColor)
+            .clipShape(RoundedRectangle(cornerRadius: itemRadius))
+        }
+        .buttonStyle(.plain)
+    }
+}
+
 // MARK: - SwipeCellModifier
 
 public struct SwipeCellModifier: ViewModifier {
@@ -10,9 +197,9 @@ public struct SwipeCellModifier: ViewModifier {
     var trailingSideGroup: [SwipeCellActionItem] = []
     @Binding var currentUserInteractionCellID: String?
     var settings: SwipeCellSettings = .init()
-    
+
     @State private var offsetX: CGFloat = 0
-    
+
     let generator = UINotificationFeedbackGenerator()
     @State private var hapticFeedbackOccurred: Bool = false
     @State private var openSideLock: SwipeGroupSide?
@@ -22,15 +209,23 @@ public struct SwipeCellModifier: ViewModifier {
             if self.leadingSideGroup.isEmpty == false && self.offsetX != 0 {
                 self.swipeToRevealArea(swipeItemGroup: self.leadingSideGroup, side: .leading)
             }
-                
+
             if self.trailingSideGroup.isEmpty == false && self.offsetX != 0 {
                 self.swipeToRevealArea(swipeItemGroup: self.trailingSideGroup, side: .trailing)
             }
-                
+
             content
                 .offset(x: self.offsetX)
-                .gesture(DragGesture(minimumDistance: 30, coordinateSpace: .local).onChanged(self.dragOnChanged(value:)).onEnded(dragOnEnded(value:)))
-                    
+                .simultaneousGesture(
+                    DragGesture(minimumDistance: 30, coordinateSpace: .local)
+                        .onChanged { value in
+                            self.dragOnChanged(value: value)
+                        }
+                        .onEnded { value in
+                            self.dragOnEnded(value: value)
+                        }
+                )
+
         }.frame(width: cellWidth)
             .edgesIgnoringSafeArea(.horizontal)
             .clipped()
@@ -43,7 +238,7 @@ public struct SwipeCellModifier: ViewModifier {
                 }
             }
     }
-    
+
     internal func swipeToRevealArea(swipeItemGroup: [SwipeCellActionItem], side: SwipeGroupSide)->some View {
         HStack {
             if side == .trailing {
@@ -63,17 +258,17 @@ public struct SwipeCellModifier: ViewModifier {
                     }
                 }
             }.opacity(self.swipeRevealAreaOpacity(side: side))
-    
+
             if side == .leading {
                 Spacer()
             }
         }
     }
-    
+
     internal func buttonContentView(item: SwipeCellActionItem, group: [SwipeCellActionItem], side: SwipeGroupSide)->some View {
         ZStack {
             item.backgroundColor
-                
+
             HStack {
                 if self.warnSwipeOutCondition(side: side, hasSwipeOut: item.swipeOutAction) && item.swipeOutButtonView != nil {
                     item.swipeOutButtonView!()
@@ -81,28 +276,28 @@ public struct SwipeCellModifier: ViewModifier {
                     item.buttonView()
                 }
             }
-        
+
         }.frame(width: self.itemButtonWidth(item: item, itemGroup: group, side: side))
     }
-    
+
     internal func menuWidth(side: SwipeGroupSide)->CGFloat {
         switch side {
         case .leading:
             return self.leadingSideGroup.map { $0.buttonWidth }.reduce(0, +)
-          
+
         case .trailing:
             return self.trailingSideGroup.map { $0.buttonWidth }.reduce(0, +)
         }
     }
-    
+
     // MARK: drag gesture
-    
+
     internal func dragOnChanged(value: DragGesture.Value) {
         let horizontalTranslation = value.translation.width
         if self.nonDraggableCondition(horizontalTranslation: horizontalTranslation) {
             return
         }
-        
+
         if self.openSideLock != nil {
             // if one side is open, we need to add the menu width!
             let menuWidth = self.openSideLock == .leading ? self.menuWidth(side: .leading) : self.menuWidth(side: .trailing)
@@ -110,9 +305,9 @@ public struct SwipeCellModifier: ViewModifier {
             self.triggerHapticFeedbackIfNeeded(horizontalTranslation: horizontalTranslation)
             return
         }
-        
+
         self.triggerHapticFeedbackIfNeeded(horizontalTranslation: horizontalTranslation)
-        
+
         if horizontalTranslation > 8 || horizontalTranslation < -8 { // makes sure the swipe cell doesn't open too easily
             self.currentUserInteractionCellID = self.id
             self.offsetX = horizontalTranslation
@@ -120,11 +315,11 @@ public struct SwipeCellModifier: ViewModifier {
             self.offsetX = 0
         }
     }
-    
+
     internal func nonDraggableCondition(horizontalTranslation: CGFloat)->Bool {
         return self.offsetX == 0 && (self.leadingSideGroup.isEmpty && horizontalTranslation > 0 || self.trailingSideGroup.isEmpty && horizontalTranslation < 0)
     }
-    
+
     internal func dragOnEnded(value: DragGesture.Value) {
         let swipeOutTriggerValue = self.cellWidth * self.settings.swipeOutTriggerRatio
 
@@ -139,7 +334,7 @@ public struct SwipeCellModifier: ViewModifier {
                 } else {
                     self.lockSideMenu(side: .leading)
                 }
-                
+
             } else {
                 // leading group emtpy
                 self.setOffsetX(value: 0)
@@ -160,7 +355,7 @@ public struct SwipeCellModifier: ViewModifier {
             }
         }
     }
-    
+
     internal func triggerHapticFeedbackIfNeeded(horizontalTranslation: CGFloat) {
         let side: SwipeGroupSide = horizontalTranslation > 0 ? .leading : .trailing
         let group = side == .leading ? self.leadingSideGroup : self.trailingSideGroup
@@ -170,7 +365,7 @@ public struct SwipeCellModifier: ViewModifier {
             self.hapticFeedbackOccurred = true
         }
     }
-    
+
     internal func swipeOutItemWithHapticFeedback(group: [SwipeCellActionItem])->SwipeCellActionItem? {
         if let item = group.filter({ $0.swipeOutAction == true }).first {
             if item.swipeOutHapticFeedbackType != nil {
@@ -179,7 +374,7 @@ public struct SwipeCellModifier: ViewModifier {
         }
         return nil
     }
-    
+
     internal func swipeOutAction(item: SwipeCellActionItem, sideFactor: CGFloat) {
         if item.swipeOutIsDestructive {
             let swipeOutWidth = cellWidth + 10
@@ -188,12 +383,12 @@ public struct SwipeCellModifier: ViewModifier {
         } else {
             self.setOffsetX(value: 0) // open side lock set in function!
         }
-      
+
         DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
             item.actionCallback()
         }
     }
-    
+
     internal func lockSideMenu(side: SwipeGroupSide) {
         self.setOffsetX(value: side.sideFactor * self.menuWidth(side: side))
         self.openSideLock = side
@@ -214,7 +409,7 @@ public struct SwipeCellModifier: ViewModifier {
         let dynamicButtonWidth = self.dynamicButtonWidth(item: item, itemCount: itemGroup.count, side: side)
         let triggerValue = self.cellWidth * settings.swipeOutTriggerRatio
         let swipeOutActionCondition = side == .leading ? self.offsetX > triggerValue : self.offsetX < -triggerValue
-        
+
         if item.swipeOutAction && swipeOutActionCondition {
             return self.offsetX.magnitude + settings.addWidthMargin
         } else if swipeOutActionCondition && item.swipeOutAction == false && itemGroup.contains(where: { $0.swipeOutAction == true }) {
@@ -223,12 +418,12 @@ public struct SwipeCellModifier: ViewModifier {
             return dynamicButtonWidth
         }
     }
-    
+
     internal func dynamicButtonWidth(item: SwipeCellActionItem, itemCount: Int, side: SwipeGroupSide)->CGFloat {
         let menuWidth = self.menuWidth(side: side)
         return (self.offsetX.magnitude + settings.addWidthMargin) * (item.buttonWidth / menuWidth)
     }
-    
+
     internal func warnSwipeOutCondition(side: SwipeGroupSide, hasSwipeOut: Bool)->Bool {
         if hasSwipeOut == false {
             return false
@@ -236,11 +431,11 @@ public struct SwipeCellModifier: ViewModifier {
         let triggerValue = self.cellWidth * settings.swipeOutTriggerRatio
         return (side == .trailing && self.offsetX < -triggerValue) || (side == .leading && self.offsetX > triggerValue)
     }
-    
+
     internal func swipeRevealAreaOpacity(side: SwipeGroupSide)->Double {
         switch side {
         case .leading:
-        
+
             return self.offsetX > 5 ? 1 : 0
         case .trailing:
             return self.offsetX < -5 ? 1 : 0

package/ios/Swipeable/SwipeCellModel.swift

@@ -3,6 +3,27 @@
 import Foundation
 import SwiftUI
 
+// MARK: - SwipeAction
+
+public struct SwipeAction {
+    public init(
+        label: String = "",
+        icon: String = "",
+        backgroundColor: Color? = nil,
+        onPress: @escaping () -> Void = {}
+    ) {
+        self.label = label
+        self.icon = icon
+        self.backgroundColor = backgroundColor
+        self.onPress = onPress
+    }
+
+    public var label: String
+    public var icon: String
+    public var backgroundColor: Color?
+    public var onPress: () -> Void
+}
+
 // MARK: - SwipeGroupSide
 
 public enum SwipeGroupSide {

package/ios/Switch/Switch.swift

@@ -1,44 +1,69 @@
 import Foundation
 import SwiftUI
 
-public struct Switch: View{
+public struct Switch: View {
     @Binding var value: Bool
     var disabled: Bool
-    var onChange: ((Bool)->Void)?
-    
-    public init(_ value: Binding<Bool>,disabled: Bool = false, onChange: ((Bool)->Void)? = nil){
+    var onChange: ((Bool) -> Void)?
+    var title: String?
+    var accessibilityId: String?
+
+    public init(
+        _ value: Binding<Bool>,
+        disabled: Bool = false,
+        onChange: ((Bool) -> Void)? = nil,
+        title: String? = "",
+        accessibilityId: String? = ""
+    ) {
         self._value = value
         self.disabled = disabled
         self.onChange = onChange
+        self.title = title
+        self.accessibilityId = accessibilityId
+    }
+
+    // Mirrors Kotlin's `backgroundColor`: shared by the track AND the inner dot.
+    private var backgroundColor: Color {
+        switch (disabled, value) {
+        case (true, true): return Colors.green09
+        case (true, false): return Colors.black05
+        case (false, true): return Colors.green03
+        case (false, false): return Colors.black07
+        }
+    }
+
+    // Mirrors Kotlin's `circleBackgroundColor` (the outer 14pt thumb circle).
+    private var circleColor: Color {
+        value ? Colors.black01 : Colors.black03
     }
-    
-    
+
+    private var automationId: String {
+        accessibilityId?.isEmpty == false ? accessibilityId! : "toggle_\(title?.isEmpty == false ? title! : "unknown")_\(value)"
+    }
+
     public var body: some View {
         SwiftUI.Button(action: {
-            withAnimation{
+            withAnimation {
                 value.toggle()
                 onChange?(value)
             }
-        }){
-              HStack{
-                  HStack {
-                  }
-                  .frame(width: 6, height: 6)
-                  .background(value ? Colors.pink03 : Colors.black07)
-                  .clipShape(Circle())
-                  .opacity(disabled ? 0.4 : 1)
-              }
-              .frame(width: 14, height: 14)
-              .background(Colors.black01)
-              .clipShape(Circle())
-              .padding(.leading,5)
-              .padding(.trailing,5)
-              
-          }
-          .disabled(disabled)
-          .frame(width: 40, height: 24, alignment: value == true ? .trailing : .leading)
-          .background(value ? Colors.pink03 : Colors.black07)
-          .clipShape(Capsule())
-          .opacity(disabled ? 0.4 : 1)
+        }) {
+            HStack {
+                HStack {}
+                    .frame(width: 6, height: 6)
+                    .background(backgroundColor)
+                    .clipShape(Circle())
+            }
+            .frame(width: 14, height: 14)
+            .background(circleColor)
+            .clipShape(Circle())
+            .padding(.leading, Spacing.XS)
+            .padding(.trailing, Spacing.XS)
+        }
+        .disabled(disabled)
+        .frame(width: 38, height: 20, alignment: value ? .trailing : .leading)
+        .background(backgroundColor)
+        .clipShape(Capsule())
+        .accessibilityIdentifier(automationId)
     }
 }