Add Button component

README.md

@@ -36,6 +36,11 @@ the common, and many customization options.
 * [Example code, many fields](https://github.com/charmbracelet/tea/tree/master/examples/textinputs/main.go)
 
 
+## Button
+
+A button component.
+
+
 ## Paginator
 
 <img src="https://stuff.charm.sh/bubbles-examples/pagination.gif" width="200" alt="Paginator Example">

button/button.go

@@ -0,0 +1,90 @@
+package button
+
+import (
+	tea "github.com/charmbracelet/bubbletea"
+	"github.com/muesli/termenv"
+)
+
+var (
+	// color is a helper for returning colors.
+	color func(s string) termenv.Color = termenv.ColorProfile().Color
+)
+
+// Model is the Bubble Tea model for a button element.
+type Model struct {
+	Err error
+
+	Label   string
+	Default bool
+
+	TextColor              string
+	BackgroundColor        string
+	FocusedTextColor       string
+	FocusedBackgroundColor string
+
+	// Focus indicates whether user focus should be on this button component
+	focus bool
+}
+
+// NewModel creates a new model with default settings.
+func NewModel() Model {
+	return Model{
+		Label: "Button",
+	}
+}
+
+// Update is the Tea update loop.
+func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
+	if !m.focus {
+		return m, nil
+	}
+
+	switch msg := msg.(type) {
+	case tea.KeyMsg:
+		switch msg.String() {
+		case "enter":
+			// TODO: implement
+		}
+	}
+
+	return m, nil
+}
+
+// View renders the button in its current state.
+func (m Model) View() string {
+	margin := m.styled("  ").String()
+	label := m.styled(m.Label)
+	if m.Default {
+		label = label.Underline()
+	}
+
+	return margin + label.String() + margin
+}
+
+// Focused returns the focus state on the model.
+func (m Model) Focused() bool {
+	return m.focus
+}
+
+// Focus sets the focus state on the model.
+func (m *Model) Focus() {
+	m.focus = true
+}
+
+// Blur removes the focus state on the model.
+func (m *Model) Blur() {
+	m.focus = false
+}
+
+func (m Model) styled(s string) termenv.Style {
+	view := termenv.String(s)
+	if m.focus {
+		view = view.Foreground(color(m.FocusedTextColor)).
+			Background(color(m.FocusedBackgroundColor))
+	} else {
+		view = view.Foreground(color(m.TextColor)).
+			Background(color(m.BackgroundColor))
+	}
+
+	return view
+}

go.mod

@@ -4,7 +4,7 @@ go 1.13
 
 require (
 	github.com/atotto/clipboard v0.1.2
-	github.com/charmbracelet/bubbletea v0.12.2
+	github.com/charmbracelet/bubbletea v0.12.1
 	github.com/mattn/go-runewidth v0.0.9
 	github.com/muesli/termenv v0.7.4
 	golang.org/x/crypto v0.0.0-20201016220609-9e8e0b390897 // indirect

go.sum

@@ -1,7 +1,7 @@
 github.com/atotto/clipboard v0.1.2 h1:YZCtFu5Ie8qX2VmVTBnrqLSiU9XOWwqNRmdT3gIQzbY=
 github.com/atotto/clipboard v0.1.2/go.mod h1:ZY9tmq7sm5xIbd9bOK4onWV4S6X0u6GY7Vn0Yu86PYI=
-github.com/charmbracelet/bubbletea v0.12.2 h1:y9Yo2Pv8tcm3mAJsWONGsmHhzrbNxJVxpVtemikxE9A=
-github.com/charmbracelet/bubbletea v0.12.2/go.mod h1:3gZkYELUOiEUOp0bTInkxguucy/xRbGSOcbMs1geLxg=
+github.com/charmbracelet/bubbletea v0.12.1 h1:t21pkG2IDBRduPbt2J64Dx5yt8yIidAkXwhhrc11SzY=
+github.com/charmbracelet/bubbletea v0.12.1/go.mod h1:3gZkYELUOiEUOp0bTInkxguucy/xRbGSOcbMs1geLxg=
 github.com/containerd/console v1.0.1 h1:u7SFAJyRqWcG6ogaMAx3KjSTy1e3hT9QxqX7Jco7dRc=
 github.com/containerd/console v1.0.1/go.mod h1:XUsP6YE/mKtz6bxc+I8UiKKTP04qjQL4qcS3XoQ5xkw=
 github.com/google/goterm v0.0.0-20190703233501-fc88cf888a3f h1:5CjVwnuUcp5adK4gmY6i72gpVFVnZDP2h5TmPScB6u4=

paginator/paginator.go

@@ -19,7 +19,7 @@ const (
 	Dots
 )
 
-// Model is the Bubble Tea model for this user interface.
+// Model is the Tea model for this user interface.
 type Model struct {
 	Type              Type
 	Page              int
@@ -115,7 +115,7 @@ func NewModel() Model {
 }
 
 // Update is the Tea update function which binds keystrokes to pagination.
-func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
+func Update(msg tea.Msg, m Model) (Model, tea.Cmd) {
 	switch msg := msg.(type) {
 	case tea.KeyMsg:
 		if m.UsePgUpPgDownKeys {
@@ -164,16 +164,16 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 }
 
 // View renders the pagination to a string.
-func (m Model) View() string {
+func View(m Model) string {
 	switch m.Type {
 	case Dots:
-		return m.dotsView()
+		return dotsView(m)
 	default:
-		return m.arabicView()
+		return arabicView(m)
 	}
 }
 
-func (m Model) dotsView() string {
+func dotsView(m Model) string {
 	var s string
 	for i := 0; i < m.TotalPages; i++ {
 		if i == m.Page {
@@ -185,7 +185,7 @@ func (m Model) dotsView() string {
 	return s
 }
 
-func (m Model) arabicView() string {
+func arabicView(m Model) string {
 	return fmt.Sprintf(m.ArabicFormat, m.Page+1, m.TotalPages)
 }
 

spinner/spinner.go

@@ -7,52 +7,17 @@ import (
 	"github.com/muesli/termenv"
 )
 
-const defaultFPS = time.Second / 10
+const (
+	defaultFPS = time.Second / 10
+)
 
 // Spinner is a set of frames used in animating the spinner.
-type Spinner struct {
-	Frames []string
-	FPS    time.Duration
-}
+type Spinner = []string
 
 var (
 	// Some spinners to choose from. You could also make your own.
-	Line = Spinner{
-		Frames: []string{"|", "/", "-", "\\"},
-		FPS:    time.Second / 10,
-	}
-	Dot = Spinner{
-		Frames: []string{"⣾ ", "⣽ ", "⣻ ", "⢿ ", "⡿ ", "⣟ ", "⣯ ", "⣷ "},
-		FPS:    time.Second / 10,
-	}
-	MiniDot = Spinner{
-		Frames: []string{"⠋", "⠙", "⠹", "⠸", "⠼", "⠴", "⠦", "⠧", "⠇", "⠏"},
-		FPS:    time.Second / 12,
-	}
-	Jump = Spinner{
-		Frames: []string{"⢄", "⢂", "⢁", "⡁", "⡈", "⡐", "⡠"},
-		FPS:    time.Second / 10,
-	}
-	Pulse = Spinner{
-		Frames: []string{"█", "▓", "▒", "░"},
-		FPS:    time.Second / 8,
-	}
-	Points = Spinner{
-		Frames: []string{"∙∙∙", "●∙∙", "∙●∙", "∙∙●"},
-		FPS:    time.Second / 7,
-	}
-	Globe = Spinner{
-		Frames: []string{"🌍", "🌎", "🌏"},
-		FPS:    time.Second / 4,
-	}
-	Moon = Spinner{
-		Frames: []string{"🌑", "🌒", "🌓", "🌔", "🌕", "🌖", "🌗", "🌘"},
-		FPS:    time.Second / 8,
-	}
-	Monkey = Spinner{
-		Frames: []string{"🙈", "🙉", "🙊"},
-		FPS:    time.Second / 3,
-	}
+	Line = Spinner([]string{"|", "/", "-", "\\"})
+	Dot  = Spinner([]string{"⣾ ", "⣽ ", "⣻ ", "⢿ ", "⡿ ", "⣟ ", "⣯ ", "⣷ "})
 
 	color = termenv.ColorProfile().Color
 )
@@ -61,19 +26,22 @@ var (
 // rather than using Model as a struct literal.
 type Model struct {
 
-	// Spinner settings to use. See type Spinner.
-	Spinner Spinner
+	// Type is the set of frames to use. See Spinner.
+	Frames Spinner
 
-	// ForegroundColor sets the background color of the spinner. It can be
-	// a hex code or one of the 256 ANSI colors. If the terminal emulator can't
-	// support the color specified it will automatically degrade (per
-	// github.com/muesli/termenv).
+	// FPS is the speed at which the ticker should tick.
+	FPS time.Duration
+
+	// ForegroundColor sets the background color of the spinner. It can be a
+	// hex code or one of the 256 ANSI colors. If the terminal emulator can't
+	// doesn't support the color specified it will automatically degrade
+	// (per github.com/muesli/termenv).
 	ForegroundColor string
 
-	// BackgroundColor sets the background color of the spinner. It can be
-	// a hex code or one of the 256 ANSI colors. If the terminal emulator can't
-	// support the color specified it will automatically degrade (per
-	// github.com/muesli/termenv).
+	// BackgroundColor sets the background color of the spinner. It can be a
+	// hex code or one of the 256 ANSI colors. If the terminal emulator can't
+	// doesn't support the color specified it will automatically degrade
+	// (per github.com/muesli/termenv).
 	BackgroundColor string
 
 	// MinimumLifetime is the minimum amount of time the spinner can run. Any
@@ -150,7 +118,10 @@ func (m Model) Visible() bool {
 
 // NewModel returns a model with default values.
 func NewModel() Model {
-	return Model{Spinner: Line}
+	return Model{
+		Frames: Line,
+		FPS:    defaultFPS,
+	}
 }
 
 // TickMsg indicates that the timer has ticked and we should render a frame.
@@ -161,32 +132,30 @@ type TickMsg struct {
 // Update is the Tea update function. This will advance the spinner one frame
 // every time it's called, regardless the message passed, so be sure the logic
 // is setup so as not to call this Update needlessly.
-func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
-	switch msg.(type) {
-	case TickMsg:
+func Update(msg tea.Msg, m Model) (Model, tea.Cmd) {
+	if _, ok := msg.(TickMsg); ok {
 		m.frame++
-		if m.frame >= len(m.Spinner.Frames) {
+		if m.frame >= len(m.Frames) {
 			m.frame = 0
 		}
-		return m, m.tick()
-	default:
-		return m, nil
+		return m, Tick(m)
 	}
+	return m, nil
 }
 
 // View renders the model's view.
-func (m Model) View() string {
-	if m.frame >= len(m.Spinner.Frames) {
-		return "(error)"
+func View(model Model) string {
+	if model.frame >= len(model.Frames) {
+		return "error"
 	}
 
-	frame := m.Spinner.Frames[m.frame]
+	frame := model.Frames[model.frame]
 
-	if m.ForegroundColor != "" || m.BackgroundColor != "" {
+	if model.ForegroundColor != "" || model.BackgroundColor != "" {
 		return termenv.
 			String(frame).
-			Foreground(color(m.ForegroundColor)).
-			Background(color(m.BackgroundColor)).
+			Foreground(color(model.ForegroundColor)).
+			Background(color(model.BackgroundColor)).
 			String()
 	}
 
@@ -194,12 +163,8 @@ func (m Model) View() string {
 }
 
 // Tick is the command used to advance the spinner one frame.
-func Tick() tea.Msg {
-	return TickMsg{Time: time.Now()}
-}
-
-func (m Model) tick() tea.Cmd {
-	return tea.Tick(m.Spinner.FPS, func(t time.Time) tea.Msg {
+func Tick(m Model) tea.Cmd {
+	return tea.Tick(m.FPS, func(t time.Time) tea.Msg {
 		return TickMsg{
 			Time: t,
 		}

textinput/textinput.go

@@ -508,17 +508,17 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 			m.offset = 0
 		case tea.KeyCtrlV: // ^V paste
 			return m, Paste
-		case tea.KeyRunes: // input regular characters
-			if msg.Alt && len(msg.Runes) == 1 {
-				if msg.Runes[0] == 'd' { // alt+d, delete word right of cursor
+		case tea.KeyRune: // input a regular character
+			if msg.Alt {
+				if msg.Rune == 'd' { // alt+d, delete word right of cursor
 					resetBlink = m.deleteWordRight()
 					break
 				}
-				if msg.Runes[0] == 'b' { // alt+b, back one word
+				if msg.Rune == 'b' { // alt+b, back one word
 					resetBlink = m.wordLeft()
 					break
 				}
-				if msg.Runes[0] == 'f' { // alt+f, forward one word
+				if msg.Rune == 'f' { // alt+f, forward one word
 					resetBlink = m.wordRight()
 					break
 				}
@@ -526,8 +526,8 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 
 			// Input a regular character
 			if m.CharLimit <= 0 || len(m.value) < m.CharLimit {
-				m.value = append(m.value[:m.pos], append(msg.Runes, m.value[m.pos:]...)...)
-				resetBlink = m.SetCursor(m.pos + len(msg.Runes))
+				m.value = append(m.value[:m.pos], append([]rune{msg.Rune}, m.value[m.pos:]...)...)
+				resetBlink = m.SetCursor(m.pos + 1)
 			}
 		}
 

viewport/viewport.go

@@ -7,7 +7,9 @@ import (
 	tea "github.com/charmbracelet/bubbletea"
 )
 
-const spacebar = " "
+const (
+	spacebar = " "
+)
 
 // MODEL
 
@@ -267,7 +269,7 @@ func ViewDown(m Model, lines []string) tea.Cmd {
 }
 
 // ViewUp is a high performance command the moves the viewport down by a given
-// number of lines height. Use Model.ViewUp to get the lines that should be
+// number of lines height. Use Model.ViewDown to get the lines that should be
 // rendered.
 func ViewUp(m Model, lines []string) tea.Cmd {
 	if len(lines) == 0 {
@@ -281,7 +283,7 @@ func ViewUp(m Model, lines []string) tea.Cmd {
 // Update runs the update loop with default keybindings similar to popular
 // pagers. To define your own keybindings use the methods on Model (i.e.
 // Model.LineDown()) and define your own update function.
-func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
+func Update(msg tea.Msg, m Model) (Model, tea.Cmd) {
 	var cmd tea.Cmd
 
 	switch msg := msg.(type) {
@@ -352,7 +354,7 @@ func (m Model) Update(msg tea.Msg) (Model, tea.Cmd) {
 // VIEW
 
 // View renders the viewport into a string.
-func (m Model) View() string {
+func View(m Model) string {
 	if m.HighPerformanceRendering {
 		// Just send newlines since we're doing to be rendering the actual
 		// content seprately. We still need send something that equals the