@centreon/ui 26.10.4 → 26.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@centreon/ui",
-  "version": "26.10.4",
+  "version": "26.10.6",
   "description": "Centreon UI Components",
   "scripts": {
     "update:deps": "pnpx npm-check-updates -i --format group",

package/src/components/SortableEntriesList/Row.tsx

@@ -0,0 +1,117 @@
+import DeleteIcon from '@mui/icons-material/Delete';
+import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
+
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { ComponentPropsWithRef, ReactNode } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { IconButton } from '../Button';
+import { Tooltip } from '../Tooltip';
+import type { RenderRowParams, RowParams, SortableRowAction } from './models';
+import { labelDelete, labelDragToReorder } from './translatedLabels';
+
+type RowButtonProps = ComponentPropsWithRef<typeof IconButton> & {
+  label: string;
+};
+
+// 30px buttons at a 32px pitch. The icon size is set here because the Tooltip
+// overrides IconButton's own small-size class, and consumer icons may be any size.
+const RowButton = ({
+  className = '',
+  label,
+  ...buttonProps
+}: RowButtonProps): JSX.Element => (
+  <Tooltip label={label}>
+    <IconButton
+      {...buttonProps}
+      aria-label={label}
+      className={`[&_.MuiSvgIcon-root]:text-xl ${className}`}
+      size="small"
+      variant="ghost"
+    />
+  </Tooltip>
+);
+
+interface Props<T> {
+  actions: Array<SortableRowAction>;
+  className?: string;
+  draggable: boolean;
+  id: string;
+  onDelete: (id: string) => void;
+  onUpdate: (id: string, update: (value: T) => T) => void;
+  renderRow: (params: RenderRowParams<T>) => ReactNode;
+  rowParams: RowParams<T>;
+}
+
+export const Row = <T,>({
+  actions,
+  className = '',
+  draggable,
+  id,
+  onDelete,
+  onUpdate,
+  renderRow,
+  rowParams
+}: Props<T>): JSX.Element => {
+  const { t } = useTranslation();
+  const {
+    attributes,
+    isDragging,
+    listeners,
+    setActivatorNodeRef,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({ disabled: !draggable, id });
+
+  const setValue = (value: T): void => onUpdate(id, () => value);
+  const setField = <K extends keyof T>(field: K, fieldValue: T[K]): void =>
+    onUpdate(
+      id,
+      (value) => ({ ...(value as object), [field]: fieldValue }) as T
+    );
+
+  return (
+    <li
+      className={`relative flex w-full items-center gap-2 ${isDragging ? 'z-1 opacity-70' : ''} ${className}`}
+      data-entry-id={id}
+      ref={setNodeRef}
+      style={{ transform: CSS.Translate.toString(transform), transition }}
+    >
+      <div className="min-w-0 flex-1" data-row-fields>
+        {renderRow({ ...rowParams, setField, setValue })}
+      </div>
+      <div className="flex flex-none items-center gap-0.5">
+        {actions.map(({ icon, id: actionId, isDisabled, label, onClick }) => (
+          <RowButton
+            data-testid={actionId}
+            disabled={isDisabled}
+            icon={icon}
+            key={actionId}
+            label={t(label)}
+            onClick={onClick}
+          />
+        ))}
+        <RowButton
+          className="text-error-main"
+          data-testid="delete-row"
+          icon={<DeleteIcon />}
+          label={t(labelDelete)}
+          onClick={(): void => onDelete(id)}
+        />
+        {draggable && (
+          <RowButton
+            {...attributes}
+            {...listeners}
+            className="cursor-grab touch-none active:cursor-grabbing"
+            data-testid="drag-handle"
+            icon={<DragIndicatorIcon />}
+            label={t(labelDragToReorder)}
+            ref={setActivatorNodeRef}
+          />
+        )}
+      </div>
+    </li>
+  );
+};