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

54
client/src/components/ui/Tab.js
View File

@@ -1,40 +1,34 @@
import React, { Component } from 'react';
import React from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { useTranslation } from 'react-i18next';
class Tab extends Component {
handleClick = () => {
this.props.onClick(this.props.label);
}
const Tab = ({
activeTabLabel, label, title, onClick,
}) => {
const [t] = useTranslation();
const handleClick = () => onClick(label);
render() {
const {
activeTab,
label,
title,
} = this.props;
const tabClass = classnames({
tab__control: true,
'tab__control--active': activeTabLabel === label,
});
const tabClass = classnames({
tab__control: true,
'tab__control--active': activeTab === label,
});
return (
<div
className={tabClass}
onClick={this.handleClick}
>
<svg className="tab__icon">
<use xlinkHref={`#${label.toLowerCase()}`} />
</svg>
{title || label}
</div>
);
}
}
return (
<div
className={tabClass}
onClick={handleClick}
>
<svg className="tab__icon">
<use xlinkHref={`#${label.toLowerCase()}`} />
</svg>
{t(title || label)}
</div>
);
};
Tab.propTypes = {
activeTab: PropTypes.string.isRequired,
activeTabLabel: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
onClick: PropTypes.func.isRequired,
title: PropTypes.string,