@controleonline/ui-default 1.0.263 → 1.0.264

package/src/react/components/files/DefaultFile.js

@@ -1,46 +1,46 @@
-import React, {memo, useMemo} from 'react';
-import {Image} from 'react-native';
-import {useStore} from '@store';
-import {resolveDefaultFileSource} from '@controleonline/ui-common/src/react/utils/fileUrl';
-
-const resolveCompanyFromStore = peopleGetters => {
-  if (peopleGetters?.defaultCompany?.id) {
-    return peopleGetters.defaultCompany;
-  }
-
-  if (peopleGetters?.currentCompany?.id) {
-    return peopleGetters.currentCompany;
-  }
-
-  return null;
-};
-
-const DefaultFile = ({
-  file,
-  source,
-  company,
-  appDomain = '',
-  headers = {},
-  ...imageProps
-}) => {
-  const peopleStore = useStore('people');
-  const peopleGetters = peopleStore?.getters || {};
-  const resolvedCompany = company || resolveCompanyFromStore(peopleGetters);
-  const resolvedSource = useMemo(
-    () =>
-      resolveDefaultFileSource(source ?? file, {
-        company: resolvedCompany,
-        appDomain,
-        headers,
-      }),
-    [appDomain, company, file, headers, resolvedCompany, source],
-  );
-
-  if (!resolvedSource) {
-    return null;
-  }
-
-  return <Image {...imageProps} source={resolvedSource} />;
-};
-
-export default memo(DefaultFile);
+import React, {memo, useMemo} from 'react';
+import {Image} from 'react-native';
+import {useStore} from '@store';
+import {resolveDefaultFileSource} from '@controleonline/ui-common/src/react/utils/fileUrl';
+
+const resolveCompanyFromStore = peopleGetters => {
+  if (peopleGetters?.defaultCompany?.id) {
+    return peopleGetters.defaultCompany;
+  }
+
+  if (peopleGetters?.currentCompany?.id) {
+    return peopleGetters.currentCompany;
+  }
+
+  return null;
+};
+
+const DefaultFile = ({
+  file,
+  source,
+  company,
+  appDomain = '',
+  headers = {},
+  ...imageProps
+}) => {
+  const peopleStore = useStore('people');
+  const peopleGetters = peopleStore?.getters || {};
+  const resolvedCompany = company || resolveCompanyFromStore(peopleGetters);
+  const resolvedSource = useMemo(
+    () =>
+      resolveDefaultFileSource(source ?? file, {
+        company: resolvedCompany,
+        appDomain,
+        headers,
+      }),
+    [appDomain, company, file, headers, resolvedCompany, source],
+  );
+
+  if (!resolvedSource) {
+    return null;
+  }
+
+  return <Image {...imageProps} source={resolvedSource} />;
+};
+
+export default memo(DefaultFile);

package/src/react/components/filters/CompactFilterSelector.js

@@ -89,6 +89,7 @@ const CompactFilterSelector = ({
   label = '',
   labelCaption = '',
   onClose = null,
+  onBeforeOpen = null,
   onSelect = null,
   options = [],
   selectedKey = '',
@@ -121,10 +122,28 @@ const CompactFilterSelector = ({
   }, [onClose]);
 
   const openModal = useCallback(() => {
-    if (!disabled) {
-      setVisible(true);
+    if (disabled) {
+      return;
     }
-  }, [disabled]);
+
+    try {
+      const maybePromise = onBeforeOpen?.();
+      if (maybePromise && typeof maybePromise.then === 'function') {
+        maybePromise
+          .then(() => {
+            setVisible(true);
+          })
+          .catch(() => {
+            // Keep the modal closed if the lazy load fails.
+          });
+        return;
+      }
+    } catch (error) {
+      return;
+    }
+
+    setVisible(true);
+  }, [disabled, onBeforeOpen]);
 
   const handleSelect = useCallback(optionKey => {
     const shouldClose = onSelect?.(optionKey, {

package/src/react/components/filters/DefaultColumnFilter.js

@@ -13,11 +13,12 @@ import styles from './DefaultColumnFilter.styles';
 
 const DefaultColumnFilter = ({
   accentColor = '#2563EB',
-  column,
-  filters = {},
-  getOptionsForColumn = null,
-  onChange = null,
-  storeName = '',
+  column,
+  filters = {},
+  onBeforeOpen = null,
+  getOptionsForColumn = null,
+  onChange = null,
+  storeName = '',
   style = null,
 }) => {
   const fieldName = getColumnKey(column);
@@ -63,14 +64,15 @@ const DefaultColumnFilter = ({
 
     return (
       <View style={[style, styles.filterCell]}>
-        <CompactFilterSelector
-          dense
-          store={storeName}
-          field={fieldName}
-          icon="filter"
-          accentColor={accentColor}
-          active={Boolean(selectedKey)}
-          label={selected?.label || options[0]?.label || ''}
+        <CompactFilterSelector
+          dense
+          store={storeName}
+          field={fieldName}
+          icon="filter"
+          onBeforeOpen={onBeforeOpen}
+          accentColor={accentColor}
+          active={Boolean(selectedKey)}
+          label={selected?.label || options[0]?.label || ''}
           options={options}
           selectedKey={selectedKey}
           onSelect={optionKey => {

package/src/react/components/filters/DefaultExternalFilters.js

@@ -183,11 +183,11 @@ const DefaultExternalFilters = ({
   storeName = '',
 }) => {
   const { width } = useWindowDimensions();
-  const peopleStore = useStore('people');
-  const themeStore = useStore('theme');
-  const [isFiltersModalOpen, setIsFiltersModalOpen] = useState(false);
-  const { currentCompany } = peopleStore.getters || {};
-  const { colors: themeColors } = themeStore.getters || {};
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+  const [isFiltersModalOpen, setIsFiltersModalOpen] = useState(false);
+  const { currentCompany } = peopleStore.getters || {};
+  const { colors: themeColors } = themeStore.getters;
   const themeTokens = useMemo(
     () => ({...themeColors, ...(currentCompany?.theme?.colors || {})}),
     [currentCompany?.theme?.colors, themeColors],
@@ -199,10 +199,15 @@ const DefaultExternalFilters = ({
   const resolvedAccentColor = accentColor || palette.primary;
   const surfaceColor = themeTokens['bg-odd-light'] || palette.background;
   const panelColor = themeTokens['bg-headers-light'] || palette.background;
-  const borderColor = palette.border;
-  const textColor = palette.text;
-  const textSecondaryColor = palette.textSecondary;
-  const onAccentColor = palette.secondary || palette.text;
+  const borderColor = palette.border;
+  const textColor = palette.text;
+  const textSecondaryColor = palette.textSecondary;
+  const buttonBackgroundColor = themeColors.buttonBackground;
+  const buttonTextColor = themeColors.buttonText;
+  const tableFilterBackgroundColor = themeColors.tableFilterBackground;
+  const tableFilterBorderColor = themeColors.tableFilterBorder;
+  const tableFilterTextColor = themeColors.tableFilterText;
+  const onAccentColor = palette.secondary || palette.text;
   const isCompactView = width > 0 && width <= compactBreakpoint;
   const filterColumns = useMemo(
     () => columns.filter(shouldIncludeColumn),
@@ -335,30 +340,30 @@ const DefaultExternalFilters = ({
   if (isCompactView) {
     return (
       <View style={styles.mobileWrap}>
-        <TouchableOpacity
-          style={[
-            styles.mobileButton,
-            { borderColor: borderColor, backgroundColor: surfaceColor },
-            activeCount > 0 ? { borderColor: resolvedAccentColor, backgroundColor: withOpacity(resolvedAccentColor, 0.14) } : null,
-          ]}
-          activeOpacity={0.84}
-          onPress={() => setIsFiltersModalOpen(true)}
-        >
-          <Icon name="filter" size={15} color={activeCount > 0 ? resolvedAccentColor : textSecondaryColor} />
-          <Text
-            style={[
-              styles.mobileButtonText,
-              { color: textColor },
-              activeCount > 0 ? { color: resolvedAccentColor } : null,
-            ]}
-          >
-            {filterTitle}
-          </Text>
-          {activeCount > 0 ? (
-            <View style={[styles.mobileCountBadge, { backgroundColor: resolvedAccentColor }]}>
-              <Text style={styles.mobileCountBadgeText}>{activeCount}</Text>
-            </View>
-          ) : null}
+        <TouchableOpacity
+          style={[
+            styles.mobileButton,
+            { borderColor: borderColor, backgroundColor: surfaceColor },
+            activeCount > 0 ? { borderColor: tableFilterBorderColor, backgroundColor: tableFilterBackgroundColor } : null,
+          ]}
+          activeOpacity={0.84}
+          onPress={() => setIsFiltersModalOpen(true)}
+        >
+          <Icon name="filter" size={15} color={activeCount > 0 ? tableFilterTextColor : textSecondaryColor} />
+          <Text
+            style={[
+              styles.mobileButtonText,
+              { color: textColor },
+              activeCount > 0 ? { color: tableFilterTextColor } : null,
+            ]}
+          >
+            {filterTitle}
+          </Text>
+          {activeCount > 0 ? (
+            <View style={[styles.mobileCountBadge, { backgroundColor: tableFilterBorderColor }]}>
+              <Text style={styles.mobileCountBadgeText}>{activeCount}</Text>
+            </View>
+          ) : null}
         </TouchableOpacity>
 
         <Modal
@@ -402,12 +407,12 @@ const DefaultExternalFilters = ({
                         </Text>
                       </TouchableOpacity>
                     ) : null}
-                    <TouchableOpacity
-                      style={[styles.modalPrimaryButton, { backgroundColor: resolvedAccentColor }]}
-                      activeOpacity={0.84}
-                      onPress={() => setIsFiltersModalOpen(false)}
-                    >
-                      <Text style={[styles.modalPrimaryButtonText, { color: onAccentColor }]}>
+                    <TouchableOpacity
+                      style={[styles.modalPrimaryButton, { backgroundColor: buttonBackgroundColor }]}
+                      activeOpacity={0.84}
+                      onPress={() => setIsFiltersModalOpen(false)}
+                    >
+                      <Text style={[styles.modalPrimaryButtonText, { color: buttonTextColor }]}>
                         {global.t?.t(storeName, 'button', 'apply')}
                       </Text>
                     </TouchableOpacity>

package/src/react/components/filters/DefaultSearch.js

@@ -1,103 +1,140 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { TextInput, TouchableOpacity, View } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import styles from './DefaultSearch.styles';
-
-const normalizeText = value => String(value || '').trim();
-
-const DefaultSearch = ({
-  accentColor = '#2563EB',
-  autoFocus = false,
-  compact = false,
-  filters = null,
-  onChangeFilters = null,
-  onClear = null,
-  onSearch = null,
-  placeholder = '',
-  searchKey = 'search',
-  storeName = '',
-  style = null,
-  value,
-}) => {
-  const resolvedValue = useMemo(
-    () => normalizeText(value ?? filters?.[searchKey]),
-    [filters, searchKey, value],
-  );
-  const [draftValue, setDraftValue] = useState(resolvedValue);
-
-  useEffect(() => {
-    setDraftValue(resolvedValue);
-  }, [resolvedValue]);
-
-  const commitSearch = nextValue => {
-    const searchValue = normalizeText(nextValue ?? draftValue);
-
-    if (typeof onChangeFilters === 'function') {
-      const nextFilters = { ...(filters || {}) };
-      if (searchValue) nextFilters[searchKey] = searchValue;
-      else delete nextFilters[searchKey];
-      onChangeFilters(nextFilters);
-    }
-
-    onSearch?.(searchValue);
-  };
-
-  const clearSearch = () => {
-    setDraftValue('');
-
-    if (typeof onChangeFilters === 'function') {
-      const nextFilters = { ...(filters || {}) };
-      delete nextFilters[searchKey];
-      onChangeFilters(nextFilters);
-    }
-
-    onClear?.();
-    onSearch?.('');
-  };
-
-  const resolvedPlaceholder =
-    placeholder ||
-    global.t?.t(storeName, 'input', searchKey) ||
-    global.t?.t(storeName, 'placeholder', searchKey) ||
-    'Buscar...';
-
-  return (
-    <View style={[styles.wrap, compact ? styles.wrapCompact : null, style]}>
-      <Icon name="search" size={compact ? 14 : 16} color="#64748B" />
-      <TextInput
-        autoCapitalize="none"
-        autoCorrect={false}
-        autoFocus={autoFocus}
-        placeholder={resolvedPlaceholder}
-        placeholderTextColor="#94A3B8"
-        returnKeyType="search"
-        style={[styles.input, compact ? styles.inputCompact : null]}
-        value={draftValue}
-        onChangeText={setDraftValue}
-        onSubmitEditing={() => commitSearch()}
-      />
-      {draftValue ? (
-        <TouchableOpacity
-          style={[styles.iconButton, compact ? styles.iconButtonCompact : null]}
-          activeOpacity={0.82}
-          onPress={clearSearch}
-        >
-          <Icon name="x" size={14} color="#64748B" />
-        </TouchableOpacity>
-      ) : null}
-      <TouchableOpacity
-        style={[
-          styles.searchButton,
-          compact ? styles.searchButtonCompact : null,
-          { borderColor: accentColor },
-        ]}
-        activeOpacity={0.82}
-        onPress={() => commitSearch()}
-      >
-        <Icon name="arrow-right" size={compact ? 13 : 15} color={accentColor} />
-      </TouchableOpacity>
-    </View>
-  );
-};
-
-export default DefaultSearch;
+import React, { useEffect, useMemo, useState } from 'react';
+import { TextInput, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import styles from './DefaultSearch.styles';
+
+const normalizeText = value => String(value || '').trim();
+
+const DefaultSearch = ({
+  autoFocus = false,
+  compact = false,
+  filters = null,
+  onChangeFilters = null,
+  onClear = null,
+  onSearch = null,
+  placeholder = '',
+  searchKey = 'search',
+  storeName = '',
+  style = null,
+  value,
+}) => {
+  const themeStore = useStore('theme');
+  const themeColors = themeStore.getters.colors;
+  const palette = useMemo(
+    () => ({
+      buttonBackgroundSecondary: themeColors.buttonBackgroundSecondary,
+      buttonBorder: themeColors.buttonBorder,
+      buttonIcon: themeColors.buttonIcon,
+      buttonIconSecondary: themeColors.buttonIconSecondary,
+      inputBackground: themeColors.inputBackground,
+      inputBorder: themeColors.inputBorder,
+      inputIcon: themeColors.inputIcon,
+      inputPlaceholderText: themeColors.inputPlaceholderText,
+      inputText: themeColors.inputText,
+    }),
+    [themeColors],
+  );
+  const resolvedValue = useMemo(
+    () => normalizeText(value ?? filters?.[searchKey]),
+    [filters, searchKey, value],
+  );
+  const [draftValue, setDraftValue] = useState(resolvedValue);
+
+  useEffect(() => {
+    setDraftValue(resolvedValue);
+  }, [resolvedValue]);
+
+  const commitSearch = nextValue => {
+    const searchValue = normalizeText(nextValue ?? draftValue);
+
+    if (typeof onChangeFilters === 'function') {
+      const nextFilters = { ...(filters || {}) };
+      if (searchValue) nextFilters[searchKey] = searchValue;
+      else delete nextFilters[searchKey];
+      onChangeFilters(nextFilters);
+    }
+
+    onSearch?.(searchValue);
+  };
+
+  const clearSearch = () => {
+    setDraftValue('');
+
+    if (typeof onChangeFilters === 'function') {
+      const nextFilters = { ...(filters || {}) };
+      delete nextFilters[searchKey];
+      onChangeFilters(nextFilters);
+    }
+
+    onClear?.();
+    onSearch?.('');
+  };
+
+  const resolvedPlaceholder =
+    placeholder ||
+    global.t?.t(storeName, 'input', searchKey) ||
+    global.t?.t(storeName, 'placeholder', searchKey) ||
+    'Buscar...';
+
+  return (
+    <View
+      style={[
+        styles.wrap,
+        compact ? styles.wrapCompact : null,
+        {
+          backgroundColor: palette.inputBackground,
+          borderColor: palette.inputBorder,
+        },
+        style,
+      ]}
+    >
+      <Icon name="search" size={compact ? 14 : 16} color={palette.inputIcon} />
+      <TextInput
+        autoCapitalize="none"
+        autoCorrect={false}
+        autoFocus={autoFocus}
+        placeholder={resolvedPlaceholder}
+        placeholderTextColor={palette.inputPlaceholderText}
+        returnKeyType="search"
+        style={[
+          styles.input,
+          compact ? styles.inputCompact : null,
+          { color: palette.inputText },
+        ]}
+        value={draftValue}
+        onChangeText={setDraftValue}
+        onSubmitEditing={() => commitSearch()}
+      />
+      {draftValue ? (
+        <TouchableOpacity
+          style={[
+            styles.iconButton,
+            compact ? styles.iconButtonCompact : null,
+            { backgroundColor: palette.buttonBackgroundSecondary },
+          ]}
+          activeOpacity={0.82}
+          onPress={clearSearch}
+        >
+          <Icon name="x" size={14} color={palette.buttonIconSecondary} />
+        </TouchableOpacity>
+      ) : null}
+      <TouchableOpacity
+        style={[
+          styles.searchButton,
+          compact ? styles.searchButtonCompact : null,
+          {
+            backgroundColor: palette.buttonBackgroundSecondary,
+            borderColor: palette.buttonBorder,
+          },
+        ]}
+        activeOpacity={0.82}
+        onPress={() => commitSearch()}
+      >
+        <Icon name="arrow-right" size={compact ? 13 : 15} color={palette.buttonIcon} />
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default DefaultSearch;

package/src/react/components/filters/DefaultSearch.styles.js

@@ -1,70 +1,65 @@
-import { StyleSheet } from 'react-native';
-
-const styles = StyleSheet.create({
-  wrap: {
-    minHeight: 40,
-    minWidth: 180,
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-    borderRadius: 12,
-    backgroundColor: '#FFFFFF',
-    paddingLeft: 10,
-    paddingRight: 5,
-    paddingVertical: 5,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  wrapCompact: {
-    minHeight: 30,
-    minWidth: 150,
-    maxWidth: 240,
-    borderRadius: 15,
-    paddingLeft: 9,
-    paddingRight: 3,
-    paddingVertical: 3,
-    gap: 6,
-  },
-  input: {
-    flex: 1,
-    minWidth: 0,
-    padding: 0,
-    color: '#0F172A',
-    fontSize: 13,
-    lineHeight: 16,
-    fontWeight: '700',
-  },
-  inputCompact: {
-    fontSize: 12,
-    lineHeight: 14,
-  },
-  iconButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#F8FAFC',
-  },
-  iconButtonCompact: {
-    width: 22,
-    height: 22,
-    borderRadius: 11,
-  },
-  searchButton: {
-    width: 30,
-    height: 30,
-    borderRadius: 15,
-    borderWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
-  },
-  searchButtonCompact: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-  },
-});
-
-export default styles;
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  wrap: {
+    minHeight: 40,
+    minWidth: 180,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingLeft: 10,
+    paddingRight: 5,
+    paddingVertical: 5,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  wrapCompact: {
+    minHeight: 30,
+    minWidth: 150,
+    maxWidth: 240,
+    borderRadius: 15,
+    paddingLeft: 9,
+    paddingRight: 3,
+    paddingVertical: 3,
+    gap: 6,
+  },
+  input: {
+    flex: 1,
+    minWidth: 0,
+    padding: 0,
+    fontSize: 13,
+    lineHeight: 16,
+    fontWeight: '700',
+  },
+  inputCompact: {
+    fontSize: 12,
+    lineHeight: 14,
+  },
+  iconButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconButtonCompact: {
+    width: 22,
+    height: 22,
+    borderRadius: 11,
+  },
+  searchButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  searchButtonCompact: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+  },
+});
+
+export default styles;