@controleonline/ui-default 1.0.270 → 1.0.273

package/src/react/components/files/DefaultFile.js

@@ -1,46 +1,231 @@
-import React, {memo, useMemo} from 'react';
-import {Image} from 'react-native';
-import {useStore} from '@store';
-import {resolveDefaultFileSource} from '@controleonline/ui-common/src/react/utils/fileUrl';
-
-const resolveCompanyFromStore = peopleGetters => {
-  if (peopleGetters?.defaultCompany?.id) {
-    return peopleGetters.defaultCompany;
-  }
-
-  if (peopleGetters?.currentCompany?.id) {
-    return peopleGetters.currentCompany;
-  }
-
-  return null;
-};
-
-const DefaultFile = ({
-  file,
-  source,
-  company,
-  appDomain = '',
-  headers = {},
-  ...imageProps
-}) => {
-  const peopleStore = useStore('people');
-  const peopleGetters = peopleStore?.getters || {};
-  const resolvedCompany = company || resolveCompanyFromStore(peopleGetters);
-  const resolvedSource = useMemo(
-    () =>
-      resolveDefaultFileSource(source ?? file, {
-        company: resolvedCompany,
-        appDomain,
-        headers,
-      }),
-    [appDomain, company, file, headers, resolvedCompany, source],
-  );
-
-  if (!resolvedSource) {
-    return null;
-  }
-
-  return <Image {...imageProps} source={resolvedSource} />;
-};
-
-export default memo(DefaultFile);
+import React, {memo, useEffect, useMemo, useRef, useState} from 'react';
+import {Image, Platform} from 'react-native';
+import {useStore} from '@store';
+import {resolveDefaultFileSource} from '@controleonline/ui-common/src/react/utils/fileUrl';
+
+const resolveCompanyFromStore = peopleGetters => {
+  if (peopleGetters?.mainCompany?.id) {
+    return peopleGetters.mainCompany;
+  }
+
+  if (peopleGetters?.currentCompany?.id) {
+    return peopleGetters.currentCompany;
+  }
+
+  return null;
+};
+
+/** Sync session token (same source as api.getToken). */
+const readSessionApiToken = () => {
+  try {
+    if (typeof localStorage === 'undefined') {
+      return '';
+    }
+    const sessionString = localStorage.getItem('session');
+    if (!sessionString) {
+      return '';
+    }
+    const cleanString =
+      typeof sessionString === 'string' && sessionString.startsWith('__q_objt|')
+        ? sessionString.substring('__q_objt|'.length)
+        : sessionString;
+    const session = JSON.parse(cleanString);
+    return session?.token || session?.api_key || '';
+  } catch (e) {
+    return '';
+  }
+};
+
+const headersKey = headers => {
+  if (!headers || typeof headers !== 'object') {
+    return '';
+  }
+  try {
+    return JSON.stringify(headers);
+  } catch (e) {
+    return '';
+  }
+};
+
+const companyKey = company => {
+  if (!company || typeof company !== 'object') {
+    return String(company || '');
+  }
+  return String(company.id || company['@id'] || company.domain || '');
+};
+
+/**
+ * DefaultFile — authenticated image preview.
+ *
+ * On web, RN Image becomes <img> and ignores source.headers. We fetch the
+ * download URL with API-TOKEN and display a blob: URL. Blob URLs are only
+ * revoked on unmount / when the remote URI changes — never while still
+ * assigned to the Image (avoids WebKitBlobResource error 1).
+ */
+const DefaultFile = ({
+  file,
+  source,
+  company,
+  appDomain = '',
+  headers = {},
+  ...imageProps
+}) => {
+  const peopleStore = useStore('people');
+  const peopleGetters = peopleStore?.getters || {};
+  const resolvedCompany = company || resolveCompanyFromStore(peopleGetters);
+
+  const sessionToken = useMemo(() => readSessionApiToken(), []);
+  const authHeaders = useMemo(
+    () => ({
+      ...(sessionToken ? {'API-TOKEN': sessionToken} : {}),
+      ...headers,
+    }),
+    // headers identity from parents can churn; key by JSON
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [sessionToken, headersKey(headers)],
+  );
+
+  const resolvedSource = useMemo(
+    () =>
+      resolveDefaultFileSource(source ?? file, {
+        company: resolvedCompany,
+        appDomain,
+        headers: authHeaders,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [appDomain, companyKey(resolvedCompany), source, file, authHeaders],
+  );
+
+  const remoteUri = resolvedSource?.uri || null;
+  const remoteHeaders = resolvedSource?.headers || {};
+
+  const [displayUri, setDisplayUri] = useState(null);
+  const blobRef = useRef(null);
+  const requestIdRef = useRef(0);
+
+  useEffect(() => {
+    const requestId = ++requestIdRef.current;
+    let cancelled = false;
+
+    const revokeBlob = () => {
+      if (blobRef.current && typeof URL !== 'undefined' && URL.revokeObjectURL) {
+        try {
+          URL.revokeObjectURL(blobRef.current);
+        } catch (e) {
+          // ignore
+        }
+        blobRef.current = null;
+      }
+    };
+
+    if (!remoteUri) {
+      revokeBlob();
+      setDisplayUri(null);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    if (/^(data:|blob:)/i.test(remoteUri)) {
+      revokeBlob();
+      setDisplayUri(remoteUri);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    // Native: headers work on Image source — no blob needed
+    if (Platform.OS !== 'web') {
+      revokeBlob();
+      setDisplayUri(remoteUri);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    if (typeof fetch !== 'function') {
+      setDisplayUri(remoteUri);
+      return () => {
+        cancelled = true;
+      };
+    }
+
+    const load = async () => {
+      try {
+        const response = await fetch(remoteUri, {
+          method: 'GET',
+          headers: remoteHeaders,
+          credentials: 'omit',
+        });
+        if (!response.ok) {
+          throw new Error(`download ${response.status}`);
+        }
+        const contentType = String(
+          response.headers.get('content-type') || '',
+        ).toLowerCase();
+        if (contentType.includes('application/json')) {
+          throw new Error('download returned json');
+        }
+        const blob = await response.blob();
+        if (!blob || blob.size === 0) {
+          throw new Error('empty blob');
+        }
+        if (cancelled || requestId !== requestIdRef.current) {
+          return;
+        }
+        const nextUrl = URL.createObjectURL(blob);
+        // Revoke previous only after we have the next URL
+        revokeBlob();
+        blobRef.current = nextUrl;
+        setDisplayUri(nextUrl);
+      } catch (e) {
+        if (cancelled || requestId !== requestIdRef.current) {
+          return;
+        }
+        // Do not keep a broken blob; fall back to remote (may 403 on <img>)
+        revokeBlob();
+        setDisplayUri(null);
+      }
+    };
+
+    void load();
+
+    return () => {
+      cancelled = true;
+      // Defer revoke so an in-flight Image paint is not interrupted by a
+      // transient dependency flicker (Strict Mode double-invoke is OK:
+      // requestId invalidates the stale response).
+    };
+  }, [remoteUri, headersKey(remoteHeaders)]);
+
+  // Unmount: revoke blob
+  useEffect(() => {
+    return () => {
+      if (blobRef.current && typeof URL !== 'undefined' && URL.revokeObjectURL) {
+        try {
+          URL.revokeObjectURL(blobRef.current);
+        } catch (e) {
+          // ignore
+        }
+        blobRef.current = null;
+      }
+    };
+  }, []);
+
+  if (!displayUri) {
+    return null;
+  }
+
+  return (
+    <Image
+      {...imageProps}
+      source={
+        Platform.OS === 'web'
+          ? {uri: displayUri}
+          : {uri: displayUri, headers: remoteHeaders}
+      }
+    />
+  );
+};
+
+export default memo(DefaultFile);

package/src/react/components/files/DefaultFileColumn.js

@@ -0,0 +1,123 @@
+import React, {memo, useMemo} from 'react';
+import {Linking, Text, TouchableOpacity, View} from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import {useStore} from '@store';
+import DefaultFile from './DefaultFile';
+import {
+  normalizeDefaultFileColumnItems,
+  normalizeFileColumnText,
+} from './DefaultFileColumn.utils';
+import styles from './DefaultFileColumn.styles';
+
+const ICON_BY_KIND = {
+  audio: 'volume-2',
+  document: 'file-text',
+  file: 'paperclip',
+  pdf: 'file-text',
+  text: 'file-text',
+  video: 'film',
+};
+
+const resolveCompanyFromStore = peopleGetters => {
+  if (peopleGetters?.mainCompany?.id) return peopleGetters.mainCompany;
+  if (peopleGetters?.currentCompany?.id) return peopleGetters.currentCompany;
+  return null;
+};
+
+const resolveLabel = item =>
+  normalizeFileColumnText(item.fileName) ||
+  normalizeFileColumnText(item.extension).toUpperCase() ||
+  normalizeFileColumnText(item.id);
+
+const DefaultFileColumn = ({
+  column = {},
+  row = {},
+  value,
+  variant = 'cell',
+}) => {
+  const peopleStore = useStore('people');
+  const themeStore = useStore('theme');
+  const company = resolveCompanyFromStore(peopleStore?.getters || {});
+  const palette = themeStore?.getters?.colors || {};
+  const borderColor = palette.border || palette.secondary || '#CBD5E1';
+  const textColor = palette.text || palette.primary || '#0F172A';
+  const mutedColor = palette.textSecondary || '#64748B';
+  const surfaceColor = palette.surface || palette.background || '#FFFFFF';
+  const items = useMemo(
+    () => normalizeDefaultFileColumnItems({column, company, row, value}),
+    [column, company, row, value],
+  );
+
+  if (items.length === 0) {
+    return (
+      <View style={styles.wrap}>
+        <Text style={[styles.emptyText, {color: mutedColor}]}>-</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.wrap}>
+      <View style={styles.list}>
+        {items.map(item => {
+          const label = resolveLabel(item);
+          const openFile = () => {
+            if (item.openUrl) Linking.openURL(item.openUrl);
+          };
+
+          if (item.kind === 'image') {
+            return (
+              <TouchableOpacity
+                key={item.key}
+                activeOpacity={item.openUrl ? 0.78 : 1}
+                disabled={!item.openUrl}
+                onPress={openFile}
+                style={[
+                  styles.item,
+                  styles.imageItem,
+                  {backgroundColor: surfaceColor, borderColor},
+                ]}
+              >
+                <DefaultFile
+                  file={item.source}
+                  company={company}
+                  resizeMode="cover"
+                  style={styles.image}
+                />
+              </TouchableOpacity>
+            );
+          }
+
+          const iconName = ICON_BY_KIND[item.kind] || ICON_BY_KIND.file;
+
+          return (
+            <TouchableOpacity
+              key={item.key}
+              activeOpacity={item.openUrl ? 0.78 : 1}
+              disabled={!item.openUrl}
+              onPress={openFile}
+              style={[
+                styles.item,
+                {
+                  backgroundColor: surfaceColor,
+                  borderColor,
+                  maxWidth: variant === 'card' ? 180 : 132,
+                },
+              ]}
+            >
+              <Icon name={iconName} size={14} color={mutedColor} />
+              <Text
+                numberOfLines={1}
+                style={[styles.label, {color: textColor}]}
+              >
+                {label || '-'}
+              </Text>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+export default memo(DefaultFileColumn);

package/src/react/components/files/DefaultFileColumn.styles.js

@@ -0,0 +1,52 @@
+import {StyleSheet} from 'react-native';
+
+const styles = StyleSheet.create({
+  wrap: {
+    minWidth: 0,
+    width: '100%',
+  },
+  list: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    minHeight: 28,
+    minWidth: 0,
+  },
+  item: {
+    alignItems: 'center',
+    borderRadius: 7,
+    borderWidth: 1,
+    flexDirection: 'row',
+    gap: 5,
+    minHeight: 26,
+    maxWidth: 132,
+    overflow: 'hidden',
+    paddingHorizontal: 6,
+    paddingVertical: 3,
+  },
+  imageItem: {
+    borderRadius: 6,
+    height: 32,
+    paddingHorizontal: 2,
+    paddingVertical: 2,
+    width: 42,
+  },
+  image: {
+    borderRadius: 4,
+    height: 28,
+    width: 38,
+  },
+  label: {
+    flexShrink: 1,
+    fontSize: 11,
+    fontWeight: '800',
+    maxWidth: 92,
+  },
+  emptyText: {
+    fontSize: 12,
+    fontWeight: '600',
+  },
+});
+
+export default styles;

package/src/react/components/files/DefaultFileColumn.utils.js

@@ -0,0 +1,104 @@
+import {extractFileId, resolveDefaultFileUrl} from '@controleonline/ui-common/src/react/utils/fileUrl';
+
+const FILE_INPUT_TYPES = new Set([
+  'document',
+  'documents',
+  'file',
+  'files',
+  'image',
+  'images',
+  'pdf',
+]);
+
+const IMAGE_EXTENSIONS = new Set(['avif', 'bmp', 'gif', 'ico', 'jpeg', 'jpg', 'png', 'svg', 'webp']);
+const PDF_EXTENSIONS = new Set(['pdf']);
+const DOCUMENT_EXTENSIONS = new Set(['doc', 'docx', 'odt', 'rtf', 'xls', 'xlsx', 'ods', 'ppt', 'pptx', 'odp']);
+
+export const normalizeFileColumnText = value => String(value ?? '').trim();
+
+export const normalizeFileColumnType = value =>
+  normalizeFileColumnText(value).replace(/[^a-z0-9]/gi, '').toLowerCase();
+
+export const isFileInputColumn = column =>
+  FILE_INPUT_TYPES.has(normalizeFileColumnType(column?.inputType));
+
+const asArray = value => {
+  if (Array.isArray(value)) return value;
+  if (value === undefined || value === null || value === '') return [];
+  if (typeof value === 'string' && value.includes(',')) {
+    return value
+      .split(',')
+      .map(item => item.trim())
+      .filter(Boolean);
+  }
+
+  return [value];
+};
+
+const pickFilePayload = item =>
+  item && typeof item === 'object' && !Array.isArray(item) && item.file
+    ? item.file
+    : item;
+
+const resolveForcedFileType = column => {
+  const inputType = normalizeFileColumnType(column?.inputType);
+  if (inputType === 'image' || inputType === 'images') return 'image';
+  if (inputType === 'pdf') return 'application';
+  if (inputType === 'document' || inputType === 'documents') return 'document';
+  return normalizeFileColumnText(column?.fileType);
+};
+
+const resolveForcedExtension = column => {
+  const inputType = normalizeFileColumnType(column?.inputType);
+  if (inputType === 'pdf') return 'pdf';
+  return normalizeFileColumnText(column?.extension).toLowerCase();
+};
+
+const resolveKind = ({fileType, extension}) => {
+  const normalizedType = normalizeFileColumnType(fileType);
+  const normalizedExtension = normalizeFileColumnText(extension).replace(/^\./, '').toLowerCase();
+
+  if (normalizedType === 'image' || IMAGE_EXTENSIONS.has(normalizedExtension)) return 'image';
+  if (PDF_EXTENSIONS.has(normalizedExtension)) return 'pdf';
+  if (DOCUMENT_EXTENSIONS.has(normalizedExtension) || normalizedType === 'document') return 'document';
+  if (normalizedType === 'text') return 'text';
+  if (normalizedType === 'audio') return 'audio';
+  if (normalizedType === 'video') return 'video';
+  return 'file';
+};
+
+export const normalizeDefaultFileColumnItems = ({
+  column = {},
+  company = null,
+  row = {},
+  value,
+} = {}) =>
+  asArray(value ?? row?.[column?.key || column?.name]).map((item, index) => {
+    const payload = pickFilePayload(item);
+    const isObject = payload && typeof payload === 'object' && !Array.isArray(payload);
+    const id = extractFileId(payload);
+    const fileType = isObject
+      ? normalizeFileColumnText(payload.fileType) || resolveForcedFileType(column)
+      : resolveForcedFileType(column);
+    const extension = isObject
+      ? normalizeFileColumnText(payload.extension).toLowerCase() || resolveForcedExtension(column)
+      : resolveForcedExtension(column);
+    const url = isObject && typeof payload.url === 'string'
+      ? payload.url
+      : resolveDefaultFileUrl(payload, {company});
+    const driveUrl = isObject && typeof payload.driveUrl === 'string'
+      ? payload.driveUrl
+      : '';
+
+    return {
+      extension,
+      fileName: isObject ? normalizeFileColumnText(payload.fileName) : '',
+      fileType,
+      id,
+      key: `${id || normalizeFileColumnText(payload) || index}`,
+      kind: resolveKind({fileType, extension}),
+      openUrl: driveUrl || url,
+      relationId: item && typeof item === 'object' && !Array.isArray(item) ? extractFileId(item) : null,
+      source: payload,
+    };
+  });

package/src/react/components/filters/CompactFilterSelector.js

@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Image,
   Modal,
@@ -7,10 +7,11 @@ import {
   TextInput,
   TouchableOpacity,
   TouchableWithoutFeedback,
-  useWindowDimensions,
-  View,
-} from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
+  useWindowDimensions,
+  View,
+} from 'react-native';
+import { useStore } from '@store';
+import Icon from 'react-native-vector-icons/Feather';
 import {
   formatStoreColumnLabel,
   resolveStoreColumn,
@@ -19,16 +20,16 @@ import {
 import { isValidFeatherIcon } from '../inputs/defaultInputUtils';
 import createStyles from './CompactFilterSelector.styles';
 
-const buildTheme = ({ accentColor, themeColors = {} }) => ({
-  accentColor: accentColor,
-  activeBackgroundColor:
-    themeColors.activeBackgroundColor || `${accentColor}14`,
-  activeIconBackgroundColor:
-    themeColors.activeIconBackgroundColor || `${accentColor}24`,
-  activeChevronColor:
-    themeColors.activeChevronColor ||
-    themeColors.activeIconColor ||
-    accentColor,
+const buildTheme = ({ accentColor, themeColors = {} }) => ({
+  accentColor: accentColor,
+  activeBackgroundColor:
+    themeColors.activeBackgroundColor || (accentColor ? `${accentColor}14` : themeColors.backgroundColor),
+  activeIconBackgroundColor:
+    themeColors.activeIconBackgroundColor || (accentColor ? `${accentColor}24` : themeColors.iconBackgroundColor),
+  activeChevronColor:
+    themeColors.activeChevronColor ||
+    themeColors.activeIconColor ||
+    accentColor,
   activeIconColor: themeColors.activeIconColor || accentColor,
   activeTextColor: themeColors.activeTextColor || accentColor,
   backgroundColor: themeColors.backgroundColor || '#F8FAFC',
@@ -44,10 +45,10 @@ const buildTheme = ({ accentColor, themeColors = {} }) => ({
   modalTitleColor: themeColors.modalTitleColor || '#0F172A',
   optionBackgroundColor: themeColors.optionBackgroundColor || '#F8FAFC',
   optionBorderColor: themeColors.optionBorderColor || '#E2E8F0',
-  optionSelectedTextColor:
-    themeColors.optionSelectedTextColor || accentColor,
-  textColor: themeColors.textColor || '#0F172A',
-});
+  optionSelectedTextColor:
+    themeColors.optionSelectedTextColor || accentColor,
+  textColor: themeColors.textColor || '#0F172A',
+});
 
 const noop = () => {};
 
@@ -82,12 +83,12 @@ const resolveStoreFieldLabel = ({ fallbackLabel = '', field = '', store = '' })
   );
 };
 
-const CompactFilterSelector = ({
-  accentColor = '#2563EB',
-  active = false,
-  children = null,
-  dense = false,
-  disabled = false,
+const CompactFilterSelector = ({
+  accentColor = null,
+  active = false,
+  children = null,
+  dense = false,
+  disabled = false,
   icon = 'sliders',
   label = '',
   labelCaption = '',
@@ -98,18 +99,33 @@ const CompactFilterSelector = ({
   options = [],
   searchable = false,
   selectedKey = '',
-  field = '',
-  store = '',
-  themeColors = {},
-  title = '',
-}) => {
+  field = '',
+  store = '',
+  themeColors = {},
+  title = '',
+}) => {
+  const themeStore = useStore('theme');
   const [visible, setVisible] = useState(false);
   const [searchText, setSearchText] = useState('');
-  const { width: windowWidth } = useWindowDimensions();
-  const resolvedTheme = useMemo(
-    () => buildTheme({ accentColor, themeColors }),
-    [accentColor, themeColors],
-  );
+  const { width: windowWidth } = useWindowDimensions();
+  const themeStoreColors = themeStore?.getters?.colors || {};
+  const resolvedAccentColor =
+    accentColor ||
+    themeColors.primary ||
+    themeColors.accent ||
+    themeStoreColors.primary ||
+    themeStoreColors.accent ||
+    '';
+  const resolvedTheme = useMemo(
+    () => buildTheme({
+      accentColor: resolvedAccentColor,
+      themeColors: {
+        ...themeStoreColors,
+        ...themeColors,
+      },
+    }),
+    [resolvedAccentColor, themeColors, themeStoreColors],
+  );
   const styles = useMemo(
     () => createStyles(resolvedTheme, dense, windowWidth),
     [dense, resolvedTheme, windowWidth],