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,
|
||||
panelPosition: { x: 0, y: 0 },
|
||||
resultText: "",
|
||||
candidateText: ""
|
||||
candidateText: "",
|
||||
statusText: "OK"
|
||||
};
|
||||
this.selectedText = "";
|
||||
this.init();
|
||||
|
@ -121,7 +122,8 @@ export default class TranslateContainer extends Component {
|
|||
shouldShowPanel: true,
|
||||
panelPosition: position,
|
||||
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}
|
||||
resultText={this.state.resultText}
|
||||
candidateText={this.state.candidateText}
|
||||
statusText={this.state.statusText}
|
||||
hidePanel={this.hidePanel}
|
||||
/>
|
||||
</div>
|
||||
|
|
|
@ -1,8 +1,14 @@
|
|||
import React, { Component } from "react";
|
||||
import ReactDOM from "react-dom";
|
||||
import { getSettings } from "src/settings/settings";
|
||||
import getErrorMessage from "src/common/getErrorMessage";
|
||||
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 {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
@ -75,6 +81,8 @@ export default class TranslatePanel extends Component {
|
|||
};
|
||||
|
||||
render = () => {
|
||||
const { shouldShow, resultText, candidateText, statusText } = this.props;
|
||||
const isError = statusText !== "OK";
|
||||
const { width, height } = this.state.shouldResize
|
||||
? { width: parseInt(getSettings("width")), height: parseInt(getSettings("height")) }
|
||||
: { width: this.state.panelWidth, height: this.state.panelHeight };
|
||||
|
@ -99,17 +107,22 @@ export default class TranslatePanel extends Component {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={`simple-translate-panel ${this.props.shouldShow ? "isShow" : ""}`}
|
||||
className={`simple-translate-panel ${shouldShow ? "isShow" : ""}`}
|
||||
ref="panel"
|
||||
style={panelStyles}
|
||||
>
|
||||
<div className="simple-translate-result-wrapper" ref="wrapper" style={wrapperStyles}>
|
||||
<p className="simple-translate-result" style={resultStyles}>
|
||||
{this.props.resultText}
|
||||
{splitLine(resultText)}
|
||||
</p>
|
||||
<p className="simple-translate-candidate" style={candidateStyles}>
|
||||
{this.props.candidateText}
|
||||
{splitLine(candidateText)}
|
||||
</p>
|
||||
{isError && (
|
||||
<p className="simple-translate-error" style={candidateStyles}>
|
||||
{getErrorMessage(statusText)}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -43,7 +43,8 @@
|
|||
&.simple-translate-result {
|
||||
color: var(--simple-translate-main-text);
|
||||
}
|
||||
&.simple-translate-candidate {
|
||||
&.simple-translate-candidate,
|
||||
&.simple-translate-error {
|
||||
color: var(--simple-translate-sub-text);
|
||||
margin-top: 1em;
|
||||
&:empty {
|
||||
|
|
|
@ -1,23 +1,7 @@
|
|||
import React from "react";
|
||||
import browser from "webextension-polyfill";
|
||||
import getErrorMessage from "src/common/getErrorMessage";
|
||||
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 regex = /(\n)/g;
|
||||
return text.split(regex).map((line, i) => (line.match(regex) ? <br key={i} /> : line));
|
||||
|
|
Loading…
Reference in a new issue