kelt-ui-kit-react 2.0.6 → 2.0.9

package/src/card/Card.tsx

@@ -1,151 +1,151 @@
-import { useCallback, useMemo, useState } from "react";
-import { Icon } from "../icon/Icon";
-import { PositionOverlay } from "../overlayPanel/OverlayPanel";
-import "./card.css";
-import { CardInterface } from "./card.interface";
-import { CardActionInterface } from "./cardAction.interface";
-import { CardAction } from "./cardAction/CardAction";
-import { GridInterface, GridResponsive } from "../grid/grid.interface";
-import { Grid } from "../grid/Grid";
-type CardProps = {
-  item: CardInterface;
-  actions?: CardActionInterface[];
-  className?: string;
-  handleClick?: (item: CardInterface) => void;
-  onClose?: (item: CardInterface) => void;
-  children?: JSX.Element;
-  customAction?: JSX.Element;
-  positionOverlay?: PositionOverlay;
-  /** Largeur sur laquelle se basent les breakpoints du footer, défaut : "app" */
-  responsive?: GridResponsive;
-};
-
-// Composant Card modifié
-export const Card = ({
-  item,
-  actions,
-  className,
-  handleClick,
-  onClose,
-  customAction,
-  positionOverlay,
-  responsive = "app",
-  children,
-}: CardProps): JSX.Element => {
-  const [cliqueAction, setCliqueAction] = useState(false);
-  const [openActions, setOpenActions] = useState(false);
-  const [positions, setPositions] = useState<{ top: number; left: number }>();
-  const onClickClose = (e: React.MouseEvent, item: CardInterface) => {
-    e.stopPropagation();
-    if (onClose) {
-      onClose(item);
-    }
-  };
-  const onClickCard = useCallback(
-    (e: React.MouseEvent, item: CardInterface) => {
-      e.stopPropagation();
-      if (openActions) {
-        setPositions(undefined);
-        return setOpenActions(false);
-      }
-      if (
-        (e.target as HTMLElement).closest(".qte") ||
-        (e.target as HTMLElement).closest(".card-action-menu button") ||
-        (e.target as HTMLElement).closest(".card-actions")
-      ) {
-        return; // Ne propage pas l'événement si le clic est dans Quantity
-      }
-
-      setCliqueAction(!cliqueAction);
-
-      if (handleClick && e.button !== 2) {
-        handleClick(item);
-      } else {
-        setPositions({ top: e.clientY, left: e.clientX });
-        setOpenActions(true);
-      }
-    },
-    [
-      setCliqueAction,
-      setPositions,
-      handleClick,
-      openActions,
-      setOpenActions,
-      cliqueAction,
-    ]
-  );
-  const customeActionGrid: GridInterface[] = useMemo(() => {
-    return customAction ? [
-      {
-        xs: 12,
-        md: 6,
-        children: (
-          <div className="card-custom-action">{customAction}</div>
-        ),
-      }
-    ] : [];
-  }, [customAction]);
-
-  const footerGrid: GridInterface[] = useMemo(() => {
-    return [
-      ...customeActionGrid,
-      {
-        xs: 12,
-        md: customAction ? 6 : 12,
-        children: (
-          <div className="d-flex flex-1 align-items-center">
-            {item.prix && <div className="card-prix">{item.prix}</div>}
-          </div>
-        ),
-      },
-    ];
-  }, [customAction, item.prix]);
-  return (
-    <div
-      onContextMenu={(e) => e.preventDefault()}
-      onMouseDown={(e) => onClickCard(e, item)}
-      className={`card ${className ?? ""} ${cliqueAction ? "card--active" : ""
-        } `}
-    >
-      {children}
-      {!children && (
-        <>
-          <div className="card-text d-flex">
-            {item.image && (
-              <div className="card-img">
-                <img src={item.image} alt={"card-image"} />
-              </div>
-            )}
-            {item.title && <div className="card-title">{item.title}</div>}
-            {item.description && (
-              <div className="card-content">{item.description}</div>
-            )}
-          </div>
-          {footerGrid.length > 0 && (
-            <div className="card-footer">
-              <Grid items={footerGrid} responsive={responsive} />
-            </div>
-          )}
-          {onClose && (
-            <div
-              className="ml-2 cursor-pointer"
-              onClick={(e) => onClickClose(e, item)}
-            >
-              <Icon classIcon="bi-trash3" />
-            </div>
-          )}
-          {actions && (
-            <CardAction
-              openActions={openActions}
-              setOpenActions={setOpenActions}
-              actions={actions}
-              item={item}
-              positions={positions}
-              positionOverlay={positionOverlay}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-};
+import { useCallback, useMemo, useState } from "react";
+import { Icon } from "../icon/Icon";
+import { PositionOverlay } from "../overlayPanel/OverlayPanel";
+import "./card.css";
+import { CardInterface } from "./card.interface";
+import { CardActionInterface } from "./cardAction.interface";
+import { CardAction } from "./cardAction/CardAction";
+import { GridInterface, GridResponsive } from "../grid/grid.interface";
+import { Grid } from "../grid/Grid";
+type CardProps = {
+  item: CardInterface;
+  actions?: CardActionInterface[];
+  className?: string;
+  handleClick?: (item: CardInterface) => void;
+  onClose?: (item: CardInterface) => void;
+  children?: JSX.Element;
+  customAction?: JSX.Element;
+  positionOverlay?: PositionOverlay;
+  /** Largeur sur laquelle se basent les breakpoints du footer, défaut : "app" */
+  responsive?: GridResponsive;
+};
+
+// Composant Card modifié
+export const Card = ({
+  item,
+  actions,
+  className,
+  handleClick,
+  onClose,
+  customAction,
+  positionOverlay,
+  responsive = "app",
+  children,
+}: CardProps): JSX.Element => {
+  const [cliqueAction, setCliqueAction] = useState(false);
+  const [openActions, setOpenActions] = useState(false);
+  const [positions, setPositions] = useState<{ top: number; left: number }>();
+  const onClickClose = (e: React.MouseEvent, item: CardInterface) => {
+    e.stopPropagation();
+    if (onClose) {
+      onClose(item);
+    }
+  };
+  const onClickCard = useCallback(
+    (e: React.MouseEvent, item: CardInterface) => {
+      e.stopPropagation();
+      if (openActions) {
+        setPositions(undefined);
+        return setOpenActions(false);
+      }
+      if (
+        (e.target as HTMLElement).closest(".qte") ||
+        (e.target as HTMLElement).closest(".card-action-menu button") ||
+        (e.target as HTMLElement).closest(".card-actions")
+      ) {
+        return; // Ne propage pas l'événement si le clic est dans Quantity
+      }
+
+      setCliqueAction(!cliqueAction);
+
+      if (handleClick && e.button !== 2) {
+        handleClick(item);
+      } else {
+        setPositions({ top: e.clientY, left: e.clientX });
+        setOpenActions(true);
+      }
+    },
+    [
+      setCliqueAction,
+      setPositions,
+      handleClick,
+      openActions,
+      setOpenActions,
+      cliqueAction,
+    ]
+  );
+  const customeActionGrid: GridInterface[] = useMemo(() => {
+    return customAction ? [
+      {
+        xs: 12,
+        md: 6,
+        children: (
+          <div className="card-custom-action">{customAction}</div>
+        ),
+      }
+    ] : [];
+  }, [customAction]);
+
+  const footerGrid: GridInterface[] = useMemo(() => {
+    return [
+      ...customeActionGrid,
+      {
+        xs: 12,
+        md: customAction ? 6 : 12,
+        children: (
+          <div className="d-flex flex-1 align-items-center">
+            {item.prix && <div className="card-prix">{item.prix}</div>}
+          </div>
+        ),
+      },
+    ];
+  }, [customAction, item.prix]);
+  return (
+    <div
+      onContextMenu={(e) => e.preventDefault()}
+      onMouseDown={(e) => onClickCard(e, item)}
+      className={`card ${className ?? ""} ${cliqueAction ? "card--active" : ""
+        } `}
+    >
+      {children}
+      {!children && (
+        <>
+          <div className="card-text d-flex">
+            {item.image && (
+              <div className="card-img">
+                <img src={item.image} alt={"card-image"} />
+              </div>
+            )}
+            {item.title && <div className="card-title">{item.title}</div>}
+            {item.description && (
+              <div className="card-content">{item.description}</div>
+            )}
+          </div>
+          {footerGrid.length > 0 && (
+            <div className="card-footer">
+              <Grid items={footerGrid} responsive={responsive} />
+            </div>
+          )}
+          {onClose && (
+            <div
+              className="ml-2 cursor-pointer"
+              onClick={(e) => onClickClose(e, item)}
+            >
+              <Icon classIcon="bi-trash3" />
+            </div>
+          )}
+          {actions && (
+            <CardAction
+              openActions={openActions}
+              setOpenActions={setOpenActions}
+              actions={actions}
+              item={item}
+              positions={positions}
+              positionOverlay={positionOverlay}
+            />
+          )}
+        </>
+      )}
+    </div>
+  );
+};

package/src/card/Card.view.tsx

@@ -1,73 +1,73 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { Grid } from "../grid/Grid";
-import { GridInterface } from "../grid/grid.interface";
-import { Quantity } from "../quantity/Quantity";
-import { Card } from "./Card";
-import { CardInterface } from "./card.interface";
-import { CardActionInterface } from "./cardAction.interface";
-export const CardView = (): JSX.Element => {
-  const [actions, setActions] = useState<GridInterface[]>([]);
-  const mockItems: CardInterface[] = [
-    {
-      title: "Client",
-      image:
-        "https://www.papapiqueetmamancoud.fr/media/cache/app_product_small_thumbnail_listing_cropped/41/a2/e90184ab12b765859580b529d2ec.jpg",
-      description: "Description 1",
-      prix: "59.18 €",
-      quantity: 12,
-    },
-    {
-      title: "Produits",
-      prix: "59.18 €",
-      quantity: 1,
-    },
-    {
-      title: "Total",
-      description: "Description 3",
-      quantity: 1,
-    },
-  ];
-  const actionsCard: CardActionInterface[] = useMemo(() => {
-    return [
-      {
-        icon: "bi-trash3",
-        label: "Supprimer la transaction",
-        type: "menu",
-        onClick: (item: CardInterface) => console.log(item),
-      },
-      {
-        icon: "bi-trash3",
-        label: "Editer la transaction",
-        type: "menu",
-        onClick: (item: CardInterface) => console.log(item),
-      },
-      {
-        icon: "bi-pencil",
-        label: "Editer",
-        onClick: (item: CardInterface) => console.log(item),
-      },
-    ];
-  }, []);
-
-  const setQuantity = useCallback((item: CardInterface, qte: number) => {
-    console.log(qte, item);
-  }, []);
-  useEffect(() => {
-    const initActions: GridInterface[] = mockItems.map((item) => {
-      return {
-        children: (
-          <Card
-            className="card--horizontal"
-            item={item}
-            actions={actionsCard}
-            customAction={
-              <Quantity pas={1} item={item} setQuantity={setQuantity} />
-            }
-          />
-        ),
-      };
-    });
-    setActions(initActions);
-  }, [setActions, setQuantity]);
-  return <Grid items={actions} />;
-};
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { Grid } from "../grid/Grid";
+import { GridInterface } from "../grid/grid.interface";
+import { Quantity } from "../quantity/Quantity";
+import { Card } from "./Card";
+import { CardInterface } from "./card.interface";
+import { CardActionInterface } from "./cardAction.interface";
+export const CardView = (): JSX.Element => {
+  const [actions, setActions] = useState<GridInterface[]>([]);
+  const mockItems: CardInterface[] = [
+    {
+      title: "Client",
+      image:
+        "https://www.papapiqueetmamancoud.fr/media/cache/app_product_small_thumbnail_listing_cropped/41/a2/e90184ab12b765859580b529d2ec.jpg",
+      description: "Description 1",
+      prix: "59.18 €",
+      quantity: 12,
+    },
+    {
+      title: "Produits",
+      prix: "59.18 €",
+      quantity: 1,
+    },
+    {
+      title: "Total",
+      description: "Description 3",
+      quantity: 1,
+    },
+  ];
+  const actionsCard: CardActionInterface[] = useMemo(() => {
+    return [
+      {
+        icon: "bi-trash3",
+        label: "Supprimer la transaction",
+        type: "menu",
+        onClick: (item: CardInterface) => console.log(item),
+      },
+      {
+        icon: "bi-trash3",
+        label: "Editer la transaction",
+        type: "menu",
+        onClick: (item: CardInterface) => console.log(item),
+      },
+      {
+        icon: "bi-pencil",
+        label: "Editer",
+        onClick: (item: CardInterface) => console.log(item),
+      },
+    ];
+  }, []);
+
+  const setQuantity = useCallback((item: CardInterface, qte: number) => {
+    console.log(qte, item);
+  }, []);
+  useEffect(() => {
+    const initActions: GridInterface[] = mockItems.map((item) => {
+      return {
+        children: (
+          <Card
+            className="card--horizontal"
+            item={item}
+            actions={actionsCard}
+            customAction={
+              <Quantity pas={1} item={item} setQuantity={setQuantity} />
+            }
+          />
+        ),
+      };
+    });
+    setActions(initActions);
+  }, [setActions, setQuantity]);
+  return <Grid items={actions} />;
+};