From a0dab6d253b307b03a6e62ef979861cf11723ff0 Mon Sep 17 00:00:00 2001 From: guhyeon Date: Wed, 3 Nov 2021 16:36:44 +0900 Subject: [PATCH] Fixed #2274 - TS error with 'ref' (#2275) * Fixed issue #2274 https://github.com/primefaces/primereact/issues/2274 * Fixed Issue #2274 * fix #2277 make optional toggle seconds pram * #2277 overlayPanelDemo typescript Eror fix. Co-authored-by: guhyeon --- src/components/button/Button.d.ts | 2 +- src/components/colorpicker/ColorPicker.d.ts | 2 +- src/components/inputtext/InputText.d.ts | 2 +- .../inputtextarea/InputTextarea.d.ts | 2 +- src/components/overlaypanel/OverlayPanel.d.ts | 2 +- src/components/password/Password.d.ts | 2 +- src/showcase/overlaypanel/OverlayPanelDoc.js | 149 ++++++++++++------ 7 files changed, 107 insertions(+), 54 deletions(-) diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts index 3f81c133c3..1607a880f1 100644 --- 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, HTMLButtonElement>, 'disabled'> { +export interface ButtonProps extends Omit, 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 index 8af3b96581..57307d27e1 100644 --- 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, HTMLInputElement>, 'onChange' | 'value'> { +export interface ColorPickerProps extends Omit, HTMLInputElement>, 'onChange' | 'value' | 'ref'> { inputRef?: React.Ref; value?: any; defaultColor?: string; diff --git a/src/components/inputtext/InputText.d.ts b/src/components/inputtext/InputText.d.ts index a46701f67c..f4a5efdd7a 100644 --- 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, HTMLInputElement>, 'onInput'> { +export interface InputTextProps extends Omit, 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 index 21316ad775..aca1adbfb1 100644 --- 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, HTMLTextAreaElement> { +export interface InputTextareaProps extends Omit, HTMLTextAreaElement>, 'ref'> { autoResize?: boolean; tooltip?: string; tooltipOptions?: TooltipOptions; diff --git a/src/components/overlaypanel/OverlayPanel.d.ts b/src/components/overlaypanel/OverlayPanel.d.ts index ac7df9a763..49a210efa2 100644 --- 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 { - 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 index 6d42086800..1c31eecbfa 100644 --- 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, HTMLInputElement>, 'onInput'> { +export interface PasswordProps extends Omit, HTMLInputElement>, 'onInput'|'ref'> { id?: string; inputId?: string; inputRef?: React.Ref; diff --git a/src/showcase/overlaypanel/OverlayPanelDoc.js b/src/showcase/overlaypanel/OverlayPanelDoc.js index 757fbc0bfb..d3b9ccb568 100644 --- 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(null); + const [selectedProduct, setSelectedProduct] = useState( + null + ); const productService = new ProductService(); - const op = useRef(null); - const toast = useRef(null); + const op = useRef(null); + const toast = useRef(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 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 ( + + (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 ( -
- - -
-
+
+ + +
+
- ) -} +
+ ); + }; ` }, 'browser': {