Merge pull request #4792 from melloware/PR4777-datatable-typescript

Fix #4777: Datatable typescript improvements
primefaces · Aug 17, 2023 · 1978a98 · 1978a98
2 parents 2afa48c + 6884bde
commit 1978a98
Show file tree

Hide file tree

Showing 10 changed files with 207 additions and 141 deletions.
diff --git a/components/doc/datatable/cellselection/multipledoc.js b/components/doc/datatable/cellselection/multipledoc.js
@@ -70,16 +70,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function MultipleCellsSelectionDemo() {
@@ -98,10 +98,7 @@ export default function MultipleCellsSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} cellSelection selectionMode="multiple" selection={selectedCells!}
-                    onSelectionChange={(e) => {
-                        const value = e.value as DataTableCellSelection<Product[]>;
-                        setSelectedCells(value);
-                    }}
+                    onSelectionChange={(e) => setSelectedCells(e.value)}
                     metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>

diff --git a/components/doc/datatable/cellselection/singledoc.js b/components/doc/datatable/cellselection/singledoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function SingleCellSelectionDemo() {
@@ -96,10 +96,7 @@ export default function SingleCellSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} cellSelection selectionMode="single" selection={selectedCell!}
-                    onSelectionChange={(e) => {
-                        const value = e.value as DataTableCellSelection<Product[]>;
-                         setSelectedCell(value);
-                    }} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                    onSelectionChange={(e) =>  setSelectedCell(e.value)} metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>

diff --git a/components/doc/datatable/pt/ptdoc.js b/components/doc/datatable/pt/ptdoc.js
@@ -192,7 +192,6 @@ export default function PTDemo() {
                 }}
             ></Column>
         </DataTable>
-    </div>
     );
 }
         `,

diff --git a/components/doc/datatable/rowselection/checkboxdoc.js b/components/doc/datatable/rowselection/checkboxdoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function CheckboxRowSelectionDemo() {
@@ -96,10 +96,7 @@ export default function CheckboxRowSelectionDemo() {
                 <label htmlFor="input-rowclick">Row Click</label>
             </div>
             <DataTable value={products} selectionMode={rowClick ? undefined : 'multiple'} selection={selectedProducts!}
-                        onSelectionChange={(e) => {
-                            const value = e.value as Product[];
-                            setSelectedProducts(value);
-                        }} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                        onSelectionChange={(e) => setSelectedProducts(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
                 <Column selectionMode="multiple" headerStyle={{ width: '3rem' }}></Column>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>

diff --git a/components/doc/datatable/rowselection/disableddoc.js b/components/doc/datatable/rowselection/disableddoc.js
@@ -69,16 +69,16 @@ import { Column } from 'primereact/column';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function DisabledRowSelectionDemo() {
@@ -98,10 +98,7 @@ export default function DisabledRowSelectionDemo() {
     return (
         <div className="card">
             <DataTable value={products} selectionMode="single" selection={selectedProduct!}
-                    onSelectionChange={(e) => {
-                        const value = e.value as Product;
-                        setSelectedProduct(value);
-                    }} dataKey="id" isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
+                    onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" isDataSelectable={isRowSelectable} rowClassName={rowClassName} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>

diff --git a/components/doc/datatable/rowselection/eventsdoc.js b/components/doc/datatable/rowselection/eventsdoc.js
@@ -79,16 +79,16 @@ import { Toast } from 'primereact/toast';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function RowSelectEventsDemo() {
@@ -112,10 +112,7 @@ export default function RowSelectEventsDemo() {
         <div className="card">
             <Toast ref={toast} />
             <DataTable value={products} selectionMode="single" selection={selectedProduct!} 
-                        onSelectionChange={(e) => {
-                            const value = e.value as Product;
-                            setSelectedProduct(value);
-                        }}  dataKey="id" onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
+                        onSelectionChange={(e) => setSelectedProduct(e.value)}  dataKey="id" onRowSelect={onRowSelect} onRowUnselect={onRowUnselect} metaKeySelection={false} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>

diff --git a/components/doc/datatable/rowselection/multipledoc.js b/components/doc/datatable/rowselection/multipledoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function MultipleRowsSelectionDemo() {
@@ -96,11 +96,7 @@ export default function MultipleRowsSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} selectionMode="multiple" selection={selectedProducts} 
-                    onSelectionChange={(e) => {
-                        if (Array.isArray(e.value)) {
-                            setSelectedProducts(e.value);
-                        }
-                    }}
+                    onSelectionChange={(e) => setSelectedProducts(e.value)}
                     dataKey="id" metaKeySelection={metaKey} dragSelection tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>

diff --git a/components/doc/datatable/rowselection/radiobuttondoc.js b/components/doc/datatable/rowselection/radiobuttondoc.js
@@ -68,16 +68,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function RadioButtonRowSelectionDemo() {
@@ -96,10 +96,7 @@ export default function RadioButtonRowSelectionDemo() {
                 <label htmlFor="input-rowclick">Row Click</label>
             </div>
             <DataTable value={products} selectionMode={rowClick ? undefined : 'radiobutton'} selection={selectedProduct!}
-                onSelectionChange={(e) => {
-                     const value = e.value as Product;
-                     setSelectedProduct(value);
-                }} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
+                onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" tableStyle={{ minWidth: '50rem' }}>
                 <Column selectionMode="single" headerStyle={{ width: '3rem' }}></Column>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>

diff --git a/components/doc/datatable/rowselection/singledoc.js b/components/doc/datatable/rowselection/singledoc.js
@@ -67,16 +67,16 @@ import { InputSwitch, InputSwitchChangeEvent } from 'primereact/inputswitch';
 import { ProductService } from './service/ProductService';
 
 interface Product {
-    id: string;
-    code: string;
-    name: string;
-    description: string;
-    image: string;
-    price: number;
-    category: string;
-    quantity: number;
-    inventoryStatus: string;
-    rating: number;
+    id?: string;
+    code?: string;
+    name?: string;
+    description?: string;
+    image?: string;
+    price?: number;
+    category?: string;
+    quantity?: number;
+    inventoryStatus?: string;
+    rating?: number;
 }
 
 export default function SingleRowSelectionDemo() {
@@ -95,10 +95,7 @@ export default function SingleRowSelectionDemo() {
                 <label htmlFor="input-metakey">MetaKey</label>
             </div>
             <DataTable value={products} selectionMode="single" selection={selectedProduct!} 
-                onSelectionChange={(e) => {
-                     const value = e.value as Product;
-                     setSelectedProduct(value);
-                }} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
+                onSelectionChange={(e) => setSelectedProduct(e.value)} dataKey="id" metaKeySelection={metaKey} tableStyle={{ minWidth: '50rem' }}>
                 <Column field="code" header="Code"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>