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

…927) * fix: manual backport of fix for 8753 DHIS2-8753 fix for v33. Backported #925 by manually copy-pasting the fix from adaa485 and generating a new pot file. A clean cherry-pick wasn't possible since v33 didn't implement the renderItems method. Please see the original PR for details.
dhis2 · May 4, 2020 · dd62dbb · dd62dbb
1 parent 2b341b0
commit dd62dbb
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 11 deletions.
diff --git a/packages/app/i18n/en.pot b/packages/app/i18n/en.pot
@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2020-02-26T13:21:17.550Z\n"
-"PO-Revision-Date: 2020-02-26T13:21:17.550Z\n"
+"POT-Creation-Date: 2020-04-29T13:47:48.626Z\n"
+"PO-Revision-Date: 2020-04-29T13:47:48.626Z\n"
 
 msgid "Rename successful"
 msgstr ""
@@ -120,6 +120,12 @@ msgstr ""
 msgid "Only '{{name}}' in use"
 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
@@ -17,22 +17,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>
     );