Add prettier to standardize formatting

primefaces · Aug 23, 2022 · b733a93 · b733a93
2 parents 632010b + 6358c42
commit b733a93
Show file tree

Hide file tree

Showing 200 changed files with 9,474 additions and 8,613 deletions.
diff --git a/package-build.json b/package-build.json
@@ -1,6 +1,6 @@
 {
     "name": "primereact",
-    "version": "8.4.0",
+    "version": "8.5.0",
     "private": false,
     "author": "PrimeTek Informatics",
     "description": "PrimeReact is an open source UI library for React featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, which has 280+ ready to use UI blocks to build spectacular applications in no time.",

diff --git a/package.json b/package.json
@@ -9,8 +9,8 @@
         "build-package": "rollup -c && gulp build-resources && npm run build-api",
         "build-api": "node ./api-generator/build-api.js",
         "security-check": "npm audit --production --audit-level high",
-        "format-check": "prettier --check \"{components, pages, services}/**/*.{js,ts,tsx}\"",
-        "format": "prettier --write \"{components, pages, services}/**/*.{js,ts,tsx}\"",
+        "format-check": "prettier --check \"{components,pages,service}/**/*.{js,ts,tsx}\"",
+        "format": "prettier --write \"{components,pages,service}/**/*.{js,ts,tsx}\"",
         "start": "next start",
         "lint": "next lint --max-warnings=0",
         "type-check": "tsc"
@@ -65,4 +65,4 @@
         "sass": "^1.53.0",
         "typescript": "^4.7.4"
     }
-}
+}
diff --git a/pages/_app.js b/pages/_app.js
@@ -16,7 +16,7 @@ export default function MyApp({ Component }) {
 
     useEffect(() => {
         if (process.env.NODE_ENV === 'production') {
-            fetchNews().then(data => {
+            fetchNews().then((data) => {
                 if (data) {
                     announcement.current = data;
 
@@ -26,8 +26,7 @@ export default function MyApp({ Component }) {
                         if (item.hiddenNews && item.hiddenNews !== data.id) {
                             setNewsActive(true);
                         }
-                    }
-                    else {
+                    } else {
                         setNewsActive(true);
                     }
                 }
@@ -52,7 +51,7 @@ export default function MyApp({ Component }) {
             setDark(dark);
             changeTheme(newTheme);
         }
-    }
+    };
 
     const changeTheme = (newTheme) => {
         const elementId = 'theme-link';
@@ -69,17 +68,15 @@ export default function MyApp({ Component }) {
 
         linkElement.parentNode.insertBefore(cloneLinkElement, linkElement.nextSibling);
         setTheme(newTheme);
-    }
+    };
 
     if (Component.getLayout) {
         return Component.getLayout(<Component {...props} />);
-    }
-    else {
+    } else {
         return (
             <Layout {...props}>
-                <Component {...props}/>
+                <Component {...props} />
             </Layout>
-        )
+        );
     }
-
 }
diff --git a/pages/_document.js b/pages/_document.js
@@ -1,10 +1,10 @@
-import Document, { Html, Head, Main, NextScript } from 'next/document'
+import Document, { Html, Head, Main, NextScript } from 'next/document';
 import getConfig from 'next/config';
 
 class MyDocument extends Document {
     static async getInitialProps(ctx) {
-        const initialProps = await Document.getInitialProps(ctx)
-        return { ...initialProps }
+        const initialProps = await Document.getInitialProps(ctx);
+        return { ...initialProps };
     }
 
     render() {
@@ -13,15 +13,15 @@ class MyDocument extends Document {
         return (
             <Html>
                 <Head>
-                    <link id="theme-link" href={`${contextPath}/themes/lara-light-indigo/theme.css`} rel="stylesheet"></link>
+                    <link id='theme-link' href={`${contextPath}/themes/lara-light-indigo/theme.css`} rel='stylesheet'></link>
                 </Head>
                 <body>
                     <Main />
                     <NextScript />
                 </body>
             </Html>
-        )
+        );
     }
 }
 
-export default MyDocument;
+export default MyDocument;
diff --git a/pages/accessibility/index.js b/pages/accessibility/index.js
diff --git a/pages/accordion/index.js b/pages/accordion/index.js
diff --git a/pages/api/upload.js b/pages/api/upload.js
@@ -1,3 +1,3 @@
 export default function handler(req, res) {
-    res.status(200).setHeader('Access-Control-Allow-Origin', '*').json({ name: 'Fake Upload Process' })
-}
+    res.status(200).setHeader('Access-Control-Allow-Origin', '*').json({ name: 'Fake Upload Process' });
+}
diff --git a/pages/autocomplete/index.js b/pages/autocomplete/index.js
@@ -7,7 +7,6 @@ import Head from 'next/head';
 import getConfig from 'next/config';
 
 const AutoCompleteDemo = () => {
-
     const [countries, setCountries] = useState([]);
     const [selectedCountry1, setSelectedCountry1] = useState(null);
     const [selectedCountry2, setSelectedCountry2] = useState(null);
@@ -20,10 +19,10 @@ const AutoCompleteDemo = () => {
     const countryservice = new CountryService();
     const contextPath = getConfig().publicRuntimeConfig.contextPath;
 
-
     const groupedCities = [
         {
-            label: 'Germany', code: 'DE',
+            label: 'Germany',
+            code: 'DE',
             items: [
                 { label: 'Berlin', value: 'Berlin' },
                 { label: 'Frankfurt', value: 'Frankfurt' },
@@ -32,7 +31,8 @@ const AutoCompleteDemo = () => {
             ]
         },
         {
-            label: 'USA', code: 'US',
+            label: 'USA',
+            code: 'US',
             items: [
                 { label: 'Chicago', value: 'Chicago' },
                 { label: 'Los Angeles', value: 'Los Angeles' },
@@ -41,7 +41,8 @@ const AutoCompleteDemo = () => {
             ]
         },
         {
-            label: 'Japan', code: 'JP',
+            label: 'Japan',
+            code: 'JP',
             items: [
                 { label: 'Kyoto', value: 'Kyoto' },
                 { label: 'Osaka', value: 'Osaka' },
@@ -54,24 +55,23 @@ const AutoCompleteDemo = () => {
     const items = Array.from({ length: 100000 }).map((_, i) => ({ label: `Item #${i}`, value: i }));
 
     useEffect(() => {
-        countryservice.getCountries().then(data => setCountries(data));
+        countryservice.getCountries().then((data) => setCountries(data));
     }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
     const searchCountry = (event) => {
         setTimeout(() => {
             let _filteredCountries;
             if (!event.query.trim().length) {
                 _filteredCountries = [...countries];
-            }
-            else {
+            } else {
                 _filteredCountries = countries.filter((country) => {
                     return country.name.toLowerCase().startsWith(event.query.toLowerCase());
                 });
             }
 
             setFilteredCountries(_filteredCountries);
         }, 250);
-    }
+    };
 
     const searchCity = (event) => {
         let query = event.query;
@@ -84,8 +84,8 @@ const AutoCompleteDemo = () => {
             }
         }
 
-        setFilteredCities(_filteredCities)
-    }
+        setFilteredCities(_filteredCities);
+    };
 
     const searchItems = (event) => {
         //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
@@ -100,64 +100,95 @@ const AutoCompleteDemo = () => {
         }
 
         setFilteredItems(_filteredItems);
-    }
+    };
 
     const itemTemplate = (item) => {
         return (
-            <div className="country-item">
-                <img alt={item.name} src={`${contextPath}/images/flag/flag_placeholder.png`} onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} className={`flag flag-${item.code.toLowerCase()}`} />
+            <div className='country-item'>
+                <img
+                    alt={item.name}
+                    src={`${contextPath}/images/flag/flag_placeholder.png`}
+                    onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
+                    className={`flag flag-${item.code.toLowerCase()}`}
+                />
                 <div>{item.name}</div>
             </div>
         );
-    }
+    };
 
     const groupedItemTemplate = (item) => {
         return (
-            <div className="flex align-items-center country-item">
-                <img alt={item.name} src={`${contextPath}/images/flag/flag_placeholder.png`} onError={(e) => e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} className={`flag flag-${item.code.toLowerCase()}`} />
+            <div className='flex align-items-center country-item'>
+                <img
+                    alt={item.name}
+                    src={`${contextPath}/images/flag/flag_placeholder.png`}
+                    onError={(e) => (e.target.src = 'https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png')}
+                    className={`flag flag-${item.code.toLowerCase()}`}
+                />
                 <div>{item.label}</div>
             </div>
         );
-    }
+    };
 
     return (
         <div>
             <Head>
                 <title>React AutoComplete Component</title>
-                <meta name="description" content="AutoComplete is an input component that provides real-time suggestions when being typed." />
+                <meta name='description' content='AutoComplete is an input component that provides real-time suggestions when being typed.' />
             </Head>
-            <div className="content-section introduction">
-                <div className="feature-intro">
+            <div className='content-section introduction'>
+                <div className='feature-intro'>
                     <h1>AutoComplete</h1>
                     <p>AutoComplete is an input component that provides real-time suggestions when being typed.</p>
                 </div>
-                <DocActions github="autocomplete/index.js" />
+                <DocActions github='autocomplete/index.js' />
             </div>
 
-            <div className="content-section implementation">
-                <div className="card">
+            <div className='content-section implementation'>
+                <div className='card'>
                     <h5>Basic</h5>
-                    <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field="name" onChange={(e) => setSelectedCountry1(e.value)} aria-label="Countries" />
+                    <AutoComplete value={selectedCountry1} suggestions={filteredCountries} completeMethod={searchCountry} field='name' onChange={(e) => setSelectedCountry1(e.value)} aria-label='Countries' />
 
                     <h5>Grouped</h5>
-                    <AutoComplete value={selectedCity} suggestions={filteredCities} completeMethod={searchCity} field="label" optionGroupLabel="label" optionGroupChildren="items" optionGroupTemplate={groupedItemTemplate} onChange={(e) => setSelectedCity(e.value)} aria-label="Cities" />
+                    <AutoComplete
+                        value={selectedCity}
+                        suggestions={filteredCities}
+                        completeMethod={searchCity}
+                        field='label'
+                        optionGroupLabel='label'
+                        optionGroupChildren='items'
+                        optionGroupTemplate={groupedItemTemplate}
+                        onChange={(e) => setSelectedCity(e.value)}
+                        aria-label='Cities'
+                    />
 
                     <h5>Dropdown, Templating and Force Selection</h5>
-                    <AutoComplete value={selectedCountry2} suggestions={filteredCountries} completeMethod={searchCountry} field="name" dropdown dropdownAutoFocus={false} forceSelection itemTemplate={itemTemplate} onChange={(e) => setSelectedCountry2(e.value)} aria-label="Countries" />
+                    <AutoComplete
+                        value={selectedCountry2}
+                        suggestions={filteredCountries}
+                        completeMethod={searchCountry}
+                        field='name'
+                        dropdown
+                        dropdownAutoFocus={false}
+                        forceSelection
+                        itemTemplate={itemTemplate}
+                        onChange={(e) => setSelectedCountry2(e.value)}
+                        aria-label='Countries'
+                    />
 
                     <h5>Virtual Scroll (100000 Items)</h5>
-                    <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field="label" dropdown onChange={(e) => setSelectedItem(e.value)} aria-label="Items" />
+                    <AutoComplete value={selectedItem} suggestions={filteredItems} completeMethod={searchItems} virtualScrollerOptions={{ itemSize: 38 }} field='label' dropdown onChange={(e) => setSelectedItem(e.value)} aria-label='Items' />
 
                     <h5>Multiple</h5>
-                    <span className="p-fluid">
-                        <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field="name" multiple onChange={(e) => setSelectedCountries(e.value)} aria-label="Countries" />
+                    <span className='p-fluid'>
+                        <AutoComplete value={selectedCountries} suggestions={filteredCountries} completeMethod={searchCountry} field='name' multiple onChange={(e) => setSelectedCountries(e.value)} aria-label='Countries' />
                     </span>
                 </div>
             </div>
 
             <AutoCompleteDoc></AutoCompleteDoc>
         </div>
-    )
-}
+    );
+};
 
 export default AutoCompleteDemo;