Typescript showcase updates (#3620)

primefaces · Nov 12, 2022 · c3879a3 · c3879a3
1 parent 34c114d
commit c3879a3
Show file tree

Hide file tree

Showing 115 changed files with 401 additions and 2,668 deletions.
diff --git a/components/doc/autocomplete/basicdoc.js b/components/doc/autocomplete/basicdoc.js
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
 import { CountryService } from '../../../service/CountryService';
-import { DocSectionText } from '../common/docsectiontext';
+import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function BasicDoc(props) {
     const [countries, setCountries] = useState([]);
@@ -72,7 +72,7 @@ export default function BasicDemo() {
         `,
         typescript: `
 import { useState, useEffect } from 'react';
-import { AutoComplete } from 'primereact/autocomplete';
+import { AutoComplete, AutoCompleteCompleteMethodParams, AutoCompleteChangeParams } from 'primereact/autocomplete';
 import { CountryService } from '../../../service/CountryService';
 
 export default function BasicDemo() {
@@ -85,7 +85,7 @@ export default function BasicDemo() {
         countryservice.getCountries().then((data) => setCountries(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const searchCountry = (event) => {
+    const searchCountry = (event: AutoCompleteCompleteMethodParams) => {
         setTimeout(() => {
             let _filteredCountries;
 
@@ -100,7 +100,7 @@ export default function BasicDemo() {
             setFilteredCountries(_filteredCountries);
         }, 250);
     };
-    
+
     return (
         <AutoComplete value={selectedCountry} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e : AutoCompleteChangeParams) => setSelectedCountry(e.value)} aria-label="Countries" dropdownAriaLabel="Select Country" />
     )

diff --git a/components/doc/autocomplete/groupeddoc.js b/components/doc/autocomplete/groupeddoc.js
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
 import { CountryService } from '../../../service/CountryService';
-import { DocSectionText } from '../common/docsectiontext';
+import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function GroupedDoc(props) {
     const [countries, setCountries] = useState([]);
@@ -154,7 +154,7 @@ export default function GroupedDoc() {
         `,
         typescript: `
 import { useState } from "react";
-import { AutoComplete } from 'primereact/autocomplete';
+import { AutoComplete, AutoCompleteCompleteMethodParams } from 'primereact/autocomplete';
 import { CountryService } from '../../../service/CountryService';
 
 export default function GroupedDoc() {
@@ -200,7 +200,7 @@ export default function GroupedDoc() {
         countryservice.getCountries().then((data) => setCountries(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const searchCity = (event) => {
+    const searchCity = (event: AutoCompleteCompleteMethodParams) => {
         let query = event.query;
         let _filteredCities = [];
 
@@ -223,7 +223,7 @@ export default function GroupedDoc() {
             </div>
         );
     };
-    
+
     return (
         <AutoComplete value={selectedCity} suggestions={filteredCities} completeMethod={searchCity} field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} onChange={(e : AutoCompleteChangeParams) => setSelectedCity(e.value)} aria-label="Cities"/>
     )

diff --git a/components/doc/autocomplete/multipledoc.js b/components/doc/autocomplete/multipledoc.js
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
 import { CountryService } from '../../../service/CountryService';
-import { DocSectionText } from '../common/docsectiontext';
+import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function MultipleDoc(props) {
     const [countries, setCountries] = useState([]);
@@ -71,7 +71,7 @@ export default function BasicDemo() {
         `,
         typescript: `
 import { useState, useEffect } from 'react';
-import { AutoComplete } from 'primereact/autocomplete';
+import { AutoComplete, AutoCompleteCompleteMethodParams, AutoCompleteChangeParams } from 'primereact/autocomplete';
 import { CountryService } from '../../../service/CountryService';
 
 export default function BasicDemo() {
@@ -84,7 +84,7 @@ export default function BasicDemo() {
         countryservice.getCountries().then((data) => setCountries(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const searchCountry = (event) => {
+    const searchCountry = (event: AutoCompleteCompleteMethodParams) => {
         setTimeout(() => {
             let _filteredCountries;
 

diff --git a/components/doc/autocomplete/templatingdoc.js b/components/doc/autocomplete/templatingdoc.js
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
 import { CountryService } from '../../../service/CountryService';
-import { DocSectionText } from '../common/docsectiontext';
+import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function TemplatingDoc(props) {
     const [countries, setCountries] = useState([]);
@@ -89,7 +89,7 @@ export default function TemplatingDoc() {
         `,
         typescript: `
 import { useState, useEffect } from 'react';
-import { AutoComplete } from 'primereact/autocomplete';
+import { AutoComplete, AutoCompleteCompleteMethodParams, AutoCompleteChangeParams } from 'primereact/autocomplete';
 import { CountryService } from '../../../service/CountryService';
 
 export default function TemplatingDoc() {
@@ -102,7 +102,7 @@ export default function TemplatingDoc() {
         countryservice.getCountries().then((data) => setCountries(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
-    const searchCountry = (event) => {
+    const searchCountry = (event: AutoCompleteCompleteMethodParams) => {
         setTimeout(() => {
             let _filteredCountries;
 

diff --git a/components/doc/autocomplete/virtualscrolldoc.js b/components/doc/autocomplete/virtualscrolldoc.js
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
+import { useEffect, useState } from 'react';
 import { CountryService } from '../../../service/CountryService';
-import { DocSectionText } from '../common/docsectiontext';
+import { AutoComplete } from '../../lib/autocomplete/AutoComplete';
 import { DocSectionCode } from '../common/docsectioncode';
+import { DocSectionText } from '../common/docsectiontext';
 
 export function VirtualScrollDoc(props) {
     const [countries, setCountries] = useState([]);
@@ -77,7 +77,7 @@ export default function VirtualScrollDoc() {
         `,
         typescript: `
 import { useState, useEffect } from 'react';
-import { AutoComplete } from 'primereact/autocomplete';
+import { AutoComplete, AutoCompleteCompleteMethodParams, AutoCompleteChangeParams } from 'primereact/autocomplete';
 import { CountryService } from '../../../service/CountryService';
 
 export default function VirtualScrollDoc() {
@@ -92,7 +92,7 @@ export default function VirtualScrollDoc() {
 
     const items = Array.from({ length: 100000 }).map((_, i) => ({ label: \`Item #\${i}\`, value: i }));
 
-    const searchItems = (event) => {
+    const searchItems = (event: AutoCompleteCompleteMethodParams) => {
         //in a real application, make a request to a remote url with the query and return filtered results, for demo we filter at client side
         let query = event.query;
         let _filteredItems = [];