Web: Components: added adaptive scroll tabs to tabs-container
This commit is contained in:
parent
be54f99b1d
commit
61e4355d72
@ -89,11 +89,22 @@ class TabContainer extends Component {
|
||||
delete newItem.content;
|
||||
this.props.onSelect && this.props.onSelect(newItem);
|
||||
|
||||
const position = ref.current.offsetLeft - 40;
|
||||
this.scrollRef.current.scrollLeft(position);
|
||||
this.setTabPosition(index, ref);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
const { activeTab } = this.state;
|
||||
const { isDisabled } = this.props;
|
||||
@ -106,6 +117,96 @@ class TabContainer extends Component {
|
||||
return true;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
const { activeTab } = this.state;
|
||||
if (activeTab !== 0 && this.arrayRefs[activeTab].current !== null) {
|
||||
this.secondFunction(activeTab);
|
||||
}
|
||||
console.log("this.scrollRef", this.scrollRef);
|
||||
console.log(
|
||||
"componentDidMount scroll",
|
||||
this.scrollRef.current.getClientWidth()
|
||||
); //get main container width)
|
||||
}
|
||||
|
||||
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
|
||||
//console.log("containerWidth", containerWidth);
|
||||
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);
|
||||
}
|
||||
};
|
||||
|
||||
/*firstFunction = () => {
|
||||
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
|
||||
);
|
||||
}*/
|
||||
|
||||
secondFunction = index => {
|
||||
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--;
|
||||
}
|
||||
|
||||
const staticScroll = this.scrollRef.current.getScrollWidth(); //get static scroll width
|
||||
this.scrollRef.current.scrollLeft(staticScroll - rightFullWidth);
|
||||
};
|
||||
|
||||
render() {
|
||||
//console.log("Tabs container render");
|
||||
|
||||
@ -115,9 +216,10 @@ class TabContainer extends Component {
|
||||
return (
|
||||
<TabsContainer>
|
||||
<Scrollbar
|
||||
values={this.onScrollFrame}
|
||||
autoHide
|
||||
autoHideTimeout={1000}
|
||||
//values={this.onScrollFrame}
|
||||
//autoHide
|
||||
//autoHideTimeout={1000}
|
||||
stype="mediumBlack"
|
||||
className="scrollbar"
|
||||
ref={this.scrollRef}
|
||||
>
|
||||
|
@ -167,6 +167,72 @@ const scrollArrayItems = [
|
||||
<input />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "tab6",
|
||||
title: "short container",
|
||||
content: (
|
||||
<div>
|
||||
<button>button</button>
|
||||
<button>button</button>
|
||||
<button>button</button>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "tab7",
|
||||
title: "Very long tabs-container field",
|
||||
content: (
|
||||
<div>
|
||||
<label>label</label>
|
||||
<label>label</label>
|
||||
<label>label</label>
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "tab8",
|
||||
title: "tab container",
|
||||
content: (
|
||||
<div>
|
||||
<input />
|
||||
<input />
|
||||
<input />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "tab9",
|
||||
title: "Short___",
|
||||
content: (
|
||||
<div>
|
||||
<input />
|
||||
<input />
|
||||
<input />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "tab10",
|
||||
title: "Short__2",
|
||||
content: (
|
||||
<div>
|
||||
<input />
|
||||
<input />
|
||||
<input />
|
||||
</div>
|
||||
)
|
||||
},
|
||||
{
|
||||
key: "tab11",
|
||||
title: "TabsContainer",
|
||||
content: (
|
||||
<div>
|
||||
<input />
|
||||
<input />
|
||||
<input />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
@ -189,10 +255,67 @@ storiesOf("Components|TabContainer", module)
|
||||
<h5 style={{ marginTop: 100, marginBottom: 20 }}>
|
||||
TabsContainer with auto scroll:
|
||||
</h5>
|
||||
<TabContainer isDisabled={boolean("isDisabled", false)}>
|
||||
<TabContainer
|
||||
isDisabled={boolean("isDisabled", false)}
|
||||
selectedItem={3}
|
||||
>
|
||||
{scrollArrayItems}
|
||||
</TabContainer>
|
||||
</div>
|
||||
|
||||
<div style={{ marginTop: 32, maxWidth: 430 }}>
|
||||
<h5 style={{ marginTop: 100, marginBottom: 20 }}>
|
||||
TabsContainer with auto scroll:
|
||||
</h5>
|
||||
<TabContainer
|
||||
isDisabled={boolean("isDisabled", false)}
|
||||
selectedItem={5}
|
||||
>
|
||||
{[{
|
||||
key: "tab0",
|
||||
title: "Title00000000",
|
||||
content: <label>LABEL</label>
|
||||
},
|
||||
{
|
||||
key: "tab1",
|
||||
title: "Title00000001",
|
||||
content: <label>LABEL</label>
|
||||
},
|
||||
{
|
||||
key: "tab2",
|
||||
title: "Title00000002",
|
||||
content: <label>LABEL</label>
|
||||
},{
|
||||
key: "tab3",
|
||||
title: "Title00000003",
|
||||
content: <label>LABEL</label>
|
||||
},{
|
||||
key: "tab4",
|
||||
title: "Title00000004",
|
||||
content: <label>LABEL</label>
|
||||
},{
|
||||
key: "tab5",
|
||||
title: "Title00000005",
|
||||
content: <label>LABEL</label>
|
||||
},{
|
||||
key: "tab6",
|
||||
title: "Title00000006",
|
||||
content: <label>LABEL</label>
|
||||
},{
|
||||
key: "tab7",
|
||||
title: "Title00000007",
|
||||
content: <label>LABEL</label>
|
||||
},{
|
||||
key: "tab8",
|
||||
title: "Title00000008",
|
||||
content: <label>LABEL</label>
|
||||
},{
|
||||
key: "tab9",
|
||||
title: "Title00000009",
|
||||
content: <label>LABEL</label>
|
||||
}]}
|
||||
</TabContainer>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
});
|
||||
|
Loading…
Reference in New Issue
Block a user