@controleonline/ui-default 1.0.263 → 1.0.265

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

@@ -1,103 +1,142 @@
-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,
+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 store = useStore(storeName);
+  const themeStore = useStore('theme');
+  const themeColors = themeStore.getters.colors;
+  const resolvedFilters = filters || store?.getters?.filters || {};
+  const resolvedChangeFilters = onChangeFilters || store?.actions?.setFilters || null;
+  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],
+    () => normalizeText(value ?? resolvedFilters?.[searchKey]),
+    [resolvedFilters, 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 || {}) };
+  const [draftValue, setDraftValue] = useState(resolvedValue);
+
+  useEffect(() => {
+    setDraftValue(resolvedValue);
+  }, [resolvedValue]);
+
+  const commitSearch = nextValue => {
+    const searchValue = normalizeText(nextValue ?? draftValue);
+
+    if (typeof resolvedChangeFilters === 'function') {
+      const nextFilters = { ...(resolvedFilters || {}) };
       if (searchValue) nextFilters[searchKey] = searchValue;
       else delete nextFilters[searchKey];
-      onChangeFilters(nextFilters);
+      resolvedChangeFilters(nextFilters);
     }
-
-    onSearch?.(searchValue);
-  };
-
-  const clearSearch = () => {
-    setDraftValue('');
-
-    if (typeof onChangeFilters === 'function') {
-      const nextFilters = { ...(filters || {}) };
+
+    onSearch?.(searchValue);
+  };
+
+  const clearSearch = () => {
+    setDraftValue('');
+
+    if (typeof resolvedChangeFilters === 'function') {
+      const nextFilters = { ...(resolvedFilters || {}) };
       delete nextFilters[searchKey];
-      onChangeFilters(nextFilters);
+      resolvedChangeFilters(nextFilters);
     }
-
-    onClear?.();
-    onSearch?.('');
-  };
-
+
+    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;
+    global.t?.t(storeName, 'placeholder', searchKey);
+
+  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;