kelt-ui-kit-react 1.2.4 → 1.2.6

package/src/button/buttonActions/ButtonActions.tsx

@@ -1,101 +1,101 @@
-import { useCallback, useMemo, useRef, useState } from "react";
-import { Icon } from "../../icon/Icon";
-import { IconSizeEnum } from "../../icon/iconSize.enum";
-import { MenuInterface } from "../../menus/menu/menu.interface";
-import { Menus } from "../../menus/Menus";
-import { OverlayPanel, PositionOverlay } from "../../overlayPanel/OverlayPanel";
-import { Button } from "../Button";
-import { buttonActionInterface } from "../button.interface";
-
-export type ButtonActionsProps = {
-  className?: string;
-  onClick?: (e: React.MouseEvent) => void;
-  title: string;
-  actions?: buttonActionInterface[];
-  classIcon?: string;
-  positionActions?: PositionOverlay;
-  disabled?: boolean;
-};
-export const ButtonActions = ({
-  className,
-  onClick,
-  title,
-  actions,
-  positionActions = "topRight",
-  disabled = false,
-}: ButtonActionsProps) => {
-  const handleClick = (e: React.MouseEvent) => {
-    e.preventDefault();
-    if (onClick) {
-      onClick(e);
-    }
-  };
-  const refButton = useRef<HTMLDivElement>(null);
-  const [openOverlay, setOpenOverlay] = useState(false);
-  const onClickActions = useCallback(
-    (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (actions) setOpenOverlay(!openOverlay);
-    },
-    [openOverlay, setOpenOverlay]
-  );
-  const overlayMenu: MenuInterface[] = useMemo(() => {
-    if (!actions) return [];
-    return actions.map((a, index) => {
-      return {
-        id: a.id ?? index,
-        icon: a.icon,
-        name: a.label,
-        children: (
-          <Button
-            key={index}
-            classIcon={a.icon}
-            sizeIcon={IconSizeEnum.LARGE}
-            onClick={(e) => {
-              e.stopPropagation();
-              closeOverlay();
-              a.onClick && a.onClick(a);
-            }}
-            title={a.label || ""}
-          />
-        ),
-      };
-    }) as MenuInterface[];
-  }, [actions]);
-  const closeOverlay = useCallback(() => {
-    setOpenOverlay(false);
-  }, [setOpenOverlay]);
-  return (
-    <>
-      <button
-        disabled={disabled}
-        type="submit"
-        onClick={(e) => handleClick(e)}
-        className={` ${className} button-actions`}
-      >
-        <span className="mr-2 flex-1">{title}</span>
-
-        <span
-          className="ml-2"
-          ref={refButton}
-          onClick={(e) => onClickActions(e)}
-        >
-          <Icon classIcon="bi-chevron-up" />
-        </span>
-      </button>
-      {actions && openOverlay && refButton.current && (
-        <OverlayPanel
-          show={openOverlay}
-          position={positionActions}
-          closeOverlay={setOpenOverlay}
-          referenceElement={refButton.current}
-          children={
-            <div>
-              <Menus className="card-action-menu" items={overlayMenu} />
-            </div>
-          }
-        />
-      )}
-    </>
-  );
-};
+import { useCallback, useMemo, useRef, useState } from "react";
+import { Icon } from "../../icon/Icon";
+import { IconSizeEnum } from "../../icon/iconSize.enum";
+import { MenuInterface } from "../../menus/menu/menu.interface";
+import { Menus } from "../../menus/Menus";
+import { OverlayPanel, PositionOverlay } from "../../overlayPanel/OverlayPanel";
+import { Button } from "../Button";
+import { buttonActionInterface } from "../button.interface";
+
+export type ButtonActionsProps = {
+  className?: string;
+  onClick?: (e: React.MouseEvent) => void;
+  title: string;
+  actions?: buttonActionInterface[];
+  classIcon?: string;
+  positionActions?: PositionOverlay;
+  disabled?: boolean;
+};
+export const ButtonActions = ({
+  className,
+  onClick,
+  title,
+  actions,
+  positionActions = "topRight",
+  disabled = false,
+}: ButtonActionsProps) => {
+  const handleClick = (e: React.MouseEvent) => {
+    e.preventDefault();
+    if (onClick) {
+      onClick(e);
+    }
+  };
+  const refButton = useRef<HTMLDivElement>(null);
+  const [openOverlay, setOpenOverlay] = useState(false);
+  const onClickActions = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (actions) setOpenOverlay(!openOverlay);
+    },
+    [openOverlay, setOpenOverlay]
+  );
+  const overlayMenu: MenuInterface[] = useMemo(() => {
+    if (!actions) return [];
+    return actions.map((a, index) => {
+      return {
+        id: a.id ?? index,
+        icon: a.icon,
+        name: a.label,
+        children: (
+          <Button
+            key={index}
+            classIcon={a.icon}
+            sizeIcon={IconSizeEnum.LARGE}
+            onClick={(e) => {
+              e.stopPropagation();
+              closeOverlay();
+              a.onClick && a.onClick(a);
+            }}
+            title={a.label || ""}
+          />
+        ),
+      };
+    }) as MenuInterface[];
+  }, [actions]);
+  const closeOverlay = useCallback(() => {
+    setOpenOverlay(false);
+  }, [setOpenOverlay]);
+  return (
+    <>
+      <button
+        disabled={disabled}
+        type="submit"
+        onClick={(e) => handleClick(e)}
+        className={` ${className} button-actions`}
+      >
+        <span className="mr-2 flex-1">{title}</span>
+
+        <span
+          className="ml-2"
+          ref={refButton}
+          onClick={(e) => onClickActions(e)}
+        >
+          <Icon classIcon="bi-chevron-up" />
+        </span>
+      </button>
+      {actions && openOverlay && refButton.current && (
+        <OverlayPanel
+          show={openOverlay}
+          position={positionActions}
+          closeOverlay={setOpenOverlay}
+          referenceElement={refButton.current}
+          children={
+            <div>
+              <Menus className="card-action-menu" items={overlayMenu} />
+            </div>
+          }
+        />
+      )}
+    </>
+  );
+};

package/src/card/Card.tsx

@@ -1,125 +1,125 @@
-import { useCallback, 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";
-type CardProps = {
-  item: CardInterface;
-  actions?: CardActionInterface[];
-  className?: string;
-  handleClick?: (item: CardInterface) => void;
-  onClose?: (item: CardInterface) => void;
-  children?: JSX.Element;
-  customAction?: JSX.Element;
-  positionOverlay?: PositionOverlay;
-};
-
-// Composant Card modifié
-export const Card = ({
-  item,
-  actions,
-  className,
-  handleClick,
-  onClose,
-  customAction,
-  positionOverlay,
-  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,
-    ]
-  );
-
-  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>
-          <div className="card-footer">
-            {customAction && (
-              <div className="card-custom-action">{customAction}</div>
-            )}
-            <div className="d-flex flex-1 align-items-center">
-              {item.prix && <div className="card-prix">{item.prix}</div>}
-            </div>
-          </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, 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";
+type CardProps = {
+  item: CardInterface;
+  actions?: CardActionInterface[];
+  className?: string;
+  handleClick?: (item: CardInterface) => void;
+  onClose?: (item: CardInterface) => void;
+  children?: JSX.Element;
+  customAction?: JSX.Element;
+  positionOverlay?: PositionOverlay;
+};
+
+// Composant Card modifié
+export const Card = ({
+  item,
+  actions,
+  className,
+  handleClick,
+  onClose,
+  customAction,
+  positionOverlay,
+  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,
+    ]
+  );
+
+  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>
+          <div className="card-footer">
+            {customAction && (
+              <div className="card-custom-action">{customAction}</div>
+            )}
+            <div className="d-flex flex-1 align-items-center">
+              {item.prix && <div className="card-prix">{item.prix}</div>}
+            </div>
+          </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} />;
+};