@controleonline/ui-default 1.0.263 → 1.0.265

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

@@ -0,0 +1,340 @@
+import React, { useMemo, useState } from 'react';
+import { FlatList, ScrollView, Text, TouchableOpacity, View } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import { formatStoreColumnLabel } from '@controleonline/ui-common/src/react/utils/storeColumns';
+import { getColumnKey } from '../inputs/defaultInputUtils';
+import DefaultColumnFilter from '../filters/DefaultColumnFilter';
+import DefaultTableEmptyState from './DefaultTableEmptyState';
+import DefaultTableInput from './DefaultTableInput';
+import {
+  END_REACHED_THRESHOLD,
+  getColumnStyle,
+  getRowKey,
+  getSortField,
+  isSortableColumn,
+  mergeSortedDataWithLiveItems,
+  shouldTriggerEndReachedFromScroll,
+  shouldIncludeColumn,
+} from './DefaultTable.utils';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultTableRows = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const { palette, resolvedAccentColor, themeTokens } = useDefaultTableTheme();
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const visibleColumns = store?.getters?.visibleColumns || {};
+  const tableColumns = columns.filter(
+    column => shouldIncludeColumn(column) && visibleColumns[getColumnKey(column)] !== false,
+  );
+  const sortedData = mergeSortedDataWithLiveItems({
+    liveItems: store?.getters?.items,
+    sortedData: configs.sortedData,
+  });
+  const resolvedFilters = store?.getters?.filters || {};
+  const isLoading = Boolean(store?.getters?.isLoadingList || store?.getters?.isLoading);
+  const emptyStateLabel = isLoading
+    ? global.t?.t(storeName, 'label', 'loading')
+    : global.t?.t(storeName, 'label', 'empty');
+  const tableBorderColor = palette.border;
+  const tableEvenColor = themeTokens.listItemEvenRow || themeTokens['bg-even-light'] || palette.background;
+  const tableHeaderColor = themeTokens['bg-headers-light'] || resolvedAccentColor;
+  const tableMutedColor = palette.textSecondary;
+  const tableOddColor = themeTokens.listItemOddRow || themeTokens['bg-odd-light'] || palette.background;
+  const tableSurfaceColor = palette.background;
+  const tableTextColor = palette.text;
+  const rowStyle = configs.rowStyle;
+  const hasRowPress = typeof configs.onRowPress === 'function';
+  const hasCustomRowActions = typeof configs.rowActionsComponent === 'function';
+  const hasEditAction = typeof configs.onEditRow === 'function';
+  const hasRowActions = configs.showRowActions !== false && (hasCustomRowActions || hasEditAction);
+  const hasColumnFilters =
+    configs.showColumnFiltersButton !== false &&
+    configs.tableFiltersVisible === true;
+  const actionsCellWidth = hasRowActions ? 96 : 0;
+  const [horizontalMetrics, setHorizontalMetrics] = useState({
+    contentWidth: 0,
+    viewportWidth: 0,
+    x: 0,
+  });
+  const updateHorizontalMetrics = patch => {
+    setHorizontalMetrics(current => {
+      const next = {
+        ...current,
+        ...patch,
+      };
+
+      return next.contentWidth === current.contentWidth &&
+        next.viewportWidth === current.viewportWidth &&
+        next.x === current.x
+        ? current
+        : next;
+    });
+  };
+  const stickyBodyTransforms = useMemo(() => {
+    const viewportWidth = Number(horizontalMetrics.viewportWidth || 0);
+    const contentWidth = Number(horizontalMetrics.contentWidth || 0);
+    const x = Number(horizontalMetrics.x || 0);
+    const canScrollHorizontally = viewportWidth > 0 && contentWidth > viewportWidth;
+    const actionsTranslateX = canScrollHorizontally
+      ? x + viewportWidth - contentWidth
+      : 0;
+
+    return {
+      actions: actionsTranslateX !== 0 ? [{ translateX: actionsTranslateX }] : null,
+      identity: x !== 0 ? [{ translateX: x }] : null,
+    };
+  }, [horizontalMetrics]);
+  const handleHorizontalScroll = event => {
+    updateHorizontalMetrics({
+      x: Number(event?.nativeEvent?.contentOffset?.x || 0),
+    });
+  };
+  const handleHorizontalLayout = event => {
+    updateHorizontalMetrics({
+      viewportWidth: Number(event?.nativeEvent?.layout?.width || 0),
+    });
+  };
+  const handleHorizontalContentSizeChange = width => {
+    updateHorizontalMetrics({
+      contentWidth: Number(width || 0),
+    });
+  };
+  const handleListScroll = event => {
+    if (shouldTriggerEndReachedFromScroll(event)) {
+      configs.onEndReached?.();
+    }
+  };
+
+  const renderTableItem = ({ item: row, index }) => {
+    const RowComponent = hasRowPress ? TouchableOpacity : View;
+    const rowStyleValue = typeof rowStyle === 'function' ? rowStyle(row, index) : rowStyle;
+    const rowPressProps = hasRowPress
+      ? {
+        activeOpacity: 0.84,
+        onPress: () => configs.onRowPress(row),
+      }
+      : {};
+    const rowBackgroundColor = index % 2 === 0 ? tableOddColor : tableEvenColor;
+    const RowActionsComponent = configs.rowActionsComponent;
+
+    return (
+      <RowComponent
+        key={getRowKey(row)}
+        style={[
+          styles.row,
+          { backgroundColor: rowBackgroundColor, borderBottomColor: tableBorderColor },
+          rowStyleValue,
+        ]}
+        {...rowPressProps}
+      >
+        {tableColumns.map(column => (
+          <React.Fragment key={getColumnKey(column)}>
+            <DefaultTableInput
+              column={column}
+              options={column?.isIdentity ? {
+                cellStyle: [
+                  styles.pinnedIdentityCell,
+                  {
+                    backgroundColor: rowBackgroundColor,
+                    ...(stickyBodyTransforms.identity
+                      ? { transform: stickyBodyTransforms.identity }
+                      : {}),
+                  },
+                ],
+              } : {}}
+              row={row}
+              storeName={storeName}
+              variant="cell"
+            />
+          </React.Fragment>
+        ))}
+        {hasRowActions ? (
+          <View
+            style={[
+              styles.cell,
+              styles.actionsCell,
+              styles.pinnedActionsCell,
+              {
+                minWidth: actionsCellWidth,
+                width: actionsCellWidth,
+                flexBasis: actionsCellWidth,
+                maxWidth: actionsCellWidth,
+                backgroundColor: rowBackgroundColor,
+                ...(stickyBodyTransforms.actions
+                  ? { transform: stickyBodyTransforms.actions }
+                  : {}),
+              },
+            ]}
+          >
+            <View style={styles.rowActionsGroup}>
+              {hasCustomRowActions ? (
+                <RowActionsComponent
+                  openEdit={() => configs.onEditRow?.(row)}
+                  openRow={hasRowPress ? () => configs.onRowPress(row) : null}
+                  row={row}
+                />
+              ) : null}
+              {hasEditAction ? (
+                <TouchableOpacity
+                  style={[styles.iconButton, { borderColor: tableBorderColor, backgroundColor: tableSurfaceColor }]}
+                  activeOpacity={0.82}
+                  onPress={() => configs.onEditRow?.(row)}
+                >
+                  <Icon name="edit-2" size={14} color={tableMutedColor} />
+                </TouchableOpacity>
+              ) : null}
+            </View>
+          </View>
+        ) : null}
+      </RowComponent>
+    );
+  };
+
+  return (
+    <>
+      <ScrollView
+        horizontal
+        onContentSizeChange={handleHorizontalContentSizeChange}
+        onLayout={handleHorizontalLayout}
+        onScroll={handleHorizontalScroll}
+        scrollEventThrottle={16}
+        style={styles.scroll}
+        contentContainerStyle={styles.horizontalScrollContent}
+      >
+        <View style={styles.content}>
+          <View style={[styles.headerRow, { backgroundColor: tableHeaderColor, borderBottomColor: tableBorderColor }]}>
+            {tableColumns.map(column => {
+              const fieldName = getColumnKey(column);
+              const label = formatStoreColumnLabel({
+                columns,
+                fieldName,
+                fallbackLabel: column?.label || fieldName,
+                storeName,
+              });
+              const sortFieldName = getSortField(column);
+
+              return (
+                <TouchableOpacity
+                  key={fieldName}
+                  style={[
+                    getColumnStyle(column),
+                    column?.isIdentity
+                      ? [styles.stickyIdentityCell, styles.stickyHeaderCell, { backgroundColor: tableHeaderColor }]
+                      : null,
+                  ]}
+                  activeOpacity={isSortableColumn(column) ? 0.8 : 1}
+                  onPress={() => configs.requestSort?.(column)}
+                >
+                  <View style={styles.sortableHeader}>
+                    <Text style={[styles.headerText, { color: tableTextColor }]} numberOfLines={1}>{label}</Text>
+                    {isSortableColumn(column) && configs.resolvedSort?.field === sortFieldName ? (
+                      <Icon name={configs.resolvedSort?.direction === 'desc' ? 'chevron-down' : 'chevron-up'} size={12} color={tableTextColor} />
+                    ) : isSortableColumn(column) ? (
+                      <Icon name="chevrons-up" size={12} color={tableBorderColor} />
+                    ) : null}
+                    {resolvedFilters?.[fieldName] ? <Icon name="filter" size={11} color={tableTextColor} /> : null}
+                  </View>
+                </TouchableOpacity>
+              );
+            })}
+            {hasRowActions ? (
+              <View
+                style={[
+                  styles.cell,
+                  styles.actionsCell,
+                  styles.stickyActionsCell,
+                  styles.stickyHeaderCell,
+                  {
+                    minWidth: actionsCellWidth,
+                    width: actionsCellWidth,
+                    flexBasis: actionsCellWidth,
+                    maxWidth: actionsCellWidth,
+                    backgroundColor: tableHeaderColor,
+                  },
+                ]}
+              >
+                <Text style={[styles.headerText, { color: tableTextColor }]}>
+                  {global.t?.t(storeName, 'label', 'actions')}
+                </Text>
+              </View>
+            ) : null}
+          </View>
+          {hasColumnFilters ? (
+            <View style={[styles.filterRow, { backgroundColor: tableHeaderColor, borderBottomColor: tableBorderColor }]}>
+              {tableColumns.map(column => {
+                const fieldName = getColumnKey(column);
+
+                return (
+                  <View
+                    key={`${fieldName}-filter`}
+                    style={[
+                      getColumnStyle(column),
+                      column?.isIdentity
+                        ? [styles.stickyIdentityCell, { backgroundColor: tableHeaderColor }]
+                        : null,
+                    ]}
+                  >
+                    {column?.filter !== false && column?.filters !== false ? (
+                      <DefaultColumnFilter
+                        column={column}
+                        filters={resolvedFilters}
+                        storeName={storeName}
+                        style={styles.filterCell}
+                      />
+                    ) : null}
+                  </View>
+                );
+              })}
+              {hasRowActions ? (
+                <View
+                  style={[
+                    styles.cell,
+                    styles.actionsCell,
+                    styles.stickyActionsCell,
+                    {
+                      minWidth: actionsCellWidth,
+                      width: actionsCellWidth,
+                      flexBasis: actionsCellWidth,
+                      maxWidth: actionsCellWidth,
+                      backgroundColor: tableHeaderColor,
+                    },
+                  ]}
+                />
+              ) : null}
+            </View>
+          ) : null}
+
+          <FlatList
+            data={sortedData}
+            keyExtractor={getRowKey}
+            renderItem={renderTableItem}
+            style={styles.tableList}
+            contentContainerStyle={styles.tableListContent}
+            ListEmptyComponent={(
+              <DefaultTableEmptyState
+                emptyStateLabel={emptyStateLabel}
+                isLoading={isLoading}
+                isTable
+                tableMutedColor={tableMutedColor}
+              />
+            )}
+            ListFooterComponent={null}
+            nestedScrollEnabled
+            onMomentumScrollBegin={configs.onMomentumScrollBegin || undefined}
+            onScroll={handleListScroll}
+            onScrollBeginDrag={configs.onScrollBeginDrag || undefined}
+            onEndReached={configs.onEndReached}
+            onEndReachedThreshold={END_REACHED_THRESHOLD}
+            scrollEventThrottle={120}
+            showsVerticalScrollIndicator={false}
+          />
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+export default DefaultTableRows;

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

@@ -0,0 +1,100 @@
+import React from 'react';
+import { TouchableOpacity, useWindowDimensions } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import DefaultSearch from '../filters/DefaultSearch';
+import DefaultModalButton from './DefaultModalButton';
+import DefaultSearchModal from './DefaultSearchModal';
+import {
+  COLLAPSED_SEARCH_MAX_VIEWPORT_WIDTH,
+} from './DefaultTable.utils';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const shouldRenderSearch = store => {
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+
+  return columns.some(column =>
+    column?.search === true ||
+    column?.searchable === true ||
+    column?.filter === 'search',
+  );
+};
+
+const useSearchState = storeName => {
+  const store = useStore(storeName);
+  const { width } = useWindowDimensions();
+  const configs = store?.getters?.configs || {};
+  const totalItemsNumber = Number(store?.getters?.totalItems);
+  const hasTotalItems = Number.isFinite(totalItemsNumber);
+  const compactBreakpoint = Number(configs.compactBreakpoint || COLLAPSED_SEARCH_MAX_VIEWPORT_WIDTH);
+  const rendersCompactTotal =
+    configs.showTotalItemsInCompactToolbar === true &&
+    width > 0 &&
+    width <= compactBreakpoint &&
+    hasTotalItems &&
+    configs.showTotalItemsInFooter === false;
+  const collapses =
+    width > 0 && width <= COLLAPSED_SEARCH_MAX_VIEWPORT_WIDTH;
+
+  return {
+    collapses,
+    renders: shouldRenderSearch(store),
+    rendersCompactTotal,
+  };
+};
+
+export const DefaultTableCompactSearch = ({ storeName }) => {
+  const { renders, rendersCompactTotal } = useSearchState(storeName);
+
+  return renders && rendersCompactTotal ? (
+    <DefaultSearch compact storeName={storeName} />
+  ) : null;
+};
+
+export const DefaultTableInlineSearch = ({ storeName }) => {
+  const { collapses, renders, rendersCompactTotal } = useSearchState(storeName);
+
+  return renders && !rendersCompactTotal && !collapses ? (
+    <DefaultSearch compact storeName={storeName} />
+  ) : null;
+};
+
+export const DefaultTableCollapsedSearch = ({ storeName }) => {
+  const { collapses, renders, rendersCompactTotal } = useSearchState(storeName);
+  const { tableButtonColors } = useDefaultTableTheme();
+
+  if (!renders || rendersCompactTotal || !collapses) {
+    return null;
+  }
+
+  return (
+    <DefaultModalButton
+      renderButton={({ open }) => (
+        <TouchableOpacity
+          style={[
+            styles.toolbarSearchButton,
+            {
+              borderColor: tableButtonColors.borderColor,
+              backgroundColor: tableButtonColors.backgroundColor,
+            },
+          ]}
+          accessibilityLabel={global.t?.t(storeName, 'label', 'search')}
+          accessibilityRole="button"
+          activeOpacity={0.82}
+          onPress={open}
+        >
+          <Icon name="search" size={14} color={tableButtonColors.iconColor} />
+        </TouchableOpacity>
+      )}
+    >
+      {({ close, isOpen }) => (
+        <DefaultSearchModal
+          storeName={storeName}
+          visible={isOpen}
+          onClose={close}
+        />
+      )}
+    </DefaultModalButton>
+  );
+};

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

@@ -0,0 +1,98 @@
+import React from 'react';
+import { Text, View, useWindowDimensions } from 'react-native';
+import { useStore } from '@store';
+import DefaultTableControls from './DefaultTableControls';
+import {
+  DefaultTableCollapsedSearch,
+  DefaultTableCompactSearch,
+  DefaultTableInlineSearch,
+} from './DefaultTableSearch';
+import DefaultToolbarAction from './DefaultToolbarAction';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultTableToolbar = ({ storeName }) => {
+  const store = useStore(storeName);
+  const { width } = useWindowDimensions();
+  const configs = store?.getters?.configs || {};
+  const compactBreakpoint = Number(configs.compactBreakpoint || 768);
+  const isCompactView = width > 0 && width <= compactBreakpoint;
+  const showTotalItemsInCompactToolbar = configs.showTotalItemsInCompactToolbar === true;
+  const showTotalItemsInFooter = configs.showTotalItemsInFooter !== false;
+  const toolbarActions = Array.isArray(configs.toolbarActions) ? configs.toolbarActions : [];
+  const { toolbarColors } = useDefaultTableTheme();
+  const {
+    backgroundColor: toolbarBackgroundColor,
+    borderColor: toolbarBorderColor,
+    countBackgroundColor: toolbarCountBackgroundColor,
+    countTextColor: toolbarCountTextColor,
+  } = toolbarColors;
+  const storeTotalItems = store?.getters?.totalItems;
+  const resolvedTotalItems = storeTotalItems;
+  const totalItemsNumber = Number(resolvedTotalItems);
+  const shouldRenderTotalItems =
+    resolvedTotalItems !== null &&
+    resolvedTotalItems !== undefined &&
+    Number.isFinite(totalItemsNumber);
+  const shouldRenderFooterTotalItems =
+    shouldRenderTotalItems &&
+    showTotalItemsInFooter !== false;
+  const shouldRenderCompactToolbarTotalItems =
+    showTotalItemsInCompactToolbar === true &&
+    isCompactView &&
+    shouldRenderTotalItems &&
+    !shouldRenderFooterTotalItems;
+  const resolvedTotalItemsText =
+    shouldRenderTotalItems
+      ? `${totalItemsNumber} ${global.t?.t(storeName, 'label', 'items')}`
+      : '';
+  const renderToolbarActions = () =>
+    Array.isArray(toolbarActions) && toolbarActions.length > 0 ? (
+      <View style={styles.toolbarActionGroup}>
+        {toolbarActions.map(action => (
+          <DefaultToolbarAction
+            key={action?.key || action?.icon || action?.label}
+            action={action}
+          />
+        ))}
+      </View>
+    ) : null;
+
+  return (
+    <View
+      style={[
+        styles.toolbar,
+        shouldRenderCompactToolbarTotalItems ? styles.toolbarWithCompactTotal : null,
+        { borderBottomColor: toolbarBorderColor, backgroundColor: toolbarBackgroundColor },
+      ]}
+    >
+      {shouldRenderCompactToolbarTotalItems ? (
+        <View style={styles.toolbarCompactLead}>
+          <View style={[styles.toolbarCountPill, { backgroundColor: toolbarCountBackgroundColor }]}>
+            <Text
+              style={[styles.toolbarCountText, { color: toolbarCountTextColor }]}
+              numberOfLines={1}
+              adjustsFontSizeToFit
+              minimumFontScale={0.82}
+            >
+              {resolvedTotalItemsText}
+            </Text>
+          </View>
+          <DefaultTableCompactSearch storeName={storeName} />
+          {renderToolbarActions()}
+        </View>
+      ) : null}
+
+      <View style={shouldRenderCompactToolbarTotalItems ? styles.toolbarCompactActions : styles.toolbarLeft}>
+        <DefaultTableInlineSearch storeName={storeName} />
+        <DefaultTableCollapsedSearch storeName={storeName} />
+        <View style={styles.toolbarActionGroup}>
+          {!shouldRenderCompactToolbarTotalItems ? renderToolbarActions() : null}
+          <DefaultTableControls storeName={storeName} />
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default DefaultTableToolbar;

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

@@ -0,0 +1,56 @@
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { normalizeText } from '../inputs/defaultInputUtils';
+import styles from './DefaultTable.styles';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultToolbarAction = ({ action }) => {
+  const { tableActionColors } = useDefaultTableTheme();
+  const {
+    backgroundColor: tableActionBackgroundColor,
+    borderColor: tableActionBorderColor,
+    textColor: tableActionTextColor,
+  } = tableActionColors;
+
+  if (!action || action.hidden) return null;
+
+  const hasLabel = normalizeText(action.label) !== '';
+  const actionColor = action.color || tableActionTextColor;
+
+  return (
+    <TouchableOpacity
+      key={action.key || action.icon || action.label}
+      accessibilityRole="button"
+      accessibilityLabel={action.accessibilityLabel || action.label || action.key || action.icon}
+      style={[
+        styles.toolbarButton,
+        { backgroundColor: tableActionBackgroundColor, borderColor: tableActionBorderColor },
+        action.style,
+      ]}
+      activeOpacity={0.82}
+      disabled={action.disabled === true}
+      onPress={action.onPress}
+    >
+      {action.icon ? (
+        <Icon
+          name={action.icon}
+          size={action.iconSize || 14}
+          color={actionColor}
+        />
+      ) : null}
+      {hasLabel ? (
+        <Text style={[styles.toolbarActionLabel, { color: actionColor }, action.labelStyle]} numberOfLines={1}>
+          {action.label}
+        </Text>
+      ) : null}
+      {action.badge !== undefined && action.badge !== null ? (
+        <Text style={[styles.toolbarBadgeText, { color: action.badgeColor || tableActionTextColor }]}>
+          {action.badge}
+        </Text>
+      ) : null}
+    </TouchableOpacity>
+  );
+};
+
+export default DefaultToolbarAction;