Added translation to Tabs
Implemented the change to SpaceSettings as an example.
This commit is contained in:
parent
9f921bd8a6
commit
1ed9d6de78
4 changed files with 26 additions and 4 deletions
|
@ -30,5 +30,12 @@
|
||||||
"uncategorize_subspaces": "Uncategorize subspaces",
|
"uncategorize_subspaces": "Uncategorize subspaces",
|
||||||
"pin_sidebar": "Pin to sidebar",
|
"pin_sidebar": "Pin to sidebar",
|
||||||
"unpin_sidebar": "Unpin from sidebar"
|
"unpin_sidebar": "Unpin from sidebar"
|
||||||
|
},
|
||||||
|
"settings":{
|
||||||
|
"tabs": {
|
||||||
|
"general": "General",
|
||||||
|
"members": "Members",
|
||||||
|
"permission": "Permissions"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -5,5 +5,12 @@
|
||||||
},
|
},
|
||||||
"welcome":{
|
"welcome":{
|
||||||
"heading": "いらっしゃいませ"
|
"heading": "いらっしゃいませ"
|
||||||
|
},
|
||||||
|
"settings":{
|
||||||
|
"tabs": {
|
||||||
|
"general": "一般",
|
||||||
|
"members": "ユーザー",
|
||||||
|
"permission": "許可"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -5,6 +5,9 @@ import './Tabs.scss';
|
||||||
import Button from '../button/Button';
|
import Button from '../button/Button';
|
||||||
import ScrollView from '../scroll/ScrollView';
|
import ScrollView from '../scroll/ScrollView';
|
||||||
|
|
||||||
|
import '../../i18n.jsx'
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
function TabItem({
|
function TabItem({
|
||||||
selected, iconSrc,
|
selected, iconSrc,
|
||||||
onClick, children, disabled,
|
onClick, children, disabled,
|
||||||
|
@ -41,6 +44,8 @@ TabItem.propTypes = {
|
||||||
function Tabs({ items, defaultSelected, onSelect }) {
|
function Tabs({ items, defaultSelected, onSelect }) {
|
||||||
const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
|
const [selectedItem, setSelectedItem] = useState(items[defaultSelected]);
|
||||||
|
|
||||||
|
const { t } = useTranslation();
|
||||||
|
|
||||||
const handleTabSelection = (item, index) => {
|
const handleTabSelection = (item, index) => {
|
||||||
if (selectedItem === item) return;
|
if (selectedItem === item) return;
|
||||||
setSelectedItem(item);
|
setSelectedItem(item);
|
||||||
|
@ -59,7 +64,7 @@ function Tabs({ items, defaultSelected, onSelect }) {
|
||||||
disabled={item.disabled}
|
disabled={item.disabled}
|
||||||
onClick={() => handleTabSelection(item, index)}
|
onClick={() => handleTabSelection(item, index)}
|
||||||
>
|
>
|
||||||
{item.text}
|
{(item.translate != undefined && item.translate) ? t(item.text) : item.text}
|
||||||
</TabItem>
|
</TabItem>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -44,23 +44,26 @@ import '../../i18n.jsx'
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
const tabText = {
|
const tabText = {
|
||||||
GENERAL: 'General',
|
GENERAL: 'settings.tabs.general',
|
||||||
MEMBERS: 'Members',
|
MEMBERS: 'settings.tabs.members',
|
||||||
PERMISSIONS: 'Permissions',
|
PERMISSIONS: 'settings.tabs.permission',
|
||||||
};
|
};
|
||||||
|
|
||||||
const tabItems = [{
|
const tabItems = [{
|
||||||
iconSrc: SettingsIC,
|
iconSrc: SettingsIC,
|
||||||
text: tabText.GENERAL,
|
text: tabText.GENERAL,
|
||||||
|
translate: true,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
}, {
|
}, {
|
||||||
iconSrc: UserIC,
|
iconSrc: UserIC,
|
||||||
text: tabText.MEMBERS,
|
text: tabText.MEMBERS,
|
||||||
|
translate: true,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
}, {
|
}, {
|
||||||
iconSrc: ShieldUserIC,
|
iconSrc: ShieldUserIC,
|
||||||
text: tabText.PERMISSIONS,
|
text: tabText.PERMISSIONS,
|
||||||
disabled: false,
|
disabled: false,
|
||||||
|
translate: true
|
||||||
}];
|
}];
|
||||||
|
|
||||||
function GeneralSettings({ roomId }) {
|
function GeneralSettings({ roomId }) {
|
||||||
|
|
Loading…
Reference in a new issue