Show errors in content

This commit is contained in:
sienori 2019-02-23 02:30:34 +09:00
parent 669073d64b
commit 063aa7f31f
5 changed files with 41 additions and 23 deletions

View 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;
};

View file

@ -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>

View file

@ -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>
);

View file

@ -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 {

View file

@ -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));