Merge pull request #239 from MrJarv1s/FormEvents

Add Form component event handling

Author: jonthomp

src/components/Form/Form.react.js

@@ -29,12 +29,14 @@ import FormInputGroupPrepend from "./FormInputGroupPrepend.react";
 import FormMaskedInput from "./FormMaskedInput.react";
 import FormDatePicker from "./FormDatePicker.react";
 
+import type { FormEvents } from "../../";
+
 export type Props = {|
+  ...FormEvents,
   +children?: React.Node,
   +className?: string,
   +action?: string,
   +method?: string,
-  +onSubmit?: Function,
 |};
 
 function Form({

src/components/Form/FormCheckbox.react.js

@@ -4,7 +4,11 @@ import * as React from "react";
 import cn from "classnames";
 import Form from "./";
 
+import type { FormEvents, FocusEvents } from "../../";
+
 export type Props = {|
+  ...FormEvents,
+  ...FocusEvents,
   +className?: string,
   /**
    * Wrap the checkbox with a label
@@ -15,8 +19,6 @@ export type Props = {|
   +checked?: boolean,
   +disabled?: boolean,
   +readOnly?: boolean,
-  +onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => void,
-  +onBlur?: (event: SyntheticInputEvent<HTMLInputElement>) => void,
   +isInline?: boolean,
 |};
 
@@ -29,6 +31,8 @@ function FormCheckbox({
   disabled,
   readOnly,
   onChange,
+  onFocus,
+  onBlur,
   isInline,
 }: Props): React.Node {
   const classes = cn(
@@ -46,6 +50,8 @@ function FormCheckbox({
       disabled={disabled}
       readOnly={readOnly}
       onChange={onChange}
+      onBlur={onBlur}
+      onFocus={onFocus}
     />
   );
 

src/components/Form/FormColorCheckItem.react.js

@@ -4,9 +4,27 @@ import * as React from "react";
 import cn from "classnames";
 import Grid from "../Grid";
 
-type Props = {| +className?: string, +color: string |};
+import type { MouseEvents, PointerEvents, FocusEvents } from "../../";
 
-function FormColorCheckItem({ className, color }: Props): React.Node {
+type Props = {|
+  ...MouseEvents,
+  ...PointerEvents,
+  ...FocusEvents,
+  +className?: string,
+  +color: string,
+|};
+
+function FormColorCheckItem({
+  className,
+  color,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+}: Props): React.Node {
   const classes = cn(className);
   return (
     <Grid.Col auto className={classes}>
@@ -16,6 +34,13 @@ function FormColorCheckItem({ className, color }: Props): React.Node {
           type="checkbox"
           value={color}
           className="colorinput-input"
+          onClick={onClick}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onPointerEnter={onPointerEnter}
+          onPointerLeave={onPointerLeave}
+          onFocus={onFocus}
+          onBlur={onBlur}
         />
         <span className={`colorinput-color bg-${color}`} />
       </label>

src/components/Form/FormFileInput.react.js

@@ -3,14 +3,24 @@
 import * as React from "react";
 import cn from "classnames";
 
+import type {
+  FormEvents,
+  FocusEvents,
+  MouseEvents,
+  PointerEvents,
+} from "../../";
+
 type Props = {|
+  ...FormEvents,
+  ...FocusEvents,
+  ...MouseEvents,
+  ...PointerEvents,
   +className?: string,
   +value?: string | number | boolean,
   +name?: string,
   +label?: string,
   +disabled?: boolean,
   +readOnly?: boolean,
-  +onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => void,
 |};
 
 type State = {| fileName: string |};
@@ -36,6 +46,13 @@ class FormFileInput extends React.Component<Props, State> {
       label: labelFromProps = "Choose file",
       disabled,
       readOnly,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onPointerEnter,
+      onPointerLeave,
+      onFocus,
+      onBlur,
     } = this.props;
 
     const classes = cn("custom-file", className);
@@ -50,6 +67,13 @@ class FormFileInput extends React.Component<Props, State> {
           disabled={disabled}
           readOnly={readOnly}
           onChange={this._handleOnChange}
+          onClick={onClick}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onPointerEnter={onPointerEnter}
+          onPointerLeave={onPointerLeave}
+          onFocus={onFocus}
+          onBlur={onBlur}
         />
         <label
           className="custom-file-label"

src/components/Form/FormImageCheckItem.react.js

@@ -2,8 +2,12 @@
 
 import * as React from "react";
 import Grid from "../Grid";
+import type { MouseEvents, PointerEvents, FocusEvents } from "../../";
 
 type Props = {|
+  ...MouseEvents,
+  ...PointerEvents,
+  ...FocusEvents,
   +className?: string,
   +value: string | number,
   +imageURL: string,
@@ -20,6 +24,13 @@ function FormImageCheckItem({
   col: { width = 6, sm = 4, md = 0, lg = 0 } = {},
   imageURL,
   value,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
 }: Props): React.Node {
   return (
     <Grid.Col width={width} sm={sm} md={md} lg={lg}>
@@ -29,6 +40,13 @@ function FormImageCheckItem({
           type="checkbox"
           value={value}
           className="imagecheck-input"
+          onClick={onClick}
+          onMouseEnter={onMouseEnter}
+          onMouseLeave={onMouseLeave}
+          onPointerEnter={onPointerEnter}
+          onPointerLeave={onPointerLeave}
+          onFocus={onFocus}
+          onBlur={onBlur}
         />
         <figure className="imagecheck-figure">
           <img src={imageURL} alt="Select" className="imagecheck-image" />

src/components/Form/FormInput.react.js

@@ -5,6 +5,13 @@ import { Icon } from "../";
 import cn from "classnames";
 import FormGroup from "./FormGroup.react";
 
+import type {
+  FormEvents,
+  MouseEvents,
+  PointerEvents,
+  FocusEvents,
+} from "../../";
+
 type FormStyle = {|
   +className?: string,
   +icon?: string,
@@ -26,8 +33,10 @@ type FormStyle = {|
 
 export type Props = {|
   ...FormStyle,
-  +onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => void,
-  +onBlur?: (event: SyntheticInputEvent<HTMLInputElement>) => void,
+  ...FormEvents,
+  ...MouseEvents,
+  ...PointerEvents,
+  ...FocusEvents,
   +placeholder?: string,
   +type?: "checkbox" | "radio" | "text" | "email" | "password",
   +value?: string | number | boolean,
@@ -55,6 +64,11 @@ function FormInput(props: Props): React.Node {
     value,
     checked,
     onChange,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
     onBlur,
     disabled,
     readOnly,
@@ -85,6 +99,11 @@ function FormInput(props: Props): React.Node {
     disabled,
     readOnly,
     onChange,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
     onBlur,
   };
 

src/components/Form/FormLabel.react.js

@@ -3,12 +3,36 @@
 import * as React from "react";
 import cn from "classnames";
 
-type Props = {| +children?: React.Node, +className?: string, +aside?: string |};
+import type { MouseEvents, PointerEvents } from "../../";
 
-function FormLabel({ className, aside, children }: Props): React.Node {
+type Props = {|
+  ...MouseEvents,
+  ...PointerEvents,
+  +children?: React.Node,
+  +className?: string,
+  +aside?: string,
+|};
+
+function FormLabel({
+  className,
+  aside,
+  children,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
+}: Props): React.Node {
   const classes = cn("form-label", className);
   return (
-    <label className={classes}>
+    <label
+      className={classes}
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
+    >
       {aside && <span className="form-label-small">{aside}</span>}
       {children}
     </label>

src/components/Form/FormMaskedInput.react.js

@@ -3,14 +3,23 @@ import * as React from "react";
 import cn from "classnames";
 import MaskedInput from "react-text-mask";
 
+import type {
+  FormEvents,
+  FocusEvents,
+  MouseEvents,
+  PointerEvents,
+} from "../../";
+
 type Props = {|
+  ...FormEvents,
+  ...FocusEvents,
+  ...MouseEvents,
+  ...PointerEvents,
   +mask: Array<string | RegExp>,
   +className?: string,
   +placeholder?: string,
   +guide?: boolean,
   +id?: string,
-  +onBlur?: () => {},
-  +onChange?: () => {},
   +value?: string,
   +valid?: boolean,
   +tick?: boolean,
@@ -35,6 +44,7 @@ function FormMaskedInput(props: Props): React.Node {
     },
     props.className
   );
+
   return (
     <React.Fragment>
       <MaskedInput className={classes} {...props} />

src/components/Form/FormRadio.react.js

@@ -4,7 +4,18 @@ import * as React from "react";
 import cn from "classnames";
 import Form from "./";
 
+import type {
+  MouseEvents,
+  PointerEvents,
+  FormEvents,
+  FocusEvents,
+} from "../../";
+
 type Props = {|
+  ...MouseEvents,
+  ...PointerEvents,
+  ...FormEvents,
+  ...FocusEvents,
   +className?: string,
   /**
    * Wrap the checkbox with a label
@@ -15,7 +26,6 @@ type Props = {|
   +checked?: boolean,
   +disabled?: boolean,
   +readOnly?: boolean,
-  +onChange?: (event: SyntheticInputEvent<HTMLInputElement>) => void,
   +isInline?: boolean,
 |};
 
@@ -28,15 +38,35 @@ function FormRadio({
   disabled,
   readOnly,
   onChange,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
+  onBlur,
+  onFocus,
+  onClick,
   isInline,
 }: Props): React.Node {
   const classes = cn(
     "custom-control custom-radio",
     { "custom-control-inline": isInline },
     className
   );
+
+  const events = {
+    onChange: onChange,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onPointerEnter: onPointerEnter,
+    onPointerLeave: onPointerLeave,
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onClick: onClick,
+  };
+
   const inputComponent = (
     <Form.Input
+      {...events}
       type="radio"
       name={name}
       value={value}