wip-devtools

key_value_input.go

@@ -0,0 +1,88 @@
+package mujica
+
+import (
+	"fmt"
+	"log/slog"
+
+	"github.com/egoist/mygo/ui"
+
+	"mujicaui/icons"
+)
+
+// KeyValue is one editable pair; disabled pairs are kept but not used.
+type KeyValue struct {
+	Key, Value string
+	Enabled    bool
+}
+
+// KeyValueInputOptions configure a KeyValueInput.
+type KeyValueInputOptions struct {
+	// KeyPlaceholder and ValuePlaceholder default to "Key" and "Value".
+	KeyPlaceholder, ValuePlaceholder string
+	// Label names the editor for assistive technology.
+	Label    string
+	Disabled bool
+}
+
+// KeyValueInput edits rows of pairs with an enable switch, add and remove.
+func KeyValueInput(c *ui.Context, rows *[]KeyValue, opts KeyValueInputOptions) ChoiceResult {
+	if rows == nil {
+		panic("mujica: KeyValueInput needs rows")
+	}
+	kp, vp := opts.KeyPlaceholder, opts.ValuePlaceholder
+	if kp == "" {
+		kp = msg(c, "key_value_input.key")
+	}
+	if vp == "" {
+		vp = msg(c, "key_value_input.value")
+	}
+	u := Density(c).Unit()
+	var r ChoiceResult
+	r.Element = ui.Column(c).Shrink(0).Gap(u * 2).Disabled(opts.Disabled).Label(opts.Label)
+	locked := r.Element.IsDisabled()
+	remove := -1
+	r.Element.Children(func() {
+		for i := range *rows {
+			kv := &(*rows)[i]
+			ui.Row(c).Key(i).Gap(u * 2).AlignItems(ui.Center).Children(func() {
+				name := fmt.Sprintf(msg(c, "key_value_input.row"), i+1)
+				on := kv.Enabled
+				box := Checkbox(c, &on, "", CheckboxOptions{Disabled: locked}).Label(name)
+				if box.Changed() && !locked {
+					kv.Enabled, r.changed = on, true
+				}
+				k := TextInput(c, &kv.Key, TextInputOptions{Placeholder: kp, Label: name + " " + kp, Disabled: locked})
+				k.Element.Grow(1).Basis(0)
+				v := TextInput(c, &kv.Value, TextInputOptions{Placeholder: vp, Label: name + " " + vp, Disabled: locked})
+				v.Element.Grow(2).Basis(0)
+				r.changed = r.changed || k.Changed() || v.Changed()
+				if iconAction(c, icons.Must("x"), fmt.Sprintf(msg(c, "key_value_input.remove"), i+1)).Disabled(locked).Clicked() && !locked {
+					remove = i
+				}
+			})
+		}
+		if Button(c, msg(c, "key_value_input.add"), ButtonOptions{Variant: Ghost, Icon: icons.Must("plus"), Disabled: locked}).AlignSelf(ui.Start).Clicked() && !locked {
+			*rows = append(*rows, KeyValue{Enabled: true})
+			r.changed = true
+		}
+	})
+	if remove >= 0 {
+		*rows = append((*rows)[:remove:remove], (*rows)[remove+1:]...)
+		r.changed = true
+	}
+	if r.changed {
+		slog.Debug("mujica: key_value_input change", "rows", len(*rows))
+	}
+	return r
+}
+
+// keyValueEnabled returns the enabled pairs with a key.
+func keyValueEnabled(rows []KeyValue) []KeyValue {
+	var out []KeyValue
+	for _, kv := range rows {
+		if kv.Enabled && kv.Key != "" {
+			out = append(out, kv)
+		}
+	}
+	return out
+}

key_value_input_test.go

@@ -0,0 +1,65 @@
+package mujica
+
+import (
+	"testing"
+
+	"github.com/egoist/mygo/ui"
+)
+
+func kvTester(rows *[]KeyValue, opts KeyValueInputOptions, changes *int) *ui.Tester {
+	return ui.NewTester(func(c *ui.Context) {
+		Use(c, Settings{})
+		if KeyValueInput(c, rows, opts).Changed() {
+			*changes++
+		}
+	}, 600, 300)
+}
+
+func TestKeyValueInputEditToggleAddRemove(t *testing.T) {
+	rows := []KeyValue{{Key: "page", Value: "1", Enabled: true}, {Key: "debug", Value: "true"}}
+	n := 0
+	tt := kvTester(&rows, KeyValueInputOptions{}, &n)
+	_ = tt.Click("Row 2") // its enable box
+	if !rows[1].Enabled || n != 1 {
+		t.Fatalf("toggle: %+v", rows)
+	}
+	_ = tt.Click("Add row")
+	if len(rows) != 3 || !rows[2].Enabled {
+		t.Fatalf("add: %+v", rows)
+	}
+	_ = tt.Click("Row 3 Key")
+	tt.Type("sort")
+	tt.Key(0, ui.KeyTab)
+	tt.Type("name")
+	if rows[2].Key != "sort" || rows[2].Value != "name" {
+		t.Fatalf("typing: %+v", rows[2])
+	}
+	_ = tt.Click("Remove row 1")
+	if len(rows) != 2 || rows[0].Key != "debug" {
+		t.Fatalf("remove: %+v", rows)
+	}
+	if got := keyValueEnabled(rows); len(got) != 2 {
+		t.Fatalf("enabled pairs: %+v", got)
+	}
+}
+
+func TestKeyValueInputDisabled(t *testing.T) {
+	rows := []KeyValue{{Key: "page", Value: "1"}}
+	n := 0
+	tt := kvTester(&rows, KeyValueInputOptions{Disabled: true}, &n)
+	_ = tt.Click("Row 1")
+	_ = tt.Click("Add row")
+	_ = tt.Click("Remove row 1")
+	_ = tt.Click("Row 1 Key")
+	tt.Type("x")
+	if n != 0 || len(rows) != 1 || rows[0].Enabled || rows[0].Key != "page" {
+		t.Fatalf("disabled editor changed: %+v", rows)
+	}
+}
+
+func TestKeyValueInputSnapshot(t *testing.T) {
+	snapshot(t, "key_value_input", 560, 200, func(c *ui.Context) {
+		rows := []KeyValue{{Key: "Accept", Value: "application/json", Enabled: true}, {Key: "X-Trace", Value: "on"}}
+		ui.Column(c).Padding(16).Children(func() { KeyValueInput(c, &rows, KeyValueInputOptions{}) })
+	})
+}

messages_devtools.go

@@ -0,0 +1,11 @@
+package mujica
+
+func init() {
+	addMessages(map[string][2]string{
+		"key_value_input.key":    {"Key", "键"},
+		"key_value_input.value":  {"Value", "值"},
+		"key_value_input.row":    {"Row %d", "第 %d 行"},
+		"key_value_input.remove": {"Remove row %d", "删除第 %d 行"},
+		"key_value_input.add":    {"Add row", "添加一行"},
+	})
+}