+ client: split settings page into several pages

client/src/components/ui/Dropdown.js

@@ -0,0 +1,89 @@
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import { withNamespaces } from 'react-i18next';
+import enhanceWithClickOutside from 'react-click-outside';
+
+import './Dropdown.css';
+
+class Dropdown extends Component {
+    state = {
+        isOpen: false,
+    };
+
+    toggleDropdown = () => {
+        this.setState(prevState => ({ isOpen: !prevState.isOpen }));
+    };
+
+    hideDropdown = () => {
+        this.setState({ isOpen: false });
+    };
+
+    handleClickOutside = () => {
+        if (this.state.isOpen) {
+            this.hideDropdown();
+        }
+    };
+
+    render() {
+        const {
+            label,
+            controlClassName,
+            menuClassName,
+            baseClassName,
+            icon,
+            children,
+        } = this.props;
+
+        const { isOpen } = this.state;
+
+        const dropdownClass = classnames({
+            [baseClassName]: true,
+            show: isOpen,
+        });
+
+        const dropdownMenuClass = classnames({
+            [menuClassName]: true,
+            show: isOpen,
+        });
+
+        const ariaSettings = isOpen ? 'true' : 'false';
+
+        return (
+            <div className={dropdownClass}>
+                <a
+                    className={controlClassName}
+                    aria-expanded={ariaSettings}
+                    onClick={this.toggleDropdown}
+                >
+                    {icon && (
+                        <svg className="nav-icon">
+                            <use xlinkHref={`#${icon}`} />
+                        </svg>
+                    )}
+                    {label}
+                </a>
+                <div className={dropdownMenuClass} onClick={this.hideDropdown}>
+                    {children}
+                </div>
+            </div>
+        );
+    }
+}
+
+Dropdown.defaultProps = {
+    baseClassName: 'dropdown',
+    menuClassName: 'dropdown-menu dropdown-menu-arrow',
+    controlClassName: '',
+};
+
+Dropdown.propTypes = {
+    label: PropTypes.string.isRequired,
+    children: PropTypes.node.isRequired,
+    controlClassName: PropTypes.node.isRequired,
+    menuClassName: PropTypes.string.isRequired,
+    baseClassName: PropTypes.string.isRequired,
+    icon: PropTypes.string,
+};
+
+export default withNamespaces()(enhanceWithClickOutside(Dropdown));