From 472f634a0054382976012fa29d831430feaf731f Mon Sep 17 00:00:00 2001
From: Tsu-ba-me <ynho.li.aa.e@gmail.com>
Date: Tue, 28 Feb 2023 16:08:22 -0500
Subject: [PATCH] fix(striker-ui): add inline type SensitiveText and BodyText

---
 striker-ui/components/Text/BodyText.tsx      | 54 ++++++------
 striker-ui/components/Text/SensitiveText.tsx | 87 +++++++++++++++-----
 striker-ui/lib/consts/DEFAULT_THEME.ts       |  1 +
 striker-ui/types/SensitiveText.d.ts          |  1 +
 4 files changed, 101 insertions(+), 42 deletions(-)

diff --git a/striker-ui/components/Text/BodyText.tsx b/striker-ui/components/Text/BodyText.tsx
index 8fef39e9..434727ed 100644
--- a/striker-ui/components/Text/BodyText.tsx
+++ b/striker-ui/components/Text/BodyText.tsx
@@ -8,6 +8,7 @@ import { BLACK, TEXT, UNSELECTED } from '../../lib/consts/DEFAULT_THEME';
 
 type BodyTextOptionalProps = {
   inheritColour?: boolean;
+  inline?: boolean;
   inverted?: boolean;
   monospaced?: boolean;
   selected?: boolean;
@@ -20,6 +21,7 @@ const BODY_TEXT_CLASS_PREFIX = 'BodyText';
 
 const BODY_TEXT_DEFAULT_PROPS: Required<BodyTextOptionalProps> = {
   inheritColour: false,
+  inline: false,
   inverted: false,
   monospaced: false,
   selected: true,
@@ -68,6 +70,7 @@ const BodyText: FC<BodyTextProps> = ({
   children,
   className,
   inheritColour: isInheritColour = BODY_TEXT_DEFAULT_PROPS.inheritColour,
+  inline: isInline = BODY_TEXT_DEFAULT_PROPS.inline,
   inverted: isInvert = BODY_TEXT_DEFAULT_PROPS.inverted,
   monospaced: isMonospace = BODY_TEXT_DEFAULT_PROPS.monospaced,
   selected: isSelect = BODY_TEXT_DEFAULT_PROPS.selected,
@@ -75,6 +78,11 @@ const BodyText: FC<BodyTextProps> = ({
   text = BODY_TEXT_DEFAULT_PROPS.text,
   ...muiTypographyRestProps
 }) => {
+  const sxDisplay = useMemo<string | undefined>(
+    () => (isInline ? 'inline' : undefined),
+    [isInline],
+  );
+
   const baseClassName = useMemo(
     () =>
       buildBodyTextClasses({
@@ -89,30 +97,30 @@ const BodyText: FC<BodyTextProps> = ({
 
   return (
     <MUITypography
-      {...{
-        className: `${baseClassName} ${className}`,
-        variant: 'subtitle1',
-        ...muiTypographyRestProps,
-        sx: {
-          [`&.${BODY_TEXT_CLASSES.inverted}`]: {
-            color: BLACK,
-          },
-
-          [`&.${BODY_TEXT_CLASSES.monospaced}`]: {
-            fontFamily: 'Source Code Pro',
-            fontWeight: 400,
-          },
-
-          [`&.${BODY_TEXT_CLASSES.selected}`]: {
-            color: TEXT,
-          },
-
-          [`&.${BODY_TEXT_CLASSES.unselected}`]: {
-            color: UNSELECTED,
-          },
-
-          ...sx,
+      className={`${baseClassName} ${className}`}
+      variant="subtitle1"
+      {...muiTypographyRestProps}
+      sx={{
+        display: sxDisplay,
+
+        [`&.${BODY_TEXT_CLASSES.inverted}`]: {
+          color: BLACK,
         },
+
+        [`&.${BODY_TEXT_CLASSES.monospaced}`]: {
+          fontFamily: 'Source Code Pro',
+          fontWeight: 400,
+        },
+
+        [`&.${BODY_TEXT_CLASSES.selected}`]: {
+          color: TEXT,
+        },
+
+        [`&.${BODY_TEXT_CLASSES.unselected}`]: {
+          color: UNSELECTED,
+        },
+
+        ...sx,
       }}
     >
       {content}
diff --git a/striker-ui/components/Text/SensitiveText.tsx b/striker-ui/components/Text/SensitiveText.tsx
index 16aa3509..2d1ca11c 100644
--- a/striker-ui/components/Text/SensitiveText.tsx
+++ b/striker-ui/components/Text/SensitiveText.tsx
@@ -1,18 +1,51 @@
-import { createElement, FC, ReactNode, useMemo, useState } from 'react';
+import { Button, styled } from '@mui/material';
+import {
+  createElement,
+  FC,
+  ReactElement,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useState,
+} from 'react';
+
+import { BORDER_RADIUS, EERIE_BLACK } from '../../lib/consts/DEFAULT_THEME';
 
 import BodyText from './BodyText';
 import FlexBox from '../FlexBox';
 import IconButton from '../IconButton';
 import MonoText from './MonoText';
 
+const InlineButton = styled(Button)({
+  backgroundColor: EERIE_BLACK,
+  borderRadius: BORDER_RADIUS,
+  minWidth: 'initial',
+  padding: '0 .6em',
+  textTransform: 'none',
+
+  ':hover': {
+    backgroundColor: `${EERIE_BLACK}F0`,
+  },
+});
+
 const SensitiveText: FC<SensitiveTextProps> = ({
   children,
+  inline: isInline = false,
   monospaced: isMonospaced = false,
   revealInitially: isRevealInitially = false,
   textProps,
 }) => {
   const [isReveal, setIsReveal] = useState<boolean>(isRevealInitially);
 
+  const clickEventHandler = useCallback(() => {
+    setIsReveal((previous) => !previous);
+  }, []);
+
+  const textSxLineHeight = useMemo<number | string | undefined>(
+    () => (isInline ? undefined : 2.8),
+    [isInline],
+  );
+
   const textElementType = useMemo(
     () => (isMonospaced ? MonoText : BodyText),
     [isMonospaced],
@@ -27,7 +60,7 @@ const SensitiveText: FC<SensitiveTextProps> = ({
               textElementType,
               {
                 sx: {
-                  lineHeight: 2.8,
+                  lineHeight: textSxLineHeight,
                   maxWidth: '20em',
                   overflowY: 'scroll',
                   whiteSpace: 'nowrap',
@@ -38,27 +71,43 @@ const SensitiveText: FC<SensitiveTextProps> = ({
             )
           : children;
     } else {
-      content = createElement(textElementType, textProps, '*****');
+      content = createElement(
+        textElementType,
+        {
+          sx: {
+            lineHeight: textSxLineHeight,
+          },
+          ...textProps,
+        },
+        '*****',
+      );
     }
 
     return content;
-  }, [children, isReveal, textElementType, textProps]);
-
-  return (
-    <FlexBox row spacing=".5em">
-      {contentElement}
-      <IconButton
-        edge="end"
-        mapPreset="visibility"
-        onClick={() => {
-          setIsReveal((previous) => !previous);
-        }}
-        state={String(isReveal)}
-        sx={{ marginRight: '-.2em', padding: '.2em' }}
-        variant="normal"
-      />
-    </FlexBox>
+  }, [children, isReveal, textElementType, textProps, textSxLineHeight]);
+  const rootElement = useMemo<ReactElement>(
+    () =>
+      isInline ? (
+        <InlineButton onClick={clickEventHandler}>
+          {contentElement}
+        </InlineButton>
+      ) : (
+        <FlexBox row spacing=".5em">
+          {contentElement}
+          <IconButton
+            edge="end"
+            mapPreset="visibility"
+            onClick={clickEventHandler}
+            state={String(isReveal)}
+            sx={{ marginRight: '-.2em', padding: '.2em' }}
+            variant="normal"
+          />
+        </FlexBox>
+      ),
+    [clickEventHandler, contentElement, isInline, isReveal],
   );
+
+  return rootElement;
 };
 
 export default SensitiveText;
diff --git a/striker-ui/lib/consts/DEFAULT_THEME.ts b/striker-ui/lib/consts/DEFAULT_THEME.ts
index 6c0b27c4..e226100f 100644
--- a/striker-ui/lib/consts/DEFAULT_THEME.ts
+++ b/striker-ui/lib/consts/DEFAULT_THEME.ts
@@ -13,6 +13,7 @@ export const DIVIDER = '#888';
 export const SELECTED_ANVIL = '#00ff00';
 export const DISABLED = '#AAA';
 export const BLACK = '#343434';
+export const EERIE_BLACK = '#1F1F1F';
 // TODO: remove when old icons are completely replaced.
 export const OLD_ICON = '#9da2a7';
 
diff --git a/striker-ui/types/SensitiveText.d.ts b/striker-ui/types/SensitiveText.d.ts
index 2a7921cb..65081fa5 100644
--- a/striker-ui/types/SensitiveText.d.ts
+++ b/striker-ui/types/SensitiveText.d.ts
@@ -1,4 +1,5 @@
 type SensitiveTextOptionalProps = {
+  inline?: boolean;
   monospaced?: boolean;
   revealInitially?: boolean;
   textProps?: import('../components/Text').BodyTextProps;