forked from swagger-api/swagger-ui
/
highlight-code.jsx
78 lines (64 loc) · 2.37 KB
/
highlight-code.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
import React, { Component } from "react"
import PropTypes from "prop-types"
import {SyntaxHighlighter, getStyle} from "core/syntax-highlighting"
import get from "lodash/get"
import saveAs from "js-file-download"
import { CopyToClipboard } from "react-copy-to-clipboard"
export default class HighlightCode extends Component {
static propTypes = {
value: PropTypes.string.isRequired,
getConfigs: PropTypes.func.isRequired,
className: PropTypes.string,
downloadable: PropTypes.bool,
fileName: PropTypes.string,
language: PropTypes.string,
canCopy: PropTypes.bool
}
downloadText = () => {
saveAs(this.props.value, this.props.fileName || "response.txt")
}
preventYScrollingBeyondElement = (e) => {
const target = e.target
var deltaY = e.nativeEvent.deltaY
var contentHeight = target.scrollHeight
var visibleHeight = target.offsetHeight
var scrollTop = target.scrollTop
const scrollOffset = visibleHeight + scrollTop
const isElementScrollable = contentHeight > visibleHeight
const isScrollingPastTop = scrollTop === 0 && deltaY < 0
const isScrollingPastBottom = scrollOffset >= contentHeight && deltaY > 0
if (isElementScrollable && (isScrollingPastTop || isScrollingPastBottom)) {
e.preventDefault()
}
}
render () {
let { value, className, downloadable, getConfigs, canCopy, language } = this.props
const config = getConfigs ? getConfigs() : {syntaxHighlight: {activated: true, theme: "agate"}}
className = className || ""
const codeBlock = get(config, "syntaxHighlight.activated")
? <SyntaxHighlighter
language={language}
className={className + " microlight"}
onWheel={this.preventYScrollingBeyondElement}
style={getStyle(get(config, "syntaxHighlight.theme"))}
>
{value}
</SyntaxHighlighter>
: <pre onWheel={this.preventYScrollingBeyondElement} className={className + " microlight"}>{value}</pre>
return (
<div className="highlight-code">
{ !downloadable ? null :
<div className="download-contents" onClick={this.downloadText}>
Download
</div>
}
{ !canCopy ? null :
<div className="copy-to-clipboard">
<CopyToClipboard text={value}><button/></CopyToClipboard>
</div>
}
{ codeBlock }
</div>
)
}
}