@controleonline/ui-common 1.2.86 → 1.2.88

package/src/react/components/AddImportModal.js

@@ -11,18 +11,29 @@ import Icon from 'react-native-vector-icons/MaterialIcons';
 import { useStore } from '@store';
 import AnimatedModal from './AnimatedModal';
 import { useMessage } from '@controleonline/ui-common/src/react/components/MessageService';
-import ImportsPage from '@controleonline/ui-common/src/react/pages/Imports';
 import { useState } from 'react';
 import { resolveSystemErrorMessage } from '@controleonline/ui-common/src/react/utils/systemErrorMessage';
 import styles from './AddImportModal.styles';
 
+const FORBIDDEN_EXTENSIONS = new Set(['*', '*.*', '', '.', '.*']);
+
+const sanitizeAllowedExtensions = (extensions, importType) => {
+    const fallback =
+        importType === 'invoice_tax' || importType === 'xml' ? ['xml', 'zip'] : ['csv'];
+    const source = Array.isArray(extensions) && extensions.length > 0 ? extensions : fallback;
+    return [...new Set(
+        source
+            .map(item => String(item || '').trim().replace(/^\./, '').toLowerCase())
+            .filter(item => item && !FORBIDDEN_EXTENSIONS.has(item) && !item.includes('*')),
+    )];
+};
+
 const AddImportModal = ({
     visible,
     onClose,
     onSuccess,
     context = {},
-    allowedExtensions = [], // default will be set to ['csv'] if empty
-    // acceptedTypes will be derived from allowedExtensions for security
+    allowedExtensions = [],
     helperLabel,
     modalTitle,
     fileLabel,
@@ -46,12 +57,14 @@ const AddImportModal = ({
     const _importSuccessLabel = importSuccessLabel ?? fallbackSuccessLabel;
     const _importErrorLabel = importErrorLabel ?? fallbackErrorLabel;
     const _helperLabel = helperLabel ?? fallbackInvalidFileLabel;
-    // Resolve allowed extensions securely – default to CSV only
-    const _allowedExtensions = (allowedExtensions && allowedExtensions.length > 0) ? allowedExtensions : ['csv'];
-    // Build acceptedTypes string for file input (e.g., ".csv,.xml,.zip")
+    const resolvedImportType =
+        importType ?? context.context ?? (allowedExtensions.includes('xml') ? 'xml' : 'csv');
+    const _allowedExtensions = sanitizeAllowedExtensions(
+        allowedExtensions.length > 0 ? allowedExtensions : context.allowedExtensions,
+        resolvedImportType,
+    );
     const _acceptedTypes = _allowedExtensions.map(ext => `.${ext}`).join(',');
-    // Determine import type: prioritize prop, then infer from allowed extensions, default to 'csv'
-    const _importType = importType ?? (_allowedExtensions.includes('xml') ? 'xml' : (_allowedExtensions.includes('zip') ? 'zip' : 'csv'));
+    const _importType = resolvedImportType;
     const { showError, showSuccess } = useMessage();
     const peopleStore = useStore('people');
     const importsStore = useStore('imports');
@@ -68,15 +81,36 @@ const AddImportModal = ({
     };
 
     const [showImportList, setShowImportList] = useState(false);
-    const [importResult, setImportResult] = useState(null); // true = success, false = error
+    const [importResult, setImportResult] = useState(null);
     const [uploading, setUploading] = useState(false);
 
-    const handleUploadImportFile = async ({ file }) => {
-        if (_allowedExtensions.length > 0) {
-            const extensionRegex = new RegExp(`\\\\.(${_allowedExtensions.join('|')})$`, 'i');
-            if (!file?.name?.toLowerCase().match(extensionRegex)) {
+    const handleUploadImportFile = async ({ file } = {}) => {
+        if (!file) {
+            if (typeof document === 'undefined') {
                 throw new Error(_helperLabel);
             }
+
+            file = await new Promise((resolve, reject) => {
+                const input = document.createElement('input');
+                input.type = 'file';
+                input.accept = _acceptedTypes;
+                input.onchange = () => resolve(input.files?.[0] || null);
+                input.onerror = () => reject(new Error(_helperLabel));
+                input.click();
+            });
+        }
+
+        if (!file) {
+            return null;
+        }
+
+        if (_allowedExtensions.length === 0) {
+            throw new Error('Importar *.* nao e permitido.');
+        }
+
+        const extensionRegex = new RegExp(`\\.(${_allowedExtensions.join('|')})$`, 'i');
+        if (!file?.name?.toLowerCase().match(extensionRegex)) {
+            throw new Error(_helperLabel);
         }
 
         setUploading(true);
@@ -85,9 +119,9 @@ const AddImportModal = ({
                 file,
                 importType: _importType,
                 peopleId: currentCompany.id,
+                allowedExtensions: _allowedExtensions,
             });
             showSuccess(_importSuccessLabel);
-            // Indicate successful import and open import list
             setImportResult(true);
             setShowImportList(true);
             if (onSuccess) onSuccess();
@@ -124,25 +158,19 @@ const AddImportModal = ({
                 </View>
 
                 <ScrollView style={styles.content} keyboardShouldPersistTaps="always">
-    <TouchableOpacity
-        onPress={handleUploadImportFile}
-        style={[styles.filePicker, { backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
-    >
-        <Text numberOfLines={1} style={[styles.fileName, { color: buttonPalette.buttonText }]}>{_selectFileLabel}</Text>
-        {uploading ? (
-            <ActivityIndicator color={buttonPalette.buttonIcon} />
-        ) : (
-            <Icon name="upload-file" size={22} color={buttonPalette.buttonIcon} />
-        )}
-    </TouchableOpacity>
-    <TouchableOpacity
-        onPress={() => setShowImportList(true)}
-        style={[styles.filePicker, { marginTop: 10, backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
-    >
-        <Text style={[styles.fileName, { color: buttonPalette.buttonText }]}>{global.t?.t('imports', 'button', 'view_imports') || 'View Imports'}</Text>
-    </TouchableOpacity>
-</ScrollView>
-
+                    <Text style={styles.fileName}>{_fileLabel} ({_acceptedTypes})</Text>
+                    <TouchableOpacity
+                        onPress={() => handleUploadImportFile()}
+                        style={[styles.filePicker, { backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder }]}
+                    >
+                        <Text numberOfLines={1} style={[styles.fileName, { color: buttonPalette.buttonText }]}>{_selectFileLabel}</Text>
+                        {uploading ? (
+                            <ActivityIndicator color={buttonPalette.buttonIcon} />
+                        ) : (
+                            <Icon name="upload-file" size={22} color={buttonPalette.buttonIcon} />
+                        )}
+                    </TouchableOpacity>
+                </ScrollView>
 
                 <View style={styles.footer}>
                     <TouchableOpacity onPress={handleClose} style={styles.secondaryButton}>
@@ -155,4 +183,3 @@ const AddImportModal = ({
 };
 
 export default AddImportModal;
-// TODO(store-first): quando este arquivo for mexido, mover a leitura para stores e evitar chamadas HTTP diretas quando o store ja resolver isso.

package/src/react/components/BottomNavigationBar.js

@@ -1,175 +1,179 @@
-import React, {useLayoutEffect, useMemo} from 'react';
-import {Pressable, Text, View} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import {useTheme} from './DefaultProvider';
-import RuntimeInfoFooter from './RuntimeInfoFooter';
+import React, {useLayoutEffect, useMemo} from 'react';
+import {Pressable, Text, View} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {useTheme} from './DefaultProvider';
+import RuntimeInfoFooter from './RuntimeInfoFooter';
 import {resolveMenuRouteParams} from '../utils/menuNavigation';
-import createStyles from './BottomNavigationBar.styles';
-
-const BottomNavigationBar = ({
-  navigation,
-  items = [],
-  activeRouteName,
-  disabled = false,
-  colors = {},
-  testID = 'bottom-navigation',
-  useModernWebChromeProps = false,
-}) => {
-  const theme = useTheme?.() || {};
-  const runtimeFooter = theme?.runtimeFooter || null;
-  const registerBottomNavigation =
-    theme?.bottomChrome?.registerBottomNavigation || null;
-  const activeBackground = colors.navigationActiveBackground;
-  const activeBorder = colors.navigationActiveBorder;
-  const activeIcon = colors.navigationActiveIcon;
-  const activeText = colors.navigationActiveText;
-  const dockBackground = colors.navigationBackground;
-  const dockBorder = colors.navigationBorder;
-  const dockShadow = colors.navigationShadow;
-  const inactiveIcon = colors.navigationIcon;
-  const inactiveText = colors.navigationText;
-
-  const styles = useMemo(
-    () =>
-      createStyles({
-        activeBackground,
-        dockBackground,
-        dockBorder,
-        dockShadow,
-        activeBorder,
-        useModernWebChromeProps,
-      }),
-    [
-      activeBackground,
-      activeBorder,
-      dockBackground,
-      dockBorder,
-      dockShadow,
-      useModernWebChromeProps,
-    ],
-  );
-
-  const resolveItemColors = ({isActive, isDisabled}) => {
-    if (isActive) {
-      return {
-        iconColor: activeIcon,
-        textColor: activeText,
-      };
-    }
-
-    if (isDisabled) {
-      return {
-        iconColor: colors.navigationDisabledIcon,
-        textColor: colors.navigationDisabledText,
-      };
-    }
-
-    return {
-      iconColor: inactiveIcon,
-      textColor: inactiveText,
-    };
-  };
-
-  const resolveItemStateStyles = ({isActive, isDisabled}) => [
-    styles.item,
-    isActive && styles.itemActive,
-    isDisabled && styles.itemDisabled,
-    isDisabled && {
-      backgroundColor: colors.navigationDisabledBackground,
-      borderColor: colors.navigationDisabledBorder,
-    },
-  ];
-
-  const resolvePressedStyles = ({pressed, isDisabled}) =>
-    pressed && !isDisabled
-      ? [
-          styles.itemPressed,
-        ]
-      : [];
-
-  useLayoutEffect(() => {
-    if (typeof registerBottomNavigation !== 'function') {
-      return undefined;
-    }
-
-    return registerBottomNavigation();
-  }, [registerBottomNavigation]);
-
-  const routeItems = Array.isArray(items) ? items : [];
-  const knownRoute = routeItems.some(item => item?.route === activeRouteName);
-  const effectiveActiveRoute = knownRoute
-    ? activeRouteName
-    : routeItems[0]?.route || '';
-
-  const navigateTo = item => {
-    try {
-      navigation?.navigate?.(item?.route, resolveMenuRouteParams(item?.routeParams));
-    } catch {
-      // Keep the footer stable if a route is unavailable in the current app flavor.
-    }
-  };
-
-  const hostProps = useModernWebChromeProps
-    ? {}
-    : {pointerEvents: 'box-none'};
-  const hostStyle = useModernWebChromeProps
-    ? [styles.host, styles.hostPointerEventsBoxNone]
-    : styles.host;
-  const footerProps = {
-    appVersion: runtimeFooter?.appVersion,
-    colors: runtimeFooter?.colors || {},
-    defaultCompany: runtimeFooter?.defaultCompany,
-    device: runtimeFooter?.device,
-    useModernWebChromeProps,
-  };
-
-  return (
-    <View {...hostProps} style={hostStyle}>
-      <View style={styles.stack}>
-        <View style={styles.dock} testID={testID}>
-          {routeItems.map(item => {
-            const isActive = effectiveActiveRoute === item.route;
-            const isDisabled = disabled || item.disabled;
-            const iconSize = item.iconSize || 18;
-            const {iconColor, textColor} = resolveItemColors({
-              isActive,
-              isDisabled,
-            });
-
-            return (
-              <Pressable
-                key={item.route}
-                accessibilityRole="button"
-                disabled={isDisabled}
-                onPress={() => navigateTo(item)}
-                style={({pressed}) => [
-                  ...resolveItemStateStyles({isActive, isDisabled}),
-                  ...resolvePressedStyles({pressed, isDisabled}),
-                ]}>
-                <View style={styles.iconWrap}>
-                  <Icon color={iconColor} name={item.icon} size={iconSize} />
-                </View>
-                <Text
-                  numberOfLines={1}
-                  style={[
-                    styles.itemLabel,
-                    {
-                      color: textColor,
-                    },
-                  ]}>
-                  {item.label}
-                </Text>
-              </Pressable>
-            );
-          })}
-        </View>
-
-        {runtimeFooter && (
-          <RuntimeInfoFooter {...footerProps} />
-        )}
-      </View>
-    </View>
-  );
-};
-
-export default BottomNavigationBar;
+import createStyles from './BottomNavigationBar.styles';
+
+const BottomNavigationBar = ({
+  navigation,
+  items = [],
+  activeRouteName,
+  disabled = false,
+  colors = {},
+  testID = 'bottom-navigation',
+  useModernWebChromeProps = false,
+}) => {
+  const theme = useTheme?.() || {};
+  const runtimeFooter = theme?.runtimeFooter || null;
+  const registerBottomNavigation =
+    theme?.bottomChrome?.registerBottomNavigation || null;
+  const activeBackground = colors.navigationActiveBackground;
+  const activeBorder = colors.navigationActiveBorder;
+  const activeIcon = colors.navigationActiveIcon;
+  const activeText = colors.navigationActiveText;
+  const dockBackground = colors.navigationBackground;
+  const dockBorder = colors.navigationBorder;
+  const dockShadow = colors.navigationShadow;
+  const inactiveIcon = colors.navigationIcon;
+  const inactiveText = colors.navigationText;
+
+  const styles = useMemo(
+    () =>
+      createStyles({
+        activeBackground,
+        dockBackground,
+        dockBorder,
+        dockShadow,
+        activeBorder,
+        useModernWebChromeProps,
+      }),
+    [
+      activeBackground,
+      activeBorder,
+      dockBackground,
+      dockBorder,
+      dockShadow,
+      useModernWebChromeProps,
+    ],
+  );
+
+  const resolveItemColors = ({isActive, isDisabled}) => {
+    if (isActive) {
+      return {
+        iconColor: activeIcon,
+        textColor: activeText,
+      };
+    }
+
+    if (isDisabled) {
+      return {
+        iconColor: colors.navigationDisabledIcon,
+        textColor: colors.navigationDisabledText,
+      };
+    }
+
+    return {
+      iconColor: inactiveIcon,
+      textColor: inactiveText,
+    };
+  };
+
+  const resolveItemStateStyles = ({isActive, isDisabled}) => [
+    styles.item,
+    isActive && styles.itemActive,
+    isDisabled && styles.itemDisabled,
+    isDisabled && {
+      backgroundColor: colors.navigationDisabledBackground,
+      borderColor: colors.navigationDisabledBorder,
+    },
+  ];
+
+  const resolvePressedStyles = ({pressed, isDisabled}) =>
+    pressed && !isDisabled
+      ? [
+          styles.itemPressed,
+        ]
+      : [];
+
+  useLayoutEffect(() => {
+    if (typeof registerBottomNavigation !== 'function') {
+      return undefined;
+    }
+
+    return registerBottomNavigation();
+  }, [registerBottomNavigation]);
+
+  const routeItems = Array.isArray(items) ? items : [];
+  const knownRoute = routeItems.some(item => item?.route === activeRouteName);
+  const effectiveActiveRoute = knownRoute
+    ? activeRouteName
+    : routeItems[0]?.route || '';
+
+  const navigateTo = item => {
+    try {
+      navigation?.navigate?.(item?.route, resolveMenuRouteParams(item?.routeParams));
+    } catch {
+      // Keep the footer stable if a route is unavailable in the current app flavor.
+    }
+  };
+
+  const hostProps = useModernWebChromeProps
+    ? {}
+    : {pointerEvents: 'box-none'};
+  const hostStyle = useModernWebChromeProps
+    ? [styles.host, styles.hostPointerEventsBoxNone]
+    : styles.host;
+  const footerProps = {
+    appVersion: runtimeFooter?.appVersion,
+    colors: runtimeFooter?.colors || {},
+    mainCompany: runtimeFooter?.mainCompany,
+    device: runtimeFooter?.device,
+    useModernWebChromeProps,
+  };
+
+  return (
+    <View {...hostProps} style={hostStyle}>
+      <View style={styles.stack}>
+        <View style={styles.dock} testID={testID}>
+          <View style={styles.itemsRow}>
+            {routeItems.map(item => {
+              const isActive = effectiveActiveRoute === item.route;
+              const isDisabled = disabled || item.disabled;
+              const iconSize = item.iconSize || 18;
+              const {iconColor, textColor} = resolveItemColors({
+                isActive,
+                isDisabled,
+              });
+
+              return (
+                <Pressable
+                  key={item.route}
+                  accessibilityRole="button"
+                  disabled={isDisabled}
+                  onPress={() => navigateTo(item)}
+                  style={({pressed}) => [
+                    ...resolveItemStateStyles({isActive, isDisabled}),
+                    ...resolvePressedStyles({pressed, isDisabled}),
+                  ]}>
+                  <View style={styles.iconWrap}>
+                    <Icon color={iconColor} name={item.icon} size={iconSize} />
+                  </View>
+                  <Text
+                    numberOfLines={1}
+                    style={[
+                      styles.itemLabel,
+                      {
+                        color: textColor,
+                      },
+                    ]}>
+                    {item.label}
+                  </Text>
+                </Pressable>
+              );
+            })}
+          </View>
+          {/* app-community#384: texto do rodapé DEPOIS dos botões (não antes) */}
+          {runtimeFooter ? (
+            <View style={styles.footerSlot} testID="bottom-navigation-footer-slot">
+              <RuntimeInfoFooter {...footerProps} />
+            </View>
+          ) : null}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default BottomNavigationBar;