From 3621e0a56d6b02d4321d80412ef9d584fff5d5d0 Mon Sep 17 00:00:00 2001
From: Dylan <48745406+dylandbl@users.noreply.github.com>
Date: Fri, 15 Jul 2022 00:47:05 -0600
Subject: [PATCH] refactor!: standardized naming (#23)

* chore: minor version bump
---
 package.json                                     |  2 +-
 .../ReactionPopover/ReactionPopover.tsx          |  4 ++--
 src/index.tsx                                    | 16 ++++++++--------
 src/styles/RqrStyles.ts                          |  2 +-
 src/types/index.ts                               |  2 +-
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/package.json b/package.json
index b628475..db99b0e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-quick-reactions",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "description": "A popup emoji-reaction component for React.",
   "private": false,
   "main": "./lib/cjs/index.js",
diff --git a/src/components/ReactionPopover/ReactionPopover.tsx b/src/components/ReactionPopover/ReactionPopover.tsx
index 74cc34d..4fc5647 100644
--- a/src/components/ReactionPopover/ReactionPopover.tsx
+++ b/src/components/ReactionPopover/ReactionPopover.tsx
@@ -13,7 +13,7 @@ import { CloseSvg } from "../svg/CloseSvg";
 export const ReactionPopover = (props: PopoverProps) => {
   const {
     isVisible = false,
-    onClickEmoji,
+    onClickReaction,
     closeButton,
     header = "Quick reactions",
     outerDivClassName,
@@ -66,7 +66,7 @@ export const ReactionPopover = (props: PopoverProps) => {
               className={"rqr-reaction-element " + reactionElementClassName}
               key={item?.name + "-" + index}
               id={item?.id}
-              onClick={(e) => onClickEmoji(e.target as Element)}
+              onClick={(e) => onClickReaction(e.target as Element)}
               onMouseEnter={
                 changeHeaderOnReactionElemHover
                   ? () => setPopoverHeader(item?.name)
diff --git a/src/index.tsx b/src/index.tsx
index 6de551a..942733e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,20 +1,20 @@
 import { ReactNode } from "react";
 import { ReactionPopover } from "./components/ReactionPopover/ReactionPopover";
-import { RQRSpan } from "./styles/RqrStyles";
+import { QuickReactionsSpan } from "./styles/RqrStyles";
 import { PopoverProps } from "./types";
 
-interface RQRProps extends PopoverProps {
+interface QuickReactionsProps extends PopoverProps {
   trigger: ReactNode;
 }
-const RQR = (props: RQRProps) => {
-  const { trigger } = props;
+const QuickReactions = (props: QuickReactionsProps) => {
+  const { trigger, isVisible } = props;
 
   return (
-    <RQRSpan>
+    <QuickReactionsSpan>
       {trigger}
-      <ReactionPopover {...props} />
-    </RQRSpan>
+      {isVisible && <ReactionPopover {...props} />}
+    </QuickReactionsSpan>
   );
 };
 
-export default RQR;
+export default QuickReactions;
diff --git a/src/styles/RqrStyles.ts b/src/styles/RqrStyles.ts
index 133b108..a82f476 100644
--- a/src/styles/RqrStyles.ts
+++ b/src/styles/RqrStyles.ts
@@ -1,6 +1,6 @@
 import styled from "@emotion/styled";
 
-export const RQRSpan = styled.span`
+export const QuickReactionsSpan = styled.span`
   display: inline-block;
   position: relative;
 `;
diff --git a/src/types/index.ts b/src/types/index.ts
index 1b90411..c342f6a 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -14,7 +14,7 @@ export interface PopoverProps {
   hideCloseButton?: boolean;
   hideHeader?: boolean;
   isVisible: boolean;
-  onClickEmoji: (event?: Element) => void;
+  onClickReaction: (event?: Element) => void;
   onClose: () => void;
   outerDivClassName?: string;
   reactionElementClassName?: string;