Clean up Component.js code

src/components/components/Component.js

@@ -6,6 +6,7 @@ import PropertyRow from './PropertyRow';
 import Collapsible from '../Collapsible';
 import copy from 'clipboard-copy';
 import { getComponentClipboardRepresentation } from '../../lib/entity';
+import { shouldShowProperty } from '../../lib/utils';
 import Events from '../../lib/Events';
 
 const isSingleProperty = AFRAME.schema.isSingleProperty;
@@ -94,30 +95,7 @@ export default class Component extends React.Component {
 
     return Object.keys(componentData.schema)
       .sort()
-      .filter((propertyName) => {
-        if (!componentData.schema[propertyName].if) {
-          return true;
-        }
-        let showProperty = true;
-        for (const [conditionKey, conditionValue] of Object.entries(
-          componentData.schema[propertyName].if
-        )) {
-          if (Array.isArray(conditionValue)) {
-            if (
-              conditionValue.indexOf(componentData.data[conditionKey]) === -1
-            ) {
-              showProperty = false;
-              break;
-            }
-          } else {
-            if (conditionValue !== componentData.data[conditionKey]) {
-              showProperty = false;
-              break;
-            }
-          }
-        }
-        return showProperty;
-      })
+      .filter((propertyName) => shouldShowProperty(propertyName, componentData))
       .map((propertyName) => (
         <PropertyRow
           key={propertyName}
@@ -132,21 +110,13 @@ export default class Component extends React.Component {
   };
 
   render() {
-    let componentName = this.props.name;
-    let subComponentName = '';
-    if (componentName.indexOf('__') !== -1) {
-      subComponentName = componentName;
-      componentName = componentName.substr(0, componentName.indexOf('__'));
-    }
+    const componentName = this.props.name;
 
     return (
       <Collapsible collapsed={this.props.isCollapsed}>
         <div className="componentHeader collapsible-header">
-          <span
-            className="componentTitle"
-            title={subComponentName || componentName}
-          >
-            <span>{subComponentName || componentName}</span>
+          <span className="componentTitle" title={componentName}>
+            <span>{componentName}</span>
           </span>
           <div className="componentHeaderActions">
             <a
@@ -158,7 +128,7 @@ export default class Component extends React.Component {
                 copy(
                   getComponentClipboardRepresentation(
                     this.state.entity,
-                    (subComponentName || componentName).toLowerCase()
+                    componentName.toLowerCase()
                   )
                 );
               }}

src/lib/utils.js

@@ -103,3 +103,44 @@ export function areVectorsEqual(v1, v2) {
     Object.is(v1.w, v2.w)
   );
 }
+
+/**
+ * Check if a property should be shown in the UI based on the `if` object
+ * condition included in the schema for the property.
+ *
+ * When more than one property is used in the object, this applies a logical AND.
+ * When the value is an array, it means one of the entries in this array.
+ *
+ * Example in the light component:
+ * ```js
+ * {
+ *   penumbra: {default: 0, min: 0, max: 1, if: {type: ['spot']}},
+ * }
+ * ```
+ *
+ * @param {string} propertyName - The name of the property
+ * @param {Component} component - The component instance
+ * @returns {boolean} Whether the property should be shown
+ */
+export function shouldShowProperty(propertyName, component) {
+  if (!component.schema[propertyName].if) {
+    return true;
+  }
+  let showProperty = true;
+  for (const [conditionKey, conditionValue] of Object.entries(
+    component.schema[propertyName].if
+  )) {
+    if (Array.isArray(conditionValue)) {
+      if (conditionValue.indexOf(component.data[conditionKey]) === -1) {
+        showProperty = false;
+        break;
+      }
+    } else {
+      if (conditionValue !== component.data[conditionKey]) {
+        showProperty = false;
+        break;
+      }
+    }
+  }
+  return showProperty;
+}