code refactor

src/components/desktop/ColorSelect.vue

@@ -40,6 +40,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getColorsInRows } from '@/lib/color.js';
 import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
 
 import {
@@ -71,20 +72,7 @@ export default {
     },
     computed: {
         allColorRows() {
-            const ret = [];
+            return getColorsInRows(this.allColorInfos, this.itemPerRow);
-            let rowCount = -1;
-
-            for (let i = 0; i < this.allColorInfos.length; i++) {
-                if (i % this.itemPerRow === 0) {
-                    ret[++rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    color: this.allColorInfos[i]
-                });
-            }
-
-            return ret;
         },
         color: {
             get: function () {

src/components/desktop/IconSelect.vue

@@ -38,6 +38,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getIconsInRows } from '@/lib/icon.js';
 import { scrollToSelectedItem } from '@/lib/ui.desktop.js';
 
 import {
@@ -69,30 +70,7 @@ export default {
     },
     computed: {
         allIconRows() {
-            const ret = [];
+            return getIconsInRows(this.allIconInfos, this.itemPerRow);
-            let rowCount = 0;
-
-            for (let iconInfoId in this.allIconInfos) {
-                if (!Object.prototype.hasOwnProperty.call(this.allIconInfos, iconInfoId)) {
-                    continue;
-                }
-
-                const iconInfo = this.allIconInfos[iconInfoId];
-
-                if (!ret[rowCount]) {
-                    ret[rowCount] = [];
-                } else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
-                    rowCount++;
-                    ret[rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    id: iconInfoId,
-                    icon: iconInfo.icon
-                });
-            }
-
-            return ret;
         },
         icon: {
             get: function () {

src/components/mobile/ColorSelectionSheet.vue

@@ -30,6 +30,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getColorsInRows } from '@/lib/color.js';
 import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
@@ -53,20 +54,7 @@ export default {
     },
     computed: {
         allColorRows() {
-            const ret = [];
+            return getColorsInRows(this.allColorInfos, this.itemPerRow);
-            let rowCount = -1;
-
-            for (let i = 0; i < this.allColorInfos.length; i++) {
-                if (i % this.itemPerRow === 0) {
-                    ret[++rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    color: this.allColorInfos[i]
-                });
-            }
-
-            return ret;
         }
     },
     methods: {

src/components/mobile/IconSelectionSheet.vue

@@ -30,6 +30,7 @@
 
 <script>
 import { arrayContainsFieldvalue } from '@/lib/common.js';
+import { getIconsInRows } from '@/lib/icon.js';
 import { scrollToSelectedItem } from '@/lib/ui.mobile.js';
 
 export default {
@@ -54,30 +55,7 @@ export default {
     },
     computed: {
         allIconRows() {
-            const ret = [];
+            return getIconsInRows(this.allIconInfos, this.itemPerRow);
-            let rowCount = 0;
-
-            for (let iconInfoId in this.allIconInfos) {
-                if (!Object.prototype.hasOwnProperty.call(this.allIconInfos, iconInfoId)) {
-                    continue;
-                }
-
-                const iconInfo = this.allIconInfos[iconInfoId];
-
-                if (!ret[rowCount]) {
-                    ret[rowCount] = [];
-                } else if (ret[rowCount] && ret[rowCount].length >= this.itemPerRow) {
-                    rowCount++;
-                    ret[rowCount] = [];
-                }
-
-                ret[rowCount].push({
-                    id: iconInfoId,
-                    icon: iconInfo.icon
-                });
-            }
-
-            return ret;
         },
         heightClass() {
             if (this.allIconRows.length > 10) {

src/lib/color.js

@@ -0,0 +1,16 @@
+export function getColorsInRows(allColorInfos, itemPerRow) {
+    const ret = [];
+    let rowCount = -1;
+
+    for (let i = 0; i < allColorInfos.length; i++) {
+        if (i % itemPerRow === 0) {
+            ret[++rowCount] = [];
+        }
+
+        ret[rowCount].push({
+            color: allColorInfos[i]
+        });
+    }
+
+    return ret;
+}

src/lib/icon.js

@@ -0,0 +1,26 @@
+export function getIconsInRows(allIconInfos, itemPerRow) {
+    const ret = [];
+    let rowCount = 0;
+
+    for (let iconInfoId in allIconInfos) {
+        if (!Object.prototype.hasOwnProperty.call(allIconInfos, iconInfoId)) {
+            continue;
+        }
+
+        const iconInfo = allIconInfos[iconInfoId];
+
+        if (!ret[rowCount]) {
+            ret[rowCount] = [];
+        } else if (ret[rowCount] && ret[rowCount].length >= itemPerRow) {
+            rowCount++;
+            ret[rowCount] = [];
+        }
+
+        ret[rowCount].push({
+            id: iconInfoId,
+            icon: iconInfo.icon
+        });
+    }
+
+    return ret;
+}