flow.go

package ui

// Copyright (c) 2018 Bhojpur Consulting Private Limited, India. All rights reserved.

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in
// all copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
// THE SOFTWARE.

import (
	"fmt"

	"github.com/bhojpur/web/pkg/app"
	"github.com/google/uuid"
)

// IFlow is the interface that describes a container that displays its items as
// a flow.
type IFlow interface {
	app.UI

	// Sets the ID.
	ID(v string) IFlow

	// Sets the class. Multiple classes can be defined by successive calls.
	Class(v string) IFlow

	// Sets the width in px for the content items.
	// Default is 300px.
	ItemWidth(px int) IFlow

	// Sets the space between content elements in px.
	Spacing(px int) IFlow

	// Makes the items occupy all the available space when the content has only
	// one row.
	StretchItems() IFlow

	// Sets the content.
	Content(elems ...app.UI) IFlow
}

// Flow creates a container that displays its items as a flow.
func Flow() IFlow {
	return &flow{
		IitemWidth:  300,
		id:          "bhojpur-flow-" + uuid.NewString(),
		itemsPerRow: 1,
	}
}

type flow struct {
	app.Compo

	Iid           string
	Iclass        string
	IitemWidth    int
	Ispacing      int
	IstretchItems bool
	Icontent      []app.UI

	id          string
	itemsPerRow int
	itemWidth   float64
}

func (f *flow) ID(v string) IFlow {
	f.Iid = v
	return f
}

func (f *flow) Class(v string) IFlow {
	f.Iclass = app.AppendClass(f.Iclass, v)
	return f
}

func (f *flow) ItemWidth(px int) IFlow {
	if px > 0 {
		f.IitemWidth = px
	}
	return f
}

func (f *flow) Spacing(px int) IFlow {
	if px > 0 {
		f.Ispacing = px
	}
	return f
}

func (f *flow) StretchItems() IFlow {
	f.IstretchItems = true
	return f
}

func (f *flow) Content(elems ...app.UI) IFlow {
	f.Icontent = app.FilterUIElems(elems...)
	return f
}

func (f *flow) OnPreRender(ctx app.Context) {
	f.refresh(ctx)
}

func (f *flow) OnMount(ctx app.Context) {
	f.refresh(ctx)
}

func (f *flow) OnResize(ctx app.Context) {
	f.refresh(ctx)
}

func (f *flow) OnUpdate(ctx app.Context) {
	f.refresh(ctx)
}

func (f *flow) Render() app.UI {
	return app.Div().
		DataSet("bhojpur-ui", "flow").
		ID(f.Iid).
		Class(f.Iclass).
		Body(
			app.Div().
				ID(f.id).
				Style("display", "flex").
				Style("flex-wrap", "wrap").
				Style("width", "100%").
				Style("max-width", "100%").
				Body(
					app.Range(f.Icontent).Slice(func(i int) app.UI {
						marginTop := "0"
						if i >= f.itemsPerRow {
							marginTop = pxToString(f.Ispacing)
						}

						marginLeft := "0"
						if i%f.itemsPerRow != 0 {
							marginLeft = pxToString(f.Ispacing)
						}

						width := fmt.Sprintf("%.6fpx", f.itemWidth)

						return app.Div().
							Style("position", "relative").
							Style("flex-shrink", "0").
							Style("flex-basis", width).
							Style("max-width", width).
							Style("margin-top", marginTop).
							Style("margin-left", marginLeft).
							Body(f.Icontent[i])
					}),
				),
		)
}

func (f *flow) refresh(ctx app.Context) {
	w, _ := f.layoutSize()
	w += f.Ispacing

	itemWidth := f.IitemWidth + f.Ispacing
	itemsPerRow := w / itemWidth
	if f.IstretchItems && len(f.Icontent) < itemsPerRow {
		itemsPerRow = len(f.Icontent)
	}
	if itemsPerRow == 0 {
		itemsPerRow = 1
	}
	itemWidthFloat := float64(w-f.Ispacing*itemsPerRow) / float64(itemsPerRow)

	if itemsPerRow != f.itemsPerRow || itemWidthFloat != f.itemWidth {
		f.itemsPerRow = itemsPerRow
		f.itemWidth = itemWidthFloat

		ctx.Defer(func(app.Context) {
			f.ResizeContent()
		})
	}
}

func (f *flow) layoutSize() (int, int) {
	layout := app.Window().GetElementByID(f.id)
	if !layout.Truthy() {
		return 320 - 24 - 24, 568
	}
	return layout.Get("clientWidth").Int(), layout.Get("clientHeight").Int()
}