Reuse the sort by key function for sub elements in DataField component (#375)

Author: paparent

src/devtools/components/DataField.vue

@@ -39,7 +39,8 @@ import {
   UNDEFINED,
   INFINITY,
   NAN,
-  isPlainObject
+  isPlainObject,
+  sortByKey
 } from 'src/util'
 
 const rawTypeRE = /^\[object (\w+)]$/
@@ -125,11 +126,10 @@ export default {
           value: item
         }))
       } else if (typeof value === 'object') {
-        value = Object.keys(value).map(key => ({
+        value = sortByKey(Object.keys(value).map(key => ({
           key,
           value: value[key]
-        }))
-        value = value.slice().sort((a, b) => a.key > b.key)
+        })))
       }
       return value
     },

src/devtools/views/components/ComponentInspector.vue

@@ -33,7 +33,7 @@
 import ScrollPane from 'components/ScrollPane.vue'
 import ActionHeader from 'components/ActionHeader.vue'
 import StateInspector from 'components/StateInspector.vue'
-import { searchDeepInObject } from 'src/util'
+import { searchDeepInObject, sortByKey } from 'src/util'
 import groupBy from 'lodash.groupby'
 
 const isChrome = typeof chrome !== 'undefined' && chrome.devtools
@@ -57,7 +57,7 @@ export default {
       return this.target.id != null
     },
     filteredState () {
-      return groupBy(sort(this.target.state.filter(el => {
+      return groupBy(sortByKey(this.target.state.filter(el => {
         return searchDeepInObject({
           [el.key]: el.value
         }, this.filter)
@@ -77,12 +77,4 @@ export default {
     }
   }
 }
-
-function sort (state) {
-  return state && state.slice().sort((a, b) => {
-    if (a.key < b.key) return -1
-    if (a.key > b.key) return 1
-    return 0
-  })
-}
 </script>

src/util.js

@@ -155,3 +155,11 @@ function searchInArray (arr, searchTerm) {
   }
   return found
 }
+
+export function sortByKey (state) {
+  return state && state.slice().sort((a, b) => {
+    if (a.key < b.key) return -1
+    if (a.key > b.key) return 1
+    return 0
+  })
+}