controls

Documentation

Overview

Package controls implements app-specific controls

Example (Filter)

package main

import (
	"fmt"

	"github.com/dotchain/dot/streams"
	"github.com/dotchain/fuss/dom/html"
	"github.com/dotchain/fuss/todo/controls"
	"github.com/yosssi/gohtml"
)

func main() {
	filter, close := controls.NewFilter()
	selected := &streams.S16{Stream: streams.New(), Value: controls.ShowAll}

	root := filter("root", selected)
	fmt.Println(gohtml.Format(fmt.Sprint(root)))

	selected = selected.Update(controls.ShowActive)
	root = filter("root", selected)
	fmt.Println(gohtml.Format(fmt.Sprint(root)))

	html.Click(root.Children()[2])
	if selected.Latest().Value != controls.ShowDone {
		fmt.Println("Unexpected selection state", selected.Latest().Value)
	}

	selected = selected.Latest()
	root = filter("root", selected)
	fmt.Println(gohtml.Format(fmt.Sprint(root)))

	close()
	leaks := html.GetCurrentResources()
	if n := len(leaks); n > 0 {
		fmt.Println("Leaked", n, "resources\n", leaks)
	}

}

Output:

<div style="display: flex; flex-direction: row">
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: blue; border-width: 1px">
      All
    </label>
  </div>
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px">
      Active
    </label>
  </div>
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px">
      Done
    </label>
  </div>
</div>
<div style="display: flex; flex-direction: row">
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px">
      All
    </label>
  </div>
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: blue; border-width: 1px">
      Active
    </label>
  </div>
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px">
      Done
    </label>
  </div>
</div>
<div style="display: flex; flex-direction: row">
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px">
      All
    </label>
  </div>
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: lightgrey; border-width: 1px">
      Active
    </label>
  </div>
  <div tabindex="0">
    <label style="border-radius: 4px; border-color: blue; border-width: 1px">
      Done
    </label>
  </div>
</div>

Example (RenderFilteredTasks)

package main

import (
	"fmt"

	"github.com/dotchain/fuss/dom"
	"github.com/dotchain/fuss/dom/html"
	"github.com/dotchain/fuss/todo/controls"
	"github.com/yosssi/gohtml"
)

func main() {
	header, closeh := dom.NewTextView()
	body, closeb := dom.NewTextView()
	footer, closef := dom.NewTextView()
	chrome, close := controls.NewChrome()

	root := chrome(
		"root",
		header("header", dom.Styles{}, "Header"),
		body("body", dom.Styles{}, "Body"),
		footer("footer", dom.Styles{}, "Footer"),
	)

	fmt.Println(gohtml.Format(fmt.Sprint(root)))

	close()
	closeb()
	closeh()
	closef()
	leaks := html.GetCurrentResources()
	if n := len(leaks); n > 0 {
		fmt.Println("Leaked", n, "resources\n", leaks)
	}

}

Output:

<div style="display: flex; flex-direction: column">
  <div style="flex-shrink: 0">
    <span>
      Header
    </span>
  </div>
  <div style="overflow-y: auto; flex-grow: 1">
    <span>
      Body
    </span>
  </div>
  <div style="flex-shrink: 0">
    <span>
      Footer
    </span>
  </div>
</div>

Example (Textreset)

package main

import (
	"fmt"

	"github.com/dotchain/dot/streams"
	"github.com/dotchain/fuss/dom/html"
	"github.com/dotchain/fuss/todo/controls"
	"github.com/yosssi/gohtml"
)

func main() {
	textReset, close := controls.NewTextReset()
	text := &streams.S16{Stream: streams.New(), Value: "hello"}

	root := textReset("root", text, "booya")

	html.SetValue(root, "singer")
	text = text.Latest()
	if text.Value != "singer" {
		fmt.Println("Unexpected", text.Value)
	}

	root = textReset("root", text, "booya")

	fmt.Println(gohtml.Format(fmt.Sprint(root)))

	close()
	leaks := html.GetCurrentResources()
	if n := len(leaks); n > 0 {
		fmt.Println("Leaked", n, "resources\n", leaks)
	}

}

Output:

<input placeholder="booya" type="text"/>

Index

• Constants
• type ChromeFunc
  • func NewChrome() (update ChromeFunc, closeAll func())
• type FilterFunc
  • func NewFilter() (update FilterFunc, closeAll func())
• type TextResetFunc
  • func NewTextReset() (update TextResetFunc, closeAll func())

Examples

• Package (Filter)
• Package (RenderFilteredTasks)
• Package (Textreset)

Constants

const (
	// ShowAll = show both active and done
	ShowAll = "all"

	// ShowActive = show only active
	ShowActive = "active"

	// ShowDone = show only done
	ShowDone = "done"
)

Types

type ChromeFunc

type ChromeFunc = func(key interface{}, header, body, footer dom.Element) dom.Element

ChromeFunc defines the App Chrome

func NewChrome

func NewChrome() (update ChromeFunc, closeAll func())

NewChrome is the constructor for ChromeFunc

type FilterFunc

type FilterFunc = func(key interface{}, selected *streams.S16) dom.Element

FilterFunc renders a row of options for "All", "Active" or "Done"

This is reflected in the selected stream (which is both input and output).

func NewFilter

func NewFilter() (update FilterFunc, closeAll func())

NewFilter is the constructor for FilterFunc

type TextResetFunc

type TextResetFunc = func(key interface{}, text *streams.S16, placeholder string) dom.Element

TextResetFunc defines the shape of the a text input component whose value resets to the empty string after every submission

func NewTextReset

func NewTextReset() (update TextResetFunc, closeAll func())

NewTextReset is the constructor for TextResetFunc