Web: Client: Settings: Updated section header, refactoring
This commit is contained in:
parent
e067346d2c
commit
b35af29ec8
@ -33,7 +33,6 @@ const StyledTreeMenu = styled(TreeMenu)`
|
||||
const getTreeItems = (data, path, t) => {
|
||||
return data.map(item => {
|
||||
if (item.children && item.children.length && !item.isCategory) {
|
||||
const link = path + getSelectedLinkByKey(item.key, settingsTree);
|
||||
return (
|
||||
<TreeNode
|
||||
title={<Text className='inherit-title-link header'>{t(item.tKey)}</Text>}
|
||||
@ -113,7 +112,7 @@ class ArticleBodyContent extends React.Component {
|
||||
if (utils.array.isArrayEqual(value, selectedKeys)) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
||||
this.setState({ selectedKeys: value });
|
||||
};
|
||||
|
||||
|
@ -4,7 +4,7 @@ import { withRouter } from "react-router";
|
||||
import { Headline } from 'asc-web-common';
|
||||
import { IconButton, utils } from "asc-web-components";
|
||||
import { withTranslation } from 'react-i18next';
|
||||
import { getKeyByLink, settingsTree, getTKeyByKey } from '../../../utils';
|
||||
import { getKeyByLink, settingsTree, getTKeyByKey, checkPropertyByLink } from '../../../utils';
|
||||
|
||||
const { tablet } = utils.device;
|
||||
|
||||
@ -40,13 +40,36 @@ class SectionHeaderContent extends React.Component {
|
||||
|
||||
const key = getKeyByLink(arrayOfParams, settingsTree);
|
||||
const header = getTKeyByKey(key, settingsTree);
|
||||
const isCategory = checkPropertyByLink(arrayOfParams, settingsTree, "isCategory");
|
||||
const isHeader = checkPropertyByLink(arrayOfParams, settingsTree, "isHeader");
|
||||
this.state = {
|
||||
header
|
||||
header,
|
||||
isCategoryOrHeader: isCategory || isHeader,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
|
||||
const arrayOfParams = this.getArrayOfParams()
|
||||
|
||||
const key = getKeyByLink(arrayOfParams, settingsTree);
|
||||
const header = getTKeyByKey(key, settingsTree);
|
||||
const isCategory = checkPropertyByLink(arrayOfParams,settingsTree, "isCategory");
|
||||
const isHeader = checkPropertyByLink(arrayOfParams, settingsTree, "isHeader");
|
||||
const isCategoryOrHeader = isCategory || isHeader;
|
||||
|
||||
header !== this.state.header && this.setState({ header });
|
||||
isCategoryOrHeader !== this.state.isCategoryOrHeader && this.setState({ isCategoryOrHeader });
|
||||
}
|
||||
|
||||
onBackToParent = () => {
|
||||
let newArrayOfParams = this.getArrayOfParams();
|
||||
newArrayOfParams.splice(-1, 1);
|
||||
const newPath = "/settings/" + newArrayOfParams.join("/");
|
||||
this.props.history.push(newPath);
|
||||
}
|
||||
|
||||
getArrayOfParams = () => {
|
||||
const { match, location } = this.props;
|
||||
const fullSettingsUrl = match.url;
|
||||
const locationPathname = location.pathname;
|
||||
@ -55,24 +78,17 @@ class SectionHeaderContent extends React.Component {
|
||||
const fullSettingsUrlLength = fullSettingsUrl.length;
|
||||
const resultPath = locationPathname.slice(fullSettingsUrlLength + 1);
|
||||
const arrayOfParams = resultPath.split('/');
|
||||
|
||||
const key = getKeyByLink(arrayOfParams, settingsTree);
|
||||
const header = getTKeyByKey(key, settingsTree);
|
||||
header !== this.state.header && this.setState({ header });
|
||||
|
||||
}
|
||||
|
||||
onBackToParent = () => {
|
||||
console.log("clickToParent")
|
||||
return arrayOfParams;
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t } = this.props;
|
||||
const { header } = this.state;
|
||||
const { header, isCategoryOrHeader } = this.state;
|
||||
const arrayOfParams = this.getArrayOfParams();
|
||||
|
||||
return (
|
||||
<HeaderContainer>
|
||||
{true && (
|
||||
{!isCategoryOrHeader && arrayOfParams[0] &&(
|
||||
<IconButton
|
||||
iconName="ArrowPathIcon"
|
||||
size="17"
|
||||
|
@ -167,13 +167,13 @@ class Customization extends React.Component {
|
||||
|
||||
onClickLink = (e) => {
|
||||
e.preventDefault();
|
||||
const { match, history } = this.props;
|
||||
const { history } = this.props;
|
||||
history.push("/settings/common/customization/language-and-time-zone");
|
||||
}
|
||||
|
||||
render() {
|
||||
const { t, i18n } = this.props;
|
||||
const { isLoadedData, languages, language, isLoading, timezones, timezone, greetingTitle, isLoadingGreetingSave, isLoadingGreetingRestore, basePath } = this.state;
|
||||
const { isLoadedData, languages, language, isLoading, timezones, timezone, greetingTitle, isLoadingGreetingSave, isLoadingGreetingRestore } = this.state;
|
||||
const supportEmail = "documentation@onlyoffice.com";
|
||||
const tooltipLanguage =
|
||||
<Text fontSize='13px'>
|
||||
|
@ -0,0 +1,16 @@
|
||||
export const checkPropertyByLink = (linkArr, data, property, index = 0) => {
|
||||
const length = linkArr.length;
|
||||
const currentElement = linkArr[index];
|
||||
const item = data.find(item => item.link === currentElement);
|
||||
|
||||
if ((index === length - 1 || !item.children) && item) {
|
||||
return item[property];
|
||||
}
|
||||
else if (!item) {
|
||||
return false;
|
||||
}
|
||||
else {
|
||||
const newIndex = index + 1;
|
||||
return checkPropertyByLink(linkArr, item.children, property, newIndex);
|
||||
}
|
||||
}
|
@ -3,4 +3,5 @@ export { settingsTree } from './settingsTree';
|
||||
export { getTKeyByKey } from './getTKeyByKey';
|
||||
export { getSelectedLinkByKey } from './getSelectedLinkByKey';
|
||||
export { selectKeyOfTreeElement } from './selectKeyOfTreeElement';
|
||||
export { getCurrentSettingsCategory } from './getCurrentSettingsCategory';
|
||||
export { getCurrentSettingsCategory } from './getCurrentSettingsCategory';
|
||||
export { checkPropertyByLink } from './checkPropertyByLink';
|
@ -7,6 +7,7 @@ export const settingsTree = [
|
||||
icon: 'SettingsIcon',
|
||||
link: 'common',
|
||||
tKey: 'ManagementCategoryCommon',
|
||||
isHeader: true,
|
||||
children: [
|
||||
{
|
||||
key: '0-0',
|
||||
@ -37,12 +38,14 @@ export const settingsTree = [
|
||||
icon: 'SecurityIcon',
|
||||
link: 'security',
|
||||
tKey: 'ManagementCategorySecurity',
|
||||
isHeader: true,
|
||||
children: [
|
||||
{
|
||||
key: '1-0',
|
||||
icon: '',
|
||||
link: 'accessrights',
|
||||
tKey: 'AccessRights',
|
||||
isCategory: true,
|
||||
},
|
||||
]
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user