|
|
@ -32,7 +32,9 @@ const SensitiveText: FC<SensitiveTextProps> = ({ |
|
|
|
children, |
|
|
|
children, |
|
|
|
inline: isInline = false, |
|
|
|
inline: isInline = false, |
|
|
|
monospaced: isMonospaced = false, |
|
|
|
monospaced: isMonospaced = false, |
|
|
|
|
|
|
|
revealButtonProps, |
|
|
|
revealInitially: isRevealInitially = false, |
|
|
|
revealInitially: isRevealInitially = false, |
|
|
|
|
|
|
|
textLineHeight = 2.8, |
|
|
|
textProps, |
|
|
|
textProps, |
|
|
|
}) => { |
|
|
|
}) => { |
|
|
|
const [isReveal, setIsReveal] = useState<boolean>(isRevealInitially); |
|
|
|
const [isReveal, setIsReveal] = useState<boolean>(isRevealInitially); |
|
|
@ -42,8 +44,8 @@ const SensitiveText: FC<SensitiveTextProps> = ({ |
|
|
|
}, []); |
|
|
|
}, []); |
|
|
|
|
|
|
|
|
|
|
|
const textSxLineHeight = useMemo<number | string | undefined>( |
|
|
|
const textSxLineHeight = useMemo<number | string | undefined>( |
|
|
|
() => (isInline ? undefined : 2.8), |
|
|
|
() => (isInline ? undefined : textLineHeight || undefined), |
|
|
|
[isInline], |
|
|
|
[isInline, textLineHeight], |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
const textElementType = useMemo( |
|
|
|
const textElementType = useMemo( |
|
|
@ -101,10 +103,11 @@ const SensitiveText: FC<SensitiveTextProps> = ({ |
|
|
|
state={String(isReveal)} |
|
|
|
state={String(isReveal)} |
|
|
|
sx={{ marginRight: '-.2em', padding: '.2em' }} |
|
|
|
sx={{ marginRight: '-.2em', padding: '.2em' }} |
|
|
|
variant="normal" |
|
|
|
variant="normal" |
|
|
|
|
|
|
|
{...revealButtonProps} |
|
|
|
/> |
|
|
|
/> |
|
|
|
</FlexBox> |
|
|
|
</FlexBox> |
|
|
|
), |
|
|
|
), |
|
|
|
[clickEventHandler, contentElement, isInline, isReveal], |
|
|
|
[clickEventHandler, contentElement, revealButtonProps, isInline, isReveal], |
|
|
|
); |
|
|
|
); |
|
|
|
|
|
|
|
|
|
|
|
return rootElement; |
|
|
|
return rootElement; |
|
|
|