Show errors in content
This commit is contained in:
parent
669073d64b
commit
063aa7f31f
17
src/common/getErrorMessage.js
Normal file
17
src/common/getErrorMessage.js
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import browser from "webextension-polyfill";
|
||||||
|
|
||||||
|
export default statusText => {
|
||||||
|
let errorMessage = "";
|
||||||
|
switch (statusText) {
|
||||||
|
case "Network Error":
|
||||||
|
errorMessage = browser.i18n.getMessage("networkError");
|
||||||
|
break;
|
||||||
|
case "Service Unavailable":
|
||||||
|
errorMessage = browser.i18n.getMessage("unavailableError");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
errorMessage = `${browser.i18n.getMessage("unknownError")} [${statusText}]`;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
return errorMessage;
|
||||||
|
};
|
|
@ -62,7 +62,8 @@ export default class TranslateContainer extends Component {
|
||||||
shouldShowPanel: false,
|
shouldShowPanel: false,
|
||||||
panelPosition: { x: 0, y: 0 },
|
panelPosition: { x: 0, y: 0 },
|
||||||
resultText: "",
|
resultText: "",
|
||||||
candidateText: ""
|
candidateText: "",
|
||||||
|
statusText: "OK"
|
||||||
};
|
};
|
||||||
this.selectedText = "";
|
this.selectedText = "";
|
||||||
this.init();
|
this.init();
|
||||||
|
@ -121,7 +122,8 @@ export default class TranslateContainer extends Component {
|
||||||
shouldShowPanel: true,
|
shouldShowPanel: true,
|
||||||
panelPosition: position,
|
panelPosition: position,
|
||||||
resultText: result.resultText,
|
resultText: result.resultText,
|
||||||
candidateText: getSettings("ifShowCandidate") ? result.candidateText : ""
|
candidateText: getSettings("ifShowCandidate") ? result.candidateText : "",
|
||||||
|
statusText: result.statusText
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -176,6 +178,7 @@ export default class TranslateContainer extends Component {
|
||||||
position={this.state.panelPosition}
|
position={this.state.panelPosition}
|
||||||
resultText={this.state.resultText}
|
resultText={this.state.resultText}
|
||||||
candidateText={this.state.candidateText}
|
candidateText={this.state.candidateText}
|
||||||
|
statusText={this.state.statusText}
|
||||||
hidePanel={this.hidePanel}
|
hidePanel={this.hidePanel}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,8 +1,14 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import ReactDOM from "react-dom";
|
import ReactDOM from "react-dom";
|
||||||
import { getSettings } from "src/settings/settings";
|
import { getSettings } from "src/settings/settings";
|
||||||
|
import getErrorMessage from "src/common/getErrorMessage";
|
||||||
import "../styles/TranslatePanel.scss";
|
import "../styles/TranslatePanel.scss";
|
||||||
|
|
||||||
|
const splitLine = text => {
|
||||||
|
const regex = /(\n)/g;
|
||||||
|
return text.split(regex).map((line, i) => (line.match(regex) ? <br key={i} /> : line));
|
||||||
|
};
|
||||||
|
|
||||||
export default class TranslatePanel extends Component {
|
export default class TranslatePanel extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
|
@ -75,6 +81,8 @@ export default class TranslatePanel extends Component {
|
||||||
};
|
};
|
||||||
|
|
||||||
render = () => {
|
render = () => {
|
||||||
|
const { shouldShow, resultText, candidateText, statusText } = this.props;
|
||||||
|
const isError = statusText !== "OK";
|
||||||
const { width, height } = this.state.shouldResize
|
const { width, height } = this.state.shouldResize
|
||||||
? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
|
? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
|
||||||
: { width: this.state.panelWidth, height: this.state.panelHeight };
|
: { width: this.state.panelWidth, height: this.state.panelHeight };
|
||||||
|
@ -99,17 +107,22 @@ export default class TranslatePanel extends Component {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={`simple-translate-panel ${this.props.shouldShow ? "isShow" : ""}`}
|
className={`simple-translate-panel ${shouldShow ? "isShow" : ""}`}
|
||||||
ref="panel"
|
ref="panel"
|
||||||
style={panelStyles}
|
style={panelStyles}
|
||||||
>
|
>
|
||||||
<div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
|
<div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
|
||||||
<p className="simple-translate-result" style={resultStyles}>
|
<p className="simple-translate-result" style={resultStyles}>
|
||||||
{this.props.resultText}
|
{splitLine(resultText)}
|
||||||
</p>
|
</p>
|
||||||
<p className="simple-translate-candidate" style={candidateStyles}>
|
<p className="simple-translate-candidate" style={candidateStyles}>
|
||||||
{this.props.candidateText}
|
{splitLine(candidateText)}
|
||||||
</p>
|
</p>
|
||||||
|
{isError && (
|
||||||
|
<p className="simple-translate-error" style={candidateStyles}>
|
||||||
|
{getErrorMessage(statusText)}
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
|
@ -43,7 +43,8 @@
|
||||||
&.simple-translate-result {
|
&.simple-translate-result {
|
||||||
color: var(--simple-translate-main-text);
|
color: var(--simple-translate-main-text);
|
||||||
}
|
}
|
||||||
&.simple-translate-candidate {
|
&.simple-translate-candidate,
|
||||||
|
&.simple-translate-error {
|
||||||
color: var(--simple-translate-sub-text);
|
color: var(--simple-translate-sub-text);
|
||||||
margin-top: 1em;
|
margin-top: 1em;
|
||||||
&:empty {
|
&:empty {
|
||||||
|
|
|
@ -1,23 +1,7 @@
|
||||||
import React from "react";
|
import React from "react";
|
||||||
import browser from "webextension-polyfill";
|
import getErrorMessage from "src/common/getErrorMessage";
|
||||||
import "../styles/ResultArea.scss";
|
import "../styles/ResultArea.scss";
|
||||||
|
|
||||||
const getErrorMessage = statusText => {
|
|
||||||
let errorMessage = "";
|
|
||||||
switch (statusText) {
|
|
||||||
case "":
|
|
||||||
errorMessage = browser.i18n.getMessage("networkError");
|
|
||||||
break;
|
|
||||||
case "Service Unavailable":
|
|
||||||
errorMessage = browser.i18n.getMessage("unavailableError");
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
errorMessage = `${browser.i18n.getMessage("unknownError")} [${statusText}]`;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
return errorMessage;
|
|
||||||
};
|
|
||||||
|
|
||||||
const splitLine = text => {
|
const splitLine = text => {
|
||||||
const regex = /(\n)/g;
|
const regex = /(\n)/g;
|
||||||
return text.split(regex).map((line, i) => (line.match(regex) ? <br key={i} /> : line));
|
return text.split(regex).map((line, i) => (line.match(regex) ? <br key={i} /> : line));
|
||||||
|
|
Loading…
Reference in a new issue