htmgo/htmgo-site/partials/snippets/input-component.go

package snippets

import (
	"github.com/maddalax/htmgo/framework/h"
	"github.com/maddalax/htmgo/framework/hx"
)

// InputComponent wrapper to make the code snippet work, main code is the Input function
func InputComponent(ctx *h.RequestContext) *h.Partial {

	return h.NewPartial(
		h.Div(
			h.Class("max-w-sm mx-auto flex flex-col gap-4"),
			Input(
				InputProps{
					Id:          "my-input",
					Name:        "my-input",
					Label:       "Input with label",
					Type:        "text",
					Placeholder: "Type something",
					Required:    true,
				},
				h.Attribute("autocomplete", "off"),
				h.MaxLength(50),
			),
			Input(
				InputProps{
					Id:           "my-input",
					Name:         "my-input",
					Label:        "Input with default value",
					Type:         "text",
					DefaultValue: "Default value",
				},
			),
			Input(
				InputProps{
					Id:          "my-input",
					Name:        "my-input",
					Label:       "Input with helper text",
					Type:        "text",
					Placeholder: "Full name",
					HelperText:  "This should be your full legal name",
				},
			),
		),
	)
}

type InputProps struct {
	Id             string
	Label          string
	Name           string
	Type           string
	DefaultValue   string
	Placeholder    string
	Required       bool
	ValidationPath string
	HelperText     string
}

func Input(props InputProps, children ...h.Ren) *h.Element {
	validation := h.If(
		props.ValidationPath != "",
		h.Children(
			h.Post(props.ValidationPath, hx.BlurEvent),
			h.Attribute("hx-swap", "innerHTML transition:true"),
			h.Attribute("hx-target", "next div"),
		),
	)

	if props.Type == "" {
		props.Type = "text"
	}

	input := h.Input(
		props.Type,
		h.Class("border p-2 rounded"),
		h.If(
			props.Id != "",
			h.Id(props.Id),
		),
		h.If(
			props.Name != "",
			h.Name(props.Name),
		),
		h.If(
			children != nil,
			h.Children(children...),
		),
		h.If(
			props.Required,
			h.Required(),
		),
		h.If(
			props.Placeholder != "",
			h.Placeholder(props.Placeholder),
		),
		h.If(
			props.DefaultValue != "",
			h.Attribute("value", props.DefaultValue),
		),
		validation,
	)

	wrapped := h.Div(
		h.Class("flex flex-col gap-1"),
		h.If(
			props.Label != "",
			h.Label(
				h.Text(props.Label),
			),
		),
		input,
		h.If(
			props.HelperText != "",
			h.Div(
				h.Class("text-slate-600 text-sm"),
				h.Text(props.HelperText),
			),
		),
		h.Div(
			h.Id(props.Id+"-error"),
			h.Class("text-red-500"),
		),
	)

	return wrapped
}