Merge pull request #2 from lawnstarter/export

setup working export

README.md

@@ -1,5 +1,29 @@
 # react-native-form-helpers
 
+**Step 1:**<br>
+`npm install react-native-form-helpers`
+
+**Step 2:**<br>
+Create a dictionary file ([example dictionary](demoApp/react-native-form-helpers/dictionary.js))
+
+**Step 3:**<br>
+
+```js
+import RNFormHelpers from "./react-native-form-helpers";
+import { validationDictionary } from "./dictionary.js"; // location of your dictionary file
+
+export const validationService = RNFormHelpers({
+  dictionary: validationDictionary
+});
+```
+
+**Step 4:**<br>
+Import into your form and utilize the built-in methods. See below tutorial or [sample app](demoApp/App.js) for more details.
+
+## Tutorial Series:
+
 https://medium.com/lawnstarter-engineering/how-to-create-custom-forms-with-validation-and-scroll-to-invalid-logic-in-react-native-part-one-43e5f7cdf807
 
 https://medium.com/lawnstarter-engineering/how-to-create-custom-forms-with-validation-and-scroll-to-invalid-logic-in-react-native-part-two-9834849d4d78
+
+// placeholder for part three

demoApp/App.js

@@ -8,7 +8,7 @@ import {
   KeyboardAvoidingView,
   Switch,
 } from 'react-native';
-import {validationService} from './validation/service';
+import {validationService} from './index';
 import FormInput from './components/FormInput';
 
 export default class App extends Component {
@@ -249,4 +249,4 @@ const styles = StyleSheet.create({
     color: 'red',
     fontSize: 12,
   },
-});
+});

demoApp/index.js

@@ -6,4 +6,11 @@ import {AppRegistry} from 'react-native';
 import App from './App';
 import {name as appName} from './app.json';
 
+import RNFormHelpers from './react-native-form-helpers';
+import {validationDictionary} from './react-native-form-helpers/dictionary';
+
+export const validationService = RNFormHelpers({
+  dictionary: validationDictionary,
+});
+
 AppRegistry.registerComponent(appName, () => App);

demoApp/react-native-form-helpers/index.js

@@ -0,0 +1,110 @@
+import validatejs from 'validate.js';
+
+export default function RNFormHelpers({dictionary}) {
+  const service = {
+    onInputChange,
+    getInputValidationState,
+    validateInput,
+    getFormValidation,
+    setInputPosition,
+    getFirstInvalidInput,
+  };
+
+  function onInputChange({id, value, cb = () => {}}) {
+    const {inputs} = this.state;
+    this.setState(
+      {
+        inputs: {
+          ...inputs,
+          [id]: getInputValidationState({
+            input: inputs[id],
+            value,
+          }),
+        },
+      },
+      cb,
+    );
+  }
+
+  function getInputValidationState({input, value, touched}) {
+    return {
+      ...input,
+      value,
+      errorLabel: input.optional
+        ? null
+        : validateInput({type: input.type, value}),
+      touched: touched || input.touched,
+    };
+  }
+
+  function validateInput({type, value}) {
+    const result = validatejs(
+      {
+        [type]: value,
+      },
+      {
+        [type]: dictionary[type],
+      },
+    );
+
+    if (result) {
+      return result[type][0];
+    }
+
+    return null;
+  }
+
+  function getFormValidation() {
+    const {inputs} = this.state;
+
+    const updatedInputs = {};
+
+    for (const [key, input] of Object.entries(inputs)) {
+      updatedInputs[key] = getInputValidationState({
+        input,
+        value: input.value,
+        touched: true,
+      });
+    }
+
+    this.setState({
+      inputs: updatedInputs,
+    });
+
+    return getFirstInvalidInput({inputs: updatedInputs});
+  }
+
+  function setInputPosition({ids, value}) {
+    const {inputs} = this.state;
+
+    const updatedInputs = {
+      ...inputs,
+    };
+
+    ids.forEach(id => {
+      updatedInputs[id].yCoordinate = value;
+    });
+
+    this.setState({
+      inputs: updatedInputs,
+    });
+  }
+
+  function getFirstInvalidInput({inputs}) {
+    let firstInvalidCoordinate = Infinity;
+
+    for (const [key, input] of Object.entries(inputs)) {
+      if (input.errorLabel && input.yCoordinate < firstInvalidCoordinate) {
+        firstInvalidCoordinate = input.yCoordinate;
+      }
+    }
+
+    if (firstInvalidCoordinate === Infinity) {
+      firstInvalidCoordinate = null;
+    }
+
+    return firstInvalidCoordinate;
+  }
+
+  return service;
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-form-helpers",
-  "version": "0.0.2",
+  "version": "0.1.0",
   "description": "React Native tutorials, helpers, and demo app for form validation and scroll to invalid logic",
   "license": "MIT",
   "author": "Michael Lefkowitz <[email protected]>",