Very basic event handling

src/brightwheel-component.js

@@ -56,6 +56,7 @@ class BrightwheelComponent {
    // then perform custom teardown logic here...
  }
 
+
   // Property Setter
   // Use this to update component state and re-render the component
   setProperty (properties) {
@@ -87,6 +88,282 @@ class BrightwheelComponent {
     }
     this.update(this.properties)
   }
+
+  // EventHandler Methods
+  onCopy (event) {
+
+  }
+
+  onCut (event) {
+
+  }
+
+  onPaste (event) {
+
+  }
+
+  onCompositionEnd (event) {
+
+  }
+
+  onCompositionStart (event) {
+
+  }
+
+  onCompositionUpdate (event) {
+
+  }
+
+  onKeyDown (event) {
+
+  }
+
+  onKeyPress (event) {
+
+  }
+
+  onKeyUp (event) {
+
+  }
+
+  onFocus (event) {
+
+  }
+
+  onBlur (event) {
+
+  }
+
+  onChange (event) {
+
+  }
+
+  onInput (event) {
+
+  }
+
+  onSubmit (event) {
+
+  }
+
+  onClick (event) {
+
+  }
+
+  onContextMenu (event) {
+
+  }
+
+  onDoubleClick (event) {
+
+  }
+
+  onDrag (event) {
+
+  }
+
+  onDragEnd (event) {
+
+  }
+
+  onDragEnter (event) {
+
+  }
+
+  onDragExit (event) {
+
+  }
+
+  onDragLeave (event) {
+
+  }
+
+  onDragOver (event) {
+
+  }
+
+  onDragStart (event) {
+
+  }
+
+  onDrop (event) {
+
+  }
+
+  onMouseDown (event) {
+
+  }
+
+  onMouseEnter (event) {
+
+  }
+
+  onMouseLeave (event) {
+
+  }
+
+  onMouseMove (event) {
+
+  }
+
+  onMouseOut (event) {
+
+  }
+
+  onMouseOver (event) {
+
+  }
+
+  onMouseUp (event) {
+
+  }
+
+  onSelect (event) {
+
+  }
+
+  onTouchCancel (event) {
+
+  }
+
+  onTouchEnd (event) {
+
+  }
+
+  onTouchMove (event) {
+
+  }
+
+  onTouchStart (event) {
+
+  }
+
+  onScroll (event) {
+
+  }
+
+  onWheel (event) {
+
+  }
+
+  onAbort (event) {
+
+  }
+
+  onCanPlay (event) {
+
+  }
+
+  onCanPlayThrough (event) {
+
+  }
+
+  onDurationChange (event) {
+
+  }
+
+  onEmptied (event) {
+
+  }
+
+  onEncrypted (event) {
+
+  }
+
+  onEnded (event) {
+
+  }
+
+  onError (event) {
+
+  }
+
+  onLoadedData (event) {
+
+  }
+
+  onLoadedMetadata (event) {
+
+  }
+
+  onLoadStart (event) {
+
+  }
+
+  onPause (event) {
+
+  }
+
+  onPlay (event) {
+
+  }
+
+  onPlaying (event) {
+
+  }
+
+  onProgress (event) {
+
+  }
+
+  onRateChange (event) {
+
+  }
+
+  onSeeked (event) {
+
+  }
+
+  onSeeking (event) {
+
+  }
+
+  onStalled (event) {
+
+  }
+
+  onSuspend (event) {
+
+  }
+
+  onTimeUpdate (event) {
+
+  }
+
+  onVolumeChange (event) {
+
+  }
+
+  onWaiting (event) {
+
+  }
+
+  onLoad (event) {
+
+  }
+
+  onError (event) {
+
+  }
+
+  onAnimationStart (event) {
+
+  }
+
+  onAnimationEnd (event) {
+
+  }
+
+  onAnimationIteration (event) {
+
+  }
+
+  onTransitionEnd (event) {
+
+  }
+
+
+
 }
 
 export default BrightwheelComponent

src/button-group.js

@@ -22,7 +22,75 @@ class ButtonGroup extends BrightwheelComponent {
     );
 
     return (
-      <div {...this.properties.attributes} className={classes}>
+      <div {...this.properties.attributes} className={classes} on={{
+        click: this.onClick,
+        copy: this.onCopy,
+        cut: this.onCut,
+        paste: this.onPaste,
+        compositionend: this.onCompositionEnd,
+        compositionstart: this.onCompositionStart,
+        compositionupdate: this.onCompositionUpdate,
+        keydown: this.onKeyDown,
+        keypress: this.onKeyPress,
+        keyup: this.onKeyUp,
+        focus: this.onFocus,
+        blur: this.onBlur,
+        change: this.onChange,
+        input: this.onInput,
+        submit: this.onSubmit,
+        contextmenu: this.onContextMenu,
+        dblclick: this.onDoubleClick,
+        drag: this.onDrag,
+        dragend: this.onDragEnd,
+        dragenter: this.onDragEnter,
+        dragexit: this.onDragExit,
+        dragleave: this.onDragLeave,
+        dragover: this.onDragOver,
+        dragstart: this.onDragStart,
+        drop: this.onDrop,
+        mousedown: this.onMouseDown,
+        mousenter: this.onMouseEnter,
+        mouseleave: this.onMouseLeave,
+        mousemove: this.onMouseMove,
+        mouseout: this.onMouseOut,
+        mouseover: this.onMouseOver,
+        mouseup: this.onMouseUp,
+        select: this.onSelect,
+        touchcancel: this.onTouchCancel,
+        touchend: this.onTouchEnd,
+        touchmove: this.onTouchMove,
+        touchstart: this.onTouchStart,
+        scroll: this.onScroll,
+        wheel: this.onWheel,
+        abort: this.onAbort,
+        canplay: this.onCanPlay,
+        canplaythrough: this.onCanPlayThrough,
+        durationchange: this.onDurationChange,
+        emptied: this.onEmptied,
+        encrypted: this.onEncrypted,
+        ended: this.onEnded,
+        error: this.onError,
+        loadeddata: this.onLoadedData,
+        loadedmetadat: this.onLoadedMetadata,
+        loadstart: this.onLoadStart,
+        pause: this.onPause,
+        play: this.onPlay,
+        playing: this.onPlaying,
+        progress: this.onProgress,
+        ratechange: this.onRateChange,
+        seeked: this.onSeeked,
+        seeking: this.onSeeking,
+        stalled: this.onStalled,
+        suspend: this.onSuspend,
+        timeupdate: this.onTimeUpdate,
+        volumechange: this.onVolumeChange,
+        waiting: this.onWaiting,
+        load: this.onLoad,
+        animationstart: this.onAnimationStart,
+        animationend: this.onAnimationEnd,
+        animationiteration: this.onAnimationIteration,
+        transitionend: this.onTransitionEnd
+      }}>
         {this.children}
       </div>);
   }