Skip to content

Commit

Permalink
Add NavigationItem host component (#27)
Browse files Browse the repository at this point in the history 
Resolves #22

* Add StackControllerItem host component
* Move {Stack,Navigation}Presenter, related changes
* Update StandardComponents doc with new name
* Fix styling after view controller behavior change
* Remove style from StackView.Props.init
* Add `viewDidLoad` comment to UIViewComponent
* Fix tests not compiling
* Implement basic UIHostComponent for NavigationItem
* Implement prefersLargeTitles, test item titles
* Remove unused public func isSubtypeOf<T, U, V, W>
* Remove unused NavigationItemBox, fix formatting
* Remove missing file from the project
  • Loading branch information
@MaxDesiatov
MaxDesiatov committed Feb 11, 2019
1 parent dfe658f commit e413b06
Show file tree
Hide file tree
Showing 19 changed files with 305 additions and 113 deletions.
75 changes: 42 additions & 33 deletions Example/Gluon/GluonApp.swift
View file
Expand Up @@ -8,17 +8,18 @@

import Gluon

struct StackModal: PureLeafComponent {
struct NavigationModal: PureLeafComponent {
struct Props: Equatable {
let isPresented: State<Bool>
}

static func render(props: Props) -> AnyNode {
return props.isPresented.value ?
ModalPresenter.node(
StackPresenter<NavRouter>.node(
NavigationPresenter<NavRouter>.node(
.init(
initial: .first,
prefersLargeTitles: true,
routerProps: .init(
onPress: Handler { props.isPresented.set(false) }
)
Expand All @@ -44,21 +45,26 @@ struct SimpleModal: LeafComponent {
let backgroundColor = hooks.state(0)

return props.isPresented.value ? ModalPresenter.node(
View.node(.init(Style(backgroundColor: colors[backgroundColor.value].0)),
StackView.node(.init(
axis: .vertical,
distribution: .fillEqually,
Style(Edges.equal(to: .parent))
), [
Button.node(.init(
onPress: Handler { props.isPresented.set(false) }
), "Close Modal"),
SegmentedControl.node(
.init(value: backgroundColor.value,
valueHandler: Handler(backgroundColor.set)),
colors.map { $0.1 }
),
]))
View.node(
.init(Style(
backgroundColor: colors[backgroundColor.value].0,
Edges.equal(to: .parent)
)),
StackView.node(.init(
axis: .vertical,
distribution: .fillEqually,
Edges.equal(to: .parent)
), [
Button.node(.init(
onPress: Handler { props.isPresented.set(false) }
), "Close Modal"),
SegmentedControl.node(
.init(value: backgroundColor.value,
valueHandler: Handler(backgroundColor.set)),
colors.map { $0.1 }
),
])
)
) : Null.node()
}
}
Expand All @@ -78,12 +84,15 @@ struct TableModal: PureLeafComponent {
}

static func render(props: Props) -> AnyNode {
let list = ListView<ListProvider>.node(.init(singleSection: [1, 2, 3]))
let list = ListView<ListProvider>.node(.init(
singleSection: [1, 2, 3],
Style(Edges.equal(to: .parent))
))
return props.isPresented.value ? ModalPresenter.node(list) : Null.node()
}
}

struct ConstrainModal: LeafComponent {
struct ConstraintModal: LeafComponent {
struct Props: Equatable {
let isPresented: State<Bool>
}
Expand All @@ -93,11 +102,11 @@ struct ConstrainModal: LeafComponent {

return props.isPresented.value ? ModalPresenter.node(
View.node(
.init(Style(backgroundColor: .white)),
.init(Style(backgroundColor: .white, Edges.equal(to: .parent))),
StackView.node(.init(
axis: .vertical,
distribution: .fillEqually,
Style(Edges.equal(to: .parent))
Edges.equal(to: .parent)
), [
Button.node(.init(
onPress: Handler { props.isPresented.set(false) }
Expand Down Expand Up @@ -136,11 +145,11 @@ struct DatePickerModal: LeafComponent {
let formattedDate = dateFormatter.string(from: date.value)
return props.isPresented.value ? ModalPresenter.node(
View.node(
.init(Style(backgroundColor: .white)),
.init(Style(backgroundColor: .white, Edges.equal(to: .parent))),
StackView.node(.init(
axis: .vertical,
distribution: .fillEqually,
Style(Edges.equal(to: .parent))
Edges.equal(to: .parent)
), [
Button.node(.init(
onPress: Handler { props.isPresented.set(false) }
Expand Down Expand Up @@ -180,11 +189,11 @@ struct CALayerModal: LeafComponent {

return props.isPresented.value ? ModalPresenter.node(
View.node(
.init(Style(backgroundColor: .white)),
.init(Style(backgroundColor: .white, Edges.equal(to: .parent))),
StackView.node(.init(
axis: .vertical,
distribution: .fillEqually,
Style(Edges.equal(to: .parent))
Edges.equal(to: .parent)
), [
Button.node(.init(
onPress: Handler { props.isPresented.set(false) }
Expand All @@ -202,7 +211,7 @@ struct CALayerModal: LeafComponent {
borderWidth: Float(state.value * 10),
cornerRadius: Float(state.value * 10),
opacity: Float(state.value),
Width.equal(to: .parent, constant: 10)
Width.equal(to: .parent)
)
),
Label.node(.init(
Expand Down Expand Up @@ -231,7 +240,7 @@ struct Counter: LeafComponent {
let isStackModalPresented = hooks.state(false)
let isAnimationModalPresented = hooks.state(false)
let isTableModalPresented = hooks.state(false)
let isConstrainModalPresented = hooks.state(false)
let isConstraintModalPresented = hooks.state(false)
let isDatePickerModalPresented = hooks.state(false)
let isCALayerModalPresented = hooks.state(false)
let switchState = hooks.state(true)
Expand Down Expand Up @@ -264,7 +273,7 @@ struct Counter: LeafComponent {
isEnabled: isEnabled.value,
onPress: Handler { isStackModalPresented.set(true) }
),
"Present Stack Modal"
"Present Navigation Modal"
),

Button.node(
Expand All @@ -286,9 +295,9 @@ struct Counter: LeafComponent {
Button.node(
.init(
isEnabled: isEnabled.value,
onPress: Handler { isConstrainModalPresented.set(true) }
onPress: Handler { isConstraintModalPresented.set(true) }
),
"Present Constrain Modal"
"Present Constraint Modal"
),

Button.node(
Expand All @@ -307,13 +316,13 @@ struct Counter: LeafComponent {
"Present Core Animation Layer Modal"
),

StackModal.node(.init(isPresented: isStackModalPresented)),
NavigationModal.node(.init(isPresented: isStackModalPresented)),

SimpleModal.node(.init(isPresented: isAnimationModalPresented)),

TableModal.node(.init(isPresented: isTableModalPresented)),

ConstrainModal.node(.init(isPresented: isConstrainModalPresented)),
ConstraintModal.node(.init(isPresented: isConstraintModalPresented)),

DatePickerModal.node(.init(isPresented: isDatePickerModalPresented)),

Expand Down Expand Up @@ -388,7 +397,7 @@ struct Counter: LeafComponent {
alignment: .center,
axis: .vertical,
distribution: .fillEqually,
Style(Edges.equal(to: .parent))
Edges.equal(to: .parent)
),
children
)
Expand Down
55 changes: 29 additions & 26 deletions Example/Gluon/NavRouter.swift
View file
Expand Up @@ -8,7 +8,7 @@

import Gluon

struct NavRouter: StackRouter {
struct NavRouter: NavigationRouter {
enum Route {
case first
case second
Expand All @@ -32,32 +32,35 @@ struct NavRouter: StackRouter {
), "Close Modal")
switch route {
case .first:
return View.node(
.init(Style(backgroundColor: .white)), [
close,
Label.node(.init(
alignment: .center,
Style(Rectangle(Point(x: 0, y: 200),
Size(width: 200, height: 200)))
), "first"),
Button.node(.init(
onPress: Handler { push(.second) },
Style(Rectangle(Point(x: 0, y: 400),
Size(width: 200, height: 200)))
), "second"),
]
)
return
NavigationItem.node(
.init(title: "First", titleMode: .standard),
View.node(
.init(Style(backgroundColor: .white, Edges.equal(to: .parent))), [
close,
Button.node(.init(
onPress: Handler { push(.second) },
Style(Rectangle(Point(x: 0, y: 400),
Size(width: 200, height: 200)))
), "Go to Second"),
]
)
)
case .second:
return View.node(
.init(Style(backgroundColor: .white)), [
close,
Label.node(.init(
alignment: .center,
Style(Rectangle(Point(x: 0, y: 200),
Size(width: 200, height: 200)))
), "second"),
]
)
return
NavigationItem.node(
.init(title: "Second", titleMode: .large),
View.node(
.init(Style(backgroundColor: .white, Edges.equal(to: .parent))), [
close,
Label.node(.init(
alignment: .center,
Style(Rectangle(Point(x: 0, y: 200),
Size(width: 200, height: 200)))
), "This is second"),
]
)
)
}
}
}
2 changes: 1 addition & 1 deletion Example/Podfile.lock
View file
Expand Up @@ -19,4 +19,4 @@ SPEC CHECKSUMS:

PODFILE CHECKSUM: 506176d9f57e313b696258608414e29b871b813e

COCOAPODS: 1.6.0.rc.2
COCOAPODS: 1.6.0

0 comments on commit e413b06

Please sign in to comment.