@movalib/movalib-commons 1.68.21 → 1.68.22

package/dist/src/components/QrCodePLVContainer/PLVComponent.d.ts

@@ -13,7 +13,5 @@ type PLVComponentProps = {
 export declare class PLVComponent extends React.Component<PLVComponentProps> {
     render(): import("react/jsx-runtime").JSX.Element;
 }
-export declare class PLVComponentV2 extends React.Component<PLVComponentProps> {
-    render(): import("react/jsx-runtime").JSX.Element;
-}
+export declare const PLVComponentV2: React.ForwardRefExoticComponent<PLVComponentProps & React.RefAttributes<HTMLDivElement>>;
 export {};

package/dist/src/components/QrCodePLVContainer/PLVComponent.js

@@ -127,20 +127,13 @@ var PLVComponent = /** @class */ (function (_super) {
     return PLVComponent;
 }(react_1.default.Component));
 exports.PLVComponent = PLVComponent;
-var PLVComponentV2 = /** @class */ (function (_super) {
-    __extends(PLVComponentV2, _super);
-    function PLVComponentV2() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    PLVComponentV2.prototype.render = function () {
-        return ((0, jsx_runtime_1.jsx)("div", { className: 'printable-content', style: {
-                width: this.props.printSize === PrintSize.A4 ? '210mm' : this.props.printSize === PrintSize.A3 ? '297mm' : '0mm',
-                height: this.props.printSize === PrintSize.A4 ? '297mm' : this.props.printSize === PrintSize.A3 ? '420mm' : '0mm',
-            }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)("img", { src: this.props.url, style: { display: 'block', width: '100%', height: '100%', objectFit: 'cover' } }) }) }) }));
-    };
-    return PLVComponentV2;
-}(react_1.default.Component));
-exports.PLVComponentV2 = PLVComponentV2;
+exports.PLVComponentV2 = react_1.default.forwardRef(function (_a, ref) {
+    var url = _a.url, printSize = _a.printSize;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: 'printable-content', style: {
+            width: printSize === PrintSize.A4 ? '210mm' : printSize === PrintSize.A3 ? '297mm' : '0mm',
+            height: printSize === PrintSize.A4 ? '297mm' : printSize === PrintSize.A3 ? '420mm' : '0mm',
+        }, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { container: true, children: (0, jsx_runtime_1.jsx)(material_1.Grid, { item: true, xs: 12, children: (0, jsx_runtime_1.jsx)("img", { src: url, style: { display: 'block', width: '100%', height: '100%', objectFit: 'cover' } }) }) }) }));
+});
 // CSS pour cacher le contenu à l'écran mais le rendre imprimable
 var css = "\nbody {\n      margin: 0;\n    }\n    .highlight {\n        background-color: #BCD46C; /* Couleur de surlignage */\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        font-weight: 500;\n        color: white;\n    }\n    .not-highlight {\n        margin: 4px 4px; /* Espacement autour du texte surlign\u00E9 */\n        padding-left : 8px;\n        padding-right: 8px;\n        color: #BCD46C;\n    }\n\n  .printable-content {\n    margin: 0;\n    padding: 0;\n    visibility: hidden;\n    position: absolute;\n    left: -10000px;\n    top: -10000px;\n\n  }\n  @media print {\n    body {\n      margin: 0;\n    }\n    .printable-content {\n      margin: 0;\n      padding: 0;\n      visibility: visible;\n      position: static;\n    }\n  }\n";
 var styleSheet = document.createElement('style');

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@movalib/movalib-commons",
-	"version": "1.68.21",
+	"version": "1.68.22",
 	"description": "Bibliothèque d'objets communs à l'ensemble des projets React de Movalib",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",

package/src/components/QrCodePLVContainer/PLVComponent.tsx

@@ -181,28 +181,26 @@ export class PLVComponent extends React.Component<PLVComponentProps> {
 
 
 
-export class PLVComponentV2 extends React.Component<PLVComponentProps> {
-  render() {
+export const PLVComponentV2 = React.forwardRef<HTMLDivElement, PLVComponentProps>(
+  ({ url, printSize }, ref) => {
     return (
       <div
+        ref={ref}
         className='printable-content'
         style={{
-          width:
-            this.props.printSize === PrintSize.A4 ? '210mm' : this.props.printSize === PrintSize.A3 ? '297mm' : '0mm',
-          height:
-            this.props.printSize === PrintSize.A4 ? '297mm' : this.props.printSize === PrintSize.A3 ? '420mm' : '0mm',
+          width: printSize === PrintSize.A4 ? '210mm' : printSize === PrintSize.A3 ? '297mm' : '0mm',
+          height: printSize === PrintSize.A4 ? '297mm' : printSize === PrintSize.A3 ? '420mm' : '0mm',
         }}
       >
-       <Grid container>
+        <Grid container>
           <Grid item xs={12}>
-            <img src={this.props.url} style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }}  />
+            <img src={url} style={{ display: 'block', width: '100%', height: '100%', objectFit: 'cover' }} />
           </Grid>
         </Grid>
       </div>
     );
   }
-}
-
+);
 // CSS pour cacher le contenu à l'écran mais le rendre imprimable
 const css = `
 body {

package/src/components/QrCodePLVContainer/QrCodePLVContainer.tsx

@@ -37,8 +37,8 @@ export const QrCodePLVContainer = ({ data }: { data: string }) => {
 
   const qrCodeRef = useRef<HTMLDivElement>(null);
   const theme = useTheme();
-  const PLVrefA4 = useRef<PLVComponentV2>(null);
-  const PLVrefA3 = useRef<PLVComponentV2>(null);
+const PLVrefA4 = useRef<HTMLDivElement>(null);
+const PLVrefA3 = useRef<HTMLDivElement>(null);
   //si sur l'impression des PLV en A4 ou A3 le Qrcode est flou,
   //il faut modifier la width et height, imageSize du qrCodeOptions et mettre les mêmes valeurs que dans le optionQrcode de la fonction printPLV
   const qrCodeOptions: Options = useMemo(
@@ -234,17 +234,15 @@ const blob = new Blob([modifiedPdfBytes.buffer as ArrayBuffer], { type: "applica
     }
     setSelectedChoice(e.target.value as SelectChoice);
   };
+    const printA3PLV = useReactToPrint({
+      contentRef: PLVrefA3,
+      documentTitle: "Movalib_PLV_A3",
+    });
 
-  const printA3PLV = useReactToPrint({
-    contentRef: PLVrefA3 as unknown as React.RefObject<HTMLElement>,
-    documentTitle: "Movalib_PLV_A3",
-  });
-
-  const printA4PLV = useReactToPrint({
-   contentRef: PLVrefA4 as unknown as React.RefObject<HTMLElement>,
-    documentTitle: "Movalib_PLV_A4",
-  });
-
+    const printA4PLV = useReactToPrint({
+      contentRef: PLVrefA4,
+      documentTitle: "Movalib_PLV_A4",
+    });
   const onClickDownload = useMemo(() => {
     switch (selectedChoice) {
       case "A3":