From 076d06773d89c01f435050fa463627cdc90195c4 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 16 Aug 2021 11:50:57 +0300
Subject: [PATCH] Refactor on Dropdown doc

---
 api-generator/components/dropdown.js |   6 ++
 src/views/dropdown/DropdownDoc.vue   | 115 +++++++++++++++++++++++----
 2 files changed, 107 insertions(+), 14 deletions(-)

diff --git a/api-generator/components/dropdown.js b/api-generator/components/dropdown.js
index 8bce7b77d..909e8a70c 100644
--- a/api-generator/components/dropdown.js
+++ b/api-generator/components/dropdown.js
@@ -154,6 +154,12 @@ const DividerProps = [
         type: "string",
         default: "pi pi-spinner pi-spin",
         description: "Icon to display in loading state."
+    },
+    {
+        name: "virtualScrollerOptions",
+        type: "object",
+        default: "null",
+        description: "Whether to use the virtualScroller feature. The properties of VirtualScroller component can be used like an object in it."
     }
 ];
 
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 3ad245036..7e1f06717 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -40,7 +40,7 @@ export default {
         return {
             selectedGroupedCity: null,
             groupedCities: [{
-                label: 'Germany', code: 'DE', 
+                label: 'Germany', code: 'DE',
                 items: [
                     {label: 'Berlin', value: 'Berlin'},
                     {label: 'Frankfurt', value: 'Frankfurt'},
@@ -49,7 +49,7 @@ export default {
                 ]
             },
             {
-                label: 'USA', code: 'US', 
+                label: 'USA', code: 'US',
                 items: [
                     {label: 'Chicago', value: 'Chicago'},
                     {label: 'Los Angeles', value: 'Los Angeles'},
@@ -58,7 +58,7 @@ export default {
                 ]
             },
             {
-                label: 'Japan', code: 'JP', 
+                label: 'Japan', code: 'JP',
                 items: [
                     {label: 'Kyoto', value: 'Kyoto'},
                     {label: 'Osaka', value: 'Osaka'},
@@ -72,7 +72,7 @@ export default {
 </code></pre>
 
 <pre v-code><code><template v-pre>
-&lt;Dropdown v-model="selectedGroupedCity" :options="groupedCities" 
+&lt;Dropdown v-model="selectedGroupedCity" :options="groupedCities"
         optionLabel="label" optionGroupLabel="label" optionGroupChildren="items"&gt;
 &lt;/Dropdown&gt;
 </template>
@@ -287,6 +287,12 @@ export default {
                         <td>string</td>
                         <td>pi pi-spinner pi-spin</td>
                         <td>Icon to display in loading state.</td>
+                    </tr>
+                    <tr>
+                        <td>virtualScrollerOptions</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Whether to use the virtualScroller feature. The properties of <router-link to="/virtualscroller">VirtualScroller</router-link> component can be used like an object in it.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -533,6 +539,18 @@ export default {
 
         <h5>Loading State</h5>
         <Dropdown placeholder="Loading..." loading></Dropdown>
+
+        <h5>Virtual Scroll (100000 Items)</h5>
+        <Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
+
+        <h5>Virtual Scroll (100000 Items) and Lazy</h5>
+        <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
+            <template v-slot:loader="{ options }">
+                <div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
+                    <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
+                </div>
+            </template>
+        </Dropdown>
     </div>
 </template>
 
@@ -544,6 +562,9 @@ export default {
             selectedCity2: null,
             selectedCountry: null,
             selectedGroupedCity: null,
+            selectedItem1: null,
+            selectedItem2: null,
+            loading: false,
             cities: [
                 {name: 'New York', code: 'NY'},
                 {name: 'Rome', code: 'RM'},
@@ -564,7 +585,7 @@ export default {
                 {name: 'United States', code: 'US'}
             ],
             groupedCities: [{
-                label: 'Germany', code: 'DE', 
+                label: 'Germany', code: 'DE',
                 items: [
                     {label: 'Berlin', value: 'Berlin'},
                     {label: 'Frankfurt', value: 'Frankfurt'},
@@ -573,7 +594,7 @@ export default {
                 ]
             },
             {
-                label: 'USA', code: 'US', 
+                label: 'USA', code: 'US',
                 items: [
                     {label: 'Chicago', value: 'Chicago'},
                     {label: 'Los Angeles', value: 'Los Angeles'},
@@ -582,16 +603,41 @@ export default {
                 ]
             },
             {
-                label: 'Japan', code: 'JP', 
+                label: 'Japan', code: 'JP',
                 items: [
                     {label: 'Kyoto', value: 'Kyoto'},
                     {label: 'Osaka', value: 'Osaka'},
                     {label: 'Tokyo', value: 'Tokyo'},
                     {label: 'Yokohama', value: 'Yokohama'}
                 ]
-            }]
+            }],
+            items: Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })),
+            lazyItems: Array.from({ length: 100000 })
         }
-    }
+    },
+    loadLazyTimeout: null,
+    methods: {
+        onLazyLoad(event) {
+            this.loading = true;
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //imitate delay of a backend call
+            this.loadLazyTimeout = setTimeout(() => {
+                const { first, last } = event;
+                const lazyItems = [...this.lazyItems];
+
+                for (let i = first; i < last; i++) {
+                    lazyItems[i] = { label: \`Item #\${i}\`, value: i };
+                }
+
+                this.lazyItems = lazyItems;
+                this.loading = false;
+            }, Math.random() * 1000 + 250);
+        }
+    },
 }
 <\\/script>
 
@@ -650,6 +696,18 @@ export default {
 
         <h5>Loading State</h5>
         <Dropdown placeholder="Loading..." loading></Dropdown>
+
+        <h5>Virtual Scroll (100000 Items)</h5>
+        <Dropdown v-model="selectedItem1" :options="items" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ itemSize: 31 }" placeholder="Select Item"></Dropdown>
+
+        <h5>Virtual Scroll (100000 Items) and Lazy</h5>
+        <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
+            <template v-slot:loader="{ options }">
+                <div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
+                    <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
+                </div>
+            </template>
+        </Dropdown>
     </div>
 </template>
 
@@ -662,6 +720,9 @@ export default {
         const selectedCity2 = ref();
         const selectedCountry = ref();
         const selectedGroupedCity = ref();
+        const selectedItem1 = ref();
+        const selectedItem2 = ref();
+        const loading = ref(false);
         const cities = ref([
             {name: 'New York', code: 'NY'},
             {name: 'Rome', code: 'RM'},
@@ -683,7 +744,7 @@ export default {
         ]);
         const groupedCities = ref([
             {
-                label: 'Germany', code: 'DE', 
+                label: 'Germany', code: 'DE',
                 items: [
                     {label: 'Berlin', value: 'Berlin'},
                     {label: 'Frankfurt', value: 'Frankfurt'},
@@ -692,7 +753,7 @@ export default {
                 ]
             },
             {
-                label: 'USA', code: 'US', 
+                label: 'USA', code: 'US',
                 items: [
                     {label: 'Chicago', value: 'Chicago'},
                     {label: 'Los Angeles', value: 'Los Angeles'},
@@ -701,7 +762,7 @@ export default {
                 ]
             },
             {
-                label: 'Japan', code: 'JP', 
+                label: 'Japan', code: 'JP',
                 items: [
                     {label: 'Kyoto', value: 'Kyoto'},
                     {label: 'Osaka', value: 'Osaka'},
@@ -711,7 +772,33 @@ export default {
             }
         ]);
 
-        return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities}
+        const items = ref(Array.from({ length: 100000 }, (_, i) => ({ label: \`Item #\${i}\`, value: i })));
+        const lazyItems = ref(Array.from({ length: 100000 }));
+
+        return { selectedCity1, selectedCity2, selectedCountry, selectedGroupedCity, cities, countries, groupedCities, selectedItem1, selectedItem2, loading, items, lazyItems}
+    },
+    loadLazyTimeout: null,
+    methods: {
+        onLazyLoad(event) {
+            this.loading = true;
+
+            if (this.loadLazyTimeout) {
+                clearTimeout(this.loadLazyTimeout);
+            }
+
+            //imitate delay of a backend call
+            this.loadLazyTimeout = setTimeout(() => {
+                const { first, last } = event;
+                const lazyItems = [...this.lazyItems];
+
+                for (let i = first; i < last; i++) {
+                    lazyItems[i] = { label: \`Item #\${i}\`, value: i };
+                }
+
+                this.lazyItems = lazyItems;
+                this.loading = false;
+            }, Math.random() * 1000 + 250);
+        }
     }
 }
 <\\/script>
@@ -733,4 +820,4 @@ export default {
         }
     }
 }
-</script>
\ No newline at end of file
+</script>