@controleonline/ui-default 1.0.270 → 1.0.272

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

@@ -1,17 +1,17 @@
-import { Platform, StyleSheet } from 'react-native';
-
-const shadow = Platform.select({
-  ios: {
-    shadowColor: '#0F172A',
-    shadowOffset: { width: 0, height: 8 },
-    shadowOpacity: 0.14,
-    shadowRadius: 20,
-  },
-  android: { elevation: 6 },
-  web: { boxShadow: '0 14px 36px rgba(15,23,42,0.16)' },
-});
-
-const styles = StyleSheet.create({
+import { Platform, StyleSheet } from 'react-native';
+
+const shadow = Platform.select({
+  ios: {
+    shadowColor: '#0F172A',
+    shadowOffset: { width: 0, height: 8 },
+    shadowOpacity: 0.14,
+    shadowRadius: 20,
+  },
+  android: { elevation: 6 },
+  web: { boxShadow: '0 14px 36px rgba(15,23,42,0.16)' },
+});
+
+const styles = StyleSheet.create({
   wrap: {
     flex: 1,
     width: '100%',
@@ -104,11 +104,11 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     flexShrink: 1,
-  },
-  toolbarCountText: {
-    fontSize: 9,
-    fontWeight: '900',
-  },
+  },
+  toolbarCountText: {
+    fontSize: 9,
+    fontWeight: '900',
+  },
   toolbarButton: {
     minWidth: 36,
     height: 36,
@@ -119,7 +119,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
     gap: 4,
-  },
+  },
   toolbarButtonActive: {
   },
   toolbarAddButton: {
@@ -139,6 +139,35 @@ const styles = StyleSheet.create({
     zIndex: 30,
     ...shadow,
   },
+  bottomAddBar: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    backgroundColor: '#FFFFFF',
+    zIndex: 14,
+    ...shadow,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        bottom: 0,
+      },
+      default: {},
+    }),
+  },
+  bottomAddButton: {
+    minHeight: 46,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
+  bottomAddText: {
+    fontSize: 14,
+    fontWeight: '900',
+  },
   toolbarBadgeText: {
     fontSize: 10,
     fontWeight: '900',
@@ -164,12 +193,12 @@ const styles = StyleSheet.create({
     ...shadow,
   },
   columnMenuItem: {
-    minHeight: 32,
-    paddingHorizontal: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
+    minHeight: 32,
+    paddingHorizontal: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
   columnMenuText: {
     flex: 1,
     color: '#0F172A',
@@ -272,6 +301,12 @@ const styles = StyleSheet.create({
     width: '100%',
     minHeight: 0,
   },
+  body: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+    overflow: 'hidden',
+  },
   horizontalScrollContent: {
     flexGrow: 1,
     minWidth: '100%',
@@ -279,40 +314,40 @@ const styles = StyleSheet.create({
   content: {
     flex: 1,
     width: '100%',
-    minWidth: '100%',
-    minHeight: 0,
-  },
+    minWidth: '100%',
+    minHeight: 0,
+  },
   headerRow: {
     minHeight: 40,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: '#F8FAFC',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E2E8F0',
-  },
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: '#F8FAFC',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
   filterRow: {
     minHeight: 46,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    backgroundColor: '#FFFFFF',
-    borderBottomWidth: 1,
-    borderBottomColor: '#E2E8F0',
-  },
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+  },
   row: {
     minHeight: 48,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    borderBottomWidth: 1,
-    borderBottomColor: '#EEF2F7',
-  },
+    width: '100%',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    borderBottomWidth: 1,
+    borderBottomColor: '#EEF2F7',
+  },
   cell: {
     minWidth: 118,
     flexBasis: 118,
-    flexGrow: 1,
-    flexShrink: 0,
+    flexGrow: 1,
+    flexShrink: 0,
     paddingHorizontal: 14,
     paddingVertical: 10,
     justifyContent: 'center',
@@ -373,75 +408,73 @@ const styles = StyleSheet.create({
   moneyCell: {
     minWidth: 132,
     flexBasis: 132,
-    flexGrow: 0.9,
-  },
+    flexGrow: 0.9,
+  },
   headerText: {
     fontSize: 11,
     fontWeight: '800',
     letterSpacing: 0,
     textTransform: 'uppercase',
   },
-  sortableHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
-  filterCell: {
-    paddingVertical: 4,
-    backgroundColor: '#FFFFFF',
-  },
-  filterInput: {
-    height: 30,
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    color: '#0F172A',
-    backgroundColor: '#FFFFFF',
-    fontSize: 11,
-    fontWeight: '700',
-  },
+  sortableHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
+  filterCell: {
+    paddingVertical: 4,
+    backgroundColor: '#FFFFFF',
+  },
+  filterInput: {
+    height: 30,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    backgroundColor: '#FFFFFF',
+    fontSize: 11,
+    fontWeight: '700',
+  },
   cellText: {
     fontSize: 13,
     fontWeight: '600',
   },
-  mutedCellText: {
-    color: '#94A3B8',
-  },
-  editableCell: {
-    backgroundColor: '#FFFFFF',
-  },
+  mutedCellText: {
+    color: '#94A3B8',
+  },
+  editableCell: {
+    backgroundColor: '#FFFFFF',
+  },
   editingCell: {
     paddingVertical: 4,
     backgroundColor: '#EFF6FF',
   },
   input: {
-    flex: 1,
-    height: 32,
-    borderWidth: 1,
-    borderColor: '#93C5FD',
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
-    backgroundColor: '#FFFFFF',
-  },
-  savingText: {
-    marginTop: 2,
-    color: '#64748B',
-    fontSize: 9,
-    fontWeight: '800',
-    textTransform: 'uppercase',
-  },
+    flex: 1,
+    height: 32,
+    borderWidth: 1,
+    borderColor: '#93C5FD',
+    borderRadius: 8,
+    paddingHorizontal: 8,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+    backgroundColor: '#FFFFFF',
+  },
+  savingText: {
+    marginTop: 2,
+    color: '#64748B',
+    fontSize: 9,
+    fontWeight: '800',
+    textTransform: 'uppercase',
+  },
   actionsCell: {
-    minWidth: 60,
-    width: 60,
-    flexBasis: 60,
+    minWidth: 96,
     flexGrow: 0,
     flexShrink: 0,
-    maxWidth: 72,
     alignItems: 'center',
+    paddingHorizontal: 8,
   },
   rowActionsGroup: {
     flexDirection: 'row',
@@ -456,41 +489,59 @@ const styles = StyleSheet.create({
     height: 28,
     borderRadius: 14,
     alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-    backgroundColor: '#F8FAFC',
-  },
-  cancelButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-  },
-  cardsScroll: {
-    flex: 1,
-    minHeight: 0,
-  },
-  cardsGrid: {
-    padding: 10,
-    gap: 10,
-    flexGrow: 1,
-  },
-  tableList: {
-    flex: 1,
-    width: '100%',
-    minHeight: 0,
-  },
-  tableListContent: {
-    flexGrow: 1,
-    width: '100%',
-  },
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  cancelButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+  },
+  cardsScroll: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+    ...Platform.select({
+      web: {
+        overflowY: 'auto',
+      },
+      default: {},
+    }),
+  },
+  cardsGrid: {
+    paddingVertical: 10,
+    paddingHorizontal: 8,
+    gap: 10,
+    flexGrow: 1,
+    width: '100%',
+  },
+  cardsGridWithBottomAdd: {
+    paddingBottom: 86,
+  },
+  tableList: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+  },
+  tableListContent: {
+    flexGrow: 1,
+    width: '100%',
+  },
+  // FlatList multi-column cells must stretch so cards fill the row
+  // (app-community#710 — products card grid floating on desktop).
   cardItem: {
     position: 'relative',
+    flex: 1,
+    minWidth: 0,
+    width: '100%',
+    alignSelf: 'stretch',
   },
   cardItemWithActions: {
     flexDirection: 'row',
@@ -500,6 +551,7 @@ const styles = StyleSheet.create({
   cardContent: {
     flex: 1,
     minWidth: 0,
+    width: '100%',
   },
   cardActions: {
     flexDirection: 'row',
@@ -519,47 +571,48 @@ const styles = StyleSheet.create({
     borderWidth: 1,
     borderColor: '#E2E8F0',
     borderRadius: 10,
-    backgroundColor: '#FFFFFF',
-    padding: 12,
-    gap: 8,
-  },
-  defaultCardLine: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 12,
-  },
-  defaultCardLabel: {
-    width: 130,
-    color: '#64748B',
-    fontSize: 10,
-    fontWeight: '900',
-    textTransform: 'uppercase',
-  },
-  defaultCardValue: {
-    flex: 1,
-    color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  cardEditButton: {
-    position: 'absolute',
-    top: 8,
-    right: 8,
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-    backgroundColor: '#F8FAFC',
-  },
-  emptyBox: {
-    padding: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 8,
-  },
+    backgroundColor: '#FFFFFF',
+    padding: 12,
+    gap: 8,
+    width: '100%',
+  },
+  defaultCardLine: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  defaultCardLabel: {
+    width: 130,
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  defaultCardValue: {
+    flex: 1,
+    color: '#0F172A',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  cardEditButton: {
+    position: 'absolute',
+    top: 8,
+    right: 8,
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  emptyBox: {
+    padding: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 8,
+  },
   footerBar: {
     minHeight: 40,
     paddingHorizontal: 8,
@@ -571,22 +624,22 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'space-between',
     gap: 6,
-    zIndex: 12,
-    ...Platform.select({
-      web: {
-        position: 'sticky',
-        bottom: 0,
-      },
-      default: {},
-    }),
-  },
-  footerSummaryList: {
-    flex: 1,
-    minWidth: 0,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 4,
-  },
+    zIndex: 12,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        bottom: 0,
+      },
+      default: {},
+    }),
+  },
+  footerSummaryList: {
+    flex: 1,
+    minWidth: 0,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 4,
+  },
   footerSummaryItem: {
     flex: 1,
     minWidth: 0,
@@ -613,126 +666,126 @@ const styles = StyleSheet.create({
     paddingHorizontal: 10,
     paddingVertical: 5,
   },
-  footerCountText: {
-    fontSize: 11,
-    fontWeight: '900',
-  },
-  emptyText: {
-    color: '#64748B',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  modalOverlay: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    padding: 16,
-    backgroundColor: 'rgba(15,23,42,0.42)',
-  },
-  modalCard: {
-    width: '100%',
-    maxWidth: 860,
-    maxHeight: '86%',
-    borderRadius: 12,
-    backgroundColor: '#FFFFFF',
-    overflow: 'hidden',
-    ...shadow,
-  },
-  modalHeader: {
-    minHeight: 48,
-    paddingHorizontal: 14,
-    borderBottomWidth: 1,
-    borderBottomColor: '#E2E8F0',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  modalTitle: {
-    color: '#0F172A',
-    fontSize: 16,
-    fontWeight: '900',
-  },
-  modalCloseButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-    backgroundColor: '#F8FAFC',
-  },
-  modalBody: {
-    maxHeight: 520,
-  },
-  formGrid: {
-    padding: 14,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    gap: 10,
-  },
-  formField: {
-    flexGrow: 1,
-    flexBasis: 220,
-    minWidth: 220,
-  },
-  formLabel: {
-    marginBottom: 4,
-    color: '#64748B',
-    fontSize: 10,
-    fontWeight: '900',
-    letterSpacing: 0.3,
-    textTransform: 'uppercase',
-  },
-  formInput: {
-    height: 34,
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-    borderRadius: 8,
-    paddingHorizontal: 10,
-    color: '#0F172A',
-    backgroundColor: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  modalActions: {
-    minHeight: 52,
-    paddingHorizontal: 14,
-    borderTopWidth: 1,
-    borderTopColor: '#E2E8F0',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 8,
-  },
-  secondaryButton: {
-    height: 34,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-    paddingHorizontal: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#FFFFFF',
-  },
-  secondaryButtonText: {
-    color: '#334155',
-    fontSize: 12,
-    fontWeight: '800',
-  },
-  primaryButton: {
-    height: 34,
-    borderRadius: 8,
-    paddingHorizontal: 16,
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: '#0EA5E9',
-  },
-  primaryButtonText: {
-    color: '#FFFFFF',
-    fontSize: 12,
-    fontWeight: '900',
-  },
-});
-
-export default styles;
+  footerCountText: {
+    fontSize: 11,
+    fontWeight: '900',
+  },
+  emptyText: {
+    color: '#64748B',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  modalOverlay: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 16,
+    backgroundColor: 'rgba(15,23,42,0.42)',
+  },
+  modalCard: {
+    width: '100%',
+    maxWidth: 860,
+    maxHeight: '86%',
+    borderRadius: 12,
+    backgroundColor: '#FFFFFF',
+    overflow: 'hidden',
+    ...shadow,
+  },
+  modalHeader: {
+    minHeight: 48,
+    paddingHorizontal: 14,
+    borderBottomWidth: 1,
+    borderBottomColor: '#E2E8F0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  modalTitle: {
+    color: '#0F172A',
+    fontSize: 16,
+    fontWeight: '900',
+  },
+  modalCloseButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    backgroundColor: '#F8FAFC',
+  },
+  modalBody: {
+    maxHeight: 520,
+  },
+  formGrid: {
+    padding: 14,
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  formField: {
+    flexGrow: 1,
+    flexBasis: 220,
+    minWidth: 220,
+  },
+  formLabel: {
+    marginBottom: 4,
+    color: '#64748B',
+    fontSize: 10,
+    fontWeight: '900',
+    letterSpacing: 0.3,
+    textTransform: 'uppercase',
+  },
+  formInput: {
+    height: 34,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    color: '#0F172A',
+    backgroundColor: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  modalActions: {
+    minHeight: 52,
+    paddingHorizontal: 14,
+    borderTopWidth: 1,
+    borderTopColor: '#E2E8F0',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'flex-end',
+    gap: 8,
+  },
+  secondaryButton: {
+    height: 34,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#CBD5E1',
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#FFFFFF',
+  },
+  secondaryButtonText: {
+    color: '#334155',
+    fontSize: 12,
+    fontWeight: '800',
+  },
+  primaryButton: {
+    height: 34,
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: '#0EA5E9',
+  },
+  primaryButtonText: {
+    color: '#FFFFFF',
+    fontSize: 12,
+    fontWeight: '900',
+  },
+});
+
+export default styles;