Merge branch 'master' into #58-fix-pending-changes

Author: crsanti

samples/react/es6/00 SimpleForm/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "env",
+      {
+        "modules": false
+      }
+    ],
+    "react",
+    "stage-2"
+  ]
+}

samples/react/es6/00 SimpleForm/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "reactboiler",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "webpack-dev-server"
+  },
+  "author": "Braulio Diez",
+  "license": "ISC",
+  "dependencies": {
+    "bootstrap": "^3.3.7",
+    "core-js": "^2.4.1",
+    "jquery": "^3.2.0",
+    "lc-form-validation": "file:../../../../lib/",
+    "react": "^15.4.2",
+    "react-dom": "^15.4.2",
+    "react-redux": "^5.0.3",
+    "redux": "^3.6.0",
+    "redux-thunk": "^2.2.0"
+  },
+  "devDependencies": {
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
+    "babel-preset-env": "^1.2.2",
+    "babel-preset-react": "^6.23.0",
+    "babel-preset-stage-2": "^6.22.0",
+    "css-loader": "^0.27.3",
+    "extract-text-webpack-plugin": "^2.1.0",
+    "file-loader": "^0.10.1",
+    "html-webpack-plugin": "^2.28.0",
+    "style-loader": "^0.14.1",
+    "url-loader": "^0.5.8",
+    "webpack": "^2.2.1",
+    "webpack-dev-server": "^2.4.2"
+  }
+}

samples/react/es6/00 SimpleForm/src/actions/actionsDef.js

@@ -0,0 +1,8 @@
+export const actionsDef = {
+  customer: {
+    CUSTOMER_PROCESS_UI_INPUT_START: 'CUSTOMER_UI_INPUT_START',
+    CUSTOMER_PROCESS_UI_INPUT_COMPLETED: 'CUSTOMER_UI_INPUT_COMPLETED',
+    CUSTOMER_SAVE_START: 'CUSTOMER_SAVE_START',
+    CUSTOMER_SAVE_COMPLETED: 'CUSTOMER_SAVE_COMPLETED'
+  }
+};

samples/react/es6/00 SimpleForm/src/actions/customerSaveCompleted.js

@@ -0,0 +1,8 @@
+import { actionsDef } from './actionsDef';
+
+export const customerSaveCompleted = (formValidationResult) => {
+  return {
+    type: actionsDef.customer.CUSTOMER_SAVE_COMPLETED,
+    formValidationResult
+  }
+};

samples/react/es6/00 SimpleForm/src/actions/customerSaveStart.js

@@ -0,0 +1,18 @@
+import { customerSaveCompleted } from './customerSaveCompleted';
+import { customerFormValidation } from '../components/sampleForm/validations/customerFormValidation';
+
+export function customerSaveStart(viewModel) {
+
+  return (dispatcher) => {
+    customerFormValidation.validateForm(viewModel).then(
+      (formValidationResult) => {
+        if (formValidationResult.succeeded) {
+          // Call here the async call to save
+          // additional logic or actions to be added on a real case
+          console.log("Save Completed");
+        }
+        dispatcher(customerSaveCompleted(formValidationResult));
+      }
+    );
+  }
+}

samples/react/es6/00 SimpleForm/src/actions/customerUIInputStart.js

@@ -0,0 +1,12 @@
+import { customerUIInputCompleted } from './customerUInputCompleted';
+import { customerFormValidation } from '../components/sampleForm/validations/customerFormValidation';
+
+export function customerUIInputStart(viewModel, fieldName, value) {
+  return (dispatcher) => {
+    customerFormValidation.validateField(viewModel, fieldName, value).then(
+      (fieldValidationResult) => {
+        dispatcher(customerUIInputCompleted(fieldName, value, fieldValidationResult));
+      }
+    );
+  }
+}

samples/react/es6/00 SimpleForm/src/actions/customerUInputCompleted.js

@@ -0,0 +1,10 @@
+import { actionsDef } from "./actionsDef";
+
+export const customerUIInputCompleted = (fieldName, value, fieldValidationResult) => {
+  return {
+    type: actionsDef.customer.CUSTOMER_PROCESS_UI_INPUT_COMPLETED,
+    fieldName,
+    value,
+    fieldValidationResult
+  }
+};

samples/react/es6/00 SimpleForm/src/components/app.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import ReduxThunk from 'redux-thunk';
+import { createStore, applyMiddleware } from 'redux';
+import { Provider } from 'react-redux';
+import reducers from '../reducers'
+import { ContainerSampleForm } from './sampleForm/sampleForm.container';
+
+const store = createStore(
+  reducers,
+  applyMiddleware(ReduxThunk)
+);
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <div className="container-fluid">
+          <ContainerSampleForm />
+        </div>
+      </Provider>
+    );
+  }
+}

samples/react/es6/00 SimpleForm/src/components/common/input.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+
+export class Input extends React.Component {
+  static propTypes = {
+    name: React.PropTypes.string.isRequired,
+    label: React.PropTypes.string.isRequired,
+    type: React.PropTypes.string,
+    value: React.PropTypes.string.isRequired,
+    onChange: React.PropTypes.func.isRequired,
+    error: React.PropTypes.string.isRequired,
+  };
+
+  static defaultProps = {
+    type: 'text',
+  };
+
+  render() {
+    let wrapperClass = 'form-group';
+    if (this.props.error && this.props.error.length > 0) {
+      wrapperClass = '${wrapperClass} has-error';
+    }
+
+    return (
+      <div className={wrapperClass}>
+        <label htmlFor={this.props.name}>{this.props.label}</label>
+        <div className="field">
+          <input
+            type={this.props.type}
+            id={this.props.name}
+            name={this.props.name}
+            className="form-control"
+            placeholder={this.props.placeholder}
+            ref={this.props.name}
+            value={this.props.value}
+            onChange={this.props.onChange} />
+          <div className="help-block">{this.props.error}</div>
+        </div>
+      </div>
+    );
+  }
+}

samples/react/es6/00 SimpleForm/src/components/sampleForm/sampleForm.container.js

@@ -0,0 +1,27 @@
+import { connect } from 'react-redux';
+import { SampleForm } from './sampleForm';
+import { customerUIInputStart } from '../../actions/customerUIInputStart';
+import { customerSaveStart } from '../../actions/customerSaveStart';
+
+const mapStateToProps = (state) => {
+  return {
+    customer: state.customer.customer,
+    errors: state.customer.customerErrors
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    fireValidationFieldValueChanged: (viewModel, fieldName, value) => {
+      return dispatch(customerUIInputStart(viewModel, fieldName, value));
+    },
+    saveCustomer: (customer) => {
+      return dispatch(customerSaveStart(customer));
+    }
+  }
+};
+
+export const ContainerSampleForm = connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(SampleForm);