@controleonline/ui-default 1.0.266 → 1.0.268

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,15 @@ import {
 import Icon from 'react-native-vector-icons/Feather';
 import { getAllStores, useStore } from '@store';
 import {
+  buildReadPresentationStyles,
   buildOptionsFromColumn,
   getColumnKey,
   isEditableColumn,
+  isValidFeatherIcon,
   mapOptions,
   normalizeOptionKey,
   normalizeText,
+  resolveCellPresentation,
   resolveCellText,
   resolveEditValue,
   resolveStoreNameFromList,
@@ -140,12 +144,33 @@ 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 isForm = variant === 'form';
+  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 readIconName = isValidFeatherIcon(readPresentation.icon)
+    ? readPresentation.icon
+    : '';
+  const shouldRenderIconFallbackText = Boolean(
+    readPresentationStyles.hasDecoration &&
+    !readIconName &&
+    readPresentationStyles.color &&
+    normalizeText(resolvedLabel) &&
+    resolvedLabel !== '-',
+  );
   const filteredOptions = useMemo(() => {
     const query = normalizeText(searchText).toLowerCase();
     if (!query || onSearchChange) return options;
@@ -276,25 +301,64 @@ const DefaultSelect = ({
     <View style={[inputStyles.wrap, containerStyle]}>
       {showLabel ? <Text style={inputStyles.fieldLabel}>{label || column?.label || fieldName}</Text> : null}
 
-      <TouchableOpacity
-        style={[inputStyles.readButton, isForm ? inputStyles.readButtonForm : null]}
-        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 ? (
+      <TouchableOpacity
+        style={[inputStyles.readButton, isForm ? inputStyles.readButtonForm : null]}
+        activeOpacity={canEdit || isForm ? 0.78 : 1}
+        disabled={!canEdit && !isForm}
+        onPress={open}
+      >
+        {shouldRenderIconFallbackText ? (
+          <Text
+            style={[
+              inputStyles.readText,
+              inputStyles.readTextBadge,
+              readPresentationStyles.color ? { color: readPresentationStyles.color } : null,
+              readTextStyle,
+            ]}
+            numberOfLines={numberOfLines}
+          >
+            {resolvedLabel}
+          </Text>
+        ) : (
+          <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 && readIconName && readPresentationStyles.color ? (
+              <Icon
+                style={inputStyles.readBadgeIcon}
+                name={readIconName}
+                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 +386,49 @@ 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;
+                  const optionColor = normalizeText(option.color);
+                  const optionIconName = isValidFeatherIcon(option.icon)
+                    ? option.icon
+                    : '';
+                  const shouldRenderOptionFallbackText = Boolean(
+                    !option.image &&
+                    !optionIconName &&
+                    optionColor &&
+                    normalizeText(option.label),
+                  );
+                  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 || (optionIconName && optionColor) ? (
+                        <Icon
+                          name={isSelected ? 'check-circle' : optionIconName}
+                          size={15}
+                          color={isSelected ? accentColor : optionColor}
+                        />
+                      ) : null}
+                      <Text
+                        style={[
+                          styles.optionText,
+                          optionColor ? { color: optionColor } : null,
+                          shouldRenderOptionFallbackText ? styles.optionFallbackText : null,
+                        ]}
+                      >
+                        {option.label}
+                      </Text>
+                    </TouchableOpacity>
                   );
                 })
               ) : (

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

@@ -51,6 +51,9 @@ const styles = StyleSheet.create({
     fontSize: 13,
     fontWeight: '700',
   },
+  optionFallbackText: {
+    fontWeight: '800',
+  },
   emptyBox: {
     padding: 18,
     alignItems: 'center',

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

@@ -1,9 +1,11 @@
-import { getAllStores } from '@store';
-import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
-import { formatStoreColumnValue } from '@controleonline/ui-common/src/react/utils/storeColumns';
-
-export const normalizeText = value => String(value ?? '').trim();
-const formatHumanLabel = value =>
+import { getAllStores } from '@store';
+import Formatter from '@controleonline/ui-common/src/utils/formatter.js';
+import { formatStoreColumnValue } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import FeatherGlyphMap from 'react-native-vector-icons/glyphmaps/Feather.json';
+
+export const normalizeText = value => String(value ?? '').trim();
+export const isValidFeatherIcon = icon => Boolean(FeatherGlyphMap[normalizeText(icon)]);
+const formatHumanLabel = value =>
   normalizeText(value)
     .replace(/([a-z])([A-Z])/g, '$1 $2')
     .replace(/[_-]+/g, ' ')
@@ -128,7 +130,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 +150,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 +171,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 +221,167 @@ 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 resolveFormattedValueMeta = (column, rawValue, row) => {
+  if (typeof column?.format !== 'function') {
+    return {};
+  }
+
+  const formatted = column.format(rawValue, column, row, false);
+  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 formattedValueMeta = resolveFormattedValueMeta(column, rawValue, row);
+  const formattedMeta = resolveFormattedListMeta(column, rawValue, row);
+  const styleMeta = resolveStyleMeta(column, row);
+  const label = resolveCellText({
+    column,
+    columns,
+    row,
+    storeName,
+    value,
+  });
+
+  return {
+    backgroundColor:
+      formattedValueMeta.backgroundColor ??
+      formattedMeta.backgroundColor ??
+      formattedValueMeta.bgColor ??
+      formattedMeta.bgColor ??
+      rawMeta.backgroundColor ??
+      rawMeta.bgColor ??
+      styleMeta.backgroundColor ??
+      styleMeta.bgColor,
+    borderColor:
+      formattedValueMeta.borderColor ??
+      formattedMeta.borderColor ??
+      rawMeta.borderColor ??
+      styleMeta.borderColor,
+    color:
+      formattedValueMeta.color ??
+      formattedMeta.color ??
+      rawMeta.color ??
+      rawMeta.statusColor ??
+      rawMeta.categoryColor ??
+      styleMeta.color,
+    icon:
+      formattedValueMeta.icon ??
+      formattedValueMeta.iconName ??
+      formattedMeta.icon ??
+      formattedMeta.iconName ??
+      rawMeta.icon ??
+      rawMeta.iconName ??
+      styleMeta.icon ??
+      styleMeta.iconName,
+    image:
+      formattedValueMeta.image ??
+      formattedValueMeta.logo ??
+      formattedValueMeta.source ??
+      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)

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

@@ -77,6 +77,7 @@ const DefaultTable = ({
   renderCard = null,
   requestParams = {},
   rowActionsComponent = null,
+  rowActionsWidth = null,
   rowStyle = null,
   showColumnFiltersButton = true,
   showRowActions = true,
@@ -96,10 +97,11 @@ const DefaultTable = ({
   const isFocused = useIsFocused();
   const configsSignatureRef = useRef('');
   const { showError } = useMessage() || {};
-  const { themeColors } = useDefaultTableTheme(accentColor);
+  const { tableBorderColors, themeColors } = useDefaultTableTheme(accentColor);
+  const tablePanelBorderColor = tableBorderColors.containerBorderColor;
   const floatingAddBackgroundColor =
-    themeColors.buttonBackground || themeColors.primary || accentColor || '#2563EB';
-  const floatingAddIconColor = themeColors.buttonText || '#FFFFFF';
+    themeColors.buttonBackground || themeColors.primary || accentColor;
+  const floatingAddIconColor = themeColors.buttonText;
   const tablePreferenceScope = useMemo(
     () =>
       resolveDefaultTablePreferenceScope({
@@ -220,6 +222,7 @@ const DefaultTable = ({
       requestSort,
       resolvedSort,
       rowActionsComponent,
+      rowActionsWidth,
       rowStyle,
       showColumnFiltersButton,
       showRowActions,
@@ -259,6 +262,7 @@ const DefaultTable = ({
       requestSort,
       resolvedSort,
       rowActionsComponent,
+      rowActionsWidth,
       rowStyle,
       showColumnFiltersButton,
       showRowActions,
@@ -278,12 +282,13 @@ const DefaultTable = ({
       stableSerialize({
         add,
         compactBreakpoint,
-        debugFallbackParameters,
         effectiveViewMode,
         filters,
         forceCardsOnCompact,
         initialViewMode,
         pinRowActions,
+        rowActionsComponentType: rowActionsComponent ? typeof rowActionsComponent : '',
+        rowActionsWidth,
         resolvedSort,
         showColumnFiltersButton,
         showRowActions,
@@ -304,6 +309,8 @@ const DefaultTable = ({
       forceCardsOnCompact,
       initialViewMode,
       pinRowActions,
+      rowActionsComponent,
+      rowActionsWidth,
       resolvedSort,
       showColumnFiltersButton,
       showRowActions,
@@ -400,7 +407,8 @@ const DefaultTable = ({
       style={[
         styles.wrap,
         {
-          borderColor: themeColors.panelBorder,
+          borderWidth: tablePanelBorderColor ? 1 : 0,
+          borderColor: tablePanelBorderColor,
           backgroundColor: themeColors.panelBackground,
         },
       ]}