Green flash on fields in PDP page after change success (#1558)

* Green flash on fields in PDP page after change success * Updated tags and metafields with a flash of green on success submit
reactioncommerce · Nov 10, 2016 · 1663824 · 1663824
1 parent 86f52d2
commit 1663824
Show file tree

Hide file tree

Showing 7 changed files with 160 additions and 46 deletions.
diff --git a/imports/plugins/core/ui/client/components/metadata/metafield.js b/imports/plugins/core/ui/client/components/metadata/metafield.js
@@ -1,8 +1,30 @@
 import React, { Component, PropTypes } from "react";
+import Velocity from "velocity-animate";
+import "velocity-animate/velocity.ui";
 import { TextField, Button } from "../";
 
 class Metafield extends Component {
 
+  componentWillReceiveProps(nextProps) {
+    if (nextProps.metafield.key !== this.props.metafield.key) {
+      const input = this.refs.keyInput.refs.input;
+
+      Velocity.RunSequence([
+        {e: input, p: { backgroundColor: "#e2f2e2" }, o: { duration: 200 }},
+        {e: input, p: { backgroundColor: "#fff" }, o: { duration: 100 }}
+      ]);
+    }
+
+    if (nextProps.metafield.value !== this.props.metafield.value) {
+      const input = this.refs.valueInput.refs.input;
+
+      Velocity.RunSequence([
+        {e: input, p: { backgroundColor: "#e2f2e2" }, o: { duration: 200 }},
+        {e: input, p: { backgroundColor: "#fff" }, o: { duration: 100 }}
+      ]);
+    }
+  }
+
   get detailNamePlaceholder() {
     return this.props.detailNamePlaceholder || "Detail Name";
   }
@@ -84,6 +106,7 @@ class Metafield extends Component {
               name="key"
               onBlur={this.handleBlur}
               onChange={this.handleChange}
+              onReturnKeyDown={this.handleBlur}
               placeholder={this.detailNamePlaceholder}
               ref="keyInput"
               value={this.props.metafield.key}
@@ -94,6 +117,7 @@ class Metafield extends Component {
               name="value"
               onBlur={this.handleBlur}
               onChange={this.handleChange}
+              onReturnKeyDown={this.handleBlur}
               placeholder={this.detailInfoPlaceholder}
               ref="valueInput"
               value={this.props.metafield.value}

diff --git a/imports/plugins/core/ui/client/components/tags/tag.jsx b/imports/plugins/core/ui/client/components/tags/tag.jsx
@@ -1,6 +1,8 @@
 import React, { Component, PropTypes } from "react";
 import classnames from "classnames";
 import Autosuggest from "react-autosuggest";
+import Velocity from "velocity-animate";
+import "velocity-animate/velocity.ui";
 import { Router } from "/client/api";
 import { i18next } from "/client/api";
 import { Button, Handle } from "/imports/plugins/core/ui/client/components";
@@ -10,6 +12,23 @@ import { SortableItem } from "../../containers";
 class Tag extends Component {
   displayName: "Tag";
 
+  componentWillReceiveProps(nextProps) {
+    if (this._updated && this._saved && this.refs.autoSuggestInput) {
+      const input = this.refs.autoSuggestInput.input;
+
+      Velocity.RunSequence([
+        {e: input, p: { backgroundColor: "#e2f2e2" }, o: { duration: 200 }},
+        {e: input, p: { backgroundColor: "#fff" }, o: { duration: 100 }}
+      ]);
+
+      this._updated = false;
+    }
+
+    if ((nextProps.tag.name !== this.props.tag.name)) {
+      this._updated = true;
+    }
+  }
+
   get tag() {
     return this.props.tag || {
       name: ""
@@ -39,6 +58,7 @@ class Tag extends Component {
    */
   handleTagFormSubmit = (event) => {
     event.preventDefault();
+    this._saved = true;
     this.saveTag(event);
   };
 
@@ -60,12 +80,14 @@ class Tag extends Component {
    */
   handleTagUpdate = (event) => {
     if (this.props.onTagUpdate && event.keyCode === 13) {
+      this._saved = true;
       this.props.onTagUpdate(this.props.tag._id, event.target.value);
     }
   };
 
   handleTagKeyDown = (event) => {
     if (event.keyCode === 13) {
+      this._saved = true;
       this.saveTag(event);
     }
   }
@@ -100,13 +122,14 @@ class Tag extends Component {
    */
   handleTagInputBlur = (event) => {
     if (this.props.onTagInputBlur) {
+      this._saved = true;
       this.props.onTagInputBlur(event, this.props.tag);
     }
   };
 
   handleInputChange = (event, { newValue }) => {
     if (this.props.onTagUpdate) {
-      const updatedTag = Object.assign({}, this.props.tag, {
+      const updatedTag = Object.assign({}, {...this.props.tag}, {
         name: newValue
       });
       this.props.onTagUpdate(event, updatedTag);
@@ -233,6 +256,7 @@ class Tag extends Component {
         }}
         onSuggestionsClearRequested={this.handleSuggestionsClearRequested}
         onSuggestionsFetchRequested={this.handleSuggestionsUpdateRequested}
+        ref="autoSuggestInput"
         renderSuggestion={this.renderSuggestion}
         suggestions={this.props.suggestions}
       />
@@ -263,6 +287,7 @@ Tag.propTypes = {
   i18nKeyInputPlaceholder: PropTypes.string,
   index: PropTypes.number,
   inputPlaceholder: PropTypes.string,
+  onClearSuggestions: PropTypes.func,
   onGetSuggestions: PropTypes.func,
   onTagInputBlur: PropTypes.func,
   onTagMouseOut: PropTypes.func,

diff --git a/imports/plugins/core/ui/client/components/textfield/textfield.js b/imports/plugins/core/ui/client/components/textfield/textfield.js
@@ -37,6 +37,22 @@ class TextField extends Component {
     }
   }
 
+  /**
+   * onKeyDown
+   * @summary set the state when the value of the input is changed
+   * @param  {Event} event Event object
+   * @return {void}
+   */
+  onKeyDown = (event) => {
+    if (this.props.onKeyDown) {
+      this.props.onKeyDown(event, this.props.name);
+    }
+
+    if (this.props.onReturnKeyDown && event.keyCode === 13) {
+      this.props.onReturnKeyDown(event, event.target.value, this.props.name);
+    }
+  }
+
   /**
    * Render a multiline input (textarea)
    * @return {JSX} jsx
@@ -77,6 +93,7 @@ class TextField extends Component {
         name={this.props.name}
         onBlur={this.onBlur}
         onChange={this.onChange}
+        onKeyDown={this.onKeyDown}
         placeholder={placeholder}
         ref="input"
         type="text"
@@ -165,6 +182,8 @@ TextField.propTypes = {
   name: PropTypes.string,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onReturnKeyDown: PropTypes.func,
   placeholder: PropTypes.string,
   value: PropTypes.string
 };

diff --git a/imports/plugins/included/product-admin/client/components/productAdmin.js b/imports/plugins/included/product-admin/client/components/productAdmin.js
@@ -1,20 +1,60 @@
 import React, { Component, PropTypes } from "react";
+import Velocity from "velocity-animate";
+import "velocity-animate/velocity.ui";
 import {
-  Button,
   Card,
   CardHeader,
   CardBody,
   CardGroup,
-  Divider,
   Metadata,
   TextField,
   Translation
 } from "/imports/plugins/core/ui/client/components";
 import { Router } from "/client/api";
-import { PublishContainer } from "/imports/plugins/core/revisions";
 import { TagListContainer } from "/imports/plugins/core/ui/client/containers";
+import { isEqual } from "lodash";
+import update from "react/lib/update";
+
+const fieldNames = [
+  "title",
+  "handle",
+  "subtitle",
+  "vendor",
+  "description",
+  "facebookMsg",
+  "twitterMsg",
+  "pinterestMsg",
+  "googleplusMsg"
+];
 
 class ProductAdmin extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      product: props.product
+    };
+  }
+
+  componentWillReceiveProps(nextProps) {
+    if (!isEqual(nextProps.product, this.props.product)) {
+      for (const fieldName of fieldNames) {
+        if (nextProps.product[fieldName] !== this.props.product[fieldName]) {
+          const input = this.refs[`${fieldName}Input`].refs.input;
+
+          Velocity.RunSequence([
+            {e: input, p: { backgroundColor: "#e2f2e2" }, o: { duration: 200 }},
+            {e: input, p: { backgroundColor: "#fff" }, o: { duration: 100 }}
+          ]);
+        }
+      }
+    }
+
+    this.setState({
+      product: nextProps.product
+    });
+  }
+
   handleDeleteProduct = () => {
     if (this.props.onDeleteProduct) {
       this.props.onDeleteProduct(this.props.product);
@@ -29,9 +69,19 @@ class ProductAdmin extends Component {
 
 
   handleFieldChange = (event, value, field) => {
-    if (this.props.onFieldChange) {
-      this.props.onFieldChange(field, value);
-    }
+    const newState = update(this.state, {
+      product: {
+        $merge: {
+          [field]: value
+        }
+      }
+    });
+
+    this.setState(newState, () => {
+      if (this.props.onFieldChange) {
+        this.props.onFieldChange(field, value);
+      }
+    });
   }
 
   handleToggleVisibility = () => {
@@ -65,7 +115,7 @@ class ProductAdmin extends Component {
   }
 
   get product() {
-    return this.props.product || {};
+    return this.state.product || this.props.product || {};
   }
 
   get permalink() {
@@ -105,11 +155,12 @@ class ProductAdmin extends Component {
               i18nKeyLabel="productDetailEdit.title"
               i18nKeyPlaceholder="productDetailEdit.title"
               label="Title"
-              multiline={true}
               name="title"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              onReturnKeyDown={this.handleFieldBlur}
               placeholder="Title"
+              ref="titleInput"
               value={this.product.title}
             />
             <TextField
@@ -120,29 +171,33 @@ class ProductAdmin extends Component {
               name="handle"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              onReturnKeyDown={this.handleFieldBlur}
               placeholder="Permalink"
+              ref="handleInput"
               value={this.product.handle}
             />
             <TextField
               i18nKeyLabel="productDetailEdit.pageTitle"
               i18nKeyPlaceholder="productDetailEdit.pageTitle"
               label="Subtitle"
-              multiline={true}
               name="pageTitle"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              onReturnKeyDown={this.handleFieldBlur}
               placeholder="Subtitle"
+              ref="subtitleInput"
               value={this.product.pageTitle}
             />
             <TextField
               i18nKeyLabel="productDetailEdit.vendor"
               i18nKeyPlaceholder="productDetailEdit.vendor"
               label="Vendor"
-              multiline={true}
               name="vendor"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              onReturnKeyDown={this.handleFieldBlur}
               placeholder="Vendor"
+              ref="vendorInput"
               value={this.product.vendor}
             />
             <TextField
@@ -154,6 +209,7 @@ class ProductAdmin extends Component {
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
               placeholder="Description"
+              ref="descriptionInput"
               value={this.product.description}
             />
           </CardBody>
@@ -171,6 +227,7 @@ class ProductAdmin extends Component {
               name="facebookMsg"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              ref="facebookMsgInput"
               value={this.product.facebookMsg}
             />
             <TextField
@@ -180,6 +237,7 @@ class ProductAdmin extends Component {
               name="twitterMsg"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              ref="twitterMsgInput"
               value={this.product.twitterMsg}
             />
             <TextField
@@ -189,6 +247,7 @@ class ProductAdmin extends Component {
               name="pinterestMsg"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              ref="pinterestMsgInput"
               value={this.product.pinterestMsg}
             />
             <TextField
@@ -198,6 +257,7 @@ class ProductAdmin extends Component {
               name="googleplusMsg"
               onBlur={this.handleFieldBlur}
               onChange={this.handleFieldChange}
+              ref="googleplusMsgInput"
               value={this.product.googleplusMsg}
             />
           </CardBody>