re-arrange components

Author: constantoduol

src/demo/App.js

@@ -6,12 +6,14 @@ import { JSONEditor } from "../lib";
 
 const App = () => (
   <div>
+    <h3>Using default styles</h3>
     <JSONEditor
       data={data}
       view="dual"
       collapsible
       onChange={this.onJsonChange}
     />
+    <h3>Using customized styles</h3>
     <JSONEditor
       data={data}
       view="dual"
@@ -25,26 +27,23 @@ const App = () => (
 const styles = {
   dualView: {
     display: "flex",
-    backgroundColor: "black",
   },
   jsonViewer: {
     borderLeft: "1px dashed white",
-    width: "40%",
-    margin: 5,
     lineHeight: 1.25,
+    width: "50%",
+    borderLeft: "1px solid lightgrey",
+    margin: 10,
   },
   jsonEditor: {
-    width: "60%",
+    width: "50%",
     fontSize: 12,
     fontFamily: "Lucida Console, monospace",
-    margin: 5,
     lineHeight: 1.25,
   },
   root: {
     fontSize: 12,
-    margin: 5,
     fontFamily: "Lucida Console, monospace",
-    backgroundColor: "black",
     lineHeight: 1.25,
     /*color: "#3E3D32"*/
   },
@@ -73,7 +72,7 @@ const styles = {
     padding: 2,
     fontFamily: "Lucida Console, monospace",
     fontSize: 12,
-    backgroundColor: "DimGray",
+    backgroundColor: "gray",
     color: "khaki",
     width: "200%",
   },
@@ -100,7 +99,7 @@ const styles = {
     fontSize: 12,
   },
   text: {
-    color: "khaki",
+    color: "black",
     fontSize: 12,
   },
   number: {
@@ -113,7 +112,7 @@ const styles = {
   },
   collapseIcon: {
     cursor: "pointer",
-    fontSize: 8,
+    fontSize: 10,
     color: "teal",
   },
 };

src/lib/JSONEditor.js

@@ -12,11 +12,11 @@ import {
   CollapseIcon,
   isNodeCollapsed,
   toggleNodeCollapsed,
-} from "./CollapseIcon";
+} from "./components/shared/CollapseIcon";
 
-import { Boolean } from "./components/Boolean";
-import { ParentLabel } from "./components/ParentLabel";
-import { Input } from "./components/Input";
+import Boolean from "./components/editor/Boolean";
+import ParentLabel from "./components/editor/ParentLabel";
+import Input from "./components/editor/Input";
 import { EDIT_KEY } from "./util";
 import { jsonEditorDefaultStyles } from "./util";
 import { getKey } from "./util";

src/lib/JSONViewer.js

@@ -4,11 +4,11 @@ import {
   CollapseIcon,
   isNodeCollapsed,
   toggleNodeCollapsed,
-} from "./CollapseIcon";
+} from "./components/shared/CollapseIcon";
 import { jsonViewerDefaultStyles } from "./util";
 import { getKey } from "./util";
-import { LabelAndValue } from "./components/LabelAndValue";
-import { ViewerLabel } from "./components/ViewerLabel";
+import LabelAndValue from "./components/viewer/LabelAndValue";
+import Label from "./components/viewer/Label";
 
 export default class JSONViewer extends React.Component {
   static defaultProps = {
@@ -352,7 +352,7 @@ export default class JSONViewer extends React.Component {
   getLabel(value, type, marginLeft, isLastSibling, currentKey, parentKeyPath) {
     const { styles } = this.props;
     return (
-      <ViewerLabel
+      <Label
         key={getKey("label", currentKey + value, parentKeyPath, marginLeft)}
         value={value}
         type={type}

src/lib/components/AddIcon.js src/lib/components/editor/AddIcon.jssrc/lib/components/AddIcon.js renamed to src/lib/components/editor/AddIcon.js

@@ -1,10 +1,12 @@
 import React from "react";
 
-export const AddIcon = (props) => {
+const AddIcon = (props) => {
   let { addElement, addTo, hidden, styles } = props;
   return (
     <span hidden={hidden} title="add item" onClick={() => addElement(addTo)}>
       <span style={styles.addButton}>&#43;</span>
     </span>
   );
 };
+
+export default AddIcon;

src/lib/components/Boolean.js src/lib/components/editor/Boolean.jssrc/lib/components/Boolean.js renamed to src/lib/components/editor/Boolean.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { merge } from "lodash";
-import { Label } from "./Label";
-import { RemoveIcon } from "./RemoveIcon";
+import Label from "./Label";
+import RemoveIcon from "./RemoveIcon";
 
-export class Boolean extends React.Component {
+export default class Boolean extends React.Component {
   constructor(props) {
     super(props);
     this.state = {

src/lib/components/Input.js src/lib/components/editor/Input.jssrc/lib/components/Input.js renamed to src/lib/components/editor/Input.js

@@ -1,11 +1,11 @@
 import React from "react";
 import { merge } from "lodash";
-import { RemoveIcon } from "./RemoveIcon";
-import { SaveIcon } from "./SaveIcon";
-import { EDIT_KEY } from "../util";
-import { Label } from "./Label";
+import RemoveIcon from "./RemoveIcon";
+import SaveIcon from "./SaveIcon";
+import { EDIT_KEY } from "../../util";
+import Label from "./Label";
 
-export class Input extends React.Component {
+export default class Input extends React.Component {
   constructor(props) {
     super(props);
     this.state = {

src/lib/components/Label.js src/lib/components/editor/Label.jssrc/lib/components/Label.js renamed to src/lib/components/editor/Label.js

@@ -1,8 +1,8 @@
 import React from "react";
-import { EDIT_KEY } from "../util";
+import { EDIT_KEY } from "../../util";
 import { merge } from "lodash";
 
-export const Label = (props) => {
+const Label = (props) => {
   let { marginLeft, value, onEditableInputChange, styles } = props;
   if (value === EDIT_KEY) {
     return (
@@ -19,3 +19,5 @@ export const Label = (props) => {
   let style = merge({ marginLeft }, styles.label);
   return <div style={style}>{value}</div>;
 };
+
+export default Label;

src/lib/components/ParentLabel.js src/lib/components/editor/ParentLabel.jssrc/lib/components/ParentLabel.js renamed to src/lib/components/editor/ParentLabel.js

@@ -1,9 +1,9 @@
 import React from "react";
 import { merge } from "lodash";
-import { AddIcon } from "./AddIcon";
-import { RemoveIcon } from "./RemoveIcon";
+import AddIcon from "./AddIcon";
+import RemoveIcon from "./RemoveIcon";
 
-export class ParentLabel extends React.Component {
+export default class ParentLabel extends React.Component {
   constructor(props) {
     super(props);
     this.state = {

src/lib/components/RemoveIcon.js src/lib/components/editor/RemoveIcon.jssrc/lib/components/RemoveIcon.js renamed to src/lib/components/editor/RemoveIcon.js

@@ -1,6 +1,6 @@
 import React from "react";
 
-export const RemoveIcon = (props) => {
+const RemoveIcon = (props) => {
   let { removeElement, removeFrom, removeKey, hidden, styles } = props;
   return (
     <span
@@ -12,3 +12,5 @@ export const RemoveIcon = (props) => {
     </span>
   );
 };
+
+export default RemoveIcon;

src/lib/components/SaveIcon.js src/lib/components/editor/SaveIcon.jssrc/lib/components/SaveIcon.js renamed to src/lib/components/editor/SaveIcon.js

@@ -1,10 +1,12 @@
 import React from "react";
 
-export const SaveIcon = (props) => {
+const SaveIcon = (props) => {
   let { saveElement, saveIn, saveKey, styles } = props;
   return (
     <span title="save item" onClick={() => saveElement(saveIn, saveKey)}>
       <span style={styles.saveButton}>&#10003;</span>
     </span>
   );
 };
+
+export default SaveIcon;