@controleonline/ui-default 1.0.275 → 1.0.276

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

@@ -1,797 +1,6 @@
-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%',
-    minHeight: 0,
-    borderRadius: 8,
-    overflow: 'hidden',
-    position: 'relative',
-  },
-  toolbar: {
-    minHeight: 52,
-    paddingHorizontal: 16,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 6,
-    zIndex: 10,
-  },
-  toolbarWithCompactTotal: {
-    flexWrap: 'wrap',
-  },
-  toolbarLeft: {
-    flex: 1,
-    width: '100%',
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    alignItems: 'center',
-    flexShrink: 0,
-    gap: 6,
-    minWidth: 0,
-    justifyContent: 'space-between',
-  },
-  toolbarActionGroup: {
-    flexDirection: 'row',
-    flexWrap: 'nowrap',
-    alignItems: 'center',
-    gap: 8,
-    flexShrink: 0,
-    marginLeft: 'auto',
-  },
-  toolbarCompactLead: {
-    flex: 1,
-    flexBasis: '100%',
-    minWidth: 0,
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 6,
-  },
-  toolbarCompactActions: {
-    width: '100%',
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 6,
-    flexShrink: 0,
-    marginLeft: 0,
-  },
-  toolbarSearch: {
-    width: 260,
-    maxWidth: 360,
-    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,
-    paddingHorizontal: 10,
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 1,
-  },
-  toolbarCountText: {
-    fontSize: 9,
-    fontWeight: '900',
-  },
-  toolbarButton: {
-    minWidth: 36,
-    height: 36,
-    borderRadius: 8,
-    paddingHorizontal: 10,
-    borderWidth: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 4,
-  },
-  toolbarButtonActive: {
-  },
-  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,
-  },
-  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',
-  },
-  toolbarActionLabel: {
-    flexShrink: 1,
-    fontSize: 11,
-    fontWeight: '800',
-    letterSpacing: 0.2,
-  },
-  columnMenu: {
-    position: 'absolute',
-    right: 8,
-    top: 36,
-    width: 230,
-    maxHeight: 520,
-    borderWidth: 1,
-    borderColor: '#CBD5E1',
-    borderRadius: 10,
-    backgroundColor: '#FFFFFF',
-    paddingVertical: 6,
-    zIndex: 50,
-    ...shadow,
-  },
-  columnMenuItem: {
-    minHeight: 32,
-    paddingHorizontal: 10,
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  columnMenuText: {
-    flex: 1,
-    color: '#0F172A',
-    fontSize: 12,
-    fontWeight: '700',
-  },
-  columnMenuModalCard: {
-    width: 250,
-    maxWidth: 250,
-    maxHeight: '78%',
-  },
-  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,
-  },
-  body: {
-    flex: 1,
-    width: '100%',
-    minHeight: 0,
-    overflow: 'hidden',
-  },
-  horizontalScrollContent: {
-    flexGrow: 1,
-    minWidth: '100%',
-  },
-  content: {
-    flex: 1,
-    width: '100%',
-    minWidth: '100%',
-    minHeight: 0,
-  },
-  headerRow: {
-    minHeight: 40,
-    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',
-  },
-  row: {
-    minHeight: 48,
-    width: '100%',
-    flexDirection: 'row',
-    alignItems: 'stretch',
-    borderBottomWidth: 1,
-    borderBottomColor: '#EEF2F7',
-  },
-  cell: {
-    minWidth: 118,
-    flexBasis: 118,
-    flexGrow: 1,
-    flexShrink: 0,
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    justifyContent: 'center',
-    borderRightWidth: 0,
-  },
-  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: {
-    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',
-  },
-  cellText: {
-    fontSize: 13,
-    fontWeight: '600',
-  },
-  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',
-  },
-  actionsCell: {
-    minWidth: 60,
-    width: 60,
-    flexBasis: 60,
-    flexGrow: 0,
-    flexShrink: 0,
-    maxWidth: 72,
-    alignItems: 'center',
-  },
-  rowActionsGroup: {
-    flexDirection: 'row',
-    flexWrap: 'wrap',
-    alignItems: 'center',
-    justifyContent: 'center',
-    gap: 6,
-    width: '100%',
-  },
-  iconButton: {
-    width: 28,
-    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,
-    width: '100%',
-    minHeight: 0,
-    ...Platform.select({
-      web: {
-        overflowY: 'auto',
-      },
-      default: {},
-    }),
-  },
-  cardsGrid: {
-    paddingVertical: 10,
-    paddingHorizontal: 0,
-    gap: 8,
-    flexGrow: 1,
-    width: '100%',
-    alignSelf: 'stretch',
-  },
-  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,
-    flexBasis: 0,
-    flexGrow: 1,
-    minWidth: 0,
-    width: '100%',
-    maxWidth: '100%',
-    alignSelf: 'stretch',
-  },
-  cardItemWithActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  cardContent: {
-    flex: 1,
-    minWidth: 0,
-    width: '100%',
-  },
-  cardActions: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    gap: 6,
-    flexShrink: 0,
-  },
-  cardActionGroup: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'flex-end',
-    alignSelf: 'flex-end',
-    gap: 6,
-  },
-  defaultCard: {
-    borderWidth: 1,
-    borderColor: '#E2E8F0',
-    borderRadius: 10,
-    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,
-    paddingVertical: 5,
-    borderTopWidth: 1,
-    borderTopColor: '#E2E8F0',
-    backgroundColor: '#FFFFFF',
-    flexDirection: 'row',
-    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,
-  },
-  footerSummaryItem: {
-    flex: 1,
-    minWidth: 0,
-    flexBasis: 0,
-    flexShrink: 1,
-    paddingHorizontal: 4,
-  },
-  footerSummaryLabel: {
-    color: '#64748B',
-    fontSize: 9,
-    fontWeight: '900',
-    textTransform: 'uppercase',
-  },
-  footerSummaryValue: {
-    color: '#0F172A',
-    fontSize: 13,
-    fontWeight: '900',
-  },
-  footerCountPill: {
-    maxWidth: '100%',
-    minWidth: 0,
-    flexShrink: 1,
-    borderRadius: 999,
-    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',
-  },
-});
-
+import {StyleSheet} from 'react-native';
+import tableStyleGroup1 from './DefaultTable.styleGroup1';
+import tableStyleGroup2 from './DefaultTable.styleGroup2';
+import tableStyleGroup3 from './DefaultTable.styleGroup3';
+const styles = StyleSheet.create({...tableStyleGroup1, ...tableStyleGroup2, ...tableStyleGroup3});
 export default styles;