@controleonline/ui-default 1.0.263 → 1.0.265

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

@@ -0,0 +1,142 @@
+import React from 'react';
+import { Modal, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import DefaultColumnFilter from '../filters/DefaultColumnFilter';
+import { getColumnKey, normalizeText } from '../inputs/defaultInputUtils';
+import styles from './DefaultTable.styles';
+import { shouldIncludeColumn } from './DefaultTable.utils';
+import {
+  persistTableFiltersPreference,
+  resolveDefaultTablePreferenceScope,
+  sanitizeTableFiltersPreference,
+} from '../../utils/tableVisibleColumnsPreferences';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultFiltersModal = ({ storeName, visible = false, onClose }) => {
+  const store = useStore(storeName);
+  const columns = (Array.isArray(store?.getters?.columns) ? store.getters.columns : []).filter(
+    column =>
+      shouldIncludeColumn(column) &&
+      column?.filter !== false &&
+      column?.filters !== false,
+  );
+  const filters = store?.getters?.filters || {};
+  const configs = store?.getters?.configs || {};
+  const tablePreferenceScope =
+    configs.tablePreferenceScope ||
+    resolveDefaultTablePreferenceScope({ storeName });
+  const applyFilters = nextFilters => {
+    const persistedFilters = sanitizeTableFiltersPreference({
+      columns,
+      filters: nextFilters,
+    });
+
+    persistTableFiltersPreference(tablePreferenceScope, persistedFilters);
+
+    if (typeof store?.actions?.setFilters === 'function') {
+      store.actions.setFilters(nextFilters);
+    } else if (store?.getters) {
+      store.getters.filters = nextFilters;
+    }
+
+    configs.onFilterChange?.(nextFilters);
+  };
+  const updateFilter = (fieldName, value) => {
+    const nextFilters = { ...(filters || {}) };
+    const isEmpty =
+      value === null ||
+      value === undefined ||
+      normalizeText(value) === '' ||
+      (Array.isArray(value) && value.length === 0);
+
+    if (isEmpty) delete nextFilters[fieldName];
+    else nextFilters[fieldName] = value;
+
+    applyFilters(nextFilters);
+  };
+  const applyLabel = global.t?.t(storeName, 'button', 'apply');
+  const clearLabel = global.t?.t(storeName, 'button', 'clear');
+  const title = global.t?.t(storeName, 'label', 'filters');
+  const { modalColors, resolvedAccentColor } = useDefaultTableTheme();
+  if (!visible) return null;
+
+  const {
+    backgroundColor,
+    borderColor,
+    closeIconColor,
+    headerTextColor,
+    overlayColor,
+    textColor,
+  } = modalColors;
+
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={onClose}>
+      <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+        <View style={[styles.modalCard, styles.filtersModalCard, { borderColor, backgroundColor }]}>
+          <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+            <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
+              {title}
+            </Text>
+            <TouchableOpacity
+              style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
+              activeOpacity={0.82}
+              onPress={onClose}
+            >
+              <Icon name="x" size={16} color={closeIconColor} />
+            </TouchableOpacity>
+          </View>
+          <ScrollView style={styles.filtersModalBody} contentContainerStyle={styles.filtersModalList}>
+            {columns.map(column => {
+              const fieldName = getColumnKey(column);
+              const label = formatStoreColumnLabel({
+                columns,
+                fieldName,
+                fallbackLabel: column?.label || fieldName,
+                storeName,
+              });
+
+              return (
+                <View key={fieldName} style={styles.filtersModalField}>
+                  <Text style={[styles.formLabel, { color: textColor }]} numberOfLines={1}>
+                    {label}
+                  </Text>
+                  <DefaultColumnFilter
+                    column={column}
+                    filters={filters}
+                    onChange={updateFilter}
+                    storeName={storeName}
+                    style={styles.filtersModalInput}
+                  />
+                </View>
+              );
+            })}
+          </ScrollView>
+          <View style={[styles.modalActions, { borderTopColor: borderColor }]}>
+            <TouchableOpacity
+              style={[styles.secondaryButton, { borderColor }]}
+              activeOpacity={0.82}
+              onPress={() => applyFilters({})}
+            >
+              <Text style={[styles.secondaryButtonText, { color: textColor }]}>
+                {clearLabel}
+              </Text>
+            </TouchableOpacity>
+            <TouchableOpacity
+              style={[styles.primaryButton, { backgroundColor: resolvedAccentColor }]}
+              activeOpacity={0.82}
+              onPress={onClose}
+            >
+              <Text style={styles.primaryButtonText}>
+                {applyLabel}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DefaultFiltersModal;

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

@@ -0,0 +1,18 @@
+import React, { useCallback, useState } from 'react';
+
+const DefaultModalButton = ({ children, renderButton }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const close = useCallback(() => setIsOpen(false), []);
+  const open = useCallback(() => setIsOpen(true), []);
+  const toggle = useCallback(() => setIsOpen(prev => !prev), []);
+
+  return (
+    <>
+      {renderButton?.({ close, isOpen, open, toggle })}
+      {children?.({ close, isOpen, open, toggle })}
+    </>
+  );
+};
+
+export default DefaultModalButton;

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Modal, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import DefaultSearch from '../filters/DefaultSearch';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultSearchModal = ({ storeName, visible = false, onClose }) => {
+  const { modalColors } = useDefaultTableTheme();
+  if (!visible) return null;
+
+  const {
+    backgroundColor,
+    borderColor,
+    closeIconColor,
+    headerTextColor,
+    overlayColor,
+  } = modalColors;
+
+  return (
+    <Modal visible transparent animationType="fade" onRequestClose={onClose}>
+      <View style={[styles.modalOverlay, { backgroundColor: overlayColor }]}>
+        <View style={[styles.modalCard, styles.searchModalCard, { borderColor, backgroundColor }]}>
+          <View style={[styles.modalHeader, { borderBottomColor: borderColor }]}>
+            <Text style={[styles.modalTitle, { color: headerTextColor }]} numberOfLines={1}>
+              {global.t?.t(storeName, 'label', 'search')}
+            </Text>
+            <TouchableOpacity
+              style={[styles.modalCloseButton, { borderColor, backgroundColor }]}
+              activeOpacity={0.82}
+              onPress={onClose}
+            >
+              <Icon name="x" size={16} color={closeIconColor} />
+            </TouchableOpacity>
+          </View>
+          <View style={styles.searchModalBody}>
+            <DefaultSearch
+              autoFocus
+              storeName={storeName}
+              onSearch={onClose}
+            />
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+export default DefaultSearchModal;