Feature/search

.gitignore

@@ -6,4 +6,5 @@ npm-debug.log
 /debug
 /node_modules
 
-.nyc_output
+.nyc_output
+.idea

dev-server/src/index.js

@@ -52,6 +52,7 @@ ReactDom.render(
                 return false;
             }}
             defaultValue=""
+            searchable={true}
         />
 
         <br />

src/js/components/ArrayGroup.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import Theme from './../themes/getStyle';
 
-import VariableMeta from './VariableMeta';
-import ObjectName from './ObjectName';
 import ObjectComponent from './DataTypes/Object';
 
 //icons
 import { CollapsedIcon, ExpandedIcon } from './ToggleIcons';
+import { ObjectName } from './ObjectName';
+import { VariableMeta } from './VariableMeta';
 
 //single indent is 5px
 const SINGLE_INDENT = 5;
 
-export default class extends React.PureComponent {
+export class ArrayGroup extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {

src/js/components/CopyToClipboard.js

@@ -8,7 +8,7 @@ import { Clippy } from './icons';
 //theme
 import Theme from './../themes/getStyle';
 
-export default class extends React.PureComponent {
+export class CopyToClipboard extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {

src/js/components/DataTypes/Boolean.js

@@ -1,18 +1,20 @@
 import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
 
 //theme
 import Theme from './../../themes/getStyle';
+import { DataTypeLabel } from './DataTypeLabel';
 
-export default class extends React.PureComponent {
+export class JsonBoolean extends React.PureComponent {
     render() {
         const type_name = 'bool';
         const { props } = this;
 
         return (
             <div {...Theme(props.theme, 'boolean')}>
                 <DataTypeLabel type_name={type_name} {...props} />
-                {props.value ? 'true' : 'false'}
+                <span style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>
+                    {props.value ? 'true' : 'false'}
+                </span>
             </div>
         );
     }

src/js/components/DataTypes/DataTypeLabel.js

@@ -3,7 +3,7 @@ import React from 'react';
 //theme
 import Theme from './../../themes/getStyle';
 
-export default class extends React.PureComponent {
+export class DataTypeLabel extends React.PureComponent {
     render() {
         const { rjvId, type_name, displayDataTypes, theme } = this.props;
         if (displayDataTypes) {

src/js/components/DataTypes/DataTypes.js

@@ -1,11 +1 @@
-export { default as JsonBoolean } from './Boolean';
-export { default as JsonDate } from './Date';
-export { default as JsonFloat } from './Float';
-export { default as JsonFunction } from './Function';
-export { default as JsonNan } from './Nan';
-export { default as JsonNull } from './Null';
-export { default as JsonInteger } from './Integer';
 export { default as JsonObject } from './Object';
-export { default as JsonRegexp } from './Regexp';
-export { default as JsonString } from './String';
-export { default as JsonUndefined } from './Undefined';

src/js/components/DataTypes/Date.js

@@ -1,10 +1,10 @@
 import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
 
 //theme
 import Theme from './../../themes/getStyle';
+import { DataTypeLabel } from './DataTypeLabel';
 
-export default class extends React.PureComponent {
+export class JsonDate extends React.PureComponent {
     render() {
         const type_name = 'date';
         const { props } = this;
@@ -19,7 +19,8 @@ export default class extends React.PureComponent {
         return (
             <div {...Theme(props.theme, 'date')}>
                 <DataTypeLabel type_name={type_name} {...props} />
-                <span class="date-value" {...Theme(props.theme, 'date-value')}>
+                <span class="date-value" {...Theme(props.theme, 'date-value')}
+                      style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>
                     {props.value.toLocaleTimeString('en-us', display_options)}
                 </span>
             </div>

src/js/components/DataTypes/Float.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
 
 //theme
 import Theme from './../../themes/getStyle';
+import { DataTypeLabel } from './DataTypeLabel';
 
-export default class extends React.PureComponent {
+export class JsonFloat extends React.PureComponent {
     render() {
         const type_name = 'float';
         const { props } = this;
         return (
             <div {...Theme(props.theme, 'float')}>
                 <DataTypeLabel type_name={type_name} {...props} />
-                {this.props.value}
+                <span style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>{this.props.value} </span>
             </div>
         );
     }

src/js/components/DataTypes/Function.js

@@ -1,13 +1,13 @@
 import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
 
 //theme
 import Theme from './../../themes/getStyle';
 
 //attribute store for storing collapsed state
 import AttributeStore from './../../stores/ObjectAttributes';
+import { DataTypeLabel } from './DataTypeLabel';
 
-export default class extends React.PureComponent {
+export class JsonFunction extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {

src/js/components/DataTypes/Integer.js

@@ -1,17 +1,17 @@
 import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
 
 //theme
 import Theme from './../../themes/getStyle';
+import { DataTypeLabel } from './DataTypeLabel';
 
-export default class extends React.PureComponent {
+export class JsonInteger extends React.PureComponent {
     render() {
         const type_name = 'int';
         const { props } = this;
         return (
             <div {...Theme(props.theme, 'integer')}>
                 <DataTypeLabel type_name={type_name} {...props} />
-                {this.props.value}
+                <span style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>{this.props.value}</span>
             </div>
         );
     }

src/js/components/DataTypes/Nan.js

@@ -3,8 +3,11 @@ import React from 'react';
 //theme
 import Theme from './../../themes/getStyle';
 
-export default class extends React.PureComponent {
+export class JsonNan extends React.PureComponent {
     render() {
-        return <div {...Theme(this.props.theme, 'nan')}>NaN</div>;
+        const { props } = this;
+        return <div {...Theme(this.props.theme, 'nan')}>
+            <span style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>NaN</span>
+        </div>;
     }
 }

src/js/components/DataTypes/Null.js

@@ -3,8 +3,11 @@ import React from 'react';
 //theme
 import Theme from './../../themes/getStyle';
 
-export default class extends React.PureComponent {
+export class JsonNull extends React.PureComponent {
     render() {
-        return <div {...Theme(this.props.theme, 'null')}>NULL</div>;
+        const { props } = this;
+        return <div {...Theme(this.props.theme, 'null')}>
+            <span style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>NULL</span>
+        </div>;
     }
 }

src/js/components/DataTypes/Object.js

@@ -5,11 +5,6 @@ import { toType } from './../../helpers/util';
 //data type components
 import { JsonObject } from './DataTypes';
 
-import VariableEditor from './../VariableEditor';
-import VariableMeta from './../VariableMeta';
-import ArrayGroup from './../ArrayGroup';
-import ObjectName from './../ObjectName';
-
 //attribute store
 import AttributeStore from './../../stores/ObjectAttributes';
 
@@ -18,6 +13,10 @@ import { CollapsedIcon, ExpandedIcon } from './../ToggleIcons';
 
 //theme
 import Theme from './../../themes/getStyle';
+import { ArrayGroup } from '../ArrayGroup';
+import { ObjectName } from '../ObjectName';
+import { VariableMeta } from '../VariableMeta';
+import { VariableEditor } from '../VariableEditor';
 
 //increment 1 with each nested object & array
 const DEPTH_INCREMENT = 1;
@@ -48,12 +47,13 @@ class RjvObject extends React.PureComponent {
                 }) === false) &&
             //initialize closed if object has no items
             size !== 0;
+        const path = props.namespace.join('.');
         const state = {
             expanded: AttributeStore.get(
                 props.rjvId,
                 props.namespace,
                 'expanded',
-                expanded
+                expanded ? expanded :props.paths?.some(name => name.includes(path))
             ),
             object_type: props.type === 'array' ? 'array' : 'object',
             parent_type: props.type === 'array' ? 'array' : 'object',

src/js/components/DataTypes/Regexp.js

@@ -1,17 +1,18 @@
 import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
-
 //theme
 import Theme from './../../themes/getStyle';
+import { DataTypeLabel } from './DataTypeLabel';
 
-export default class extends React.PureComponent {
+export class JsonRegexp extends React.PureComponent {
     render() {
         const type_name = 'regexp';
         const { props } = this;
         return (
             <div {...Theme(props.theme, 'regexp')}>
                 <DataTypeLabel type_name={type_name} {...props} />
-                {this.props.value.toString()}
+                <span style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>
+                    {this.props.value.toString()}
+                </span>
             </div>
         );
     }

src/js/components/DataTypes/String.js

@@ -1,14 +1,14 @@
 import React from 'react';
-import DataTypeLabel from './DataTypeLabel';
-import { toType } from './../../helpers/util';
+import { toType } from '../../helpers/util';
 
 //theme
 import Theme from './../../themes/getStyle';
 
 //attribute store for storing collapsed state
 import AttributeStore from './../../stores/ObjectAttributes';
+import { DataTypeLabel } from './DataTypeLabel';
 
-export default class extends React.PureComponent {
+export class JsonString extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {
@@ -65,6 +65,7 @@ export default class extends React.PureComponent {
                     class="string-value"
                     {...style}
                     onClick={this.toggleCollapsed}
+                    style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}
                 >
                     "{value}"
                 </span>

src/js/components/DataTypes/Undefined.js

@@ -3,8 +3,13 @@ import React from 'react';
 //theme
 import Theme from './../../themes/getStyle';
 
-export default class extends React.PureComponent {
+export class JsonUndefined extends React.PureComponent {
     render() {
-        return <div {...Theme(this.props.theme, 'undefined')}>undefined</div>;
+        const { props } = this;
+        return <div {...Theme(this.props.theme, 'undefined')}>
+            <span style={{backgroundColor: props.isCurrent ? 'orange' : props.highlight ?  'yellow' : 'inherit'}}>
+                undefined
+            </span>
+        </div>;
     }
 }

src/js/components/JsonViewer.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { ArrayGroup } from './ArrayGroup';
 import JsonObject from './DataTypes/Object';
-import ArrayGroup from './ArrayGroup';
 
-export default class extends React.PureComponent {
+export class JsonViewer extends React.PureComponent {
     render = () => {
         const { props } = this;
         const namespace = [props.name];

src/js/components/ObjectKeyModal/AddKeyRequest.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import dispatcher from './../../helpers/dispatcher';
 import ObjectAttributes from './../../stores/ObjectAttributes';
-import ObjectKeyModal from './ObjectKeyModal';
 
 //global theme
 import Theme from './../../themes/getStyle';
+import { ObjectKeyModal } from './ObjectKeyModal';
 
 //this input appears when adding a new value to an object
-export default class extends React.PureComponent {
+export class AddKeyRequest extends React.PureComponent {
     render() {
         const { active, theme, rjvId } = this.props;
 

src/js/components/ObjectKeyModal/ObjectKeyModal.js

@@ -7,7 +7,7 @@ import { CheckCircle, Add as Cancel } from './../icons';
 import Theme from './../../themes/getStyle';
 
 //this input appears when adding a new value to an object
-export default class extends React.PureComponent {
+export class ObjectKeyModal extends React.PureComponent {
     constructor(props) {
         super(props);
         this.state = {

src/js/components/ObjectName.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Theme from './../themes/getStyle';
 
-export default function getObjectName(props) {
+export function ObjectName(props) {
     const {
         parent_type,
         namespace,

src/js/components/ValidationFailure.js

@@ -8,7 +8,7 @@ import { Add as Clear } from './icons';
 import Theme from './../themes/getStyle';
 
 //this input appears when adding a new value to an object
-export default class extends React.PureComponent {
+export class ValidationFailure extends React.PureComponent {
     render() {
         const { message, active, theme, rjvId } = this.props;