2019-11-11 12:28:13 +00:00
|
|
|
import React, { Component } from "react";
|
|
|
|
import PropTypes from "prop-types";
|
2019-11-18 09:40:21 +00:00
|
|
|
|
2021-02-05 12:27:29 +00:00
|
|
|
import Text from "../text";
|
|
|
|
import { NavItem, Label, StyledScrollbar } from "./styled-tabs-container";
|
2019-08-05 13:09:12 +00:00
|
|
|
|
2019-08-06 09:04:01 +00:00
|
|
|
class TabContainer extends Component {
|
2019-08-05 13:09:12 +00:00
|
|
|
constructor(props) {
|
|
|
|
super(props);
|
2019-08-07 08:14:12 +00:00
|
|
|
|
2019-11-20 11:10:35 +00:00
|
|
|
this.arrayRefs = [];
|
2021-03-11 10:43:54 +00:00
|
|
|
const countElements = props.elements.length;
|
2019-11-20 11:10:35 +00:00
|
|
|
|
|
|
|
let item = countElements;
|
|
|
|
while (item !== 0) {
|
|
|
|
this.arrayRefs.push(React.createRef());
|
|
|
|
item--;
|
|
|
|
}
|
|
|
|
|
2019-08-05 13:09:12 +00:00
|
|
|
this.state = {
|
2019-11-25 09:32:18 +00:00
|
|
|
activeTab: this.props.selectedItem,
|
2020-10-16 13:16:01 +00:00
|
|
|
onScrollHide: true,
|
2019-08-05 13:09:12 +00:00
|
|
|
};
|
2019-11-20 11:10:35 +00:00
|
|
|
|
|
|
|
this.scrollRef = React.createRef();
|
2019-08-05 13:09:12 +00:00
|
|
|
}
|
|
|
|
|
2019-11-20 11:10:35 +00:00
|
|
|
titleClick = (index, item, ref) => {
|
2019-08-07 08:14:12 +00:00
|
|
|
if (this.state.activeTab !== index) {
|
|
|
|
this.setState({ activeTab: index });
|
2019-08-07 11:43:24 +00:00
|
|
|
let newItem = Object.assign({}, item);
|
|
|
|
delete newItem.content;
|
|
|
|
this.props.onSelect && this.props.onSelect(newItem);
|
2019-11-20 11:10:35 +00:00
|
|
|
|
2019-11-25 06:23:02 +00:00
|
|
|
this.setTabPosition(index, ref);
|
2019-08-05 13:09:12 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2019-11-25 06:23:02 +00:00
|
|
|
getWidthElements = () => {
|
|
|
|
const arrayWidths = [];
|
|
|
|
const length = this.arrayRefs.length - 1;
|
|
|
|
let widthItem = 0;
|
|
|
|
while (length + 1 !== widthItem) {
|
|
|
|
arrayWidths.push(this.arrayRefs[widthItem].current.offsetWidth);
|
|
|
|
widthItem++;
|
|
|
|
}
|
|
|
|
|
|
|
|
return arrayWidths;
|
|
|
|
};
|
|
|
|
|
2019-11-15 07:15:21 +00:00
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
2019-11-25 09:32:18 +00:00
|
|
|
const { activeTab, onScrollHide } = this.state;
|
2022-03-28 08:11:27 +00:00
|
|
|
const { isDisabled, elements } = this.props;
|
2019-11-20 11:10:35 +00:00
|
|
|
if (
|
|
|
|
activeTab === nextState.activeTab &&
|
2019-11-25 09:32:18 +00:00
|
|
|
isDisabled === nextProps.isDisabled &&
|
2022-03-28 08:11:27 +00:00
|
|
|
onScrollHide === nextState.onScrollHide &&
|
|
|
|
elements.length === nextProps.elements.length
|
2019-11-20 11:10:35 +00:00
|
|
|
) {
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
return true;
|
2019-11-15 07:15:21 +00:00
|
|
|
}
|
|
|
|
|
2019-11-25 06:23:02 +00:00
|
|
|
componentDidMount() {
|
|
|
|
const { activeTab } = this.state;
|
|
|
|
if (activeTab !== 0 && this.arrayRefs[activeTab].current !== null) {
|
2019-12-04 07:41:06 +00:00
|
|
|
this.setPrimaryTabPosition(activeTab);
|
2019-11-25 06:23:02 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
setTabPosition = (index, currentRef) => {
|
|
|
|
const arrayOfWidths = this.getWidthElements(); //get tabs widths
|
|
|
|
const scrollLeft = this.scrollRef.current.getScrollLeft(); // get scroll position relative to left side
|
|
|
|
const staticScroll = this.scrollRef.current.getScrollWidth(); //get static scroll width
|
|
|
|
const containerWidth = this.scrollRef.current.getClientWidth(); //get main container width
|
|
|
|
const currentTabWidth = currentRef.current.offsetWidth;
|
|
|
|
const marginRight = 8;
|
|
|
|
|
|
|
|
//get tabs of left side
|
|
|
|
let leftTabs = 0;
|
|
|
|
let leftFullWidth = 0;
|
|
|
|
while (leftTabs !== index) {
|
|
|
|
leftTabs++;
|
|
|
|
leftFullWidth += arrayOfWidths[leftTabs] + marginRight;
|
|
|
|
}
|
|
|
|
leftFullWidth += arrayOfWidths[0] + marginRight;
|
|
|
|
|
|
|
|
//get tabs of right side
|
|
|
|
let rightTabs = this.arrayRefs.length - 1;
|
|
|
|
let rightFullWidth = 0;
|
|
|
|
while (rightTabs !== index - 1) {
|
|
|
|
rightFullWidth += arrayOfWidths[rightTabs] + marginRight;
|
|
|
|
rightTabs--;
|
|
|
|
}
|
|
|
|
|
|
|
|
//Out of range of left side
|
|
|
|
if (leftFullWidth > containerWidth + scrollLeft) {
|
|
|
|
let prevIndex = index - 1;
|
|
|
|
let widthBlocksInContainer = 0;
|
|
|
|
while (prevIndex !== -1) {
|
|
|
|
widthBlocksInContainer += arrayOfWidths[prevIndex] + marginRight;
|
|
|
|
prevIndex--;
|
|
|
|
}
|
|
|
|
|
|
|
|
const difference = containerWidth - widthBlocksInContainer;
|
|
|
|
const currentContainerWidth = currentTabWidth;
|
|
|
|
|
|
|
|
this.scrollRef.current.scrollLeft(
|
|
|
|
difference * -1 + currentContainerWidth + marginRight
|
|
|
|
);
|
|
|
|
}
|
|
|
|
//Out of range of left side
|
|
|
|
else if (rightFullWidth > staticScroll - scrollLeft) {
|
|
|
|
this.scrollRef.current.scrollLeft(staticScroll - rightFullWidth);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
setPrimaryTabPosition = (index) => {
|
2019-11-25 06:23:02 +00:00
|
|
|
const arrayOfWidths = this.getWidthElements(); //get tabs widths
|
|
|
|
const marginRight = 8;
|
|
|
|
let rightTabs = this.arrayRefs.length - 1;
|
|
|
|
let rightFullWidth = 0;
|
|
|
|
while (rightTabs !== index - 1) {
|
|
|
|
rightFullWidth += arrayOfWidths[rightTabs] + marginRight;
|
|
|
|
rightTabs--;
|
|
|
|
}
|
2019-12-04 13:23:24 +00:00
|
|
|
rightFullWidth -= marginRight;
|
2019-11-25 06:23:02 +00:00
|
|
|
const staticScroll = this.scrollRef.current.getScrollWidth(); //get static scroll width
|
|
|
|
this.scrollRef.current.scrollLeft(staticScroll - rightFullWidth);
|
|
|
|
};
|
|
|
|
|
2019-11-25 09:32:18 +00:00
|
|
|
onMouseEnter = () => {
|
|
|
|
this.setState({ onScrollHide: false });
|
|
|
|
};
|
|
|
|
|
|
|
|
onMouseLeave = () => {
|
|
|
|
this.setState({ onScrollHide: true });
|
|
|
|
};
|
|
|
|
|
2019-08-06 15:46:16 +00:00
|
|
|
render() {
|
2019-11-15 07:15:21 +00:00
|
|
|
//console.log("Tabs container render");
|
2019-11-11 12:28:13 +00:00
|
|
|
|
2021-03-11 10:43:54 +00:00
|
|
|
const { isDisabled, elements } = this.props;
|
2019-11-25 09:32:18 +00:00
|
|
|
const { activeTab, onScrollHide } = this.state;
|
2019-11-20 11:10:35 +00:00
|
|
|
|
2019-08-05 13:09:12 +00:00
|
|
|
return (
|
2019-11-25 09:32:18 +00:00
|
|
|
<>
|
|
|
|
<StyledScrollbar
|
|
|
|
autoHide={onScrollHide}
|
|
|
|
stype="preMediumBlack"
|
2019-11-20 11:10:35 +00:00
|
|
|
className="scrollbar"
|
|
|
|
ref={this.scrollRef}
|
|
|
|
>
|
2019-11-25 13:08:22 +00:00
|
|
|
<NavItem className="className_items">
|
2021-03-11 10:43:54 +00:00
|
|
|
{elements.map((item, index) => (
|
2019-11-12 06:52:27 +00:00
|
|
|
<Label
|
2019-11-25 13:08:22 +00:00
|
|
|
onMouseMove={this.onMouseEnter}
|
|
|
|
onMouseLeave={this.onMouseLeave}
|
2019-11-20 11:10:35 +00:00
|
|
|
ref={this.arrayRefs[index]}
|
|
|
|
onClick={this.titleClick.bind(
|
|
|
|
this,
|
|
|
|
index,
|
|
|
|
item,
|
|
|
|
this.arrayRefs[index]
|
|
|
|
)}
|
2019-11-12 06:52:27 +00:00
|
|
|
key={item.key}
|
2019-11-20 11:10:35 +00:00
|
|
|
selected={activeTab === index}
|
2019-11-12 06:52:27 +00:00
|
|
|
isDisabled={isDisabled}
|
|
|
|
>
|
2022-04-18 15:34:09 +00:00
|
|
|
<Text fontWeight={600} className="title_style" fontSize="13px">
|
2019-11-12 06:52:27 +00:00
|
|
|
{item.title}
|
2019-12-04 09:36:13 +00:00
|
|
|
</Text>
|
2019-11-12 06:52:27 +00:00
|
|
|
</Label>
|
|
|
|
))}
|
|
|
|
</NavItem>
|
2019-11-25 09:32:18 +00:00
|
|
|
</StyledScrollbar>
|
2021-03-11 10:43:54 +00:00
|
|
|
<div>{elements[activeTab].content}</div>
|
2019-11-25 09:32:18 +00:00
|
|
|
</>
|
2019-08-05 13:09:12 +00:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2019-08-06 09:04:01 +00:00
|
|
|
TabContainer.propTypes = {
|
2021-03-11 09:48:03 +00:00
|
|
|
/** Child elements */
|
2021-03-11 10:43:54 +00:00
|
|
|
elements: PropTypes.PropTypes.arrayOf(PropTypes.object.isRequired).isRequired,
|
2021-03-11 09:48:03 +00:00
|
|
|
/** Disable the TabContainer */
|
2019-08-06 15:46:16 +00:00
|
|
|
isDisabled: PropTypes.bool,
|
2021-03-11 09:48:03 +00:00
|
|
|
/** Triggered when a title is selected */
|
2019-08-07 11:43:24 +00:00
|
|
|
onSelect: PropTypes.func,
|
2021-03-11 09:48:03 +00:00
|
|
|
/** Selected title of tabs container */
|
2020-10-16 13:16:01 +00:00
|
|
|
selectedItem: PropTypes.number,
|
2019-08-05 13:09:12 +00:00
|
|
|
};
|
2019-08-05 16:05:03 +00:00
|
|
|
|
2019-08-07 11:43:24 +00:00
|
|
|
TabContainer.defaultProps = {
|
2020-10-16 13:16:01 +00:00
|
|
|
selectedItem: 0,
|
2019-11-11 12:28:13 +00:00
|
|
|
};
|
2019-08-07 11:43:24 +00:00
|
|
|
|
2019-11-11 12:28:13 +00:00
|
|
|
export default TabContainer;
|