@controleonline/ui-default 1.0.270 → 1.0.272

package/src/react/components/upload/DefaultUploadAttachmentsList.js

@@ -0,0 +1,138 @@
+import React from 'react';
+import {ScrollView, Text, TouchableOpacity, View} from 'react-native';
+import FeatherIcon from 'react-native-vector-icons/Feather';
+import DefaultFile from '@controleonline/ui-default/src/react/components/files/DefaultFile';
+import {extractFileId} from './fileUpload';
+import {defaultUploadStyles as styles} from './DefaultUpload.styles';
+
+/** Inline attachment cards for DefaultUpload (app-community#296 / #385). */
+export default function DefaultUploadAttachmentsList({
+  title,
+  triggerContent,
+  status,
+  error,
+  sortedAttachments,
+  emptyAttachmentLabel,
+  coverId,
+  handleSetCover,
+  handleRemove,
+  buttonPalette,
+  managerModal,
+  company = null,
+  showAttachmentActions = true,
+}) {
+  const iconDanger =
+    buttonPalette?.iconDanger ||
+    buttonPalette?.textDanger ||
+    '#B91C1C';
+  const iconActive =
+    buttonPalette?.iconActive ||
+    buttonPalette?.buttonBackground ||
+    '#0F172A';
+  const iconIdle =
+    buttonPalette?.buttonIcon ||
+    buttonPalette?.buttonTextSecondary ||
+    '#64748B';
+  const actionBg =
+    buttonPalette?.buttonBackgroundSecondary ||
+    buttonPalette?.cardBackground ||
+    '#F8FAFC';
+  const actionBorder =
+    buttonPalette?.buttonBorderSecondary ||
+    buttonPalette?.cardBorder ||
+    '#E2E8F0';
+
+  return (
+    <View style={styles.attachmentsTitleRow}>
+      <View style={styles.attachmentsHeader}>
+        <Text style={styles.attachmentsTitle}>{title}</Text>
+        {triggerContent}
+      </View>
+
+      {!!status && <Text style={styles.attachmentsStatus}>{status}</Text>}
+      {!!error && <Text style={styles.attachmentsError}>{error}</Text>}
+
+      {sortedAttachments.length === 0 ? (
+        <View style={styles.attachmentsEmpty}>
+          <Text style={styles.attachmentsEmptyText}>{emptyAttachmentLabel}</Text>
+        </View>
+      ) : (
+        <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+          <View style={styles.attachmentsList}>
+            {sortedAttachments.map((row, index) => {
+              // people_media rows must use nested file only — never the relation as file
+              // (relation id would be mistaken for file id and break the preview).
+              const rawFile = row?.file;
+              const fileId = extractFileId(rawFile);
+              const file =
+                rawFile && typeof rawFile === 'object' && !Array.isArray(rawFile)
+                  ? rawFile
+                  : fileId
+                    ? {id: fileId, '@id': `/files/${fileId}`}
+                    : null;
+              const isCover = String(coverId) === String(row.id);
+              return (
+                <View
+                  key={row.id || fileId || index}
+                  style={styles.attachmentCard}>
+                  <View style={styles.attachmentThumb}>
+                    {file ? (
+                      <DefaultFile
+                        file={file}
+                        company={company}
+                        resizeMode="cover"
+                        style={styles.attachmentImage}
+                      />
+                    ) : null}
+                  </View>
+                  {showAttachmentActions ? (
+                    <View style={styles.attachmentActionsRow}>
+                      <TouchableOpacity
+                        onPress={() => handleSetCover(row)}
+                        accessibilityLabel={
+                          isCover ? 'Capa selecionada' : 'Definir como capa'
+                        }
+                        style={[
+                          styles.attachmentIconButton,
+                          {
+                            backgroundColor: actionBg,
+                            borderColor: isCover ? iconActive : actionBorder,
+                            borderWidth: 1,
+                          },
+                        ]}>
+                        <FeatherIcon
+                          name="star"
+                          size={16}
+                          color={isCover ? iconActive : iconIdle}
+                        />
+                      </TouchableOpacity>
+                      <TouchableOpacity
+                        onPress={() => handleRemove(row)}
+                        accessibilityLabel="Remover"
+                        style={[
+                          styles.attachmentIconButton,
+                          {
+                            backgroundColor: actionBg,
+                            borderColor: actionBorder,
+                            borderWidth: 1,
+                          },
+                        ]}>
+                        <FeatherIcon
+                          name="trash-2"
+                          size={16}
+                          color={iconDanger}
+                        />
+                      </TouchableOpacity>
+                    </View>
+                  ) : null}
+                </View>
+              );
+            })}
+          </View>
+        </ScrollView>
+      )}
+
+      {managerModal}
+    </View>
+  );
+}

package/src/react/components/upload/DefaultUploadManagerModal.js

@@ -0,0 +1,247 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  ScrollView,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {MaterialCommunityIcons} from '@expo/vector-icons';
+import AnimatedModal from '@controleonline/ui-common/src/react/components/AnimatedModal';
+import DefaultFile from '@controleonline/ui-default/src/react/components/files/DefaultFile';
+import {extractFileId} from './fileUpload';
+import {
+  getFileName,
+  getFileExtension,
+  getContextLabel,
+  isPreviewableImage,
+  getGenericFileIcon,
+} from './defaultUploadHelpers';
+import {defaultUploadStyles as styles} from './DefaultUpload.styles';
+
+function FileThumb({file, preferImage = false, company = null}) {
+  const fileId = extractFileId(file);
+  // people_media / image uploads often arrive as {id} without extension metadata
+  if (fileId && (preferImage || isPreviewableImage(file))) {
+    return (
+      <DefaultFile
+        file={file}
+        company={company}
+        resizeMode="cover"
+        style={styles.fileImage}
+      />
+    );
+  }
+  const ext = getFileExtension(file);
+  return (
+    <View style={styles.fileThumbFallback}>
+      <MaterialCommunityIcons name={getGenericFileIcon(file)} size={36} color="#475569" />
+      <Text style={styles.fileExtBadge}>{ext ? ext.toUpperCase() : 'FILE'}</Text>
+    </View>
+  );
+}
+
+export default function DefaultUploadManagerModal(props) {
+  const {
+    visible,
+    onClose,
+    managerTitle,
+    context,
+    buttonPalette,
+    librarySearch,
+    setLibrarySearch,
+    searchPlaceholder,
+    handleUpload,
+    uploading,
+    uploadButtonLabel,
+    libraryLoading,
+    loadLibrary,
+    attachLabel,
+    savingFileId,
+    loadingText,
+    libraryError,
+    filteredLibraryFiles,
+    attachedFileIds,
+    handleAttachExisting,
+    attachmentRows = [],
+    emptyLibraryLabel,
+    emptyAttachmentsLabel,
+    status,
+    error,
+    fileType = 'image',
+    company = null,
+    coverId = null,
+    handleSetCover = null,
+    handleRemove = null,
+  } = props;
+  const preferImage =
+    String(fileType || '').toLowerCase() === 'image' ||
+    String(context || '').toLowerCase() === 'people_media';
+
+  return (
+    <AnimatedModal visible={visible} onRequestClose={onClose}>
+      <View style={styles.modalContainer}>
+        <View style={styles.modalHeader}>
+          <View>
+            <Text style={styles.modalTitle}>{managerTitle}</Text>
+          </View>
+          <TouchableOpacity onPress={onClose} style={styles.iconButton}>
+            <MaterialCommunityIcons name="close" size={22} color={buttonPalette.buttonIconSecondary} />
+          </TouchableOpacity>
+        </View>
+
+        <View style={styles.toolbar}>
+          <View style={styles.searchBox}>
+            <MaterialCommunityIcons name="magnify" size={18} color="#94A3B8" />
+            <TextInput
+              value={librarySearch}
+              onChangeText={setLibrarySearch}
+              placeholder={searchPlaceholder}
+              placeholderTextColor="#94A3B8"
+              style={styles.searchInput}
+            />
+            {!!librarySearch && (
+              <TouchableOpacity onPress={() => setLibrarySearch('')}>
+                <MaterialCommunityIcons name="close-circle" size={18} color="#94A3B8" />
+              </TouchableOpacity>
+            )}
+          </View>
+          <TouchableOpacity
+            onPress={handleUpload}
+            disabled={uploading}
+            style={[
+              styles.uploadButton,
+              {backgroundColor: buttonPalette.buttonBackground, borderColor: buttonPalette.buttonBorder, borderWidth: 1},
+              uploading && styles.disabledButton,
+            ]}>
+            {uploading ? (
+              <ActivityIndicator size="small" color={buttonPalette.buttonIcon} />
+            ) : (
+              <MaterialCommunityIcons name="cloud-upload-outline" size={18} color={buttonPalette.buttonIcon} />
+            )}
+            <Text style={[styles.uploadButtonText, {color: buttonPalette.buttonText}]}>
+              {uploading ? 'Enviando' : uploadButtonLabel}
+            </Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            onPress={loadLibrary}
+            disabled={libraryLoading}
+            style={[
+              styles.refreshButton,
+              {backgroundColor: buttonPalette.buttonBackgroundSecondary, borderColor: buttonPalette.buttonBorderSecondary},
+            ]}>
+            <MaterialCommunityIcons name="refresh" size={19} color={buttonPalette.buttonIconSecondary} />
+          </TouchableOpacity>
+        </View>
+
+        {!!libraryError && <Text style={styles.modalError}>{libraryError}</Text>}
+
+        {libraryLoading ? (
+          <View style={styles.loadingState}>
+            <ActivityIndicator size="small" color="#0F172A" />
+            <Text style={styles.loadingText}>{loadingText}</Text>
+          </View>
+        ) : filteredLibraryFiles.length === 0 ? (
+          <View style={styles.emptyState}>
+            <MaterialCommunityIcons name="file-search-outline" size={34} color="#CBD5E1" />
+            <Text style={styles.emptyText}>{emptyLibraryLabel}</Text>
+          </View>
+        ) : (
+          <ScrollView style={styles.modalList} showsVerticalScrollIndicator={false}>
+            <View style={styles.libraryGrid}>
+              {filteredLibraryFiles.map(file => {
+                const fileId = extractFileId(file);
+                const isAttached = fileId && attachedFileIds.has(String(fileId));
+                const isSaving = String(savingFileId || '') === String(fileId || getFileName(file));
+                return (
+                  <View key={fileId || getFileName(file)} style={[styles.fileCard, isAttached && styles.fileCardAttached]}>
+                    <View style={styles.fileThumb}>
+                      <FileThumb file={file} preferImage={preferImage} company={company} />
+                    </View>
+                    <View style={{flexDirection: 'row', gap: 6, position: 'absolute', top: 8, right: 8, zIndex: 2}}>
+                      {isAttached ? (
+                        <>
+                          <TouchableOpacity
+                            onPress={() => {
+                              const row = (attachmentRows || []).find(
+                                item => String(extractFileId(item?.file)) === String(fileId),
+                              );
+                              if (row) handleSetCover?.(row);
+                            }}
+                            style={styles.fileAction}
+                            accessibilityLabel="Definir como principal">
+                            <MaterialCommunityIcons
+                              name={
+                                (attachmentRows || []).some(
+                                  item =>
+                                    String(item?.id) === String(coverId) &&
+                                    String(extractFileId(item?.file)) === String(fileId),
+                                )
+                                  ? 'star'
+                                  : 'star-outline'
+                              }
+                              size={18}
+                              color="#0F172A"
+                            />
+                          </TouchableOpacity>
+                          <TouchableOpacity
+                            onPress={() => {
+                              const row = (attachmentRows || []).find(
+                                item => String(extractFileId(item?.file)) === String(fileId),
+                              );
+                              if (row) handleRemove?.(row);
+                            }}
+                            style={styles.fileAction}
+                            accessibilityLabel="Remover">
+                            <MaterialCommunityIcons name="trash-can-outline" size={18} color="#B91C1C" />
+                          </TouchableOpacity>
+                        </>
+                      ) : (
+                        <TouchableOpacity
+                          onPress={() => handleAttachExisting(file)}
+                          disabled={isSaving}
+                          style={styles.fileAction}>
+                          {isSaving ? (
+                            <ActivityIndicator size="small" color="#0F172A" />
+                          ) : (
+                            <MaterialCommunityIcons name="plus" size={18} color="#0F172A" />
+                          )}
+                        </TouchableOpacity>
+                      )}
+                    </View>
+                    <View style={styles.fileInfo}>
+                      <Text numberOfLines={2} style={styles.fileName}>{getFileName(file)}</Text>
+                      {Array.isArray(file?.mediaTypesUsed) && file.mediaTypesUsed.length > 0 ? (
+                        <Text numberOfLines={2} style={styles.mediaTypesLine}>
+                          {file.mediaTypesUsed.join(', ')}
+                        </Text>
+                      ) : null}
+                      <View style={styles.fileMetaRow}>
+                        {(() => {
+                          const label = getContextLabel(file?.context ?? file);
+                          // Hide internal store contexts from end users
+                          if (!label || label === 'sem contexto' || /^[a-z0-9]+(?:_[a-z0-9]+)+$/.test(label)) {
+                            return null;
+                          }
+                          return <Text style={styles.contextBadge}>{label}</Text>;
+                        })()}
+                        {isAttached && <Text style={styles.attachedBadge}>{attachLabel}</Text>}
+                      </View>
+                    </View>
+                  </View>
+                );
+              })}
+            </View>
+          </ScrollView>
+        )}
+
+        {attachmentRows.length === 0 && (
+          <Text style={styles.emptyText}>{emptyAttachmentsLabel}</Text>
+        )}
+        {!!status && <Text style={styles.attachmentsStatus}>{status}</Text>}
+        {!!error && <Text style={styles.attachmentsError}>{error}</Text>}
+      </View>
+    </AnimatedModal>
+  );
+}

package/src/react/components/upload/defaultUploadHelpers.js

@@ -0,0 +1,108 @@
+/**
+ * Pure helpers for DefaultUpload (app-community#296 modularization).
+ * task-432: getContextLabel accepts file object or context string.
+ */
+const {extractFileId} = require('./fileUpload');
+
+const DEFAULT_LIBRARY_CONTEXTS = ['products', 'products-category'];
+const IMAGE_EXT = /\.(png|jpe?g|gif|webp|bmp|svg)$/i;
+
+const normalizeCollection = response => {
+  if (Array.isArray(response)) return response;
+  if (Array.isArray(response?.member)) return response.member;
+  if (Array.isArray(response?.['hydra:member'])) return response['hydra:member'];
+  return [];
+};
+
+const getEntityId = relation => {
+  const value =
+    relation?.id ||
+    relation?.['@id'] ||
+    relation?.mediaId ||
+    relation?.media?.id ||
+    relation?.media?.['@id'] ||
+    relation?.peopleMedia?.id ||
+    relation?.peopleMedia?.['@id'] ||
+    relation;
+  const match = String(value || '').match(/(\d+)$/);
+  return match ? match[1] : null;
+};
+
+const normalizeAttachmentRelation = relation => {
+  const relationId = getEntityId(relation);
+  if (!relation || typeof relation !== 'object' || relation?.id || !relationId) {
+    return relation;
+  }
+  return {...relation, id: relationId};
+};
+
+const getRelationFileId = relation => extractFileId(relation?.file);
+
+const getFileName = file => {
+  const id = extractFileId(file);
+  return file?.fileName || file?.name || file?.originalName || (id ? `Arquivo ${id}` : 'Arquivo');
+};
+
+const getFileExtension = file => {
+  const fromField = String(file?.extension || '').replace(/^\./, '').trim().toLowerCase();
+  if (fromField) return fromField;
+  const name = getFileName(file);
+  const match = String(name).match(/\.([a-z0-9]+)$/i);
+  return match ? match[1].toLowerCase() : '';
+};
+
+const isPreviewableImage = file => {
+  const type = String(file?.fileType || file?.mimeType || file?.type || '').toLowerCase();
+  if (type.startsWith('image/')) return true;
+  if (type === 'image') return true;
+  const ext = getFileExtension(file);
+  return IMAGE_EXT.test(`.${ext}`) || IMAGE_EXT.test(getFileName(file));
+};
+
+const getGenericFileIcon = file => {
+  const ext = getFileExtension(file);
+  if (['pfx', 'p12', 'cer', 'crt'].includes(ext)) return 'file-certificate-outline';
+  if (['pdf'].includes(ext)) return 'file-pdf-box';
+  if (['xml', 'zip'].includes(ext)) return 'folder-zip-outline';
+  return 'file-outline';
+};
+
+const getContextLabel = contextOrFile => {
+  if (contextOrFile == null || contextOrFile === '') return 'sem contexto';
+  if (typeof contextOrFile === 'object' && !Array.isArray(contextOrFile)) {
+    const fromFile =
+      contextOrFile.context ??
+      contextOrFile.fileContext ??
+      contextOrFile.file_context ??
+      '';
+    if (fromFile != null && fromFile !== '' && typeof fromFile !== 'object') {
+      return String(fromFile).trim() || 'sem contexto';
+    }
+    return 'sem contexto';
+  }
+  return String(contextOrFile).trim() || 'sem contexto';
+};
+
+const dedupeFiles = files => {
+  const seen = new Set();
+  return files.filter(file => {
+    const id = extractFileId(file);
+    if (!id || seen.has(String(id))) return false;
+    seen.add(String(id));
+    return true;
+  });
+};
+
+module.exports = {
+  DEFAULT_LIBRARY_CONTEXTS,
+  normalizeCollection,
+  getEntityId,
+  normalizeAttachmentRelation,
+  getRelationFileId,
+  getFileName,
+  getFileExtension,
+  isPreviewableImage,
+  getGenericFileIcon,
+  getContextLabel,
+  dedupeFiles,
+};