kelt-ui-kit-react 2.0.8 → 2.0.9

package/src/overlayPanel/overlayPanel.css

@@ -1,44 +1,44 @@
-.overlayPanel {
-  position: relative;
-
-  &.overlayPanel--no-portal {
-    position: absolute;
-    z-index: 14 !important;
-    width: 100%;
-  }
-
-  &.hide {
-    visibility: hidden;
-  }
-
-  &.visible {
-    visibility: visible !important;
-  }
-
-  button {
-    span {
-      text-align: left;
-    }
-  }
-
-  .toggle-btn {
-    display: flex;
-    justify-content: flex-end;
-    background-color: transparent;
-    border: none;
-    color: #333;
-    cursor: pointer;
-    font-size: 18px;
-    margin: 0;
-    min-width: 10px;
-    right: 0;
-    padding: 0;
-    position: absolute;
-    padding: 0px;
-    z-index: 2;
-
-    i {
-      font-size: 1rem;
-    }
-  }
+.overlayPanel {
+  position: relative;
+
+  &.overlayPanel--no-portal {
+    position: absolute;
+    z-index: 14 !important;
+    width: 100%;
+  }
+
+  &.hide {
+    visibility: hidden;
+  }
+
+  &.visible {
+    visibility: visible !important;
+  }
+
+  button {
+    span {
+      text-align: left;
+    }
+  }
+
+  .toggle-btn {
+    display: flex;
+    justify-content: flex-end;
+    background-color: transparent;
+    border: none;
+    color: #333;
+    cursor: pointer;
+    font-size: 18px;
+    margin: 0;
+    min-width: 10px;
+    right: 0;
+    padding: 0;
+    position: absolute;
+    padding: 0px;
+    z-index: 2;
+
+    i {
+      font-size: 1rem;
+    }
+  }
 }

package/src/overlayPanel/overlayPanelStyled/OverlayPanelStyled.tsx

@@ -1,23 +1,23 @@
-import styled from "styled-components";
-
-interface OverlayPanelStyledProps {
-  $top?: number;
-  $left?: number;
-  $minWidth?: number;
-  $visible?: boolean;
-}
-
-export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
-  position: absolute;
-  z-index: 1050;
-  top: ${({ $top }) => $top}px;
-  left: ${({ $left }) => $left}px;
-  ${({ $minWidth }) => ($minWidth ? `min-width: ${$minWidth}px;` : "")}
-  box-sizing: border-box;
-  visibility: ${({ $visible }) => ($visible ? "visible" : "hidden")};
-  background-color: white;
-  padding: 10px;
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-  border-radius: 2px;
-  border: 1px solid #ede;
-`;
+import styled from "styled-components";
+
+interface OverlayPanelStyledProps {
+  $top?: number;
+  $left?: number;
+  $minWidth?: number;
+  $visible?: boolean;
+}
+
+export const OverlayPanelStyled = styled.div<OverlayPanelStyledProps>`
+  position: absolute;
+  z-index: 1050;
+  top: ${({ $top }) => $top}px;
+  left: ${({ $left }) => $left}px;
+  ${({ $minWidth }) => ($minWidth ? `min-width: ${$minWidth}px;` : "")}
+  box-sizing: border-box;
+  visibility: ${({ $visible }) => ($visible ? "visible" : "hidden")};
+  background-color: white;
+  padding: 10px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+  border-radius: 2px;
+  border: 1px solid #ede;
+`;

package/src/pdfViewer/PdfViewer.tsx

@@ -1,73 +1,73 @@
-import { forwardRef, useCallback, useEffect, useState } from "react";
-export type PdfViewerProps = {
-  arrayBuffer: ArrayBuffer;
-  displayToolBar?: boolean;
-  height?: string;
-  width?: string;
-  className?: string;
-  title?: string;
-  id?: string;
-  ref?: React.Ref<HTMLIFrameElement>;
-};
-export const PdfViewer = forwardRef<HTMLIFrameElement, PdfViewerProps>(
-  (
-    {
-      arrayBuffer,
-      displayToolBar = false,
-      height = "600px",
-      width = "100%",
-      className,
-      title,
-      id,
-    }: PdfViewerProps,
-    ref
-  ) => {
-    const [pdfUrl, setPdfUrl] = useState<string | null>(null);
-
-    const handleLoadPDF = useCallback(async () => {
-      // Créer un Blob depuis le buffer
-      const blob = new Blob([arrayBuffer], { type: "application/pdf" });
-      const url = URL.createObjectURL(blob);
-      if (!displayToolBar) {
-        // Ajouter des paramètres pour afficher la barre d'outils
-        const pdfUrlWithoutToolbar = `${url}#toolbar=0&navpanes=0&scrollbar=0`;
-        setPdfUrl(pdfUrlWithoutToolbar);
-        return;
-      }
-
-      setPdfUrl(url);
-    }, [arrayBuffer, displayToolBar, setPdfUrl]);
-
-    useEffect(() => {
-      handleLoadPDF();
-    }, [arrayBuffer, handleLoadPDF]);
-    // Nettoyer l'URL quand le composant se démonte
-    useEffect(() => {
-      return () => {
-        if (pdfUrl) {
-          URL.revokeObjectURL(pdfUrl);
-        }
-      };
-    }, [pdfUrl]);
-
-    return (
-      <>
-        {pdfUrl && (
-          <iframe
-            ref={ref}
-            className={className}
-            src={pdfUrl}
-            width={width}
-            height={height}
-            title={title}
-            id={id}
-            style={{
-              border: "none",
-              pointerEvents: "auto", // Permet le scroll
-            }}
-          />
-        )}
-      </>
-    );
-  }
-);
+import { forwardRef, useCallback, useEffect, useState } from "react";
+export type PdfViewerProps = {
+  arrayBuffer: ArrayBuffer;
+  displayToolBar?: boolean;
+  height?: string;
+  width?: string;
+  className?: string;
+  title?: string;
+  id?: string;
+  ref?: React.Ref<HTMLIFrameElement>;
+};
+export const PdfViewer = forwardRef<HTMLIFrameElement, PdfViewerProps>(
+  (
+    {
+      arrayBuffer,
+      displayToolBar = false,
+      height = "600px",
+      width = "100%",
+      className,
+      title,
+      id,
+    }: PdfViewerProps,
+    ref
+  ) => {
+    const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+
+    const handleLoadPDF = useCallback(async () => {
+      // Créer un Blob depuis le buffer
+      const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+      const url = URL.createObjectURL(blob);
+      if (!displayToolBar) {
+        // Ajouter des paramètres pour afficher la barre d'outils
+        const pdfUrlWithoutToolbar = `${url}#toolbar=0&navpanes=0&scrollbar=0`;
+        setPdfUrl(pdfUrlWithoutToolbar);
+        return;
+      }
+
+      setPdfUrl(url);
+    }, [arrayBuffer, displayToolBar, setPdfUrl]);
+
+    useEffect(() => {
+      handleLoadPDF();
+    }, [arrayBuffer, handleLoadPDF]);
+    // Nettoyer l'URL quand le composant se démonte
+    useEffect(() => {
+      return () => {
+        if (pdfUrl) {
+          URL.revokeObjectURL(pdfUrl);
+        }
+      };
+    }, [pdfUrl]);
+
+    return (
+      <>
+        {pdfUrl && (
+          <iframe
+            ref={ref}
+            className={className}
+            src={pdfUrl}
+            width={width}
+            height={height}
+            title={title}
+            id={id}
+            style={{
+              border: "none",
+              pointerEvents: "auto", // Permet le scroll
+            }}
+          />
+        )}
+      </>
+    );
+  }
+);

package/src/pdfViewer/PdfViewer.view.tsx

@@ -1,5 +1,5 @@
-import { PdfViewer } from "./PdfViewer";
-
-export const PdfViewerView = (): JSX.Element => {
-  return <PdfViewer arrayBuffer={new ArrayBuffer(0)} />;
-};
+import { PdfViewer } from "./PdfViewer";
+
+export const PdfViewerView = (): JSX.Element => {
+  return <PdfViewer arrayBuffer={new ArrayBuffer(0)} />;
+};

package/src/quantity/Quantity.tsx

@@ -1,103 +1,103 @@
-import { useCallback, useEffect, useState } from "react";
-import { CardInterface } from "../card/card.interface";
-import { Icon } from "../icon/Icon";
-import { IconSizeEnum } from "../icon/iconSize.enum";
-import "./quantity.css";
-export interface QuantityProps {
-  setQuantity?: (item: CardInterface, qte: number) => void;
-  item: CardInterface;
-  onClickQuantity?: (item: CardInterface) => void;
-  pas: number;
-  disabled?: boolean;
-  disabledPlus?: boolean;
-  disabledMinus?: boolean;
-}
-export const Quantity = ({
-  setQuantity,
-  item,
-  onClickQuantity,
-  disabled,
-  disabledPlus,
-  disabledMinus,
-  pas,
-}: QuantityProps) => {
-  const [qte, setQte] = useState(pas);
-
-  const changeQuantity = useCallback(
-    (qte: number) => {
-      if (disabled) {
-        return;
-      }
-      setQte(qte);
-      if (setQuantity) {
-        setQuantity(item, qte);
-      }
-    },
-    [setQte, setQuantity]
-  );
-
-  const incrementQte = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      e.stopPropagation();
-      if (disabled || disabledPlus) {
-        return;
-      }
-      const newQuantity = qte + pas;
-      changeQuantity(Math.round(newQuantity * 100) / 100);
-    },
-    [qte, changeQuantity]
-  );
-
-  const decrementQte = useCallback(
-    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
-      e.stopPropagation();
-      if (disabled || disabledMinus) {
-        return;
-      }
-      if (qte === 0) {
-        return qte;
-      }
-      const newQuantity = qte - pas;
-      changeQuantity(Math.round(newQuantity * 100) / 100);
-    },
-    [changeQuantity, qte]
-  );
-  useEffect(() => {
-    if (item.quantity) {
-      setQte(item.quantity);
-    }
-  }, [item.quantity, setQte]);
-  const handleClick = useCallback(
-    (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-      e.stopPropagation();
-      if (onClickQuantity) {
-        onClickQuantity(item);
-      }
-    },
-    [onClickQuantity, item]
-  );
-
-  return (
-    <div className="qte ">
-      <div
-        onClick={(e) => decrementQte(e)}
-        className={`qte-action qte-action--minus ${
-          disabled || disabledMinus ? "disabled" : ""
-        } `}
-      >
-        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-dash-square" />
-      </div>
-      <span onClick={(e) => handleClick(e)} className="qte-label">
-        {qte}
-      </span>
-      <div
-        onClick={(e) => incrementQte(e)}
-        className={`qte-action qte-action--plus ${
-          disabled || disabledPlus ? "disabled" : ""
-        }`}
-      >
-        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-plus-square" />
-      </div>
-    </div>
-  );
-};
+import { useCallback, useEffect, useState } from "react";
+import { CardInterface } from "../card/card.interface";
+import { Icon } from "../icon/Icon";
+import { IconSizeEnum } from "../icon/iconSize.enum";
+import "./quantity.css";
+export interface QuantityProps {
+  setQuantity?: (item: CardInterface, qte: number) => void;
+  item: CardInterface;
+  onClickQuantity?: (item: CardInterface) => void;
+  pas: number;
+  disabled?: boolean;
+  disabledPlus?: boolean;
+  disabledMinus?: boolean;
+}
+export const Quantity = ({
+  setQuantity,
+  item,
+  onClickQuantity,
+  disabled,
+  disabledPlus,
+  disabledMinus,
+  pas,
+}: QuantityProps) => {
+  const [qte, setQte] = useState(pas);
+
+  const changeQuantity = useCallback(
+    (qte: number) => {
+      if (disabled) {
+        return;
+      }
+      setQte(qte);
+      if (setQuantity) {
+        setQuantity(item, qte);
+      }
+    },
+    [setQte, setQuantity]
+  );
+
+  const incrementQte = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (disabled || disabledPlus) {
+        return;
+      }
+      const newQuantity = qte + pas;
+      changeQuantity(Math.round(newQuantity * 100) / 100);
+    },
+    [qte, changeQuantity]
+  );
+
+  const decrementQte = useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (disabled || disabledMinus) {
+        return;
+      }
+      if (qte === 0) {
+        return qte;
+      }
+      const newQuantity = qte - pas;
+      changeQuantity(Math.round(newQuantity * 100) / 100);
+    },
+    [changeQuantity, qte]
+  );
+  useEffect(() => {
+    if (item.quantity) {
+      setQte(item.quantity);
+    }
+  }, [item.quantity, setQte]);
+  const handleClick = useCallback(
+    (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
+      e.stopPropagation();
+      if (onClickQuantity) {
+        onClickQuantity(item);
+      }
+    },
+    [onClickQuantity, item]
+  );
+
+  return (
+    <div className="qte ">
+      <div
+        onClick={(e) => decrementQte(e)}
+        className={`qte-action qte-action--minus ${
+          disabled || disabledMinus ? "disabled" : ""
+        } `}
+      >
+        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-dash-square" />
+      </div>
+      <span onClick={(e) => handleClick(e)} className="qte-label">
+        {qte}
+      </span>
+      <div
+        onClick={(e) => incrementQte(e)}
+        className={`qte-action qte-action--plus ${
+          disabled || disabledPlus ? "disabled" : ""
+        }`}
+      >
+        <Icon size={IconSizeEnum.LARGE} classIcon="bi bi-plus-square" />
+      </div>
+    </div>
+  );
+};

package/src/quantity/quantity.css

@@ -1,26 +1,26 @@
-.qte {
-  display: flex;
-  align-items: center;
-  .qte-label {
-    width: 20px;
-    text-align: center;
-  }
-  .qte-action {
-    cursor: pointer;
-    margin-right: 1.5rem;
-    &.disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
-    }
-    .bi {
-      color: #333;
-    }
-    &.qte-action--plus {
-      margin-left: 0.5rem;
-      margin-right: 0rem;
-    }
-    &.qte-action--minus {
-      margin-right: 0.5rem;
-    }
-  }
-}
+.qte {
+  display: flex;
+  align-items: center;
+  .qte-label {
+    width: 20px;
+    text-align: center;
+  }
+  .qte-action {
+    cursor: pointer;
+    margin-right: 1.5rem;
+    &.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+    .bi {
+      color: #333;
+    }
+    &.qte-action--plus {
+      margin-left: 0.5rem;
+      margin-right: 0rem;
+    }
+    &.qte-action--minus {
+      margin-right: 0.5rem;
+    }
+  }
+}