Refactor of CRUD elements.

package.json

@@ -104,14 +104,15 @@
     "font-awesome": "https://github.com/FortAwesome/Font-Awesome/archive/v4.4.0.tar.gz",
     "get-object-path": "azer/get-object-path#74eb42de0cfd02c14ffdd18552f295aba723d394",
     "hadron-action": "^0.1.0",
-    "hadron-app-registry": "^3.5.0",
+    "hadron-app-registry": "^4.0.0",
     "hadron-auto-update-manager": "^0.0.12",
     "hadron-compile-cache": "^0.3.0",
     "hadron-document": "^1.0.0",
     "hadron-ipc": "^0.0.7",
     "hadron-module-cache": "^0.0.3",
     "hadron-package-manager": "0.2.0",
-    "hadron-react-bson": "^0.0.1",
+    "hadron-react-bson": "^0.0.2",
+    "hadron-react-buttons": "^0.0.2",
     "hadron-reflux-store": "^0.0.2",
     "hadron-style-manager": "0.0.1",
     "hadron-type-checker": "^0.15.0",

src/app/migrations/1.5.0-beta.5.js

@@ -6,6 +6,8 @@ const ConnectionCollection = require('../models/connection-collection');
  * This migration removes and then re-saves all connections in order to trigger
  * the secureCondition of the "splice" storage backend again, which wasn't correctly
  * working in 1.4.1, see COMPASS-426.
+ *
+ * @param {Function} done - The done callback.
  */
 function rewriteStoredConnections(done) {
   debug('migration: rewriteStoredConnections');

src/internal-packages/crud/README.md

@@ -52,7 +52,7 @@ const Document = app.appRegistry.getComponent('CRUD.Document');
 
 class MyComponent extends React.Component {
   render() {
-    return (<Document doc={this.props.document} preExpanded />);
+    return (<Document doc={this.props.document} expandAll />);
   }
 }
 ```

src/internal-packages/crud/lib/component/document-actions.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const IconButton = require('hadron-app-registry').IconButton;
+const { IconButton } = require('hadron-react-buttons');
 
 /**
  * Component for actions on the document.

src/internal-packages/crud/lib/component/document-footer.jsx

@@ -1,6 +1,6 @@
 const React = require('react');
 const Element = require('hadron-document').Element;
-const TextButton = require('hadron-app-registry').TextButton;
+const { TextButton } = require('hadron-react-buttons');
 
 /**
  * The progress mode.

src/internal-packages/crud/lib/component/document.jsx

@@ -19,7 +19,7 @@ class Document extends React.Component {
     return (
       <ReadonlyDocument
         doc={this.props.doc}
-        preExpanded={this.props.preExpanded} />
+        expandAll={this.props.expandAll} />
     );
   }
 }
@@ -29,7 +29,7 @@ Document.displayName = 'Document';
 Document.propTypes = {
   doc: React.PropTypes.object.isRequired,
   editable: React.PropTypes.bool,
-  preExpanded: React.PropTypes.bool
+  expandAll: React.PropTypes.bool
 };
 
 module.exports = Document;

src/internal-packages/crud/lib/component/editable-document.jsx

@@ -362,7 +362,7 @@ EditableDocument.displayName = 'EditableDocument';
 EditableDocument.propTypes = {
   doc: React.PropTypes.object.isRequired,
   editable: React.PropTypes.bool,
-  preExpanded: React.PropTypes.bool
+  expandAll: React.PropTypes.bool
 };
 
 module.exports = EditableDocument;

src/internal-packages/crud/lib/component/editable-element.jsx

@@ -91,7 +91,7 @@ class EditableElement extends React.Component {
     this.element.on(Element.Events.Edited, this.handleChange.bind(this));
     this.element.on(Element.Events.Removed, this.handleChange.bind(this));
     this.element.on(Element.Events.Reverted, this.handleChange.bind(this));
-    this.state = { expanded: false };
+    this.state = { expanded: this.props.expandAll };
   }
 
   /**
@@ -353,7 +353,8 @@ EditableElement.propTypes = {
   editing: React.PropTypes.bool,
   element: React.PropTypes.object.isRequired,
   index: React.PropTypes.number,
-  indent: React.PropTypes.number
+  indent: React.PropTypes.number,
+  expandAll: React.PropTypes.bool
 };
 
 module.exports = EditableElement;

src/internal-packages/crud/lib/component/editable-value.jsx

@@ -194,6 +194,8 @@ class EditableValue extends React.Component {
 
   /**
    * Get the style for the input wrapper.
+   *
+   * @returns {String} The class name.
    */
   wrapperStyle() {
     return `${VALUE_CLASS}-wrapper-is-${this.element.currentType.toLowerCase()}`;

src/internal-packages/crud/lib/component/element.jsx

@@ -0,0 +1,178 @@
+const React = require('react');
+const getComponent = require('hadron-react-bson');
+
+/**
+ * The base class.
+ */
+const CLASS = 'element';
+
+/**
+ * The field class.
+ */
+const FIELD = `${CLASS}-field`;
+
+/**
+ * The separator class.
+ */
+const SEPARATOR = `${CLASS}-separator`;
+
+/**
+ * The expandable element class.
+ */
+const EXP_CLASS = 'expandable-element';
+
+/**
+ * The expandable header class.
+ */
+const EXP_HEADER = `${EXP_CLASS}-header`;
+
+/**
+ * The carat toggle class.
+ */
+const EXP_TOGGLE = `${EXP_HEADER}-toggle`;
+
+/**
+ * The expandable field class.
+ */
+const EXP_FIELD = `${EXP_HEADER}-field`;
+
+/**
+ * The expandable label class.
+ */
+const EXP_LABEL = `${EXP_HEADER}-label`;
+
+/**
+ * The expandable children class.
+ */
+const EXP_CHILDREN = `${EXP_CLASS}-children`;
+
+/**
+ * The expandable element separator class.
+ */
+const EXP_SEPARATOR = `${EXP_HEADER}-separator`;
+
+/**
+ * General element component.
+ */
+class Element extends React.Component {
+
+  /**
+   * Instantiate the element.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+    this.state = { expanded: props.expandAll };
+  }
+
+  /**
+   * Get the full class name for the base style.
+   *
+   * @param {String} base - The base class.
+   *
+   * @returns {String} The full class name.
+   */
+  getClassName(base) {
+    if (this.state.expanded) {
+      return `${base} ${base}-is-expanded`;
+    }
+    return base;
+  }
+
+  /**
+   * Toggles the expandable aspect of the element.
+   */
+  toggleExpandable() {
+    this.setState({ expanded: !this.state.expanded });
+  }
+
+  /**
+   * Render the children.
+   *
+   * @returns {Array} The children.
+   */
+  renderChildren() {
+    const components = [];
+    for (const element of this.props.element.elements) {
+      components.push(
+        (<Element
+          key={element.uuid}
+          element={element}
+          expandAll={this.props.expandAll} />)
+      );
+    }
+    return components;
+  }
+
+  /**
+   * Render a single element.
+   *
+   * @returns {React.Component} The single element.
+   */
+  renderElement() {
+    return (
+      <li className={CLASS}>
+        <div className={FIELD}>
+          {this.props.element.currentKey}
+        </div>
+        <span className={SEPARATOR}>:</span>
+        {this.renderValue()}
+      </li>
+    );
+  }
+
+  /**
+   * Render a single expandable element.
+   *
+   * @returns {React.Component} The expandable element.
+   */
+  renderExpandableElement() {
+    return (
+      <li className={EXP_CLASS}>
+        <div className={this.getClassName(EXP_HEADER)} onClick={this.toggleExpandable.bind(this)}>
+          <div className={EXP_TOGGLE}></div>
+          <div className={EXP_FIELD}>{this.props.element.currentKey}</div>
+          <span className={EXP_SEPARATOR}>:</span>
+          <div className={EXP_LABEL}>
+            {this.props.element.currentType}
+          </div>
+        </div>
+        <ol className={this.getClassName(EXP_CHILDREN)}>
+          {this.renderChildren()}
+        </ol>
+      </li>
+    );
+  }
+
+  /**
+   * Render the value of the element.
+   *
+   * @returns {React.Component} The value component.
+   */
+  renderValue() {
+    const component = getComponent(this.props.element.currentType);
+    return React.createElement(
+      component,
+      { type: this.props.element.currentType, value: this.props.element.currentValue }
+    );
+  }
+
+  /**
+   * Render a single element in a document.
+   *
+   * @returns {React.Component} The element component.
+   */
+  render() {
+    return this.props.element.elements ? this.renderExpandableElement() : this.renderElement();
+  }
+}
+
+Element.displayName = 'Element';
+
+Element.propTypes = {
+  element: React.PropTypes.any.isRequired,
+  expandAll: React.PropTypes.bool
+};
+
+module.exports = Element;

src/internal-packages/crud/lib/component/insert-document-dialog.jsx

@@ -4,7 +4,7 @@ const OpenInsertDocumentDialogStore = require('../store/open-insert-document-dia
 const InsertDocumentStore = require('../store/insert-document-store');
 const InsertDocument = require('./insert-document');
 const InsertDocumentFooter = require('./insert-document-footer');
-const TextButton = require('hadron-app-registry').TextButton;
+const { TextButton } = require('hadron-react-buttons');
 const Actions = require('../actions');
 
 /**

src/internal-packages/crud/lib/component/readonly-document.jsx

@@ -1,5 +1,6 @@
 const React = require('react');
-const ElementFactory = require('hadron-app-registry').ElementFactory;
+const HadronDocument = require('hadron-document');
+const Element = require('./element');
 
 /**
  * The base class.
@@ -21,13 +22,29 @@ const TEST_ID = 'readonly-document';
  */
 class ReadonlyDocument extends React.Component {
 
+  /**
+   * Initialize the readonly document.
+   *
+   * @param {Object} props - The properties.
+   */
+  constructor(props) {
+    super(props);
+    this.doc = new HadronDocument(props.doc);
+  }
+
   /**
    * Get the elements for the document.
    *
    * @returns {Array} The elements.
    */
   renderElements() {
-    return ElementFactory.elements(this.props.doc, this.props.preExpanded || false);
+    const components = [];
+    for (const element of this.doc.elements) {
+      components.push((
+        <Element key={element.uuid} element={element} expandAll={this.props.expandAll} />
+      ));
+    }
+    return components;
   }
 
   /**
@@ -50,7 +67,7 @@ ReadonlyDocument.displayName = 'ReadonlyDocument';
 
 ReadonlyDocument.propTypes = {
   doc: React.PropTypes.object.isRequired,
-  preExpanded: React.PropTypes.bool
+  expandAll: React.PropTypes.bool
 };
 
 module.exports = ReadonlyDocument;

src/internal-packages/crud/lib/component/remove-document-footer.jsx

@@ -1,5 +1,5 @@
 const React = require('react');
-const TextButton = require('hadron-app-registry').TextButton;
+const { TextButton } = require('hadron-react-buttons');
 
 /**
  * The progress mode.

src/internal-packages/crud/lib/component/utils.js

@@ -8,6 +8,8 @@ const FORMAT = 'YYYY-MM-DD HH:mm:ss.SSS';
 /**
  * Get the size for the string value.
  *
+ * @param {Object} value - The value.
+ *
  * @return {Number} The size.
  */
 function size(value) {
@@ -19,6 +21,7 @@ function size(value) {
  * Get the size value for an input field when editing.
  *
  * @param {Object} value - The value.
+ * @param {String} type - The type.
  *
  * @returns {Integer} The size.
  */

src/internal-packages/database/lib/components/collections-table.jsx

@@ -3,7 +3,7 @@ const app = require('ampersand-app');
 const CollectionsActions = require('../actions/collections-actions');
 const CreateCollectionDialog = require('./create-collection-dialog');
 const DropCollectionDialog = require('./drop-collection-dialog');
-const TextButton = require('hadron-app-registry').TextButton;
+const { TextButton } = require('hadron-react-buttons');
 const numeral = require('numeral');
 
 const _ = require('lodash');

src/internal-packages/database/lib/components/create-collection-dialog.jsx

@@ -2,7 +2,7 @@ const app = require('ampersand-app');
 const shell = require('electron').shell;
 const React = require('react');
 const Modal = require('react-bootstrap').Modal;
-const TextButton = require('hadron-app-registry').TextButton;
+const { TextButton } = require('hadron-react-buttons');
 const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
 const toNS = require('mongodb-ns');
 const Actions = require('../actions/collections-actions');

src/internal-packages/database/lib/components/drop-collection-dialog.jsx

@@ -3,7 +3,7 @@ const React = require('react');
 const Modal = require('react-bootstrap').Modal;
 const NamespaceStore = require('hadron-reflux-store').NamespaceStore;
 const toNS = require('mongodb-ns');
-const TextButton = require('hadron-app-registry').TextButton;
+const { TextButton } = require('hadron-react-buttons');
 const Actions = require('../actions/collections-actions');
 const DropCollectionStore = require('../stores/drop-collection-store');