change the geo right panel

src/editor/components/components/AdvancedComponents.js

@@ -0,0 +1,44 @@
+import { useState } from 'react';
+import PropTypes from 'prop-types';
+import Component from './Component';
+import DEFAULT_COMPONENTS from './DefaultComponents';
+import { Button } from '../components';
+
+const AdvancedComponents = ({ entity }) => {
+  const [showAdvanced, setShowAdvanced] = useState(false);
+
+  const components = entity ? entity.components : {};
+  const definedComponents = Object.keys(components).filter((key) => {
+    console.log(key);
+    return DEFAULT_COMPONENTS.indexOf(key) === -1;
+  });
+
+  const toggleAdvanced = () => {
+    setShowAdvanced(!showAdvanced);
+  };
+
+  return (
+    <div className="advanced-components">
+      <Button variant="toolbtn" onClick={toggleAdvanced}>
+        {showAdvanced ? 'Hide Advanced' : 'Show Advanced'}
+      </Button>
+      {showAdvanced &&
+        definedComponents.sort().map((key) => (
+          <div key={key} className={'details'}>
+            <Component
+              isCollapsed={definedComponents.length > 2}
+              component={components[key]}
+              entity={entity}
+              name={key}
+            />
+          </div>
+        ))}
+    </div>
+  );
+};
+
+AdvancedComponents.propTypes = {
+  entity: PropTypes.object
+};
+
+export default AdvancedComponents;

src/editor/components/components/CommonComponents.js

@@ -1,27 +1,20 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputWidget } from '../widgets';
 import DEFAULT_COMPONENTS from './DefaultComponents';
 import PropertyRow from './PropertyRow';
-import Collapsible from '../Collapsible';
-import classnames from 'classnames';
-import {
-  getEntityClipboardRepresentation,
-  printEntity
-} from '../../lib/entity';
+import { getEntityClipboardRepresentation } from '../../lib/entity';
 import Events from '../../lib/Events';
 import Clipboard from 'clipboard';
 import { saveBlob } from '../../lib/utils';
-import GLTFIcon from '../../../../ui_assets/gltf.svg';
 
 // @todo Take this out and use updateEntity?
-function changeId(componentName, value) {
-  var entity = AFRAME.INSPECTOR.selectedEntity;
-  if (entity.id !== value) {
-    entity.id = value;
-    Events.emit('entityidchange', entity);
-  }
-}
+// function changeId(componentName, value) {
+//   var entity = AFRAME.INSPECTOR.selectedEntity;
+//   if (entity.id !== value) {
+//     entity.id = value;
+//     Events.emit('entityidchange', entity);
+//   }
+// }
 
 export default class CommonComponents extends React.Component {
   static propTypes = {
@@ -104,62 +97,39 @@ export default class CommonComponents extends React.Component {
     if (!entity) {
       return <div />;
     }
-    const entityButtons = (
-      <div>
-        <a
-          title="Export entity to GLTF"
-          className="gltfIcon"
-          onClick={(event) => {
-            this.exportToGLTF();
-            event.preventDefault();
-            event.stopPropagation();
-          }}
-        >
-          <img src={GLTFIcon} />
-        </a>
-        <a
-          title="Copy entity HTML to clipboard"
-          data-action="copy-entity-to-clipboard"
-          className="button fa fa-clipboard"
-        />
-      </div>
-    );
+    // const entityButtons = (
+    //   <div>
+    //     <a
+    //       title="Export entity to GLTF"
+    //       className="gltfIcon"
+    //       onClick={(event) => {
+    //         this.exportToGLTF();
+    //         event.preventDefault();
+    //         event.stopPropagation();
+    //       }}
+    //     >
+    //       <img src={GLTFIcon} />
+    //     </a>
+    //     <a
+    //       title="Copy entity HTML to clipboard"
+    //       data-action="copy-entity-to-clipboard"
+    //       className="button fa fa-clipboard"
+    //     />
+    //   </div>
+    // );
 
-    const classNameID = classnames({
-      propertyRow: true,
-      hide: true
-    });
+    // const classNameID = classnames({
+    //   propertyRow: true,
+    //   hide: true
+    // });
 
-    const classNameClass = classnames({
-      propertyRow: true,
-      hide: true
-    });
+    // const classNameClass = classnames({
+    //   propertyRow: true,
+    //   hide: true
+    // });
 
     return (
-      <Collapsible id="componentEntityHeader" className="commonComponents">
-        <div className="collapsible-header">
-          {printEntity(entity)}
-          {entityButtons}
-        </div>
-        <div className="collapsible-content">
-          <div className={classNameID}>
-            <label htmlFor="id" className="text">
-              ID
-            </label>
-            <InputWidget
-              onChange={changeId}
-              entity={entity}
-              name="id"
-              value={entity.id}
-            />
-          </div>
-          <div className={classNameClass}>
-            <label className="text">class</label>
-            <span>{entity.getAttribute('class')}</span>
-          </div>
-          {this.renderCommonAttributes()}
-        </div>
-      </Collapsible>
+      <div className="collapsible-content">{this.renderCommonAttributes()}</div>
     );
   }
 }

src/editor/components/components/ComponentsContainer.js

@@ -1,7 +1,5 @@
-import AddComponent from './AddComponent';
 import CommonComponents from './CommonComponents';
-import Component from './Component';
-import DEFAULT_COMPONENTS from './DefaultComponents';
+import AdvancedComponents from './AdvancedComponents';
 import PropTypes from 'prop-types';
 import React from 'react';
 import Events from '../../lib/Events';
@@ -29,30 +27,12 @@ export default class ComponentsContainer extends React.Component {
   }
 
   render() {
-    const entity = this.props.entity;
-    const components = entity ? entity.components : {};
-    const definedComponents = Object.keys(components).filter((key) => {
-      return DEFAULT_COMPONENTS.indexOf(key) === -1;
-    });
-    const renderedComponents = definedComponents.sort().map((key, idx) => {
-      return (
-        <div key={key} className={'details'}>
-          <Component
-            isCollapsed={definedComponents.length > 2}
-            component={components[key]}
-            entity={entity}
-            key={key}
-            name={key}
-          />
-        </div>
-      );
-    });
+    const { entity } = this.props;
 
     return (
       <div className="components">
         <CommonComponents entity={entity} />
-        <AddComponent entity={entity} />
-        {renderedComponents}
+        <AdvancedComponents entity={entity} />
       </div>
     );
   }

src/editor/components/components/GeoSidebar.js

@@ -0,0 +1,57 @@
+import PropTypes from 'prop-types';
+import { Button } from '../components';
+import Events from '../../lib/Events';
+import AdvancedComponents from './AdvancedComponents';
+import PropertyRow from './PropertyRow';
+
+const GeoSidebar = ({ entity }) => {
+  const openGeoModal = () => {
+    Events.emit('opengeomodal', { entity });
+  };
+
+  // Check if entity and its components exist
+  const component = entity?.components?.['street-geo'];
+
+  return (
+    <div className="geo-sidebar">
+      <div className="geo-controls">
+        <div className="details">
+          {component && component.schema && component.data && (
+            <PropertyRow
+              key="maps"
+              name="maps"
+              label="Map Source"
+              schema={component.schema['maps']}
+              data={component.data['maps']}
+              componentname="street-geo"
+              isSingle={false}
+              entity={entity}
+            />
+          )}
+          <div className="propertyRow">
+            {entity && entity.components && entity.components['street-geo'] ? (
+              <>
+                <Button variant="toolbtn" onClick={openGeoModal}>
+                  Change Location
+                </Button>
+                <AdvancedComponents entity={entity} />
+              </>
+            ) : (
+              <div>
+                <Button variant="toolbtn" onClick={openGeoModal}>
+                  Set Location
+                </Button>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+GeoSidebar.propTypes = {
+  entity: PropTypes.object.isRequired
+};
+
+export default GeoSidebar;

src/editor/components/components/PropertyRow.js

@@ -26,6 +26,7 @@ export default class PropertyRow extends React.Component {
     entity: PropTypes.object.isRequired,
     isSingle: PropTypes.bool.isRequired,
     name: PropTypes.string.isRequired,
+    label: PropTypes.string,
     schema: PropTypes.object.isRequired
   };
 
@@ -127,7 +128,7 @@ export default class PropertyRow extends React.Component {
     return (
       <div className={className}>
         <label htmlFor={this.id} className="text" title={title}>
-          {props.name}
+          {props.label || props.name}
         </label>
         {this.getWidget(props.schema.type)}
       </div>