fix: display 'and x others...' on tooltip (DHIS2-8753) v32 backport (#…

…945) DHIS2-8753 fix for v32. Backported #927 by cherry-picking dd62dbb and generating a new pot file. Please see the original PR for details (#925)
dhis2 · May 20, 2020 · 0590fdf · 0590fdf
1 parent c090592
commit 0590fdf
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 9 deletions.
diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
@@ -127,6 +127,12 @@ msgstr ""
 msgid "None selected"
 msgstr ""
 
+msgid "And 1 other..."
+msgstr ""
+
+msgid "And {{numberOfItems}} others..."
+msgstr ""
+
 msgid "Unsaved chart"
 msgstr ""
 

diff --git a/packages/app/src/components/Layout/Tooltip.js b/packages/app/src/components/Layout/Tooltip.js
@@ -16,22 +16,39 @@ const labels = {
 const emptyItems = [];
 
 export class Tooltip extends React.Component {
+    renderItems = itemDisplayNames => {
+        const renderLimit = 5;
+
+        const itemsToRender = itemDisplayNames
+            .slice(0, renderLimit)
+            .map(name => (
+                <li key={`${this.props.dimensionId}-${name}`}>{name}</li>
+            ));
+
+        if (itemDisplayNames.length > renderLimit) {
+            itemsToRender.push(
+                <li key={`${this.props.dimensionId}-render-limit`}>
+                    {itemDisplayNames.length - renderLimit === 1
+                        ? i18n.t('And 1 other...')
+                        : i18n.t('And {{numberOfItems}} others...', {
+                              numberOfItems:
+                                  itemDisplayNames.length - renderLimit,
+                          })}
+                </li>
+            );
+        }
+
+        return itemsToRender;
+    };
+
     renderTooltip = names => (
         <Popper
             anchorEl={this.props.anchorEl}
             open={this.props.open}
             placement="bottom-start"
         >
             <Paper style={styles.tooltip}>
-                {
-                    <ul style={styles.list}>
-                        {names.map(name => (
-                            <li key={`${this.props.dimensionId}-${name}`}>
-                                {name}
-                            </li>
-                        ))}
-                    </ul>
-                }
+                {<ul style={styles.list}>{this.renderItems(names)}</ul>}
             </Paper>
         </Popper>
     );