putting react together

Author: grantnelson-wf

playground/internal/angular/banner.go

@@ -1,12 +1,12 @@
 package react
 
 import (
-	"time"
+	"fmt"
 
+	"github.com/gopherjs/gopherjs/js"
 	"honnef.co/go/js/dom"
 
 	"github.com/gopherjs/gopherjs.github.io/playground/internal/common"
-	"github.com/gopherjs/gopherjs/js"
 )
 
 // banner implements playground.Banner using React.
@@ -19,6 +19,7 @@ type banner struct {
 	shareUrl        *State[string]
 	shareUrlVisible *State[bool]
 	version         *State[string]
+	shareUrlRef     *js.Object
 
 	location *dom.Location
 }
@@ -30,70 +31,97 @@ func NewBanner() common.Banner {
 	}
 }
 
+var _ Component = (*banner)(nil)
+
 func invokeCallback(c func()) {
 	if c != nil {
 		c()
 	}
 }
 
-func (t *banner) onRun(e *js.Object)    { invokeCallback(t.onRunCallback) }
-func (t *banner) onFormat(e *js.Object) { invokeCallback(t.onFormatCallback) }
-func (t *banner) onShare(e *js.Object)  { invokeCallback(t.onShareCallback) }
+func (b *banner) onRun(e *js.Object)    { invokeCallback(b.onRunCallback) }
+func (b *banner) onFormat(e *js.Object) { invokeCallback(b.onFormatCallback) }
+func (b *banner) onShare(e *js.Object)  { invokeCallback(b.onShareCallback) }
 
-func (t *banner) SetOnRunCallback(callback func())    { t.onRunCallback = callback }
-func (t *banner) SetOnFormatCallback(callback func()) { t.onFormatCallback = callback }
-func (t *banner) SetOnShareCallback(callback func())  { t.onShareCallback = callback }
+func (b *banner) SetOnRunCallback(callback func())    { b.onRunCallback = callback }
+func (b *banner) SetOnFormatCallback(callback func()) { b.onFormatCallback = callback }
+func (b *banner) SetOnShareCallback(callback func())  { b.onShareCallback = callback }
 
-func (t *banner) GetUrlHash() string     { return t.location.Hash }
-func (t *banner) SetUrlHash(hash string) { t.location.Hash = hash }
+func (b *banner) GetUrlHash() string     { return b.location.Hash }
+func (b *banner) SetUrlHash(hash string) { b.location.Hash = hash }
 
-func (t *banner) SetOnHashChange(callback func()) {
+func (b *banner) SetOnHashChange(callback func()) {
 	dom.GetWindow().Top().AddEventListener("hashchange", false, func(event dom.Event) {
 		event.PreventDefault()
 		callback()
 	})
 }
 
-func (t *banner) SetImportsCheck(checked bool) { t.importChecked.Set(checked) }
-func (t *banner) IsImportsChecked() bool       { return t.importChecked.Get() }
+func (b *banner) SetImportsCheck(checked bool) { b.importChecked.Set(checked) }
+func (b *banner) IsImportsChecked() bool       { return b.importChecked.Get() }
 
-func (t *banner) HideShareUrl() {
-	t.shareUrl.Set(``)
-	t.shareUrlVisible.Set(false)
+func (b *banner) onImportCheckedChange(e *js.Object) {
+	checked := e.Get(`target`).Get(`checked`).Bool()
+	b.importChecked.Set(checked)
 }
 
-func (t *banner) ShowShareUrl(url string) {
-	t.shareUrl.Set(url)
-	t.shareUrlVisible.Set(true)
+func (b *banner) onShareUrlFocus(e *js.Object) {
+	e.Get(`target`).Call(`select`)
+}
+
+func (b *banner) HideShareUrl() {
+	b.shareUrl.Set(``)
+	b.shareUrlVisible.Set(false)
+}
 
-	// TODO(dmitshur): Do this better using AngularJS.
-	// Perhaps using http://stackoverflow.com/questions/14833326/how-to-set-focus-on-input-field/18295416.
-	go func() {
-		time.Sleep(time.Millisecond)
-		dom.GetWindow().Document().GetElementByID(`share-url`).(*dom.HTMLInputElement).Select()
-	}()
+func (b *banner) ShowShareUrl(url string) {
+	b.shareUrl.Set(url)
+	b.shareUrlVisible.Set(true)
 }
 
-func (t *banner) SetVersion(version string) {
-	t.version.Set(version)
+func (b *banner) SetVersion(version string) {
+	b.version.Set(version)
 }
 
-func (t *banner) Render(props Props) *Element {
-	return Div(Props{`id`: `banner`},
-		Span(Props{`id`: `head`}, `playground <small>(GopherJS `, t.version.Get(), `)</small>`)),
-
-	//<div id="banner">
-	//  <span id="head">playground <small>(GopherJS {{version}})</small></span>
-	//  <span id="controls">
-	//    <input type="button" value="Run" ng-click="run(false)" />
-	//    <input type="button" value="Format" ng-click="format()" />
-	//    <label title="Rewrite imports on Format">
-	//      <input ng-model="imports" type="checkbox" />Imports
-	//    </label>
-	//    <input type="button" value="Share" ng-click="share()" />
-	//    <input type="text" class="show-share-url-{{showShareUrl}}" id="share-url" value="{{shareUrl}}" onfocus="select()" />
-	//  </span>
-	//</div>
-
-	return nil
+func (b *banner) Render(props Props) *Element {
+	b.importChecked = UseState(true)
+	b.shareUrl = UseState(``)
+	b.shareUrlVisible = UseState(false)
+	b.version = UseState(``)
+	b.shareUrlRef = UseRef()
+
+	UseEffect(func() {
+		if b.shareUrlVisible.Get() {
+			b.shareUrlRef.Call(`select`)
+		}
+	}, b.shareUrlVisible, b.shareUrlRef)
+
+	return Div(Props{
+		`id`: `banner`,
+	}, Span(Props{
+		`id`: `head`,
+	}, `playground `,
+		CreateElement(`small`, nil, `GopherJS (`, b.version.Get(), `)`),
+	), Span(Props{
+		`id`: `controls`,
+	}, Button(`Run`, nil, b.onRun),
+		Button(`Format`, nil, b.onFormat),
+		CreateElement(`label`, Props{
+			`title`: `Rewrite imports on Format`,
+		}, CreateElement(`input`, Props{
+			`type`:     `checkbox`,
+			`checked`:  b.importChecked.Get(),
+			`onChange`: b.onImportCheckedChange,
+		}), `Imports`,
+		), Button(`Share`, nil, b.onShare),
+		CreateElement(`input`, Props{
+			`type`:      `text`,
+			`className`: fmt.Sprintf(`show-share-url-%t`, b.shareUrlVisible.Get()),
+			`id`:        `share-url`,
+			`ref`:       b.shareUrlRef,
+			`value`:     b.shareUrl.Get(),
+			`readOnly`:  true,
+			`onFocus`:   b.onShareUrlFocus,
+		}),
+	))
 }

playground/internal/angular/codeBox.go

@@ -1,10 +1,6 @@
 package react
 
-import (
-	"fmt"
-
-	"github.com/gopherjs/gopherjs/js"
-)
+import "github.com/gopherjs/gopherjs/js"
 
 type (
 	// Node is a React node that can be displayed.
@@ -28,17 +24,14 @@ type (
 	// See: https://react.dev/reference/react/createElement
 	Props map[string]any
 
-	// StateConstraints is a type constraint for types that can be used with State.
-	// This is help provide compile-time type safety for State values
-	// since things like `int` will be represented as `float64` in a React hook.
-	StateConstraints interface{ string | float64 | bool }
-
 	// State is a value managed by React's useState hook.
 	// If the component function hasn't been called yet,
 	// Get returns zero and Set has no effect, otherwise
 	// it will return the current value and update it respectively.
+	// NOTE: `State[int]` should be `State[float64]` because of
+	// how the underlying React hook works.
 	// See: https://react.dev/reference/react/useState
-	State[T StateConstraints] struct{ getter, setter *js.Object }
+	State[T any] struct{ getter, setter *js.Object }
 
 	// ComponentFunc is a function that defines a React component.
 	// It takes props as input and returns a React element.
@@ -73,14 +66,12 @@ func CreateElement(typ any, props Props, children ...Node) *Element {
 
 func checkNode(n Node) Node {
 	switch c := n.(type) {
-	case *Element, string, int, float64:
-		return c
 	case ComponentFunc:
 		return CreateElement(c, nil)
 	case Component:
 		return CreateElement(c.Render, nil)
 	default:
-		panic(fmt.Errorf(`unsupported child type %T`, c))
+		return c
 	}
 }
 
@@ -108,7 +99,7 @@ func SmallSpan(props Props, children ...Node) *Element {
 	return Span(props, children...)
 }
 
-func Button(value string, props Props, onClick func()) *Element {
+func Button(value string, props Props, onClick func(e *js.Object)) *Element {
 	if props == nil {
 		props = Props{}
 	}
@@ -118,7 +109,7 @@ func Button(value string, props Props, onClick func()) *Element {
 	return CreateElement(`input`, props)
 }
 
-func UseState[T StateConstraints](initial T) *State[T] {
+func UseState[T any](initial T) *State[T] {
 	s := react().Call(`useState`, initial)
 	return &State[T]{getter: s.Index(0), setter: s.Index(1)}
 }
@@ -139,3 +130,7 @@ func (s *State[T]) Set(v T) {
 func UseRef() *js.Object {
 	return react().Call(`useRef`, nil)
 }
+
+func UseEffect(effect func(), deps ...any) {
+	react().Call(`useEffect`, effect, deps)
+}