fix(ui-contract-editor): render conditional switch

Signed-off-by: irmerk <[email protected]>

packages/ui-contract-editor/src/lib/components/Conditional/ConditionalSwitch.js

@@ -2,6 +2,9 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
+/* Actions */
+import { childReducer } from '../actions';
+
 /* Styling */
 import { ClauseConditionalTooltip } from '../styles';
 
@@ -18,18 +21,22 @@ const ConditionalSwitch = (props) => {
     caretLeft: 2,
     tooltipHeight: 1.85,
   };
-  const tooltipText = props.isTrue ? props.whenFalse : props.whenTrue;
-  const tooltipInstructions = props.isContentShowing
-    ? 'Hide text'
-    : `Change to: "${tooltipText}"`;
+  const trueHasLength = childReducer(props.whenTrue).length;
+  const falseHasLength = childReducer(props.whenFalse).length;
+  const tooltipText = props.isTrue ? childReducer(props.whenFalse) : childReducer(props.whenTrue);
+  const tooltipInstructions = (text) => {
+    if (trueHasLength && falseHasLength) return `Change to: "${text}"`;
+    if (props.isContentShowing) return 'Hide text';
+    return `Change to: "${text}"`;
+  };
 
   return (
     <>
       <ClauseConditionalTooltip
         contentEditable={false}
         {...conditionalTooltip}
       >
-        {tooltipInstructions}
+        {tooltipInstructions(tooltipText)}
       </ClauseConditionalTooltip>
     </>
   );