@controleonline/ui-default 1.0.270 → 1.0.272

package/src/react/components/extra-data/DefaultExtraData.js

@@ -0,0 +1,152 @@
+import React, { useMemo } from 'react'
+import { Text, View } from 'react-native'
+
+import styles from './DefaultExtraData.styles'
+
+const MAX_CELL_ITEMS = 4
+
+const formatKey = key =>
+  String(key || '')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/[_-]+/g, ' ')
+    .replace(/^\w/, letter => letter.toUpperCase())
+
+const formatScalar = value => {
+  if (value === true) return 'true'
+  if (value === false) return 'false'
+  return String(value ?? '').trim()
+}
+
+const summarizeValue = value => {
+  if (Array.isArray(value)) return `${value.length}`
+  if (value && typeof value === 'object') {
+    return Object.keys(value).filter(Boolean).slice(0, 3).join(', ')
+  }
+
+  return formatScalar(value)
+}
+
+const resolveArrayKey = (item, index) =>
+  item?.name || item?.id || item?.code || item?.source || `${index + 1}`
+
+const buildItem = (key, value, depth = 0) => {
+  if (Array.isArray(value)) {
+    return {
+      key,
+      value: summarizeValue(value),
+      children: value.map((item, index) =>
+        buildItem(resolveArrayKey(item, index), item, depth + 1),
+      ),
+      depth,
+    }
+  }
+
+  if (value && typeof value === 'object') {
+    return {
+      key,
+      value: summarizeValue(value),
+      children: Object.entries(value)
+        .filter(([, itemValue]) => itemValue !== null && itemValue !== undefined && itemValue !== '')
+        .map(([childKey, childValue]) => buildItem(childKey, childValue, depth + 1)),
+      depth,
+    }
+  }
+
+  return {
+    key,
+    value: formatScalar(value),
+    children: [],
+    depth,
+  }
+}
+
+const normalizeExtraData = value => {
+  if (!value) return []
+
+  const parsed = typeof value === 'string'
+    ? JSON.parse(value)
+    : value
+
+  if (Array.isArray(parsed)) {
+    return parsed
+      .map((item, index) => {
+        const key = item?.field || item?.key || item?.name || resolveArrayKey(item, index)
+        const itemValue = item?.value ?? item?.configValue ?? item?.data ?? item
+        return buildItem(key, itemValue)
+      })
+      .filter(item => item.value || item.children.length > 0)
+  }
+
+  if (!parsed || typeof parsed !== 'object') {
+    return []
+  }
+
+  return Object.entries(parsed)
+    .filter(([, itemValue]) => itemValue !== null && itemValue !== undefined && itemValue !== '')
+    .map(([key, itemValue]) => buildItem(key, itemValue))
+}
+
+const ExtraDataItem = ({ item, variant = 'cell' }) => {
+  const isCard = variant === 'card'
+  const children = Array.isArray(item.children) ? item.children : []
+
+  return (
+    <View style={[styles.item, isCard ? styles.cardItem : null]}>
+      <Text style={styles.key} numberOfLines={1}>
+        {formatKey(item.key)}
+      </Text>
+      {item.value ? (
+        <Text style={styles.value} numberOfLines={isCard ? 4 : 1}>
+          {item.value}
+        </Text>
+      ) : null}
+      {isCard && children.length > 0 ? (
+        <View style={styles.children}>
+          {children.map((child, index) => (
+            <ExtraDataItem
+              key={`${item.key}-${child.key}-${index}`}
+              item={child}
+              variant={variant}
+            />
+          ))}
+        </View>
+      ) : null}
+    </View>
+  )
+}
+
+const DefaultExtraData = ({ value, variant = 'cell' }) => {
+  const items = useMemo(() => {
+    try {
+      return normalizeExtraData(value)
+    } catch {
+      return []
+    }
+  }, [value])
+
+  if (items.length === 0) {
+    return <Text style={styles.empty}>-</Text>
+  }
+
+  const isCard = variant === 'card'
+  const visibleItems = isCard ? items : items.slice(0, MAX_CELL_ITEMS)
+
+  return (
+    <View style={[styles.wrap, isCard ? styles.cardWrap : null]}>
+      {visibleItems.map((item, index) => (
+        <ExtraDataItem
+          key={`${item.key}-${index}`}
+          item={item}
+          variant={variant}
+        />
+      ))}
+      {!isCard && items.length > MAX_CELL_ITEMS ? (
+        <Text style={styles.more} numberOfLines={1}>
+          +{items.length - MAX_CELL_ITEMS}
+        </Text>
+      ) : null}
+    </View>
+  )
+}
+
+export default DefaultExtraData

package/src/react/components/extra-data/DefaultExtraData.styles.js

@@ -0,0 +1,61 @@
+import { StyleSheet } from 'react-native'
+
+const styles = StyleSheet.create({
+  wrap: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 6,
+    minWidth: 0,
+  },
+  cardWrap: {
+    flexDirection: 'column',
+    alignItems: 'stretch',
+    width: '100%',
+  },
+  item: {
+    maxWidth: 180,
+    minHeight: 24,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+  },
+  cardItem: {
+    maxWidth: '100%',
+    width: '100%',
+  },
+  children: {
+    gap: 4,
+    marginTop: 6,
+    paddingLeft: 8,
+    borderLeftWidth: 1,
+    borderLeftColor: '#CBD5E1',
+  },
+  key: {
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  value: {
+    marginTop: 1,
+    color: '#0F172A',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  more: {
+    alignSelf: 'center',
+    color: '#64748B',
+    fontSize: 11,
+    fontWeight: '900',
+  },
+  empty: {
+    color: '#94A3B8',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+})
+
+export default styles

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?.defaultCompany?.id) {
+    return peopleGetters.defaultCompany;
+  }
+
+  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?.defaultCompany?.id) return peopleGetters.defaultCompany;
+  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;