Add LazyHGrid and LazyVGrid

Sources/TokamakCore/Tokens/GridItem.swift

@@ -0,0 +1,36 @@
+// Copyright 2019-2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 7/13/20.
+//
+
+public struct GridItem {
+  public enum Size {
+    case fixed(CGFloat)
+    case flexible(minimum: CGFloat = 10, maximum: CGFloat = .infinity)
+    case adaptive(minimum: CGFloat, maximum: CGFloat = .infinity)
+  }
+
+  public var size: GridItem.Size
+  public var spacing: CGFloat
+  public var alignment: Alignment
+
+  public init(_ size: GridItem.Size = .flexible(),
+              spacing: CGFloat? = nil,
+              alignment: Alignment? = nil) {
+    self.size = size
+    self.spacing = spacing ?? 4
+    self.alignment = alignment ?? .center
+  }
+}

Sources/TokamakCore/Views/LazyHGrid.swift

@@ -0,0 +1,50 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 7/13/20.
+//
+
+public struct LazyHGrid<Content>: View where Content: View {
+  let rows: [GridItem]
+  let alignment: VerticalAlignment
+  let spacing: CGFloat
+  let pinnedViews: PinnedScrollableViews
+  let content: Content
+
+  public init(rows: [GridItem],
+              alignment: VerticalAlignment = .center,
+              spacing: CGFloat? = nil,
+              pinnedViews: PinnedScrollableViews = .init(),
+              @ViewBuilder content: () -> Content) {
+    self.rows = rows
+    self.alignment = alignment
+    self.spacing = spacing ?? 8
+    self.pinnedViews = pinnedViews
+    self.content = content()
+  }
+
+  public var body: Never {
+    neverBody("LazyVGrid")
+  }
+}
+
+public struct _LazyHGridProxy<Content> where Content: View {
+  public let subject: LazyHGrid<Content>
+
+  public init(_ subject: LazyHGrid<Content>) { self.subject = subject }
+
+  public var rows: [GridItem] { subject.rows }
+  public var content: Content { subject.content }
+  public var spacing: CGFloat { subject.spacing }
+}

Sources/TokamakCore/Views/LazyVGrid.swift

@@ -0,0 +1,50 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 7/13/20.
+//
+
+public struct LazyVGrid<Content>: View where Content: View {
+  let columns: [GridItem]
+  let alignment: HorizontalAlignment
+  let spacing: CGFloat
+  let pinnedViews: PinnedScrollableViews
+  let content: Content
+
+  public init(columns: [GridItem],
+              alignment: HorizontalAlignment = .center,
+              spacing: CGFloat? = nil,
+              pinnedViews: PinnedScrollableViews = .init(),
+              @ViewBuilder content: () -> Content) {
+    self.columns = columns
+    self.alignment = alignment
+    self.spacing = spacing ?? 8
+    self.pinnedViews = pinnedViews
+    self.content = content()
+  }
+
+  public var body: Never {
+    neverBody("LazyVGrid")
+  }
+}
+
+public struct _LazyVGridProxy<Content> where Content: View {
+  public let subject: LazyVGrid<Content>
+
+  public init(_ subject: LazyVGrid<Content>) { self.subject = subject }
+
+  public var columns: [GridItem] { subject.columns }
+  public var content: Content { subject.content }
+  public var spacing: CGFloat { subject.spacing }
+}

Sources/TokamakCore/Views/ScrollView.swift

@@ -58,3 +58,13 @@ extension ScrollView: ParentView {
     (content as? GroupView)?.children ?? [AnyView(content)]
   }
 }
+
+public struct PinnedScrollableViews: OptionSet {
+  public let rawValue: UInt32
+  public init(rawValue: UInt32) {
+    self.rawValue = rawValue
+  }
+
+  public static let sectionHeaders: Self = .init(rawValue: 1 << 0)
+  public static let sectionFooters: Self = .init(rawValue: 1 << 1)
+}

Sources/TokamakDOM/Tokens/Tokens.swift

@@ -27,3 +27,22 @@ public typealias CGRect = TokamakCore.CGRect
 public typealias CGPoint = TokamakCore.CGPoint
 public typealias CGSize = TokamakCore.CGSize
 public typealias CGAffineTransform = TokamakCore.CGAffineTransform
+
+public typealias GridItem = TokamakCore.GridItem
+
+extension GridItem: CustomStringConvertible {
+  public var description: String {
+    switch size {
+    case let .adaptive(minimum: min, maximum: max):
+      let min = min == .infinity ? "1fr" : "\(min)px"
+      let max = max == .infinity ? "1fr" : "\(max)px"
+      return "repeat(auto-fill, minmax(\(min), \(max)))"
+    case let .fixed(size):
+      return "\(size)px"
+    case let .flexible(minimum: min, maximum: max):
+      let min = min == .infinity ? "1fr" : min.description
+      let max = max == .infinity ? "1fr" : max.description
+      return "minmax(\(min), \(max))"
+    }
+  }
+}

Sources/TokamakDOM/Views/LazyHGrid.swift

@@ -0,0 +1,63 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 7/13/20.
+//
+
+import TokamakCore
+
+public typealias LazyHGrid = TokamakCore.LazyHGrid
+
+extension LazyHGrid: SpacerContainer {
+  var axis: SpacerContainerAxis { .horizontal }
+  var hasSpacer: Bool { false }
+  var fillCrossAxis: Bool {
+    _LazyHGridProxy(self).rows.contains {
+      if case .adaptive(minimum: _, maximum: _) = $0.size {
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+}
+
+extension LazyHGrid: ViewDeferredToRenderer {
+  var lastRow: GridItem? {
+    _LazyHGridProxy(self).rows.last
+  }
+
+  public var deferredBody: AnyView {
+    var styles = """
+    display: grid;
+    grid-template-rows: \(_LazyHGridProxy(self)
+      .rows
+      .map(\.description)
+      .joined(separator: " "));
+    grid-auto-flow: column;
+    """
+    if fillCrossAxis {
+      styles += "height: 100%;"
+    }
+    // CSS Grid doesn't let these be specified for specific rows
+    if let lastRow = lastRow {
+      styles += "justify-items: \(lastRow.alignment.horizontal.cssValue);"
+      styles += "align-items: \(lastRow.alignment.vertical.cssValue);"
+    }
+    styles += "grid-gap: \(_LazyHGridProxy(self).spacing)px;"
+    return AnyView(HTML("div", ["style": styles]) {
+      _LazyHGridProxy(self).content
+    })
+  }
+}

Sources/TokamakDOM/Views/LazyVGrid.swift

@@ -0,0 +1,63 @@
+// Copyright 2020 Tokamak contributors
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+//  Created by Carson Katri on 7/13/20.
+//
+
+import TokamakCore
+
+public typealias LazyVGrid = TokamakCore.LazyVGrid
+
+extension LazyVGrid: SpacerContainer {
+  var axis: SpacerContainerAxis { .vertical }
+  var hasSpacer: Bool { false }
+  var fillCrossAxis: Bool {
+    _LazyVGridProxy(self).columns.contains {
+      if case .adaptive(minimum: _, maximum: _) = $0.size {
+        return true
+      } else {
+        return false
+      }
+    }
+  }
+}
+
+extension LazyVGrid: ViewDeferredToRenderer {
+  var lastColumn: GridItem? {
+    _LazyVGridProxy(self).columns.last
+  }
+
+  public var deferredBody: AnyView {
+    var styles = """
+    display: grid;
+    grid-template-columns: \(_LazyVGridProxy(self)
+      .columns
+      .map(\.description)
+      .joined(separator: " "));
+    grid-auto-flow: row;
+    """
+    if fillCrossAxis {
+      styles += "width: 100%;"
+    }
+    // CSS Grid doesn't let these be specified for specific columns
+    if let lastCol = lastColumn {
+      styles += "justify-items: \(lastCol.alignment.horizontal.cssValue);"
+      styles += "align-items: \(lastCol.alignment.vertical.cssValue);"
+    }
+    styles += "grid-gap: \(_LazyVGridProxy(self).spacing)px;"
+    return AnyView(HTML("div", ["style": styles]) {
+      _LazyVGridProxy(self).content
+    })
+  }
+}

Sources/TokamakDOM/Views/SecureField.swift

@@ -29,10 +29,10 @@ extension SecureField: ViewDeferredToRenderer where Label == Text {
     ], listeners: [
       "keypress": { event in if event.key == "Enter" { proxy.onCommit() } },
       "input": { event in
-        if let newValue = event.target.object?.value.string {
-          proxy.textBinding.wrappedValue = newValue
-        }
-      },
+          if let newValue = event.target.object?.value.string {
+            proxy.textBinding.wrappedValue = newValue
+          }
+        },
     ]))
   }
 }

Sources/TokamakDOM/Views/Spacer.swift

@@ -20,12 +20,13 @@ enum SpacerContainerAxis {
   case horizontal, vertical
 }
 
-protocol SpacerContainer: ParentView {
+protocol SpacerContainer {
   var hasSpacer: Bool { get }
   var axis: SpacerContainerAxis { get }
+  var fillCrossAxis: Bool { get }
 }
 
-extension SpacerContainer {
+extension SpacerContainer where Self: ParentView {
   var hasSpacer: Bool {
     children
       .compactMap {

Sources/TokamakDOM/Views/TextField.swift

@@ -44,10 +44,10 @@ extension TextField: ViewDeferredToRenderer where Label == Text {
       "blur": { _ in proxy.onEditingChanged(false) },
       "keypress": { event in if event.key == "Enter" { proxy.onCommit() } },
       "input": { event in
-        if let newValue = event.target.object?.value.string {
-          proxy.textBinding.wrappedValue = newValue
-        }
-      },
+          if let newValue = event.target.object?.value.string {
+            proxy.textBinding.wrappedValue = newValue
+          }
+        },
     ]))
   }
 }