@controleonline/ui-default 1.0.272 → 1.0.274

package/src/react/components/help/DefaultTooltip.js

@@ -4,28 +4,32 @@ import styles from './DefaultTooltip.styles';
 
 const DefaultTooltip = ({
   accentColor = '#0EA5E9',
-  label = '?',
-  message = '',
-  rows = [],
-  style = null,
-  textStyle = null,
-  title = 'Ajuda',
-  testID,
-  backdropTestID,
-  dialogTestID,
-  closeAccessibilityLabel,
-  closeLabel = 'Fechar',
-  accessibilityLabel,
-}) => {
+  accessibilityLabel = 'Abrir ajuda',
+  backdropTestID,
+  children = null,
+  closeAccessibilityLabel = 'Fechar ajuda',
+  closeLabel = 'Fechar',
+  dialogTestID,
+  hitSlop,
+  label = '?',
+  message = '',
+  rows = [],
+  style = null,
+  testID,
+  textStyle = null,
+  title = 'Ajuda',
+}) => {
   const [visible, setVisible] = useState(false);
+  const hasRows = Array.isArray(rows) && rows.length > 0;
+  const hasContent = Boolean(message || children || hasRows);
 
   const openTooltip = useCallback(() => {
-    if (!message && rows.length === 0) {
+    if (!hasContent) {
       return;
     }
 
     setVisible(true);
-  }, [message, rows.length]);
+  }, [hasContent]);
 
   const closeTooltip = useCallback(() => {
     setVisible(false);
@@ -34,10 +38,11 @@ const DefaultTooltip = ({
   return (
     <>
       <TouchableOpacity
-        accessibilityRole="button"
-        accessibilityLabel={accessibilityLabel}
-        activeOpacity={0.85}
-        disabled={!message && rows.length === 0}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityRole="button"
+        activeOpacity={0.85}
+        disabled={!hasContent}
+        hitSlop={hitSlop}
         onPress={openTooltip}
         style={[
           styles.button,
@@ -45,13 +50,17 @@ const DefaultTooltip = ({
             borderColor: accentColor,
             backgroundColor: `${accentColor}14`,
           },
-          !message && rows.length === 0 && {opacity: 0.55},
-          style,
-        ]}
-        testID={testID}>
-        <Text style={[styles.label, {color: accentColor}, textStyle]}>
-          {label}
-        </Text>
+          !hasContent && {opacity: 0.55},
+          style,
+        ]}
+        testID={testID}>
+        {React.isValidElement(label) ? (
+          label
+        ) : (
+          <Text style={[styles.label, {color: accentColor}, textStyle]}>
+            {label}
+          </Text>
+        )}
       </TouchableOpacity>
 
       <Modal
@@ -59,50 +68,51 @@ const DefaultTooltip = ({
         onRequestClose={closeTooltip}
         transparent
         visible={visible}>
-        <Pressable
-          style={styles.overlay}
-          onPress={closeTooltip}
-          testID={backdropTestID}>
+        <Pressable
+          style={styles.overlay}
+          onPress={closeTooltip}
+          testID={backdropTestID}>
           <View
+            accessibilityLabel={title}
+            accessibilityRole="summary"
             onStartShouldSetResponder={() => true}
             style={[
               styles.card,
               {
                 borderColor: accentColor,
               },
-            ]}>
-            <View testID={dialogTestID}>
-              <View style={styles.cardHeader}>
-                <Text style={[styles.title, {color: accentColor}]}>{title}</Text>
-                <TouchableOpacity
-                  accessibilityRole="button"
-                  accessibilityLabel={closeAccessibilityLabel}
-                  activeOpacity={0.8}
-                  onPress={closeTooltip}
-                  style={[
-                    styles.closeButton,
-                    {
-                      borderColor: accentColor,
-                    },
-                  ]}>
-                  <Text style={[styles.closeButtonText, {color: accentColor}]}>
-                    {closeLabel}
-                  </Text>
-                </TouchableOpacity>
-              </View>
-              {rows.length > 0 ? (
-                <View style={styles.rows}>
-                  {rows.map(row => (
-                    <View key={row.key || row.label} style={styles.row}>
-                      <Text style={styles.rowLabel}>{row.label}</Text>
-                      <Text style={styles.rowValue}>{row.value}</Text>
-                    </View>
-                  ))}
-                </View>
-              ) : (
-                <Text style={styles.message}>{message}</Text>
-              )}
-            </View>
+            ]}
+            testID={dialogTestID}>
+            <View style={styles.cardHeader}>
+              <Text style={[styles.title, {color: accentColor}]}>{title}</Text>
+              <TouchableOpacity
+                accessibilityLabel={closeAccessibilityLabel}
+                accessibilityRole="button"
+                activeOpacity={0.8}
+                onPress={closeTooltip}
+                style={[
+                  styles.closeButton,
+                  {
+                    borderColor: accentColor,
+                  },
+                ]}>
+                <Text style={[styles.closeButtonText, {color: accentColor}]}>
+                  {closeLabel}
+                </Text>
+              </TouchableOpacity>
+            </View>
+            {message ? <Text style={styles.message}>{message}</Text> : null}
+            {hasRows
+              ? rows.map(row => (
+                  <View key={row.key || row.label} style={styles.row}>
+                    <Text style={styles.rowLabel}>{row.label}</Text>
+                    <Text style={styles.rowValue}>
+                      {String(row.value ?? 'Não configurado')}
+                    </Text>
+                  </View>
+                ))
+              : null}
+            {children}
           </View>
         </Pressable>
       </Modal>

package/src/react/components/help/DefaultTooltip.styles.js

@@ -41,31 +41,11 @@ const styles = StyleSheet.create({
     fontSize: 15,
     fontWeight: '800',
   },
-  message: {
+  message: {
     color: '#334155',
     fontSize: 13,
-    lineHeight: 19,
-  },
-  rows: {
-    gap: 9,
-  },
-  row: {
-    flexDirection: 'row',
-    gap: 12,
-    justifyContent: 'space-between',
-  },
-  rowLabel: {
-    color: '#64748B',
-    flex: 1,
-    fontSize: 12,
-  },
-  rowValue: {
-    color: '#0F172A',
-    flex: 1,
-    fontSize: 12,
-    fontWeight: '700',
-    textAlign: 'right',
-  },
+    lineHeight: 19,
+  },
   closeButton: {
     borderRadius: 999,
     borderWidth: 1,
@@ -76,6 +56,26 @@ const styles = StyleSheet.create({
     fontSize: 12,
     fontWeight: '700',
   },
+  row: {
+    borderTopColor: '#E2E8F0',
+    borderTopWidth: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: 9,
+  },
+  rowLabel: {
+    color: '#64748B',
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  rowValue: {
+    color: '#0F172A',
+    flexShrink: 1,
+    fontSize: 13,
+    fontWeight: '700',
+    marginLeft: 12,
+    textAlign: 'right',
+  },
 });
 
 export default styles;