added transition to log created on action trigger

hurley87 · Apr 7, 2016 · 1e1aefe · 1e1aefe
1 parent 19713f0
commit 1e1aefe
Show file tree

Hide file tree

Showing 5 changed files with 148 additions and 54 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,3 @@
 node_modules
 *.log
+.idea
diff --git a/dist/client/ui/action_logger.js b/dist/client/ui/action_logger.js
@@ -4,10 +4,34 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
+var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');
+
+var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);
+
+var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');
+
+var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
+
+var _createClass2 = require('babel-runtime/helpers/createClass');
+
+var _createClass3 = _interopRequireDefault(_createClass2);
+
+var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');
+
+var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);
+
+var _inherits2 = require('babel-runtime/helpers/inherits');
+
+var _inherits3 = _interopRequireDefault(_inherits2);
+
 var _react = require('react');
 
 var _react2 = _interopRequireDefault(_react);
 
+var _jsonStringifySafe = require('json-stringify-safe');
+
+var _jsonStringifySafe2 = _interopRequireDefault(_jsonStringifySafe);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 var h3Style = {
@@ -32,33 +56,82 @@ var clearButtonStyle = {
   marginLeft: 5
 };
 
-var ActionLogger = function ActionLogger(_ref) {
-  var actionLog = _ref.actionLog;
-  var onClear = _ref.onClear;
-  return _react2.default.createElement(
-    'div',
-    null,
-    _react2.default.createElement(
-      'h3',
-      { style: h3Style },
-      'ACTION LOGGER',
-      _react2.default.createElement(
-        'button',
-        { style: clearButtonStyle, onClick: onClear },
-        'CLEAR'
-      )
-    ),
-    _react2.default.createElement(
-      'pre',
-      { style: preStyle },
-      actionLog
-    )
-  );
+var latestActionLogStyle = {
+  backgroundColor: 'lightgreen',
+  transition: 'all .5s ease-in'
 };
 
+var ActionLogger = function (_Component) {
+  (0, _inherits3.default)(ActionLogger, _Component);
+
+  function ActionLogger() {
+    (0, _classCallCheck3.default)(this, ActionLogger);
+    return (0, _possibleConstructorReturn3.default)(this, (0, _getPrototypeOf2.default)(ActionLogger).apply(this, arguments));
+  }
+
+  (0, _createClass3.default)(ActionLogger, [{
+    key: 'componentDidUpdate',
+    value: function componentDidUpdate() {
+      var _this2 = this;
+
+      if (this.refs.actionLogger && window.setTimeout) {
+        this.refs.actionLogger.style.backgroundColor = latestActionLogStyle.backgroundColor;
+        setTimeout(function () {
+          _this2.refs.actionLogger.style.backgroundColor = 'white';
+        }, 800);
+      }
+    }
+  }, {
+    key: 'getActionData',
+    value: function getActionData() {
+      var _props$data$actions = this.props.data.actions;
+      var actions = _props$data$actions === undefined ? [] : _props$data$actions;
+
+      return actions.map(function (action, i) {
+        // assuming that the first object in the array is the latest addition.
+        return i === 0 ? _react2.default.createElement(
+          'div',
+          { style: latestActionLogStyle, ref: 'actionLogger', key: i },
+          (0, _jsonStringifySafe2.default)(action, null, 2)
+        ) : _react2.default.createElement(
+          'div',
+          { key: i },
+          (0, _jsonStringifySafe2.default)(action, null, 2)
+        );
+      });
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var onClear = this.props.onClear;
+
+      return _react2.default.createElement(
+        'div',
+        null,
+        _react2.default.createElement(
+          'h3',
+          { style: h3Style },
+          'ACTION LOGGER',
+          _react2.default.createElement(
+            'button',
+            { style: clearButtonStyle, onClick: onClear },
+            'CLEAR'
+          )
+        ),
+        _react2.default.createElement(
+          'pre',
+          { style: preStyle },
+          this.getActionData()
+        )
+      );
+    }
+  }]);
+  return ActionLogger;
+}(_react.Component);
+
 ActionLogger.propTypes = {
-  actionLog: _react2.default.PropTypes.string.isRequired,
-  onClear: _react2.default.PropTypes.func
+  onClear: _react2.default.PropTypes.func,
+  data: _react2.default.PropTypes.array.isRequired
 };
 
 exports.default = ActionLogger;
diff --git a/dist/client/ui/admin.js b/dist/client/ui/admin.js
@@ -22,10 +22,6 @@ var _reactDom = require('react-dom');
 
 var _reactDom2 = _interopRequireDefault(_reactDom);
 
-var _jsonStringifySafe = require('json-stringify-safe');
-
-var _jsonStringifySafe2 = _interopRequireDefault(_jsonStringifySafe);
-
 var _controls = require('./controls');
 
 var _controls2 = _interopRequireDefault(_controls);
@@ -97,14 +93,7 @@ function getIframe(data) {
 }
 
 function getActionLogger(data) {
-  var _data$actions = data.actions;
-  var actions = _data$actions === undefined ? [] : _data$actions;
-
-  var log = actions.map(function (action) {
-    return (0, _jsonStringifySafe2.default)(action, null, 2);
-  }).join('\n\n');
-
-  return _react2.default.createElement(_action_logger2.default, { actionLog: log, onClear: clearLogs });
+  return _react2.default.createElement(_action_logger2.default, { data: data, onClear: clearLogs });
 }
 
 function renderMain(data) {

diff --git a/src/client/ui/action_logger.js b/src/client/ui/action_logger.js
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { Component } from 'react';
+import stringify from 'json-stringify-safe';
 
 const h3Style = {
   fontFamily: `
@@ -25,19 +26,55 @@ const clearButtonStyle = {
   marginLeft: 5,
 };
 
-const ActionLogger = ({ actionLog, onClear }) => (
-  <div>
-    <h3 style={h3Style}>
-      ACTION LOGGER
-      <button style={clearButtonStyle} onClick={onClear}>CLEAR</button>
-    </h3>
-    <pre style={preStyle}>{actionLog}</pre>
-  </div>
-);
+const latestActionLogStyle = {
+  backgroundColor: 'lightgreen',
+  transition: 'all .5s ease-in',
+};
+
+class ActionLogger extends Component {
+  componentDidUpdate() {
+    if (this.refs.actionLogger && window.setTimeout) {
+      this.refs.actionLogger.style.backgroundColor = latestActionLogStyle.backgroundColor;
+      setTimeout(() => {
+        this.refs.actionLogger.style.backgroundColor = 'white';
+      }, 800);
+    }
+  }
+
+  getActionData() {
+    const { actions = [] } = this.props.data;
+    return actions
+    .map((action, i) => {
+      // assuming that the first object in the array is the latest addition.
+      return i === 0 ? (
+        <div style={latestActionLogStyle} ref="actionLogger" key={i}>
+          {stringify(action, null, 2)}
+        </div>
+        ) : (
+        <div key={i}>
+          {stringify(action, null, 2)}
+        </div>
+        );
+    });
+  }
+
+  render() {
+    const { onClear } = this.props;
+    return (
+      <div>
+        <h3 style={h3Style}>
+          ACTION LOGGER
+          <button style={clearButtonStyle} onClick={onClear}>CLEAR</button>
+        </h3>
+        <pre style={preStyle}>{this.getActionData()}</pre>
+      </div>
+      );
+  }
+}
 
 ActionLogger.propTypes = {
-  actionLog: React.PropTypes.string.isRequired,
   onClear: React.PropTypes.func,
+  data: React.PropTypes.array.isRequired,
 };
 
 export default ActionLogger;
diff --git a/src/client/ui/admin.js b/src/client/ui/admin.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import stringify from 'json-stringify-safe';
 import StorybookControls from './controls';
 import ActionLogger from './action_logger';
 import Layout from './layout';
@@ -64,12 +63,7 @@ export function getIframe(data) {
 }
 
 export function getActionLogger(data) {
-  const { actions = [] } = data;
-  const log = actions
-    .map(action => stringify(action, null, 2))
-    .join('\n\n');
-
-  return (<ActionLogger actionLog={log} onClear={clearLogs} />);
+  return (<ActionLogger data={data} onClear={clearLogs} />);
 }
 
 export function renderMain(data) {