Merge pull request #221 from MrJarv1s/events

Event Types

src/components/Alert/Alert.react.js

@@ -2,9 +2,11 @@
 
 import * as React from "react";
 import cn from "classnames";
-import { Icon, Avatar } from "../";
+import { Icon, Avatar, Button } from "../";
 import AlertLink from "./AlertLink.react";
 
+import type { MouseEvents, PointerEvents } from "../../";
+
 type AlertType =
   | "primary"
   | "secondary"
@@ -14,6 +16,8 @@ type AlertType =
   | "danger";
 
 type Props = {|
+  ...MouseEvents,
+  ...PointerEvents,
   +children?: React.Node,
   +className?: string,
   /**
@@ -68,6 +72,11 @@ class Alert extends React.Component<Props, State> {
       hasExtraSpace,
       isDismissible,
       avatar,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onPointerEnter,
+      onPointerLeave,
     }: Props = this.props;
     const classes = cn(
       "alert",
@@ -80,15 +89,20 @@ class Alert extends React.Component<Props, State> {
       },
       className
     );
+
+    const events = {
+      onClick: onClick,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onPointerEnter: onPointerEnter,
+      onPointerLeave: onPointerLeave,
+    };
+
     return (
       !isDismissed && (
-        <div className={classes} role="alert">
+        <div {...events} className={classes} role="alert">
           {isDismissible && (
-            <button
-              type="button"
-              className="close"
-              onClick={this._handleOnDismissClick}
-            />
+            <Button className="close" onClick={this._handleOnDismissClick} />
           )}
           {avatar && <Avatar imageURL={avatar} />}
           {icon && <Icon name={icon} className="mr-2" isAriaHidden={true} />}

src/components/Avatar/Avatar.react.js

@@ -5,7 +5,11 @@ import { Icon } from "../";
 import cn from "classnames";
 import AvatarList from "./AvatarList.react";
 
+import type { MouseEvents, PointerEvents } from "../../";
+
 export type Props = {|
+  ...MouseEvents,
+  ...PointerEvents,
   +children?: React.Node,
   +className?: string,
   /**
@@ -45,6 +49,11 @@ function Avatar({
   placeholder,
   icon,
   color = "",
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
 }: Props): React.Node {
   const classes = cn(
     {
@@ -68,6 +77,11 @@ function Avatar({
             )
           : style
       }
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      onPointerEnter={onPointerEnter}
+      onPointerLeave={onPointerLeave}
     >
       {icon && <Icon name={icon} />}
       {status && <span className={`avatar-status bg-${status}`} />}

src/components/Button/Button.react.js

@@ -6,7 +6,11 @@ import { Icon } from "../";
 import ButtonList from "./ButtonList.react";
 import ButtonDropdown from "./ButtonDropdown.react";
 
+import type { MouseEvents, PointerEvents } from "../../";
+
 type PropsForAll = {|
+  ...MouseEvents,
+  ...PointerEvents,
   +size?: "sm" | "lg",
   +outline?: boolean,
   +link?: boolean,
@@ -24,31 +28,27 @@ type PropsForAll = {|
   +to?: string,
   +isOption?: boolean,
   +rootRef?: (?HTMLElement) => void,
-  +onClick?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
 |};
 
 type DefaultButtonComponent = {|
   ...PropsForAll,
   +RootComponent?: "button",
   +type?: "button" | "submit" | "reset",
   +value?: string,
-  +onClick?: (event: SyntheticMouseEvent<HTMLInputElement>) => mixed,
 |};
 
 type BtnAComponent = {|
   ...PropsForAll,
   +RootComponent: "a",
   +href?: string,
   +target?: string,
-  +onClick?: (SyntheticMouseEvent<HTMLLinkElement>) => mixed,
 |};
 
 type BtnInputComponent = {|
   ...PropsForAll,
   +RootComponent: "input",
   +type?: "button" | "submit" | "reset",
   +value?: string,
-  +onClick?: (SyntheticMouseEvent<HTMLInputElement>) => mixed,
 |};
 
 export type Props = DefaultButtonComponent | BtnAComponent | BtnInputComponent;
@@ -73,6 +73,10 @@ const Button = (props: Props): React.Node => {
     rootRef,
     to,
     onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
   } = props;
 
   const classes = cn(
@@ -98,6 +102,11 @@ const Button = (props: Props): React.Node => {
   const propsForAll = {
     className: classes,
     disabled: disabled,
+    onClick: onClick,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onPointerEnter: onPointerEnter,
+    onPointerLeave: onPointerLeave,
   };
 
   const childrenForAll = (
@@ -112,49 +121,29 @@ const Button = (props: Props): React.Node => {
   );
 
   if (!props.RootComponent || props.RootComponent === "button") {
-    const { type, value, onClick } = props;
+    const { type, value } = props;
     return (
-      <button
-        {...propsForAll}
-        type={type}
-        value={value}
-        onClick={onClick}
-        ref={rootRef}
-      >
+      <button {...propsForAll} type={type} value={value} ref={rootRef}>
         {childrenForAll}
       </button>
     );
   } else if (props.RootComponent === "input") {
-    const { type, value, onClick } = props;
+    const { type, value } = props;
 
-    return (
-      <input
-        {...propsForAll}
-        type={type}
-        value={value}
-        onClick={onClick}
-        ref={rootRef}
-      />
-    );
+    return <input {...propsForAll} type={type} value={value} ref={rootRef} />;
   } else if (props.RootComponent === "a") {
-    const { href, target, onClick } = props;
+    const { href, target } = props;
 
     return (
-      <a
-        {...propsForAll}
-        href={href}
-        target={target}
-        onClick={onClick}
-        ref={rootRef}
-      >
+      <a {...propsForAll} href={href} target={target} ref={rootRef}>
         {childrenForAll}
       </a>
     );
   } else {
     const Component: React.ElementType = props.RootComponent;
 
     return (
-      <Component {...propsForAll} to={to} onClick={onClick}>
+      <Component {...propsForAll} to={to}>
         {childrenForAll}
       </Component>
     );

src/flow/events/Animation.flow.js

@@ -0,0 +1,20 @@
+// @flow
+
+/**
+ * Type definitions for Animation EventHandling
+ */
+
+export type Animation = {|
+  /**
+   * Handle Animation Start
+   */
+  +onAnimationStart?: (event: SyntheticAnimationEvent<*>) => mixed,
+  /**
+   * Handle Animation End
+   */
+  +onAnimationEnd?: (event: SyntheticAnimationEvent<*>) => mixed,
+  /**
+   * Handle Animation Interation
+   */
+  +onAnimationIteration?: (event: SyntheticAnimationEvent<*>) => mixed,
+|};

src/flow/events/Clipboard.flow.js

@@ -0,0 +1,20 @@
+// @flow
+
+/**
+ * Type definitions for Clipboard EventHandling
+ */
+
+export type Clipboard = {|
+  /**
+   * Handle Copy Event
+   */
+  +onCopy?: (event: SyntheticClipboardEvent<*>) => mixed,
+  /**
+   * Handle Cut Event
+   */
+  +onCut?: (event: SyntheticClipboardEvent<*>) => mixed,
+  /**
+   * Handle Paste Event
+   */
+  +onPaste?: (event: SyntheticClipboardEvent<*>) => mixed,
+|};

src/flow/events/Composition.flow.js

@@ -0,0 +1,20 @@
+// @flow
+
+/**
+ * Type definitions for Composition EventHandling
+ */
+
+export type Composition = {|
+  /**
+   * Handle Composition Start
+   */
+  +onCompositionStart?: (event: SyntheticClipboardEvent<*>) => mixed,
+  /**
+   * Handle Composition End
+   */
+  +onCompositionEnd?: (event: SyntheticClipboardEvent<*>) => mixed,
+  /**
+   * Handle Composition Update
+   */
+  +onCompositionUpdate?: (event: SyntheticClipboardEvent<*>) => mixed,
+|};

src/flow/events/Focus.flow.js

@@ -0,0 +1,16 @@
+// @flow
+
+/**
+ * Type definitions for Focus EventHandling
+ */
+
+export type Focus = {|
+  /**
+   * Handle Blur Event
+   */
+  +onBlur?: (event: SyntheticFocusEvent<*>) => mixed,
+  /**
+   * Handle Focus Event
+   */
+  +onFocus?: (event: SyntheticFocusEvent<*>) => mixed,
+|};

src/flow/events/Form.flow.js

@@ -0,0 +1,24 @@
+// @flow
+
+/**
+ * Type definitions for Form EventHandling
+ */
+
+export type Form = {|
+  /**
+   * Handle Change Event
+   */
+  +onChange?: (event: SyntheticInputEvent<*>) => mixed,
+  /**
+   * Handle Input Event
+   */
+  +onInput?: (event: SyntheticInputEvent<*>) => mixed,
+  /**
+   * Handle Invalid Input Event
+   */
+  +onInvalid?: (event: SyntheticInputEvent<*>) => mixed,
+  /**
+   * Handle Form Submit Event
+   */
+  +onSubmit?: (event: SyntheticInputEvent<*>) => mixed,
+|};

src/flow/events/Image.flow.js

@@ -0,0 +1,16 @@
+// @flow
+
+/**
+ * Type definitions for Image EventHandling
+ */
+
+export type Image = {|
+  /**
+   * Handle Image Loading Event
+   */
+  +onLoad?: (event: SyntheticEvent<*>) => mixed,
+  /**
+   * Handle Image Error Event
+   */
+  +onError?: (event: SyntheticEvent<*>) => mixed,
+|};

src/flow/events/Keyboard.flow.js

@@ -0,0 +1,20 @@
+// @flow
+
+/**
+ * Type definitions for Keyboard EventHandling
+ */
+
+export type Keyboard = {|
+  /**
+   * Handle Key Down Event
+   */
+  +onKeyDown?: (event: SyntheticKeyboardEvent<*>) => mixed,
+  /**
+   * Handle Key Press Event
+   */
+  +onKeyPress?: (event: SyntheticKeyboardEvent<*>) => mixed,
+  /**
+   * Handle Key Up Event
+   */
+  +onKeyUp?: (event: SyntheticKeyboardEvent<*>) => mixed,
+|};