@unitedstatespowersquadrons/components 1.4.5-1 → 1.4.5-2

package/Admin/Impersonation.tsx

@@ -1,45 +1,28 @@
-import React, { useRef } from "react";
+import React, { useRef, useState } from "react";
 import { createUseStyles } from "react-jss";
-import classNames from "classnames";
 import AdminItem from "./AdminItem";
 import { AdminAction, Impersonation as ImpersonationType } from "./types";
 import ActionButton from "../ActionButton";
-import FontAwesomeIcon from "../FontAwesomeIcon";
 import IconButton from "../IconButton";
 import Styles from "../Styles";
 import { OnClickHandler, OnClickOrKeyboardHandler } from "../types";
 
 const useStyles = createUseStyles({
   button: { paddingRight: "0.75em !important" },
-  center: {
-    "& svg": { margin: "0 auto" },
-    justifyContent: "center",
-  },
   gray: { ...Styles.gray },
   impersonation: {
+    alignItems: "center",
     animation: "300ms ease-in",
     display: "flex",
     flexDirection: "column",
     gap: "0.25em",
     paddingBottom: "0.5em",
+    width: "100%",
   },
-  inactive: {
-    "& > div": {
-      display: "none",
-      opacity: "0",
-      transition: "opacity 0.5s ease-in-out",
-    },
-    "& > svg": { display: "block" },
-    "&:hover > div": {
-      display: "flex",
-      opacity: "1",
-    },
-    "&:hover > svg": { display: "none" },
-  },
-  left: { textAlign: "left" },
-  viewAsIcon: {
+  triggerIcon: {
+    "&:hover": { ...Styles.hover.purple },
     ...Styles.purple,
-    fontSize: "2em",
+    fontSize: "2em !important",
   },
   viewingAsIcon: {
     "&:hover": { ...Styles.hover.red },
@@ -62,6 +45,7 @@ const buildImpersonation = (hooks: Hooks) => {
     const classes = useStyles();
 
     const inputRef = useRef<HTMLInputElement>(null);
+    const [expanded, setExpanded] = useState(false);
 
     const handleImpersonate: OnClickOrKeyboardHandler = event => {
       if ("key" in event && event.key !== "Enter") { return; }
@@ -73,10 +57,13 @@ const buildImpersonation = (hooks: Hooks) => {
       dispatch({ certificate, type: "impersonate" });
     };
 
-    const handleCancel: OnClickHandler = () => {
+    const handleCancelImpersonation: OnClickHandler = () => {
       dispatch({ type: "cancelImpersonation" });
     };
 
+    const handleExpand: OnClickHandler = () => setExpanded(true);
+    const handleCollapse: OnClickHandler = () => setExpanded(false);
+
     if (impersonation) {
       const { certificate, name } = impersonation;
 
@@ -87,7 +74,7 @@ const buildImpersonation = (hooks: Hooks) => {
             className={classes.viewingAsIcon}
             icon="user-group"
             mode="duotone"
-            onClick={handleCancel}
+            onClick={handleCancelImpersonation}
             title="Cancel Impersonation"
           />
           <div>{name}</div>
@@ -96,18 +83,32 @@ const buildImpersonation = (hooks: Hooks) => {
       );
     }
 
-    const collapsed = (
-      <FontAwesomeIcon
-        css={classes.viewAsIcon}
-        icon="user-group"
-        mode="duotone"
-      />
-    );
+    if (!expanded) {
+      return(
+        <AdminItem key="collapsed">
+          <IconButton
+            className={classes.triggerIcon}
+            color="purple"
+            icon="user-group"
+            mode="duotone"
+            onClick={handleExpand}
+            title="Impersonate Member"
+          />
+        </AdminItem>
+      );
+    }
 
-    const expanded = (
-      <div className={classNames(classes.impersonation, classes.center)}>
+    return(
+      <AdminItem className={classes.impersonation} key="expanded">
         <div className="bold">View As:</div>
-        <FontAwesomeIcon css={classes.viewAsIcon} icon="user-group" mode="duotone" />
+        <IconButton
+          className={classes.triggerIcon}
+          color="purple"
+          icon="user-group"
+          mode="duotone"
+          onClick={handleCollapse}
+          title="Collapse"
+        />
         <input
           maxLength={7}
           onKeyDown={handleImpersonate}
@@ -124,13 +125,6 @@ const buildImpersonation = (hooks: Hooks) => {
           size="small"
           text="Impersonate"
         />
-      </div>
-    );
-
-    return(
-      <AdminItem className={classes.inactive}>
-        {collapsed}
-        {expanded}
       </AdminItem>
     );
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unitedstatespowersquadrons/components",
-  "version": "1.4.5-1",
+  "version": "1.4.5-2",
   "description": "USPS shared React components library",
   "main": "index.tsx",
   "scripts": {