selection

Documentation

Overview

selection implements a material selection component.

See: https://material.io/components/web/catalog/input-controls/select-menus/

Example

package main

import (
	"fmt"
	"log"

	"syscall/js"

	"github.com/vecty-components/material/components/internal/mdctest"
	"github.com/vecty-components/material/components/selection"
)

func main() {
	// Create a new instance of a material selection component.
	c := selection.New()
	printName(c)
	printState(c)
	c.SelectedIndex = 1
	c.Disabled = true
	printState(c)

	// Set up a DOM HTMLElement suitable for a selection.
	js.Global().Get("document").Get("body").Set("innerHTML",
		mdctest.HTML(c.Component().Type.MDCClassName))
	rootElem := js.Global().Get("document").Get("body").Get("firstElementChild")

	// Start the component, which associates it with an HTMLElement.
	err := c.Start(rootElem)
	if err != nil {
		log.Fatalf("Unable to start component %s: %v\n",
			c.Component().Type, err)
	}

	printState(c)
	c.SelectedIndex = 0
	c.Disabled = false
	l := c.Component().Get("root_").Call("querySelector", ".mdc-list")
	l.Call("removeChild", c.Options().Index(1))
	printState(c)

	err = c.Stop()
	if err != nil {
		log.Fatalf("Unable to stop component %s: %v\n",
			c.Component().Type, err)
	}
	printState(c)

}

func printName(c *selection.S) {
	fmt.Printf("%s\n", c.Component().Type)
}

func printState(c *selection.S) {
	fmt.Println()
	fmt.Printf("SelectedIndex: %v, SelectedString: %v, Disabled: %v\n",
		c.Component().Get("selectedIndex"), c.SelectedString(),
		c.Component().Get("disabled"))
	fmt.Printf("SelectedElem: %v\nOptions: %v\n",
		c.SelectedElem(), c.Options())
}

func init() {
	// We emulate a DOM here since tests run in NodeJS.
	// Not needed when running in a browser.
	err := mdctest.Init()
	if err != nil {
		log.Fatalf("Unable to setup test environment: %v", err)
	}
}

Output:

MDCSelect

SelectedIndex: 0, SelectedString: , Disabled: false
SelectedElem: undefined
Options: undefined

SelectedIndex: 1, SelectedString: , Disabled: true
SelectedElem: undefined
Options: undefined

SelectedIndex: 1, SelectedString: Option #2, Disabled: true
SelectedElem: [object NodeList]
Options: [object HTMLLIElement],[object HTMLLIElement]

SelectedIndex: 0, SelectedString: Option #1, Disabled: false
SelectedElem: [object NodeList]
Options: [object HTMLLIElement]

SelectedIndex: 0, SelectedString: Option #1, Disabled: false
SelectedElem: [object NodeList]
Options: [object HTMLLIElement]

Index

• type S
  • func New() *S
  • func (c *S) Component() *base.Component
  • func (s *S) Options() js.Value
  • func (s *S) SelectedElem() js.Value
  • func (s *S) SelectedString() string
  • func (c *S) Start(rootElem js.Value) error
  • func (c *S) StateMap() base.StateMap
  • func (c *S) Stop() error

Examples

• Package

Types

type S

type S struct {
	SelectedIndex int  `js:"selectedIndex"`
	Disabled      bool `js:"disabled"`
	// contains filtered or unexported fields
}

S is a material selection component.

func New

func New() *S

New returns a new component.

func (*S) Component

func (c *S) Component() *base.Component

Component returns the component's underlying base.Component.

func (*S) Options

func (s *S) Options() js.Value

Options returns a slice of menu items comprising the select’s options.

func (*S) SelectedElem

func (s *S) SelectedElem() js.Value

SelectedElem returns a NodeList of either the currently selected option, or an empty js.S if nothing is selected.

func (*S) SelectedString

func (s *S) SelectedString() string

SelectedString returns the id of the currently selected option. If no id is present on the selected option, its textContent is used. Returns an empty string when no option is selected.

func (*S) Start

func (c *S) Start(rootElem js.Value) error

Start initializes the component with an existing HTMLElement, rootElem. Start should only be used on a newly created component, or after calling Stop.

func (*S) StateMap

func (c *S) StateMap() base.StateMap

StateMap implements the base.StateMapper interface.

func (*S) Stop

func (c *S) Stop() error

Stop removes the component's association with its HTMLElement and cleans up event listeners, etc.