daxi20/AdGuardHome
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

- client: Refactor Setup guide component: Merge pull request #633 in DNS/adguard-home from fix/1740 to master

Browse Source 
Close #1740

Squashed commit of the following:

commit 13593ad7580a0ad5a4d5c0abcb4f67d01ddb944a
Merge: 8cdc68de 1356ac26
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Thu Jun 11 12:02:02 2020 +0300

    Merge branch 'master' into fix/1740

commit 8cdc68debab3f0668ec4aa5cf9b55ce40ddd4985
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 10 19:35:51 2020 +0300

    Update locales with link

commit 320d8d2f189dff594954b3f5964279410594ee29
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 3 16:40:36 2020 +0300

    Refactor Tabs

commit 98bdcdb5eb35448d38ed42aa08cec2fce9ac849e
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed Jun 3 14:01:55 2020 +0300

    Separate content from markup of dns privacy list

commit cee5e5c411d1e9a93a16eba9d78f2f9479d9e729
Author: ArtemBaskal <a.baskal@adguard.com>
Date:   Wed May 27 21:12:11 2020 +0300

    - client: Refactor Setup guide component
This commit is contained in:
Artem Baskal
2020-06-11 12:07:46 +03:00
parent 1356ac2633
commit d1472afb96
18 changed files with 504 additions and 571 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
client/src/components/ui/Tabs.js
View File

@@ -1,68 +1,52 @@
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import Tab from './Tab';
import './Tabs.css';
class Tabs extends Component {
state = {
activeTab: this.props.children[0].props.label,
};
const Tabs = (props) => {
const {
tabs, controlClass, activeTabLabel, setActiveTabLabel, children: activeTab,
} = props;
onClickTabControl = (tab) => {
this.setState({ activeTab: tab });
}
const onClickTabControl = (tabLabel) => setActiveTabLabel(tabLabel);
render() {
const {
props: {
controlClass,
children,
},
state: {
activeTab,
},
} = this;
const getControlClass = classnames({
tabs__controls: true,
[`tabs__controls--${controlClass}`]: controlClass,
});
return (
<div className="tabs">
<div className={getControlClass}>
{children.map((child) => {
const { label, title } = child.props;
const getControlClass = classnames({
tabs__controls: true,
[`tabs__controls--${controlClass}`]: controlClass,
});
return (
<div className="tabs">
<div className={getControlClass}>
{Object.values(tabs)
.map((props) => {
// eslint-disable-next-line react/prop-types
const { title, label = title } = props;
return (
<Tab
key={label}
label={label}
title={title}
activeTab={activeTab}
onClick={this.onClickTabControl}
activeTabLabel={activeTabLabel}
onClick={onClickTabControl}
/>
);
})}
</div>
<div className="tabs__content">
{children.map((child) => {
if (child.props.label !== activeTab) {
return false;
}
return child.props.children;
})}
</div>
</div>
);
}
}
<div className="tabs__content">
{activeTab}
</div>
</div>
);
};
Tabs.propTypes = {
controlClass: PropTypes.string,
children: PropTypes.array.isRequired,
tabs: PropTypes.object.isRequired,
activeTabLabel: PropTypes.string.isRequired,
setActiveTabLabel: PropTypes.func.isRequired,
children: PropTypes.element.isRequired,
};
export default Tabs;