feat: finish style specific dynamic content updates in PoodleSurf iOS

diez · Nov 14, 2019 · aa81e5b · aa81e5b
1 parent e3fec81
commit aa81e5b
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 20 deletions.
diff --git a/examples/poodle-surf/ios/PoodleSurf/Report/Cards/ForecastCardView.swift b/examples/poodle-surf/ios/PoodleSurf/Report/Cards/ForecastCardView.swift
@@ -61,22 +61,6 @@ class ForecastCardView: UIView {
         set { gradientView.gradient = newValue }
     }
 
-    func setDayPartViewsVerticalSpacing(_ spacing: CGFloat) {
-        dayParts.forEach { $0.verticalSpacing = spacing }
-    }
-
-    func setDayPartViewsLayoutMargins(_ layoutMargins: UIEdgeInsets) {
-        dayParts.forEach { $0.layoutMargins = layoutMargins }
-    }
-
-    func setDayPartViewsValueUnitSpacing(_ spacing: CGFloat) {
-        dayParts.forEach { $0.valueUnitSpacing = spacing }
-    }
-
-    func setDayPartViewsValueUnitLayoutMargins(_ layoutMargins: UIEdgeInsets) {
-        dayParts.forEach { $0.valueUnitLayoutMargins = layoutMargins }
-    }
-
     override class var requiresConstraintBasedLayout: Bool { return true }
 
     private let outterStackView: UIStackView

diff --git a/examples/poodle-surf/ios/PoodleSurf/Report/ReportViewController.swift b/examples/poodle-surf/ios/PoodleSurf/Report/ReportViewController.swift
@@ -49,7 +49,10 @@ class ReportViewController: UIViewController {
         view.contentSpacing = design.contentSpacing
 
         apply(design.header, to: view.headerView)
-        apply(design.waterTemperatureCard, to: view.temperatureCardView)
+        apply(design.waterTemperature, to: view.temperatureCardView)
+        apply(design.wind, to: view.windCardView)
+        apply(design.swell, to: view.swellCardView)
+        apply(design.tide, to: view.tideCardView)
     }
 
     private func apply(_ design: HeaderDesign, to view: ReportHeaderView) {
@@ -68,6 +71,7 @@ class ReportViewController: UIViewController {
     private func apply(_ design: WaterTemperatureCardDesign, to view: TemperatureCardView) {
         view.horizontalSpacing = design.horizontalSpacing
         view.titleLabel.text = design.title
+        design.titleTextStyle.setTextStyle(forLabel: view.titleLabel)
         view.gradient = Gradient(design.gradient)
         apply(design.temperature, to: view.temperatureView)
         apply(design.wetsuit, to: view.wetsuitView)
@@ -87,6 +91,28 @@ class ReportViewController: UIViewController {
         view.horizontalSpacing = design.iconSpacing
     }
 
+    private func apply(_ design: ForecastCardDesign, to view: ForecastCardView) {
+        view.titleLabel.text = design.title
+        design.titleTextStyle.setTextStyle(forLabel: view.titleLabel)
+        view.gradient = Gradient(design.gradient)
+        view.dayPartsHorizontalSpacing = design.dayPartSpacing
+        view.separatorWidth = design.separatorWidth
+        view.separators.forEach { $0.backgroundColor = design.separatorColor.color }
+        view.dayParts.forEach { dayPart in
+            dayPart.unitLabel.text = design.unit
+            dayPart.valueUnitLayoutMargins = UIEdgeInsets(design.valueUnitMargins)
+            apply(design.dayPart, to: dayPart)
+        }
+    }
+
+    private func apply(_ design: SharedDayPartDesign, to view: DayPartView) {
+        design.valueTextStyle.setTextStyle(forLabel: view.valueLabel)
+        design.unitTextStyle.setTextStyle(forLabel: view.unitLabel)
+        design.timeTextStyle.setTextStyle(forLabel: view.timeLabel)
+        view.valueUnitSpacing = design.valueUnitSpacing
+        view.layoutMargins = UIEdgeInsets(design.layoutMargins)
+    }
+
     // MARK: - Default Styling
 
     private func applyReportStyle(to view: ReportView) {

diff --git a/examples/poodle-surf/src/PoodleSurfDesignSystem.ts b/examples/poodle-surf/src/PoodleSurfDesignSystem.ts
@@ -7,6 +7,7 @@ class Palette extends Component {
   @property pink = Color.rgba(255, 63, 112, 1);
   @property orange = Color.rgba(255, 154, 58, 1);
   @property white = Color.rgba(255, 255, 255, 1);
+  @property whiteA40 = Color.rgba(255, 255, 255, 0.4);
   @property black = Color.rgba(0, 0, 0, 1);
   @property gradient = new SimpleGradient({
     startColor: this.pink,
@@ -48,6 +49,7 @@ const fontNames = new FontNames();
 
 class FontSizes extends Component {
   @property title = 20;
+  @property cardTitle = 14;
   @property caption = 12;
   @property value = 30;
   @property unit = 16;
@@ -69,21 +71,31 @@ class TextStyles extends Component {
     fontSize: fontSizes.caption,
     color: palette.black,
   });
+  @property cardTitle = new TextStyle({
+    font: fontNames.default,
+    fontSize: fontSizes.cardTitle,
+    color: palette.white,
+  });
   @property value = new TextStyle({
     font: fontNames.default,
     fontSize: fontSizes.value,
     color: palette.white,
   });
+  @property unit = new TextStyle({
+    font: fontNames.default,
+    fontSize: fontSizes.unit,
+    color: palette.white,
+  });
   @property caption = new TextStyle({
     font: fontNames.default,
     fontSize: fontSizes.caption,
     color: palette.white,
-  })
+  });
   @property captionHeader = new TextStyle({
     font: fontNames.defaultBold,
     fontSize: fontSizes.caption,
     color: palette.white,
-  })
+  });
 }
 
 /**
@@ -129,12 +141,49 @@ class WetsuitDesign extends Component {
 
 class WaterTemperatureCardDesign extends Component {
   @property title = 'Water temperature';
+  @property titleTextStyle = textStyles.cardTitle;
   @property gradient = palette.gradient;
   @property horizontalSpacing = layoutValues.defaultMargin;
   @property temperature = new TemperatureDesign();
   @property wetsuit = new WetsuitDesign();
 }
 
+class SharedDayPartDesign extends Component {
+  @property valueTextStyle = textStyles.value;
+  @property unitTextStyle = textStyles.unit;
+  @property timeTextStyle = textStyles.caption;
+  @property valueUnitSpacing = layoutValues.compactSpacing;
+  @property layoutMargins = new EdgeInsets({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  });
+}
+
+interface ForecastCardDesignState {
+  title: string;
+  unit: string;
+  gradient: SimpleGradient;
+  dayPart: SharedDayPartDesign;
+  dayPartSpacing: number;
+  separatorWidth: number;
+  separatorColor: number;
+  valueUnitMargins: EdgeInsets;
+}
+
+class ForecastCardDesign extends Component<ForecastCardDesignState> {
+  @property title = '';
+  @property titleTextStyle = textStyles.cardTitle;
+  @property unit = '';
+  @property gradient = palette.gradient;
+  @property dayPart = new SharedDayPartDesign();
+  @property dayPartSpacing = layoutValues.defaultMargin;
+  @property separatorWidth = 1;
+  @property separatorColor = palette.whiteA40;
+  @property valueUnitMargins = new EdgeInsets();
+}
+
 class ReportDesign extends Component {
   @property backgroundColor = palette.white;
   @property contentLayoutMargins = new EdgeInsets({
@@ -145,7 +194,22 @@ class ReportDesign extends Component {
   });
   @property contentSpacing = layoutValues.defaultMargin;
   @property header = new HeaderDesign();
-  @property waterTemperatureCard = new WaterTemperatureCardDesign();
+  @property waterTemperature = new WaterTemperatureCardDesign();
+  @property wind = new ForecastCardDesign({
+    title: 'Wind',
+    unit: 'mph',
+    valueUnitMargins: new EdgeInsets({
+      top: 20,
+    }),
+  });
+  @property swell = new ForecastCardDesign({
+    title: 'Swell',
+    unit: 'ft',
+  });
+  @property tide = new ForecastCardDesign({
+    title: 'Tide',
+    unit: 'ft',
+  });
 }
 
 /**