Digital ACT-191 ONEAPP-7013 story: Slot alignment and sending data as an example
This commit is contained in:
parent
14199f53d1
commit
1ea4dff90b
@ -67,6 +67,9 @@ class CarouselViewController: BaseViewController<Carousel> {
|
|||||||
var paginationInsetField = NumericField()
|
var paginationInsetField = NumericField()
|
||||||
var widthTextField = NumericField()
|
var widthTextField = NumericField()
|
||||||
var percentageTextField = NumericField()
|
var percentageTextField = NumericField()
|
||||||
|
var exampleSwitch = Toggle()
|
||||||
|
var emptyData: [Any] = []
|
||||||
|
var rows: [Any] = []
|
||||||
|
|
||||||
override func viewDidLoad() {
|
override func viewDidLoad() {
|
||||||
super.viewDidLoad()
|
super.viewDidLoad()
|
||||||
@ -90,6 +93,7 @@ class CarouselViewController: BaseViewController<Carousel> {
|
|||||||
addFormRow(label: "Pagination Inset", view: paginationInsetField)
|
addFormRow(label: "Pagination Inset", view: paginationInsetField)
|
||||||
addFormRow(label: "Width", view: widthTextField)
|
addFormRow(label: "Width", view: widthTextField)
|
||||||
addFormRow(label: "Percentage (1-100)", view: percentageTextField)
|
addFormRow(label: "Percentage (1-100)", view: percentageTextField)
|
||||||
|
addFormRow(label: "Example", view: exampleSwitch)
|
||||||
addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
|
addFormRow(label: "Slot Horizontal Alignment", view: horizAlignmtPickerSelectorView)
|
||||||
addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
|
addFormRow(label: "Slot Vertical Alignment", view: vertAlignmtPickerSelectorView)
|
||||||
|
|
||||||
@ -130,6 +134,12 @@ class CarouselViewController: BaseViewController<Carousel> {
|
|||||||
self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
|
self.component.pagination = .init(kind: paginationKindPickerSelectorView.selectedItem, floating: sender.isOn)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
exampleSwitch.onChange = { [weak self] sender in
|
||||||
|
guard let self else { return }
|
||||||
|
component.data = sender.isOn ? rows : emptyData
|
||||||
|
component.slotAlignment = nil
|
||||||
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
func setupModel() {
|
func setupModel() {
|
||||||
@ -142,7 +152,26 @@ class CarouselViewController: BaseViewController<Carousel> {
|
|||||||
paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
|
paginationKindPickerSelectorView.text = ButtonIcon.Kind.lowContrast.rawValue
|
||||||
paginationFloatingSwitch.isOn = true
|
paginationFloatingSwitch.isOn = true
|
||||||
paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
|
paginationInsetField.text = UIDevice.isIPad ? "12" : "8"
|
||||||
component.data = [{},{},{},{},{},{},{},{}]
|
rows.append(Label().with { $0.text = "Slot 1"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 2"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 3"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 4"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 5"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 6"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 7"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 8"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 9"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
rows.append(Label().with { $0.text = "Slot 10"; $0.textStyle = .boldTitleSmall; $0.lineBreakMode = .byWordWrapping})
|
||||||
|
emptyData = [{},{},{},{},{},{},{},{},{},{}]
|
||||||
|
component.data = exampleSwitch.isOn ? rows : emptyData
|
||||||
|
component.renderItemStyle = .init(backgroundColor: "#d9d9d9", height: 100, width: 100, borderRadius: 12.0)
|
||||||
|
label.text = "1"
|
||||||
|
|
||||||
|
// Callback when moving the carousel. Returns initial visible slide's index in the carousel.
|
||||||
|
component.onChange = { [weak self] selectedIndex in
|
||||||
|
guard let self else { return }
|
||||||
|
label.text = "\(selectedIndex)"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
func setupPicker() {
|
func setupPicker() {
|
||||||
@ -197,5 +226,14 @@ class CarouselViewController: BaseViewController<Carousel> {
|
|||||||
self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
|
self.component.pagination = .init(kind: item, floating: paginationFloatingSwitch.isOn)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
vertAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||||
|
guard let self else { return }
|
||||||
|
self.component.slotAlignment = .init(vertical: item, horizontal: horizAlignmtPickerSelectorView.selectedItem)
|
||||||
|
}
|
||||||
|
|
||||||
|
horizAlignmtPickerSelectorView.onPickerDidSelect = { [weak self] item in
|
||||||
|
guard let self else { return }
|
||||||
|
self.component.slotAlignment = .init(vertical: vertAlignmtPickerSelectorView.selectedItem, horizontal: item)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user