Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Transition on latest logged action. #80

Merged
merged 3 commits into from
Apr 9, 2016
Merged

Transition on latest logged action. #80

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1e1aefe
added transition to log created on action trigger
ritz078 Apr 7, 2016
935f54c
fixed conflicts
ritz078 Apr 7, 2016
27d7f94
fixed props data that was passed
ritz078 Apr 8, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,2 +1,3 @@
node_modules
*.log
.idea
121 changes: 97 additions & 24 deletions dist/client/ui/action_logger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 preStyle = {
Expand Down Expand Up @@ -43,33 +67,82 @@ var btnStyle = {
marginLeft: 5
};

var ActionLogger = function ActionLogger(_ref) {
var actionLog = _ref.actionLog;
var onClear = _ref.onClear;
return _react2.default.createElement(
'div',
{ style: wrapStyle },
_react2.default.createElement(
'h3',
{ style: headStyle },
'ACTION LOGGER',
_react2.default.createElement(
'button',
{ style: btnStyle, onClick: onClear },
'CLEAR'
)
),
_react2.default.createElement(
'pre',
{ style: preStyle },
actionLog
)
);
var latestActionLogStyle = {
backgroundColor: 'oldlace',
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',
{ style: wrapStyle },
_react2.default.createElement(
'h3',
{ style: headStyle },
'ACTION LOGGER',
_react2.default.createElement(
'button',
{ style: btnStyle, 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.oneOfType([_react2.default.PropTypes.array.isRequired, _react2.default.PropTypes.object.isRequired])
};

exports.default = ActionLogger;
13 changes: 1 addition & 12 deletions dist/client/ui/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -99,14 +95,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) {
Expand Down
62 changes: 51 additions & 11 deletions src/client/ui/action_logger.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from 'react';
import React, { Component } from 'react';
import stringify from 'json-stringify-safe';

const preStyle = {
color: '#666',
Expand Down Expand Up @@ -36,19 +37,58 @@ const btnStyle = {
marginLeft: 5,
};

const ActionLogger = ({ actionLog, onClear }) => (
<div style={wrapStyle}>
<h3 style={headStyle}>
ACTION LOGGER
<button style={btnStyle} onClick={onClear}>CLEAR</button>
</h3>
<pre style={preStyle}>{actionLog}</pre>
</div>
);
const latestActionLogStyle = {
backgroundColor: 'oldlace',
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 style={wrapStyle}>
<h3 style={headStyle}>
ACTION LOGGER
<button style={btnStyle} 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.oneOfType([
React.PropTypes.array.isRequired,
React.PropTypes.object.isRequired,
]),
};

export default ActionLogger;
8 changes: 1 addition & 7 deletions src/client/ui/admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -66,12 +65,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} />);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here do not send the whole data, but just send an array of strings. We can do it like this:

export function getActionLogger(data) {
  const { actions = [] } = data;
  const logs = actions
    .map(action => stringify(action, null, 2));

  return (<ActionLogger logs={logs} onClear={clearLogs} />);
}

}

export function renderMain(data) {
Expand Down