@controleonline/ui-default 1.0.270 → 1.0.273

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

@@ -1,22 +1,32 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
+import DefaultExtraData from '../extra-data/DefaultExtraData';
+import DefaultFileColumn from '../files/DefaultFileColumn';
 import Icon from 'react-native-vector-icons/Feather';
-import {
-  buildReadPresentationStyles,
-  getColumnKey,
-  isDateLikeColumn,
-  isEditableColumn,
-  isValidFeatherIcon,
-  normalizeText,
-  resolveCellPresentation,
-  resolveCellText,
-  resolveEditValue,
-} from './defaultInputUtils';
-import DefaultDateInput from './DefaultDateInput';
-import DefaultSelect from './DefaultSelect';
-import styles from './DefaultInput.styles';
-
-const DefaultInput = ({
+import {
+  buildReadPresentationStyles,
+  getColumnKey,
+  isColorColumn,
+  isDateLikeColumn,
+  isEditableColumn,
+  isExtraDataColumn,
+  isFileColumn,
+  isIconColumn,
+  isValidFeatherIcon,
+  normalizeText,
+  resolveCellPresentation,
+  resolveCellText,
+  resolveEditValue,
+} from './defaultInputUtils';
+import DefaultColorInput from './DefaultColorInput';
+import DefaultDateInput from './DefaultDateInput';
+import DefaultFeatherIconPicker, {
+  normalizeFeatherIconName,
+} from './DefaultFeatherIconPicker';
+import DefaultSelect from './DefaultSelect';
+import styles from './DefaultInput.styles';
+
+const DefaultInput = ({
   accentColor = '#2563EB',
   autoFocus = true,
   autoSave = true,
@@ -24,17 +34,18 @@ const DefaultInput = ({
   columns = [],
   containerStyle = null,
   displayValue,
+  defaultColor = '',
   editing = false,
   getOptionsForColumn = null,
   inputStyle = null,
   label = '',
   numberOfLines = 1,
-  onBeforeOpen = null,
-  onCancelEditing = null,
-  onChangeValue = null,
-  onSave = null,
-  onSearchChange = null,
-  onStartEditing = null,
+  onBeforeOpen = null,
+  onCancelEditing = null,
+  onChangeValue = null,
+  onSave = null,
+  onSearchChange = null,
+  onStartEditing = null,
   readTextStyle = null,
   row = {},
   saving = false,
@@ -44,6 +55,9 @@ const DefaultInput = ({
   variant = 'cell',
 }) => {
   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(
@@ -51,25 +65,25 @@ const DefaultInput = ({
     [column, row, value],
   );
   const [draftValue, setDraftValue] = useState(editValue);
-  const resolvedLabel =
-    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
-  const readPresentation = useMemo(
-    () => resolveCellPresentation({ column, columns, row, storeName, value }),
-    [column, columns, row, storeName, value],
-  );
-  const readPresentationStyles = useMemo(
-    () => buildReadPresentationStyles({
-      ...readPresentation,
-      label: resolvedLabel,
-    }),
-    [readPresentation, resolvedLabel],
-  );
+  const resolvedLabel =
+    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+  const readPresentation = useMemo(
+    () => resolveCellPresentation({ column, columns, row, storeName, value }),
+    [column, columns, row, storeName, value],
+  );
+  const readPresentationStyles = useMemo(
+    () => buildReadPresentationStyles({
+      ...readPresentation,
+      label: resolvedLabel,
+    }),
+    [readPresentation, resolvedLabel],
+  );
 
   useEffect(() => {
     setDraftValue(editValue);
   }, [editValue, editing]);
 
-  if (column?.list) {
+  if (column?.list) {
     return (
       <DefaultSelect
         accentColor={accentColor}
@@ -96,37 +110,150 @@ const DefaultInput = ({
         variant={variant}
       />
     );
-  }
-
-  if (isDateLikeColumn(column)) {
-    return (
-      <DefaultDateInput
-        accentColor={accentColor}
-        autoFocus={autoFocus}
-        autoSave={autoSave}
-        column={column}
-        columns={columns}
-        containerStyle={containerStyle}
-        displayValue={displayValue}
-        editing={editing}
-        inputStyle={inputStyle}
-        label={label}
-        numberOfLines={numberOfLines}
-        onCancelEditing={onCancelEditing}
-        onChangeValue={onChangeValue}
-        onSave={onSave}
-        onSearchChange={onSearchChange}
-        onStartEditing={onStartEditing}
-        readTextStyle={readTextStyle}
-        row={row}
-        saving={saving}
-        showLabel={showLabel}
-        storeName={storeName}
-        value={value}
-        variant={variant}
-      />
-    );
-  }
+  }
+
+  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 (isIconColumn(column)) {
+    const fieldNameIcon = getColumnKey(column);
+    const rawIconValue = value ?? row?.[fieldNameIcon];
+    const selectedIcon = normalizeFeatherIconName(rawIconValue);
+    const isFormIcon = variant === 'form';
+    const canEditIcon = isEditableColumn(column) && typeof onStartEditing === 'function';
+
+    const commitIcon = nextIcon => {
+      const normalized = normalizeFeatherIconName(nextIcon);
+      if (autoSave) {
+        onSave?.(normalized);
+        return;
+      }
+      onChangeValue?.(normalized);
+    };
+
+    if (!editing && !isFormIcon) {
+      return (
+        <View style={[styles.wrap, containerStyle]}>
+          {showLabel ? (
+            <Text style={styles.fieldLabel}>{label || column?.label || fieldNameIcon}</Text>
+          ) : null}
+          <TouchableOpacity
+            style={styles.readButton}
+            activeOpacity={canEditIcon ? 0.78 : 1}
+            disabled={!canEditIcon}
+            onPress={() => onStartEditing?.()}
+          >
+            <View style={styles.readValueWrap}>
+              <Icon
+                name={selectedIcon || 'search'}
+                size={14}
+                color={selectedIcon ? '#0F172A' : '#94A3B8'}
+              />
+              <Text
+                style={[
+                  styles.readText,
+                  !selectedIcon ? styles.mutedText : null,
+                  readTextStyle,
+                ]}
+                numberOfLines={numberOfLines}
+              >
+                {selectedIcon || '-'}
+              </Text>
+            </View>
+            {saving ? (
+              <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+            ) : canEditIcon ? (
+              <Icon style={styles.editIcon} name="edit-2" size={13} color="#64748B" />
+            ) : null}
+          </TouchableOpacity>
+        </View>
+      );
+    }
+
+    return (
+      <View style={[styles.wrap, containerStyle]}>
+        {showLabel ? (
+          <Text style={styles.fieldLabel}>{label || column?.label || fieldNameIcon}</Text>
+        ) : null}
+        <View style={styles.editingWrap}>
+          <View style={styles.editingRow}>
+            <DefaultFeatherIconPicker
+              value={selectedIcon}
+              onChange={commitIcon}
+              placeholder={
+                global.t?.t(storeName, 'input', column?.label || fieldNameIcon) ||
+                'Buscar icone'
+              }
+              style={[isFormIcon ? styles.formInput : null, inputStyle, { flex: 1 }]}
+            />
+            {!isFormIcon ? (
+              <TouchableOpacity
+                style={styles.cancelButton}
+                activeOpacity={0.8}
+                onPress={onCancelEditing}
+              >
+                <Icon name="x" size={14} color="#64748B" />
+              </TouchableOpacity>
+            ) : null}
+          </View>
+          {saving ? <Text style={styles.savingText}>Salvando</Text> : null}
+        </View>
+      </View>
+    );
+  }
+
+  if (isDateLikeColumn(column)) {
+    return (
+      <DefaultDateInput
+        accentColor={accentColor}
+        autoFocus={autoFocus}
+        autoSave={autoSave}
+        column={column}
+        columns={columns}
+        containerStyle={containerStyle}
+        displayValue={displayValue}
+        editing={editing}
+        inputStyle={inputStyle}
+        label={label}
+        numberOfLines={numberOfLines}
+        onCancelEditing={onCancelEditing}
+        onChangeValue={onChangeValue}
+        onSave={onSave}
+        onSearchChange={onSearchChange}
+        onStartEditing={onStartEditing}
+        readTextStyle={readTextStyle}
+        row={row}
+        saving={saving}
+        showLabel={showLabel}
+        storeName={storeName}
+        value={value}
+        variant={variant}
+      />
+    );
+  }
 
   const saveDraft = () => {
     if (autoSave) {
@@ -142,81 +269,109 @@ const DefaultInput = ({
     if (!autoSave) onChangeValue?.(nextValue);
   };
 
-  if (!editing && !isForm) {
-    const readIconName = isValidFeatherIcon(readPresentation.icon)
-      ? readPresentation.icon
-      : '';
-    const shouldRenderIconFallbackText = Boolean(
-      readPresentationStyles.hasDecoration &&
-      !readIconName &&
-      readPresentationStyles.color &&
-      normalizeText(resolvedLabel) &&
-      resolvedLabel !== '-',
-    );
-
-    return (
-      <View style={[styles.wrap, containerStyle]}>
-        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
-        <TouchableOpacity
+  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
+      : '';
+    const shouldRenderIconFallbackText = Boolean(
+      readPresentationStyles.hasDecoration &&
+      !readIconName &&
+      readPresentationStyles.color &&
+      normalizeText(resolvedLabel) &&
+      resolvedLabel !== '-',
+    );
+
+    return (
+      <View style={[styles.wrap, containerStyle]}>
+        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
+        <TouchableOpacity
           style={styles.readButton}
           activeOpacity={canEdit ? 0.78 : 1}
-          disabled={!canEdit}
-          onPress={() => onStartEditing?.()}
-        >
-          {shouldRenderIconFallbackText ? (
-            <Text
-              style={[
-                styles.readText,
-                styles.readTextBadge,
-                readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
-                readTextStyle,
-              ]}
-              numberOfLines={numberOfLines}
-            >
-              {resolvedLabel}
-            </Text>
-          ) : (
-            <View
-              style={[
-                styles.readValueWrap,
-                readPresentationStyles.hasDecoration ? styles.readBadge : null,
-                readPresentationStyles.badgeStyle,
-              ]}
-            >
-              {readPresentation.image ? (
-                <Image
-                  source={readPresentation.image}
-                  style={styles.readImage}
-                  resizeMode="contain"
-                />
-              ) : null}
-              {readPresentationStyles.hasDecoration && readIconName && readPresentationStyles.color ? (
-                <Icon
-                  style={styles.readBadgeIcon}
-                  name={readIconName}
-                  size={12}
-                  color={readPresentationStyles.color}
-                />
-              ) : null}
-              <Text
-                style={[
-                  styles.readText,
-                  readPresentationStyles.hasDecoration ? styles.readBadgeText : null,
-                  resolvedLabel === '-' ? styles.mutedText : null,
-                  readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
-                  readTextStyle,
-                ]}
-                numberOfLines={numberOfLines}
-              >
-                {column?.prefix || ''}
-                {resolvedLabel || '-'}
-                {column?.sufix || column?.suffix || ''}
-              </Text>
-            </View>
-          )}
-          {saving ? (
-            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
-          ) : canEdit ? (
+          disabled={!canEdit}
+          onPress={() => onStartEditing?.()}
+        >
+          {shouldRenderIconFallbackText ? (
+            <Text
+              style={[
+                styles.readText,
+                styles.readTextBadge,
+                readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+                readTextStyle,
+              ]}
+              numberOfLines={numberOfLines}
+            >
+              {resolvedLabel}
+            </Text>
+          ) : (
+            <View
+              style={[
+                styles.readValueWrap,
+                readPresentationStyles.hasDecoration ? styles.readBadge : null,
+                readPresentationStyles.badgeStyle,
+              ]}
+            >
+              {readPresentation.image ? (
+                <Image
+                  source={readPresentation.image}
+                  style={styles.readImage}
+                  resizeMode="contain"
+                />
+              ) : null}
+              {readPresentationStyles.hasDecoration && readIconName && readPresentationStyles.color ? (
+                <Icon
+                  style={styles.readBadgeIcon}
+                  name={readIconName}
+                  size={12}
+                  color={readPresentationStyles.color}
+                />
+              ) : null}
+              <Text
+                style={[
+                  styles.readText,
+                  readPresentationStyles.hasDecoration ? styles.readBadgeText : null,
+                  resolvedLabel === '-' ? styles.mutedText : null,
+                  readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+                  readTextStyle,
+                ]}
+                numberOfLines={numberOfLines}
+              >
+                {column?.prefix || ''}
+                {resolvedLabel || '-'}
+                {column?.sufix || column?.suffix || ''}
+              </Text>
+            </View>
+          )}
+          {saving ? (
+            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
+          ) : canEdit ? (
             <Icon style={styles.editIcon} name="edit-2" size={13} color="#64748B" />
           ) : null}
         </TouchableOpacity>

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',