multiple

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

VDSSample/ViewControllers/DropShawdowViewController.swift

@@ -11,20 +11,25 @@ import VDS
 import VDSColorTokens
 import Combine
 
-class DropShadowViewController: BaseViewController<View> {
+class DropShadowViewController: BaseViewController<ShadowView> {
-    var shadowLightColor: UIColor.VDSColor = .backgroundPrimaryDark { didSet { updateView() }}
-    var shadowDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { updateView() }}
-    var viewLightColor: UIColor.VDSColor = .paletteGray65 { didSet { updateView() }}
-    var viewDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { updateView() }}
-    
     var viewPaddingRange = Slider()
     var viewRadiusRange = Slider()
+    var viewSpacerRange = Slider()
+
+    //shadow 1
+    var showShadow = Toggle()
     var opacityRange = Slider()
     var radiusRange = Slider()
     var offsetXRange = Slider()
     var offsetYRange = Slider()
-    var viewSpacerRange = Slider()
+
-    
+    //shadow 2
+    var showShadow2 = Toggle()
+    var opacityRange2 = Slider()
+    var radiusRange2 = Slider()
+    var offsetXRange2 = Slider()
+    var offsetYRange2 = Slider()
+
     var viewSize: CGFloat = 100.0
     var componentWrapper: UIView!
     var componentConstraints: NSLayoutConstraint.Container!
@@ -44,6 +49,18 @@ class DropShadowViewController: BaseViewController<View> {
                            items: UIColor.VDSColor.allCases)
     }()
     
+    lazy var dropShadow2LightColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+    
+    lazy var dropShadow2DarkColorPickerSelectorView = {
+        PickerSelectorView(title: "",
+                           picker: self.picker,
+                           items: UIColor.VDSColor.allCases)
+    }()
+    
     lazy var viewLightColorPickerSelectorView = {
         PickerSelectorView(title: "",
                            picker: self.picker,
@@ -115,6 +132,8 @@ class DropShadowViewController: BaseViewController<View> {
         viewPadding = 10
         spacer = 10
         
+        component.setNeedsUpdate()
+        
         setupPicker()
         setupModel()
         updateView()
@@ -144,6 +163,7 @@ class DropShadowViewController: BaseViewController<View> {
         
         let form2 = FormSection()
         form2.title = "View 1 Shadow Settings"
+        form2.addFormRow(label: "Show", view: .makeWrapper(for: showShadow))
         form2.addFormRow(label: "Shawdow Light", view: dropShadowLightColorPickerSelectorView)
         form2.addFormRow(label: "Shawdow Dark", view: dropShadowDarkColorPickerSelectorView)
         form2.addFormRow(label: "Opacity", view: opacityRange)
@@ -151,13 +171,32 @@ class DropShadowViewController: BaseViewController<View> {
         form2.addFormRow(label: "Width (OffSet X)", view: offsetXRange)
         form2.addFormRow(label: "Height (Offset Y)", view: offsetYRange)
         
+        let form3 = FormSection()
+        form3.title = "View 1 Shadow 2 Settings"
+        form3.addFormRow(label: "Show", view: .makeWrapper(for: showShadow2))
+        form3.addFormRow(label: "Shawdow Light", view: dropShadow2LightColorPickerSelectorView)
+        form3.addFormRow(label: "Shawdow Dark", view: dropShadow2DarkColorPickerSelectorView)
+        form3.addFormRow(label: "Opacity", view: opacityRange2)
+        form3.addFormRow(label: "Radius (Blur)", view: radiusRange2)
+        form3.addFormRow(label: "Width (OffSet X)", view: offsetXRange2)
+        form3.addFormRow(label: "Height (Offset Y)", view: offsetYRange2)
+
+
         append(section: form1)
         append(section: form2)
+        append(section: form3)
+
+        //shadow1
+        showShadow.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.showShadow = slider.isOn
+            self?.updateView()
+        }).store(in: &subscribers)
         
         opacityRange.maximumValue = 1.0
         opacityRange.minimumValue = 0.0
         opacityRange.value = 1.0
         opacityRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.opacityRange = CGFloat(slider.value)
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -165,6 +204,7 @@ class DropShadowViewController: BaseViewController<View> {
         radiusRange.minimumValue = 0.0
         radiusRange.value = 2.0
         radiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.radiusRange = CGFloat(slider.value)
             self?.updateView()
         }).store(in: &subscribers)
 
@@ -172,6 +212,7 @@ class DropShadowViewController: BaseViewController<View> {
         offsetXRange.minimumValue = -20
         offsetXRange.value = 2.0
         offsetXRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.offsetXRange = CGFloat(slider.value)
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -179,9 +220,49 @@ class DropShadowViewController: BaseViewController<View> {
         offsetYRange.minimumValue = -20
         offsetYRange.value = 2.0
         offsetYRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.offsetYRange = CGFloat(slider.value)
             self?.updateView()
         }).store(in: &subscribers)
-                
+                      
+        //shadow2
+        showShadow2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.showShadow2 = slider.isOn
+            self?.updateView()
+        }).store(in: &subscribers)
+        
+        opacityRange2.maximumValue = 1.0
+        opacityRange2.minimumValue = 0.0
+        opacityRange2.value = 1.0
+        opacityRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.opacityRange2 = CGFloat(slider.value)
+            self?.updateView()
+        }).store(in: &subscribers)
+        
+        radiusRange2.maximumValue = 20.0
+        radiusRange2.minimumValue = 0.0
+        radiusRange2.value = 2.0
+        radiusRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.radiusRange2 = CGFloat(slider.value)
+            self?.updateView()
+        }).store(in: &subscribers)
+
+        offsetXRange2.maximumValue = 20
+        offsetXRange2.minimumValue = -20
+        offsetXRange2.value = 2.0
+        offsetXRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.offsetXRange2 = CGFloat(slider.value)
+            self?.updateView()
+        }).store(in: &subscribers)
+        
+        offsetYRange2.maximumValue = 20
+        offsetYRange2.minimumValue = -20
+        offsetYRange2.value = 2.0
+        offsetYRange2.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.offsetYRange2 = CGFloat(slider.value)
+            self?.updateView()
+        }).store(in: &subscribers)
+        
+        //view
         viewPaddingRange.maximumValue = 50.0
         viewPaddingRange.minimumValue = 0.0
         viewPaddingRange.value = 2.0
@@ -194,6 +275,7 @@ class DropShadowViewController: BaseViewController<View> {
         viewRadiusRange.minimumValue = 0
         viewRadiusRange.value = 8.0
         viewRadiusRange.publisher(for: .valueChanged).sink(receiveValue: { [weak self] slider in
+            self?.component.viewRadiusRange = CGFloat(slider.value)
             self?.updateView()
         }).store(in: &subscribers)
         
@@ -204,10 +286,15 @@ class DropShadowViewController: BaseViewController<View> {
             self?.spacer = CGFloat(slider.value)
         }).store(in: &subscribers)
                 
-        dropShadowLightColorPickerSelectorView.text = shadowLightColor.rawValue
+        dropShadowLightColorPickerSelectorView.text = component.shadowLightColor.rawValue
-        dropShadowDarkColorPickerSelectorView.text = shadowDarkColor.rawValue
+        dropShadowDarkColorPickerSelectorView.text = component.shadowDarkColor.rawValue
-        viewLightColorPickerSelectorView.text = viewLightColor.rawValue
+        dropShadow2LightColorPickerSelectorView.text = component.shadowLightColor2.rawValue
-        viewDarkColorPickerSelectorView.text = viewDarkColor.rawValue
+        dropShadow2DarkColorPickerSelectorView.text = component.shadowDarkColor2.rawValue
+        viewLightColorPickerSelectorView.text = component.viewLightColor.rawValue
+        viewDarkColorPickerSelectorView.text = component.viewDarkColor.rawValue
+        
+        showShadow.isOn = component.showShadow
+        showShadow2.isOn = component.showShadow2
     }
     
     func setupModel() {
@@ -216,19 +303,8 @@ class DropShadowViewController: BaseViewController<View> {
     }
     
     override func updateView() {
-        let surface = surfacePickerSelectorView.selectedItem
-        let dropshadowColor = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
-        let viewColor = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor).getColor(surface)
-        
         secondView.backgroundColor = .red
         thirdView.backgroundColor = .purple
-        component.layer.cornerRadius = CGFloat(viewRadiusRange.value)
-        component.layer.masksToBounds = false
-        component.backgroundColor = viewColor
-        component.layer.shadowColor = dropshadowColor.cgColor
-        component.layer.shadowOpacity = Float(opacityRange.value)
-        component.layer.shadowOffset = .init(width: CGFloat(offsetXRange.value), height: CGFloat(offsetYRange.value))
-        component.layer.shadowRadius = CGFloat(radiusRange.value)
     }
     
     func setupPicker(){
@@ -239,19 +315,101 @@ class DropShadowViewController: BaseViewController<View> {
         }
                 
         dropShadowDarkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.shadowDarkColor = item
+            self?.component.shadowDarkColor = item
         }
         
         dropShadowLightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.shadowLightColor = item
+            self?.component.shadowLightColor = item
         }
 
+        dropShadow2DarkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.shadowDarkColor2 = item
+        }
+        
+        dropShadow2LightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
+            self?.component.shadowLightColor2 = item
+        }
         viewLightColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.viewLightColor = item
+            self?.component.viewLightColor = item
         }
 
         viewDarkColorPickerSelectorView.onPickerDidSelect = {  [weak self] item in
-            self?.viewDarkColor = item
+            self?.component.viewDarkColor = item
         }
     }
 }
+
+public class ShadowView: View {
+    public var shadow1 = View()
+    public var shadow2 = View()
+    
+    public var viewLightColor: UIColor.VDSColor = .paletteGray65 { didSet { setNeedsUpdate() }}
+    public var viewDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }}
+
+    public var viewRadiusRange: CGFloat = 8.0 { didSet { setNeedsUpdate() }}
+
+    public var showShadow: Bool = true { didSet { setNeedsUpdate() }}
+    public var opacityRange: CGFloat = 1.0 { didSet { setNeedsUpdate() }}
+    public var offsetXRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
+    public var offsetYRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
+    public var radiusRange: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
+    public var shadowLightColor: UIColor.VDSColor = .backgroundPrimaryDark { didSet { setNeedsUpdate() }}
+    public var shadowDarkColor: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }}
+
+    public var showShadow2: Bool = false { didSet { setNeedsUpdate() }}
+    public var opacityRange2: CGFloat = 1.0 { didSet { setNeedsUpdate() }}
+    public var offsetXRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
+    public var offsetYRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
+    public var radiusRange2: CGFloat = 2.0 { didSet { setNeedsUpdate() }}
+    public var shadowLightColor2: UIColor.VDSColor = .backgroundPrimaryDark { didSet { setNeedsUpdate() }}
+    public var shadowDarkColor2: UIColor.VDSColor = .backgroundPrimaryLight { didSet { setNeedsUpdate() }}
+
+    public override func setup() {
+        super.setup()
+        addSubview(shadow1)
+        addSubview(shadow2)
+        shadow1.pinToSuperView()
+        shadow2.pinToSuperView()
+        width(constant: 100)
+        height(constant: 100)
+    }
+    
+    public override func updateView() {
+        super.updateView()
+        let viewColor = SurfaceColorConfiguration(viewLightColor.uiColor, viewDarkColor.uiColor).getColor(surface)
+        backgroundColor = viewColor
+        shadow1.backgroundColor = .brown
+        shadow2.backgroundColor = .yellow
+        
+        shadow1.isHidden = !showShadow
+        shadow2.isHidden = !showShadow2
+        setNeedsLayout()
+        layoutIfNeeded()
+    }
+    
+    
+    public override func layoutSubviews() {
+        super.layoutSubviews()
+        
+        let dropshadowColor = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
+        let dropshadowColor2 = SurfaceColorConfiguration(shadowLightColor.uiColor, shadowDarkColor.uiColor).getColor(surface)
+        layer.cornerRadius = CGFloat(viewRadiusRange)
+        layer.masksToBounds = false
+        
+        shadow1.layer.cornerRadius = CGFloat(viewRadiusRange)
+        shadow1.layer.masksToBounds = false
+        shadow1.layer.cornerRadius = CGFloat(viewRadiusRange)
+        shadow1.layer.shadowColor = UIColor.purple.cgColor //dropshadowColor.cgColor
+        shadow1.layer.shadowOpacity = Float(opacityRange)
+        shadow1.layer.shadowOffset = .init(width: CGFloat(offsetXRange), height: CGFloat(offsetYRange))
+        shadow1.layer.shadowRadius = CGFloat(radiusRange)
+        
+        shadow2.layer.cornerRadius = CGFloat(viewRadiusRange)
+        shadow2.layer.masksToBounds = false
+        shadow2.layer.cornerRadius = CGFloat(viewRadiusRange)
+        shadow2.layer.shadowColor = UIColor.blue.cgColor//dropshadowColor2.cgColor
+        shadow2.layer.shadowOpacity = Float(opacityRange2)
+        shadow2.layer.shadowOffset = .init(width: CGFloat(offsetXRange2), height: CGFloat(offsetYRange2))
+        shadow2.layer.shadowRadius = CGFloat(radiusRange2)
+    }
+}