Skip to content
Permalink
Browse files
feat: support i18n for more languages (#352)
* i18n for basic ui comment
* i18n for built-in text, such as confirmation, cancellation, etc
* fix style:  1) the menu is not centered  2) style of vertex/edge manipulation
* add additional json configuration and the replacement example
  • Loading branch information
wanganjuan committed Mar 2, 2022
1 parent 8fa714a commit 2e107ceb04c1d705a9fce869f6e81224193626ba
Showing 26 changed files with 849 additions and 136 deletions.
@@ -68,3 +68,11 @@
color: #505f73;
}
}

// i18n style start
.i18n-box {
position: absolute;
top: 19px;
right: 20px
}
// i18n style end
@@ -1,19 +1,31 @@
import React, { useCallback } from 'react';
import React, { useCallback, useState } from 'react';
import { observer } from 'mobx-react';
import { useLocation } from 'wouter';

import { useTranslation } from 'react-i18next'
import { Select } from 'antd';
import './AppBar.less';
const { Option } = Select;

const AppBar: React.FC = observer(() => {
const [_, setLocation] = useLocation();

// init select language
const [languageType, setLanguageType] = useState(localStorage.getItem('languageType') || 'zh-CN')
const { t } = useTranslation()
const setRoute = useCallback(
(route: string) => () => {
setLocation(route);
},
[setLocation]
);

/**
* switch language and update localStorage
*/
const i18Change = (e: string) => {
localStorage.setItem('languageType', e)
setLanguageType(e)
// Refresh directly or through react.createcontext implements no refresh switching
window.location.reload()
}
return (
<nav className="navigator">
<div className="navigator-logo" onClick={setRoute('/')}></div>
@@ -22,12 +34,24 @@ const AppBar: React.FC = observer(() => {
className="navigator-item active"
onClick={setRoute('/graph-management')}
>
<span>图管理</span>
<span>{t('addition.appbar.graph-manager')}</span>
</div>
</div>
<div className="navigator-additions">
<span></span>
</div>
{/* i18n */}
<div className="i18n-box">
<Select
defaultValue={languageType}
style={{ width: 120 }}
size="small"
onChange={i18Change}
>
<Option value="zh-CN">中文</Option>
<Option value="en-US">English</Option>
</Select>
</div>
</nav>
);
});
@@ -24,6 +24,7 @@ import Highlighter from 'react-highlight-words';
import { GraphManagementStoreContext } from '../../stores';
import HintIcon from '../../assets/imgs/ic_question_mark.svg';
import { GraphData } from '../../stores/types/GraphManagementStore/graphManagementStore';
import { useTranslation } from 'react-i18next'

const dropdownList = [
{
@@ -144,6 +145,7 @@ const GraphManagementListItem: React.FC<
index: number;
}
> = observer(({ id, name, graph, host, port, enabled, create_time, index }) => {
const {t} = useTranslation()
const graphManagementStore = useContext(GraphManagementStoreContext);
const [_, setLocation] = useLocation();
const [isEditing, setEditingState] = useState(false);
@@ -290,7 +292,7 @@ const GraphManagementListItem: React.FC<
/>
</div>
<div>
<span>端口号:</span>
<span>{t('addition.graph-list.port')}:</span>
<Input
{...commonInputProps}
placeholder="请输入端口号"
@@ -396,7 +398,7 @@ const GraphManagementListItem: React.FC<
</div>
</div>
<div className="graph-management-list-item">
<div className="graph-management-list-title">端口号</div>
<div className="graph-management-list-title">{t('addition.graph-list.port')}</div>
<div className="graph-management-list-data" title={String(port)}>
{port}
</div>
@@ -664,19 +664,7 @@ const EdgeTypeList: React.FC = observer(() => {
disabled={!isEditEdge}
prefixCls="new-fc-one-select-another"
dropdownMatchSelectWidth={false}
value={
<div
className="new-vertex-type-select"
style={{
background:
edgeTypeStore.editedSelectedEdgeType.style
.color !== null
? edgeTypeStore.editedSelectedEdgeType.style.color.toLowerCase()
: edgeTypeStore.selectedEdgeType!.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
value={edgeTypeStore.editedSelectedEdgeType.style.color}
onChange={(value: string) => {
edgeTypeStore.mutateEditedSelectedEdgeType({
...edgeTypeStore.editedSelectedEdgeType,
@@ -747,28 +735,12 @@ const EdgeTypeList: React.FC = observer(() => {
size="medium"
showSearch={false}
disabled={!isEditEdge}
value={
(
edgeTypeStore.editedSelectedEdgeType.style
.with_arrow !== null
? edgeTypeStore.editedSelectedEdgeType.style
.with_arrow
: edgeTypeStore.selectedEdgeType!.style.with_arrow
) ? (
<div>
<img src={NoSelectedSoilidArrowIcon} />
</div>
) : (
<div style={{ display: 'flex', marginTop: 14 }}>
<img src={NoSelectedSoilidStraightIcon} />
</div>
)
}
value={edgeTypeStore.editedSelectedEdgeType.style.with_arrow}
onChange={(e: any) => {
edgeTypeStore.mutateEditedSelectedEdgeType({
...edgeTypeStore.editedSelectedEdgeType,
style: {
with_arrow: e[0] && e[1] === 'solid',
with_arrow: e,
color:
edgeTypeStore.editedSelectedEdgeType.style
.color !== null
@@ -795,7 +767,7 @@ const EdgeTypeList: React.FC = observer(() => {
>
{edgeTypeStore.edgeShapeSchemas.map((item, index) => (
<Select.Option
value={[item.flag, item.shape]}
value={item.flag}
key={item.flag}
style={{ width: 66 }}
>
@@ -118,15 +118,7 @@ const NewVertexType: React.FC = observer(() => {
<Select
width={66}
size="medium"
value={
<div
className="new-vertex-type-select"
style={{
background: edgeTypeStore.newEdgeType.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
value={edgeTypeStore.newEdgeType.style.color}
prefixCls="new-fc-one-select-another"
dropdownMatchSelectWidth={false}
onChange={(value: string) => {
@@ -172,30 +164,20 @@ const NewVertexType: React.FC = observer(() => {
<Select
width={66}
size="medium"
value={
edgeTypeStore.newEdgeType.style.with_arrow ? (
<div>
<img src={NoSelectedSoilidArrowIcon} />
</div>
) : (
<div style={{ display: 'flex', marginTop: 14 }}>
<img src={NoSelectedSoilidStraightIcon} />
</div>
)
}
value={edgeTypeStore.newEdgeType.style.with_arrow}
onChange={(e: any) => {
edgeTypeStore.mutateNewEdgeType({
...edgeTypeStore.newEdgeType,
style: {
...edgeTypeStore.newEdgeType.style,
with_arrow: e[0] && e[1] === 'solid'
with_arrow: e
}
});
}}
>
{edgeTypeStore.edgeShapeSchemas.map((item, index) => (
<Select.Option
value={[item.flag, item.shape]}
value={item.flag}
key={item.flag}
style={{ width: 66 }}
>
@@ -420,19 +420,7 @@ const CheckAndEditVertex: React.FC = observer(() => {
dropdownMatchSelectWidth={false}
showSearch={false}
disabled={!isEditVertex}
value={
<div
className="new-vertex-type-select"
style={{
background:
vertexTypeStore.editedSelectedVertexType.style.color !==
null
? vertexTypeStore.editedSelectedVertexType.style.color.toLowerCase()
: vertexTypeStore.selectedVertexType!.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
value={vertexTypeStore.editedSelectedVertexType.style.color}
onChange={(value: string) => {
vertexTypeStore.mutateEditedSelectedVertexType({
...vertexTypeStore.editedSelectedVertexType,
@@ -254,15 +254,7 @@ const CreateEdge: React.FC = observer(() => {
width={66}
size="medium"
style={{ marginRight: 12 }}
value={
<div
className="new-vertex-type-select"
style={{
background: edgeTypeStore.newEdgeType.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
value={edgeTypeStore.newEdgeType.style.color}
prefixCls="new-fc-one-select-another"
dropdownMatchSelectWidth={false}
onChange={(value: string) => {
@@ -309,30 +301,20 @@ const CreateEdge: React.FC = observer(() => {
<Select
width={66}
size="medium"
value={
edgeTypeStore.newEdgeType.style.with_arrow ? (
<div>
<img src={NoSelectedSoilidArrowIcon} />
</div>
) : (
<div>
<img src={NoSelectedSoilidStraightIcon} />
</div>
)
}
value={edgeTypeStore.newEdgeType.style.with_arrow }
onChange={(e: any) => {
edgeTypeStore.mutateNewEdgeType({
...edgeTypeStore.newEdgeType,
style: {
...edgeTypeStore.newEdgeType.style,
with_arrow: e && e[0] && e[1] === 'solid'
with_arrow: e
}
});
}}
>
{edgeTypeStore.edgeShapeSchemas.map((item, index) => (
<Select.Option
value={[item.flag, item.shape]}
value={item.flag}
key={item.flag}
style={{ width: 66 }}
>
@@ -290,15 +290,7 @@ const CreateVertex: React.FC = observer(() => {
width={66}
size="medium"
style={{ marginRight: 12 }}
value={
<div
className="new-vertex-type-select"
style={{
background: vertexTypeStore.newVertexType.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
value={vertexTypeStore.newVertexType.style.color}
prefixCls="new-fc-one-select-another"
dropdownMatchSelectWidth={false}
onChange={(value: string) => {
@@ -121,15 +121,7 @@ const NewVertexType: React.FC = observer(() => {
<Select
width={66}
size="medium"
value={
<div
className="new-vertex-type-select"
style={{
background: vertexTypeStore.newVertexType.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
value={vertexTypeStore.newVertexType.style.color}
prefixCls="new-fc-one-select-another"
dropdownMatchSelectWidth={false}
onChange={(value: string) => {
@@ -695,19 +695,7 @@ const VertexTypeList: React.FC = observer(() => {
dropdownMatchSelectWidth={false}
showSearch={false}
disabled={!isEditVertex}
value={
<div
className="new-vertex-type-select"
style={{
background:
vertexTypeStore.editedSelectedVertexType.style
.color !== null
? vertexTypeStore.editedSelectedVertexType.style.color.toLowerCase()
: vertexTypeStore.selectedVertexType!.style.color!.toLowerCase(),
marginTop: 5
}}
></div>
}
value={vertexTypeStore.editedSelectedVertexType.style.color}
onChange={(value: string) => {
vertexTypeStore.mutateEditedSelectedVertexType({
...vertexTypeStore.editedSelectedVertexType,
@@ -1,14 +1,15 @@
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';

import { zhCNResources } from './resources';
import { zhCNResources, enUSResources } from './resources';

i18n.use(initReactI18next).init({
lng: 'zh-CN',
lng: localStorage.getItem('languageType') || 'zh-CN',
fallbackLng: 'zh-CN',

resources: {
'zh-CN': zhCNResources
'zh-CN': zhCNResources,
'en-US': enUSResources
},

interpolation: {

0 comments on commit 2e107ce

Please sign in to comment.