@controleonline/ui-default 1.0.263 → 1.0.265

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

@@ -12,47 +12,48 @@ const shadow = Platform.select({
 });
 
 const styles = StyleSheet.create({
-  wrap: {
-    flex: 1,
-    width: '100%',
-    minHeight: 0,
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-    borderRadius: 10,
-    backgroundColor: '#FFFFFF',
-    overflow: 'visible',
-    position: 'relative',
-  },
+  wrap: {
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+    borderWidth: 1,
+    borderRadius: 10,
+    overflow: 'visible',
+    position: 'relative',
+  },
   toolbar: {
     minHeight: 36,
     paddingHorizontal: 8,
     paddingVertical: 4,
     borderBottomWidth: 1,
-    borderBottomColor: '#E2E8F0',
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexWrap: 'nowrap',
     alignItems: 'center',
     justifyContent: 'flex-end',
     gap: 6,
-    backgroundColor: '#FFFFFF',
     zIndex: 10,
   },
+  toolbarWithCompactTotal: {
+    flexWrap: 'wrap',
+  },
   toolbarLeft: {
+    flex: 1,
+    width: '100%',
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexWrap: 'nowrap',
     alignItems: 'center',
-    flexShrink: 1,
+    flexShrink: 0,
     gap: 6,
     minWidth: 0,
-    justifyContent: 'flex-end',
+    justifyContent: 'space-between',
   },
   toolbarActionGroup: {
     flexDirection: 'row',
-    flexWrap: 'wrap',
+    flexWrap: 'nowrap',
     alignItems: 'center',
     gap: 6,
     flexShrink: 0,
-    marginLeft: 6,
+    marginLeft: 'auto',
   },
   toolbarCompactLead: {
     flex: 1,
@@ -74,49 +75,54 @@ const styles = StyleSheet.create({
     flexShrink: 0,
     marginLeft: 0,
   },
-  toolbarSearch: {
-    width: 190,
-    maxWidth: 220,
-    flexShrink: 1,
-  },
+  toolbarSearch: {
+    width: 190,
+    maxWidth: 220,
+    flexShrink: 1,
+  },
+  toolbarSearchButton: {
+    minWidth: 30,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    borderWidth: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
   toolbarCompactSearch: {
     flex: 1,
     width: 'auto',
     maxWidth: '100%',
     minWidth: 104,
   },
-  toolbarCountPill: {
-    minWidth: 0,
-    maxWidth: 112,
-    height: 28,
-    borderRadius: 999,
-    backgroundColor: '#EFF6FF',
-    paddingHorizontal: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 1,
+  toolbarCountPill: {
+    minWidth: 0,
+    maxWidth: 112,
+    height: 28,
+    borderRadius: 999,
+    paddingHorizontal: 10,
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 1,
   },
   toolbarCountText: {
     fontSize: 9,
     fontWeight: '900',
   },
-  toolbarButton: {
-    minWidth: 28,
-    height: 28,
-    borderRadius: 14,
-    paddingHorizontal: 7,
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-    backgroundColor: '#FFFFFF',
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4,
-  },
-  toolbarButtonActive: {
-    backgroundColor: '#F8FAFC',
-    borderColor: '#CBD5E1',
+  toolbarButton: {
+    minWidth: 28,
+    height: 28,
+    borderRadius: 14,
+    paddingHorizontal: 7,
+    borderWidth: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 4,
   },
+  toolbarButtonActive: {
+  },
   toolbarAddButton: {
     minWidth: 30,
     width: 30,
@@ -167,17 +173,101 @@ const styles = StyleSheet.create({
   columnMenuModalBody: {
     maxHeight: 520,
   },
+  searchModalCard: {
+    width: '100%',
+    maxWidth: 420,
+  },
+  filtersModalCard: {
+    width: '100%',
+    maxWidth: 560,
+  },
+  debugModalCard: {
+    width: '100%',
+    maxWidth: 760,
+  },
+  filtersModalBody: {
+    maxHeight: 520,
+  },
+  filtersModalList: {
+    padding: 14,
+    gap: 12,
+  },
+  filtersModalField: {
+    width: '100%',
+    gap: 4,
+  },
+  filtersModalInput: {
+    width: '100%',
+  },
+  searchModalBody: {
+    padding: 14,
+  },
+  searchModalInput: {
+    width: '100%',
+    maxWidth: '100%',
+  },
   columnMenuModalList: {
     paddingVertical: 6,
   },
+  debugModalBody: {
+    maxHeight: 560,
+  },
+  debugModalContent: {
+    padding: 14,
+    gap: 12,
+  },
+  debugSectionHeader: {
+    minHeight: 30,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+  },
+  debugSectionTitle: {
+    fontSize: 11,
+    fontWeight: '900',
+    textTransform: 'uppercase',
+  },
+  debugCopyButton: {
+    height: 28,
+    borderRadius: 8,
+    borderWidth: 1,
+    paddingHorizontal: 9,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 5,
+  },
+  debugCopyButtonText: {
+    fontSize: 11,
+    fontWeight: '800',
+  },
+  debugCodeBlock: {
+    minHeight: 92,
+    borderWidth: 1,
+    borderRadius: 8,
+    padding: 10,
+    backgroundColor: '#F8FAFC',
+    fontSize: 11,
+    lineHeight: 16,
+    fontFamily: Platform.select({
+      ios: 'Menlo',
+      android: 'monospace',
+      default: 'monospace',
+    }),
+  },
   scroll: {
-    flex: 1,
-    width: '100%',
-    minHeight: 0,
-  },
-  content: {
-    flex: 1,
-    width: '100%',
+    flex: 1,
+    width: '100%',
+    minHeight: 0,
+  },
+  horizontalScrollContent: {
+    flexGrow: 1,
+    minWidth: '100%',
+  },
+  content: {
+    flex: 1,
+    width: '100%',
     minWidth: '100%',
     minHeight: 0,
   },
@@ -218,14 +308,61 @@ const styles = StyleSheet.create({
     borderRightWidth: 1,
     borderRightColor: '#EEF2F7',
   },
-  identityCell: {
-    minWidth: 76,
-    flexBasis: 76,
-    flexGrow: 0.62,
-  },
-  moneyCell: {
-    minWidth: 132,
-    flexBasis: 132,
+  identityCell: {
+    minWidth: 76,
+    flexBasis: 76,
+    flexGrow: 0.62,
+  },
+  stickyIdentityCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 5,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        left: 0,
+      },
+      default: {},
+    }),
+  },
+  stickyActionsCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 5,
+    ...Platform.select({
+      web: {
+        position: 'sticky',
+        right: 0,
+      },
+      default: {},
+    }),
+  },
+  stickyHeaderCell: {
+    zIndex: 8,
+  },
+  pinnedIdentityCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 6,
+    ...Platform.select({
+      web: {
+        boxShadow: '2px 0 0 rgba(226,232,240,0.9)',
+        position: 'relative',
+      },
+      default: {},
+    }),
+  },
+  pinnedActionsCell: {
+    backgroundColor: '#FFFFFF',
+    zIndex: 6,
+    ...Platform.select({
+      web: {
+        boxShadow: '-2px 0 0 rgba(226,232,240,0.9)',
+        position: 'relative',
+      },
+      default: {},
+    }),
+  },
+  moneyCell: {
+    minWidth: 132,
+    flexBasis: 132,
     flexGrow: 0.9,
   },
   headerText: {
@@ -266,16 +403,11 @@ const styles = StyleSheet.create({
   editableCell: {
     backgroundColor: '#FFFFFF',
   },
-  editingCell: {
-    paddingVertical: 4,
-    backgroundColor: '#EFF6FF',
-  },
-  editingRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 6,
-  },
-  input: {
+  editingCell: {
+    paddingVertical: 4,
+    backgroundColor: '#EFF6FF',
+  },
+  input: {
     flex: 1,
     height: 32,
     borderWidth: 1,
@@ -294,20 +426,26 @@ const styles = StyleSheet.create({
     fontWeight: '800',
     textTransform: 'uppercase',
   },
-  actionsCell: {
-    minWidth: 60,
-    width: 60,
-    flexBasis: 60,
-    flexGrow: 0,
-    flexShrink: 0,
-    maxWidth: 72,
-    alignItems: 'center',
-  },
-  iconButton: {
-    width: 28,
-    height: 28,
-    borderRadius: 14,
-    alignItems: 'center',
+  actionsCell: {
+    minWidth: 60,
+    width: 60,
+    flexBasis: 60,
+    flexGrow: 0,
+    flexShrink: 0,
+    maxWidth: 72,
+    alignItems: 'center',
+  },
+  rowActionsGroup: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+  },
+  iconButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    alignItems: 'center',
     justifyContent: 'center',
     borderWidth: 1,
     borderColor: '#E2E8F0',
@@ -344,15 +482,26 @@ const styles = StyleSheet.create({
   cardItem: {
     position: 'relative',
   },
-  cardActions: {
-    position: 'absolute',
-    right: 10,
-    bottom: 10,
-  },
-  defaultCard: {
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-    borderRadius: 10,
+  cardActions: {
+    position: 'absolute',
+    right: 10,
+    bottom: 10,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  cardActionGroup: {
+    position: 'absolute',
+    right: 8,
+    top: 8,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+  },
+  defaultCard: {
+    borderWidth: 1,
+    borderColor: '#E2E8F0',
+    borderRadius: 10,
     backgroundColor: '#FFFFFF',
     padding: 12,
     gap: 8,
@@ -394,43 +543,6 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     gap: 8,
   },
-  loadingFooter: {
-    padding: 14,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 8,
-  },
-  loadingOverlay: {
-    ...Platform.select({
-      web: {
-        position: 'absolute',
-        inset: 0,
-      },
-      default: {
-        position: 'absolute',
-        top: 0,
-        right: 0,
-        bottom: 0,
-        left: 0,
-      },
-    }),
-    alignItems: 'center',
-    justifyContent: 'center',
-    zIndex: 14,
-    padding: 16,
-  },
-  loadingOverlayCard: {
-    minWidth: 220,
-    maxWidth: '100%',
-    paddingHorizontal: 18,
-    paddingVertical: 14,
-    borderRadius: 12,
-    borderWidth: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 8,
-    ...shadow,
-  },
   footerBar: {
     minHeight: 40,
     paddingHorizontal: 8,
@@ -481,7 +593,6 @@ const styles = StyleSheet.create({
     minWidth: 0,
     flexShrink: 1,
     borderRadius: 999,
-    backgroundColor: '#EFF6FF',
     paddingHorizontal: 10,
     paddingVertical: 5,
   },