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 = { inheritColour: false, + inline: false, inverted: false, monospaced: false, selected: true, @@ -68,6 +70,7 @@ const BodyText: FC = ({ 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 = ({ text = BODY_TEXT_DEFAULT_PROPS.text, ...muiTypographyRestProps }) => { + const sxDisplay = useMemo( + () => (isInline ? 'inline' : undefined), + [isInline], + ); + const baseClassName = useMemo( () => buildBodyTextClasses({ @@ -89,30 +97,30 @@ const BodyText: FC = ({ return ( {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 = ({ children, + inline: isInline = false, monospaced: isMonospaced = false, revealInitially: isRevealInitially = false, textProps, }) => { const [isReveal, setIsReveal] = useState(isRevealInitially); + const clickEventHandler = useCallback(() => { + setIsReveal((previous) => !previous); + }, []); + + const textSxLineHeight = useMemo( + () => (isInline ? undefined : 2.8), + [isInline], + ); + const textElementType = useMemo( () => (isMonospaced ? MonoText : BodyText), [isMonospaced], @@ -27,7 +60,7 @@ const SensitiveText: FC = ({ textElementType, { sx: { - lineHeight: 2.8, + lineHeight: textSxLineHeight, maxWidth: '20em', overflowY: 'scroll', whiteSpace: 'nowrap', @@ -38,27 +71,43 @@ const SensitiveText: FC = ({ ) : children; } else { - content = createElement(textElementType, textProps, '*****'); + content = createElement( + textElementType, + { + sx: { + lineHeight: textSxLineHeight, + }, + ...textProps, + }, + '*****', + ); } return content; - }, [children, isReveal, textElementType, textProps]); - - return ( - - {contentElement} - { - setIsReveal((previous) => !previous); - }} - state={String(isReveal)} - sx={{ marginRight: '-.2em', padding: '.2em' }} - variant="normal" - /> - + }, [children, isReveal, textElementType, textProps, textSxLineHeight]); + const rootElement = useMemo( + () => + isInline ? ( + + {contentElement} + + ) : ( + + {contentElement} + + + ), + [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;