Region headers

RegionHeader.lua

local Roact = require("Roact")
local Flipper = require("Flipper") -- github.com/Reselim/Flipper
local Promise = require("Promise") -- github.com/evaera/roblox-lua-promise

local ACTIVE_TIME = 3

local RegionHeader = Roact.PureComponent:extend("RegionHeader")

function RegionHeader:init()
	self.motor = Flipper.SingleMotor.new(0)

	self:setState({
		rendered = false
	})

	self.motor:onStep(function(value)
		local rendered = value > 0

		self:setState(function(state)
			if state.rendered ~= rendered then
				return {
					rendered = rendered
				}
			end
		end)
	end)
end

function RegionHeader:open()
	self.timer = Promise.delay(ACTIVE_TIME)
	self.timer:andThen(function()
		self:close()
	end)
	
	self.motor:setGoal(Flipper.Spring.new(1))
end

function RegionHeader:close()
	if self.timer then
		self.timer:cancel()
		self.timer = nil
	end

	self.motor:setGoal(Flipper.Spring.new(0))
end

function RegionHeader:didMount()
	if self.props.active then
		self:open()
	end
end

function RegionHeader:didUpdate(lastProps)
	if self.props.active ~= lastProps.active then
		if self.props.active then
			self:open()
		else
			self:close()
		end
	end
end

function RegionHeader:render()
	if not self.state.rendered then
		return
	end

	-- Render your component, animate with flipper
end

return RegionHeader

RegionHeaderController.lua

local Roact = require("Roact")

local RegionHeader = require("./RegionHeader")

local regions = {
	region1 = "your data here (id, name, primary color, whatever)",
	region2 = "...",
	region3 = "..."
}

local RegionHeaderController = Roact.PureComponent:extend("RegionHeaderController")

function RegionHeaderController:init()
	self:setState({
		region = "region1"
	})
end

function RegionHeaderController:render()
	local elements = {}

	for regionId, regionData in pairs(regions) do
		elements[regionId] = Roact.createElement(RegionHeader, {
			active = regionId == self.state.region,
			id = regionId,
			data = regionData
		})
	end

	return Roact.createFragment(elements)
end

return RegionHeaderController