refactored tilelet for color picker

Signed-off-by: Matt Bruce <matt.bruce@verizon.com>

VDSSample/ViewControllers/TileletViewController.swift

@@ -69,105 +69,35 @@ class TileletViewController: BaseViewController<Tilelet> {
     
     lazy var colorPicker: UIColorPickerViewController = {
         let picker = UIColorPickerViewController()
-        if case .custom(let hexCode) = component.color {
-            picker.selectedColor = UIColor(hexString: hexCode)
-        }
         picker.delegate = self
         return picker
     }()
     
+    var colorPickerType: ColorPickerType = .backgroundColor
+    enum ColorPickerType {
+        case backgroundColor, gradientColor1, gradientColor2, contentViewBackgroundColor
+    }
+    
+    lazy var gradientColorView1: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor1) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
+    lazy var gradientColorView2: ColorPickerView<ColorPickerType> = {
+        return .init(with: ColorPickerType.gradientColor2) { [weak self] picker in
+            self?.colorPickerType = picker.pickerType
+            self?.selectedColorTapped(picker)
+        }
+    }()
+    
     lazy var backgroundColorPickerSelectorView = {
         PickerSelectorView(title: "white",
                            picker: self.picker,
                            items: BackgroundColor.allCases)
     }()
     
-    lazy var gradientColorView1: UIStackView = {
-        let stackView = UIStackView()
-        let indicatorWrapper = View()
-        indicatorWrapper.addSubview(gradientColor1View)
-        indicatorWrapper.height(32)
-        indicatorWrapper.pinTop()
-        indicatorWrapper.pinLeading()
-        indicatorWrapper.pinBottom()
-        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        stackView.addArrangedSubview(indicatorWrapper)
-        stackView.distribution = .fillEqually
-        stackView.alignment = .fill
-        var button = Button().with { instance in
-            instance.size = .small
-            instance.use = .secondary
-            instance.text = "Select"
-            instance.onClick = { [weak self] in
-                self?.gradientColorTapped($0, view: self?.gradientColor1View)
-            }
-        }
-        button.tag = 1
-        let buttonWrapper = View()
-        buttonWrapper.addSubview(button)
-        buttonWrapper.height(32)
-        button.pinTop()
-        button.pinTrailing()
-        button.pinBottom()
-        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
-        stackView.addArrangedSubview(buttonWrapper)
-        stackView.tag = 1
-        stackView.spacing = 10
-        return stackView
-    }()
-    
-    lazy var gradientColorView2: UIStackView = {
-        let stackView = UIStackView()
-        stackView.distribution = .fillEqually
-        stackView.alignment = .fill
-        stackView.spacing = 10
-        let indicatorWrapper = View()
-        indicatorWrapper.addSubview(gradientColor2View)
-        indicatorWrapper.height(32)
-        indicatorWrapper.pinTop()
-        indicatorWrapper.pinLeading()
-        indicatorWrapper.pinBottom()
-        indicatorWrapper.pinTrailingGreaterThanOrEqualTo(anchor: indicatorWrapper.trailingAnchor)
-        stackView.addArrangedSubview(indicatorWrapper)
-        var button = Button().with { instance in
-            instance.size = .small
-            instance.use = .secondary
-            instance.text = "Select"
-            instance.onClick = { [weak self] in
-                self?.gradientColorTapped($0, view: self?.gradientColor2View)
-            }
-        }
-        button.tag = 2
-        let buttonWrapper = View()
-        buttonWrapper.addSubview(button)
-        buttonWrapper.height(32)
-        button.pinTop()
-        button.pinTrailing()
-        button.pinBottom()
-        button.pinLeadingGreaterThanOrEqualTo(anchor: buttonWrapper.leadingAnchor)
-        stackView.addArrangedSubview(buttonWrapper)
-        stackView.tag = 2
-        return stackView
-    }()
-    
-    var gradientColor1View: UIView = {
-        let view = UIView()
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
-        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
-        view.tag = 1
-        return view
-    }()
-    
-    var gradientColor2View: UIView = {
-        let view = UIView()
-        view.translatesAutoresizingMaskIntoConstraints = false
-        view.widthAnchor.constraint(equalToConstant: 20).isActive = true
-        view.heightAnchor.constraint(equalToConstant: 20).isActive = true
-        view.tag = 2
-        return view
-    }()
-    
     lazy var textAlignmentPickerSelectorView = {
         PickerSelectorView(title: "left",
                            picker: self.picker,
@@ -189,7 +119,6 @@ class TileletViewController: BaseViewController<Tilelet> {
     var badgeTextField = TextField()
     var eyebrowIsBold = Toggle().with { $0.isOn = true }
     var titleIsBold = Toggle().with { $0.isOn = true }
-    var colorPickerType: ColorPickerType = .backgroundColor
     var selectedGradient1Color: String?
     var selectedGradient2Color: String?
     var selectedGradientColorView: UIView?
@@ -486,12 +415,10 @@ class TileletViewController: BaseViewController<Tilelet> {
             if let effect = item.effect {
                 self.component.backgroundEffect = self.getTilelet(effect: effect)
                 self.gradientColorsFormStackView.isHidden = true
-                self.selectedGradient1Color = nil
+                self.gradientColorView1.selectedColor = nil
-                self.selectedGradient1Color = nil
+                self.gradientColorView2.selectedColor = nil
-                self.gradientColor1View.backgroundColor = .clear
-                self.gradientColor2View.backgroundColor = .clear
             } else {
-                self.colorPickerType = .gradientColors
+                self.colorPickerType = .gradientColor1
                 self.gradientColorsFormStackView.isHidden = false
             }
         }
@@ -502,17 +429,13 @@ class TileletViewController: BaseViewController<Tilelet> {
         
         backgroundColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
             guard let self else { return }
-            self.component.color = self.getTilelet(backgroundColor: item)
+            if let color = self.getTilelet(backgroundColor: item) {
+                self.component.color = color
+            } else {
+                self.colorPickerType = .backgroundColor
+                self.present(self.colorPicker, animated: true)
             }            
         }
-    
-    func gradientColorTapped(_ sender: Button, view: UIView?) {
-        selectedGradientColorView = view
-        let selectedColor = (sender.tag == 1) ? selectedGradient1Color : selectedGradient2Color
-        if let selectedColor {
-            colorPicker.selectedColor = UIColor(hexString: selectedColor)
-        }
-        present(colorPicker, animated: true)
     }
     
     func getTilelet(effect: TileContainer.BackgroundEffect) -> Tilelet.BackgroundEffect {
@@ -526,7 +449,7 @@ class TileletViewController: BaseViewController<Tilelet> {
         }
     }
     
-    func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor {
+    func getTilelet(backgroundColor: BackgroundColor) -> Tilelet.BackgroundColor? {
         switch backgroundColor {
         case .primary:
                 .primary
@@ -536,6 +459,8 @@ class TileletViewController: BaseViewController<Tilelet> {
                 .white
         case .black:
                 .black
+        case .custom:
+                nil
         }
     }
 }
@@ -556,9 +481,12 @@ extension TileletViewController: ComponentSampleable {
 
 extension TileletViewController: UIColorPickerViewControllerDelegate {
     
-    //Internal helper enum to identiy the configuration
+    func selectedColorTapped(_ picker: ColorPickerView<ColorPickerType>) {
-    enum ColorPickerType {
+        let selectedColor = picker.selectedColor
-        case backgroundColor, gradientColors, contentViewBackgroundColor
+        if let selectedColor {
+            colorPicker.selectedColor = selectedColor
+        }
+        present(colorPicker, animated: true)
     }
     
     func colorPickerViewControllerDidFinish(_ viewController: UIColorPickerViewController) {
@@ -572,26 +500,28 @@ extension TileletViewController: UIColorPickerViewControllerDelegate {
             component.containerView.backgroundColor = UIColor(hexString: hexString)
         case .backgroundColor:
             component.color = .custom(hexString)
-        case .gradientColors:
+        case .gradientColor1:
-            guard let selectedGradientColorView else { return }
+            gradientColorView1.selectedColor = viewController.selectedColor
-            if selectedGradientColorView.tag == 1 {
+            updateGradientColors()
-                selectedGradient1Color = hexString
+        case .gradientColor2:
-            } else {
+            gradientColorView2.selectedColor = viewController.selectedColor
-                selectedGradient2Color = hexString
+            updateGradientColors()
         }
-            selectedGradientColorView.backgroundColor = UIColor(hexString: hexString)
+    }
-            if let selectedGradient1Color, let selectedGradient2Color {
+    
+    func updateGradientColors(){
+        if let selectedGradient1Color = gradientColorView1.selectedColor?.hexString,
+           let selectedGradient2Color = gradientColorView2.selectedColor?.hexString{
             component.backgroundEffect = .gradient(selectedGradient1Color, selectedGradient2Color)
         }
     }
 }
-}
 
 extension TileletViewController {
     
     enum BackgroundColor: String, CaseIterable {
         
-        case primary, secondary, white, black
+        case primary, secondary, white, black, custom
         
         var color: TileContainer.BackgroundColor? {
             switch self {
@@ -603,6 +533,8 @@ extension TileletViewController {
                     .white
             case .black:
                     .black
+            case .custom:
+                    nil
             }
         }
     }