From 0dda42129542efba77d435bdf82c1618602c2f68 Mon Sep 17 00:00:00 2001
From: Jimmy Somsanith <JSO.Technologies@gmail.com>
Date: Fri, 12 May 2017 11:52:06 +0200
Subject: [PATCH] Trigger after

---
 packages/forms/BREAKING_CHANGES_LOG.md        |  9 +++
 packages/forms/src/UIForm/UIForm.component.js | 56 ++++++++++++++++---
 packages/forms/stories/index.js               |  1 +
 .../stories/json/core-trigger-after.json      | 31 ++++++++++
 4 files changed, 89 insertions(+), 8 deletions(-)
 create mode 100644 packages/forms/stories/json/core-trigger-after.json

diff --git a/packages/forms/BREAKING_CHANGES_LOG.md b/packages/forms/BREAKING_CHANGES_LOG.md
index 252a8f48e75..36ff4c27a03 100644
--- a/packages/forms/BREAKING_CHANGES_LOG.md
+++ b/packages/forms/BREAKING_CHANGES_LOG.md
@@ -3,6 +3,15 @@
 Before 1.0, `react-talend-forms` do NOT follow semver version in releases.
 This document aims to ease the WIP migration from a version to another by providing intels about what to do to migrate.
 
+## Next version
+
+Schemas format changes
+TODO
+
+On change callback api change
+On trigger callback api change
+TODO
+
 ## v0.71.0
 
 * PR #364 [feat: onTrigger !== onChange]
diff --git a/packages/forms/src/UIForm/UIForm.component.js b/packages/forms/src/UIForm/UIForm.component.js
index eea7e7ed255..26609a13278 100644
--- a/packages/forms/src/UIForm/UIForm.component.js
+++ b/packages/forms/src/UIForm/UIForm.component.js
@@ -6,6 +6,8 @@ import Widget from './Widget';
 import { validateAll } from './utils/validation';
 import { mutateValue } from './utils/properties';
 
+const TRIGGER_AFTER = 'after';
+
 class UIForm extends React.Component {
 	constructor(props) {
 		super(props);
@@ -35,24 +37,49 @@ class UIForm extends React.Component {
 			mergedSchema: merge(jsonSchema, uiSchema),
 			properties: { ...properties },
 			validations: {},
+			// TODO consolidate validation
+			// or each state.validations, revalidate it if key is still in form, remove otherwise
 		});
 	}
 
 	/**
 	 * Consolidate form with the new value.
-	 * This updates the validation on the modified field.
+	 * - it updates the validation on the modified field.
+	 * - it triggers onChange / onTrigger callbacks
 	 * @param event The change event
 	 * @param schema The schema of the changed field
 	 * @param value The new field value
 	 */
 	consolidate(event, schema, value) {
-		this.setState(prevState => ({
-			properties: mutateValue(prevState.properties, schema.key, value),
-			validations: {
-				...prevState.validations,
-				[schema.key]: validate(schema, value),
-			},
-		}));
+		this.setState(
+			prevState => ({
+				properties: mutateValue(prevState.properties, schema.key, value),
+				validations: {
+					...prevState.validations,
+					[schema.key]: validate(schema, value),
+				},
+			}),
+			() => {
+				const { onChange, onTrigger } = this.props;
+
+				if (onChange) {
+					onChange({
+						jsonSchema: this.props.data.jsonSchema, // original jsonSchema
+						uiSchema: this.props.data.uiSchema,     // original uiSchema
+						properties: this.state.properties,      // current properties values
+					});
+				}
+
+				const { key, triggers } = schema;
+				if (onTrigger && triggers && triggers.indexOf(TRIGGER_AFTER) !== -1) {
+					onTrigger(
+						this.state.properties,  // current properties values
+						key[key.length - 1],    // field name
+						value                   // field value
+					);
+				}
+			}
+		);
 	}
 
 	/**
@@ -108,13 +135,26 @@ class UIForm extends React.Component {
 
 if (process.env.NODE_ENV !== 'production') {
 	UIForm.propTypes = {
+		/** Form schema configuration */
 		data: PropTypes.shape({
+			/** Json schema that specify the data model */
 			jsonSchema: PropTypes.object,
+			/** UI schema that specify how to render the fields */
 			uiSchema: PropTypes.array,
+			/** Form fields values. Note that it should contains @definitionName for triggers. */
 			properties: PropTypes.object,
 		}),
+		/** The form name that will be used to create ids */
 		formName: PropTypes.string,
+		/** The change callback. It takes  */
+		onChange: PropTypes.func,
+		/** Form submit callback */
 		onSubmit: PropTypes.func.isRequired,
+		/**
+		 * Tigger > after callback.
+		 * This is executed on changes on fields with uiSchema > triggers : ['after']
+		 */
+		onTrigger: PropTypes.func,
 	};
 }
 
diff --git a/packages/forms/stories/index.js b/packages/forms/stories/index.js
index 7e0fa2d09c4..8c72fe88252 100644
--- a/packages/forms/stories/index.js
+++ b/packages/forms/stories/index.js
@@ -62,6 +62,7 @@ sampleFilenames
 						autocomplete="off"
 						data={object(capitalizedSampleName, sampleFilenames(filename))}
 						onChange={action('Change')}
+						onTrigger={action('Trigger')}
 						onBlur={action('Blur')}
 						onSubmit={action('Submit')}
 					/>
diff --git a/packages/forms/stories/json/core-trigger-after.json b/packages/forms/stories/json/core-trigger-after.json
new file mode 100644
index 00000000000..4d79f93dd30
--- /dev/null
+++ b/packages/forms/stories/json/core-trigger-after.json
@@ -0,0 +1,31 @@
+{
+  "jsonSchema": {
+    "type": "object",
+    "properties": {
+      "lastname": {
+        "type": "string"
+      },
+      "firstname": {
+        "type": "string"
+      }
+    },
+    "required": [
+      "name",
+      "firstname",
+      "email",
+      "comment"
+    ]
+  },
+  "uiSchema": [
+    {
+      "key": "lastname",
+      "title": "Last Name (with trigger)",
+      "triggers": ["after"]
+    },
+    {
+      "key": "firstname",
+      "title": "First Name"
+    }
+  ],
+  "properties": {}
+}