From 3a42f39d40a6e967205a21b1093b536eaae4ebe1 Mon Sep 17 00:00:00 2001
From: Gytis Vinclovas <gytis.vinclovas@gmail.com>
Date: Thu, 18 Jul 2019 12:46:39 +0300
Subject: [PATCH] Displays proper input name. Filters out fields  from other
 which have group id. Added some margin to group tabs to make them look
 "better".

---
 addons/ondevice-knobs/src/GroupTabs.js | 1 +
 addons/ondevice-knobs/src/PropField.js | 3 ++-
 addons/ondevice-knobs/src/panel.js     | 5 +++++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/addons/ondevice-knobs/src/GroupTabs.js b/addons/ondevice-knobs/src/GroupTabs.js
index d6632c2a176..b1e38d7ff19 100644
--- a/addons/ondevice-knobs/src/GroupTabs.js
+++ b/addons/ondevice-knobs/src/GroupTabs.js
@@ -14,6 +14,7 @@ class GroupTabs extends Component {
     return (
       <TouchableOpacity
         style={{
+          marginTop: 5,
           marginRight: 15,
           paddingBottom: 10,
         }}
diff --git a/addons/ondevice-knobs/src/PropField.js b/addons/ondevice-knobs/src/PropField.js
index 3fe8f3a3852..3b053b5a180 100644
--- a/addons/ondevice-knobs/src/PropField.js
+++ b/addons/ondevice-knobs/src/PropField.js
@@ -19,7 +19,7 @@ const PropField = ({ onChange, onPress, knob }) => {
             fontWeight: 'bold',
           }}
         >
-          {`${knob.name}`}
+          {`${knob.label || knob.name}`}
         </Text>
       ) : null}
       <InputType knob={knob} onChange={onChange} onPress={onPress} />
@@ -30,6 +30,7 @@ const PropField = ({ onChange, onPress, knob }) => {
 PropField.propTypes = {
   knob: PropTypes.shape({
     name: PropTypes.string,
+    label: PropTypes.string,
     value: PropTypes.any,
     hideLabel: PropTypes.bool,
     type: PropTypes.oneOf([
diff --git a/addons/ondevice-knobs/src/panel.js b/addons/ondevice-knobs/src/panel.js
index e8266207887..3a87df68534 100644
--- a/addons/ondevice-knobs/src/panel.js
+++ b/addons/ondevice-knobs/src/panel.js
@@ -118,6 +118,11 @@ export default class Panel extends React.Component {
         render: () => <Text id={DEFAULT_GROUP_ID}>{DEFAULT_GROUP_ID}</Text>,
         title: DEFAULT_GROUP_ID,
       };
+
+      if (groupId === DEFAULT_GROUP_ID) {
+        knobsArray = knobsArray.filter(key => !knobs[key].groupId);
+      }
+
       if (groupId !== DEFAULT_GROUP_ID) {
         knobsArray = knobsArray.filter(key => knobs[key].groupId === groupId);
       }