108 lines
2.7 KiB
JavaScript
108 lines
2.7 KiB
JavaScript
import React, { useState } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
|
|
import './UserPreferencesTabs.styl';
|
|
|
|
/**
|
|
* Render tab component
|
|
* @param {object} tab TabObject containing tab data
|
|
* @param {function} onTabStateChanged Callback Function in case tab changes its state
|
|
* @param {function} onTabErrorChanged Callback Function in case any error on tab
|
|
*/
|
|
const renderTab = (
|
|
tab = {},
|
|
tabsState,
|
|
tabsError,
|
|
onTabStateChanged,
|
|
onTabErrorChanged
|
|
) => {
|
|
const { props, Component, name, hidden = false } = tab;
|
|
|
|
const tabState = tabsState[name];
|
|
const tabError = tabsError[name];
|
|
|
|
return !hidden ? (
|
|
<form className="form-themed themed tabs">
|
|
<div className="form-content">
|
|
<Component
|
|
key={name}
|
|
{...tabState}
|
|
{...props}
|
|
name={name}
|
|
tabError={tabError}
|
|
onTabStateChanged={onTabStateChanged}
|
|
onTabErrorChanged={onTabErrorChanged}
|
|
></Component>
|
|
</div>
|
|
</form>
|
|
) : null;
|
|
};
|
|
|
|
const renderTabsHeader = (tabs, activeTabIndex, onHeaderChanged) => {
|
|
return tabs.length > 0
|
|
? tabs.map((tab, index) => {
|
|
const { name, hidden = false } = tab;
|
|
|
|
const cypressSelectorId = name.toLowerCase();
|
|
const tabClass =
|
|
index === activeTabIndex ? 'nav-link active' : 'nav-link';
|
|
return !hidden ? (
|
|
<li
|
|
key={name}
|
|
onClick={() => {
|
|
onHeaderChanged(index);
|
|
}}
|
|
className={tabClass}
|
|
data-cy={cypressSelectorId}
|
|
>
|
|
<button>{name}</button>
|
|
</li>
|
|
) : null;
|
|
})
|
|
: null;
|
|
};
|
|
/**
|
|
* Component to render tabs based on currentActiveTabIndex
|
|
*
|
|
* In case any tab changes its state this current component tells parent through function callback
|
|
* @param {object} props Component props
|
|
*/
|
|
function UserPreferencesTabs({
|
|
tabs,
|
|
tabsState,
|
|
tabsError,
|
|
onTabStateChanged,
|
|
onTabErrorChanged,
|
|
}) {
|
|
const [activeTabIndex, setActiveTabIndex] = useState(0);
|
|
|
|
return (
|
|
<div className="UserPreferencesTabs">
|
|
<div className="UserPreferencesTabs__selector">
|
|
<div className="dialog-separator-after">
|
|
<ul className="nav nav-tabs">
|
|
{renderTabsHeader(tabs, activeTabIndex, setActiveTabIndex)}
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
{renderTab(
|
|
tabs[activeTabIndex],
|
|
tabsState,
|
|
tabsError,
|
|
onTabStateChanged,
|
|
onTabErrorChanged
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
UserPreferencesTabs.propTypes = {
|
|
tabs: PropTypes.array.isRequired,
|
|
tabsState: PropTypes.object.isRequired,
|
|
tabsError: PropTypes.object.isRequired,
|
|
onTabStateChanged: PropTypes.func.isRequired,
|
|
onTabErrorChanged: PropTypes.func.isRequired,
|
|
};
|
|
|
|
export { UserPreferencesTabs };
|