Add pager

Author: marshallino16

Snip.xcodeproj/project.pbxproj

@@ -17,6 +17,7 @@
 		791B8D7624E28EF800851E2A /* AppState.swift in Sources */ = {isa = PBXBuildFile; fileRef = 791B8D7524E28EF800851E2A /* AppState.swift */; };
 		791B8D7824E2C6C200851E2A /* SharePicker.swift in Sources */ = {isa = PBXBuildFile; fileRef = 791B8D7724E2C6C200851E2A /* SharePicker.swift */; };
 		79284D6B2507CCDC00210E61 /* WelcomeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79284D6A2507CCDC00210E61 /* WelcomeView.swift */; };
+		79284D6D2507DE7F00210E61 /* PagerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 79284D6C2507DE7F00210E61 /* PagerView.swift */; };
 		7936F88F24D450B900F09AE7 /* SnipItemsList.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7936F88E24D450B900F09AE7 /* SnipItemsList.swift */; };
 		7936F89324D6377D00F09AE7 /* List.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7936F89224D6377D00F09AE7 /* List.swift */; };
 		7936F89624D637D800F09AE7 /* Introspect in Frameworks */ = {isa = PBXBuildFile; productRef = 7936F89524D637D800F09AE7 /* Introspect */; };
@@ -88,6 +89,7 @@
 		791B8D7524E28EF800851E2A /* AppState.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppState.swift; sourceTree = "<group>"; };
 		791B8D7724E2C6C200851E2A /* SharePicker.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SharePicker.swift; sourceTree = "<group>"; };
 		79284D6A2507CCDC00210E61 /* WelcomeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = WelcomeView.swift; sourceTree = "<group>"; };
+		79284D6C2507DE7F00210E61 /* PagerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PagerView.swift; sourceTree = "<group>"; };
 		7936F88E24D450B900F09AE7 /* SnipItemsList.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SnipItemsList.swift; sourceTree = "<group>"; };
 		7936F89224D6377D00F09AE7 /* List.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = List.swift; sourceTree = "<group>"; };
 		7936F89924D845B600F09AE7 /* SnipItemsListAction.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SnipItemsListAction.swift; sourceTree = "<group>"; };
@@ -394,6 +396,7 @@
 			children = (
 				79F07A2824D3050500469324 /* ImageButton.swift */,
 				791AC9C424DAE45D00CAB87C /* DeferView.swift */,
+				79284D6C2507DE7F00210E61 /* PagerView.swift */,
 			);
 			path = Misc;
 			sourceTree = "<group>";
@@ -527,6 +530,7 @@
 				7936F89F24DA02DD00F09AE7 /* TextField.swift in Sources */,
 				79C612B12506278D008672BA /* DeepLinkManager.swift in Sources */,
 				79C463D024F44233009B2DA3 /* MarkdownHTMLViewer.swift in Sources */,
+				79284D6D2507DE7F00210E61 /* PagerView.swift in Sources */,
 				79956A4724E57AC700B823E1 /* Dictionary.swift in Sources */,
 				79BC1D2224D16E67008FD16E /* SnipViewApp.swift in Sources */,
 				791B8D7624E28EF800851E2A /* AppState.swift in Sources */,

Snip/Components/Misc/PagerView.swift

@@ -0,0 +1,59 @@
+//
+//  PagerView.swift
+//  Snip
+//
+//  Created by Anthony Fernandez on 9/8/20.
+//  Copyright © 2020 pictarine. All rights reserved.
+//
+
+import SwiftUI
+
+struct PagerView<Content: View>: View {
+    let pageCount: Int
+    @Binding var currentIndex: Int
+    let content: Content
+
+    @GestureState private var translation: CGFloat = 0
+
+    init(pageCount: Int, currentIndex: Binding<Int>, @ViewBuilder content: () -> Content) {
+        self.pageCount = pageCount
+        self._currentIndex = currentIndex
+        self.content = content()
+    }
+
+    var body: some View {
+        GeometryReader { geometry in
+            ZStack {
+                HStack(spacing: 0) {
+                    self.content.frame(width: geometry.size.width)
+                }
+                .frame(width: geometry.size.width, alignment: .leading)
+                .offset(x: -CGFloat(self.currentIndex) * geometry.size.width)
+                .offset(x: self.translation)
+                .animation(.interactiveSpring())
+                .gesture(
+                    DragGesture().updating(self.$translation) { value, state, _ in
+                        state = value.translation.width
+                    }.onEnded { value in
+                        let offset = value.translation.width / geometry.size.width
+                        let newIndex = (CGFloat(self.currentIndex) - offset).rounded()
+                        self.currentIndex = min(max(Int(newIndex), 0), self.pageCount - 1)
+                    }
+                )
+                
+                VStack {
+                    Spacer()
+                    
+                    HStack {
+                        ForEach(0..<self.pageCount, id: \.self) { index in
+                            Circle()
+                                .fill(index == self.currentIndex ? Color.white : Color.gray)
+                                .frame(width: 10, height: 10)
+                        }
+                    }
+                }
+                .offset(y: 16)
+            }
+        }
+    }
+}

Snip/Components/Welcome/WelcomeView.swift

@@ -11,6 +11,7 @@ import SwiftUI
 struct WelcomeView: View {
 
   @ObservedObject var viewModel: WelcomeViewModel
+  @State var currentPage = 0
 
   var body: some View {
     ZStack {
@@ -20,20 +21,52 @@ struct WelcomeView: View {
       .transition(AnyTransition.opacity)
 
       VStack(alignment: .leading) {
-        Text("zeijr")
+        PagerView(pageCount: 3, currentIndex: $currentPage) {
+            firstView
+            secondView
+        }
       }
       .frame(width: viewModel.size.width / 2.5,
              height: viewModel.size.height / 1.5,
              alignment: .center)
-      .padding()
-      .background(Color.red)
+      .background(Color.secondary)
       .cornerRadius(4.0)
       .offset(x: 0,
               y: viewModel.isVisible ? ((viewModel.size.height / 2) - ((viewModel.size.height / 1.5) / 1.5)) : 10000)
       .transition(AnyTransition.move(edge: .bottom))
     }
   }
 
+  var firstView: some View {
+    VStack {
+      Spacer()
+      Text("Test 1")
+      Spacer()
+      HStack {
+        Spacer()
+        Button(action: {
+          self.currentPage += 1
+        }) {
+          Text("Next")
+          .padding(EdgeInsets(top: 8, leading: 20, bottom: 8, trailing: 20))
+          .background(Color.accent)
+          .cornerRadius(4)
+        }
+        .buttonStyle(PlainButtonStyle())
+      }
+    }
+    .padding()
+  }
+  
+  var secondView: some View {
+    VStack {
+      Spacer()
+      Text("Test 2")
+      Spacer()
+    }
+    .padding()
+  }
+  
   var backgroundView: some View {
     viewModel.isVisible ? Color.black.opacity(0.8) : Color.clear
   }

Snip/SnipViewApp.swift

@@ -78,7 +78,7 @@ struct SnipViewApp: View {
 
   var welcomePanel: some View {
     GeometryReader { reader in
-      WelcomeView(viewModel: WelcomeViewModel(isVisible: false, readerSize: reader.size))
+      WelcomeView(viewModel: WelcomeViewModel(isVisible: true, readerSize: reader.size))
     }
   }