feat(Form): Add event handling to FormSelect and children

fix #219

Author: Greg-Hamel

src/components/Form/FormSelectGroup.react.js

@@ -2,8 +2,18 @@
 
 import * as React from "react";
 import cn from "classnames";
+import type {
+  FormEvents,
+  FocusEvents,
+  MouseEvents,
+  PointerEvents,
+} from "../../";
 
 type Props = {|
+  ...FormEvents,
+  ...FocusEvents,
+  ...MouseEvents,
+  ...PointerEvents,
   +children: Array<React.Element<any>>,
   +className?: string,
   +pills?: boolean,
@@ -15,13 +25,31 @@ function FormSelectGroup({
   children,
   pills,
   canSelectMultiple,
+  onChange,
+  onFocus,
+  onBlur,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
 }: Props): React.Node {
   const classes = cn(
     { selectgroup: true, "w-100": true, "selectgroup-pills": pills },
     className
   );
   return (
-    <div className={classes}>
+    <div
+      className={classes}
+      onChange={onChange}
+      onClick={onClick}
+      onFocus={onFocus}
+      onBlur={onBlur}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+    >
       {canSelectMultiple
         ? children.map(itm => React.cloneElement(itm, { type: "checkbox" }))
         : children}

src/components/Form/FormSelectGroupItem.react.js

@@ -3,8 +3,18 @@
 import * as React from "react";
 import cn from "classnames";
 import { Icon } from "../";
+import type {
+  FormEvents,
+  FocusEvents,
+  MouseEvents,
+  PointerEvents,
+} from "../../";
 
 type Props = {|
+  ...FormEvents,
+  ...FocusEvents,
+  ...MouseEvents,
+  ...PointerEvents,
   +className?: string,
   +label?: string,
   +value?: string | number | boolean,
@@ -22,6 +32,14 @@ function FormSelectGroupItem({
   checked,
   icon,
   type,
+  onChange,
+  onFocus,
+  onBlur,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
 }: Props): React.Node {
   const classes = cn({ "selectgroup-item": true }, className);
   const btnClasses = cn("selectgroup-button", {
@@ -37,6 +55,14 @@ function FormSelectGroupItem({
           value={value}
           className="selectgroup-input"
           checked={checked}
+          onChange={onChange}
+          onClick={onClick}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onPointerEnter={onPointerEnter}
+          onPointerLeave={onPointerLeave}
         />
       ) : (
         <input
@@ -45,6 +71,14 @@ function FormSelectGroupItem({
           value={value}
           className="selectgroup-input"
           checked={checked}
+          onChange={onChange}
+          onClick={onClick}
+          onFocus={onFocus}
+          onBlur={onBlur}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onPointerEnter={onPointerEnter}
+          onPointerLeave={onPointerLeave}
         />
       )}
       <span className={btnClasses}>{outputLabel}</span>