From bfda483f6522239865188110cde3bb8f245f5df5 Mon Sep 17 00:00:00 2001 From: rocketlaunchr-cto Date: Tue, 16 Oct 2018 21:26:38 +1100 Subject: [PATCH] - added bindings --- elements/elements.go | 1694 ++++++++++++++++++++++++++++++++++++++++++ elements/styles.go | 364 +++++++++ helpers.go | 63 ++ react.go | 36 + react_class.go | 116 +++ react_events.go | 185 +++++ react_lifecycle.go | 133 ++++ structs.go | 180 +++++ utility.go | 82 ++ 9 files changed, 2853 insertions(+) create mode 100644 elements/elements.go create mode 100644 elements/styles.go create mode 100644 helpers.go create mode 100644 react.go create mode 100644 react_class.go create mode 100644 react_events.go create mode 100644 react_lifecycle.go create mode 100644 structs.go create mode 100644 utility.go diff --git a/elements/elements.go b/elements/elements.go new file mode 100644 index 0000000..a41da05 --- /dev/null +++ b/elements/elements.go @@ -0,0 +1,1694 @@ +package elements + +import ( + "github.com/rocketlaunchr/react" + + "github.com/gopherjs/gopherjs/js" +) + +var ( + TRUE = true + FALSE = false +) + +// +// PULL-REQUESTS WILL BE WARMLY WELCOMED +// Some of the field types are likely to change +// to more appropriate types. +// + +type AProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + ////////// + + Href string `react:"href,omitempty"` + Target string `react:"target,omitempty"` +} + +func A(props *AProps, children ...interface{}) *js.Object { + return react.JSX("a", props, children...) +} + +type AbbrProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Abbr(props *AbbrProps, children ...interface{}) *js.Object { + return react.JSX("abbr", props, children...) +} + +type ArticleProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Article(props *AbbrProps, children ...interface{}) *js.Object { + return react.JSX("article", props, children...) +} + +type AsideProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Aside(props *AsideProps, children ...interface{}) *js.Object { + return react.JSX("aside", props, children...) +} + +type BProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func B(props *BProps, children ...interface{}) *js.Object { + return react.JSX("b", props, children...) +} + +type BodyProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnAfterPrint *js.Object `react:"onAfterPrint,omitempty"` + OnBeforePrint *js.Object `react:"onBeforePrint,omitempty"` + OnBeforeUnload *js.Object `react:"onBeforeUnload,omitempty"` + OnError *js.Object `react:"onError,omitempty"` + OnHashChange *js.Object `react:"onHashChange,omitempty"` + OnLoad *js.Object `react:"onLoad,omitempty"` + OnOffline *js.Object `react:"onOffline,omitempty"` + OnOnline *js.Object `react:"onOnline,omitempty"` + OnPageShow *js.Object `react:"onPageShow,omitempty"` + OnResize *js.Object `react:"onResize,omitempty"` + OnUnload *js.Object `react:"onUnload,omitempty"` + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Body(props *BodyProps, children ...interface{}) *js.Object { + return react.JSX("body", props, children...) +} + +type BrProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Br(props *BrProps, children ...interface{}) *js.Object { + return react.JSX("br", props, children...) +} + +type ButtonProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + ////////// + + AutoFocus *bool `react:"autofocus,omitempty"` + Disabled *bool `react:"disabled,omitempty"` + Form string `react:"form,omitempty"` + FormAction string `react:"formaction,omitempty"` + FormEncType string `react:"formenctype,omitempty"` + FormMethod string `react:"formmethod,omitempty"` + FormNoValidate *bool `react:"formnovalidate,omitempty"` + FormTarget string `react:"formtarget,omitempty"` + Name string `react:"name,omitempty"` + Type string `react:"type,omitempty"` + ValidationMessage string `react:"validationmessage,omitempty"` + Value string `react:"value,omitempty"` + WillValidate *bool `react:"willvalidate,omitempty"` +} + +func Button(props *ButtonProps, children ...interface{}) *js.Object { + return react.JSX("button", props, children...) +} + +type CaptionProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Caption(props *CaptionProps, children ...interface{}) *js.Object { + return react.JSX("caption", props, children...) +} + +type CodeProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Code(props *CodeProps, children ...interface{}) *js.Object { + return react.JSX("code", props, children...) +} + +type DivProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Div(props *DivProps, children ...interface{}) *js.Object { + return react.JSX("div", props, children...) +} + +type EmProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Em(props *EmProps, children ...interface{}) *js.Object { + return react.JSX("em", props, children...) +} + +type FooterProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Footer(props *FooterProps, children ...interface{}) *js.Object { + return react.JSX("footer", props, children...) +} + +type FormProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + OnContextMenu *js.Object `react:"onContextMenu,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnInput *js.Object `react:"onInput,omitempty"` + OnInvalid *js.Object `react:"onInvalid,omitempty"` + OnReset *js.Object `react:"onReset,omitempty"` + OnSearch *js.Object `react:"onSearch,omitempty"` + OnSelect *js.Object `react:"onSelect,omitempty"` + OnSubmit *js.Object `react:"onSubmit,omitempty"` + + AcceptCharset string `react:"acceptCharset,omitempty"` + Action string `react:"action,omitempty"` + Autocomplete string `react:"autoComplete,omitempty"` + Encoding string `react:"encoding,omitempty"` + Enctype string `react:"encType,omitempty"` + Length *int `react:"length,omitempty"` + Method string `react:"method,omitempty"` + Name string `react:"name,omitempty"` + NoValidate *bool `react:"noValidate,omitempty"` + Target string `react:"target,omitempty"` +} + +func Form(props *FormProps, children ...interface{}) *js.Object { + return react.JSX("form", props, children...) +} + +type H1Props struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func H1(props *H1Props, children ...interface{}) *js.Object { + return react.JSX("h1", props, children...) +} + +type H2Props struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func H2(props *H2Props, children ...interface{}) *js.Object { + return react.JSX("h2", props, children...) +} + +type H3Props struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func H3(props *H3Props, children ...interface{}) *js.Object { + return react.JSX("h3", props, children...) +} + +type H4Props struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func H4(props *H4Props, children ...interface{}) *js.Object { + return react.JSX("h4", props, children...) +} + +type H5Props struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func H5(props *H5Props, children ...interface{}) *js.Object { + return react.JSX("h5", props, children...) +} + +type H6Props struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func H6(props *H6Props, children ...interface{}) *js.Object { + return react.JSX("h6", props, children...) +} + +type HeaderProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Header(props *HeaderProps, children ...interface{}) *js.Object { + return react.JSX("header", props, children...) +} + +type HrProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Hr(props *HrProps, children ...interface{}) *js.Object { + return react.JSX("hr", props, children...) +} + +type IProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func I(props *IProps, children ...interface{}) *js.Object { + return react.JSX("i", props, children...) +} + +type IFrameProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + Width string `react:"width,omitempty"` + Height string `react:"height,omitempty"` + Name string `react:"name,omitempty"` + Src string `react:"src,omitempty"` + SrcDoc string `react:"srcDoc,omitempty"` + Seamless *bool `react:"seamless,omitempty"` +} + +func IFrame(props *IFrameProps, children ...interface{}) *js.Object { + return react.JSX("iframe", props, children...) +} + +type ImgProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + Alt string `react:"alt,omitempty"` + Complete *bool `react:"complete,omitempty"` + CrossOrigin string `react:"crossOrigin,omitempty"` + Height string `react:"height,omitempty"` + IsMap *bool `react:"isMap,omitempty"` + NaturalHeight string `react:"naturalHeight,omitempty"` + NaturalWidth string `react:"naturalWidth,omitempty"` + Src string `react:"src,omitempty"` + UseMap string `react:"useMap,omitempty"` + Width string `react:"width,omitempty"` +} + +func Img(props *ImgProps, children ...interface{}) *js.Object { + return react.JSX("img", props, children...) +} + +type InputProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + Accept string `react:"accept,omitempty"` + Alt string `react:"alt,omitempty"` + Autocomplete string `react:"autoComplete,omitempty"` + Autofocus *bool `react:"autoFocus,omitempty"` + Checked *bool `react:"checked,omitempty"` + DefaultChecked *bool `react:"defaultChecked,omitempty"` + DefaultValue string `react:"defaultValue,omitempty"` + DirName string `react:"dirName,omitempty"` + Disabled *bool `react:"disabled,omitempty"` + FormAction string `react:"formAction,omitempty"` + FormEncType string `react:"formEncType,omitempty"` + FormMethod string `react:"formMethod,omitempty"` + FormNoValidate *bool `react:"formNoValidate,omitempty"` + FormTarget string `react:"formTarget,omitempty"` + Height string `react:"height,omitempty"` + Indeterminate *bool `react:"indeterminate,omitempty"` + Max string `react:"max,omitempty"` + MaxLength *int `react:"maxLength,omitempty"` + Min string `react:"min,omitempty"` + Multiple *bool `react:"multiple,omitempty"` + Name string `react:"name,omitempty"` + Pattern string `react:"pattern,omitempty"` + Placeholder string `react:"placeholder,omitempty"` + ReadOnly *bool `react:"readOnly,omitempty"` + Required *bool `react:"required,omitempty"` + SelectionDirection string `react:"selectionDirection,omitempty"` + SelectionEnd *int `react:"selectionEnd,omitempty"` + SelectionStart *int `react:"selectionStart,omitempty"` + Size *int `react:"size,omitempty"` + Src string `react:"src,omitempty"` + Step string `react:"step,omitempty"` + Type string `react:"type,omitempty"` + ValidationMessage string `react:"validationMessage,omitempty"` + Value string `react:"value,omitempty"` + Width string `react:"width,omitempty"` + WillValidate *bool `react:"willValidate,omitempty"` +} + +func Input(props *InputProps, children ...interface{}) *js.Object { + return react.JSX("input", props, children...) +} + +type LabelProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + For string `react:"htmlFor,omitempty"` + Form string `react:"form,omitempty"` +} + +func Label(props *LabelProps, children ...interface{}) *js.Object { + return react.JSX("label", props, children...) +} + +type LiProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Li(props *LiProps, children ...interface{}) *js.Object { + return react.JSX("li", props, children...) +} + +type MainProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Main(props *MainProps, children ...interface{}) *js.Object { + return react.JSX("main", props, children...) +} + +type NavProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Nav(props *NavProps, children ...interface{}) *js.Object { + return react.JSX("nav", props, children...) +} + +type OptionProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + DefaultSelected *bool `react:"defaultSelected,omitempty"` + Disabled *bool `react:"disabled,omitempty"` + Index *int `react:"index,omitempty"` + Label string `react:"label,omitempty"` + Selected *bool `react:"selected,omitempty"` + Text string `react:"text,omitempty"` + Value string `react:"value,omitempty"` +} + +func Option(props *OptionProps, children ...interface{}) *js.Object { + return react.JSX("option", props, children...) +} + +type PProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func P(props *PProps, children ...interface{}) *js.Object { + return react.JSX("p", props, children...) +} + +type PreProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Pre(props *PreProps, children ...interface{}) *js.Object { + return react.JSX("pre", props, children...) +} + +type SelectProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + Autofocus *bool `react:"autofocus,omitempty"` + Disabled *bool `react:"disabled,omitempty"` + Length *int `react:"length,omitempty"` + Multiple *bool `react:"multiple,omitempty"` + Name string `react:"name,omitempty"` + Required *bool `react:"required,omitempty"` + SelectedIndex *int `react:"selectedIndex,omitempty"` + Size *int `react:"size,omitempty"` + Type string `react:"type,omitempty"` + ValidationMessage string `react:"validationMessage,omitempty"` + Value string `react:"value,omitempty"` + WillValidate *bool `react:"willValidate,omitempty"` +} + +func Select(props *SelectProps, children ...interface{}) *js.Object { + return react.JSX("select", props, children...) +} + +type SpanProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Span(props *SpanProps, children ...interface{}) *js.Object { + return react.JSX("span", props, children...) +} + +type SProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func S(props *SProps, children ...interface{}) *js.Object { + return react.JSX("s", props, children...) +} + +type SupProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Sup(props *SupProps, children ...interface{}) *js.Object { + return react.JSX("sup", props, children...) +} + +type TableProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Table(props *TableProps, children ...interface{}) *js.Object { + return react.JSX("table", props, children...) +} + +type TBodyProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func TBody(props *TBodyProps, children ...interface{}) *js.Object { + return react.JSX("tbody", props, children...) +} + +type TdProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Td(props *TdProps, children ...interface{}) *js.Object { + return react.JSX("td", props, children...) +} + +type TextAreaProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + AutoComplete string `react:"autoComplete,omitempty"` + AutoFocus *bool `react:"autoFocus,omitempty"` + Cols *int `react:"cols,omitempty"` + DefaultValue string `react:"defaultValue,omitempty"` + DirName string `react:"dirName,omitempty"` + Disabled *bool `react:"disabled,omitempty"` + MaxLength *int `react:"maxLength,omitempty"` + Name string `react:"name,omitempty"` + Placeholder string `react:"placeholder,omitempty"` + ReadOnly *bool `react:"readOnly,omitempty"` + Required *bool `react:"required,omitempty"` + Rows *int `react:"rows,omitempty"` + SelectionDirection string `react:"selectionDirection,omitempty"` + SelectionStart *int `react:"selectionStart,omitempty"` + SelectionEnd *int `react:"selectionEnd,omitempty"` + TextLength *int `react:"textLength,omitempty"` + Type string `react:"type,omitempty"` + ValidationMessage string `react:"validationMessage,omitempty"` + Value string `react:"value,omitempty"` + WillValidate *bool `react:"willValidate,omitempty"` + Wrap string `react:"wrap,omitempty"` +} + +func TextArea(props *TextAreaProps, children ...interface{}) *js.Object { + return react.JSX("textarea", props, children...) +} + +type TFootProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func TFoot(props *TFootProps, children ...interface{}) *js.Object { + return react.JSX("tfoot", props, children...) +} + +type ThProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` + + Abbr string `react:"abbr,omitempty"` + ColSpan *int `react:"colSpan,omitempty"` + Headers string `react:"headers,omitempty"` + RowSpan *int `react:"rowSpan,omitempty"` + Scope string `react:"scope,omitempty"` + Sorted string `react:"sorted,omitempty"` +} + +func Th(props *ThProps, children ...interface{}) *js.Object { + return react.JSX("th", props, children...) +} + +type THeadProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func THead(props *THeadProps, children ...interface{}) *js.Object { + return react.JSX("thead", props, children...) +} + +type TrProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Tr(props *TrProps, children ...interface{}) *js.Object { + return react.JSX("tr", props, children...) +} + +type UlProps struct { + AriaSet react.Set `react:"aria-,omitempty"` + DataSet react.Set `react:"data-,omitempty"` + DangerouslySetInnerHTML interface{} `react:"dangerouslySetInnerHTML,omitempty"` + Accesskey string `react:"accesskey,omitempty"` + Class string `react:"className,omitempty"` + Contenteditable *bool `react:"contenteditable,omitempty"` + Dir string `react:"dir,omitempty"` + Draggable *bool `react:"draggable,omitempty"` + Dropzone string `react:"dropzone,omitempty"` + Hidden *bool `react:"hidden,omitempty"` + ID string `react:"id,omitempty"` + Lang string `react:"lang,omitempty"` + SpellCheck *bool `react:"spellcheck,omitempty"` + TabIndex string `react:"tabindex,omitempty"` + Title string `react:"title,omitempty"` + + Key string `react:"key,omitempty"` + Ref *js.Object `react:"ref,omitempty"` + Role string `react:"role,omitempty"` + Style *Styles `react:"style,omitempty"` + + // Events + OnBlur *js.Object `react:"onBlur,omitempty"` + OnFocus *js.Object `react:"onFocus,omitempty"` + OnChange *js.Object `react:"onChange,omitempty"` + OnClick *js.Object `react:"onClick,omitempty"` +} + +func Ul(props *UlProps, children ...interface{}) *js.Object { + return react.JSX("ul", props, children...) +} diff --git a/elements/styles.go b/elements/styles.go new file mode 100644 index 0000000..be9f9e2 --- /dev/null +++ b/elements/styles.go @@ -0,0 +1,364 @@ +package elements + +// Styles represent CSS3 attributes. +type Styles struct { + AlignContent string `react:"alignContent,omitempty"` + AlignItems string `react:"alignItems,omitempty"` + AlignSelf string `react:"alignSelf,omitempty"` + AlignmentBaseline string `react:"alignmentBaseline,omitempty"` + All string `react:"all,omitempty"` + Animation string `react:"animation,omitempty"` + AnimationDelay string `react:"animationDelay,omitempty"` + AnimationDirection string `react:"animationDirection,omitempty"` + AnimationDuration string `react:"animationDuration,omitempty"` + AnimationFillMode string `react:"animationFillMode,omitempty"` + AnimationIterationCount string `react:"animationIterationCount,omitempty"` + AnimationName string `react:"animationName,omitempty"` + AnimationPlayState string `react:"animationPlayState,omitempty"` + AnimationTimingFunction string `react:"animationTimingFunction,omitempty"` + Appearance string `react:"appearance,omitempty"` + BackfaceVisibility string `react:"backfaceVisibility,omitempty"` + Background string `react:"background,omitempty"` + BackgroundAttachment string `react:"backgroundAttachment,omitempty"` + BackgroundClip string `react:"backgroundClip,omitempty"` + BackgroundColor string `react:"backgroundColor,omitempty"` + BackgroundImage string `react:"backgroundImage,omitempty"` + BackgroundOrigin string `react:"backgroundOrigin,omitempty"` + BackgroundPosition string `react:"backgroundPosition,omitempty"` + BackgroundRepeat string `react:"backgroundRepeat,omitempty"` + BackgroundSize string `react:"backgroundSize,omitempty"` + BaselineShift string `react:"baselineShift,omitempty"` + Binding string `react:"binding,omitempty"` + Bleed string `react:"bleed,omitempty"` + BookmarkLabel string `react:"bookmarkLabel,omitempty"` + BookmarkLevel string `react:"bookmarkLevel,omitempty"` + BookmarkState string `react:"bookmarkState,omitempty"` + Border string `react:"border,omitempty"` + BorderBottom string `react:"borderBottom,omitempty"` + BorderBottomColor string `react:"borderBottomColor,omitempty"` + BorderBottomLeftRadius string `react:"borderBottomLeftRadius,omitempty"` + BorderBottomRightRadius string `react:"borderBottomRightRadius,omitempty"` + BorderBottomStyle string `react:"borderBottomStyle,omitempty"` + BorderBottomWidth string `react:"borderBottomWidth,omitempty"` + BorderBoundary string `react:"borderBoundary,omitempty"` + BorderCollapse string `react:"borderCollapse,omitempty"` + BorderColor string `react:"borderColor,omitempty"` + BorderImage string `react:"borderImage,omitempty"` + BorderImageOutset string `react:"borderImageOutset,omitempty"` + BorderImageRepeat string `react:"borderImageRepeat,omitempty"` + BorderImageSlice string `react:"borderImageSlice,omitempty"` + BorderImageSource string `react:"borderImageSource,omitempty"` + BorderImageWidth string `react:"borderImageWidth,omitempty"` + BorderLeft string `react:"borderLeft,omitempty"` + BorderLeftColor string `react:"borderLeftColor,omitempty"` + BorderLeftStyle string `react:"borderLeftStyle,omitempty"` + BorderLeftWidth string `react:"borderLeftWidth,omitempty"` + BorderRadius string `react:"borderRadius,omitempty"` + BorderRight string `react:"borderRight,omitempty"` + BorderRightColor string `react:"borderRightColor,omitempty"` + BorderRightStyle string `react:"borderRightStyle,omitempty"` + BorderRightWidth string `react:"borderRightWidth,omitempty"` + BorderSpacing string `react:"borderSpacing,omitempty"` + BorderStyle string `react:"borderStyle,omitempty"` + BorderTop string `react:"borderTop,omitempty"` + BorderTopColor string `react:"borderTopColor,omitempty"` + BorderTopLeftRadius string `react:"borderTopLeftRadius,omitempty"` + BorderTopRightRadius string `react:"borderTopRightRadius,omitempty"` + BorderTopStyle string `react:"borderTopStyle,omitempty"` + BorderTopWidth string `react:"borderTopWidth,omitempty"` + BorderWidth string `react:"borderWidth,omitempty"` + Bottom string `react:"bottom,omitempty"` + BoxDecorationBreak string `react:"boxDecorationBreak,omitempty"` + BoxShadow string `react:"boxShadow,omitempty"` + BoxSizing string `react:"boxSizing,omitempty"` + BoxSnap string `react:"boxSnap,omitempty"` + BoxSuppress string `react:"boxSuppress,omitempty"` + BreakAfter string `react:"breakAfter,omitempty"` + BreakBefore string `react:"breakBefore,omitempty"` + BreakInside string `react:"breakInside,omitempty"` + CaptionSide string `react:"captionSide,omitempty"` + Caret string `react:"caret,omitempty"` + CaretShape string `react:"caretShape,omitempty"` + Chains string `react:"chains,omitempty"` + Clear string `react:"clear,omitempty"` + ClipPath string `react:"clipPath,omitempty"` + ClipRule string `react:"clipRule,omitempty"` + Color string `react:"color,omitempty"` + ColorInterpolationFilters string `react:"colorInterpolationFilters,omitempty"` + ColumnCount string `react:"columnCount,omitempty"` + ColumnFill string `react:"columnFill,omitempty"` + ColumnGap string `react:"columnGap,omitempty"` + ColumnRule string `react:"columnRule,omitempty"` + ColumnRuleColor string `react:"columnRuleColor,omitempty"` + ColumnRuleStyle string `react:"columnRuleStyle,omitempty"` + ColumnRuleWidth string `react:"columnRuleWidth,omitempty"` + ColumnSpan string `react:"columnSpan,omitempty"` + ColumnWidth string `react:"columnWidth,omitempty"` + Columns string `react:"columns,omitempty"` + Contain string `react:"contain,omitempty"` + Content string `react:"content,omitempty"` + CounterIncrement string `react:"counterIncrement,omitempty"` + CounterReset string `react:"counterReset,omitempty"` + CounterSet string `react:"counterSet,omitempty"` + Crop string `react:"crop,omitempty"` + Cue string `react:"cue,omitempty"` + CueAfter string `react:"cueAfter,omitempty"` + CueBefore string `react:"cueBefore,omitempty"` + Cursor string `react:"cursor,omitempty"` + Direction string `react:"direction,omitempty"` + Display string `react:"display,omitempty"` + DisplayInside string `react:"displayInside,omitempty"` + DisplayList string `react:"displayList,omitempty"` + DisplayOutside string `react:"displayOutside,omitempty"` + DominantBaseline string `react:"dominantBaseline,omitempty"` + EmptyCells string `react:"emptyCells,omitempty"` + Filter string `react:"filter,omitempty"` + Flex string `react:"flex,omitempty"` + FlexBasis string `react:"flexBasis,omitempty"` + FlexDirection string `react:"flexDirection,omitempty"` + FlexFlow string `react:"flexFlow,omitempty"` + FlexGrow string `react:"flexGrow,omitempty"` + FlexShrink string `react:"flexShrink,omitempty"` + FlexWrap string `react:"flexWrap,omitempty"` + Float string `react:"float,omitempty"` + FloatOffset string `react:"floatOffset,omitempty"` + FloodColor string `react:"floodColor,omitempty"` + FloodOpacity string `react:"floodOpacity,omitempty"` + FlowFrom string `react:"flowFrom,omitempty"` + FlowInto string `react:"flowInto,omitempty"` + Font string `react:"font,omitempty"` + FontFamily string `react:"fontFamily,omitempty"` + FontFeatureSettings string `react:"fontFeatureSettings,omitempty"` + FontKerning string `react:"fontKerning,omitempty"` + FontLanguageOverride string `react:"fontLanguageOverride,omitempty"` + FontMaxSize string `react:"fontMaxSize,omitempty"` + FontMinSize string `react:"fontMinSize,omitempty"` + FontOpticalSizing string `react:"fontOpticalSizing,omitempty"` + FontPalette string `react:"fontPalette,omitempty"` + FontPresentation string `react:"fontPresentation,omitempty"` + FontSize string `react:"fontSize,omitempty"` + FontSizeAdjust string `react:"fontSizeAdjust,omitempty"` + FontStretch string `react:"fontStretch,omitempty"` + FontStyle string `react:"fontStyle,omitempty"` + FontSynthesis string `react:"fontSynthesis,omitempty"` + FontVariant string `react:"fontVariant,omitempty"` + FontVariantAlternates string `react:"fontVariantAlternates,omitempty"` + FontVariantCaps string `react:"fontVariantCaps,omitempty"` + FontVariantEastAsian string `react:"fontVariantEastAsian,omitempty"` + FontVariantLigatures string `react:"fontVariantLigatures,omitempty"` + FontVariantNumeric string `react:"fontVariantNumeric,omitempty"` + FontVariantPosition string `react:"fontVariantPosition,omitempty"` + FontVariationSettings string `react:"fontVariationSettings,omitempty"` + FontWeight string `react:"fontWeight,omitempty"` + Grid string `react:"grid,omitempty"` + GridArea string `react:"gridArea,omitempty"` + GridAutoColumns string `react:"gridAutoColumns,omitempty"` + GridAutoFlow string `react:"gridAutoFlow,omitempty"` + GridAutoRows string `react:"gridAutoRows,omitempty"` + GridColumn string `react:"gridColumn,omitempty"` + GridColumnEnd string `react:"gridColumnEnd,omitempty"` + GridColumnStart string `react:"gridColumnStart,omitempty"` + GridRow string `react:"gridRow,omitempty"` + GridRowEnd string `react:"gridRowEnd,omitempty"` + GridRowStart string `react:"gridRowStart,omitempty"` + GridTemplate string `react:"gridTemplate,omitempty"` + GridTemplateAreas string `react:"gridTemplateAreas,omitempty"` + GridTemplateColumns string `react:"gridTemplateColumns,omitempty"` + GridTemplateRows string `react:"gridTemplateRows,omitempty"` + HangingPunctuation string `react:"hangingPunctuation,omitempty"` + Height string `react:"height,omitempty"` + Hyphens string `react:"hyphens,omitempty"` + Icon string `react:"icon,omitempty"` + ImageOrientation string `react:"imageOrientation,omitempty"` + ImageRendering string `react:"imageRendering,omitempty"` + ImageResolution string `react:"imageResolution,omitempty"` + ImeMode string `react:"imeMode,omitempty"` + InitialLetters string `react:"initialLetters,omitempty"` + InitialLettersAlign string `react:"initialLettersAlign,omitempty"` + InitialLettersWrap string `react:"initialLettersWrap,omitempty"` + InlineSizing string `react:"inlineSizing,omitempty"` + JustifyContent string `react:"justifyContent,omitempty"` + JustifyItems string `react:"justifyItems,omitempty"` + JustifySelf string `react:"justifySelf,omitempty"` + Left string `react:"left,omitempty"` + LetterSpacing string `react:"letterSpacing,omitempty"` + LightingColor string `react:"lightingColor,omitempty"` + LineBreak string `react:"lineBreak,omitempty"` + LineGrid string `react:"lineGrid,omitempty"` + LineHeight string `react:"lineHeight,omitempty"` + LineSnap string `react:"lineSnap,omitempty"` + ListStyle string `react:"listStyle,omitempty"` + ListStyleImage string `react:"listStyleImage,omitempty"` + ListStylePosition string `react:"listStylePosition,omitempty"` + ListStyleType string `react:"listStyleType,omitempty"` + Margin string `react:"margin,omitempty"` + MarginBottom string `react:"marginBottom,omitempty"` + MarginLeft string `react:"marginLeft,omitempty"` + MarginRight string `react:"marginRight,omitempty"` + MarginTop string `react:"marginTop,omitempty"` + MarkerSide string `react:"markerSide,omitempty"` + Marks string `react:"marks,omitempty"` + Mask string `react:"mask,omitempty"` + MaskBox string `react:"maskBox,omitempty"` + MaskBoxOutset string `react:"maskBoxOutset,omitempty"` + MaskBoxRepeat string `react:"maskBoxRepeat,omitempty"` + MaskBoxSlice string `react:"maskBoxSlice,omitempty"` + MaskBoxSource string `react:"maskBoxSource,omitempty"` + MaskBoxWidth string `react:"maskBoxWidth,omitempty"` + MaskClip string `react:"maskClip,omitempty"` + MaskImage string `react:"maskImage,omitempty"` + MaskOrigin string `react:"maskOrigin,omitempty"` + MaskPosition string `react:"maskPosition,omitempty"` + MaskRepeat string `react:"maskRepeat,omitempty"` + MaskSize string `react:"maskSize,omitempty"` + MaskSourceType string `react:"maskSourceType,omitempty"` + MaskType string `react:"maskType,omitempty"` + MaxHeight string `react:"maxHeight,omitempty"` + MaxLines string `react:"maxLines,omitempty"` + MaxWidth string `react:"maxWidth,omitempty"` + MinHeight string `react:"minHeight,omitempty"` + MinWidth string `react:"minWidth,omitempty"` + MoveTo string `react:"moveTo,omitempty"` + NavDown string `react:"navDown,omitempty"` + NavIndex string `react:"navIndex,omitempty"` + NavLeft string `react:"navLeft,omitempty"` + NavRight string `react:"navRight,omitempty"` + NavUp string `react:"navUp,omitempty"` + ObjectFit string `react:"objectFit,omitempty"` + ObjectPosition string `react:"objectPosition,omitempty"` + Opacity string `react:"opacity,omitempty"` + Order string `react:"order,omitempty"` + Orphans string `react:"orphans,omitempty"` + Outline string `react:"outline,omitempty"` + OutlineColor string `react:"outlineColor,omitempty"` + OutlineOffset string `react:"outlineOffset,omitempty"` + OutlineStyle string `react:"outlineStyle,omitempty"` + OutlineWidth string `react:"outlineWidth,omitempty"` + Overflow string `react:"overflow,omitempty"` + OverflowWrap string `react:"overflowWrap,omitempty"` + OverflowX string `react:"overflowX,omitempty"` + OverflowY string `react:"overflowY,omitempty"` + Padding string `react:"padding,omitempty"` + PaddingBottom string `react:"paddingBottom,omitempty"` + PaddingLeft string `react:"paddingLeft,omitempty"` + PaddingRight string `react:"paddingRight,omitempty"` + PaddingTop string `react:"paddingTop,omitempty"` + Page string `react:"page,omitempty"` + PageBreakAfter string `react:"pageBreakAfter,omitempty"` + PageBreakBefore string `react:"pageBreakBefore,omitempty"` + PageBreakInside string `react:"pageBreakInside,omitempty"` + PagePolicy string `react:"pagePolicy,omitempty"` + Pause string `react:"pause,omitempty"` + PauseAfter string `react:"pauseAfter,omitempty"` + PauseBefore string `react:"pauseBefore,omitempty"` + Perspective string `react:"perspective,omitempty"` + PerspectiveOrigin string `react:"perspectiveOrigin,omitempty"` + PolarAnchor string `react:"polarAnchor,omitempty"` + PolarAngle string `react:"polarAngle,omitempty"` + PolarDistance string `react:"polarDistance,omitempty"` + PolarOrigin string `react:"polarOrigin,omitempty"` + Position string `react:"position,omitempty"` + PresentationLevel string `react:"presentationLevel,omitempty"` + Quotes string `react:"quotes,omitempty"` + RegionFragment string `react:"regionFragment,omitempty"` + Resize string `react:"resize,omitempty"` + Rest string `react:"rest,omitempty"` + RestAfter string `react:"restAfter,omitempty"` + RestBefore string `react:"restBefore,omitempty"` + Right string `react:"right,omitempty"` + Rotation string `react:"rotation,omitempty"` + RotationPoint string `react:"rotationPoint,omitempty"` + RowGap string `react:"rowGap,omitempty"` + RubyAlign string `react:"rubyAlign,omitempty"` + RubyMerge string `react:"rubyMerge,omitempty"` + RubyPosition string `react:"rubyPosition,omitempty"` + ScrollPadding string `react:"scrollPadding,omitempty"` + ScrollPaddingBlock string `react:"scrollPaddingBlock,omitempty"` + ScrollPaddingBlockEnd string `react:"scrollPaddingBlockEnd,omitempty"` + ScrollPaddingBlockStart string `react:"scrollPaddingBlockStart,omitempty"` + ScrollPaddingBottom string `react:"scrollPaddingBottom,omitempty"` + ScrollPaddingInline string `react:"scrollPaddingInline,omitempty"` + ScrollPaddingInlineEnd string `react:"scrollPaddingInlineEnd,omitempty"` + ScrollPaddingInlineStart string `react:"scrollPaddingInlineStart,omitempty"` + ScrollPaddingLeft string `react:"scrollPaddingLeft,omitempty"` + ScrollPaddingRight string `react:"scrollPaddingRight,omitempty"` + ScrollPaddingTop string `react:"scrollPaddingTop,omitempty"` + ScrollSnapAlign string `react:"scrollSnapAlign,omitempty"` + ScrollSnapMargin string `react:"scrollSnapMargin,omitempty"` + ScrollSnapMarginBlock string `react:"scrollSnapMarginBlock,omitempty"` + ScrollSnapMarginBlockEnd string `react:"scrollSnapMarginBlockEnd,omitempty"` + ScrollSnapMarginBlockStart string `react:"scrollSnapMarginBlockStart,omitempty"` + ScrollSnapMarginBottom string `react:"scrollSnapMarginBottom,omitempty"` + ScrollSnapMarginInline string `react:"scrollSnapMarginInline,omitempty"` + ScrollSnapMarginInlineEnd string `react:"scrollSnapMarginInlineEnd,omitempty"` + ScrollSnapMarginInlineStart string `react:"scrollSnapMarginInlineStart,omitempty"` + ScrollSnapMarginLeft string `react:"scrollSnapMarginLeft,omitempty"` + ScrollSnapMarginRight string `react:"scrollSnapMarginRight,omitempty"` + ScrollSnapMarginTop string `react:"scrollSnapMarginTop,omitempty"` + ScrollSnapStop string `react:"scrollSnapStop,omitempty"` + ScrollSnapType string `react:"scrollSnapType,omitempty"` + ShapeImageThreshold string `react:"shapeImageThreshold,omitempty"` + ShapeInside string `react:"shapeInside,omitempty"` + ShapeOutside string `react:"shapeOutside,omitempty"` + ShapeMargin string `react:"shapeMargin,omitempty"` + Size string `react:"size,omitempty"` + Speak string `react:"speak,omitempty"` + SpeakAs string `react:"speakAs,omitempty"` + StringSet string `react:"stringSet,omitempty"` + TabSize string `react:"tabSize,omitempty"` + TableLayout string `react:"tableLayout,omitempty"` + TextAlign string `react:"textAlign,omitempty"` + TextAlignLast string `react:"textAlignLast,omitempty"` + TextCombineUpright string `react:"textCombineUpright,omitempty"` + TextDecoration string `react:"textDecoration,omitempty"` + TextDecorationColor string `react:"textDecorationColor,omitempty"` + TextDecorationLine string `react:"textDecorationLine,omitempty"` + TextDecorationSkip string `react:"textDecorationSkip,omitempty"` + TextDecorationStyle string `react:"textDecorationStyle,omitempty"` + TextEmphasis string `react:"textEmphasis,omitempty"` + TextEmphasisColor string `react:"textEmphasisColor,omitempty"` + TextEmphasisPosition string `react:"textEmphasisPosition,omitempty"` + TextEmphasisStyle string `react:"textEmphasisStyle,omitempty"` + TextIndent string `react:"textIndent,omitempty"` + TextJustify string `react:"textJustify,omitempty"` + TextOrientation string `react:"textOrientation,omitempty"` + TextOverflow string `react:"textOverflow,omitempty"` + TextShadow string `react:"textShadow,omitempty"` + TextSpaceCollapse string `react:"textSpaceCollapse,omitempty"` + TextTransform string `react:"textTransform,omitempty"` + TextUnderlinePosition string `react:"textUnderlinePosition,omitempty"` + TextWrap string `react:"textWrap,omitempty"` + TouchAction string `react:"touchAction,omitempty"` + Top string `react:"top,omitempty"` + Transform string `react:"transform,omitempty"` + TransformOrigin string `react:"transformOrigin,omitempty"` + TransformStyle string `react:"transformStyle,omitempty"` + Transition string `react:"transition,omitempty"` + TransitionDelay string `react:"transitionDelay,omitempty"` + TransitionDuration string `react:"transitionDuration,omitempty"` + TransitionProperty string `react:"transitionProperty,omitempty"` + TransitionTimingFunction string `react:"transitionTimingFunction,omitempty"` + UnicodeBidi string `react:"unicodeBidi,omitempty"` + UserSelect string `react:"userSelect,omitempty"` + VerticalAlign string `react:"verticalAlign,omitempty"` + Visibility string `react:"visibility,omitempty"` + VoiceBalance string `react:"voiceBalance,omitempty"` + VoiceDuration string `react:"voiceDuration,omitempty"` + VoiceFamily string `react:"voiceFamily,omitempty"` + VoicePitch string `react:"voicePitch,omitempty"` + VoiceRange string `react:"voiceRange,omitempty"` + VoiceRate string `react:"voiceRate,omitempty"` + VoiceStress string `react:"voiceStress,omitempty"` + VoiceVolume string `react:"voiceVolume,omitempty"` + WhiteSpace string `react:"whiteSpace,omitempty"` + Widows string `react:"widows,omitempty"` + Width string `react:"width,omitempty"` + WillChange string `react:"willChange,omitempty"` + WordBreak string `react:"wordBreak,omitempty"` + WordSpacing string `react:"wordSpacing,omitempty"` + WordWrap string `react:"wordWrap,omitempty"` + WrapFlow string `react:"wrapFlow,omitempty"` + WrapThrough string `react:"wrapThrough,omitempty"` + WritingMode string `react:"writingMode,omitempty"` + ZIndex string `react:"zIndex,omitempty"` +} diff --git a/helpers.go b/helpers.go new file mode 100644 index 0000000..ab7234f --- /dev/null +++ b/helpers.go @@ -0,0 +1,63 @@ +package main + +import ( + "github.com/gopherjs/gopherjs/js" +) + +// Fragment is used to group a list of children +// without adding extra nodes to the DOM. +// See: https://reactjs.org/docs/fragments.html +func Fragment(key *string, children ...interface{}) *js.Object { + props := map[string]interface{}{} + if key != nil { + props["key"] = *key + } + return JSX(React.Get("Fragment"), props, children...) +} + +// JSX is used to create an Element. +func JSX(component interface{}, props interface{}, children ...interface{}) *js.Object { + + args := []interface{}{ + component, + SToMap(props), + } + if len(children) > 0 { + args = append(args, children...) + } + + return React.Call("createElement", args...) +} + +// JSFn is a convenience function used to call javascript functions. +func JSFn(name string, args ...interface{}) *js.Object { + return js.Global.Call(name, args...) +} + +// CreateRef will create a Ref. +// See: https://reactjs.org/docs/refs-and-the-dom.html +func CreateRef() *js.Object { + return React.Call("createRef") +} + +// ForwardRef will forward a Ref to child components. +// See: https://reactjs.org/docs/forwarding-refs.html +func ForwardRef(component interface{}) *js.Object { + return React.Call("forwardRef", func(props *js.Object, ref *js.Object) *js.Object { + props.Set("ref", ref) + + n := React.Get("Children").Call("count", props.Get("children")).Int() + switch n { + case 0: + return JSX(component, props) + case 1: + return JSX(component, props, props.Get("children")) + default: + children := []interface{}{} + for i := 0; i < n; i++ { + children = append(children, props.Get("children").Index(i)) + } + return JSX(component, props, children...) + } + }) +} diff --git a/react.go b/react.go new file mode 100644 index 0000000..b0f8609 --- /dev/null +++ b/react.go @@ -0,0 +1,36 @@ +package main + +import ( + "github.com/gopherjs/gopherjs/js" + "honnef.co/go/js/dom" +) + +var ( + // React points to the React library. Change it + // if it is not in your global namespace. + React = js.Global.Get("React") + // ReactDOM points to the ReactDOM library. Change it + // if it is not in your global namespace. + ReactDOM = js.Global.Get("ReactDOM") + // CreateReactClass points to create-react-class module. + CreateReactClass = js.Global +) + +// ForceUpdate will force a rerender of the component. +// See: https://reactjs.org/docs/react-component.html#forceupdate +func ForceUpdate(this *js.Object, callback ...func()) { + + if len(callback) > 0 && callback[0] != nil { + this.Call("forceUpdate", callback[0]) + } else { + this.Call("forceUpdate") + } +} + +// Render will render component to the specified target dom element. +func Render(element *js.Object, domTarget dom.Element, callback ...func()) *js.Object { + if len(callback) > 0 && callback[0] != nil { + return ReactDOM.Call("render", element, domTarget, callback[0]) + } + return ReactDOM.Call("render", element, domTarget) +} diff --git a/react_class.go b/react_class.go new file mode 100644 index 0000000..eb37cda --- /dev/null +++ b/react_class.go @@ -0,0 +1,116 @@ +package main + +import ( + "github.com/gopherjs/gopherjs/js" +) + +// Map is a convenience method that can be used to access fields in a +// js object. +type Map func(key string) *js.Object + +// UpdaterFunc is the first argument for SetState method. +// See: https://reactjs.org/docs/react-component.html#setstate +type UpdaterFunc func(props, state Map) interface{} + +// SetState is used to asynchronously update the state. +// See: https://reactjs.org/docs/react-component.html#setstate +type SetState func(updater interface{}, callback ...func()) + +type ClassDef map[string]interface{} + +// NewClassDef will create an empty class definition which can immediately be used +// to create a React component. +func NewClassDef(displayName string) ClassDef { + def := ClassDef{ + render: js.MakeFunc(func(this *js.Object, arguments []*js.Object) interface{} { + return nil + }), + } + def["displayName"] = displayName + return def +} + +func (def ClassDef) setMethod(static bool, name string, f func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{}) { + + const statics = "statics" + + if f == nil { + // Clear method + if static { + if _, exists := def[statics]; exists { + switch s := def[statics].(type) { + case (map[string]interface{}): + delete(s, name) + default: + + } + } + } else { + delete(def, name) + } + return + } + + if !static && name == statics { + panic("can't have function name called 'statics'") + } + + x := func(this *js.Object, arguments []*js.Object) interface{} { + + props := func(key string) *js.Object { + return this.Get("props").Get(key) + } + + state := func(key string) *js.Object { + return this.Get("state").Get(key) + } + + setState := func(updater interface{}, callback ...func()) { + + if updater == nil { + return + } + + if len(callback) > 0 && callback[0] != nil { + switch updater := updater.(type) { + case func(props, state Map) interface{}: + this.Call("setState", SToMap(updater(props, state)), callback[0]) + case UpdaterFunc: + this.Call("setState", SToMap(updater(props, state)), callback[0]) + default: + this.Call("setState", SToMap(updater), callback[0]) + } + } else { + switch updater := updater.(type) { + case func(props, state Map) interface{}: + this.Call("setState", SToMap(updater(props, state))) + case UpdaterFunc: + this.Call("setState", SToMap(updater(props, state))) + default: + this.Call("setState", SToMap(updater)) + } + } + } + + return f(this, props, state, setState, arguments) + } + + if static { + def[statics] = map[string]interface{}{ + name: js.MakeFunc(x), + } + } else { + def[name] = js.MakeFunc(x) + } +} + +// SetMethod allows a custom method to be attached. +// By passing nil for f, the method can also be detached (cleared). +func (def ClassDef) SetMethod(name string, f func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{}) { + def.setMethod(false, name, f) +} + +// ReactCreateClass is used to create a react component. +func ReactCreateClass(def ClassDef) *js.Object { + return CreateReactClass.Call("createReactClass", def) +} diff --git a/react_events.go b/react_events.go new file mode 100644 index 0000000..1b1e3cf --- /dev/null +++ b/react_events.go @@ -0,0 +1,185 @@ +package main + +import ( + "github.com/gopherjs/gopherjs/js" + "honnef.co/go/js/dom" +) + +// SyntheticEvent represents a SyntheticEvent. +// See: https://reactjs.org/docs/events.html#overview +type SyntheticEvent struct { + O *js.Object +} + +// Bubbles +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) Bubbles() bool { + return s.O.Get("bubbles").Bool() +} + +// Cancelable +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) Cancelable() bool { + return s.O.Get("cancelable").Bool() +} + +// CurrentTarget +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) CurrentTarget() dom.HTMLElement { + return dom.WrapHTMLElement(s.O.Get("currentTarget")) +} + +// DefaultPrevented +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) DefaultPrevented() bool { + return s.O.Get("defaultPrevented").Bool() +} + +// EventPhase +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) EventPhase() int { + return s.O.Get("eventPhase").Int() +} + +// IsTrusted +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) IsTrusted() bool { + return s.O.Get("isTrusted").Bool() +} + +// NativeEvents +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) NativeEvent() dom.Event { + return dom.WrapEvent(s.O.Get("nativeEvent")) +} + +// PreventDefault +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) PreventDefault() { + s.O.Call("preventDefault") +} + +// IsDefaultPrevented +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) IsDefaultPrevented() bool { + return s.O.Call("isDefaultPrevented").Bool() +} + +// StopPropagation +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) StopPropagation() { + s.O.Call("stopPropagation") +} + +// IsPropagationStopped +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) IsPropagationStopped() bool { + return s.O.Call("isPropagationStopped").Bool() +} + +// Target +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) Target() dom.HTMLElement { + return dom.WrapHTMLElement(s.O.Get("target")) +} + +// TimeStamp +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) TimeStamp() float64 { + return s.O.Get("timeStamp").Float() +} + +// Type +// See: https://reactjs.org/docs/events.html#overview +func (s *SyntheticEvent) Type() string { + return s.O.Get("type").String() +} + +// Persist is used if you want to access properties in an asynchronous way. +// See: https://reactjs.org/docs/events.html#event-pooling +func (s *SyntheticEvent) Persist() *SyntheticEvent { + p := s.O.Call("persist") + return &SyntheticEvent{p} +} + +// SetEventHandler allows a custom event handler to be attached. +// By passing nil for f, the handler can also be detached (cleared). +// +// It can be used like this: "onClick": this.Get("clickhandler") +// +func (def ClassDef) SetEventHandler(name string, f func(this *js.Object, e *SyntheticEvent, props, state Map, setState SetState)) { + + h := func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + syntheticEvent := &SyntheticEvent{arguments[0]} + f(this, syntheticEvent, props, state, setState) + return nil + } + + def.setMethod(false, name, h) +} + +// SetMultiArgEventHandler allows for you to pass custom arguments to a custom +// event handler. By passing nil for f, the handler can also be detached (cleared). +// +// It can be used like this: "onClick": this.Get("clickhandler").Invoke(5) +// +// See: https://reactjs.org/docs/handling-events.html#passing-arguments-to-event-handlers +func (def ClassDef) SetMultiArgEventHandler(name string, f func(this *js.Object, arguments []*js.Object) func(this *js.Object, e *SyntheticEvent, props, state Map, setState SetState)) { + + if f == nil { + // Clear handler + delete(def, name) + return + } + + if name == "statics" { + panic("can't have function name called 'statics'") + } + + x := func(this *js.Object, arguments []*js.Object) interface{} { + + props := func(key string) *js.Object { + return this.Get("props").Get(key) + } + + state := func(key string) *js.Object { + return this.Get("state").Get(key) + } + + setState := func(updater interface{}, callback ...func()) { + + if updater == nil { + return + } + + if len(callback) > 0 && callback[0] != nil { + switch updater := updater.(type) { + case func(props, state Map) interface{}: + this.Call("setState", SToMap(updater(props, state)), callback[0]) + case UpdaterFunc: + this.Call("setState", SToMap(updater(props, state)), callback[0]) + default: + this.Call("setState", SToMap(updater), callback[0]) + } + } else { + switch updater := updater.(type) { + case func(props, state Map) interface{}: + this.Call("setState", SToMap(updater(props, state))) + case UpdaterFunc: + this.Call("setState", SToMap(updater(props, state))) + default: + this.Call("setState", SToMap(updater)) + } + } + } + + z := f(this, arguments) + + return func(e *js.Object) { + syntheticEvent := &SyntheticEvent{e} + z(this, syntheticEvent, props, state, setState) + } + } + + def[name] = js.MakeFunc(x) +} diff --git a/react_lifecycle.go b/react_lifecycle.go new file mode 100644 index 0000000..d513745 --- /dev/null +++ b/react_lifecycle.go @@ -0,0 +1,133 @@ +package main + +import ( + "github.com/gopherjs/gopherjs/js" +) + +const ( + // TODO: add type checking props + getDefaultProps = "getDefaultProps" + + // Mounting + getInitialState = "getInitialState" + getDerivedStateFromProps = "getDerivedStateFromProps" + render = "render" + componentDidMount = "componentDidMount" + + // Updating + shouldComponentUpdate = "shouldComponentUpdate" + getSnapshotBeforeUpdate = "getSnapshotBeforeUpdate" + componentDidUpdate = "componentDidUpdate" + + // Unmounting + componentWillUnmount = "componentWillUnmount" +) + +// SetGetDefaultProps sets the getDefaultProps method. +func (def ClassDef) SetGetDefaultProps(f func(this *js.Object) interface{}) { + def.SetMethod(getDefaultProps, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + return SToMap(f(this)) + }) +} + +// SetGetInitialState sets the getInitialState method. +// Note: It is usually not recommended to use the props when setting the state. +func (def ClassDef) SetGetInitialState(f func(this *js.Object, props Map) interface{}) { + def.SetMethod(getInitialState, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + return SToMap(f(this, props)) + }) +} + +// SetGetDerivedStateFromProps sets the getDerivedStateFromProps class method. +// See: https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html +func (def ClassDef) SetGetDerivedStateFromProps(f func(nextProps, prevState Map) interface{}) { + + def.setMethod(true, getDerivedStateFromProps, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + + nextProps := func(key string) *js.Object { + return arguments[0].Get(key) + } + prevState := func(key string) *js.Object { + return arguments[1].Get(key) + } + + return SToMap(f(nextProps, prevState)) + }) +} + +// SetComponentDidMount sets the componentDidMount method. +// See: https://reactjs.org/docs/react-component.html#componentdidmount +func (def ClassDef) SetComponentDidMount(f func(this *js.Object, props, state Map, setState SetState)) { + def.SetMethod(componentDidMount, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + f(this, props, state, setState) + return nil + }) +} + +// SetComponentWillUnmount sets the componentWillUnmount method. +// See: https://reactjs.org/docs/react-component.html#componentwillunmount +func (def ClassDef) SetComponentWillUnmount(f func(this *js.Object, props, state Map)) { + def.SetMethod(componentWillUnmount, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + f(this, props, state) + return nil + }) +} + +// SetShouldComponentUpdate sets the shouldComponentUpdate method. +// See: https://reactjs.org/docs/react-component.html#shouldcomponentupdate +func (def ClassDef) SetShouldComponentUpdate(f func(this *js.Object, props, nextProps, state, nextState Map) bool) { + def.SetMethod(shouldComponentUpdate, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + nextProps := func(key string) *js.Object { + return arguments[0].Get(key) + } + nextState := func(key string) *js.Object { + return arguments[1].Get(key) + } + return f(this, props, nextProps, state, nextState) + }) +} + +// SetGetSnapshotBeforeUpdate sets the getSnapshotBeforeUpdate method. +// See: https://reactjs.org/docs/react-component.html#getsnapshotbeforeupdate +func (def ClassDef) SetGetSnapshotBeforeUpdate(f func(this *js.Object, prevProps, props, prevState, state Map) interface{}) { + def.SetMethod(getSnapshotBeforeUpdate, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + prevProps := func(key string) *js.Object { + return arguments[0].Get(key) + } + prevState := func(key string) *js.Object { + return arguments[1].Get(key) + } + + ret := f(this, prevProps, props, prevState, state) + if ret == nil { + return nil + } else if isStruct(ret) { + return convertStruct(ret) + } else { + return ret + } + }) +} + +// SetComponentDidUpdate sets the componentDidUpdate method. +// See: https://reactjs.org/docs/react-component.html#componentdidupdate +func (def ClassDef) SetComponentDidUpdate(f func(this *js.Object, prevProps, props, prevState, state Map, setState SetState, snapshot *js.Object)) { + def.SetMethod(componentDidUpdate, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + snapshot := arguments[2] + prevProps := func(key string) *js.Object { + return arguments[0].Get(key) + } + prevState := func(key string) *js.Object { + return arguments[1].Get(key) + } + f(this, prevProps, props, prevState, state, setState, snapshot) + return nil + }) +} + +// SetRender sets the render method. +func (def ClassDef) SetRender(f func(this *js.Object, props, state Map) interface{}) { + def.SetMethod(render, func(this *js.Object, props, state Map, setState SetState, arguments []*js.Object) interface{} { + return f(this, props, state) + }) +} diff --git a/structs.go b/structs.go new file mode 100644 index 0000000..efde5da --- /dev/null +++ b/structs.go @@ -0,0 +1,180 @@ +package main + +import ( + "reflect" + "strings" + + "github.com/gopherjs/gopherjs/js" + "github.com/mitchellh/mapstructure" +) + +// SToMap will convert a struct or pass-through a map +// ToMap will return a map. If the argument is a struct, +// it will convert it to a map. If the argument is a map, +// it will pass it through. If the argument is nil, it will +// return nil. +func SToMap(s interface{}) map[string]interface{} { + + if s == nil { + return nil + } + + // Check if s is a struct + if isStruct(s) { + return convertStruct(s) + } + + switch x := s.(type) { + case map[string]interface{}: + return x + default: + panic("unrecognized type") + } +} + +// jsObjectIsNil return true if x is a js object and is null. +func jsObjectIsNil(x interface{}) bool { + if v, ok := x.(*js.Object); ok && v == nil { + return true + } + return false +} + +// jsObjectIsFunction returns true if x is a +// js object and is a js function +func jsObjectIsFunction(x interface{}) (ret bool) { + + v, ok := x.(*js.Object) + if !ok { + // Not a js object + return false + } + + // Check if it's a function + if _, ok = v.Interface().(func(...interface{}) *js.Object); ok { + return true + } + + return false +} + +// convertStruct will convert a struct into a map. +func convertStruct(sIn interface{}) map[string]interface{} { + + out := map[string]interface{}{} + + s := reflect.ValueOf(sIn) + + // Check if s is a pointer + if s.Kind() == reflect.Ptr { + s = reflect.Indirect(s) + } + typeOfT := s.Type() + + for i := 0; i < s.NumField(); i++ { + f := typeOfT.Field(i) + + if f.PkgPath != "" { + // not exported + continue + } + + fieldName := typeOfT.Field(i).Name + fieldTag := f.Tag.Get("react") + fieldVal := s.Field(i).Interface() + + if fieldTag == "-" || (!jsObjectIsFunction(fieldVal) && strings.HasSuffix(fieldTag, ",omitempty") && (fieldVal == nil || jsObjectIsNil(fieldVal) || reflect.DeepEqual(fieldVal, reflect.Zero(reflect.TypeOf(fieldVal)).Interface()))) { + // Omit field + continue + } + + // Deal with Sets as a special case + if set, ok := fieldVal.(Set); ok { + base := strings.TrimSuffix(fieldTag, ",omitempty") + if strings.TrimSpace(base) == "" { + // Skip this Set + continue + } + + all := set.Convert(base) + for attr, val := range all { + out[attr] = val + } + continue + } + + // Deal with dangerouslySetInnerHTML as a special case + if fieldName == "DangerouslySetInnerHTML" && strings.TrimSuffix(fieldTag, ",omitempty") == "dangerouslySetInnerHTML" { + if fn, ok := fieldVal.(func() interface{}); ok { + mp := EscapeHTMLFunc(fn) + out["dangerouslySetInnerHTML"] = mp["dangerouslySetInnerHTML"] + } else { + mp := EscapeHTML(fieldVal) + out["dangerouslySetInnerHTML"] = mp["dangerouslySetInnerHTML"] + } + continue + } + + if fieldTag == "" { + if jsObjectIsFunction(fieldVal) { + out[fieldName] = fieldVal + } else if isStruct(fieldVal) { + out[fieldName] = convertStruct(fieldVal) + } else { + out[fieldName] = fieldVal + } + } else { + if jsObjectIsFunction(fieldVal) { + out[strings.TrimSuffix(fieldTag, ",omitempty")] = fieldVal + } else if isStruct(fieldVal) { + out[strings.TrimSuffix(fieldTag, ",omitempty")] = convertStruct(fieldVal) + } else { + out[strings.TrimSuffix(fieldTag, ",omitempty")] = fieldVal + } + } + } + + return out +} + +// isStruct returns if s is a struct or not. +func isStruct(s interface{}) bool { + v := reflect.ValueOf(s) + if v.Kind() == reflect.Ptr { + v = v.Elem() + } + + // uninitialized zero value of a struct + if v.Kind() == reflect.Invalid { + return false + } + + return v.Kind() == reflect.Struct +} + +// ConvertMap will hydrate a struct with values from a map. +// strct must be a pointer to a map. Use struct tag "react" for linking +// map keys to struct. +func ConvertMap(mp interface{}, strct interface{}) error { + + decoder, err := mapstructure.NewDecoder(&mapstructure.DecoderConfig{ + ZeroFields: true, + TagName: "react", + Result: strct, + }) + if err != nil { + panic(err) + } + + return decoder.Decode(mp) +} + +func HydrateProps(this *js.Object, strct interface{}) error { + props := this.Get("props").Interface() + return ConvertMap(props, strct) +} + +func HydrateState(this *js.Object, strct interface{}) error { + state := this.Get("state").Interface() + return ConvertMap(state, strct) +} diff --git a/utility.go b/utility.go new file mode 100644 index 0000000..5684874 --- /dev/null +++ b/utility.go @@ -0,0 +1,82 @@ +package main + +import ( + "strings" +) + +// Set is used for conveniently dealign with +// data-* and aria-* attributes. +// See: https://reactjs.org/docs/dom-elements.html +type Set map[string]string + +// Convert converts a Set into a map containing the actual +// attribute names by prefixing the base. +func (s Set) Convert(base string) map[string]string { + + out := map[string]string{} + + for attr := range s { + out[base+attr] = s[attr] + } + + return out +} + +// EscapeHTMLFunc is used to create a prop that can escape and set +// the inner html of an element. +func EscapeHTMLFunc(inside func() interface{}) map[string]interface{} { + return map[string]interface{}{ + "dangerouslySetInnerHTML": map[string]interface{}{ + "__html": inside(), + }, + } +} + +// EscapeHTML is a convience function. +func EscapeHTML(inside interface{}) map[string]interface{} { + return EscapeHTMLFunc(func() interface{} { return inside }) +} + +// AddClass adds a new class to an existing list of classes. +func AddClass(currentClasses, newClass string) string { + + uniq := splitClasses(currentClasses) + uniq[newClass] = struct{}{} + + pre := []string{} + for k := range uniq { + pre = append(pre, k) + } + + return strings.Join(pre, " ") +} + +// RemoveClass removes a class from an existing list of classes. +func RemoveClass(currentClasses, newClass string) string { + + uniq := splitClasses(currentClasses) + delete(uniq, newClass) + + pre := []string{} + for k := range uniq { + pre = append(pre, k) + } + + return strings.Join(pre, " ") +} + +// splitClasses returns a map where all the keys are the +// unique classes. +func splitClasses(currentClasses string) map[string]struct{} { + uniq := map[string]struct{}{} + + splits := strings.Split(currentClasses, " ") + for _, split := range splits { + split = strings.TrimSpace(split) + if split != "" { + uniq[split] = struct{}{} + } + } + + return uniq +}