@controleonline/ui-default 1.0.270 → 1.0.272

package/src/react/components/inputs/DefaultFeatherIconPicker.js

@@ -0,0 +1,146 @@
+import React, {useEffect, useMemo, useState} from 'react';
+import {
+  Modal,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import FeatherGlyphMap from 'react-native-vector-icons/glyphmaps/Feather.json';
+import styles from './DefaultFeatherIconPicker.styles';
+
+export const FEATHER_ICON_OPTIONS = Object.keys(FeatherGlyphMap)
+  .sort((left, right) => left.localeCompare(right))
+  .map(name => ({
+    id: name,
+    icon: name,
+    label: name,
+  }));
+
+export const isValidFeatherIconName = value =>
+  Boolean(FeatherGlyphMap[String(value || '').trim()]);
+
+export const normalizeFeatherIconName = value => {
+  const icon = String(value || '').trim();
+  return isValidFeatherIconName(icon) ? icon : '';
+};
+
+const DefaultFeatherIconPicker = ({
+  accessibilityLabel = 'Selecionar icone',
+  modalTitle = 'Selecionar icone',
+  onChange,
+  placeholder = 'Buscar icone',
+  style,
+  value,
+}) => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const selectedIcon = normalizeFeatherIconName(value);
+  const hasPreview = Boolean(selectedIcon);
+
+  useEffect(() => {
+    if (!open) {
+      setQuery('');
+    }
+  }, [open]);
+
+  const filteredOptions = useMemo(() => {
+    const normalizedQuery = query.trim().toLowerCase();
+    if (!normalizedQuery) return FEATHER_ICON_OPTIONS;
+
+    return FEATHER_ICON_OPTIONS.filter(option =>
+      option.label.toLowerCase().includes(normalizedQuery),
+    );
+  }, [query]);
+
+  const selectIcon = icon => {
+    onChange?.(icon);
+    setOpen(false);
+  };
+
+  return (
+    <>
+      <TouchableOpacity
+        accessibilityLabel={accessibilityLabel}
+        activeOpacity={0.82}
+        style={[styles.field, style]}
+        onPress={() => setOpen(true)}
+      >
+        <View style={styles.valueWrap}>
+          <Icon
+            name={hasPreview ? selectedIcon : 'search'}
+            size={17}
+            color={hasPreview ? '#0F172A' : '#64748B'}
+          />
+          <Text
+            numberOfLines={1}
+            style={[
+              styles.valueText,
+              !hasPreview && styles.placeholderText,
+            ]}
+          >
+            {selectedIcon || placeholder}
+          </Text>
+        </View>
+        <Icon name="chevron-down" size={14} color="#64748B" />
+      </TouchableOpacity>
+
+      <Modal visible={open} transparent animationType="fade" onRequestClose={() => setOpen(false)}>
+        <View style={styles.modalOverlay}>
+          <View style={styles.modalPanel}>
+            <View style={styles.modalHeader}>
+              <Text style={styles.modalTitle}>{modalTitle}</Text>
+              <TouchableOpacity style={styles.closeButton} onPress={() => setOpen(false)}>
+                <Icon name="x" size={18} color="#334155" />
+              </TouchableOpacity>
+            </View>
+            <TextInput
+              style={styles.searchInput}
+              value={query}
+              onChangeText={setQuery}
+              placeholder="Filtrar"
+              placeholderTextColor="#94A3B8"
+            />
+            <ScrollView contentContainerStyle={styles.options}>
+              {filteredOptions.map(option => {
+                const selected = option.id === selectedIcon;
+
+                return (
+                  <TouchableOpacity
+                    key={option.id}
+                    style={[
+                      styles.optionRow,
+                      selected && styles.optionRowActive,
+                    ]}
+                    onPress={() => selectIcon(option.id)}
+                  >
+                    <View style={styles.optionGlyph}>
+                      <Icon
+                        name={option.icon}
+                        size={18}
+                        color={selected ? '#1D4ED8' : '#334155'}
+                      />
+                    </View>
+                    <Text
+                      numberOfLines={1}
+                      style={[
+                        styles.optionText,
+                        selected && styles.optionTextActive,
+                      ]}
+                    >
+                      {option.label}
+                    </Text>
+                  </TouchableOpacity>
+                );
+              })}
+            </ScrollView>
+          </View>
+        </View>
+      </Modal>
+    </>
+  );
+};
+
+export default DefaultFeatherIconPicker;

package/src/react/components/inputs/DefaultFeatherIconPicker.styles.js

@@ -0,0 +1,113 @@
+import {StyleSheet} from 'react-native';
+
+export default StyleSheet.create({
+  field: {
+    alignItems: 'center',
+    backgroundColor: '#FFFFFF',
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 8,
+    justifyContent: 'space-between',
+    minHeight: 38,
+    paddingHorizontal: 10,
+    paddingVertical: 8,
+  },
+  valueWrap: {
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'row',
+    gap: 8,
+    minWidth: 0,
+  },
+  valueText: {
+    color: '#0F172A',
+    flex: 1,
+    fontSize: 13,
+    fontWeight: '700',
+    minWidth: 0,
+  },
+  placeholderText: {
+    color: '#94A3B8',
+  },
+  modalOverlay: {
+    alignItems: 'center',
+    backgroundColor: 'rgba(15, 23, 42, 0.38)',
+    flex: 1,
+    justifyContent: 'center',
+    padding: 18,
+  },
+  modalPanel: {
+    backgroundColor: '#FFFFFF',
+    borderRadius: 8,
+    maxHeight: '82%',
+    maxWidth: 320,
+    padding: 14,
+    width: '100%',
+  },
+  modalHeader: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginBottom: 10,
+  },
+  modalTitle: {
+    color: '#0F172A',
+    fontSize: 16,
+    fontWeight: '800',
+  },
+  closeButton: {
+    alignItems: 'center',
+    backgroundColor: '#F1F5F9',
+    borderRadius: 8,
+    height: 34,
+    justifyContent: 'center',
+    width: 34,
+  },
+  searchInput: {
+    backgroundColor: '#F8FAFC',
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    borderWidth: 1,
+    color: '#0F172A',
+    fontSize: 13,
+    fontWeight: '700',
+    marginBottom: 10,
+    minHeight: 38,
+    paddingHorizontal: 10,
+  },
+  options: {
+    gap: 6,
+  },
+  optionRow: {
+    alignItems: 'center',
+    borderColor: '#E2E8F0',
+    borderRadius: 8,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 10,
+    paddingHorizontal: 10,
+    paddingVertical: 9,
+  },
+  optionRowActive: {
+    backgroundColor: '#EFF6FF',
+    borderColor: '#93C5FD',
+  },
+  optionGlyph: {
+    alignItems: 'center',
+    height: 24,
+    justifyContent: 'center',
+    width: 24,
+  },
+  optionText: {
+    color: '#0F172A',
+    flex: 1,
+    fontSize: 13,
+    fontWeight: '800',
+    minWidth: 0,
+  },
+  optionTextActive: {
+    color: '#1D4ED8',
+  },
+});

package/src/react/components/inputs/DefaultInput.js

@@ -1,17 +1,23 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState } from 'react';
 import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+import DefaultExtraData from '../extra-data/DefaultExtraData';
+import DefaultFileColumn from '../files/DefaultFileColumn';
+import Icon from 'react-native-vector-icons/Feather';
 import {
   buildReadPresentationStyles,
   getColumnKey,
+  isColorColumn,
   isDateLikeColumn,
   isEditableColumn,
+  isExtraDataColumn,
+  isFileColumn,
   isValidFeatherIcon,
   normalizeText,
   resolveCellPresentation,
   resolveCellText,
   resolveEditValue,
 } from './defaultInputUtils';
+import DefaultColorInput from './DefaultColorInput';
 import DefaultDateInput from './DefaultDateInput';
 import DefaultSelect from './DefaultSelect';
 import styles from './DefaultInput.styles';
@@ -23,8 +29,9 @@ const DefaultInput = ({
   column,
   columns = [],
   containerStyle = null,
-  displayValue,
-  editing = false,
+  displayValue,
+  defaultColor = '',
+  editing = false,
   getOptionsForColumn = null,
   inputStyle = null,
   label = '',
@@ -43,7 +50,10 @@ const DefaultInput = ({
   value,
   variant = 'cell',
 }) => {
-  const fieldName = getColumnKey(column);
+  const fieldName = getColumnKey(column);
+  const isExtraDataField = isExtraDataColumn(column) || ['extradata', 'extra_data'].includes(
+    normalizeText(fieldName).replace(/[^a-zA-Z0-9_]/g, '').toLowerCase(),
+  );
   const isForm = variant === 'form';
   const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
   const editValue = useMemo(
@@ -98,6 +108,32 @@ const DefaultInput = ({
     );
   }
 
+  if (isColorColumn(column)) {
+    return (
+      <DefaultColorInput
+        accentColor={accentColor}
+        autoFocus={autoFocus}
+        autoSave={autoSave}
+        column={column}
+        containerStyle={containerStyle}
+        defaultColor={defaultColor}
+        editing={editing}
+        inputStyle={inputStyle}
+        label={label}
+        onCancelEditing={onCancelEditing}
+        onChangeValue={onChangeValue}
+        onSave={onSave}
+        onStartEditing={onStartEditing}
+        row={row}
+        saving={saving}
+        showLabel={showLabel}
+        storeName={storeName}
+        value={value}
+        variant={variant}
+      />
+    );
+  }
+
   if (isDateLikeColumn(column)) {
     return (
       <DefaultDateInput
@@ -143,6 +179,34 @@ const DefaultInput = ({
   };
 
   if (!editing && !isForm) {
+    if (isExtraDataField) {
+      return (
+        <View style={[styles.wrap, containerStyle]}>
+          {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+          <DefaultExtraData
+            column={column}
+            row={row}
+            value={value ?? row?.[fieldName]}
+            variant={variant}
+          />
+        </View>
+      );
+    }
+
+    if (isFileColumn(column)) {
+      return (
+        <View style={[styles.wrap, containerStyle]}>
+          {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+          <DefaultFileColumn
+            column={column}
+            row={row}
+            value={value}
+            variant={variant}
+          />
+        </View>
+      );
+    }
+
     const readIconName = isValidFeatherIcon(readPresentation.icon)
       ? readPresentation.icon
       : '';

package/src/react/components/inputs/DefaultInput.styles.js

@@ -104,6 +104,32 @@ const styles = StyleSheet.create({
     fontWeight: '600',
     backgroundColor: '#FFFFFF',
   },
+  colorInput: {
+    fontFamily: 'monospace',
+    textTransform: 'uppercase',
+  },
+  invalidColorInput: {
+    borderColor: '#DC2626',
+  },
+  colorPreview: {
+    width: 18,
+    height: 18,
+    flexShrink: 0,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 5,
+  },
+  colorDefaultButton: {
+    width: 28,
+    height: 28,
+    flexShrink: 0,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 14,
+    backgroundColor: '#FFFFFF',
+  },
   formInput: {
     height: 34,
     borderColor: '#CBD5E1',