@centreon/ui 24.4.29 → 24.4.30

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 +131 -117
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@centreon/ui",
3
- "version": "24.4.29",
3
+ "version": "24.4.30",
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,
@@ -494,6 +498,7 @@ const Listing = <TRow extends { id: RowId }>({
494
498
  onSelectColumns={onSelectColumns}
495
499
  />
496
500
  </div>
501
+
497
502
  <ParentSize
498
503
  parentSizeStyles={{
499
504
  height: '100%',
@@ -509,132 +514,141 @@ const Listing = <TRow extends { id: RowId }>({
509
514
  height: innerScrollDisabled ? '100%' : `calc(${height}px - 4px)`
510
515
  }}
511
516
  >
512
- <Table
513
- stickyHeader
514
- className={classes.table}
515
- component="div"
516
- role={undefined}
517
- size="small"
518
- >
519
- <ListingHeader
520
- areColumnsEditable={areColumnsEditable}
521
- checkable={checkable}
522
- columnConfiguration={columnConfiguration}
523
- columns={columns}
524
- listingVariant={listingVariant}
525
- memoProps={headerMemoProps}
526
- predefinedRowsSelection={predefinedRowsSelection}
527
- rowCount={limit - emptyRows}
528
- selectedRowCount={selectedRows.length}
529
- sortField={sortField}
530
- sortOrder={sortOrder}
531
- onSelectAllClick={selectAllRows}
532
- onSelectColumns={onSelectColumns}
533
- onSelectRowsWithCondition={onSelectRowsWithCondition}
534
- onSort={onSort}
535
- />
536
-
537
- <TableBody
538
- className={classes.tableBody}
517
+ {displayCustomListing ? (
518
+ customListingComponent
519
+ ) : (
520
+ <Table
521
+ stickyHeader
522
+ className={classes.table}
539
523
  component="div"
540
- onMouseLeave={clearHoveredRow}
524
+ role={undefined}
525
+ size="small"
541
526
  >
542
- {rowsToDisplay.map((row, index) => {
543
- const isRowSelected = isSelected(row);
544
- const isRowHovered = equals(hoveredRowId, getId(row));
545
- const isSubItem = allSubItemIds.includes(row.id);
546
-
547
- return (
548
- <ListingRow
549
- checkable={
550
- checkable && (!isSubItem || subItems.canCheckSubItems)
551
- }
552
- columnConfiguration={columnConfiguration}
553
- columnIds={columns.map(prop('id'))}
554
- disableRowCondition={disableRowCondition}
555
- isHovered={isRowHovered}
556
- isSelected={isRowSelected}
557
- isShiftKeyDown={isShiftKeyDown}
558
- key={
559
- gte(limit, performanceRowsLimit)
560
- ? `row_${index}`
561
- : getId(row)
562
- }
563
- lastSelectionIndex={lastSelectionIndex}
564
- limit={limit}
565
- listingVariant={listingVariant}
566
- row={row}
567
- rowColorConditions={rowColorConditions}
568
- shiftKeyDownRowPivot={shiftKeyDownRowPivot}
569
- subItemsPivots={subItemsPivots}
570
- tabIndex={-1}
571
- visibleColumns={visibleColumns}
572
- onClick={(): void => {
573
- onRowClick(row);
574
- }}
575
- onFocus={(): void => hoverRow(row)}
576
- onMouseOver={(): void => hoverRow(row)}
577
- >
578
- {checkable &&
579
- (!isSubItem || subItems.canCheckSubItems ? (
580
- <Cell
581
- align="left"
582
- className={classes.checkbox}
583
- disableRowCondition={disableRowCondition}
584
- isRowHovered={isRowHovered}
585
- row={row}
586
- rowColorConditions={rowColorConditions}
587
- onClick={(event): void => selectRow(event, row)}
588
- >
589
- <Checkbox
590
- checked={isRowSelected}
591
- disabled={
592
- disableRowCheckCondition(row) ||
593
- disableRowCondition(row)
594
- }
595
- inputProps={{
596
- 'aria-label': `Select row ${getId(row)}`
597
- }}
527
+ <ListingHeader
528
+ areColumnsEditable={areColumnsEditable}
529
+ checkable={checkable}
530
+ columnConfiguration={columnConfiguration}
531
+ columns={columns}
532
+ listingVariant={listingVariant}
533
+ memoProps={headerMemoProps}
534
+ predefinedRowsSelection={predefinedRowsSelection}
535
+ rowCount={limit - emptyRows}
536
+ selectedRowCount={selectedRows.length}
537
+ sortField={sortField}
538
+ sortOrder={sortOrder}
539
+ onSelectAllClick={selectAllRows}
540
+ onSelectColumns={onSelectColumns}
541
+ onSelectRowsWithCondition={onSelectRowsWithCondition}
542
+ onSort={onSort}
543
+ />
544
+
545
+ <TableBody
546
+ className={classes.tableBody}
547
+ component="div"
548
+ onMouseLeave={clearHoveredRow}
549
+ >
550
+ {rowsToDisplay.map((row, index) => {
551
+ const isRowSelected = isSelected(row);
552
+ const isRowHovered = equals(hoveredRowId, getId(row));
553
+ const isSubItem = allSubItemIds.includes(row.id);
554
+
555
+ return (
556
+ <ListingRow
557
+ checkable={
558
+ checkable &&
559
+ (!isSubItem || subItems.canCheckSubItems)
560
+ }
561
+ columnConfiguration={columnConfiguration}
562
+ columnIds={columns.map(prop('id'))}
563
+ disableRowCondition={disableRowCondition}
564
+ isHovered={isRowHovered}
565
+ isSelected={isRowSelected}
566
+ isShiftKeyDown={isShiftKeyDown}
567
+ key={
568
+ gte(limit, performanceRowsLimit)
569
+ ? `row_${index}`
570
+ : getId(row)
571
+ }
572
+ lastSelectionIndex={lastSelectionIndex}
573
+ limit={limit}
574
+ listingVariant={listingVariant}
575
+ row={row}
576
+ rowColorConditions={rowColorConditions}
577
+ shiftKeyDownRowPivot={shiftKeyDownRowPivot}
578
+ subItemsPivots={subItemsPivots}
579
+ tabIndex={-1}
580
+ visibleColumns={visibleColumns}
581
+ onClick={(): void => {
582
+ onRowClick(row);
583
+ }}
584
+ onFocus={(): void => hoverRow(row)}
585
+ onMouseOver={(): void => hoverRow(row)}
586
+ >
587
+ {checkable &&
588
+ (!isSubItem || subItems.canCheckSubItems ? (
589
+ <Cell
590
+ align="left"
591
+ className={classes.checkbox}
592
+ disableRowCondition={disableRowCondition}
593
+ isRowHovered={isRowHovered}
594
+ row={row}
595
+ rowColorConditions={rowColorConditions}
596
+ onClick={(event): void => selectRow(event, row)}
597
+ >
598
+ <Checkbox
599
+ checked={isRowSelected}
600
+ disabled={
601
+ disableRowCheckCondition(row) ||
602
+ disableRowCondition(row)
603
+ }
604
+ inputProps={{
605
+ 'aria-label': `Select row ${getId(row)}`
606
+ }}
607
+ />
608
+ </Cell>
609
+ ) : (
610
+ <Cell
611
+ align="left"
612
+ disableRowCondition={disableRowCondition}
613
+ isRowHovered={isRowHovered}
614
+ row={row}
615
+ rowColorConditions={rowColorConditions}
598
616
  />
599
- </Cell>
600
- ) : (
601
- <Cell
602
- align="left"
617
+ ))}
618
+
619
+ {visibleColumns.map((column) => (
620
+ <DataCell
621
+ column={column}
603
622
  disableRowCondition={disableRowCondition}
623
+ getHighlightRowCondition={
624
+ getHighlightRowCondition
625
+ }
604
626
  isRowHovered={isRowHovered}
627
+ isRowSelected={isRowSelected}
628
+ key={`${getId(row)}-${column.id}`}
629
+ labelCollapse={subItems.labelCollapse}
630
+ labelExpand={subItems.labelExpand}
631
+ listingVariant={listingVariant}
605
632
  row={row}
606
633
  rowColorConditions={rowColorConditions}
634
+ subItemsRowProperty={subItems?.getRowProperty(
635
+ row
636
+ )}
607
637
  />
608
638
  ))}
609
-
610
- {visibleColumns.map((column) => (
611
- <DataCell
612
- column={column}
613
- disableRowCondition={disableRowCondition}
614
- getHighlightRowCondition={getHighlightRowCondition}
615
- isRowHovered={isRowHovered}
616
- isRowSelected={isRowSelected}
617
- key={`${getId(row)}-${column.id}`}
618
- labelCollapse={subItems.labelCollapse}
619
- labelExpand={subItems.labelExpand}
620
- listingVariant={listingVariant}
621
- row={row}
622
- rowColorConditions={rowColorConditions}
623
- subItemsRowProperty={subItems?.getRowProperty(row)}
624
- />
625
- ))}
626
- </ListingRow>
627
- );
628
- })}
629
-
630
- {rows.length < 1 &&
631
- (loading ? (
632
- <SkeletonLoader rows={limit} />
633
- ) : (
634
- <EmptyResult label={t(labelNoResultFound)} />
635
- ))}
636
- </TableBody>
637
- </Table>
639
+ </ListingRow>
640
+ );
641
+ })}
642
+
643
+ {rows.length < 1 &&
644
+ (loading ? (
645
+ <SkeletonLoader rows={limit} />
646
+ ) : (
647
+ <EmptyResult label={t(labelNoResultFound)} />
648
+ ))}
649
+ </TableBody>
650
+ </Table>
651
+ )}
638
652
  </Box>
639
653
  )}
640
654
  </ParentSize>