kyy/swagger-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Copy response to clipboard #4300 (#5278)

Browse Source 
* Move next to download button and match styling

Co-authored-by: Aldrin Abastillas <AAbastillas@rcanalytics.com>
Co-authored-by: Tim Lai <timothy.lai@gmail.com>
This commit is contained in:
Aldrin Abastillas
2020-06-15 18:08:10 -04:00
committed by GitHub
parent f8dd4e68ec
commit 973e1f7a9b
9 changed files with 295 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
src/core/components/highlight-code.jsx
View File

@@ -2,13 +2,15 @@ import React, { Component } from "react"
import PropTypes from "prop-types"
import { highlight } from "core/utils"
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,
className: PropTypes.string,
downloadable: PropTypes.bool,
fileName: PropTypes.string
fileName: PropTypes.string,
canCopy: PropTypes.bool
}
componentDidMount() {
@@ -47,7 +49,7 @@ export default class HighlightCode extends Component {
}
render () {
let { value, className, downloadable } = this.props
let { value, className, downloadable, canCopy } = this.props
className = className || ""
return (
@@ -57,6 +59,13 @@ export default class HighlightCode extends Component {
Download
</div>
}
{ !canCopy ? null :
<div className="copy-to-clipboard">
<CopyToClipboard text={value}><button/></CopyToClipboard>
</div>
}
<pre
ref={this.initializeComponent}
onWheel={this.preventYScrollingBeyondElement}

10
src/core/components/response-body.jsx
View File

@@ -99,7 +99,7 @@ export default class ResponseBody extends React.PureComponent {
body = "can't parse JSON. Raw result:\n\n" + content
}
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.json`} value={ body } />
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.json`} value={ body } canCopy />
// XML
} else if (/xml/i.test(contentType)) {
@@ -107,11 +107,11 @@ export default class ResponseBody extends React.PureComponent {
textNodesOnSameLine: true,
indentor: " "
})
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} value={ body } />
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.xml`} value={ body } canCopy />
// HTML or Plain Text
} else if (toLower(contentType) === "text/html" || /text\/plain/.test(contentType)) {
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} value={ content } />
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.html`} value={ content } canCopy />
// Image
} else if (/^image\//i.test(contentType)) {
@@ -125,7 +125,7 @@ export default class ResponseBody extends React.PureComponent {
} else if (/^audio\//i.test(contentType)) {
bodyEl = <pre className="microlight"><audio controls><source src={ url } type={ contentType } /></audio></pre>
} else if (typeof content === "string") {
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ content } />
bodyEl = <HighlightCode downloadable fileName={`${downloadName}.txt`} value={ content } canCopy />
} else if ( content.size > 0 ) {
// We don't know the contentType, but there was some content returned
if(parsedContent) {
@@ -135,7 +135,7 @@ export default class ResponseBody extends React.PureComponent {
<p className="i">
Unrecognized response type; displaying content as text.
</p>
<HighlightCode downloadable fileName={`${downloadName}.txt`} value={ parsedContent } />
<HighlightCode downloadable fileName={`${downloadName}.txt`} value={ parsedContent } canCopy />
</div>
} else {