@centreon/ui 24.4.32 → 24.4.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/package.json +1 -1
  2. package/src/Listing/index.tsx +129 -117
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@centreon/ui",
3
- "version": "24.4.32",
3
+ "version": "24.4.33",
4
4
  "description": "Centreon UI Components",
5
5
  "scripts": {
6
6
  "eslint": "eslint ./src --ext .js,.jsx,.ts,.tsx --max-warnings 0",
package/src/Listing/index.tsx CHANGED
@@ -93,9 +93,11 @@ export interface Props<TRow> {
93
93
  columnConfiguration?: ColumnConfiguration;
94
94
  columns: Array<Column>;
95
95
  currentPage?: number;
96
+ customListingComponent?: JSX.Element;
96
97
  customPaginationClassName?: string;
97
98
  disableRowCheckCondition?: (row) => boolean;
98
99
  disableRowCondition?: (row) => boolean;
100
+ displayCustomListing?: boolean;
99
101
  getHighlightRowCondition?: (row: TRow) => boolean;
100
102
  getId?: (row: TRow) => RowId;
101
103
  headerMemoProps?: Array<unknown>;
@@ -138,6 +140,8 @@ const defaultColumnConfiguration = {
138
140
  export const performanceRowsLimit = 60;
139
141
 
140
142
  const Listing = <TRow extends { id: RowId }>({
143
+ customListingComponent,
144
+ displayCustomListing,
141
145
  limit = 10,
142
146
  visualizationActions,
143
147
  columns,
@@ -495,6 +499,7 @@ const Listing = <TRow extends { id: RowId }>({
495
499
  onSelectColumns={onSelectColumns}
496
500
  />
497
501
  </div>
502
+
498
503
  <ParentSize
499
504
  parentSizeStyles={{
500
505
  height: '100%',
@@ -510,132 +515,139 @@ const Listing = <TRow extends { id: RowId }>({
510
515
  height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
511
516
  }}
512
517
  >
513
- <Table
514
- stickyHeader
515
- className={classes.table}
516
- component="div"
517
- role={undefined}
518
- size="small"
519
- >
520
- <ListingHeader
521
- areColumnsEditable={areColumnsEditable}
522
- checkable={checkable}
523
- columnConfiguration={columnConfiguration}
524
- columns={columns}
525
- listingVariant={listingVariant}
526
- memoProps={headerMemoProps}
527
- predefinedRowsSelection={predefinedRowsSelection}
528
- rowCount={limit - emptyRows}
529
- selectedRowCount={selectedRows.length}
530
- sortField={sortField}
531
- sortOrder={sortOrder}
532
- onSelectAllClick={selectAllRows}
533
- onSelectColumns={onSelectColumns}
534
- onSelectRowsWithCondition={onSelectRowsWithCondition}
535
- onSort={onSort}
536
- />
537
-
538
- <TableBody
539
- className={classes.tableBody}
518
+ {displayCustomListing ? (
519
+ customListingComponent
520
+ ) : (
521
+ <Table
522
+ stickyHeader
523
+ className={classes.table}
540
524
  component="div"
541
- onMouseLeave={clearHoveredRow}
525
+ role={undefined}
526
+ size="small"
542
527
  >
543
- {rowsToDisplay.map((row, index) => {
544
- const isRowSelected = isSelected(row);
545
- const isRowHovered = equals(hoveredRowId, getId(row));
546
- const isSubItem = allSubItemIds.includes(row.id);
547
-
548
- return (
549
- <ListingRow
550
- checkable={
551
- checkable && (!isSubItem || subItems.canCheckSubItems)
552
- }
553
- columnConfiguration={columnConfiguration}
554
- columnIds={columns.map(prop('id'))}
555
- disableRowCondition={disableRowCondition}
556
- isHovered={isRowHovered}
557
- isSelected={isRowSelected}
558
- isShiftKeyDown={isShiftKeyDown}
559
- key={
560
- gte(limit, performanceRowsLimit)
561
- ? `row_${index}`
562
- : getId(row)
563
- }
564
- lastSelectionIndex={lastSelectionIndex}
565
- limit={limit}
566
- listingVariant={listingVariant}
567
- row={row}
568
- rowColorConditions={rowColorConditions}
569
- shiftKeyDownRowPivot={shiftKeyDownRowPivot}
570
- subItemsPivots={subItemsPivots}
571
- tabIndex={-1}
572
- visibleColumns={visibleColumns}
573
- onClick={(): void => {
574
- onRowClick(row);
575
- }}
576
- onFocus={(): void => hoverRow(row)}
577
- onMouseOver={(): void => hoverRow(row)}
578
- >
579
- {checkable &&
580
- (!isSubItem || subItems.canCheckSubItems ? (
581
- <Cell
582
- align="left"
583
- className={classes.checkbox}
584
- disableRowCondition={disableRowCondition}
585
- isRowHovered={isRowHovered}
586
- row={row}
587
- rowColorConditions={rowColorConditions}
588
- onClick={(event): void => selectRow(event, row)}
589
- >
590
- <Checkbox
591
- checked={isRowSelected}
592
- disabled={
593
- disableRowCheckCondition(row) ||
594
- disableRowCondition(row)
595
- }
596
- inputProps={{
597
- 'aria-label': `Select row ${getId(row)}`
598
- }}
528
+ <ListingHeader
529
+ areColumnsEditable={areColumnsEditable}
530
+ checkable={checkable}
531
+ columnConfiguration={columnConfiguration}
532
+ columns={columns}
533
+ listingVariant={listingVariant}
534
+ memoProps={headerMemoProps}
535
+ predefinedRowsSelection={predefinedRowsSelection}
536
+ rowCount={limit - emptyRows}
537
+ selectedRowCount={selectedRows.length}
538
+ sortField={sortField}
539
+ sortOrder={sortOrder}
540
+ onSelectAllClick={selectAllRows}
541
+ onSelectColumns={onSelectColumns}
542
+ onSelectRowsWithCondition={onSelectRowsWithCondition}
543
+ onSort={onSort}
544
+ />
545
+
546
+ <TableBody
547
+ className={classes.tableBody}
548
+ component="div"
549
+ onMouseLeave={clearHoveredRow}
550
+ >
551
+ {rowsToDisplay.map((row, index) => {
552
+ const isRowSelected = isSelected(row);
553
+ const isRowHovered = equals(hoveredRowId, getId(row));
554
+ const isSubItem = allSubItemIds.includes(row.id);
555
+
556
+ return (
557
+ <ListingRow
558
+ checkable={
559
+ checkable &&
560
+ (!isSubItem || subItems.canCheckSubItems)
561
+ }
562
+ columnConfiguration={columnConfiguration}
563
+ columnIds={columns.map(prop('id'))}
564
+ disableRowCondition={disableRowCondition}
565
+ isHovered={isRowHovered}
566
+ isSelected={isRowSelected}
567
+ isShiftKeyDown={isShiftKeyDown}
568
+ key={
569
+ gte(limit, performanceRowsLimit)
570
+ ? `row_${index}`
571
+ : getId(row)
572
+ }
573
+ lastSelectionIndex={lastSelectionIndex}
574
+ limit={limit}
575
+ listingVariant={listingVariant}
576
+ row={row}
577
+ rowColorConditions={rowColorConditions}
578
+ shiftKeyDownRowPivot={shiftKeyDownRowPivot}
579
+ subItemsPivots={subItemsPivots}
580
+ tabIndex={-1}
581
+ visibleColumns={visibleColumns}
582
+ onClick={(): void => {
583
+ onRowClick(row);
584
+ }}
585
+ onFocus={(): void => hoverRow(row)}
586
+ onMouseOver={(): void => hoverRow(row)}
587
+ >
588
+ {checkable &&
589
+ (!isSubItem || subItems.canCheckSubItems ? (
590
+ <Cell
591
+ align="left"
592
+ className={classes.checkbox}
593
+ disableRowCondition={disableRowCondition}
594
+ isRowHovered={isRowHovered}
595
+ row={row}
596
+ rowColorConditions={rowColorConditions}
597
+ onClick={(event): void => selectRow(event, row)}
598
+ >
599
+ <Checkbox
600
+ checked={isRowSelected}
601
+ disabled={
602
+ disableRowCheckCondition(row) ||
603
+ disableRowCondition(row)
604
+ }
605
+ inputProps={{
606
+ 'aria-label': `Select row ${getId(row)}`
607
+ }}
608
+ />
609
+ </Cell>
610
+ ) : (
611
+ <Cell
612
+ align="left"
613
+ disableRowCondition={disableRowCondition}
614
+ isRowHovered={isRowHovered}
615
+ row={row}
616
+ rowColorConditions={rowColorConditions}
599
617
  />
600
- </Cell>
601
- ) : (
602
- <Cell
603
- align="left"
618
+ ))}
619
+
620
+ {visibleColumns.map((column) => (
621
+ <DataCell
622
+ column={column}
604
623
  disableRowCondition={disableRowCondition}
624
+ getHighlightRowCondition={
625
+ getHighlightRowCondition
626
+ }
605
627
  isRowHovered={isRowHovered}
628
+ isRowSelected={isRowSelected}
629
+ key={`${getId(row)}-${column.id}`}
630
+ labelCollapse={subItems.labelCollapse}
631
+ labelExpand={subItems.labelExpand}
632
+ listingVariant={listingVariant}
606
633
  row={row}
607
634
  rowColorConditions={rowColorConditions}
635
+ subItemsRowProperty={subItems?.rowProperty}
608
636
  />
609
637
  ))}
610
-
611
- {visibleColumns.map((column) => (
612
- <DataCell
613
- column={column}
614
- disableRowCondition={disableRowCondition}
615
- getHighlightRowCondition={getHighlightRowCondition}
616
- isRowHovered={isRowHovered}
617
- isRowSelected={isRowSelected}
618
- key={`${getId(row)}-${column.id}`}
619
- labelCollapse={subItems.labelCollapse}
620
- labelExpand={subItems.labelExpand}
621
- listingVariant={listingVariant}
622
- row={row}
623
- rowColorConditions={rowColorConditions}
624
- subItemsRowProperty={subItems?.rowProperty}
625
- />
626
- ))}
627
- </ListingRow>
628
- );
629
- })}
630
-
631
- {rows.length < 1 &&
632
- (loading ? (
633
- <SkeletonLoader rows={limit} />
634
- ) : (
635
- <EmptyResult label={t(labelNoResultFound)} />
636
- ))}
637
- </TableBody>
638
- </Table>
638
+ </ListingRow>
639
+ );
640
+ })}
641
+
642
+ {rows.length < 1 &&
643
+ (loading ? (
644
+ <SkeletonLoader rows={limit} />
645
+ ) : (
646
+ <EmptyResult label={t(labelNoResultFound)} />
647
+ ))}
648
+ </TableBody>
649
+ </Table>
650
+ )}
639
651
  </Box>
640
652
  )}
641
653
  </ParentSize>