@controleonline/ui-common 1.2.87 → 1.2.89

package/src/api/localDB.js

@@ -1,131 +1,86 @@
-import { openDB } from "idb";
-
-const DB_NAME = "ControleOnline";
-
-export default class localDB {
-  constructor(state) {
-    this.state = state;
-
-    this.checkAndGetDB();
-  }
-
-  async initDB() {
-    let dbPromise = openDB(DB_NAME, this.currentVersion, {
-      upgrade: (db) => {
-        if (!db.objectStoreNames.contains(this.state.resourceEndpoint)) {
-          const store = db.createObjectStore(this.state.resourceEndpoint, {
-            keyPath: "id",
-          });
-          this.state.columns
-            .filter((col) => col.sortable || col.externalFilter === false)
-            .forEach((col) => {
-              store.createIndex(col.name, col.name, { unique: false });
-            });
-        }
-      },
-    });
-    return dbPromise;
-  }
-
-  async getCurrentVersion() {
-    // Obtém a versão atual do banco de dados
-    return new Promise((resolve) => {
-      const request = indexedDB.open(DB_NAME);
-      request.onsuccess = () => {
-        const db = request.result;
-        const currentVersion = db.currentVersion;
-        db.close();
-        resolve(currentVersion);
-        this.currentVersion = currentVersion;
-      };
-      request.onerror = () => resolve(1);
-    });
-  }
-
-  async checkAndGetDB() {
-    return this.getCurrentVersion().then(() => {
-      return this.initDB().then((db) => {
-        if (!this.storeExists()) {
-          this.currentVersion = db.currentVersion + 1;
-          db.close();
-          return this.initDB();
-        }
-        return db;
-      });
-    });
-  }
-
-  async storeExists() {
-    return this.checkAndGetDB().then((db) => {
-      return db.objectStoreNames.contains(this.state.resourceEndpoint);
-    });
-  }
-
-  async getAll() {
-    if (!(await this.storeExists())) {
-      return null;
-    }
-    const db = await this.checkAndGetDB();
-    return db.getAll(this.state.resourceEndpoint);
-  }
-
-  async getItemsByColumn(columnName, value) {
-    if (!(await this.storeExists())) {
-      return null;
-    }
-    const db = await this.checkAndGetDB();
-    const tx = db.transaction(this.state.resourceEndpoint, "readonly");
-    const store = tx.objectStore(this.state.resourceEndpoint);
-    const index = store.index(columnName);
-    const results = await index.getAll(value);
-    await tx.done;
-    return results;
-  }
-
-  async get(id) {
-    if (!(await this.storeExists())) {
-      return null;
-    }
-    const db = await this.checkAndGetDB();
-    return db.get(this.state.resourceEndpoint, id);
-  }
-
-  async saveItems(items) {
-    const db = await this.checkAndGetDB();
-    const tx = db.transaction(this.state.resourceEndpoint, "readwrite");
-    const store = tx.objectStore(this.state.resourceEndpoint);
-    await Promise.all(items.map((item) => store.put(item)));
-    await tx.done;
-  }
-
-  async saveItem(item) {
-    const db = await this.checkAndGetDB();
-    return db.put(this.state.resourceEndpoint, item);
-  }
-
-  async getItemsByFilters() {
-    if (!(await this.storeExists())) {
-      return null;
-    }
-    const db = await this.checkAndGetDB();
-    if (Object.keys(this.state.filters).length === 0) {
-      return this.getAll();
-    }
-
-    const filterPromises = Object.entries(this.state.filters).map(
-      async ([key, value]) => {
-        const column = this.state.columns.find((col) => col.name === key);
-        if (column && (column.sortable || column.externalFilter === false)) {
-          return this.getItemsByColumn(key, value);
-        }
-        return null;
-      }
-    );
-
-    const filterResults = await Promise.all(filterPromises);
-    return filterResults.reduce((acc, curr) => {
-      if (!acc || acc.length === 0) return curr;
-      return acc.filter((item) => curr.some((result) => result.id === item.id));
-    }, []);
-  }
-}
+import {openDB} from 'idb';
+
+const DB_NAME = 'ControleOnline';
+
+export default class localDB {
+  constructor(state) {
+    this.state = state;
+    this.db = null;
+    this.opening = null;
+  }
+
+  async initDB() {
+    const endpoint = this.state.resourceEndpoint;
+    const upgrade = db => {
+      if (db.objectStoreNames.contains(endpoint)) return;
+      const store = db.createObjectStore(endpoint, {keyPath: 'id'});
+      (this.state.columns || []).forEach(column => {
+        if (column.name && (column.sortable || column.externalFilter === false)) {
+          store.createIndex(column.name, column.name, {unique: false});
+        }
+      });
+    };
+    const blocking = () => { this.db?.close(); this.db = null; };
+    let db = await openDB(DB_NAME, undefined, {upgrade, blocking});
+    if (!db.objectStoreNames.contains(endpoint)) {
+      const version = db.version + 1;
+      db.close();
+      db = await openDB(DB_NAME, version, {upgrade, blocking});
+    }
+    this.db = db;
+    return db;
+  }
+
+  async getCurrentVersion() {
+    return (await this.checkAndGetDB()).version;
+  }
+
+  checkAndGetDB() {
+    if (this.db) return Promise.resolve(this.db);
+    if (!this.opening) {
+      this.opening = this.initDB().finally(() => { this.opening = null; });
+    }
+    return this.opening;
+  }
+
+  async storeExists() {
+    return (await this.checkAndGetDB()).objectStoreNames.contains(this.state.resourceEndpoint);
+  }
+
+  async getAll() {
+    return (await this.checkAndGetDB()).getAll(this.state.resourceEndpoint);
+  }
+
+  async getItemsByColumn(columnName, value) {
+    const db = await this.checkAndGetDB();
+    const tx = db.transaction(this.state.resourceEndpoint, 'readonly');
+    if (!tx.store.indexNames.contains(columnName)) return [];
+    const items = await tx.store.index(columnName).getAll(value);
+    await tx.done;
+    return items;
+  }
+
+  async get(id) {
+    return (await this.checkAndGetDB()).get(this.state.resourceEndpoint, id);
+  }
+
+  async saveItems(items) {
+    const db = await this.checkAndGetDB();
+    const tx = db.transaction(this.state.resourceEndpoint, 'readwrite');
+    await Promise.all(items.map(item => tx.store.put(item)));
+    await tx.done;
+  }
+
+  async saveItem(item) {
+    return (await this.checkAndGetDB()).put(this.state.resourceEndpoint, item);
+  }
+
+  async getItemsByFilters() {
+    const filters = Object.entries(this.state.filters || {});
+    if (!filters.length) return this.getAll();
+    const matches = await Promise.all(filters.map(([key, value]) =>
+      this.getItemsByColumn(key, value)));
+    return matches.reduce((items, next) => items.filter(item =>
+      next.some(result => result.id === item.id)));
+  }
+}

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;