diff --git a/Playgrounds/02 Flexbox Components.playground/Contents.swift b/Playgrounds/01 Flexbox Components.playground/Contents.swift similarity index 100% rename from Playgrounds/02 Flexbox Components.playground/Contents.swift rename to Playgrounds/01 Flexbox Components.playground/Contents.swift diff --git a/Playgrounds/01 Vanilla Components.playground/Resources/logo_small.png b/Playgrounds/01 Flexbox Components.playground/Resources/logo_small.png similarity index 100% rename from Playgrounds/01 Vanilla Components.playground/Resources/logo_small.png rename to Playgrounds/01 Flexbox Components.playground/Resources/logo_small.png diff --git a/Playgrounds/01 Vanilla Components.playground/Sources/Shared.swift b/Playgrounds/01 Flexbox Components.playground/Sources/Shared.swift similarity index 100% rename from Playgrounds/01 Vanilla Components.playground/Sources/Shared.swift rename to Playgrounds/01 Flexbox Components.playground/Sources/Shared.swift diff --git a/Playgrounds/02 Flexbox Components.playground/contents.xcplayground b/Playgrounds/01 Flexbox Components.playground/contents.xcplayground similarity index 100% rename from Playgrounds/02 Flexbox Components.playground/contents.xcplayground rename to Playgrounds/01 Flexbox Components.playground/contents.xcplayground diff --git a/Playgrounds/01 Vanilla Components.playground/playground.xcworkspace/contents.xcworkspacedata b/Playgrounds/01 Flexbox Components.playground/playground.xcworkspace/contents.xcworkspacedata similarity index 100% rename from Playgrounds/01 Vanilla Components.playground/playground.xcworkspace/contents.xcworkspacedata rename to Playgrounds/01 Flexbox Components.playground/playground.xcworkspace/contents.xcworkspacedata diff --git a/Playgrounds/01 Vanilla Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate b/Playgrounds/01 Flexbox Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate similarity index 100% rename from Playgrounds/01 Vanilla Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate rename to Playgrounds/01 Flexbox Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate diff --git a/Playgrounds/02 Flexbox Components.playground/timeline.xctimeline b/Playgrounds/01 Flexbox Components.playground/timeline.xctimeline similarity index 100% rename from Playgrounds/02 Flexbox Components.playground/timeline.xctimeline rename to Playgrounds/01 Flexbox Components.playground/timeline.xctimeline diff --git a/Playgrounds/02 Flexbox Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate b/Playgrounds/02 Flexbox Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate deleted file mode 100644 index 5ad15671..00000000 Binary files a/Playgrounds/02 Flexbox Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate and /dev/null differ diff --git a/Playgrounds/01 Vanilla Components.playground/Contents.swift b/Playgrounds/02 Vanilla Components.playground/Contents.swift similarity index 100% rename from Playgrounds/01 Vanilla Components.playground/Contents.swift rename to Playgrounds/02 Vanilla Components.playground/Contents.swift diff --git a/Playgrounds/02 Flexbox Components.playground/Resources/logo_small.png b/Playgrounds/02 Vanilla Components.playground/Resources/logo_small.png similarity index 100% rename from Playgrounds/02 Flexbox Components.playground/Resources/logo_small.png rename to Playgrounds/02 Vanilla Components.playground/Resources/logo_small.png diff --git a/Playgrounds/02 Flexbox Components.playground/Sources/Shared.swift b/Playgrounds/02 Vanilla Components.playground/Sources/Shared.swift similarity index 100% rename from Playgrounds/02 Flexbox Components.playground/Sources/Shared.swift rename to Playgrounds/02 Vanilla Components.playground/Sources/Shared.swift diff --git a/Playgrounds/02 Vanilla Components.playground/contents.xcplayground b/Playgrounds/02 Vanilla Components.playground/contents.xcplayground new file mode 100644 index 00000000..2c597bbd --- /dev/null +++ b/Playgrounds/02 Vanilla Components.playground/contents.xcplayground @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/Playgrounds/02 Flexbox Components.playground/playground.xcworkspace/contents.xcworkspacedata b/Playgrounds/02 Vanilla Components.playground/playground.xcworkspace/contents.xcworkspacedata similarity index 100% rename from Playgrounds/02 Flexbox Components.playground/playground.xcworkspace/contents.xcworkspacedata rename to Playgrounds/02 Vanilla Components.playground/playground.xcworkspace/contents.xcworkspacedata diff --git a/Playgrounds/02 Vanilla Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate b/Playgrounds/02 Vanilla Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate new file mode 100644 index 00000000..b2927b6d Binary files /dev/null and b/Playgrounds/02 Vanilla Components.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate differ diff --git a/Playgrounds/01 Vanilla Components.playground/timeline.xctimeline b/Playgrounds/02 Vanilla Components.playground/timeline.xctimeline similarity index 100% rename from Playgrounds/01 Vanilla Components.playground/timeline.xctimeline rename to Playgrounds/02 Vanilla Components.playground/timeline.xctimeline diff --git a/Playgrounds/03 Components embedded in Cells.playground/Contents.swift b/Playgrounds/03 Components embedded in Cells.playground/Contents.swift new file mode 100644 index 00000000..a41bec11 --- /dev/null +++ b/Playgrounds/03 Components embedded in Cells.playground/Contents.swift @@ -0,0 +1,116 @@ +import UIKit +import XCPlayground +import Render + +/*: + ![logo](logo_small.png) + # Components embedded in cells + + You can wrap your components in `ComponentTableViewCell` or `ComponentCollectionViewCell` and use + the classic dataSource/delegate pattern for you view controller. + */ + +class FooState: ComponentStateBase { + let text: String = randomString(randomInt(0, max: 500)) +} + +class FooComponentView: ComponentView { + + override class func initialize() { + + // if we intend to use this component inside of a cell + // we have to register an instance as a prototype for the infra. + // The 'initialize' function seems to be a convenient palce to do it. + registerPrototype(component: FooComponentView()) + } + + // we cast the state for convenience + var fooState: FooState { + return (self.state as? FooState) ?? FooState() + } + + override func construct() -> ComponentNodeType { + let margin: Float = 4.0 + let insets: Inset = (margin, margin, margin, margin, margin, margin) + return ComponentNode().configure({ view in + view.style.flexDirection = .Row + view.style.margin = insets + + // that's how we can define the size in relation to the size of the parent view. + let min = ~self.parentSize.width + view.style.minDimensions.width = max(min, 96) + + view.backgroundColor = UIColor.A + }).children([ + ComponentNode().configure({ view in + view.style.dimensions = (32, 32) + view.style.margin = insets + view.backgroundColor = UIColor.B + view.layer.cornerRadius = 16 + }), + ComponentNode().configure({ view in + view.style.margin = insets + view.style.alignSelf = .Center + view.style.flex = Flex.Max + view.text = self.fooState.text + view.numberOfLines = 0 + view.font = UIFont.systemFontOfSize(12.0, weight: UIFontWeightLight) + }) + ]) + } +} + +/*: Now this is how we wrap the component inside a `ComponentTableViewCell` in our datasource */ + +class DataSource: NSObject, UITableViewDataSource { + + let items: [FooState] = { + var items = [FooState]() + for _ in 0..<6 { + items.append(FooState()) + } + return items + }() + + func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { + return items.count + } + + func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { + let reuseIdentifier = String(FooComponentView.self) + let cell: ComponentTableViewCell! = + //dequeue a cell with the given identifier + //(remember to use different identifiers for different component classes) + tableView.dequeueReusableCellWithIdentifier(reuseIdentifier) as? ComponentTableViewCell ?? + + //or create a new Cell wrapping the component + ComponentTableViewCell(reuseIdentifier: reuseIdentifier, component: FooComponentView()) + + //set the state for the cell + cell.state = items[indexPath.row] + + //and render the component + cell.renderComponent(CGSize.sizeConstraintToWidth(tableView.bounds.size.width)) + return cell + } +} + +/*: And finally create a `UITableView` */ + +let tableView = UITableView(frame: CGRect(origin: CGPoint.zero, size: CGSize(width: 320, height: 320))) + +//we want automatic dimensions for our cells +tableView.rowHeight = UITableViewAutomaticDimension + +//this improves drastically the performance of reloadData when you have a large collection of items +tableView.estimatedRowHeight = 100 + +let dataSource = DataSource() +tableView.dataSource = dataSource +tableView.reloadData() + +tableView + + + + diff --git a/Playgrounds/03 Components embedded in Cells.playground/Resources/logo_small.png b/Playgrounds/03 Components embedded in Cells.playground/Resources/logo_small.png new file mode 100644 index 00000000..c7e60eae Binary files /dev/null and b/Playgrounds/03 Components embedded in Cells.playground/Resources/logo_small.png differ diff --git a/Playgrounds/03 Components embedded in Cells.playground/Sources/Shared.swift b/Playgrounds/03 Components embedded in Cells.playground/Sources/Shared.swift new file mode 100644 index 00000000..cc7b3fd6 --- /dev/null +++ b/Playgrounds/03 Components embedded in Cells.playground/Sources/Shared.swift @@ -0,0 +1,51 @@ + +import UIKit + +public func snapshot(view: UIView) -> UIImage { + view.layoutSubviews() + UIGraphicsBeginImageContext(view.frame.size) + view.layer.renderInContext(UIGraphicsGetCurrentContext()!) + let image = UIGraphicsGetImageFromCurrentImageContext() + UIGraphicsEndImageContext() + return image +} + +extension UIColor { + class public var A: UIColor { + return UIColor(red: 238/255, green: 238/255, blue: 238/255, alpha: 1) + } + class public var B: UIColor { + return UIColor(red: 0/255, green: 188/255, blue: 212/255, alpha: 1) + } + class public var C: UIColor { + return UIColor(red: 76/255, green: 175/255, blue: 80/255, alpha: 1) + } + class public var D: UIColor { + return UIColor(red: 165/255, green: 214/255, blue: 167/255, alpha: 1) + } + class public var E: UIColor { + return UIColor(red: 46/255, green: 125/255, blue: 50/255, alpha: 1) + } + class public var F: UIColor { + return UIColor(red: 244/255, green: 67/255, blue: 54/255, alpha: 1) + } + class public var G: UIColor { + return UIColor(red: 33/255, green: 150/255, blue: 243/255, alpha: 1) + } +} + +public func randomString(length: Int) -> String { + let allowedChars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789 " + let allowedCharsCount = UInt32(allowedChars.characters.count) + var randomString = "" + for _ in (0.. Int { + return min + Int(arc4random_uniform(UInt32(max - min + 1))) +} \ No newline at end of file diff --git a/Playgrounds/01 Vanilla Components.playground/contents.xcplayground b/Playgrounds/03 Components embedded in Cells.playground/contents.xcplayground similarity index 83% rename from Playgrounds/01 Vanilla Components.playground/contents.xcplayground rename to Playgrounds/03 Components embedded in Cells.playground/contents.xcplayground index 712c41fb..35968656 100644 --- a/Playgrounds/01 Vanilla Components.playground/contents.xcplayground +++ b/Playgrounds/03 Components embedded in Cells.playground/contents.xcplayground @@ -1,4 +1,4 @@ - + \ No newline at end of file diff --git a/Playgrounds/03 Components embedded in Cells.playground/playground.xcworkspace/contents.xcworkspacedata b/Playgrounds/03 Components embedded in Cells.playground/playground.xcworkspace/contents.xcworkspacedata new file mode 100644 index 00000000..919434a6 --- /dev/null +++ b/Playgrounds/03 Components embedded in Cells.playground/playground.xcworkspace/contents.xcworkspacedata @@ -0,0 +1,7 @@ + + + + + diff --git a/Playgrounds/03 Components embedded in Cells.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate b/Playgrounds/03 Components embedded in Cells.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate new file mode 100644 index 00000000..ef3012ae Binary files /dev/null and b/Playgrounds/03 Components embedded in Cells.playground/playground.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate differ diff --git a/Playgrounds/03 Components embedded in Cells.playground/timeline.xctimeline b/Playgrounds/03 Components embedded in Cells.playground/timeline.xctimeline new file mode 100644 index 00000000..8b28534a --- /dev/null +++ b/Playgrounds/03 Components embedded in Cells.playground/timeline.xctimeline @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/Playgrounds/RenderPlaygrounds.xcworkspace/contents.xcworkspacedata b/Playgrounds/RenderPlaygrounds.xcworkspace/contents.xcworkspacedata index 92ad4f3b..b48ce524 100644 --- a/Playgrounds/RenderPlaygrounds.xcworkspace/contents.xcworkspacedata +++ b/Playgrounds/RenderPlaygrounds.xcworkspace/contents.xcworkspacedata @@ -5,9 +5,12 @@ location = "group:../Render.xcodeproj"> + location = "group:/Users/alexusbergo/Desktop/swift/Render/Playgrounds/01 Flexbox Components.playground"> + location = "group:/Users/alexusbergo/Desktop/swift/Render/Playgrounds/02 Vanilla Components.playground"> + + diff --git a/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate b/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate index 984d9569..253e93ee 100644 Binary files a/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate and b/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/UserInterfaceState.xcuserstate differ diff --git a/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist b/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist index 916ba0c7..58f7017c 100644 --- a/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist +++ b/Playgrounds/RenderPlaygrounds.xcworkspace/xcuserdata/alexusbergo.xcuserdatad/xcdebugger/Breakpoints_v2.xcbkptlist @@ -16,7 +16,7 @@