Giter VIP home page Giter VIP logo

swift-declarative-tables's Introduction

Swift-Declarative-Tables

Makes Swift 4 tables much simpler and declarative, like React, making it simple to add and remove sections and rows dynamically.

No more crazy switches and monster UITableViewDelegates methods! Each cell's state is declared in one place.

Forked off of Shopify's FunctionalTableData.

I've added the following, ๐ŸŒŸ A easy to use generic CarouselCell that it is a CellConfigType (i.e. a FunctionalTableData cell), containing a UICollectionView with a single type of UICollectionViewCell. ๐ŸŒŸ Sample cells and view controllers demonstrating how to use FunctionalTableData. ๐ŸŒŸ Custom cells, headers, and CarouselItemCells created can be created programically or with nibs. Simply conform the UIVIew/UICollectionViewCell to the protocol NibView/CarouselItemNibView.

๐ŸŒŸ This Demo ๐ŸŒŸ

MainViewController

FunctionalTableData demo with multiple types of cells.

TableViewController

FunctionalTableData demo where cells can be inserted and removed when you tap โž• or ๐Ÿ—‘.

CollectionViewController

CollectionTableData demo where cells can be inserted and removed when you tap โž• or ๐Ÿ—‘.

CarouselCell<CustomItemCell>

A generic FunctionalTableData cell with a horizontal scrolling, or vertical non-scrolling UICollectionView. Each CarouselCell takes a single CarouselItemCell type. Each CarouselItemCell is a UICollectionViewCell, and is associated with a ItemModel type that it uses to calculate its size, and configure its views.

protocol CarouselItemCell where Self: UICollectionViewCell {
	associatedtype ItemModel: Equatable'
	
	static func sizeForItem(model: ItemModel, in collectionView: UICollectionView) -> CGSize
	func configure(model: ItemModel)
	
	static func scrollDirection() -> UICollectionViewScrollDirection
}
CarouselCell<CarouselItemColorTilesCell>

A programically created scrolling horizontal CarouselCell. The ItemModel is a UIColor, which sets the CarouselItemColorTilesCell's color.

let cell = CarouselColorTilesCell(
	key: "colorTilesCell",
	state: CarouselState<CarouselItemColorTilesCell>(
		itemModels: [.red, .blue, .purple, .yellow, .green, .orange],
		collectionHeight: 120,
		didSelectItemCell: { indexPath in
			print("Did tap item \(indexPath.row)")})
)

Color Tiles CarouselCell

CarouselCell<CarouselItemVerticalGridCell>

A programically created non-scrolling vertical CarouselCell.

let fourGridCell = resizableCell(key: "fourGridCell", color: .purple, height: 100, itemsPerRow: [1, 3])

let fiveGridCell = resizableCell(key: "fiveGridCell", color: .green, height: 100, itemsPerRow: [2, 3])

let tenGridCell = resizableCell(key: "tenGridCell", color: .blue, height: 100, itemsPerRow: [4, 3, 2, 1])

Vertical Grid Cell

CarouselCell - CarouselCell<CarouselItemDetailCell>

A scrolling horizontal CarouselCell created using a storyboard.

let dogeItemState = CarouselItemDetailState(image: #imageLiteral(resourceName: "finedog"), title: "Doge", subtitle: "This is fine")
let dogeCarousel = CarouselDetailCell(
	key: "dogeCarousel",
	state: CarouselState<CarouselItemDetailCell>(
		itemModels: Array(repeating: dogeItemState, count: 20),
		collectionHeight: 220,
		didSelectItemCell: { index in
			print("Did select doge at index \(index)") }))

CarouselDetailCell

DetailCell

A CellConfigType created with storyboard.

let detailCell = DetailCell(
	key: "detailCell",
	state: DetailState(
		image: #imageLiteral(resourceName: "finedog"),
		title: "Sample Title",
		subtitle: "This is the subs on a detail cell"))

LabelCell

LabelCell

A programically created CellConfigType.

let labelCell = LabelCell(
	key: "labelCell",
	actions: CellActions(selectionAction: { _ in
		print("label cell tapped")
		return .deselected
	}),
	state: LabelState(text: "This is a LabelCell"))

LabelCell

swift-declarative-tables's People

Contributors

p-sun avatar

Watchers

Carabineiro avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.