Merge branch 'release/0.9.9'

README.md

@@ -1,5 +1,5 @@
 ![alt tag](https://working-minds.github.io/realizejs/assets/img/content/realizejs.png)
 
-### Current version: 0.9.8 beta
+### Current version: 0.9.9 beta
 
 Read the documentation on how to get started on [Realize.js](https://working-minds.github.io/realizejs/en)

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "realizejs",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "authors": [
     "Ariel Lindgren <[email protected]>",
     "Pedro Jesus <[email protected]>",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "realizejs",
-  "version": "0.9.8",
+  "version": "0.9.9",
   "description": "A rich set of UI components based on Material Design using React.js",
   "authors": [
     "Ariel Lindgren <[email protected]>",

src/js/components/form/input_group.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from '../../prop_types';
-import { filter, merge } from 'lodash';
 import { mixin } from '../../utils/decorators';
+import themes from '../../theme';
 
 import { Input } from '../../components';
 import { CssClassMixin } from '../../mixins';
@@ -11,15 +11,22 @@ export default class InputGroup extends Component {
   static propTypes = {
     inputs: PropTypes.object,
     data: PropTypes.object,
-    errors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+    errors: PropTypes.oneOfType([
+      PropTypes.object,
+      PropTypes.array,
+    ]),
     resource: PropTypes.string,
     disabled: PropTypes.bool,
     readOnly: PropTypes.bool,
     label: PropTypes.string,
     separator: PropTypes.bool,
     formStyle: PropTypes.string,
     wrapperClassName: PropTypes.string,
-    inputWrapperComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.element, PropTypes.string])
+    inputWrapperComponent: PropTypes.component,
+    children: PropTypes.oneOfType([
+      PropTypes.arrayOf(React.PropTypes.node),
+      PropTypes.node,
+    ]),
   };
 
   static defaultProps = {
@@ -33,111 +40,75 @@ export default class InputGroup extends Component {
     readOnly: false,
     themeClassKey: 'form.inputGroup',
     wrapperClassName: 'wrapper_input_group',
-    inputWrapperComponent: null
+    inputWrapperComponent: Input,
+    children: <span />,
   };
 
-  renderInputs () {
-    var inputsProps = this.props.inputs;
-    var inputComponents = [];
-    var inputIndex = 0;
-    var InputWrapperComponent = this.getInputWrapperComponent();
-
-    for(var inputId in inputsProps) {
-      if(inputsProps.hasOwnProperty(inputId)) {
-        var inputProps = inputsProps[inputId];
-        if(!inputProps.id) {
-          inputProps.id = inputId;
-        }
-
-        inputComponents.push(
-          <InputWrapperComponent
-            disabled={this.props.disabled}
-            readOnly={this.props.readOnly}
-            formStyle={this.props.formStyle}
-            inputWrapperComponent={this.props.inputWrapperComponent}
-            key={"input_" + inputIndex}
-            {...inputProps}
-            data={this.props.data}
-            errors={this.props.errors}
-            resource={this.props.resource}
-            ref={"input_" + inputIndex}
-          />
-        );
-
-        inputIndex++;
-      }
+  getClassName() {
+    let className = this.className();
+    if (this.props.label !== null) {
+      className += ` ${themes.getCssClass('form.inputGroup.section')}`;
     }
 
-    return inputComponents;
+    return className;
   }
 
-  renderLabel () {
-    if(this.props.label === null) {
-      return '';
-    }
+  serialize() {
+    return Object.keys(this.refs)
+      .filter(refKey => refKey.match(/^input_/))
+      .reduce((acc, refKey) => this.refs[refKey].serialize(), {});
+  }
 
-    return (<h5>{this.props.label}</h5>);
+  renderInputs() {
+    const { inputs, disabled, readOnly, formStyle, errors, data, resource } = this.props;
+    const InputWrapperComponent = this.props.inputWrapperComponent || Input;
+
+    return Object.keys(inputs).map((inputKey, i) => {
+      const inputProps = inputs[inputKey];
+      return (
+        <InputWrapperComponent
+          disabled={disabled}
+          readOnly={readOnly}
+          formStyle={formStyle}
+          id={inputKey}
+          errors={errors}
+          {...inputProps}
+          data={data}
+          resource={resource}
+          key={`input_${inputKey}_${i}`}
+          ref={`input_${inputKey}_${i}`}
+        />
+      );
+    });
   }
 
-  renderDivider () {
-    if(!this.props.separator) {
-      return '';
-    }
+  renderLabel() {
+    return (
+      <h5 className={themes.getCssClass('form.inputGroup.label')}>
+        {this.props.label}
+      </h5>
+    );
+  }
 
-    //TODO: refatorar para um componente
-    var className = Realize.themes.getCssClass('form.inputGroup.divider');
+  renderDivider() {
     return (
-      <div className={className}>
+      <div className={themes.getCssClass('form.inputGroup.divider')}>
         <hr />
       </div>
     );
   }
 
-  render () {
+  render() {
     return (
       <div className={this.props.wrapperClassName}>
-        <div className={this.inputGroupClassName()}>
-          {this.renderLabel()}
-          {this.renderInputs()}
-          {this.props.children}
+        <div className={this.getClassName()}>
+          {this.props.label ? this.renderLabel() : <span />}
+          <div>
+            {this.renderInputs()}
+          </div>
         </div>
-        {this.renderDivider()}
+        {this.props.separator ? this.renderDivider() : <span />}
       </div>
     );
   }
-
-  inputGroupClassName () {
-    var className = this.className();
-    if(this.props.label !== null) {
-      className += ' ' + Realize.themes.getCssClass('form.inputGroup.section');
-    }
-
-    return className;
-  }
-
-  getInputWrapperComponent() {
-    let inputWrapperComponent = this.props.inputWrapperComponent;
-    if(typeof inputWrapperComponent == "string") {
-      return window[inputWrapperComponent];
-    }
-    else if(typeof inputWrapperComponent == "function") {
-      return inputWrapperComponent;
-    }
-    else {
-      return Input;
-    }
-  }
-
-  serialize () {
-    var inputRefs = filter(this.refs, function(ref, refName) {
-      return refName.match(/^input_/);
-    });
-
-    var inputValues = {};
-    inputRefs.forEach(function(inputRef) {
-      merge(inputValues, inputRef.serialize());
-    });
-
-    return inputValues;
-  }
 }

src/js/components/input/autocomplete/index.js

@@ -1,6 +1,6 @@
-export InputAutocompleteList from './input_autocomplete_list';
-export InputAutocompleteOption from './input_autocomplete_option';
-export InputAutocompleteResult from './input_autocomplete_result';
-export InputAutocompleteSelect from './input_autocomplete_select';
-export InputAutocompleteValues from './input_autocomplete_values';
-export InputAutocomplete from './input_autocomplete';
+export { default as InputAutocompleteList } from './input_autocomplete_list';
+export { default as InputAutocompleteOption } from './input_autocomplete_option';
+export { default as InputAutocompleteResult } from './input_autocomplete_result';
+export { default as InputAutocompleteSelect } from './input_autocomplete_select';
+export { default as InputAutocompleteValues } from './input_autocomplete_values';
+export { default as InputAutocomplete } from './input_autocomplete';

src/js/components/input/checkbox/index.js

@@ -1,2 +1,2 @@
-export InputCheckboxGroup from './input_checkbox_group';
-export InputCheckbox from './input_checkbox';
+export { default as InputCheckboxGroup } from './input_checkbox_group';
+export { default as InputCheckbox } from './input_checkbox';

src/js/components/input/datefilter/index.js

@@ -1,3 +1,3 @@
-export InputDateFilterBody from './input_datefilter_body';
-export InputDateFilterSelect from './input_datefilter_select';
-export InputDateFilter from './input_datefilter';
+export { default as InputDatefilterBody } from './input_datefilter_body';
+export { default as InputDatefilterSelect } from './input_datefilter_select';
+export { default as InputDatefilter } from './input_datefilter';

src/js/components/input/grid_form/index.js

@@ -1,2 +1,2 @@
-export InputGridFormFields from './input_grid_form_fields';
-export InputGridForm from './input_grid_form';
+export { default as InputGridFormFields } from './input_grid_form_fields';
+export { default as InputGridForm } from './input_grid_form';

src/js/components/input/index.js

@@ -1,16 +1,16 @@
-export Input from './input';
-export InputBase from './input_base';
-export InputColorpicker from './input_colorpicker';
-export InputDatepicker from './input_datepicker';
-export InputError from './input_error';
-export InputFile from './input_file';
-export InputHidden from './input_hidden';
-export InputMasked from './input_masked';
-export InputNumber from './input_number';
-export InputPassword from './input_password';
-export InputSwitch from './input_switch';
-export InputText from './input_text';
-export InputTextarea from './input_textarea';
+export { default as Input } from './input';
+export { default as InputBase } from './input_base';
+export { default as InputColorpicker } from './input_colorpicker';
+export { default as InputDatepicker } from './input_datepicker';
+export { default as InputError } from './input_error';
+export { default as InputFile } from './input_file';
+export { default as InputHidden } from './input_hidden';
+export { default as InputMasked } from './input_masked';
+export { default as InputNumber } from './input_number';
+export { default as InputPassword } from './input_password';
+export { default as InputSwitch } from './input_switch';
+export { default as InputText } from './input_text';
+export { default as InputTextarea } from './input_textarea';
 
 export * from './autocomplete';
 export * from './checkbox';