-
Notifications
You must be signed in to change notification settings - Fork 241
/
Container.jsx
107 lines (88 loc) · 2.3 KB
/
Container.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React, { Component, PropTypes } from 'react'
import Knex from 'knex'
import Sidebar from './Sidebar'
import LanguageSelect from './LanguageSelect'
import Fork from './Fork'
export default class Container extends Component {
static propTypes = {
children: PropTypes.node.isRequired
};
static childContextTypes = {
knexSubscribe: PropTypes.func.isRequired,
runKnex: PropTypes.func.isRequired
};
constructor() {
super()
this.state = {
language: 'mysql'
}
}
registry = new Set();
changeLanguage = (language) => {
try {
localStorage.knexLanguage = language
} catch (e) {} // eslint-disable-line
this.setState({ language }, this.initKnex)
};
initKnex() {
this.knex = Knex({client: this.state.language})
this.knex.client.transacting = true
this.trx = this.knex
this.registry.forEach(component => component.forceUpdate())
if (typeof window !== 'undefined') {
window.knex = this.knex
}
}
componentWillMount() {
this.initKnex()
if (typeof window !== 'undefined') {
window.Knex = Knex
}
}
componentDidMount() {
const next = localStorage.knexLanguage
if (next && next !== 'mysql') {
this.changeLanguage(next)
}
}
knexSubscribe = component => {
this.registry.add(component)
return () => this.registry.remove(component)
};
runKnex = code => {
let output
try {
const blocks = code.split('\n\n')
blocks[blocks.length - 1] = `return (${blocks[blocks.length - 1]}).toString()`
output = new Function('knex', 'trx', blocks.join('\n\n'))(this.knex, this.trx)
} catch (e) {
output = {error: e.message}
}
return output
};
getChildContext() {
return {
knexSubscribe: this.knexSubscribe,
runKnex: this.runKnex
}
}
render() {
const {state: { language }, props: { children, version }} = this
return (
<div>
{/* Sidebar */}
<Sidebar sections={children} version={version} />
{/* Select Language */}
<LanguageSelect
language={language}
changeLanguage={this.changeLanguage} />
{/* Fork Me */}
<Fork {...this.props} />
{/* Container elements */}
<div className="container">
{children}
</div>
</div>
)
}
}