@controleonline/ui-default 1.0.265 → 1.0.267

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

@@ -16,15 +16,14 @@ const styles = StyleSheet.create({
     flex: 1,
     width: '100%',
     minHeight: 0,
-    borderWidth: 1,
-    borderRadius: 10,
-    overflow: 'visible',
+    borderRadius: 8,
+    overflow: 'hidden',
     position: 'relative',
   },
   toolbar: {
-    minHeight: 36,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
+    minHeight: 52,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
     borderBottomWidth: 1,
     flexDirection: 'row',
     flexWrap: 'nowrap',
@@ -51,7 +50,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'nowrap',
     alignItems: 'center',
-    gap: 6,
+    gap: 8,
     flexShrink: 0,
     marginLeft: 'auto',
   },
@@ -76,8 +75,8 @@ const styles = StyleSheet.create({
     marginLeft: 0,
   },
   toolbarSearch: {
-    width: 190,
-    maxWidth: 220,
+    width: 260,
+    maxWidth: 360,
     flexShrink: 1,
   },
   toolbarSearchButton: {
@@ -111,10 +110,10 @@ const styles = StyleSheet.create({
     fontWeight: '900',
   },
   toolbarButton: {
-    minWidth: 28,
-    height: 28,
-    borderRadius: 14,
-    paddingHorizontal: 7,
+    minWidth: 36,
+    height: 36,
+    borderRadius: 8,
+    paddingHorizontal: 10,
     borderWidth: 1,
     flexDirection: 'row',
     alignItems: 'center',
@@ -123,11 +122,23 @@ const styles = StyleSheet.create({
   },
   toolbarButtonActive: {
   },
-  toolbarAddButton: {
-    minWidth: 30,
-    width: 30,
-    paddingHorizontal: 0,
-  },
+  toolbarAddButton: {
+    minWidth: 36,
+    width: 36,
+    paddingHorizontal: 0,
+  },
+  floatingAddButton: {
+    position: 'absolute',
+    right: 16,
+    bottom: 16,
+    width: 52,
+    height: 52,
+    borderRadius: 26,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 30,
+    ...shadow,
+  },
   toolbarBadgeText: {
     fontSize: 10,
     fontWeight: '900',
@@ -271,8 +282,8 @@ const styles = StyleSheet.create({
     minWidth: '100%',
     minHeight: 0,
   },
-  headerRow: {
-    minHeight: 34,
+  headerRow: {
+    minHeight: 40,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'center',
@@ -280,8 +291,8 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#E2E8F0',
   },
-  filterRow: {
-    minHeight: 40,
+  filterRow: {
+    minHeight: 46,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'stretch',
@@ -289,25 +300,24 @@ const styles = StyleSheet.create({
     borderBottomWidth: 1,
     borderBottomColor: '#E2E8F0',
   },
-  row: {
-    minHeight: 44,
+  row: {
+    minHeight: 48,
     width: '100%',
     flexDirection: 'row',
     alignItems: 'stretch',
     borderBottomWidth: 1,
     borderBottomColor: '#EEF2F7',
   },
-  cell: {
-    minWidth: 118,
-    flexBasis: 118,
+  cell: {
+    minWidth: 118,
+    flexBasis: 118,
     flexGrow: 1,
     flexShrink: 0,
-    paddingHorizontal: 10,
-    paddingVertical: 8,
-    justifyContent: 'center',
-    borderRightWidth: 1,
-    borderRightColor: '#EEF2F7',
-  },
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    justifyContent: 'center',
+    borderRightWidth: 0,
+  },
   identityCell: {
     minWidth: 76,
     flexBasis: 76,
@@ -365,13 +375,12 @@ const styles = StyleSheet.create({
     flexBasis: 132,
     flexGrow: 0.9,
   },
-  headerText: {
-    color: '#64748B',
-    fontSize: 10,
-    fontWeight: '900',
-    letterSpacing: 0.35,
-    textTransform: 'uppercase',
-  },
+  headerText: {
+    fontSize: 11,
+    fontWeight: '800',
+    letterSpacing: 0,
+    textTransform: 'uppercase',
+  },
   sortableHeader: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -392,11 +401,10 @@ const styles = StyleSheet.create({
     fontSize: 11,
     fontWeight: '700',
   },
-  cellText: {
-    color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
-  },
+  cellText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
   mutedCellText: {
     color: '#94A3B8',
   },
@@ -479,23 +487,30 @@ const styles = StyleSheet.create({
     flexGrow: 1,
     width: '100%',
   },
-  cardItem: {
-    position: 'relative',
-  },
+  cardItem: {
+    position: 'relative',
+  },
+  cardItemWithActions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  cardContent: {
+    flex: 1,
+    minWidth: 0,
+  },
   cardActions: {
-    position: 'absolute',
-    right: 10,
-    bottom: 10,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-end',
     gap: 6,
+    flexShrink: 0,
   },
   cardActionGroup: {
-    position: 'absolute',
-    right: 8,
-    top: 8,
     flexDirection: 'row',
     alignItems: 'center',
+    justifyContent: 'flex-end',
+    alignSelf: 'flex-end',
     gap: 6,
   },
   defaultCard: {

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

@@ -81,15 +81,24 @@ const DefaultTableCards = ({ storeName }) => {
 
     if (typeof configs.renderCard === 'function') {
       return (
-        <View key={row?.['@id'] || row?.id} style={[styles.cardItem, rowStyleValue]}>
-          {configs.renderCard({
-            item: row,
-            openEdit: () => configs.onEditRow?.(row),
-            openRow: hasRowPress ? () => configs.onRowPress(row) : null,
-            renderField,
-            renderValue,
-            row,
-          })}
+        <View
+          key={row?.['@id'] || row?.id}
+          style={[
+            styles.cardItem,
+            hasRowActions ? styles.cardItemWithActions : null,
+            rowStyleValue,
+          ]}
+        >
+          <View style={styles.cardContent}>
+            {configs.renderCard({
+              item: row,
+              openEdit: () => configs.onEditRow?.(row),
+              openRow: hasRowPress ? () => configs.onRowPress(row) : null,
+              renderField,
+              renderValue,
+              row,
+            })}
+          </View>
           {hasRowActions ? (
             <View style={styles.cardActions}>
               {customRowActions}

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

@@ -1,208 +1,205 @@
-import React from 'react';
-import { Text, TouchableOpacity } from 'react-native';
-import Icon from 'react-native-vector-icons/Feather';
-import { useStore } from '@store';
-import DefaultColumnMenu from './DefaultColumnMenu';
-import DefaultDebug from './DefaultDebug';
-import DefaultFiltersModal from './DefaultFiltersModal';
-import DefaultModalButton from './DefaultModalButton';
-import styles from './DefaultTable.styles';
-import { normalizeText } from '../inputs/defaultInputUtils';
-import {
-  persistTableViewModePreference,
-  resolveDefaultTablePreferenceScope,
-} from '../../utils/tableVisibleColumnsPreferences';
-import { shouldIncludeColumn } from './DefaultTable.utils';
-import useDefaultTableTheme from './useDefaultTableTheme';
-
-const DefaultTableControls = ({ storeName }) => {
-  const store = useStore(storeName);
-  const configs = store?.getters?.configs || {};
-  const effectiveViewMode =
-    configs.effectiveViewMode ||
-    configs.viewMode ||
-    configs.initialViewMode ||
-    'table';
-  const tablePreferenceScope =
-    configs.tablePreferenceScope ||
-    resolveDefaultTablePreferenceScope({ storeName });
-  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
-  const filters = store?.getters?.filters || {};
-  const hasFilterableColumns = columns.some(
-    column =>
-      configs.showColumnFiltersButton !== false &&
-      shouldIncludeColumn(column) &&
-      column?.filter !== false &&
-      column?.filters !== false,
-  );
-  const tableFiltersVisible = Boolean(configs.tableFiltersVisible);
-  const activeFilterCount = Object.values(filters).filter(value => normalizeText(value) !== '').length;
-  const addConfig = store?.getters?.add;
-  const shouldRenderAddButton =
-    (addConfig === true || configs.add === true) &&
-    (typeof configs.onAdd === 'function' || typeof store?.actions?.save === 'function');
-  const { tableButtonColors } = useDefaultTableTheme();
-  const {
-    backgroundColor,
-    borderColor,
-    iconColor,
-    pressedBackgroundColor,
-    pressedBorderColor,
-    pressedIconColor,
-    textColor,
-  } = tableButtonColors;
-
-  const buttonStyle = [
-    styles.toolbarButton,
-    { borderColor, backgroundColor },
-  ];
-  const pressedStyle = {
-    backgroundColor: pressedBackgroundColor,
-    borderColor: pressedBorderColor,
-  };
-  const updateConfigs = nextConfigs => {
-    if (typeof store?.actions?.setConfigs === 'function') {
-      store.actions.setConfigs(nextConfigs);
-      return;
-    }
-
-    if (store?.getters) {
-      store.getters.configs = nextConfigs;
-    }
-  };
-
-  return (
-    <>
-      <DefaultDebug storeName={storeName} />
-      {hasFilterableColumns && effectiveViewMode === 'table' ? (
-        <TouchableOpacity
-          style={[
-            ...buttonStyle,
-            tableFiltersVisible ? pressedStyle : null,
-          ]}
-          activeOpacity={0.82}
-          onPress={() =>
-            updateConfigs({
-              ...configs,
-              tableFiltersVisible: !tableFiltersVisible,
-            })
-          }
-        >
-          <Icon
-            name="filter"
-            size={14}
-            color={tableFiltersVisible ? pressedIconColor : iconColor}
-          />
-          {activeFilterCount > 0 ? (
-            <Text
-              style={[
-                styles.toolbarBadgeText,
-                { color: tableFiltersVisible ? pressedIconColor : iconColor },
-              ]}
-            >
-              {activeFilterCount}
-            </Text>
-          ) : null}
-        </TouchableOpacity>
-      ) : null}
-      {hasFilterableColumns && effectiveViewMode === 'cards' ? (
-        <DefaultModalButton
-          renderButton={({ isOpen, open }) => (
-            <TouchableOpacity
-              style={[
-                ...buttonStyle,
-                isOpen ? pressedStyle : null,
-              ]}
-              activeOpacity={0.82}
-              onPress={open}
-            >
-              <Icon
-                name="filter"
-                size={14}
-                color={isOpen ? pressedIconColor : iconColor}
-              />
-              {activeFilterCount > 0 ? (
-                <Text
-                  style={[
-                    styles.toolbarBadgeText,
-                    { color: isOpen ? pressedIconColor : iconColor },
-                  ]}>
-                  {activeFilterCount}
-                </Text>
-              ) : null}
-            </TouchableOpacity>
-          )}
-        >
-          {({ close, isOpen }) => (
-            <DefaultFiltersModal
-              storeName={storeName}
-              visible={isOpen}
-              onClose={close}
-            />
-          )}
-        </DefaultModalButton>
-      ) : null}
-      <TouchableOpacity
-        style={[
-          ...buttonStyle,
-          effectiveViewMode !== 'table' ? pressedStyle : null,
-        ]}
-        activeOpacity={0.82}
-        onPress={() => {
-          const nextViewMode = effectiveViewMode === 'table' ? 'cards' : 'table';
-          const nextConfigs = {
-            ...configs,
-            effectiveViewMode: nextViewMode,
-            viewMode: nextViewMode,
-          };
-
-          persistTableViewModePreference(tablePreferenceScope, nextConfigs.viewMode);
-          updateConfigs(nextConfigs);
-        }}
-      >
-        <Icon
-          name={effectiveViewMode === 'table' ? 'list' : 'grid'}
-          size={14}
-          color={effectiveViewMode !== 'table' ? pressedIconColor : iconColor}
-        />
-      </TouchableOpacity>
-      <DefaultModalButton
-        renderButton={({ isOpen, toggle }) => (
-          <TouchableOpacity
-            style={[
-              ...buttonStyle,
-              isOpen ? pressedStyle : null,
-            ]}
-            activeOpacity={0.82}
-            onPress={toggle}
-          >
-            <Icon name="columns" size={14} color={isOpen ? pressedIconColor : textColor} />
-          </TouchableOpacity>
-        )}
-      >
-        {({ close, isOpen }) => (
-          <DefaultColumnMenu
-            storeName={storeName}
-            visible={isOpen}
-            onClose={close}
-          />
-        )}
-      </DefaultModalButton>
-      {shouldRenderAddButton ? (
-        <TouchableOpacity
-          style={[
-            styles.toolbarButton,
-            styles.toolbarAddButton,
-            { backgroundColor: backgroundColor, borderColor: backgroundColor },
-          ]}
-          activeOpacity={0.85}
-          onPress={() => configs.onAdd?.()}
-        >
-          <Icon name="plus" size={16} color={textColor} />
-        </TouchableOpacity>
-      ) : null}
-    </>
-  );
-};
-
-export default DefaultTableControls;
+import React from 'react';
+import { Text, TouchableOpacity } from 'react-native';
+import Icon from 'react-native-vector-icons/Feather';
+import { useStore } from '@store';
+import DefaultColumnMenu from './DefaultColumnMenu';
+import DefaultDebug from './DefaultDebug';
+import DefaultFiltersModal from './DefaultFiltersModal';
+import DefaultModalButton from './DefaultModalButton';
+import styles from './DefaultTable.styles';
+import { normalizeText } from '../inputs/defaultInputUtils';
+import {
+  persistTableViewModePreference,
+  resolveDefaultTablePreferenceScope,
+} from '../../utils/tableVisibleColumnsPreferences';
+import { shouldIncludeColumn } from './DefaultTable.utils';
+import useDefaultTableTheme from './useDefaultTableTheme';
+
+const DefaultTableControls = ({ storeName }) => {
+  const store = useStore(storeName);
+  const configs = store?.getters?.configs || {};
+  const effectiveViewMode =
+    configs.effectiveViewMode ||
+    configs.viewMode ||
+    configs.initialViewMode ||
+    'table';
+  const tablePreferenceScope =
+    configs.tablePreferenceScope ||
+    resolveDefaultTablePreferenceScope({ storeName });
+  const columns = Array.isArray(store?.getters?.columns) ? store.getters.columns : [];
+  const filters = store?.getters?.filters || {};
+  const hasFilterableColumns = columns.some(
+    column =>
+      configs.showColumnFiltersButton !== false &&
+      shouldIncludeColumn(column) &&
+      column?.filter !== false &&
+      column?.filters !== false,
+  );
+  const tableFiltersVisible = Boolean(configs.tableFiltersVisible);
+  const activeFilterCount = Object.values(filters).filter(value => normalizeText(value) !== '').length;
+  const addConfig = store?.getters?.add;
+  const shouldRenderAddButton =
+    (addConfig === true || configs.add === true) &&
+    (typeof configs.onAdd === 'function' || typeof store?.actions?.save === 'function');
+  const { tableButtonColors } = useDefaultTableTheme();
+  const {
+    backgroundColor,
+    borderColor,
+    iconColor,
+    pressedBackgroundColor,
+    pressedBorderColor,
+    pressedIconColor,
+    textColor,
+  } = tableButtonColors;
+
+  const buttonStyle = [
+    styles.toolbarButton,
+    { borderColor, backgroundColor },
+  ];
+  const pressedStyle = {
+    backgroundColor: pressedBackgroundColor,
+    borderColor: pressedBorderColor,
+  };
+  const updateConfigs = nextConfigs => {
+    if (typeof store?.actions?.setConfigs === 'function') {
+      store.actions.setConfigs(nextConfigs);
+      return;
+    }
+
+    if (store?.getters) {
+      store.getters.configs = nextConfigs;
+    }
+  };
+  const nextViewMode = effectiveViewMode === 'table' ? 'cards' : 'table';
+
+  return (
+    <>
+      <DefaultDebug storeName={storeName} />
+      {hasFilterableColumns && effectiveViewMode === 'table' ? (
+        <TouchableOpacity
+          style={[
+            ...buttonStyle,
+            tableFiltersVisible ? pressedStyle : null,
+          ]}
+          activeOpacity={0.82}
+          onPress={() =>
+            updateConfigs({
+              ...configs,
+              tableFiltersVisible: !tableFiltersVisible,
+            })
+          }
+        >
+          <Icon
+            name="filter"
+            size={14}
+            color={tableFiltersVisible ? pressedIconColor : textColor}
+          />
+          {activeFilterCount > 0 ? (
+            <Text
+              style={[
+                styles.toolbarBadgeText,
+                { color: tableFiltersVisible ? pressedIconColor : textColor },
+              ]}
+            >
+              {activeFilterCount}
+            </Text>
+          ) : null}
+        </TouchableOpacity>
+      ) : null}
+      {hasFilterableColumns && effectiveViewMode === 'cards' ? (
+        <DefaultModalButton
+          renderButton={({ isOpen, open }) => (
+            <TouchableOpacity
+              style={[
+                ...buttonStyle,
+                isOpen ? pressedStyle : null,
+              ]}
+              activeOpacity={0.82}
+              onPress={open}
+            >
+              <Icon
+                name="filter"
+                size={14}
+                color={isOpen ? pressedIconColor : textColor}
+              />
+              {activeFilterCount > 0 ? (
+                <Text
+                  style={[
+                    styles.toolbarBadgeText,
+                    { color: isOpen ? pressedIconColor : textColor },
+                  ]}>
+                  {activeFilterCount}
+                </Text>
+              ) : null}
+            </TouchableOpacity>
+          )}
+        >
+          {({ close, isOpen }) => (
+            <DefaultFiltersModal
+              storeName={storeName}
+              visible={isOpen}
+              onClose={close}
+            />
+          )}
+        </DefaultModalButton>
+      ) : null}
+      <TouchableOpacity
+        style={buttonStyle}
+        activeOpacity={0.82}
+        onPress={() => {
+          const nextConfigs = {
+            ...configs,
+            effectiveViewMode: nextViewMode,
+            viewMode: nextViewMode,
+          };
+
+          persistTableViewModePreference(tablePreferenceScope, nextConfigs.viewMode);
+          updateConfigs(nextConfigs);
+        }}
+      >
+        <Icon
+          name={nextViewMode === 'cards' ? 'grid' : 'list'}
+          size={14}
+          color={textColor}
+        />
+      </TouchableOpacity>
+      <DefaultModalButton
+        renderButton={({ isOpen, toggle }) => (
+          <TouchableOpacity
+            style={[
+              ...buttonStyle,
+              isOpen ? pressedStyle : null,
+            ]}
+            activeOpacity={0.82}
+            onPress={toggle}
+          >
+            <Icon name="columns" size={14} color={isOpen ? pressedIconColor : textColor} />
+          </TouchableOpacity>
+        )}
+      >
+        {({ close, isOpen }) => (
+          <DefaultColumnMenu
+            storeName={storeName}
+            visible={isOpen}
+            onClose={close}
+          />
+        )}
+      </DefaultModalButton>
+      {shouldRenderAddButton ? (
+        <TouchableOpacity
+          style={[
+            styles.toolbarButton,
+            styles.toolbarAddButton,
+            { backgroundColor: backgroundColor, borderColor: backgroundColor },
+          ]}
+          activeOpacity={0.85}
+          onPress={() => configs.onAdd?.()}
+        >
+          <Icon name="plus" size={16} color={textColor} />
+        </TouchableOpacity>
+      ) : null}
+    </>
+  );
+};
+
+export default DefaultTableControls;