@momo-kits/native-kits 0.0.1-beta.2

package/ios/Swipeable/SwipeCell.swift

@@ -0,0 +1,270 @@
+import Foundation
+import SwiftUI
+
+// MARK: - SwipeCellModifier
+
+public struct SwipeCellModifier: ViewModifier {
+    var id: String
+    var cellWidth: CGFloat = .infinity
+    var leadingSideGroup: [SwipeCellActionItem] = []
+    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?
+
+    public func body(content: Content)->some View {
+        ZStack {
+            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:)))
+                    
+        }.frame(width: cellWidth)
+            .edgesIgnoringSafeArea(.horizontal)
+            .clipped()
+            .onChange(of: self.currentUserInteractionCellID) { _ in
+                if let currentDragCellID = self.currentUserInteractionCellID, currentDragCellID != self.id && self.openSideLock != nil {
+                    // if this cell has an open side area and is not the cell being dragged, close the cell
+                    self.setOffsetX(value: 0)
+                    // reset the drag cell id to nil
+                    self.currentUserInteractionCellID = nil
+                }
+            }
+    }
+    
+    internal func swipeToRevealArea(swipeItemGroup: [SwipeCellActionItem], side: SwipeGroupSide)->some View {
+        HStack {
+            if side == .trailing {
+                Spacer()
+            }
+            ZStack {
+                HStack(spacing: 0) {
+                    ForEach(swipeItemGroup) { item in
+                        SwiftUI.Button {
+                            self.setOffsetX(value: 0)
+                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.3) {
+                                item.actionCallback()
+                            }
+                        } label: {
+                            self.buttonContentView(item: item, group: swipeItemGroup, side: side)
+                        }.buttonStyle(BorderlessButtonStyle())
+                    }
+                }
+            }.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!()
+                } else {
+                    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)
+            self.offsetX = menuWidth * openSideLock!.sideFactor + horizontalTranslation
+            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
+        } else {
+            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
+
+        if self.offsetX == 0 {
+            self.openSideLock = nil
+        } else if self.offsetX > 0 {
+            if self.leadingSideGroup.isEmpty == false {
+                if self.offsetX < settings.openTriggerValue || (self.openSideLock == .leading && self.offsetX < self.menuWidth(side: .leading) * 0.8) {
+                    self.setOffsetX(value: 0)
+                } else if let leftItem = self.leadingSideGroup.filter({ $0.swipeOutAction == true }).first, self.offsetX.magnitude > swipeOutTriggerValue {
+                    self.swipeOutAction(item: leftItem, sideFactor: 1)
+                } else {
+                    self.lockSideMenu(side: .leading)
+                }
+                
+            } else {
+                // leading group emtpy
+                self.setOffsetX(value: 0)
+            }
+        } else if self.offsetX < 0 {
+            if self.trailingSideGroup.isEmpty == false {
+                if self.offsetX.magnitude < settings.openTriggerValue || (self.openSideLock == .trailing && self.offsetX > -self.menuWidth(side: .trailing) * 0.8) {
+                    self.setOffsetX(value: 0)
+                } else if let rightItem = self.trailingSideGroup.filter({ $0.swipeOutAction == true }).first, self.offsetX.magnitude > swipeOutTriggerValue {
+                    self.swipeOutAction(item: rightItem, sideFactor: -1)
+                } else {
+                    self.lockSideMenu(side: .trailing)
+                }
+
+            } else {
+                // trailing group emtpy
+                self.setOffsetX(value: 0)
+            }
+        }
+    }
+    
+    internal func triggerHapticFeedbackIfNeeded(horizontalTranslation: CGFloat) {
+        let side: SwipeGroupSide = horizontalTranslation > 0 ? .leading : .trailing
+        let group = side == .leading ? self.leadingSideGroup : self.trailingSideGroup
+        let swipeOutActionCondition = self.warnSwipeOutCondition(side: side, hasSwipeOut: true)
+        if let item = self.swipeOutItemWithHapticFeedback(group: group), self.hapticFeedbackOccurred == false, swipeOutActionCondition == true {
+            self.generator.notificationOccurred(item.swipeOutHapticFeedbackType!)
+            self.hapticFeedbackOccurred = true
+        }
+    }
+    
+    internal func swipeOutItemWithHapticFeedback(group: [SwipeCellActionItem])->SwipeCellActionItem? {
+        if let item = group.filter({ $0.swipeOutAction == true }).first {
+            if item.swipeOutHapticFeedbackType != nil {
+                return item
+            }
+        }
+        return nil
+    }
+    
+    internal func swipeOutAction(item: SwipeCellActionItem, sideFactor: CGFloat) {
+        if item.swipeOutIsDestructive {
+            let swipeOutWidth = cellWidth + 10
+            self.setOffsetX(value: swipeOutWidth * sideFactor)
+            self.openSideLock = nil
+        } 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
+        self.hapticFeedbackOccurred = false
+    }
+
+    internal func setOffsetX(value: CGFloat) {
+        withAnimation(.spring()) {
+            self.offsetX = value
+        }
+        if self.offsetX == 0 {
+            self.openSideLock = nil
+            self.hapticFeedbackOccurred = false
+        }
+    }
+
+    internal func itemButtonWidth(item: SwipeCellActionItem, itemGroup: [SwipeCellActionItem], side: SwipeGroupSide)->CGFloat {
+        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 }) {
+            return 0
+        } else {
+            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
+        }
+        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
+        }
+    }
+}
+
+public extension View {
+    /// swipe cell modifier
+    /// - Parameters:
+    ///   - id: the string id of this cell. The default value is a uuid string. If you want to set the currentUserInteractionCellID yourself, e.g. for tap to close functionality, you need to override this id value with your own cell id.
+    ///   - cellWidth: the width of the content view - typically a cell or row in a list under which the swipe to reveal menu should appear.
+    ///   - leadingSideGroup: the button group on the leading side that shall appear when the user swipes the cell to the right
+    ///   - trailingSideGroup: the button group on the trailing side that shall appear when the user swipes the cell to the left
+    ///   - currentUserInteractionCellID: a Binding of an optional UUID that should be set either in the view model of the parent view in which the cells appear or as a State variable into the parent view itself. Don't assign it a value!
+    ///   - settings: settings. can be omitted in which case the settings struct default values apply.
+    /// - Returns: the modified view of the view that can be swiped.
+    func swipeCell(id: String = UUID().uuidString, cellWidth: CGFloat = .infinity, leadingSideGroup: [SwipeCellActionItem], trailingSideGroup: [SwipeCellActionItem], currentUserInteractionCellID: Binding<String?> = .constant(""), settings: SwipeCellSettings = SwipeCellSettings())->some View {
+        self.modifier(SwipeCellModifier(id: id, cellWidth: cellWidth, leadingSideGroup: leadingSideGroup, trailingSideGroup: trailingSideGroup, currentUserInteractionCellID: currentUserInteractionCellID, settings: settings))
+    }
+}
+
+public extension View {
+    func castToAnyView()->AnyView {
+        return AnyView(self)
+    }
+}

package/ios/Swipeable/SwipeCellModel.swift

@@ -0,0 +1,86 @@
+
+
+import Foundation
+import SwiftUI
+
+// MARK: - SwipeGroupSide
+
+public enum SwipeGroupSide {
+    case leading
+    case trailing
+
+    // MARK: Internal
+
+    var sideFactor: CGFloat {
+        switch self {
+            case .leading:
+                return 1
+
+            case .trailing:
+                return -1
+        }
+    }
+}
+
+// MARK: - SwipeCellActionItem
+
+public struct SwipeCellActionItem: Identifiable {
+    // MARK: Lifecycle
+
+    /// Initializer
+    /// - Parameter id: Required to identify each buttin in the side menu. Default is a random uuid string.
+    /// - Parameter buttonView: The view in the foreground of the menu button. Make sure to set a maximum frame height less than the cell height!
+    /// - Parameter swipeOutButtonView: Alternative button view that is displayed only when the offset during swipe is beyond the swipe out trigger value.
+    /// - Parameter  buttonWidth: Width of the button. The the open side menu width is calculated from the sum of all button widths. Default is 75.
+    /// - Parameter backgroundColor: The background colour of the the menu button.
+    /// - Parameter swipeOutAction: A Boolean that determines if a swipe out action is activated or not. Default is false.
+    /// - Parameter swipeOutHapticFeedbackType: If a swipeOutAction is activated, a haptic feedback will occur after the swipe out threshold is passed. Default is nil.
+    /// - Parameter swipeOutIsDestructive: A Boolean that determines if the swipe out is destructive. If true, the content cell view will be "move out of sight" once the swipe out is triggered.
+    public init(id: String = UUID().uuidString, buttonView: @escaping ()->AnyView, swipeOutButtonView: (()->AnyView)? = nil, buttonWidth: CGFloat = 75, backgroundColor: Color, swipeOutAction: Bool = false, swipeOutHapticFeedbackType: UINotificationFeedbackGenerator.FeedbackType? = nil, swipeOutIsDestructive: Bool = true, actionCallback: @escaping ()->()) {
+        self.id = id
+        self.buttonView = buttonView
+        self.swipeOutButtonView = swipeOutButtonView
+        self.buttonWidth = buttonWidth
+        self.backgroundColor = backgroundColor
+        self.swipeOutAction = swipeOutAction
+        self.swipeOutHapticFeedbackType = swipeOutHapticFeedbackType
+        self.swipeOutIsDestructive = swipeOutIsDestructive
+        self.actionCallback = actionCallback
+    }
+
+    // MARK: Public
+
+    public var id: String
+    public var buttonView: ()->AnyView
+    public var swipeOutButtonView: (()->AnyView)?
+    public var buttonWidth: CGFloat
+    public var backgroundColor: Color
+    public var swipeOutAction: Bool
+    public var swipeOutHapticFeedbackType: UINotificationFeedbackGenerator.FeedbackType?
+    public var swipeOutIsDestructive: Bool
+    /// public var swipeOutButtonViewScaleFactor: CGFloat
+    public var actionCallback: ()->()
+}
+
+// MARK: - SwipeCellSettings
+
+/// Swipe Cell Settings
+public struct SwipeCellSettings {
+    // MARK: Lifecycle
+
+    /// initializer
+    public init(openTriggerValue: CGFloat = 60, swipeOutTriggerRatio: CGFloat = 0.7, addWidthMargin: CGFloat = 5) {
+        self.openTriggerValue = openTriggerValue
+        self.swipeOutTriggerRatio = swipeOutTriggerRatio
+        self.addWidthMargin = addWidthMargin
+    }
+
+    // MARK: Public
+
+    /// minimum horizontal translation value necessary to open the side menu
+    public var openTriggerValue: CGFloat
+    /// the ratio of the total cell width that triggers a swipe out action (provided one action has swipe out activated)
+    public var swipeOutTriggerRatio: CGFloat = 0.7
+    /// An additional value to add to the open menu width. This is useful if the cell has rounded corners.
+    public var addWidthMargin: CGFloat = 5
+}

package/ios/Theme.md

@@ -0,0 +1,18 @@
+## 🎯 Usage
+### Declaring themes with Asset
+To get started, you need to define four different types of assets in xcode
+```swift
+    public static let primary = Color("Primary")
+    public static let primaryDark = Color("PrimaryDark")
+    public static let primaryLight = Color("PrimaryLight")
+    public static let secondary = Color("Secondary")
+    public static let background = Color("Background")
+    public static let border = Color("Border")
+    public static let text = Color("Text")
+    public static let textSecondary = Color("TextSecondary")
+    public static let card = Color("Card")
+    public static let error = Color("Error")
+    public static let info = Color("Info")
+    public static let success = Color("Success")
+```
+> You can refer Colors class with static colors

package/ios/Typography/Typography.swift

@@ -0,0 +1,30 @@
+import SwiftUI
+
+public extension Font {
+    static func appFont(size: CGFloat) -> Font {
+        return Font.custom("SFProText", size: size)
+    }
+
+    static let h1 = appFont(size: 36).weight(.semibold)
+    static let h2 = appFont(size: 32).weight(.semibold)
+    static let h3 = appFont(size: 28).weight(.semibold)
+    static let h4 = appFont(size: 24).weight(.semibold)
+    static let title1 = appFont(size: 20).weight(.bold)
+    static let title2 = appFont(size: 18).weight(.bold)
+    static let title3 = appFont(size: 16).weight(.bold)
+    static let headerText1 = appFont(size: 15).weight(.semibold)
+    static let headerText2 = appFont(size: 14).weight(.semibold)
+    static let headerText3 = appFont(size: 12).weight(.semibold)
+    static let paragraph = appFont(size: 15).weight(.regular)
+    static let description1 = appFont(size: 14).weight(.regular)
+    static let description2 = appFont(size: 12).weight(.regular)
+    static let description3 = appFont(size: 10).weight(.regular)
+    static let label1 = appFont(size: 14).weight(.medium)
+    static let label2 = appFont(size: 12).weight(.medium)
+    static let label3 = appFont(size: 10).weight(.medium)
+    static let label4 = appFont(size: 8).weight(.medium)
+    static let action1 = appFont(size: 16).weight(.bold)
+    static let action2 = appFont(size: 15).weight(.bold)
+    static let action3 = appFont(size: 12).weight(.bold)
+    static let action4 = appFont(size: 10).weight(.bold)
+}

package/ios/native-kits.podspec

@@ -0,0 +1,15 @@
+Pod::Spec.new do |spec|
+    spec.name          = 'MoMoUIKits'
+    spec.version       = '1.0.0'
+    spec.license       = { :type => 'MIT', :file => 'LICENSE' }
+    spec.homepage      = 'https://gitlab.com'
+    spec.authors       = { 'Developer' => 'momo@mservice.com.vn' }
+    spec.summary       = 'Components for SwiftUI'
+    spec.source        = { :git => 'https://gitlab.com', :tag => 'v1.0.0' }
+    spec.swift_versions = ['5.0']
+    spec.ios.deployment_target  = '14.0'
+
+    spec.source_files   = "**/*.swift"
+
+    spec.framework      = 'SwiftUI', 'Combine'
+  end

package/package.json

@@ -0,0 +1,8 @@
+{
+    "name": "@momo-kits/native-kits",
+    "version": "0.0.1-beta.2",
+    "private": false,
+    "dependencies": {},
+    "devDependencies": {},
+    "license": "MoMo"
+}

package/publish.sh

@@ -0,0 +1,28 @@
+#!/bin/bash
+rm -rf dist
+mkdir dist
+
+cp . ./dist
+
+# GET VERSION from mck_package.json
+VERSIONSTRING=( v$(jq .version package.json) )
+VERSION=(${VERSIONSTRING//[\"]/})
+echo VERSION: $VERSION
+
+rsync -r --verbose --exclude '*.mdx' --exclude '*Demo.js'  --exclude 'props-type.js' --exclude 'prop-types.js' ./* dist
+
+# #babel component to dist
+#babel ./dist -d dist --copy-files
+
+#copy option
+#cp -r ./src/ dist
+
+
+#npm login
+#publish dist to npm
+cd dist
+npm publish --tag beta --access=public
+cd ..
+rm -rf dist
+
+curl -X POST -H 'Content-Type: application/json' 'https://chat.googleapis.com/v1/spaces/AAAAbP8987c/messages?key=AIzaSyDdI0hCZtE6vySjMm-WEfRq3CPzqKqqsHI&token=UGSFRvk_oYb9uGsAgs31bVvMm6jDkmD8zihGm3eyaQA%3D&threadKey=JoaXTEYaNNkl' -d '{"text": "@momo-kits/native new version release: '*"$VERSION"*' https://www.npmjs.com/package/@momo-kits/native-kits"}'