Demonstrates the use of offsetToPosition modifier

OffsetToPositionDemo.swift

//
//  OffsetToPositionDemo.swift
//
//  Permission is hereby granted, free of charge, to any person obtaining a copy
//  of this software and associated documentation files (the "Software"), to deal
//  in the Software without restriction, including without limitation the rights
//  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
//  of the Software, and to permit persons to whom the Software is furnished to do so,
//  subject to the following conditions:

//  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
//  INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
//  PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
//  COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
//  AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
//  WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
//
//  Created by Adam Fordyce on 15/01/2020.
//  Copyright © 2020 Adam Fordyce. All rights reserved.
//

import SwiftUI
import PureSwiftUI

struct OffsetToPositionDemo: View {
    @State private var phoneButtonPosition: CGPoint = .zero
    @State private var showingDialer = true
    
    var body: some View {
        ZStack {
            VStack(spacing: 20) {
                ForEach(0..<3) { row in
                    HStack(spacing: 20) {
                        ForEach(0..<3) { column in
                            self.createDialerButton(row: row, column: column)
                        }
                    }
                }
                self.createDialerButton(row: 3, column: 0)
            }
            VStack(alignment: .center) {
                TitleText("Conditionally off-setting dialer numbers to absolute position of phone button")
                    .align(.center)
                Spacer()
                HStack {
                    self.createPhoneButton()
                        .zIndex(1)
                    Spacer()
                }
            }
            .padding()
        }
    }
    
    func createPhoneButton() -> some View {
        Button(action: {
            self.showingDialer.toggle()
        }) {
            SFSymbol(.phone_down)
                .dialerButtonStyle()
                .rotateIfNot(showingDialer, -130.degrees)
                .geometryReader { (geo: GeometryProxy) in
                    self.phoneButtonPosition = geo.globalCenter
                }
                .animation(Animation.easeInOut(duration: 1.5))
        }
    }
    
    func createDialerButton(row: Int, column: Int) -> some View {
        let index = row * 3 + column
        return Text("\(index == 9 ? 0 : index + 1)")
            .dialerButtonStyle()
            .opacityIfNot(showingDialer, 0)
            .rotateIfNot(showingDialer, 360.degrees)
            .offsetToPositionIfNot(showingDialer, phoneButtonPosition)
            .animation(Animation.easeInOut(duration: 0.75).delay(0.08 * index))
    }
}

private struct DialerButtonViewModifier: ViewModifier {
    
    public func body(content: Content) -> some View {
        content
            .font(Font.custom("Helvetica Neue", size: 50).weight(.thin))
            .foregroundColor(.black)
            .frame(80)
            .clipCircleWithStroke(.black, lineWidth: 2, fill: Color.white)
            .shadow(4)
    }
}

private extension View {
    func dialerButtonStyle() -> some View {
        modifier(DialerButtonViewModifier())
    }
}

struct OffsetToPositionDemo_Previews: PreviewProvider {
    struct OffsetToPositionDemo_Harness: View {

        var body: some View {
            OffsetToPositionDemo()
        }
    }

    static var previews: some View {
        OffsetToPositionDemo_Harness()
    }
}