@centreon/ui 23.10.62 → 23.10.64

package/src/Listing/index.tsx

@@ -102,6 +102,7 @@ export interface Props<TRow> {
   headerMemoProps?: Array<unknown>;
   innerScrollDisabled?: boolean;
   limit?: number;
+  listingVariant?: ListingVariant;
   loading?: boolean;
   moveTablePagination?: boolean;
   onLimitChange?: (limit) => void;
@@ -126,8 +127,8 @@ export interface Props<TRow> {
     rowProperty: string;
   };
   totalRows?: number;
-  viewMode?: ListingVariant;
   viewerModeConfiguration?: ViewerModeConfiguration;
+  visualizationActions?: JSX.Element;
   widthToMoveTablePagination?: number;
 }
 
@@ -139,6 +140,7 @@ export const performanceRowsLimit = 60;
 
 const Listing = <TRow extends { id: RowId }>({
   limit = 10,
+  visualizationActions,
   columns,
   columnConfiguration = defaultColumnConfiguration,
   customPaginationClassName,
@@ -168,7 +170,7 @@ const Listing = <TRow extends { id: RowId }>({
   predefinedRowsSelection = [],
   actionsBarMemoProps = [],
   moveTablePagination,
-  viewMode = ListingVariant.compact,
+  listingVariant = ListingVariant.compact,
   widthToMoveTablePagination,
   getHighlightRowCondition,
   viewerModeConfiguration,
@@ -187,7 +189,7 @@ const Listing = <TRow extends { id: RowId }>({
   const { dataStyle, getGridTemplateColumn } = useStyleTable({
     checkable,
     currentVisibleColumns,
-    viewMode
+    listingVariant
   });
 
   const { t } = useTranslation();
@@ -230,8 +232,8 @@ const Listing = <TRow extends { id: RowId }>({
     dataStyle,
     getGridTemplateColumn,
     limit,
-    rows: rowsToDisplay,
-    viewMode
+    listingVariant,
+    rows: rowsToDisplay
   });
 
   useResizeObserver({
@@ -501,11 +503,12 @@ const Listing = <TRow extends { id: RowId }>({
             currentPage={currentPage}
             customPaginationClassName={customPaginationClassName}
             limit={limit}
+            listingVariant={listingVariant}
             moveTablePagination={moveTablePagination}
             paginated={paginated}
             totalRows={totalRows}
-            viewMode={viewMode}
             viewerModeConfiguration={viewerModeConfiguration}
+            visualizationActions={visualizationActions}
             widthToMoveTablePagination={widthToMoveTablePagination}
             onLimitChange={changeLimit}
             onPaginate={onPaginate}
@@ -532,13 +535,13 @@ const Listing = <TRow extends { id: RowId }>({
               checkable={checkable}
               columnConfiguration={columnConfiguration}
               columns={columns}
+              listingVariant={listingVariant}
               memoProps={headerMemoProps}
               predefinedRowsSelection={predefinedRowsSelection}
               rowCount={limit - emptyRows}
               selectedRowCount={selectedRows.length}
               sortField={sortField}
               sortOrder={sortOrder}
-              viewMode={viewMode}
               onSelectAllClick={selectAllRows}
               onSelectColumns={onSelectColumns}
               onSelectRowsWithCondition={onSelectRowsWithCondition}
@@ -573,12 +576,12 @@ const Listing = <TRow extends { id: RowId }>({
                     }
                     lastSelectionIndex={lastSelectionIndex}
                     limit={limit}
+                    listingVariant={listingVariant}
                     row={row}
                     rowColorConditions={rowColorConditions}
                     shiftKeyDownRowPivot={shiftKeyDownRowPivot}
                     subItemsPivots={subItemsPivots}
                     tabIndex={-1}
-                    viewMode={viewMode}
                     visibleColumns={visibleColumns}
                     onClick={(): void => {
                       onRowClick(row);
@@ -628,10 +631,10 @@ const Listing = <TRow extends { id: RowId }>({
                         key={`${getId(row)}-${column.id}`}
                         labelCollapse={subItems.labelCollapse}
                         labelExpand={subItems.labelExpand}
+                        listingVariant={listingVariant}
                         row={row}
                         rowColorConditions={rowColorConditions}
                         subItemsRowProperty={subItems?.rowProperty}
-                        viewMode={viewMode}
                       />
                     ))}
                   </ListingRow>
@@ -674,7 +677,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
   columnConfiguration,
   moveTablePagination,
   widthToMoveTablePagination,
-  viewMode,
+  listingVariant,
   ...props
 }: MemoizedListingProps<TRow>): JSX.Element =>
   useMemoComponent({
@@ -686,6 +689,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         currentPage={currentPage}
         innerScrollDisabled={innerScrollDisabled}
         limit={limit}
+        listingVariant={listingVariant}
         loading={loading}
         moveTablePagination={moveTablePagination}
         paginated={paginated}
@@ -695,7 +699,6 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
         sortField={sortField}
         sortOrder={sortOrder}
         totalRows={totalRows}
-        viewMode={viewMode}
         widthToMoveTablePagination={widthToMoveTablePagination}
         {...props}
       />
@@ -719,7 +722,7 @@ export const MemoizedListing = <TRow extends { id: string | number }>({
       sortOrder,
       sortField,
       innerScrollDisabled,
-      viewMode
+      listingVariant
     ]
   });
 

package/src/Listing/tableAtoms.ts

@@ -32,16 +32,19 @@ export const tableStyleAtom = atom<TableStyleAtom>({
   }
 });
 
-export const tableStyleDerivedAtom = atom(null, (get, set, { viewMode }) => {
-  const tableStyle = get(tableStyleAtom);
-
-  const isExtendedMode = equals(viewMode, ListingVariant.extended);
-
-  set(tableStyleAtom, {
-    ...tableStyle,
-    body: isExtendedMode ? extendedTableBody : compactTableBody,
-    header: isExtendedMode ? extendedTableHeader : compactTableHeader
-  });
-});
+export const tableStyleDerivedAtom = atom(
+  null,
+  (get, set, { listingVariant }) => {
+    const tableStyle = get(tableStyleAtom);
+
+    const isExtendedMode = equals(listingVariant, ListingVariant.extended);
+
+    set(tableStyleAtom, {
+      ...tableStyle,
+      body: isExtendedMode ? extendedTableBody : compactTableBody,
+      header: isExtendedMode ? extendedTableHeader : compactTableHeader
+    });
+  }
+);
 
 export const subItemsPivotsAtom = atom<Array<number | string>>([]);

package/src/Listing/useStyleTable.ts

@@ -14,7 +14,7 @@ import { tableStyleAtom, tableStyleDerivedAtom } from './tableAtoms';
 interface TableStyle {
   checkable?: boolean;
   currentVisibleColumns?: Array<Column>;
-  viewMode?: ListingVariant;
+  listingVariant?: ListingVariant;
 }
 
 interface TableStyleState {
@@ -27,23 +27,23 @@ const isCompactMode = equals<ListingVariant | undefined>(
 );
 
 interface GetTextStyleProps {
+  listingVariant?: ListingVariant;
   theme: Theme;
-  viewMode?: ListingVariant;
 }
 
 export const getTextStyleByViewMode = ({
-  viewMode,
+  listingVariant,
   theme
 }: GetTextStyleProps): CSSObject =>
   pick(
     ['color', 'fontSize', 'lineHeight'],
-    theme.typography[isCompactMode(viewMode) ? 'body2' : 'body1']
+    theme.typography[isCompactMode(listingVariant) ? 'body2' : 'body1']
   );
 
 const useStyleTable = ({
   checkable,
   currentVisibleColumns,
-  viewMode
+  listingVariant
 }: TableStyle): TableStyleState => {
   const dataStyle = useAtomValue(tableStyleAtom);
 
@@ -69,10 +69,10 @@ const useStyleTable = ({
   };
 
   useEffect(() => {
-    if (viewMode) {
-      updateStyleTable({ viewMode });
+    if (listingVariant) {
+      updateStyleTable({ listingVariant });
     }
-  }, [viewMode]);
+  }, [listingVariant]);
 
   return {
     dataStyle,

package/src/SortableItems/SortableItem.tsx

@@ -56,7 +56,8 @@ const SortableItem = ({
       transform,
       props(itemProps, rest),
       ...memoProps,
-      ...additionalProps
+      ...additionalProps,
+      ...Object.values(rest)
     ]
   });
 };