Skip to content

Commit 0bbf804

Browse files
rydangrydang
committed
Merge branch 'dev' into rydang/treeinitial
2 parents 4539b8b + 26c2e5e commit 0bbf804

File tree

14 files changed

+2283
-2304
lines changed

14 files changed

+2283
-2304
lines changed

‎package-lock.json

Lines changed: 2103 additions & 2202 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,8 @@
5050
"rc-tooltip": "^3.7.3",
5151
"react": "^16.8.6",
5252
"react-dom": "^16.8.6",
53-
"react-json-view": "^1.19.1",
53+
"react-json-tree": "^0.11.2",
54+
"redux-devtools-themes": "^1.0.0",
5455
"sass": "^1.22.7"
5556
}
5657
}

‎src/app/components/Action.jsx

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,33 @@
1-
import React, { Component } from 'react';
1+
import React from 'react';
22
import PropTypes from 'prop-types';
33

44
const Action = (props) => {
55
const {
6-
selected, handleChangeSnapshot, handleSendSnapshot, index,
6+
selected, handleChangeSnapshot, handleJumpSnapshot, index,
77
} = props;
88
return (
99
<div
1010
className={selected ? 'action-component selected' : 'action-component'}
11-
onClick={() => {
12-
handleChangeSnapshot(index);
13-
}}
11+
onClick={() => handleChangeSnapshot(index)}
12+
role="presentation"
1413
>
1514
<div className="action-component-text">{index}</div>
16-
<div className="jump-button" onClick={() => handleSendSnapshot(index)}>
15+
<div
16+
className="jump-button"
17+
onClick={() => handleJumpSnapshot(index)}
18+
onKeyPress={() => console.log('key pressed')}
19+
tabIndex={index}
20+
role="button"
21+
>
1722
Jump
1823
</div>
1924
</div>
2025
);
2126
};
2227

23-
Action.propTypes = {
24-
selected: PropTypes.bool,
25-
index: PropTypes.number,
26-
};
28+
// Action.propTypes = {
29+
// selected: PropTypes.bool,
30+
// index: PropTypes.number,
31+
// };
2732

2833
export default Action;

‎src/app/components/Slider.jsx

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -5,49 +5,48 @@ import Tooltip from 'rc-tooltip';
55
import 'rc-slider/assets/index.css';
66
import 'rc-tooltip/assets/bootstrap.css';
77

8-
const Handle = Slider.Handle;
9-
8+
const { Handle } = Slider;
109

1110
const handle = (props) => {
12-
const { value, dragging, index, ...restProps } = props;
13-
14-
return (
15-
<Tooltip
16-
prefixCls="rc-slider-tooltip"
17-
overlay={value}
18-
visible={dragging}
19-
placement="top"
20-
key={index}
21-
>
22-
<Handle value={value} {...restProps} />
23-
</Tooltip>
24-
);
11+
const {
12+
value, dragging, index, ...restProps
13+
} = props;
14+
15+
return (
16+
<Tooltip
17+
prefixCls="rc-slider-tooltip"
18+
overlay={value}
19+
visible={dragging}
20+
placement="top"
21+
key={index}
22+
>
23+
<Handle value={value} {...restProps} />
24+
</Tooltip>
25+
);
2526
};
2627

2728
class mainSlider extends Component {
28-
constructor(props){
29-
super(props)
30-
}
29+
constructor(props) {
30+
super(props);
31+
}
3132

32-
33-
render(){
34-
return(
35-
<div>
36-
<Slider
37-
min={0}
38-
max={this.props.snapshotLength-1}
39-
value = {this.props.snapshotIndex}
40-
onChange={(index) => {
41-
index = index === -1 ? 0 : index;
42-
this.props.handleChangeSnapshot(index)
43-
}}
44-
handle={handle}
45-
>
46-
</Slider>
47-
</div>
48-
)
49-
}
33+
render() {
34+
return (
35+
<div>
36+
<Slider
37+
min={0}
38+
max={this.props.snapshotLength - 1}
39+
value={this.props.snapshotIndex}
40+
onChange={(index) => {
41+
index = index === -1 ? 0 : index;
42+
this.props.handleChangeSnapshot(index);
43+
this.props.handleJumpSnapshot(index);
44+
}}
45+
handle={handle}
46+
/>
47+
</div>
48+
);
49+
}
5050
}
5151

5252
export default mainSlider;
53-

‎src/app/containers/ActionContainer.jsx

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,11 @@ class ActionContainer extends Component {
88

99
render() {
1010
const {
11-
snapshots, snapshotIndex, handleChangeSnapshot, handleSendSnapshot,
11+
snapshots,
12+
snapshotIndex,
13+
handleChangeSnapshot,
14+
handleJumpSnapshot,
15+
emptySnapshot,
1216
} = this.props;
1317
let actionsArr = [];
1418
if (snapshots.length > 0) {
@@ -21,15 +25,15 @@ class ActionContainer extends Component {
2125
snapshot={snapshot}
2226
selected={selected}
2327
handleChangeSnapshot={handleChangeSnapshot}
24-
handleSendSnapshot={handleSendSnapshot}
28+
handleJumpSnapshot={handleJumpSnapshot}
2529
/>
2630
);
2731
});
2832
}
2933
return (
3034
<div className="action-container">
3135
<div className="action-component">
32-
<div className="empty-button" onClick={this.props.emptySnapshot}>
36+
<div className="empty-button" onClick={emptySnapshot}>
3337
emptySnapshot
3438
</div>
3539
</div>

‎src/app/containers/MainContainer.jsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,17 @@ import StateContainer from './StateContainer';
55
import TravelContainer from './TravelContainer';
66

77
class MainContainer extends Component {
8-
constructor() {
9-
super();
8+
constructor(props) {
9+
super(props);
1010
this.state = {
1111
snapshots: [],
12-
snapshotsTree: null,
1312
snapshotIndex: 0,
1413
currentIndex: null,
1514
port: null,
1615
};
17-
1816
this.handleChangeSnapshot = this.handleChangeSnapshot.bind(this);
1917
this.handleSendSnapshot = this.handleSendSnapshot.bind(this);
18+
this.handleJumpSnapshot = this.handleJumpSnapshot.bind(this);
2019
this.emptySnapshot = this.emptySnapshot.bind(this);
2120
}
2221

@@ -44,8 +43,8 @@ class MainContainer extends Component {
4443

4544
emptySnapshot() {
4645
const { port } = this.state;
47-
this.setState({ snapshots: [] , snapshotIndex: 0 });
48-
port.postMessage({ action: 'emptySnap'});
46+
this.setState({ snapshots: [], snapshotIndex: 0 });
47+
port.postMessage({ action: 'emptySnap' });
4948
}
5049

5150
// change the snapshot index
@@ -57,6 +56,12 @@ class MainContainer extends Component {
5756
this.setState({ snapshotIndex });
5857
}
5958

59+
handleJumpSnapshot(snapshotIndex) {
60+
const { snapshots, port } = this.state;
61+
this.setState({ currentIndex: snapshotIndex });
62+
port.postMessage({ action: 'jumpToSnap', payload: snapshots[snapshotIndex] });
63+
}
64+
6065
// when the jump button is clicked, send a message to npm package with the selected snapshot
6166
handleSendSnapshot(snapshotIndex) {
6267
const { snapshots, port } = this.state;
@@ -88,7 +93,6 @@ class MainContainer extends Component {
8893

8994
render() {
9095
const { snapshots, snapshotIndex } = this.state;
91-
9296
return (
9397
<div className="main-container">
9498
<HeadContainer />
@@ -97,14 +101,15 @@ class MainContainer extends Component {
97101
snapshots={snapshots}
98102
snapshotIndex={snapshotIndex}
99103
handleChangeSnapshot={this.handleChangeSnapshot}
100-
handleSendSnapshot={this.handleSendSnapshot}
104+
handleJumpSnapshot={this.handleJumpSnapshot}
101105
emptySnapshot={this.emptySnapshot}
102106
/>
103107
<StateContainer snapshot={snapshots[snapshotIndex]} />
104108
</div>
105109
<TravelContainer
106110
snapshotsLength={snapshots.length}
107111
handleChangeSnapshot={this.handleChangeSnapshot}
112+
handleJumpSnapshot={this.handleJumpSnapshot}
108113
snapshotIndex={snapshotIndex}
109114
/>
110115
</div>

‎src/app/containers/StateContainer.jsx

Lines changed: 62 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,76 @@
11
import React, { Component } from 'react';
2-
import ReactJson from 'react-json-view';
2+
import JSONTree from 'react-json-tree';
3+
import * as themes from 'redux-devtools-themes';
34

4-
const JsonDisplay = (snapshot, index) => (
5-
<ReactJson
6-
key={`JsonDisplay${index}`}
7-
enableClipboard={false}
8-
theme="solarized"
9-
groupArraysAfterLength={50}
10-
src={snapshot}
11-
/>
5+
const getItemString = (type, data, itemType, itemString) => (
6+
<span>
7+
//
8+
{type}
9+
</span>
1210
);
11+
1312
class StateContainer extends Component {
1413
constructor(props) {
1514
super(props);
15+
console.log(themes);
1616
}
1717

1818
render() {
19-
let snapshotObjs = [];
2019
const { snapshot } = this.props;
21-
if (snapshot) {
22-
snapshotObjs = snapshot.map((component, index) => JsonDisplay(component, index));
23-
}
24-
return <div className="state-container">{snapshotObjs}</div>;
20+
return (
21+
<div className="state-container">
22+
{snapshot && (
23+
<JSONTree
24+
data={snapshot}
25+
theme={{ tree: () => ({ className: 'json-tree' }) }}
26+
getItemString={getItemString}
27+
/>
28+
)}
29+
</div>
30+
);
2531
}
2632
}
2733

2834
export default StateContainer;
35+
36+
// const theme = {
37+
// scheme: 'monokai',
38+
// author: 'wimer hazenberg (http://www.monokai.nl)',
39+
// base00: '#272822',
40+
// base01: '#383830',
41+
// base02: '#49483e',
42+
// base03: '#75715e',
43+
// base04: '#a59f85',
44+
// base05: '#f8f8f2',
45+
// base06: '#f5f4f1',
46+
// base07: '#f9f8f5',
47+
// base08: '#f92672',
48+
// base09: '#fd971f',
49+
// base0A: '#f4bf75',
50+
// base0B: '#a6e22e',
51+
// base0C: '#a1efe4',
52+
// base0D: '#66d9ef',
53+
// base0E: '#ae81ff',
54+
// base0F: '#cc6633',
55+
// };
56+
57+
// const theme = {
58+
// scheme: 'nicinabox',
59+
// author: 'nicinabox (http://github.com/nicinabox)',
60+
// base00: '#2A2F3A',
61+
// base01: '#3C444F',
62+
// base02: '#4F5A65',
63+
// base03: '#BEBEBE',
64+
// base04: '#b0b0b0', // based on ocean theme
65+
// base05: '#d0d0d0', // based on ocean theme
66+
// base06: '#FFFFFF',
67+
// base07: '#f5f5f5', // based on ocean theme
68+
// base08: '#fb9fb1', // based on ocean theme
69+
// base09: '#FC6D24',
70+
// base0A: '#ddb26f', // based on ocean theme
71+
// base0B: '#A1C659',
72+
// base0C: '#12cfc0', // based on ocean theme
73+
// base0D: '#6FB3D2',
74+
// base0E: '#D381C3',
75+
// base0F: '#deaf8f', // based on ocean theme
76+
// };

‎src/app/containers/TravelContainer.jsx

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
11
import React, { Component } from 'react';
2-
import Slider from '../components/Slider'
3-
4-
5-
2+
import Slider from '../components/Slider';
63

74
class TravelContainer extends Component {
85
constructor(props) {
@@ -12,17 +9,17 @@ class TravelContainer extends Component {
129
render() {
1310
return (
1411
<div>
15-
<div className="travel-container">TravelContainer</div>
16-
<Slider
17-
className="travel-slider"
18-
snapshotLength = {this.props.snapshotsLength}
19-
handleChangeSnapshot = {this.props.handleChangeSnapshot}
20-
snapshotIndex = {this.props.snapshotIndex}
21-
/>
22-
{`travelContainer snapshotIndex ${this.props.snapshotIndex}`}
12+
<div className="travel-container">TravelContainer</div>
13+
<Slider
14+
className="travel-slider"
15+
snapshotLength={this.props.snapshotsLength}
16+
handleChangeSnapshot={this.props.handleChangeSnapshot}
17+
handleJumpSnapshot={this.props.handleJumpSnapshot}
18+
snapshotIndex={this.props.snapshotIndex}
19+
/>
20+
{`travelContainer snapshotIndex ${this.props.snapshotIndex}`}
2321
</div>
24-
)
25-
22+
);
2623
}
2724
}
2825
export default TravelContainer;

‎src/app/styles/components/_jsonTree.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
.json-tree {
2+
margin: 0;
3+
padding: 10px;
4+
background-color: $brand-color;
5+
list-style: none;
6+
min-width: 300px;
7+
}

‎src/app/styles/layout/_stateContainer.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.state-container {
2+
font-size: 15px;
3+
flex: 6 auto;
4+
height: 100%;
5+
overflow: scroll;
6+
background-color: $brand-color;
7+
}
8+
9+
// .state-container ul {
10+
// background-color: $brand-color;
11+
// }

0 commit comments

Comments
 (0)