@centreon/ui 23.10.38 → 23.10.40

package/src/components/List/Item/Text.tsx

@@ -0,0 +1,25 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { ListItemText as MuiListItemText } from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+type TextProps = {
+  primaryText: ReactNode;
+  secondaryText?: ReactNode;
+};
+
+export const Text = ({
+  primaryText,
+  secondaryText
+}: TextProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiListItemText
+      className={classes.text}
+      primary={primaryText}
+      secondary={secondaryText}
+    />
+  );
+};

package/src/components/List/Item/TextSkeleton.tsx

@@ -0,0 +1,22 @@
+import { ReactElement } from 'react';
+
+import { Skeleton as MuiSkeleton } from '@mui/material';
+
+import { useStyles } from './ListItem.styles';
+
+type TextSkeletonProps = {
+  secondaryText?: boolean;
+};
+
+export const TextSkeleton = ({
+  secondaryText
+}: TextSkeletonProps): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <span className={classes.textSkeleton}>
+      <MuiSkeleton animation="wave" variant="text" />
+      {!!secondaryText && <MuiSkeleton animation="wave" variant="text" />}
+    </span>
+  );
+};

package/src/components/List/Item/index.ts

@@ -0,0 +1,14 @@
+import { ListItem as ListItemRoot } from './ListItem';
+import { Text as TextRoot } from './Text';
+import { TextSkeleton } from './TextSkeleton';
+import { Avatar as AvatarRoot } from './Avatar';
+import { AvatarSkeleton } from './AvatarSkeleton';
+
+export const ListItem = Object.assign(ListItemRoot, {
+  Avatar: Object.assign(AvatarRoot, {
+    Skeleton: AvatarSkeleton
+  }),
+  Text: Object.assign(TextRoot, {
+    Skeleton: TextSkeleton
+  })
+});

package/src/components/List/List.stories.tsx

@@ -0,0 +1,70 @@
+/* eslint-disable react/no-array-index-key */
+import { Meta, StoryObj } from '@storybook/react';
+
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Box } from '@mui/material';
+
+import { List } from '.';
+
+const meta: Meta<typeof List> = {
+  component: List
+};
+
+export default meta;
+type Story = StoryObj<typeof List>;
+
+const sampleData = Array(50).fill({
+  icon: <DeleteIcon />,
+  primary: 'Primary text',
+  secondary: 'Secondary text'
+});
+
+export const Default: Story = {
+  render: () => (
+    <List>
+      {sampleData.map(({ primary }, index) => (
+        <List.Item key={`${primary}_${index}`}>
+          <List.Item.Text primaryText={primary} />
+        </List.Item>
+      ))}
+    </List>
+  )
+};
+
+export const withAction: Story = {
+  render: () => (
+    <List>
+      {sampleData.map(({ icon, primary }, index) => (
+        <List.Item action={icon} key={`${primary}_${index}`}>
+          <List.Item.Text primaryText={primary} />
+        </List.Item>
+      ))}
+    </List>
+  )
+};
+
+export const withSecondaryText: Story = {
+  render: () => (
+    <List>
+      {sampleData.map(({ primary, secondary }, index) => (
+        <List.Item key={`${primary}_${index}`}>
+          <List.Item.Text primaryText={primary} secondaryText={secondary} />
+        </List.Item>
+      ))}
+    </List>
+  )
+};
+
+export const withSmallContainer: Story = {
+  render: () => (
+    <Box sx={{ height: 400, width: 200 }}>
+      <List>
+        {sampleData.map(({ icon, primary, secondary }, index) => (
+          <List.Item action={icon} key={`${primary}_${index}`}>
+            <List.Item.Text primaryText={primary} secondaryText={secondary} />
+          </List.Item>
+        ))}
+      </List>
+    </Box>
+  )
+};

package/src/components/List/List.styles.ts

@@ -0,0 +1,8 @@
+import { makeStyles } from 'tss-react/mui';
+
+export const useStyles = makeStyles()({
+  list: {
+    height: '100%',
+    overflowY: 'auto'
+  }
+});

package/src/components/List/List.tsx

@@ -0,0 +1,19 @@
+import { ReactElement, ReactNode } from 'react';
+
+import { List as MuiList } from '@mui/material';
+
+import { useStyles } from './List.styles';
+
+type Props = {
+  children: ReactNode;
+};
+
+export const List = ({ children }: Props): ReactElement => {
+  const { classes } = useStyles();
+
+  return (
+    <MuiList dense className={classes.list}>
+      {children}
+    </MuiList>
+  );
+};

package/src/components/List/index.ts

@@ -0,0 +1,6 @@
+import { List as ListRoot } from './List';
+import { ListItem } from './Item';
+
+export const List = Object.assign(ListRoot, {
+  Item: ListItem
+});

package/src/components/Modal/ModalActions.tsx

@@ -6,6 +6,7 @@ import { useStyles } from './Modal.styles';
 
 export type ModalActionsProps = {
   children?: React.ReactNode;
+  disabled?: boolean;
   isDanger?: boolean;
   labels?: ModalActionsLabels;
   onCancel?: () => void;
@@ -22,7 +23,8 @@ const ModalActions = ({
   labels,
   onCancel,
   onConfirm,
-  isDanger = false
+  isDanger = false,
+  disabled
 }: ModalActionsProps): ReactElement => {
   const { classes } = useStyles();
 
@@ -42,6 +44,7 @@ const ModalActions = ({
           <Button
             aria-label={labels?.confirm}
             data-testid="confirm"
+            disabled={disabled}
             isDanger={isDanger}
             size="small"
             type="submit"

package/src/components/index.ts

@@ -6,3 +6,4 @@ export * from './DataTable';
 export * from './Layout';
 export * from './Tooltip';
 export * from './Menu';
+export * from './List';

package/src/utils/index.ts

@@ -16,3 +16,4 @@ export * from './useViewportIntersection';
 export * from './panelSize';
 export * from './sanitizedHTML';
 export * from './docsURL';
+export * from './useInfiniteScrollListing';

package/src/utils/useInfiniteScrollListing.ts

@@ -0,0 +1,106 @@
+import { useEffect, useMemo, useRef, useState } from 'react';
+
+import { equals, gte, isNil, reduce } from 'ramda';
+import { PrimitiveAtom, useAtom } from 'jotai';
+import { JsonDecoder } from 'ts.data.json';
+
+import {
+  buildListingEndpoint,
+  useFetchQuery,
+  useIntersectionObserver
+} from '@centreon/ui';
+
+import type { Listing } from '../api/models';
+
+const limit = 100;
+
+interface UseInfiniteScrollListing<T> {
+  elementRef: (node) => void;
+  elements: Array<T>;
+  isLoading: boolean;
+}
+
+interface UseInfiniteScrollListingProps<T> {
+  decoder: JsonDecoder.Decoder<Listing<T>>;
+  endpoint: string;
+  pageAtom: PrimitiveAtom<number>;
+  queryKeyName: string;
+}
+
+export const useInfiniteScrollListing = <T>({
+  queryKeyName,
+  endpoint,
+  decoder,
+  pageAtom
+}: UseInfiniteScrollListingProps<T>): UseInfiniteScrollListing<T> => {
+  const [maxPage, setMaxPage] = useState(1);
+
+  const elements = useRef<Array<T> | undefined>(undefined);
+
+  const [page, setPage] = useAtom(pageAtom);
+
+  const { data, isLoading, prefetchNextPage, fetchStatus } = useFetchQuery<
+    Listing<T>
+  >({
+    decoder,
+    getEndpoint: (params) =>
+      buildListingEndpoint({
+        baseEndpoint: endpoint,
+        parameters: { limit, page: params?.page || page }
+      }),
+    getQueryKey: () => [queryKeyName, page],
+    isPaginated: true,
+    queryOptions: {
+      refetchOnMount: false,
+      refetchOnWindowFocus: false,
+      suspense: equals(page, 1)
+    }
+  });
+
+  const elementRef = useIntersectionObserver({
+    action: () => {
+      setPage((currentPage) => currentPage + 1);
+    },
+    loading: !equals(fetchStatus, 'idle'),
+    maxPage,
+    page
+  });
+
+  elements.current = useMemo(() => {
+    if (isNil(data) || !equals(fetchStatus, 'idle')) {
+      return elements.current;
+    }
+
+    return reduce<T, Array<T>>(
+      (acc, element) => [...acc, element],
+      equals(page, 1) ? [] : elements.current || [],
+      data.result
+    );
+  }, [page, data, fetchStatus]);
+
+  useEffect(() => {
+    if (isNil(data)) {
+      return;
+    }
+
+    const total = data.meta.total || 1;
+    const newMaxPage = Math.ceil(total / limit);
+
+    setMaxPage(newMaxPage);
+
+    if (gte(page, newMaxPage)) {
+      return;
+    }
+
+    prefetchNextPage({
+      getPrefetchQueryKey: (newPage) => [`dashboards`, newPage],
+      page
+    });
+  }, [data]);
+
+  return {
+    elementRef,
+    elements: elements.current || [],
+    isLoading
+  };
+};