From ea50874169f9a42d518d50aefad20d548fe988a0 Mon Sep 17 00:00:00 2001
From: Greg Hamel <hamegreg@gmail.com>
Date: Wed, 27 Jun 2018 17:06:19 -0400
Subject: [PATCH 1/6] feat(Tag): Add Event Handlers

fix #248
---
 src/components/Tag/Tag.react.js      | 34 ++++++++++++++++++--
 src/components/Tag/TagAddOn.react.js | 47 ++++++++++++++++++++++++----
 2 files changed, 72 insertions(+), 9 deletions(-)

diff --git a/src/components/Tag/Tag.react.js b/src/components/Tag/Tag.react.js
index cc252786..84037daa 100644
--- a/src/components/Tag/Tag.react.js
+++ b/src/components/Tag/Tag.react.js
@@ -5,7 +5,12 @@ import cn from "classnames";
 import TagList from "./TagList.react";
 import TagAddOn from "./TagAddOn.react";
 
+import type { MouseEvents, PointerEvents, FocusEvents } from "../../";
+
 type PropsForAll = {|
+  ...MouseEvents,
+  ...PointerEvents,
+  ...FocusEvents,
   +children?: React.Node,
   +className?: string,
   +rounded?: boolean,
@@ -46,7 +51,15 @@ function Tag(props: Props): React.Node {
     addOn,
     addOnIcon,
     addOnColor,
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
+    onBlur,
   } = props;
+
   const classes = cn(
     {
       tag: true,
@@ -56,6 +69,17 @@ function Tag(props: Props): React.Node {
     },
     className
   );
+
+  const eventProps = {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
+    onBlur,
+  };
+
   const childrenForAll = (
     <React.Fragment>
       {avatar && (
@@ -77,7 +101,7 @@ function Tag(props: Props): React.Node {
   if (props.RootComponent) {
     const { RootComponent: Component, to } = props;
     return (
-      <Component className={classes} to={to}>
+      <Component className={classes} to={to} {...eventProps}>
         {childrenForAll}
       </Component>
     );
@@ -86,13 +110,17 @@ function Tag(props: Props): React.Node {
   if (props.link) {
     const { href } = props;
     return (
-      <a className={classes} href={href}>
+      <a className={classes} href={href} {...eventProps}>
         {childrenForAll}
       </a>
     );
   }
 
-  return <span className={classes}>{childrenForAll}</span>;
+  return (
+    <span className={classes} {...eventProps}>
+      {childrenForAll}
+    </span>
+  );
 }
 
 Tag.displayName = "Tag";
diff --git a/src/components/Tag/TagAddOn.react.js b/src/components/Tag/TagAddOn.react.js
index c675931d..e36b28a6 100644
--- a/src/components/Tag/TagAddOn.react.js
+++ b/src/components/Tag/TagAddOn.react.js
@@ -4,7 +4,12 @@ import * as React from "react";
 import cn from "classnames";
 import { Icon } from "../";
 
+import type { MouseEvents, PointerEvents, FocusEvents } from "../../";
+
 type PropsForAll = {|
+  ...MouseEvents,
+  ...PointerEvents,
+  ...FocusEvents,
   +children?: React.Node,
   +className?: string,
   +icon?: string,
@@ -17,7 +22,6 @@ type PropsForLink = {|
   ...PropsForAll,
   link: true,
   +href?: string,
-  +onClick?: (event: SyntheticMouseEvent<HTMLLinkElement>) => mixed,
 |};
 
 type PropsForReactRouter = {|
@@ -29,9 +33,32 @@ type PropsForReactRouter = {|
 type Props = DefaultProps | PropsForLink | PropsForReactRouter;
 
 function TagAddOn(props: Props): React.Node {
-  const { children, className, icon, color = "" } = props;
+  const {
+    children,
+    className,
+    icon,
+    color = "",
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
+    onBlur,
+  } = props;
+
   const classes = cn("tag-addon", { [`tag-${color}`]: color }, className);
 
+  const eventProps = {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
+    onBlur,
+  };
+
   const childrenForAll = (
     <React.Fragment>
       {icon && <Icon name={icon} />}
@@ -40,9 +67,9 @@ function TagAddOn(props: Props): React.Node {
   );
 
   if (props.link) {
-    const { href, onClick } = props;
+    const { href } = props;
     return (
-      <a className={classes} href={href} onClick={onClick}>
+      <a className={classes} href={href} {...eventProps}>
         {childrenForAll}
       </a>
     );
@@ -50,10 +77,18 @@ function TagAddOn(props: Props): React.Node {
 
   if (props.RootComponent) {
     const { RootComponent: Component, to } = props;
-    return <Component to={to}>{childrenForAll}</Component>;
+    return (
+      <Component to={to} {...eventProps}>
+        {childrenForAll}
+      </Component>
+    );
   }
 
-  return <span className={classes}>{childrenForAll}</span>;
+  return (
+    <span className={classes} {...eventProps}>
+      {childrenForAll}
+    </span>
+  );
 }
 
 TagAddOn.displayName = "Tag.AddOn";

From fa0afcf9e45f10dbbbe9ef5d7d24eef7d310cc34 Mon Sep 17 00:00:00 2001
From: Greg Hamel <hamegreg@gmail.com>
Date: Wed, 27 Jun 2018 17:07:04 -0400
Subject: [PATCH 2/6] feat(Icon): Add Event Handlers

fix #249
---
 src/components/Icon/Icon.react.js | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/src/components/Icon/Icon.react.js b/src/components/Icon/Icon.react.js
index bcaeb4fb..4b3ab321 100644
--- a/src/components/Icon/Icon.react.js
+++ b/src/components/Icon/Icon.react.js
@@ -3,7 +3,12 @@
 import * as React from "react";
 import cn from "classnames";
 
+import type { MouseEvents, PointerEvents, FocusEvents } from "../../";
+
 type Props = {|
+  ...MouseEvents,
+  ...PointerEvents,
+  ...FocusEvents,
   +className?: string,
   /**
    * Should this icon be rendered within an <a> tag
@@ -40,6 +45,13 @@ function Icon({
   isAriaHidden,
   payment,
   flag,
+  onClick,
+  onMouseEnter,
+  onMouseLeave,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
 }: Props): React.Node {
   const prefix = (payment && "payment") || (flag && "flag") || prefixFromProps;
   const classes = cn(
@@ -55,10 +67,20 @@ function Icon({
       }
     : null;
 
+  const eventProps = {
+    onClick,
+    onMouseEnter,
+    onMouseLeave,
+    onPointerEnter,
+    onPointerLeave,
+    onFocus,
+    onBlur,
+  };
+
   return !link ? (
-    <i className={classes} />
+    <i className={classes} {...eventProps} />
   ) : (
-    <a className="icon" {...extraProps}>
+    <a className="icon" {...extraProps} {...eventProps}>
       <i className={classes} />
     </a>
   );

From c2c648dc45b8c33eb899db86b68dede9c49d8d1a Mon Sep 17 00:00:00 2001
From: Greg Hamel <hamegreg@gmail.com>
Date: Wed, 27 Jun 2018 17:35:25 -0400
Subject: [PATCH 3/6] feat(Tag): Add onDelete and addOnOnClick EventHandlers

fix #248
---
 src/components/Tag/Tag.react.js | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/Tag/Tag.react.js b/src/components/Tag/Tag.react.js
index 84037daa..887c0652 100644
--- a/src/components/Tag/Tag.react.js
+++ b/src/components/Tag/Tag.react.js
@@ -20,6 +20,8 @@ type PropsForAll = {|
   +addOn?: React.Node,
   +addOnIcon?: string,
   +addOnColor?: string,
+  +onDelete?: Function,
+  +addOnOnClick?: Function,
 |};
 
 type DefaultProps = {|
@@ -58,6 +60,8 @@ function Tag(props: Props): React.Node {
     onPointerLeave,
     onFocus,
     onBlur,
+    onDelete,
+    addOnOnClick,
   } = props;
 
   const classes = cn(
@@ -90,11 +94,11 @@ function Tag(props: Props): React.Node {
       )}
       {children}
       {(addOn || addOnIcon) && (
-        <TagAddOn icon={addOnIcon} color={addOnColor}>
+        <TagAddOn icon={addOnIcon} color={addOnColor} onClick={addOnOnClick}>
           {addOn}
         </TagAddOn>
       )}
-      {remove && <TagAddOn link icon="x" />}
+      {remove && <TagAddOn onClick={onDelete} link icon="x" />}
     </React.Fragment>
   );
 

From 61786399d1be51dcd6b033865a48b34768be6cf2 Mon Sep 17 00:00:00 2001
From: Greg Hamel <hamegreg@gmail.com>
Date: Thu, 28 Jun 2018 15:25:02 -0400
Subject: [PATCH 4/6] refactor(Tag): Rename Addons Event Handlers

---
 src/components/Tag/Tag.react.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/Tag/Tag.react.js b/src/components/Tag/Tag.react.js
index 887c0652..432b1a9b 100644
--- a/src/components/Tag/Tag.react.js
+++ b/src/components/Tag/Tag.react.js
@@ -17,11 +17,11 @@ type PropsForAll = {|
   +color?: string,
   +avatar?: string,
   +remove?: boolean,
+  +onRemoveClick?: Function,
   +addOn?: React.Node,
   +addOnIcon?: string,
   +addOnColor?: string,
-  +onDelete?: Function,
-  +addOnOnClick?: Function,
+  +onAddOnClick?: Function,
 |};
 
 type DefaultProps = {|
@@ -60,8 +60,8 @@ function Tag(props: Props): React.Node {
     onPointerLeave,
     onFocus,
     onBlur,
-    onDelete,
-    addOnOnClick,
+    onRemoveClick,
+    onAddOnClick,
   } = props;
 
   const classes = cn(
@@ -94,11 +94,11 @@ function Tag(props: Props): React.Node {
       )}
       {children}
       {(addOn || addOnIcon) && (
-        <TagAddOn icon={addOnIcon} color={addOnColor} onClick={addOnOnClick}>
+        <TagAddOn icon={addOnIcon} color={addOnColor} onClick={onAddOnClick}>
           {addOn}
         </TagAddOn>
       )}
-      {remove && <TagAddOn onClick={onDelete} link icon="x" />}
+      {remove && <TagAddOn onClick={onRemoveClick} link icon="x" />}
     </React.Fragment>
   );
 

From f557fe8010fa2bef0862901cd67f14aeb95f1f2d Mon Sep 17 00:00:00 2001
From: Greg Hamel <hamegreg@gmail.com>
Date: Fri, 29 Jun 2018 13:34:09 -0400
Subject: [PATCH 5/6] feat(Tag): Add default onRemoveClick Deletion

If no onRemoveClick is provided, the `<Tag>` will automatically be removed when `onRemove` addOn is
clicked.
---
 src/components/Tag/Tag.react.js | 185 ++++++++++++++++++--------------
 1 file changed, 105 insertions(+), 80 deletions(-)

diff --git a/src/components/Tag/Tag.react.js b/src/components/Tag/Tag.react.js
index 432b1a9b..05f474b4 100644
--- a/src/components/Tag/Tag.react.js
+++ b/src/components/Tag/Tag.react.js
@@ -42,94 +42,119 @@ type ReactRouterProps = {|
 
 type Props = DefaultProps | LinkComponentProps | ReactRouterProps;
 
-function Tag(props: Props): React.Node {
-  const {
-    children,
-    className,
-    rounded,
-    color = "",
-    avatar,
-    remove,
-    addOn,
-    addOnIcon,
-    addOnColor,
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    onPointerEnter,
-    onPointerLeave,
-    onFocus,
-    onBlur,
-    onRemoveClick,
-    onAddOnClick,
-  } = props;
-
-  const classes = cn(
-    {
-      tag: true,
-      expanded: true,
-      "tag-rounded": rounded,
-      [`tag-${color}`]: color,
-    },
-    className
-  );
-
-  const eventProps = {
-    onClick,
-    onMouseEnter,
-    onMouseLeave,
-    onPointerEnter,
-    onPointerLeave,
-    onFocus,
-    onBlur,
+type State = {|
+  isDeleted: boolean,
+|};
+
+class Tag extends React.Component<Props, State> {
+  state = {
+    isDeleted: false,
   };
 
-  const childrenForAll = (
-    <React.Fragment>
-      {avatar && (
-        <span
-          class="tag-avatar avatar"
-          style={{ backgroundImage: `url(${avatar})` }}
-        />
-      )}
-      {children}
-      {(addOn || addOnIcon) && (
-        <TagAddOn icon={addOnIcon} color={addOnColor} onClick={onAddOnClick}>
-          {addOn}
-        </TagAddOn>
-      )}
-      {remove && <TagAddOn onClick={onRemoveClick} link icon="x" />}
-    </React.Fragment>
-  );
-
-  if (props.RootComponent) {
-    const { RootComponent: Component, to } = props;
-    return (
-      <Component className={classes} to={to} {...eventProps}>
-        {childrenForAll}
-      </Component>
+  static List = TagList;
+  static AddOn = TagAddOn;
+
+  handleOnRemoveClick = (): void => {
+    this.setState(s => ({
+      isDeleted: true,
+    }));
+  };
+
+  render(): React.Node {
+    const {
+      children,
+      className,
+      rounded,
+      color = "",
+      avatar,
+      remove,
+      addOn,
+      addOnIcon,
+      addOnColor,
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onPointerEnter,
+      onPointerLeave,
+      onFocus,
+      onBlur,
+      onRemoveClick,
+      onAddOnClick,
+    } = this.props;
+
+    const classes = cn(
+      {
+        tag: true,
+        expanded: true,
+        "tag-rounded": rounded,
+        [`tag-${color}`]: color,
+      },
+      className
     );
-  }
 
-  if (props.link) {
-    const { href } = props;
+    const eventProps = {
+      onClick,
+      onMouseEnter,
+      onMouseLeave,
+      onPointerEnter,
+      onPointerLeave,
+      onFocus,
+      onBlur,
+    };
+
+    if (this.state.isDeleted) {
+      console.log("Deleted");
+      return null;
+    }
+
+    const childrenForAll = (
+      <React.Fragment>
+        {avatar && (
+          <span
+            class="tag-avatar avatar"
+            style={{ backgroundImage: `url(${avatar})` }}
+          />
+        )}
+        {children}
+        {(addOn || addOnIcon) && (
+          <TagAddOn icon={addOnIcon} color={addOnColor} onClick={onAddOnClick}>
+            {addOn}
+          </TagAddOn>
+        )}
+        {remove && onRemoveClick ? (
+          <TagAddOn onClick={onRemoveClick} link icon="x" />
+        ) : (
+          remove && (
+            <TagAddOn onClick={this.handleOnRemoveClick} link icon="x" />
+          )
+        )}
+      </React.Fragment>
+    );
+
+    if (this.props.RootComponent) {
+      const { to } = this.props;
+      return (
+        <React.Component className={classes} to={to} {...eventProps}>
+          {childrenForAll}
+        </React.Component>
+      );
+    }
+
+    if (this.props.link) {
+      const { href } = this.props;
+      return (
+        <a className={classes} href={href} {...eventProps}>
+          {childrenForAll}
+        </a>
+      );
+    }
+
     return (
-      <a className={classes} href={href} {...eventProps}>
+      <span className={classes} {...eventProps}>
         {childrenForAll}
-      </a>
+      </span>
     );
   }
-
-  return (
-    <span className={classes} {...eventProps}>
-      {childrenForAll}
-    </span>
-  );
 }
 
-Tag.displayName = "Tag";
-
-Tag.List = TagList;
-Tag.AddOn = TagAddOn;
-
 export default Tag;

From f1f860c0af5dabeb8cd6a0edbb57e9363bf28a43 Mon Sep 17 00:00:00 2001
From: Greg Hamel <hamegreg@gmail.com>
Date: Fri, 29 Jun 2018 13:38:52 -0400
Subject: [PATCH 6/6] chore(Tag): Remove debugging console.log

---
 src/components/Tag/Tag.react.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Tag/Tag.react.js b/src/components/Tag/Tag.react.js
index 05f474b4..6a3809f6 100644
--- a/src/components/Tag/Tag.react.js
+++ b/src/components/Tag/Tag.react.js
@@ -103,7 +103,6 @@ class Tag extends React.Component<Props, State> {
     };
 
     if (this.state.isDeleted) {
-      console.log("Deleted");
       return null;
     }