Fixed #2274 - TS error with 'ref' (#2275)

* Fixed issue #2274 #2274 * Fixed Issue #2274 * fix #2277 make optional toggle seconds pram * #2277 overlayPanelDemo typescript Eror fix. Co-authored-by: guhyeon <[email protected]>
primefaces · Nov 3, 2021 · a0dab6d · a0dab6d
1 parent 16cbe24
commit a0dab6d
Show file tree

Hide file tree

Showing 7 changed files with 107 additions and 54 deletions.
diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts
@@ -11,7 +11,7 @@ export interface ButtonIconOptions {
     props: ButtonProps;
 }
 
-export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled'> {
+export interface ButtonProps extends Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, 'disabled'|'ref'> {
     label?: string;
     icon?: ButtonIconType;
     iconPos?: ButtonPositionType;

diff --git a/src/components/colorpicker/ColorPicker.d.ts b/src/components/colorpicker/ColorPicker.d.ts
@@ -19,7 +19,7 @@ interface ColorPickerChangeParams {
     target: ColorPickerChangeTargetOptions;
 }
 
-export interface ColorPickerProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onChange' | 'value'> {
+export interface ColorPickerProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onChange' | 'value' | 'ref'> {
     inputRef?: React.Ref<HTMLInputElement>;
     value?: any;
     defaultColor?: string;

diff --git a/src/components/inputtext/InputText.d.ts b/src/components/inputtext/InputText.d.ts
@@ -2,7 +2,7 @@ import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
 import { KeyFilterType } from '../keyfilter';
 
-export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput'> {
+export interface InputTextProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput'|'ref'> {
     keyfilter?: KeyFilterType;
     validateOnly?: boolean;
     tooltip?: string;

diff --git a/src/components/inputtextarea/InputTextarea.d.ts b/src/components/inputtextarea/InputTextarea.d.ts
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import TooltipOptions from '../tooltip/tooltipoptions';
 
-export interface InputTextareaProps extends React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> {
+export interface InputTextareaProps extends Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'ref'> {
     autoResize?: boolean;
     tooltip?: string;
     tooltipOptions?: TooltipOptions;

diff --git a/src/components/overlaypanel/OverlayPanel.d.ts b/src/components/overlaypanel/OverlayPanel.d.ts
@@ -25,7 +25,7 @@ export interface OverlayPanelProps {
 }
 
 export declare class OverlayPanel extends React.Component<OverlayPanelProps, any> {
-    public toggle(event: OverlayPanelEventType, target: OverlayPanelTargetType): void;
+    public toggle(event: OverlayPanelEventType, target?: OverlayPanelTargetType): void;
     public show(event: OverlayPanelEventType, target: OverlayPanelTargetType): void;
     public hide(): void;
 }
diff --git a/src/components/password/Password.d.ts b/src/components/password/Password.d.ts
@@ -18,7 +18,7 @@ type PasswordIconType = React.ReactNode | ((e: PasswordIconParams) => React.Reac
 
 type PasswordAppendToType = 'self' | HTMLElement | undefined | null;
 
-export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput'> {
+export interface PasswordProps extends Omit<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'onInput'|'ref'> {
     id?: string;
     inputId?: string;
     inputRef?: React.Ref<HTMLInputElement>;

diff --git a/src/showcase/overlaypanel/OverlayPanelDoc.js b/src/showcase/overlaypanel/OverlayPanelDoc.js
@@ -161,65 +161,118 @@ import { OverlayPanel } from 'primereact/overlaypanel';
 import { Button } from 'primereact/button';
 import { Toast } from 'primereact/toast';
 import { Column } from 'primereact/column';
-import { DataTable } from 'primereact/datatable';
+import { DataTable, DataTableSelectionChangeParams } from 'primereact/datatable';
 import { ProductService } from '../service/ProductService';
 import './OverlayPanelDemo.css';
 
-const OverlayPanelDemo = () => {
-    const [products, setProducts] = useState(null);
-    const [selectedProduct, setSelectedProduct] = useState(null);
+type ProductItem = {
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
+  };
+  
+  const OverlayPanelDemo = () => {
+    const [products, setProducts] = useState<ProductItem[] | null>(null);
+    const [selectedProduct, setSelectedProduct] = useState<ProductItem | null>(
+      null
+    );
     const productService = new ProductService();
-    const op = useRef(null);
-    const toast = useRef(null);
+    const op = useRef<OverlayPanel>(null);
+    const toast = useRef<Toast>(null);
     const isMounted = useRef(false);
-
+  
     useEffect(() => {
-        if (isMounted.current) {
-            op.current.hide();
-            toast.current.show({severity:'info', summary: 'Product Selected', detail: selectedProduct.name, life: 3000});
-        }
+      if (isMounted.current) {
+        op.current?.hide();
+        toast.current?.show({
+          severity: "info",
+          summary: "Product Selected",
+          detail: selectedProduct?.name,
+          life: 3000
+        });
+      }
     }, [selectedProduct]); // eslint-disable-line react-hooks/exhaustive-deps
-
+  
     useEffect(() => {
-        isMounted.current = true;
-        productService.getProductsSmall().then(data => setProducts(data));
+      isMounted.current = true;
+      productService.getProductsSmall().then((data) => setProducts(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
-    const formatCurrency = (value) => {
-        return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'});
-    }
-
-    const onProductSelect = (e) => {
-        setSelectedProduct(e.value);
-    }
-
-    const imageBody = (rowData) => {
-        return <img src={\`showcase/demo/images/product/\${rowData.image}\`} onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} alt={rowData.image} className="product-image" />
-    }
-
-    const priceBody = (rowData) => {
-        return formatCurrency(rowData.price);
-    }
-
+  
+    const formatCurrency = (value: number) => {
+      return value.toLocaleString("en-US", {
+        style: "currency",
+        currency: "USD"
+      });
+    };
+  
+    const onProductSelect = (e: DataTableSelectionChangeParams) => {
+      setSelectedProduct(e.value);
+    };
+  
+    const imageBody = (rowData: ProductItem) => {
+      return (
+        <img
+          src={\`showcase/demo/images/product/\${rowData.image}\`}
+          onError={(e) =>
+            (e.currentTarget.src =
+              "https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png")
+          }
+          alt={rowData.image}
+          className="product-image"
+        />
+      );
+    };
+  
+    const priceBody = (rowData: ProductItem) => {
+      return formatCurrency(rowData.price ?? 0);
+    };
+  
     return (
-        <div>
-            <Toast ref={toast} />
-
-            <div className="card">
-                <Button type="button" icon="pi pi-search" label={selectedProduct ? selectedProduct.name : 'Select a Product'} onClick={(e) => op.current.toggle(e)} aria-haspopup aria-controls="overlay_panel" className="select-product-button" />
-
-                <OverlayPanel ref={op} showCloseIcon id="overlay_panel" style={{width: '450px'}} className="overlaypanel-demo">
-                    <DataTable value={products} selectionMode="single" paginator rows={5}
-                        selection={selectedProduct} onSelectionChange={onProductSelect}>
-                        <Column field="name" header="Name" sortable />
-                        <Column header="Image" body={imageBody} />
-                        <Column field="price" header="Price" sortable body={priceBody} />
-                    </DataTable>
-                </OverlayPanel>
-            </div>
+      <div>
+        <Toast ref={toast} />
+  
+        <div className="card">
+          <Button
+            type="button"
+            icon="pi pi-search"
+            label={selectedProduct ? selectedProduct.name : "Select a Product"}
+            onClick={(e) => op.current?.toggle(e)}
+            aria-haspopup
+            aria-controls="overlay_panel"
+            className="select-product-button"
+          />
+  
+          <OverlayPanel
+            ref={op}
+            showCloseIcon
+            id="overlay_panel"
+            style={{ width: "450px" }}
+            className="overlaypanel-demo"
+          >
+            <DataTable
+              value={products ?? []}
+              selectionMode="single"
+              paginator
+              rows={5}
+              selection={selectedProduct}
+              onSelectionChange={onProductSelect}
+            >
+              <Column field="name" header="Name" sortable />
+              <Column header="Image" body={imageBody} />
+              <Column field="price" header="Price" sortable body={priceBody} />
+            </DataTable>
+          </OverlayPanel>
         </div>
-    )
-}
+      </div>
+    );
+  };
                 `
             },
             'browser': {