diff --git a/key_value_input.go b/key_value_input.go new file mode 100644 index 0000000..7a0beca --- /dev/null +++ b/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 +} diff --git a/key_value_input_test.go b/key_value_input_test.go new file mode 100644 index 0000000..c100bb8 --- /dev/null +++ b/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{}) }) + }) +} diff --git a/messages_devtools.go b/messages_devtools.go new file mode 100644 index 0000000..9276a76 --- /dev/null +++ b/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", "添加一行"}, + }) +} diff --git a/testdata/snapshots/darwin/key_value_input-dark.png b/testdata/snapshots/darwin/key_value_input-dark.png new file mode 100644 index 0000000..9a3c8a3 Binary files /dev/null and b/testdata/snapshots/darwin/key_value_input-dark.png differ diff --git a/testdata/snapshots/darwin/key_value_input-light.png b/testdata/snapshots/darwin/key_value_input-light.png new file mode 100644 index 0000000..e89ea5c Binary files /dev/null and b/testdata/snapshots/darwin/key_value_input-light.png differ