Skip to content

Commit

Permalink
fix(TDC-7364): FormatValue component - fix content not appearing if t…
Browse files Browse the repository at this point in the history 
…here are leading whitespaces
  • Loading branch information
@dlcaldeira
dlcaldeira authored Oct 17, 2023
1 parent cd04f75 commit b0f7bbf
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 27 deletions.
5 changes: 5 additions & 0 deletions .changeset/tender-jokes-join.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@talend/react-components': patch
---

fix(TDC-7364): FormatValue component - fix content not appearing when there were leading whitespaces
43 changes: 22 additions & 21 deletions packages/components/src/FormatValue/FormatValue.component.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export const REG_EXP_LEADING_TRAILING_WHITE_SPACE_CHARACTERS = /(^\s*)?([\s\S]*?
const REG_EXP_REPLACED_WHITE_SPACE_CHARACTERS = /(\t| |\n)/g;
const REG_EXP_CAPTUR_LINE_FEEDING = /(\n)/g;
const REG_EXP_LINE_FEEDING = /\n/;
const REG_EXP_WHITE_SPACE_CHARACTERS = /^\s/;
const REG_EXP_WHITE_SPACE_CHARACTERS = /^\s+/;

/**
* replaceCharacterByIcon - replace a character by the corresponding icon
Expand Down Expand Up @@ -54,30 +54,31 @@ function replaceCharacterByIcon(value, index, t) {
className={classNames(theme['td-white-space-character'], 'td-white-space-character')}
name="talend-carriage-return"
/>
{'\n'}
</span>
);
default:
if (REG_EXP_WHITE_SPACE_CHARACTERS.test(value)) {
return (
<Icon
key={index}
aria-label={t('FORMAT_VALUE_WHITE_SPACE_CHARACTER', {
defaultValue: 'whitespace character',
})}
className={classNames(
theme['td-white-space-character'],
theme['td-other-characters'],
'td-white-space-character',
)}
name="talend-empty-char"
/>
);
}
const whitespaces = value.match(REG_EXP_WHITE_SPACE_CHARACTERS)?.[0];
return (
<span key={index} className={classNames(theme['td-value'], 'td-value')}>
{value}
</span>
<>
{whitespaces &&
[...whitespaces]?.map(() => (
<Icon
key={index}
aria-label={t('FORMAT_VALUE_WHITE_SPACE_CHARACTER', {
defaultValue: 'whitespace character',
})}
className={classNames(
theme['td-white-space-character'],
theme['td-other-characters'],
'td-white-space-character',
)}
name="talend-empty-char"
/>
))}
<span key={index} className={classNames(theme['td-value'], 'td-value')}>
{value.trimStart()}
</span>
</>
);
}
}
Expand Down
55 changes: 49 additions & 6 deletions packages/components/src/FormatValue/__snapshots__/FormatValue.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,9 @@ exports[`FormatValue should handle leading empty space in the string 1`] = `
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
class="theme-td-value td-value"
/>
<span
class="theme-td-value td-value"
>
Expand All @@ -37,8 +40,6 @@ exports[`FormatValue should handle line feeding in the string 1`] = `
class="CoralIcon theme-td-white-space-character td-white-space-character"
name="talend-carriage-return"
/>
</span>
<span
class="theme-td-value td-value"
Expand Down Expand Up @@ -66,8 +67,6 @@ exports[`FormatValue should handle single line feed 1`] = `
class="CoralIcon theme-td-white-space-character td-white-space-character"
name="talend-carriage-return"
/>
</span>
</span>
</DocumentFragment>
Expand Down Expand Up @@ -106,6 +105,9 @@ exports[`FormatValue should handle trailing empty space in the string 1`] = `
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
class="theme-td-value td-value"
/>
</span>
</DocumentFragment>
`;
Expand All @@ -126,6 +128,39 @@ exports[`FormatValue should replace the leading/trailing white space and the lin
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
class="theme-td-value td-value"
/>
<span
aria-label="space character"
class="CoralIcon theme-td-white-space-character td-white-space-character"
Expand All @@ -147,14 +182,22 @@ exports[`FormatValue should replace the leading/trailing white space and the lin
class="CoralIcon theme-td-white-space-character td-white-space-character"
name="talend-carriage-return"
/>
</span>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
aria-label="whitespace character"
class="CoralIcon theme-td-white-space-character theme-td-other-characters td-white-space-character"
name="talend-empty-char"
/>
<span
class="theme-td-value td-value"
>
psum
</span>
<span
aria-label="tab character"
class="CoralIcon theme-td-white-space-character theme-td-tab-character td-white-space-character"
Expand Down

0 comments on commit b0f7bbf

Please sign in to comment.