/
createMathComponent.js
61 lines (48 loc) · 1.33 KB
/
createMathComponent.js
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
import React from 'react'
import PropTypes from 'prop-types'
import katex from 'katex/dist/katex.min.js'
const createMathComponent = (Component, { displayMode }) => {
class MathComponent extends React.Component {
constructor (props) {
super(props)
this.usedProp = props.math ? 'math' : 'children'
this.state = this.createNewState(null, props)
}
componentWillReceiveProps () {
this.setState(this.createNewState)
}
shouldComponentUpdate (nextProps) {
return nextProps[this.usedProp] !== this.props[this.usedProp]
}
createNewState (prevState, props) {
try {
const html = this.generateHtml(props)
return { html, error: undefined }
} catch (error) {
return { error, html: undefined }
}
}
generateHtml (props) {
return katex.renderToString(
props[this.usedProp],
{ displayMode }
)
}
render () {
if (this.state.html) {
return <Component html={this.state.html} />
}
if (this.props.renderError) {
return this.props.renderError(this.state.error)
}
throw this.state.error
}
}
MathComponent.propTypes = {
children: PropTypes.string,
math: PropTypes.string,
renderError: PropTypes.func
}
return MathComponent
}
export default createMathComponent