@controleonline/ui-default 1.0.276 → 1.0.278

package/src/react/components/table/DefaultColumnMenu.js

@@ -12,8 +12,10 @@ import {
   sanitizeVisibleColumnsPreference,
 } from '../../utils/tableVisibleColumnsPreferences';
 import styles from './DefaultTable.styles';
+import {getCompactColumnLabel} from './DefaultTableCompact.helpers';
 import { shouldIncludeColumn } from './DefaultTable.utils';
 import useDefaultTableTheme from './useDefaultTableTheme';
+import DefaultCompactDialog from './DefaultCompactDialog';
 
 const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
   const store = useStore(storeName);
@@ -41,15 +43,43 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
     textColor,
   } = modalColors;
 
+  const compact = configs.appearance === 'compact';
+  const items = availableColumns.map(column => {
+    const fieldName = getColumnKey(column);
+    const label = getCompactColumnLabel(column, formatStoreColumnLabel({columns, fieldName, fallbackLabel: column.label || fieldName, storeName}));
+    const checked = visibleColumns[fieldName] !== false;
+    const locked = isRequiredVisibleColumn(column) || (checked && !canHideVisibleColumn({columns, fieldName, visibleColumns}));
+    const toggle = () => {
+      const next = sanitizeVisibleColumnsPreference({columns, visibleColumns: {...visibleColumns, [fieldName]: !checked}});
+      persistVisibleColumnsPreference(tablePreferenceScope, next);
+      if (store.actions?.setVisibleColumns) store.actions.setVisibleColumns(next);
+      else if (store.getters) store.getters.visibleColumns = next;
+    };
+    return <TouchableOpacity key={fieldName} accessibilityRole="checkbox" accessibilityLabel={label}
+      accessibilityState={{checked, disabled: locked && checked}} disabled={locked && checked} onPress={toggle}
+      style={{minHeight: 48, flexDirection: 'row', alignItems: 'center', gap: 12, paddingHorizontal: 10, borderRadius: 8, backgroundColor: checked ? themeColors.chipBackground : 'transparent'}}>
+      <Icon name={checked ? 'check-square' : 'square'} size={19} color={checked ? resolvedCheckboxSelectedMarkColor : resolvedCheckboxBorderColor} />
+      <Text style={{flex: 1, fontSize: 14, color: textColor}}>{label}</Text>
+      {locked && checked ? <Text style={{fontSize: 12, color: themeColors.textSecondary}}>Obrigatória</Text> : null}
+    </TouchableOpacity>;
+  });
+  if (compact) return <DefaultCompactDialog visible title="Colunas visíveis" description="Escolha as informações da tabela." onClose={onClose}
+    width={400} bodyHeight={items.length * 60 + 40} footer={<TouchableOpacity accessibilityRole="button" accessibilityLabel="Concluir seleção de colunas" onPress={onClose}
+      style={{minHeight: 44, justifyContent: 'center', paddingHorizontal: 18, borderRadius: 9, backgroundColor: themeColors.buttonBackground}}><Text style={{color: themeColors.buttonText, fontSize: 14, fontWeight: '600'}}>Concluir</Text></TouchableOpacity>}>
+    {items.length ? items : <Text style={{color: textColor}}>Nenhuma coluna disponível.</Text>}
+  </DefaultCompactDialog>;
+
   return (
     <Modal visible transparent animationType="fade" onRequestClose={onClose}>
       <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
         <View style={[styles.modalCard, styles.columnMenuModalCard, { borderColor, backgroundColor }]}>
           <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
             <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
-              {global.t?.t(storeName, 'label', 'columns')}
+              {configs.appearance === 'compact' ? 'Colunas visíveis' : global.t?.t(storeName, 'label', 'columns')}
             </Text>
             <TouchableOpacity
+              accessibilityRole="button"
+              accessibilityLabel="Fechar seleção de colunas"
               style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
               activeOpacity={0.82}
               onPress={onClose}
@@ -60,12 +90,13 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
           <ScrollView style={styles.columnMenuModalBody} contentContainerStyle={styles.columnMenuModalList}>
             {availableColumns.map(column => {
               const fieldName = getColumnKey(column);
-              const label = formatStoreColumnLabel({
+              const defaultLabel = formatStoreColumnLabel({
                 columns,
                 fieldName,
                 fallbackLabel: column?.label || fieldName,
                 storeName,
               });
+              const label = configs.appearance === 'compact' ? getCompactColumnLabel(column, defaultLabel) : defaultLabel;
               const checked = visibleColumns[fieldName] !== false;
               const required = isRequiredVisibleColumn(column);
               const locked =
@@ -101,6 +132,9 @@ const DefaultColumnMenu = ({ storeName, visible = false, onClose }) => {
               return (
                 <TouchableOpacity
                   key={fieldName}
+                  accessibilityRole="checkbox"
+                  accessibilityLabel={label}
+                  accessibilityState={{checked, disabled: locked && checked}}
                   style={styles.columnMenuItem}
                   activeOpacity={locked ? 1 : 0.82}
                   disabled={locked && checked}

package/src/react/components/table/DefaultCompactDialog.js

@@ -0,0 +1,36 @@
+import React from 'react';
+import {Modal, ScrollView, StyleSheet, Text, TouchableOpacity, View, useWindowDimensions} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+// Explicit scroll height prevents RN Web's modal body from collapsing with only maxHeight.
+export default function DefaultCompactDialog({visible, title, description, onClose, children, footer, bodyHeight = 400, width = 480}) {
+  const {height} = useWindowDimensions();
+  const {themeColors: c} = useDefaultTableTheme();
+  const scrollHeight = Math.max(80, Math.min(bodyHeight, height - (footer ? 220 : 160)));
+  return <Modal visible={visible} transparent animationType="fade" onRequestClose={onClose}>
+    <View style={[s.backdrop, {backgroundColor: c.modalOverlay}]}>
+      <View accessibilityViewIsModal style={[s.dialog, {maxWidth: width, backgroundColor: c.modalBackground, borderColor: c.modalBorder}]}>
+        <View style={[s.header, {borderBottomColor: c.border}]}>
+          <View style={{flex: 1, gap: 5}}><Text accessibilityRole="header" style={[s.title, {color: c.textPrimary}]}>{title}</Text>
+            {description ? <Text style={[s.description, {color: c.textSecondary}]}>{description}</Text> : null}</View>
+          <TouchableOpacity accessibilityRole="button" accessibilityLabel={`Fechar ${title.toLowerCase()}`} onPress={onClose} style={s.close}>
+            <Icon name="x" size={20} color={c.textSecondary} />
+          </TouchableOpacity>
+        </View>
+        <ScrollView keyboardShouldPersistTaps="handled" style={{height: scrollHeight, flexGrow: 0, flexShrink: 1}} contentContainerStyle={s.content}>{children}</ScrollView>
+        {footer ? <View style={[s.footer, {borderTopColor: c.border, backgroundColor: c.tableFooterBackground}]}>{footer}</View> : null}
+      </View>
+    </View>
+  </Modal>;
+}
+
+const s = StyleSheet.create({
+  backdrop: {flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16},
+  dialog: {width: '100%', borderWidth: 1, borderRadius: 16, overflow: 'hidden'},
+  header: {paddingLeft: 20, paddingRight: 10, paddingVertical: 14, flexDirection: 'row', alignItems: 'center', gap: 8, borderBottomWidth: 1},
+  title: {fontSize: 18, fontWeight: '600'}, description: {fontSize: 13, lineHeight: 19},
+  close: {width: 44, height: 44, alignItems: 'center', justifyContent: 'center'},
+  content: {padding: 20, gap: 12},
+  footer: {paddingHorizontal: 20, paddingVertical: 12, flexDirection: 'row', justifyContent: 'flex-end', alignItems: 'center', gap: 10, borderTopWidth: 1},
+});

package/src/react/components/table/DefaultDebug.js

@@ -1,182 +1,184 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import { useStore } from '@store';
-import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import { normalizeText } from '../inputs/defaultInputUtils';
-import styles from './DefaultTable.styles';
-import useDefaultTableTheme from './useDefaultTableTheme';
-
-const isObject = value =>
-  value !== null && typeof value === 'object' && !Array.isArray(value);
-
-const formatDebugValue = value => {
-  if (value === undefined) return '';
-  if (typeof value === 'string') return value;
-
-  try {
-    return JSON.stringify(value, null, 2);
-  } catch (error) {
-    return normalizeText(value);
-  }
-};
-
-const copyTextToClipboard = async text => {
-  const normalizedText = normalizeText(text);
-  if (!normalizedText) return false;
-
-  if (
-    typeof navigator !== 'undefined' &&
-    navigator.clipboard &&
-    typeof navigator.clipboard.writeText === 'function'
-  ) {
-    await navigator.clipboard.writeText(normalizedText);
-    return true;
-  }
-
-  return false;
-};
-
-const DebugCopyButton = ({ borderColor, color, onPress }) => (
-  <TouchableOpacity
-    style={[styles.debugCopyButton, { borderColor }]}
-    activeOpacity={0.82}
-    onPress={onPress}
-  >
-    <Icon name="copy" size={13} color={color} />
-    <Text style={[styles.debugCopyButtonText, { color }]}>Copiar</Text>
-  </TouchableOpacity>
-);
-
-const DebugSection = ({ borderColor, children, copyText, onCopy, textColor, title }) => (
-  <>
-    <View style={styles.debugSectionHeader}>
-      <Text style={[styles.debugSectionTitle, { color: textColor }]}>{title}</Text>
-      <DebugCopyButton
-        borderColor={borderColor}
-        color={textColor}
-        onPress={() => onCopy(copyText)}
-      />
-    </View>
-    <Text selectable style={[styles.debugCodeBlock, { color: textColor, borderColor }]}>
-      {children}
-    </Text>
-  </>
-);
-
-const DefaultDebug = ({
-  storeName,
-}) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const store = useStore(storeName);
-  const configs = store?.getters?.configs || {};
+import React, { useCallback, useMemo, useState } from 'react';
+import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
+import { normalizeText } from '../inputs/defaultInputUtils';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const isObject = value =>
+  value !== null && typeof value === 'object' && !Array.isArray(value);
+
+const formatDebugValue = value => {
+  if (value === undefined) return '';
+  if (typeof value === 'string') return value;
+
+  try {
+    return JSON.stringify(value, null, 2);
+  } catch (error) {
+    return normalizeText(value);
+  }
+};
+
+const copyTextToClipboard = async text => {
+  const normalizedText = normalizeText(text);
+  if (!normalizedText) return false;
+
+  if (
+    typeof navigator !== 'undefined' &&
+    navigator.clipboard &&
+    typeof navigator.clipboard.writeText === 'function'
+  ) {
+    await navigator.clipboard.writeText(normalizedText);
+    return true;
+  }
+
+  return false;
+};
+
+const DebugCopyButton = ({ borderColor, color, onPress }) => (
+  <TouchableOpacity
+    style={[styles.debugCopyButton, { borderColor }]}
+    activeOpacity={0.82}
+    onPress={onPress}
+  >
+    <Icon name="copy" size={13} color={color} />
+    <Text style={[styles.debugCopyButtonText, { color }]}>Copiar</Text>
+  </TouchableOpacity>
+);
+
+const DebugSection = ({ borderColor, children, copyText, onCopy, textColor, title }) => (
+  <>
+    <View style={styles.debugSectionHeader}>
+      <Text style={[styles.debugSectionTitle, { color: textColor }]}>{title}</Text>
+      <DebugCopyButton
+        borderColor={borderColor}
+        color={textColor}
+        onPress={() => onCopy(copyText)}
+      />
+    </View>
+    <Text selectable style={[styles.debugCodeBlock, { color: textColor, borderColor }]}>
+      {children}
+    </Text>
+  </>
+);
+
+const DefaultDebug = ({
+  storeName,
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
   const { showError, showSuccess } = useMessage() || {};
-  const { modalColors, resolvedAccentColor, tableButtonColors } = useDefaultTableTheme();
-
-  const resolvedDebug = isObject(store?.getters?.debug) ? store.getters.debug : {};
-  const debugQuery = normalizeText(resolvedDebug?.query);
-  const debugFilledQuery = normalizeText(
-    resolvedDebug?.filledQuery || resolvedDebug?.interpolatedQuery,
-  );
-  const hasDebugQuery = debugQuery !== '';
-  const debugParameters = isObject(resolvedDebug?.parameters)
-    ? resolvedDebug.parameters
-    : configs.debugFallbackParameters || null;
+  const { modalColors, resolvedAccentColor, tableButtonColors, themeColors } = useDefaultTableTheme();
+
+  const resolvedDebug = isObject(store?.getters?.debug) ? store.getters.debug : {};
+  const debugQuery = normalizeText(resolvedDebug?.query);
+  const debugFilledQuery = normalizeText(
+    resolvedDebug?.filledQuery || resolvedDebug?.interpolatedQuery,
+  );
+  const hasDebugQuery = debugQuery !== '';
+  const debugParameters = isObject(resolvedDebug?.parameters)
+    ? resolvedDebug.parameters
+    : configs.debugFallbackParameters || null;
   const debugParametersText = useMemo(
     () => formatDebugValue(debugParameters),
     [debugParameters],
   );
   const hasDebugParameters = debugParametersText !== '';
   const debugCopyText = useMemo(
-    () =>
-      [
-        'Query:',
-        debugQuery,
-        '',
-        'Parameters:',
-        debugParametersText,
-        '',
-        'Filled query:',
-        debugFilledQuery,
-      ].join('\n'),
-    [debugFilledQuery, debugParametersText, debugQuery],
-  );
-
-  const requestCopyText = useCallback(
-    text =>
-      copyTextToClipboard(text)
-        .then(copied => {
-          if (copied) {
-            showSuccess?.('Copiado');
-            return;
-          }
-
-          showError?.('Nao foi possivel copiar automaticamente.');
-        })
-        .catch(() => {
-          showError?.('Nao foi possivel copiar automaticamente.');
-        }),
-    [showError, showSuccess],
-  );
-
+    () =>
+      [
+        'Query:',
+        debugQuery,
+        '',
+        'Parameters:',
+        debugParametersText,
+        '',
+        'Filled query:',
+        debugFilledQuery,
+      ].join('\n'),
+    [debugFilledQuery, debugParametersText, debugQuery],
+  );
+
+  const requestCopyText = useCallback(
+    text =>
+      copyTextToClipboard(text)
+        .then(copied => {
+          if (copied) {
+            showSuccess?.('Copiado');
+            return;
+          }
+
+          showError?.('Nao foi possivel copiar automaticamente.');
+        })
+        .catch(() => {
+          showError?.('Nao foi possivel copiar automaticamente.');
+        }),
+    [showError, showSuccess],
+  );
+
   if (!hasDebugQuery && !hasDebugParameters && !debugFilledQuery) {
     return null;
   }
-
-  const {
-    backgroundColor,
-    borderColor,
-    closeIconColor,
-    headerTextColor,
-    overlayColor,
-    textColor,
-  } = modalColors;
-  const {
-    backgroundColor: buttonBackgroundColor,
-    borderColor: buttonBorderColor,
-    iconColor,
-    pressedBackgroundColor,
-    pressedBorderColor,
-    pressedIconColor,
-    textColor: buttonTextColor,
-  } = tableButtonColors;
-
-  return (
-    <>
-      <TouchableOpacity
-        accessibilityLabel="Debug query"
-        accessibilityRole="button"
-        style={[
-          styles.toolbarButton,
-          { borderColor: buttonBorderColor, backgroundColor: buttonBackgroundColor },
-          isOpen
-            ? { backgroundColor: pressedBackgroundColor, borderColor: pressedBorderColor }
-            : null,
-        ]}
-        activeOpacity={0.82}
-        onPress={() => setIsOpen(true)}
-      >
-        <Icon name="code" size={14} color={buttonTextColor} />
-      </TouchableOpacity>
-
-      {isOpen ? (
-        <Modal visible transparent animationType="fade" onRequestClose={() => setIsOpen(false)}>
-          <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
-            <View style={[styles.modalCard, styles.debugModalCard, { borderColor, backgroundColor }]}>
-              <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
-                <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
-                  Debug query
-                </Text>
-                <TouchableOpacity
-                  style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
-                  activeOpacity={0.82}
-                  onPress={() => setIsOpen(false)}
-                >
-                  <Icon name="x" size={16} color={closeIconColor} />
-                </TouchableOpacity>
-              </View>
-
-              <ScrollView style={styles.debugModalBody} contentContainerStyle={styles.debugModalContent}>
+
+  const {
+    backgroundColor,
+    borderColor,
+    closeIconColor,
+    headerTextColor,
+    overlayColor,
+    textColor,
+  } = modalColors;
+  const {
+    backgroundColor: buttonBackgroundColor,
+    borderColor: buttonBorderColor,
+    iconColor,
+    pressedBackgroundColor,
+    pressedBorderColor,
+    pressedIconColor,
+    textColor: buttonTextColor,
+  } = tableButtonColors;
+
+  return (
+    <>
+      <TouchableOpacity
+        accessibilityLabel={themeColors.compact ? 'Diagnóstico da consulta' : 'Debug query'}
+        accessibilityRole="button"
+        style={[
+          styles.toolbarButton,
+          { borderColor: buttonBorderColor, backgroundColor: buttonBackgroundColor },
+          themeColors.compact ? {width: '100%', minHeight: 48, borderWidth: 0, backgroundColor: themeColors.inputBackground, paddingHorizontal: 12, gap: 8, justifyContent: 'flex-start'} : null,
+          isOpen
+            ? { backgroundColor: pressedBackgroundColor, borderColor: pressedBorderColor }
+            : null,
+        ]}
+        activeOpacity={0.82}
+        onPress={() => setIsOpen(true)}
+      >
+        <Icon name="code" size={16} color={themeColors.compact ? themeColors.textPrimary : buttonTextColor} />
+        {themeColors.compact ? <Text style={{fontSize: 14, color: themeColors.textPrimary}}>Diagnóstico da consulta</Text> : null}
+      </TouchableOpacity>
+
+      {isOpen ? (
+        <Modal visible transparent animationType="fade" onRequestClose={() => setIsOpen(false)}>
+          <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+            <View style={[styles.modalCard, styles.debugModalCard, { borderColor, backgroundColor }]}>
+              <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+                <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
+                  Debug query
+                </Text>
+                <TouchableOpacity
+                  style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => setIsOpen(false)}
+                >
+                  <Icon name="x" size={16} color={closeIconColor} />
+                </TouchableOpacity>
+              </View>
+
+              <ScrollView style={styles.debugModalBody} contentContainerStyle={styles.debugModalContent}>
                 {hasDebugQuery ? (
                   <DebugSection
                     borderColor={borderColor}
@@ -188,7 +190,7 @@ const DefaultDebug = ({
                     {debugQuery}
                   </DebugSection>
                 ) : null}
-
+
                 {hasDebugParameters ? (
                   <DebugSection
                     borderColor={borderColor}
@@ -212,30 +214,30 @@ const DefaultDebug = ({
                     {debugFilledQuery}
                   </DebugSection>
                 ) : null}
-              </ScrollView>
-
-              <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
-                <TouchableOpacity
-                  style={[styles.secondaryButton, { borderColor }]}
-                  activeOpacity={0.82}
-                  onPress={() => requestCopyText(debugCopyText)}
-                >
-                  <Text style={[styles.secondaryButtonText, { color: textColor }]}>Copiar tudo</Text>
-                </TouchableOpacity>
-                <TouchableOpacity
-                  style={[styles.primaryButton, { backgroundColor: resolvedAccentColor }]}
-                  activeOpacity={0.82}
-                  onPress={() => setIsOpen(false)}
-                >
-                  <Text style={styles.primaryButtonText}>Fechar</Text>
-                </TouchableOpacity>
-              </View>
-            </View>
-          </View>
-        </Modal>
-      ) : null}
-    </>
-  );
-};
-
-export default DefaultDebug;
+              </ScrollView>
+
+              <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
+                <TouchableOpacity
+                  style={[styles.secondaryButton, { borderColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => requestCopyText(debugCopyText)}
+                >
+                  <Text style={[styles.secondaryButtonText, { color: textColor }]}>Copiar tudo</Text>
+                </TouchableOpacity>
+                <TouchableOpacity
+                  style={[styles.primaryButton, { backgroundColor: resolvedAccentColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => setIsOpen(false)}
+                >
+                  <Text style={styles.primaryButtonText}>Fechar</Text>
+                </TouchableOpacity>
+              </View>
+            </View>
+          </View>
+        </Modal>
+      ) : null}
+    </>
+  );
+};
+
+export default DefaultDebug;