Merge pull request #111 from myitcv/various_changes

data-* and aria-* attributes; Ref support; ForceUpdate component method

Author: myitcv

cmd/reactGen/props_gen.go

@@ -102,6 +102,23 @@ func (g *gen) genProps(defName string, t typeFile) {
 
 	func ({{$recv}} *{{.Name}}) assign(v *_{{.Name}}) {
 		{{- range .Fields}}
+			{{ if eq .TName "Ref" }}
+			if {{$recv}}.Ref != nil {
+				v.o.Set("ref", {{$recv}}.Ref.Ref)
+			}
+			{{ else if eq .TName "DataSet" }}
+			if {{$recv}}.DataSet != nil {
+				for dk, dv := range {{$recv}}.DataSet {
+					v.o.Set("data-"+dk, dv)
+				}
+			}
+			{{ else if eq .TName "AriaSet" }}
+			if {{$recv}}.AriaSet != nil {
+				for dk, dv := range {{$recv}}.AriaSet {
+					v.o.Set("aria-"+dk, dv)
+				}
+			}
+			{{else}}
 			{{ if .Omit }}
 				if {{$recv}}.{{.TName}} != "" {
 					v.{{.TName}} = {{$recv}}.{{.TName}}
@@ -119,6 +136,7 @@ func (g *gen) genProps(defName string, t typeFile) {
 				v.{{.TName}} = {{$recv}}.{{.TName}}
 			{{end}}
 			{{end}}
+			{{end}}
 		{{- end}}
 	}
 	`, pg)

core.go

@@ -22,6 +22,9 @@ func newBasicElement() *BasicElement {
 	}
 }
 
+type DataSet map[string]string
+type AriaSet map[string]string
+
 type BasicHTMLElement struct {
 	*BasicElement
 
@@ -31,9 +34,14 @@ type BasicHTMLElement struct {
 	Role      string `js:"role"`
 	Style     *CSS   `js:"style"`
 
+	DataSet
+	AriaSet
+
 	OnChange `js:"onChange"`
 	OnClick  `js:"onClick"`
 
+	Ref `js:"ref"`
+
 	DangerouslySetInnerHTML *DangerousInnerHTML `js:"dangerouslySetInnerHTML"`
 }
 

events.go

@@ -1,7 +1,13 @@
 package react
 
+import "github.com/gopherjs/gopherjs/js"
+
 type Event interface{}
 
+type Ref interface {
+	Ref(h *js.Object)
+}
+
 type OnChange interface {
 	Event
 

examples/markdowneditor/markdown_editor.go

@@ -1,6 +1,7 @@
 package markdowneditor // import "myitcv.io/react/examples/markdowneditor"
 
 import (
+	"github.com/gopherjs/gopherjs/js"
 	"honnef.co/go/js/dom"
 	"myitcv.io/react"
 	"myitcv.io/remarkable"
@@ -17,6 +18,11 @@ type MarkdownEditorDef struct {
 type MarkdownEditorState struct {
 	value  string
 	remark *remarkable.Remarkable
+
+	// We don't actually use the DOM element for the containing div in the
+	// logic of the MarkdownEditor example, rather it's just a demonstration
+	// of React Refs at work.
+	div *divRef
 }
 
 // MarkdownEditor creates instances of the MarkdownEditor component
@@ -30,14 +36,15 @@ func (m MarkdownEditorDef) GetInitialState() MarkdownEditorState {
 	return MarkdownEditorState{
 		value:  "Type some *markdown* here!",
 		remark: remark,
+		div:    &divRef{m: m},
 	}
 }
 
 // Render renders the MarkdownEditor component
 func (m MarkdownEditorDef) Render() react.Element {
 	val := m.State().value
 
-	return react.Div(nil,
+	return react.Div(&react.DivProps{Ref: m.State().div},
 		react.H3(nil, react.S("Input")),
 		react.TextArea(
 			&react.TextAreaProps{
@@ -72,3 +79,22 @@ func (i inputChange) OnChange(se *react.SyntheticEvent) {
 
 	i.m.SetState(st)
 }
+
+type divRef struct {
+	m   MarkdownEditorDef
+	div *dom.HTMLDivElement
+}
+
+func (d *divRef) Ref(h *js.Object) {
+	var div *dom.HTMLDivElement
+	if e := dom.WrapHTMLElement(h); e != nil {
+		div = e.(*dom.HTMLDivElement)
+	}
+
+	d.div = div
+
+	print("Here is the containing div for the rendered MarkdownEditor", div.Object)
+
+	// in case we need to re-render at this point we could call
+	d.m.ForceUpdate()
+}