@controleonline/ui-default 1.0.265 → 1.0.267

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.265",
+  "version": "1.0.267",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

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

@@ -1,19 +1,21 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Text, TextInput, TouchableOpacity, View } from 'react-native';
+import { Image, Text, TextInput, TouchableOpacity, View } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
-import {
+import {
+  buildReadPresentationStyles,
   getColumnKey,
   isDateLikeColumn,
   isEditableColumn,
-  normalizeText,
-  resolveCellText,
-  resolveEditValue,
+  normalizeText,
+  resolveCellPresentation,
+  resolveCellText,
+  resolveEditValue,
 } from './defaultInputUtils';
 import DefaultDateInput from './DefaultDateInput';
 import DefaultSelect from './DefaultSelect';
-import styles from './DefaultInput.styles';
-
-const DefaultInput = ({
+import styles from './DefaultInput.styles';
+
+const DefaultInput = ({
   accentColor = '#2563EB',
   autoFocus = true,
   autoSave = true,
@@ -48,8 +50,19 @@ const DefaultInput = ({
     [column, row, value],
   );
   const [draftValue, setDraftValue] = useState(editValue);
-  const resolvedLabel =
-    displayValue ?? resolveCellText({ column, columns, row, storeName, value });
+  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);
@@ -128,31 +141,56 @@ const DefaultInput = ({
     if (!autoSave) onChangeValue?.(nextValue);
   };
 
-  if (!editing && !isForm) {
-    return (
-      <View style={[styles.wrap, containerStyle]}>
-        {showLabel ? <Text style={styles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
-        <TouchableOpacity
+  if (!editing && !isForm) {
+    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?.()}
-        >
-          <Text
-            style={[
-              styles.readText,
-              resolvedLabel === '-' ? styles.mutedText : null,
-              readTextStyle,
-            ]}
-            numberOfLines={numberOfLines}
-          >
-            {column?.prefix || ''}
-            {resolvedLabel || '-'}
-            {column?.sufix || column?.suffix || ''}
-          </Text>
-          {saving ? (
-            <Text style={[styles.savingText, { color: accentColor }]}>Salvando</Text>
-          ) : canEdit ? (
+          disabled={!canEdit}
+          onPress={() => onStartEditing?.()}
+        >
+          <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 && readPresentation.icon && readPresentationStyles.color ? (
+              <Icon
+                style={styles.readBadgeIcon}
+                name={readPresentation.icon}
+                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

@@ -13,6 +13,38 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 6,
   },
+  readValueWrap: {
+    flex: 1,
+    minWidth: 0,
+    maxWidth: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 5,
+  },
+  readBadge: {
+    flex: 0,
+    alignSelf: 'flex-start',
+    minHeight: 22,
+    maxWidth: '100%',
+    borderWidth: 1,
+    borderRadius: 6,
+    paddingHorizontal: 7,
+    paddingVertical: 2,
+  },
+  readBadgeText: {
+    flex: 0,
+    flexShrink: 1,
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  readBadgeIcon: {
+    flexShrink: 0,
+  },
+  readImage: {
+    width: 16,
+    height: 16,
+    flexShrink: 0,
+  },
   readButtonForm: {
     minHeight: 34,
     borderWidth: 1,
@@ -25,8 +57,8 @@ const styles = StyleSheet.create({
     flex: 1,
     minWidth: 0,
     color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
+    fontSize: 13,
+    fontWeight: '600',
   },
   mutedText: {
     color: '#94A3B8',
@@ -62,8 +94,8 @@ const styles = StyleSheet.create({
     borderRadius: 8,
     paddingHorizontal: 8,
     color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
+    fontSize: 13,
+    fontWeight: '600',
     backgroundColor: '#FFFFFF',
   },
   formInput: {

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

@@ -1,7 +1,8 @@
 import React, { useCallback, useMemo, useRef, useState } from 'react';
 import {
-  Modal,
-  ScrollView,
+  Modal,
+  Image,
+  ScrollView,
   Text,
   TextInput,
   TouchableOpacity,
@@ -10,12 +11,14 @@ import {
 import Icon from 'react-native-vector-icons/Feather';
 import { getAllStores, useStore } from '@store';
 import {
+  buildReadPresentationStyles,
   buildOptionsFromColumn,
   getColumnKey,
   isEditableColumn,
   mapOptions,
   normalizeOptionKey,
   normalizeText,
+  resolveCellPresentation,
   resolveCellText,
   resolveEditValue,
   resolveStoreNameFromList,
@@ -140,11 +143,22 @@ const DefaultSelect = ({
     ];
   }, [column, getOptionsForColumn, loadedItems, storeName]);
   const selected = options.find(option => option.key === selectedKey);
-  const resolvedLabel =
-    displayValue ??
-    selected?.label ??
-    resolveCellText({ column, columns, row, storeName, value });
-  const canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
+  const resolvedLabel =
+    displayValue ??
+    selected?.label ??
+    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 canEdit = isEditableColumn(column) && typeof onStartEditing === 'function';
   const isForm = variant === 'form';
   const filteredOptions = useMemo(() => {
     const query = normalizeText(searchText).toLowerCase();
@@ -281,20 +295,45 @@ const DefaultSelect = ({
         activeOpacity={canEdit || isForm ? 0.78 : 1}
         disabled={!canEdit && !isForm}
         onPress={open}
-      >
-        <Text
-          style={[
-            inputStyles.readText,
-            resolvedLabel === '-' ? inputStyles.mutedText : null,
-            readTextStyle,
-          ]}
-          numberOfLines={numberOfLines}
-        >
-          {resolvedLabel || '-'}
-        </Text>
-        {saving ? (
-          <Text style={[inputStyles.savingText, { color: accentColor }]}>Salvando</Text>
-        ) : canEdit || isForm ? (
+      >
+        <View
+          style={[
+            inputStyles.readValueWrap,
+            readPresentationStyles.hasDecoration ? inputStyles.readBadge : null,
+            readPresentationStyles.badgeStyle,
+          ]}
+        >
+          {readPresentation.image ? (
+            <Image
+              source={readPresentation.image}
+              style={inputStyles.readImage}
+              resizeMode="contain"
+            />
+          ) : null}
+          {readPresentationStyles.hasDecoration && readPresentation.icon && readPresentationStyles.color ? (
+            <Icon
+              style={inputStyles.readBadgeIcon}
+              name={readPresentation.icon}
+              size={12}
+              color={readPresentationStyles.color}
+            />
+          ) : null}
+          <Text
+            style={[
+              inputStyles.readText,
+              readPresentationStyles.hasDecoration ? inputStyles.readBadgeText : null,
+              resolvedLabel === '-' ? inputStyles.mutedText : null,
+              readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+              readTextStyle,
+            ]}
+            numberOfLines={numberOfLines}
+          >
+            {resolvedLabel || '-'}
+          </Text>
+        </View>
+        {saving ? (
+          <Text style={[inputStyles.savingText, { color: accentColor }]}>Salvando</Text>
+        ) : canEdit || isForm ? (
           <Icon style={inputStyles.editIcon} name="chevron-down" size={14} color="#64748B" />
         ) : null}
       </TouchableOpacity>
@@ -322,24 +361,33 @@ const DefaultSelect = ({
 
             <ScrollView keyboardShouldPersistTaps="handled">
               {filteredOptions.length > 0 ? (
-                filteredOptions.map(option => {
-                  const isSelected = option.key === selectedKey;
-                  return (
-                    <TouchableOpacity
-                      key={`${option.key}_${option.label}`}
+                filteredOptions.map(option => {
+                  const isSelected = option.key === selectedKey;
+                  return (
+                    <TouchableOpacity
+                      key={`${option.key}_${option.label}`}
                       style={styles.optionRow}
                       activeOpacity={0.78}
                       onPress={() => selectOption(option)}
                     >
-                      <Icon
-                        name={isSelected ? 'check-circle' : 'circle'}
-                        size={15}
-                        color={isSelected ? accentColor : '#CBD5E1'}
-                      />
-                      <Text style={styles.optionText}>
-                        {option.label}
-                      </Text>
-                    </TouchableOpacity>
+                      {option.image ? (
+                        <Image
+                          source={option.image}
+                          style={inputStyles.readImage}
+                          resizeMode="contain"
+                        />
+                      ) : null}
+                      {isSelected || (option.icon && option.color) ? (
+                        <Icon
+                          name={isSelected ? 'check-circle' : option.icon}
+                          size={15}
+                          color={isSelected ? accentColor : option.color}
+                        />
+                      ) : null}
+                      <Text style={[styles.optionText, option.color ? { color: option.color } : null]}>
+                        {option.label}
+                      </Text>
+                    </TouchableOpacity>
                   );
                 })
               ) : (

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

@@ -128,7 +128,7 @@ export const resolveOptionLabel = (column, option, storeName = '') => {
 export const resolveStoreNameFromList = list =>
   typeof list === 'string' ? normalizeText(list).split('/')[0] || '' : '';
 
-const filterItemsByListRequestParams = (items = [], column = null) => {
+const filterItemsByListRequestParams = (items = [], column = null) => {
   const requestParams =
     column?.listRequestParams &&
     typeof column.listRequestParams === 'object' &&
@@ -148,14 +148,17 @@ const filterItemsByListRequestParams = (items = [], column = null) => {
 
       return normalizeText(item?.[key]) === normalizeText(expectedValue);
     }),
-  );
-};
-
-export const mapOptions = (column, items = [], storeName = '') => {
-  const seenKeys = new Set();
-  const options = [];
-
-  (Array.isArray(items) ? items : []).forEach(item => {
+  );
+};
+
+const normalizeObject = value =>
+  value && typeof value === 'object' && !Array.isArray(value) ? value : {};
+
+export const mapOptions = (column, items = [], storeName = '') => {
+  const seenKeys = new Set();
+  const options = [];
+
+  (Array.isArray(items) ? items : []).forEach(item => {
     const formatted =
       typeof column?.formatList === 'function'
         ? column.formatList(item, null, column)
@@ -166,12 +169,31 @@ export const mapOptions = (column, items = [], storeName = '') => {
     if (dedupeKey && seenKeys.has(dedupeKey)) return;
     if (dedupeKey) seenKeys.add(dedupeKey);
 
-    options.push({
-      key,
-      label: resolveOptionLabel(column, item, storeName) || '-',
-      raw: item,
-    });
-  });
+    const formattedMeta = normalizeObject(formatted);
+    const itemMeta = normalizeObject(item);
+    const color = formattedMeta.color ?? itemMeta.color;
+    const icon =
+      formattedMeta.icon ??
+      formattedMeta.iconName ??
+      itemMeta.icon ??
+      itemMeta.iconName;
+    const image =
+      formattedMeta.image ??
+      formattedMeta.logo ??
+      formattedMeta.source ??
+      itemMeta.image ??
+      itemMeta.logo ??
+      itemMeta.source;
+
+    options.push({
+      ...(color ? { color } : {}),
+      ...(icon ? { icon } : {}),
+      ...(image ? { image } : {}),
+      key,
+      label: resolveOptionLabel(column, item, storeName) || '-',
+      raw: item,
+    });
+  });
 
   return options;
 };
@@ -197,23 +219,148 @@ export const buildOptionsFromColumn = (column, getOptionsForColumn = null, store
   );
 };
 
-export const resolveCellText = ({ column, columns = [], row, storeName, value }) => {
-  const fieldName = getColumnKey(column);
-  const rawValue = value ?? row?.[fieldName];
-  const formattedValue = formatStoreColumnValue({
+export const resolveCellText = ({ column, columns = [], row, storeName, value }) => {
+  const fieldName = getColumnKey(column);
+  const rawValue = value ?? row?.[fieldName];
+  const formattedValue = formatStoreColumnValue({
     columns: columns.length ? columns : [column],
     fieldName,
     row,
     storeName,
     value: rawValue,
   });
-
-  return normalizeText(formattedValue) || '-';
-};
-
-export const resolveEditValue = (column, row, value) => {
-  const rawValue = value ?? row?.[getColumnKey(column)];
-  if (column?.list) {
+
+  return normalizeText(formattedValue) || '-';
+};
+
+const resolveFormattedListMeta = (column, rawValue, row) => {
+  if (typeof column?.formatList !== 'function') {
+    return {};
+  }
+
+  const formatted = column.formatList(rawValue, row, column);
+  return normalizeObject(formatted);
+};
+
+const resolveStyleMeta = (column, row) => {
+  if (typeof column?.style !== 'function') {
+    return normalizeObject(column?.style);
+  }
+
+  return normalizeObject(column.style(row));
+};
+
+export const resolveCellPresentation = ({
+  column,
+  columns = [],
+  row = {},
+  storeName = '',
+  value,
+} = {}) => {
+  const fieldName = getColumnKey(column);
+  const rawValue = value ?? row?.[fieldName];
+  const rawMeta = normalizeObject(rawValue);
+  const formattedMeta = resolveFormattedListMeta(column, rawValue, row);
+  const styleMeta = resolveStyleMeta(column, row);
+  const label = resolveCellText({
+    column,
+    columns,
+    row,
+    storeName,
+    value,
+  });
+
+  return {
+    backgroundColor:
+      formattedMeta.backgroundColor ??
+      formattedMeta.bgColor ??
+      rawMeta.backgroundColor ??
+      rawMeta.bgColor ??
+      styleMeta.backgroundColor ??
+      styleMeta.bgColor,
+    borderColor:
+      formattedMeta.borderColor ??
+      rawMeta.borderColor ??
+      styleMeta.borderColor,
+    color:
+      formattedMeta.color ??
+      rawMeta.color ??
+      rawMeta.statusColor ??
+      rawMeta.categoryColor ??
+      styleMeta.color,
+    icon:
+      formattedMeta.icon ??
+      formattedMeta.iconName ??
+      rawMeta.icon ??
+      rawMeta.iconName ??
+      styleMeta.icon ??
+      styleMeta.iconName,
+    image:
+      formattedMeta.image ??
+      formattedMeta.logo ??
+      formattedMeta.source ??
+      rawMeta.image ??
+      rawMeta.logo ??
+      rawMeta.source ??
+      styleMeta.image ??
+      styleMeta.logo ??
+      styleMeta.source,
+    label,
+  };
+};
+
+const resolveAlphaColor = (color, opacity = 0.12) => {
+  const normalized = normalizeText(color);
+  const hex = normalized.match(/^#?([a-f\d]{6})$/i)?.[1];
+
+  if (!hex) return normalized || undefined;
+
+  const red = parseInt(hex.slice(0, 2), 16);
+  const green = parseInt(hex.slice(2, 4), 16);
+  const blue = parseInt(hex.slice(4, 6), 16);
+
+  return `rgba(${red}, ${green}, ${blue}, ${opacity})`;
+};
+
+export const buildReadPresentationStyles = presentation => {
+  const color = normalizeText(presentation?.color);
+  const icon = normalizeText(presentation?.icon);
+  const hasDecoration = Boolean(
+    color ||
+    normalizeText(presentation?.backgroundColor) ||
+    normalizeText(presentation?.borderColor) ||
+    (icon && color),
+  );
+
+  if (!hasDecoration || presentation?.label === '-') {
+    return {
+      badgeStyle: null,
+      color: null,
+      hasDecoration: false,
+    };
+  }
+
+  const backgroundColor =
+    presentation.backgroundColor ||
+    (color ? resolveAlphaColor(color, 0.1) : undefined);
+  const borderColor =
+    presentation.borderColor ||
+    presentation.backgroundColor ||
+    (color ? resolveAlphaColor(color, 0.32) : undefined);
+
+  return {
+    badgeStyle: {
+      backgroundColor,
+      borderColor,
+    },
+    color: color || undefined,
+    hasDecoration: true,
+  };
+};
+
+export const resolveEditValue = (column, row, value) => {
+  const rawValue = value ?? row?.[getColumnKey(column)];
+  if (column?.list) {
     return normalizeOptionKey(
       typeof column?.formatList === 'function'
         ? column.formatList(rawValue, row, column)