@controleonline/ui-default 1.0.263

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

@@ -0,0 +1,177 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    alignItems: 'center',
+    gap: 8,
+    marginTop: 8,
+  },
+  field: {
+    minWidth: 136,
+    flexGrow: 1,
+    flexBasis: 160,
+  },
+  inputWrap: {
+    minHeight: 40,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 12,
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+  },
+  inputLabel: {
+    color: '#94A3B8',
+    fontSize: 9,
+    fontWeight: '900',
+    letterSpacing: 0.35,
+    textTransform: 'uppercase',
+  },
+  input: {
+    minHeight: 20,
+    padding: 0,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '800',
+  },
+  clearButton: {
+    height: 40,
+    minWidth: 40,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    backgroundColor: '#FFFFFF',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 10,
+  },
+  mobileWrap: {
+    alignItems: 'flex-start',
+  },
+  mobileButton: {
+    minHeight: 38,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  mobileButtonText: {
+    color: '#0F172A',
+    fontSize: 12,
+    lineHeight: 14,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  mobileCountBadge: {
+    minWidth: 19,
+    height: 19,
+    borderRadius: 10,
+    paddingHorizontal: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  mobileCountBadgeText: {
+    color: '#FFFFFF',
+    fontSize: 11,
+    lineHeight: 13,
+    fontWeight: '900',
+  },
+  modalOverlay: {
+    flex: 1,
+    backgroundColor: 'rgba(15, 23, 42, 0.42)',
+    justifyContent: 'flex-end',
+  },
+  modalCard: {
+    width: '100%',
+    maxHeight: '86%',
+    borderTopLeftRadius: 18,
+    borderTopRightRadius: 18,
+    backgroundColor: '#FFFFFF',
+    paddingHorizontal: 14,
+    paddingTop: 14,
+    paddingBottom: 12,
+  },
+  modalHeader: {
+    minHeight: 34,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+    marginBottom: 10,
+  },
+  modalTitle: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 17,
+    lineHeight: 20,
+    fontWeight: '900',
+  },
+  modalCloseButton: {
+    width: 34,
+    height: 34,
+    borderRadius: 17,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    backgroundColor: '#F8FAFC',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalScroll: {
+    flexGrow: 0,
+  },
+  modalContent: {
+    gap: 8,
+    paddingBottom: 10,
+  },
+  modalField: {
+    width: '100%',
+    minWidth: 0,
+    flexGrow: 0,
+  },
+  modalActions: {
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    paddingTop: 10,
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+    gap: 8,
+  },
+  modalSecondaryButton: {
+    minHeight: 38,
+    borderRadius: 999,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalSecondaryButtonText: {
+    color: '#334155',
+    fontSize: 12,
+    lineHeight: 14,
+    fontWeight: '900',
+  },
+  modalPrimaryButton: {
+    minHeight: 38,
+    borderRadius: 999,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  modalPrimaryButtonText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    lineHeight: 14,
+    fontWeight: '900',
+  },
+});
+
+export default styles;

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

@@ -0,0 +1,103 @@
+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;

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

@@ -0,0 +1,70 @@
+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;

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

@@ -0,0 +1,29 @@
+const EMPTY_CUSTOM_RANGE = {
+  from: '',
+  to: '',
+};
+
+export const resolveNextDateFilterValue = (currentValue, optionKey) => {
+  if (optionKey === 'all') {
+    return null;
+  }
+
+  if (optionKey === 'custom') {
+    return currentValue && typeof currentValue === 'object'
+      ? currentValue
+      : {
+        shortcut: 'custom',
+        customRange: EMPTY_CUSTOM_RANGE,
+      };
+  }
+
+  return {
+    ...(currentValue && typeof currentValue === 'object' ? currentValue : {}),
+    shortcut: optionKey,
+    customRange:
+      currentValue?.customRange && typeof currentValue.customRange === 'object'
+        ? currentValue.customRange
+        : EMPTY_CUSTOM_RANGE,
+  };
+};
+

package/src/react/components/form/DefaultForm.js

@@ -0,0 +1,198 @@
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import DefaultInput from '../inputs/DefaultInput';
+import {
+  formatSaveValue,
+  getColumnKey,
+  isEditableColumn,
+  normalizeId,
+  normalizeText,
+  resolveEditValue,
+} from '../inputs/defaultInputUtils';
+import styles from './DefaultForm.styles';
+
+const hasValue = value => {
+  if (value === null || value === undefined) return false;
+  if (typeof value === 'boolean' || typeof value === 'number') return true;
+  if (typeof value === 'object') {
+    return normalizeText(value.value ?? value.id ?? value['@id'] ?? '') !== '';
+  }
+
+  return normalizeText(value) !== '';
+};
+
+const resolveDefaultValue = (column, row) => {
+  const fieldName = getColumnKey(column);
+  if (row && row[fieldName] !== undefined) return row[fieldName];
+  if (typeof column?.defaultValue === 'function') return column.defaultValue(row, column);
+  if (column?.defaultValue !== undefined) return column.defaultValue;
+  if (typeof column?.initialValue === 'function') return column.initialValue(row, column);
+  if (column?.initialValue !== undefined) return column.initialValue;
+  return undefined;
+};
+
+const shouldIncludeColumn = (column, row, mode) => {
+  const fieldName = getColumnKey(column);
+  if (!fieldName || column?.isIdentity === true) return false;
+  if (column?.form === false || column?.multiline === true) return false;
+  if (mode === 'create' && column?.add === false) return false;
+  if (mode !== 'create' && !isEditableColumn(column)) return false;
+  if (typeof column?.visibleForm === 'function') {
+    return column.visibleForm(row, column) !== false;
+  }
+
+  return column?.visibleForm !== false;
+};
+
+const buildDraft = (columns, row) =>
+  columns.reduce((draft, column) => {
+    const fieldName = getColumnKey(column);
+    const defaultValue = resolveDefaultValue(column, row);
+    draft[fieldName] = resolveEditValue(column, row, defaultValue);
+    return draft;
+  }, {});
+
+const DefaultForm = ({
+  accentColor = '#2563EB',
+  actions = {},
+  columns = [],
+  getOptionsForColumn = null,
+  mode = 'edit',
+  onCancel = null,
+  onSaved = null,
+  row = {},
+  storeName = '',
+}) => {
+  const formColumns = useMemo(
+    () => columns.filter(column => shouldIncludeColumn(column, row, mode)),
+    [columns, mode, row],
+  );
+  const [draft, setDraft] = useState(() => buildDraft(formColumns, row));
+  const [isSaving, setIsSaving] = useState(false);
+
+  useEffect(() => {
+    setDraft(buildDraft(formColumns, row));
+  }, [formColumns, row]);
+
+  const save = useCallback(() => {
+    if (typeof actions.save !== 'function') {
+      onCancel?.();
+      return Promise.resolve(null);
+    }
+
+    const isCreate = mode === 'create';
+    const payload = isCreate
+      ? {}
+      : { id: normalizeId(row?.['@id'] || row?.id) };
+
+    formColumns.forEach(column => {
+      const fieldName = getColumnKey(column);
+      const nextValue = draft[fieldName];
+
+      if (isCreate) {
+        if (hasValue(nextValue)) {
+          payload[fieldName] = formatSaveValue(column, nextValue, row);
+        }
+        return;
+      }
+
+      const currentValue = resolveEditValue(column, row);
+      if (normalizeText(currentValue) !== normalizeText(nextValue)) {
+        payload[fieldName] = formatSaveValue(column, nextValue, row);
+      }
+    });
+
+    const payloadKeys = Object.keys(payload);
+    if ((isCreate && payloadKeys.length === 0) || (!isCreate && payloadKeys.length <= 1)) {
+      onCancel?.();
+      return Promise.resolve(null);
+    }
+
+    setIsSaving(true);
+
+    return actions.save(payload)
+      .then(savedItem => {
+        onSaved?.(savedItem || { ...row, ...draft }, row);
+        return savedItem;
+      })
+      .catch(error => {
+        console.error(error);
+        return null;
+      })
+      .finally(() => {
+        setIsSaving(false);
+      });
+  }, [actions, draft, formColumns, mode, onCancel, onSaved, row]);
+
+  return (
+    <>
+      <ScrollView style={styles.body} keyboardShouldPersistTaps="handled">
+        {formColumns.length > 0 ? (
+          <View style={styles.formGrid}>
+            {formColumns.map(column => {
+              const fieldName = getColumnKey(column);
+              const label = formatStoreColumnLabel({
+                columns,
+                fieldName,
+                fallbackLabel: column?.label || fieldName,
+                storeName,
+              });
+
+              return (
+                <View key={fieldName} style={styles.formField}>
+                  <DefaultInput
+                    accentColor={accentColor}
+                    autoFocus={false}
+                    autoSave={false}
+                    column={column}
+                    columns={columns}
+                    editing
+                    getOptionsForColumn={getOptionsForColumn}
+                    label={label}
+                    onChangeValue={value => setDraft(prev => ({ ...prev, [fieldName]: value }))}
+                    row={row}
+                    showLabel
+                    storeName={storeName}
+                    value={draft[fieldName]}
+                    variant="form"
+                  />
+                </View>
+              );
+            })}
+          </View>
+        ) : (
+          <View style={styles.emptyBox}>
+            <Text style={styles.emptyText}>
+              {global.t?.t(storeName, 'label', 'no_fields') || 'Nenhum campo disponivel'}
+            </Text>
+          </View>
+        )}
+      </ScrollView>
+
+      <View style={styles.actions}>
+        <TouchableOpacity style={styles.secondaryButton} onPress={onCancel}>
+          <Text style={styles.secondaryButtonText}>
+            {global.t?.t(storeName, 'button', 'cancel') || 'Cancelar'}
+          </Text>
+        </TouchableOpacity>
+        <TouchableOpacity
+          style={[
+            styles.primaryButton,
+            { backgroundColor: accentColor },
+            isSaving ? styles.primaryButtonDisabled : null,
+          ]}
+          activeOpacity={0.86}
+          disabled={isSaving}
+          onPress={save}
+        >
+          <Text style={styles.primaryButtonText}>
+            {isSaving ? 'Salvando' : global.t?.t(storeName, 'button', 'save') || 'Salvar'}
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </>
+  );
+};
+
+export default DefaultForm;

package/src/react/components/form/DefaultForm.styles.js

@@ -0,0 +1,70 @@
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  body: {
+    maxHeight: 520,
+  },
+  formGrid: {
+    padding: 14,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  formField: {
+    flexGrow: 1,
+    flexBasis: 220,
+    minWidth: 220,
+  },
+  emptyBox: {
+    padding: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  emptyText: {
+    color: '#64748B',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  actions: {
+    minHeight: 52,
+    paddingHorizontal: 14,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 8,
+  },
+  secondaryButton: {
+    height: 34,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  secondaryButtonText: {
+    color: '#334155',
+    fontSize: 12,
+    fontWeight: '800',
+  },
+  primaryButton: {
+    height: 34,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  primaryButtonDisabled: {
+    opacity: 0.62,
+  },
+  primaryButtonText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '900',
+  },
+});
+
+export default styles;