Don't omit the key-value pair if the value is false in EntryTableSection (#478)

This commit is contained in:
M. Mert Yıldıran 2021-11-17 15:02:23 +03:00 committed by GitHub
parent 18be46809e
commit bb85312b9f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 6 additions and 7 deletions

View File

@ -15,7 +15,7 @@ interface EntryViewLineProps {
} }
const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery, selector, overrideQueryValue}) => { const EntryViewLine: React.FC<EntryViewLineProps> = ({label, value, updateQuery, selector, overrideQueryValue}) => {
return (label && value && <tr className={styles.dataLine}> return (label && <tr className={styles.dataLine}>
<td <td
className={`queryable ${styles.dataKey}`} className={`queryable ${styles.dataKey}`}
onClick={() => { onClick={() => {

View File

@ -17,7 +17,6 @@ interface Props {
const FancyTextDisplay: React.FC<Props> = ({text, className, isPossibleToCopy = true, applyTextEllipsis = true, flipped = false, useTooltip= false, displayIconOnMouseOver = false, buttonOnly = false}) => { const FancyTextDisplay: React.FC<Props> = ({text, className, isPossibleToCopy = true, applyTextEllipsis = true, flipped = false, useTooltip= false, displayIconOnMouseOver = false, buttonOnly = false}) => {
const [showCopiedNotification, setCopied] = useState(false); const [showCopiedNotification, setCopied] = useState(false);
const [showTooltip, setShowTooltip] = useState(false); const [showTooltip, setShowTooltip] = useState(false);
const displayText = text || '';
const onCopy = () => { const onCopy = () => {
setCopied(true) setCopied(true)
@ -33,12 +32,12 @@ const FancyTextDisplay: React.FC<Props> = ({text, className, isPossibleToCopy =
return () => clearTimeout(timer); return () => clearTimeout(timer);
}, [showCopiedNotification]); }, [showCopiedNotification]);
const textElement = <span className={'FancyTextDisplay-Text'}>{displayText}</span>; const textElement = <span className={'FancyTextDisplay-Text'}>{text}</span>;
const copyButton = isPossibleToCopy && displayText ? <CopyToClipboard text={displayText} onCopy={onCopy}> const copyButton = isPossibleToCopy && text ? <CopyToClipboard text={text} onCopy={onCopy}>
<span <span
className={`FancyTextDisplay-Icon`} className={`FancyTextDisplay-Icon`}
title={`Copy "${displayText}" value to clipboard`} title={`Copy "${text}" value to clipboard`}
> >
<img src={duplicateImg} alt="Duplicate full value"/> <img src={duplicateImg} alt="Duplicate full value"/>
{showCopiedNotification && <span className={'FancyTextDisplay-CopyNotifier'}>Copied</span>} {showCopiedNotification && <span className={'FancyTextDisplay-CopyNotifier'}>Copied</span>}
@ -48,14 +47,14 @@ const FancyTextDisplay: React.FC<Props> = ({text, className, isPossibleToCopy =
return ( return (
<p <p
className={`FancyTextDisplay-Container ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' FancyTextDisplay-ContainerEllipsis' : ''}`} className={`FancyTextDisplay-Container ${className ? className : ''} ${displayIconOnMouseOver ? 'displayIconOnMouseOver ' : ''} ${applyTextEllipsis ? ' FancyTextDisplay-ContainerEllipsis' : ''}`}
title={displayText.toString()} title={text.toString()}
onMouseOver={ e => setShowTooltip(true)} onMouseOver={ e => setShowTooltip(true)}
onMouseLeave={ e => setShowTooltip(false)} onMouseLeave={ e => setShowTooltip(false)}
> >
{!buttonOnly && flipped && textElement} {!buttonOnly && flipped && textElement}
{copyButton} {copyButton}
{!buttonOnly && !flipped && textElement} {!buttonOnly && !flipped && textElement}
{useTooltip && showTooltip && <span className={'FancyTextDisplay-CopyNotifier'}>{displayText}</span>} {useTooltip && showTooltip && <span className={'FancyTextDisplay-CopyNotifier'}>{text}</span>}
</p> </p>
); );
}; };