Give YogaKitSample some love, Convert it to a Swift Project

Summary:
To date, our sample project was lacking. There is still a lot of work that can be done to improve, but, this is a step in the right direction.

Here are the changes in this commit:
1. The project is written in Swift.
2. Created new CollectionView (via [IGListKit](https://github.com/instagram/iglistkit)), making it very easy to add new examples.
3. New examples for basic layouts, and including/excluding layouts on the fly.

Here's a video!

![](https://media.giphy.com/media/l0ExcvTLa0ADdawRa/giphy.gif)
Closes https://github.com/facebook/yoga/pull/392

Reviewed By: emilsjolander

Differential Revision: D4550379

Pulled By: dshahidehpour

fbshipit-source-id: 64a07acf96c1887f1d2ad0c54971fcedb64334a0

YogaKit/YogaKitSample/YogaKitSample/AppDelegate.h

@@ -1,15 +0,0 @@
-/**
- * Copyright 2014-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the license found in the
- * LICENSE-examples file in the root directory of this source tree.
- */
-
-#import <UIKit/UIKit.h>
-
-@interface AppDelegate : UIResponder <UIApplicationDelegate>
-
-@property (strong, nonatomic) UIWindow *window;
-
-@end

YogaKit/YogaKitSample/YogaKitSample/AppDelegate.m

@@ -1,27 +0,0 @@
-/**
- * Copyright 2014-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the license found in the
- * LICENSE-examples file in the root directory of this source tree.
- */
-
-#import "AppDelegate.h"
-#import "ViewController.h"
-
-@interface AppDelegate ()
-
-@end
-
-@implementation AppDelegate
-
-
-- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
-    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
-    self.window.rootViewController = [ViewController new];
-    self.window.backgroundColor = [UIColor whiteColor];
-    [self.window makeKeyAndVisible];
-    return YES;
-}
-
-@end

YogaKit/YogaKitSample/YogaKitSample/AppDelegate.swift

@@ -0,0 +1,27 @@
+/**
+ * Copyright 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE-examples file in the root directory of this source tree.
+ */
+
+import Foundation
+import UIKit
+
+@UIApplicationMain
+class AppDelegate: UIResponder, UIApplicationDelegate {
+    var window: UIWindow?
+
+    func applicationDidFinishLaunching(_ application: UIApplication) {
+        self.window = UIWindow(frame: UIScreen.main.bounds)
+        if let window = self.window {
+            let navigationController = UINavigationController(rootViewController: ExamplesViewController())
+            navigationController.navigationBar.isTranslucent = false
+
+            window.rootViewController = navigationController
+            window.backgroundColor = .white
+            window.makeKeyAndVisible()
+        }
+    }
+}

YogaKit/YogaKitSample/YogaKitSample/ExamplesViewController.swift

@@ -0,0 +1,100 @@
+/**
+ * Copyright 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE-examples file in the root directory of this source tree.
+ */
+
+import UIKit
+import IGListKit
+
+private final class ExampleModel {
+    let title: String
+    let controllerClass: UIViewController.Type
+
+    init(title: String, controllerClass: UIViewController.Type) {
+        self.title = title
+        self.controllerClass = controllerClass
+    }
+}
+
+extension ExampleModel: IGListDiffable {
+    fileprivate func diffIdentifier() -> NSObjectProtocol {
+        return title as NSString
+    }
+
+    fileprivate func isEqual(toDiffableObject object: IGListDiffable?) -> Bool {
+        guard let otherObj = object as? ExampleModel else { return false }
+
+        return (title == otherObj.title) &&
+               (controllerClass == otherObj.controllerClass)
+    }
+}
+
+final class ExamplesViewController: UIViewController, IGListAdapterDataSource, IGListSingleSectionControllerDelegate {
+    private lazy var adapter: IGListAdapter = {
+        return IGListAdapter(updater: IGListAdapterUpdater(), viewController: self, workingRangeSize: 0)
+    }()
+    private let collectionView = IGListCollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
+
+
+    // Update this to array to create more examples.
+    private let models: [ExampleModel] = [ExampleModel(title: "Basic Layout", controllerClass: BasicViewController.self),
+                                          ExampleModel(title: "Exclude Views in Layout", controllerClass: LayoutInclusionViewController.self)]
+
+    //MARK: UIViewController
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        title = "Examples"
+        view.addSubview(collectionView)
+        adapter.collectionView = collectionView
+        adapter.dataSource = self
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        collectionView.frame = view.bounds
+    }
+
+    //MARK: IGListAdapterDataSource
+
+    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
+        return models as [IGListDiffable]
+    }
+
+    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
+        let sizeBlock: IGListSingleSectionCellSizeBlock = { (model, context) in
+            return CGSize(width: (context?.containerSize.width)!, height: 75.0)
+        }
+
+        let configureBlock: IGListSingleSectionCellConfigureBlock = { (model, cell) in
+            guard let m = model as? ExampleModel, let c = cell as? SingleLabelCollectionCell else {
+                return
+            }
+
+            c.label.text = m.title
+        }
+
+        let sectionController = IGListSingleSectionController(cellClass: SingleLabelCollectionCell.self,
+                                                              configureBlock: configureBlock,
+                                                              sizeBlock: sizeBlock)
+        sectionController.selectionDelegate = self
+        return sectionController
+    }
+
+    func emptyView(for listAdapter: IGListAdapter) -> UIView? { return nil }
+
+    //MARK: IGListSingleSectionControllerDelegate
+
+    func didSelect(_ sectionController: IGListSingleSectionController) {
+        let section = adapter.section(for: sectionController)
+        let model = models[section]
+
+        let controller = model.controllerClass.init()
+        controller.title = model.title
+
+        self.navigationController?.pushViewController(controller, animated: true)
+    }
+}

YogaKit/YogaKitSample/YogaKitSample/SwiftViewController.swift

@@ -7,35 +7,60 @@
  */
 
 import UIKit
+import IGListKit
 import YogaKit
 
-class SwiftViewController: UIViewController {
-  override func viewDidLoad() {
-    let root = self.view!
-    root.backgroundColor = .red
-    root.yoga.isEnabled = true
-    root.yoga.width = self.view.bounds.size.width
-    root.yoga.height = self.view.bounds.size.height
-    root.yoga.alignItems = .center
-    root.yoga.justifyContent = .center
-
-    let child1 = UIView()
-    child1.backgroundColor = .blue
-    child1.yoga.isEnabled = true
-    child1.yoga.width = 100
-    child1.yoga.height = 10
-
-    let child2 = UIView()
-    child2.backgroundColor = .green
-    child2.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
-
-    let child3 = UIView()
-    child3.backgroundColor = .yellow
-    child3.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
-
-    child2.addSubview(child3)
-    root.addSubview(child1)
-    root.addSubview(child2)
-    root.yoga.applyLayout(preservingOrigin: false)
-  }
+struct DemoItem {
+    let name: String
+}
+
+final class SwiftViewController: UIViewController, IGListAdapterDataSource {
+
+    lazy var adapter: IGListAdapter = {
+        return IGListAdapter(updater: IGListAdapterUpdater(), viewController: self, workingRangeSize: 0)
+    }()
+    let collectionView = IGListCollectionView(frame: .zero, collectionViewLayout: UICollectionViewFlowLayout())
+
+    //MARK: UIViewController
+
+    override func viewDidLoad() {
+        super.viewDidLoad()
+        title = "YogaKit Examples"
+        view.addSubview(collectionView)
+        adapter.collectionView = collectionView
+        adapter.dataSource = self
+    }
+
+    override func viewDidLayoutSubviews() {
+        super.viewDidLayoutSubviews()
+        collectionView.frame = view.bounds
+    }
+
+
+    //MARK: IGListAdapterDataSource
+
+    func objects(for listAdapter: IGListAdapter) -> [IGListDiffable] {
+        return ["Dustin" as IGListDiffable, "Ryan" as IGListDiffable]
+    }
+
+    func listAdapter(_ listAdapter: IGListAdapter, sectionControllerFor object: Any) -> IGListSectionController {
+        let sizeBlock: IGListSingleSectionCellSizeBlock = { (model, context) in
+            return CGSize(width: (context?.containerSize.width)!, height: 100.0)
+        }
+        let configureBlock: IGListSingleSectionCellConfigureBlock = { (model, cell) in
+            guard let m = model as? String else {
+                return
+            }
+
+            cell.backgroundColor = (m == "Dustin") ? .blue : .red
+        }
+
+        return IGListSingleSectionController(cellClass: UICollectionViewCell.self,
+                                             configureBlock: configureBlock,
+                                             sizeBlock: sizeBlock)
+    }
+
+    func emptyView(for listAdapter: IGListAdapter) -> UIView? {
+        return nil
+    }
 }

YogaKit/YogaKitSample/YogaKitSample/ViewController.h

@@ -1,13 +0,0 @@
-/**
- * Copyright 2014-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the license found in the
- * LICENSE-examples file in the root directory of this source tree.
- */
-
-#import <UIKit/UIKit.h>
-
-@interface ViewController : UIViewController
-
-@end

YogaKit/YogaKitSample/YogaKitSample/ViewControllers/BasicViewController.swift

@@ -0,0 +1,48 @@
+/**
+ * Copyright 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE-examples file in the root directory of this source tree.
+ */
+
+import UIKit
+import YogaKit
+
+final class BasicViewController: UIViewController {
+    override func viewDidLoad() {
+        let containerSize = self.view.bounds.size
+
+        let root = self.view!
+        root.backgroundColor = .white
+        root.yoga.isEnabled = true
+        root.yoga.width = containerSize.width
+        root.yoga.height = containerSize.height
+        root.yoga.alignItems = .center
+        root.yoga.justifyContent = .center
+
+        let child1 = UIView()
+        child1.backgroundColor = .blue
+        child1.yoga.isEnabled = true
+        child1.yoga.width = 100
+        child1.yoga.height = 10
+        child1.yoga.marginBottom = 25
+        root.addSubview(child1)
+
+        let child2 = UIView()
+        child2.yoga.isEnabled = true
+        child2.yoga.alignSelf = .flexEnd
+        child2.backgroundColor = .green
+        child2.frame = CGRect(x: 0, y: 0, width: 200, height: 100)
+        root.addSubview(child2)
+
+        let child3 = UIView()
+        child3.yoga.isEnabled = true
+        child3.yoga.alignSelf = .flexStart
+        child3.backgroundColor = .yellow
+        child3.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
+        root.addSubview(child3)
+
+        root.yoga.applyLayout(preservingOrigin: true)
+    }
+}

YogaKit/YogaKitSample/YogaKitSample/ViewControllers/LayoutInclusionViewController.swift

@@ -0,0 +1,70 @@
+/**
+ * Copyright 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE-examples file in the root directory of this source tree.
+ */
+
+import UIKit
+import YogaKit
+
+final class LayoutInclusionViewController: UIViewController {
+    private let button: UIButton = UIButton(type: .system)
+    private let disappearingView: UIView = UIView(frame: .zero)
+    private let contentView: UIView = UIView(frame: .zero)
+
+    override func viewDidLoad() {
+        let root = self.view!
+        root.backgroundColor = .white
+        root.yoga.isEnabled = true
+        root.yoga.flexDirection = .column
+        root.yoga.justifyContent = .spaceAround
+
+        contentView.backgroundColor = .clear
+        contentView.layer.borderColor = UIColor.lightGray.cgColor
+        contentView.layer.borderWidth = 1.0
+        contentView.yoga.isEnabled = true
+        contentView.yoga.height = 300
+        contentView.yoga.width = self.view.bounds.size.width
+        contentView.yoga.flexDirection = .row
+        contentView.yoga.justifyContent = .center
+        contentView.yoga.paddingHorizontal = 25
+        self.view.addSubview(contentView)
+
+        let redView = UIView(frame: .zero)
+        redView.backgroundColor = .red
+        redView.yoga.isEnabled = true
+        redView.yoga.flexGrow = 1
+        redView.yoga.flexShrink = 1
+        contentView.addSubview(redView)
+
+        disappearingView.backgroundColor = .blue
+        disappearingView.yoga.isEnabled = true
+        disappearingView.yoga.flexGrow = 1
+        contentView.addSubview(disappearingView)
+
+        button.setTitle("Add Blue View", for: UIControlState.selected)
+        button.setTitle("Remove Blue View", for: UIControlState.normal)
+        button.addTarget(self, action: #selector(buttonWasTapped), for: UIControlEvents.touchUpInside)
+        button.yoga.isEnabled = true
+        button.yoga.height = 300
+        button.yoga.width = 300
+        button.yoga.alignSelf = .center
+        root.addSubview(button)
+
+        root.yoga.applyLayout(preservingOrigin: false)
+    }
+
+    // MARK - UIButton Action
+    func buttonWasTapped() {
+        button.isSelected = !button.isSelected
+
+        button.isUserInteractionEnabled = false
+        disappearingView.yoga.isIncludedInLayout = !disappearingView.yoga.isIncludedInLayout
+        disappearingView.isHidden = !disappearingView.isHidden
+
+        contentView.yoga.applyLayout(preservingOrigin: true)
+        button.isUserInteractionEnabled = true
+    }
+}

YogaKit/YogaKitSample/YogaKitSample/Views/SingleLabelCollectionCell.swift

@@ -0,0 +1,45 @@
+/**
+ * Copyright 2014-present, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the license found in the
+ * LICENSE-examples file in the root directory of this source tree.
+ */
+
+import UIKit
+import YogaKit
+
+final class SingleLabelCollectionCell: UICollectionViewCell {
+    let label: UILabel = UILabel(frame: .zero)
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+
+        contentView.yoga.isEnabled = true
+        contentView.yoga.flexDirection = .column
+        contentView.yoga.justifyContent = .flexEnd
+
+        label.textAlignment = .center
+        label.numberOfLines = 1
+        label.yoga.isIncludedInLayout = false
+        contentView.addSubview(label)
+
+        let border = UIView(frame: .zero)
+        border.backgroundColor = .lightGray
+        border.yoga.isEnabled = true
+        border.yoga.height = 0.5
+        border.yoga.marginHorizontal = 25
+        contentView.addSubview(border)
+    }
+
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    override func layoutSubviews() {
+        super.layoutSubviews()
+
+        contentView.yoga.applyLayout(preservingOrigin: false)
+        label.frame = contentView.bounds
+    }
+}

YogaKit/YogaKitSample/YogaKitSample/main.m

@@ -1,16 +0,0 @@
-/**
- * Copyright 2014-present, Facebook, Inc.
- * All rights reserved.
- *
- * This source code is licensed under the license found in the
- * LICENSE-examples file in the root directory of this source tree.
- */
-
-#import <UIKit/UIKit.h>
-#import "AppDelegate.h"
-
-int main(int argc, char * argv[]) {
-    @autoreleasepool {
-        return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
-    }
-}