Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 45a2eca

Browse files
Ji-YuhangJi-Yuhang
committedNov 14, 2017
save state to localStorage
1 parent 717fcdf commit 45a2eca

File tree

3 files changed

+136
-87
lines changed

3 files changed

+136
-87
lines changed
 

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"start": "roadhog server",
55
"build": "roadhog build",
66
"lint": "eslint --ext .js src test",
7-
"precommit": "npm run lint"
7+
"commit-precommit": "npm run lint"
88
},
99
"engines": {
1010
"install-node": "6.9.2"

‎src/components/AppView.js

+120-75
Original file line numberDiff line numberDiff line change
@@ -8,47 +8,86 @@ class AppView extends Component {
88
console.log('AppView props', props)
99
let strs = "abcdefghigklmnopqrst"
1010
let strArray = strs.split("")
11-
// let nodes = []
12-
// _.forEach(strArray,(v,k)=>{
13-
// console.log(k,v)
14-
// nodes.push({
15-
// id: k,
16-
// text: v
17-
// })
18-
// })
11+
12+
// this.state = {
13+
// data: {children:[{id: 'default'}]},
14+
// }
15+
this.buildDefaultData();
16+
17+
if (false) this.buildTestData();
18+
}
19+
componentWillMount = () => {
20+
const json = localStorage.getItem("NodeJSON");
21+
if (json) {
22+
this.parseJson(json);
23+
} else {
24+
this.buildDefaultData();
25+
}
26+
27+
28+
document.onkeydown = (e) => {
29+
let currKey=0;
30+
e=e||event;
31+
currKey=e.keyCode||e.which||e.charCode;//支持IE、FF
32+
if (currKey == 83 && e.ctrlKey){
33+
console.log('Ctrl + S, save',e,event)
34+
this.save();
35+
if(event){
36+
e.returnValue = false;
37+
}else{
38+
e.preventDefault();
39+
}
40+
}
41+
// if(currKey==27){ // 按 Esc
42+
// //要做的事情
43+
// }
44+
// if(currKey==113){ // 按 F2
45+
// //要做的事情
46+
// }
47+
};
48+
}
49+
componentWillUnmount = () => {
50+
this.save();
51+
}
52+
save = () => {
53+
const json = this.toJson()
54+
localStorage.setItem("NodeJSON", json);
55+
56+
}
57+
58+
59+
60+
buildTestData = () => {
1961
let originData = [
62+
{
63+
id: 1,
64+
text: '1',
65+
children: [
2066
{
21-
id: 1,
22-
text: '1',
23-
children: [
24-
{
25-
id: 2,
26-
text: '2',
27-
},
28-
{
29-
id: 3,
30-
text: '3',
31-
},
32-
]
67+
id: 2,
68+
text: '2',
3369
},
3470
{
35-
id: 4,
36-
text: '4',
37-
children: [
38-
{
39-
id: 5,
40-
text: '5',
41-
},
42-
{
43-
id: 6,
44-
text: '6',
45-
},
46-
]
47-
}
48-
];
49-
50-
// let releations = {}
51-
// releations
71+
id: 3,
72+
text: '3',
73+
},
74+
]
75+
},
76+
{
77+
id: 4,
78+
text: '4',
79+
children: [
80+
{
81+
id: 5,
82+
text: '5',
83+
},
84+
{
85+
id: 6,
86+
text: '6',
87+
},
88+
]
89+
}
90+
];
5291
let {nodes, releations} = this.parseOriginData({id: 'root'}, originData)
5392
let rootNode = {id: 'root'}
5493
this.generateStateData(rootNode, nodes, releations)
@@ -57,39 +96,42 @@ class AppView extends Component {
5796
nodes,
5897
releations
5998
}
60-
// this.state = {
61-
// data: [
62-
// {
63-
// id: 1,
64-
// text: 'a',
65-
// children: [
66-
// {
67-
// id: 2,
68-
// text: 'b',
69-
// },
70-
// {
71-
// id: 3,
72-
// text: 'c',
73-
// },
74-
// ]
75-
// },
76-
// {
77-
// id: 4,
78-
// text: 'a',
79-
// children: [
80-
// {
81-
// id: 5,
82-
// text: 'b',
83-
// },
84-
// {
85-
// id: 6,
86-
// text: 'c',
87-
// },
88-
// ]
89-
// }
90-
// ],
91-
// version: 1
92-
// }
99+
}
100+
101+
buildDefaultData = () => {
102+
let originData = [
103+
{
104+
id: 'default',
105+
text: '',
106+
}
107+
];
108+
let {nodes, releations} = this.parseOriginData({id: 'root'}, originData)
109+
let rootNode = {id: 'root'}
110+
this.generateStateData(rootNode, nodes, releations)
111+
this.state = {
112+
data: rootNode,
113+
nodes,
114+
releations,
115+
focusId: 'default',
116+
}
117+
}
118+
119+
toJson = () => {
120+
const {data,node,releations} = this.state;
121+
const json = JSON.stringify(data.children);
122+
return json;
123+
}
124+
125+
parseJson = (json) => {
126+
const object = JSON.parse(json)
127+
let {nodes, releations} = this.parseOriginData({id: 'root'}, object)
128+
let rootNode = {id: 'root'}
129+
this.generateStateData(rootNode, nodes, releations)
130+
this.setState({
131+
data: rootNode,
132+
nodes,
133+
releations
134+
})
93135
}
94136

95137
parseOriginData = (root,data) => {
@@ -207,7 +249,7 @@ class AppView extends Component {
207249
data: rootNode,
208250
nodes,
209251
releations
210-
})
252+
}, () => this.save())
211253

212254
// let temp = data
213255
// while(!_.isEmpty(temp)) {
@@ -377,7 +419,7 @@ class AppView extends Component {
377419
data: rootNode,
378420
nodes,
379421
releations
380-
})
422+
}, () => this.save())
381423

382424
// _.flattenDeep(data).find( (obj)=> obj.id == id).text = text
383425
// this.setState({data})
@@ -432,7 +474,7 @@ class AppView extends Component {
432474

433475
}
434476
onFocusChanged = (id, isFocus)=> {
435-
console.log('onFocusChanged',id, isFocus)
477+
// console.log('onFocusChanged',id, isFocus)
436478
let {focusId} = this.state
437479
if (isFocus) focusId = id
438480
else focusId = null
@@ -447,16 +489,19 @@ class AppView extends Component {
447489
let new_releation = {id: new_id}
448490
let node = _.find(releations,(d)=> d.id == id)
449491
let firstChild = _.find(releations,(d)=> d.parent_id == id && d.left_id == null)
450-
let rightNode = _.find(releations,(d)=> d.parent_id == id && d.left_id == id)
492+
let rightNode = _.find(releations,(d)=> d.parent_id == node.parent_id && d.left_id == id)
451493

452494
if (firstChild){
453495
// 插入第一个孩子位置
496+
console.log('插入第一个孩子位置', node ,firstChild)
454497
new_releation.parent_id = node.id
455498
new_releation.left_id = null
456499
new_releation.right_id = firstChild.id
457500
firstChild.left_id = new_releation.id
458501
} else {
459502
// 插入当前位置后面
503+
console.log('插入当前位置后面', node ,rightNode)
504+
460505
new_releation.parent_id = node.parent_id
461506
new_releation.left_id = node.id
462507
new_releation.right_id = null
@@ -479,7 +524,7 @@ class AppView extends Component {
479524
nodes,
480525
releations,
481526
focusId: new_releation.id
482-
})
527+
}, () => this.save())
483528
console.log('end onPressEnter setState' ,rootNode,nodes, _.cloneDeep(releations))
484529
this.printReleations(_.cloneDeep(releations))
485530

‎src/components/NodeView.js

+15-11
Original file line numberDiff line numberDiff line change
@@ -39,18 +39,18 @@ class NodeView extends Component {
3939
}
4040
}
4141
onBlur = (e)=>{
42-
console.log('onBlur',e)
42+
// console.log('onBlur',e)
4343
const {onFocusChanged,id} = this.props
4444
if(onFocusChanged)onFocusChanged(id, false)
4545
}
4646
onFocus = (e)=>{
4747
const {onFocusChanged,id} = this.props
48-
console.log('onFocus',e)
48+
// console.log('onFocus',e)
4949
if(onFocusChanged)onFocusChanged(id, true)
5050
}
5151
onPressEnter = (e)=>{
5252
const {onPressEnter,id} = this.props
53-
console.log('onPressEnter',e)
53+
// console.log('onPressEnter',e)
5454
if(onPressEnter)onPressEnter(id)
5555

5656
}
@@ -59,7 +59,7 @@ class NodeView extends Component {
5959

6060
return (
6161
<div style={{
62-
marginLeft: 10,
62+
marginLeft: 0,
6363
display: 'flex',
6464
alignItems: 'center',
6565
justifyContent: 'center',
@@ -84,11 +84,11 @@ class NodeView extends Component {
8484
justifyContent: 'center',
8585
}}>
8686
<div style={{
87-
border: '4px solid #666',
88-
'-webkit-border-radius': 4,
89-
'-moz-border-radius': 4,
90-
'-ms-border-radius': 4,
91-
borderRadius: 4,}}></div></div>
87+
border: '3px solid #666',
88+
'-webkit-border-radius': 3,
89+
'-moz-border-radius': 3,
90+
'-ms-border-radius':3,
91+
borderRadius: 3,}}></div></div>
9292
{/* <Badge status="default"/> */}
9393
<Input
9494
style={{
@@ -109,8 +109,11 @@ class NodeView extends Component {
109109
)
110110
}
111111
render() {
112-
const {root, text, children, onTextChange, onTabChange,focusId,onFocusChanged,onPressEnter} = this.props
112+
const {root, text, children, onTextChange, onTabChange,focusId,onFocusChanged,onPressEnter, id} = this.props
113113
const borderLeft = root ? '0px solid #e5e5e5' : '1px solid #e5e5e5'
114+
const borderColor = focusId == id ? '#c8c8c8' : '#e5e5e5'
115+
116+
114117
return (
115118
<div style={{
116119
display: 'flex',
@@ -126,7 +129,8 @@ class NodeView extends Component {
126129
style={{
127130
marginLeft: 15,
128131
paddingLeft: 15,
129-
borderLeft: borderLeft
132+
borderLeft: borderLeft,
133+
borderColor: borderColor,
130134
}}>
131135
{_.map(children, (node) => {
132136
return (

0 commit comments

Comments
 (0)
Please sign in to comment.