refactor: tooltip.js (#497)

dhis2 · Nov 29, 2019 · aa96e73 · aa96e73
1 parent 2a1daaf
commit aa96e73
Showing 1 changed file with 74 additions and 59 deletions.
diff --git a/packages/app/src/components/Layout/Tooltip.js b/packages/app/src/components/Layout/Tooltip.js
@@ -17,70 +17,85 @@ const labels = {
         i18n.t("Only '{{number}}' in use", { number }),
 };
 export class Tooltip extends React.Component {
-    renderTooltip = (names, warning) => (
-        <Popper
-            anchorEl={this.props.anchorEl}
-            open={this.props.open}
-            placement="bottom-start"
-        >
-            <Paper style={styles.tooltip}>
-                {
-                    <ul style={styles.list}>
-                        {warning && (
-                            <li style={styles.item}>
-                                <div style={styles.iconWrapper}>
-                                    <WarningIcon style={styles.icon} />
-                                    <span>{warning}</span>
-                                </div>
-                            </li>
-                        )}
-                        {this.props.lockedLabel && (
-                            <li style={styles.item}>
-                                <div style={styles.iconWrapper}>
-                                    <LockIcon style={styles.icon} />
-                                    <span>{this.props.lockedLabel}</span>
-                                </div>
-                            </li>
-                        )}
-                        {names.map(name => (
-                            <li
-                                key={`${this.props.dimensionId}-${name}`}
-                                style={styles.item}
-                            >
-                                {name}
-                            </li>
-                        ))}
-                    </ul>
-                }
-            </Paper>
-        </Popper>
-    );
-
-    getLimitedLabel = (itemIds, metadata) =>
-        itemIds.length === 1
-            ? labels.onlyOneInUse(
-                metadata[itemIds[0]] ? metadata[itemIds[0]].name : itemIds[0]
-            )
-            : labels.onlyLimitedNumberInUse(itemIds.length);
+    getWarningLabel = () => {
+        const { itemIds, metadata, displayLimitedAmount } = this.props;
+        const warningLabel =
+            itemIds.length === 1
+                ? labels.onlyOneInUse(
+                      metadata[itemIds[0]]
+                          ? metadata[itemIds[0]].name
+                          : itemIds[0]
+                  )
+                : labels.onlyLimitedNumberInUse(itemIds.length);
+        return displayLimitedAmount ? warningLabel : null;
+    };
 
-    render() {
+    getItemDisplayNames = () => {
         const { itemIds, metadata, displayLimitedAmount } = this.props;
+        return itemIds.length && !displayLimitedAmount
+            ? itemIds.map(id => (metadata[id] ? metadata[id].name : id))
+            : [];
+    };
+
+    renderWarningLabel = warningLabel => (
+        <li style={styles.item}>
+            <div style={styles.iconWrapper}>
+                <WarningIcon style={styles.icon} />
+                <span>{warningLabel}</span>
+            </div>
+        </li>
+    );
+
+    renderItems = itemDisplayNames =>
+        itemDisplayNames.map(name => (
+            <li key={`${this.props.dimensionId}-${name}`} style={styles.item}>
+                {name}
+            </li>
+        ));
 
-        const names = [];
+    renderLockedLabel = () => (
+        <li style={styles.item}>
+            <div style={styles.iconWrapper}>
+                <LockIcon style={styles.icon} />
+                <span>{this.props.lockedLabel}</span>
+            </div>
+        </li>
+    );
 
-        const warning = displayLimitedAmount
-            ? this.getLimitedLabel(itemIds, metadata)
-            : null;
+    renderNoItemsLabel = () => (
+        <li
+            key={`${this.props.dimensionId}-${labels.noneSelected}`}
+            style={styles.item}
+        >
+            {labels.noneSelected}
+        </li>
+    );
 
-        if (itemIds.length && !displayLimitedAmount) {
-            names.push(
-                ...itemIds.map(id => (metadata[id] ? metadata[id].name : id))
-            );
-        } else if (!itemIds.length) {
-            names.push(labels.noneSelected);
-        }
+    render() {
+        const itemDisplayNames = this.getItemDisplayNames();
+        const warningLabel = this.getWarningLabel();
+        const hasNoItemsLabel = !itemDisplayNames.length && !warningLabel;
 
-        return this.renderTooltip(names, warning);
+        return (
+            <Popper
+                anchorEl={this.props.anchorEl}
+                open={this.props.open}
+                placement="bottom-start"
+            >
+                <Paper style={styles.tooltip}>
+                    {
+                        <ul style={styles.list}>
+                            {warningLabel &&
+                                this.renderWarningLabel(warningLabel)}
+                            {this.props.lockedLabel && this.renderLockedLabel()}
+                            {itemDisplayNames &&
+                                this.renderItems(itemDisplayNames)}
+                            {hasNoItemsLabel && this.renderNoItemsLabel()}
+                        </ul>
+                    }
+                </Paper>
+            </Popper>
+        );
     }
 }
 
@@ -93,7 +108,7 @@ Tooltip.propTypes = {
     displayLimitedAmount: PropTypes.bool,
 };
 
-const mapStateToProps = (state, ownProps) => ({
+const mapStateToProps = state => ({
     metadata: sGetMetadata(state),
 });