Web:Common:Navigation: fixed root item height
This commit is contained in:
parent
42780a5480
commit
defb0a387d
@ -152,7 +152,7 @@ const DropBox = React.forwardRef(
|
|||||||
const countItems = navigationItems.length;
|
const countItems = navigationItems.length;
|
||||||
|
|
||||||
const getItemSize = (index) => {
|
const getItemSize = (index) => {
|
||||||
if (index === countItems - 1) return 29;
|
if (index === countItems - 1) return 31;
|
||||||
return isMobile || IsMobileUtils() || isTabletUtils() ? 36 : 30;
|
return isMobile || IsMobileUtils() || isTabletUtils() ? 36 : 30;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -160,41 +160,13 @@ const DropBox = React.forwardRef(
|
|||||||
const itemsHeight = navigationItems.map((item, index) => getItemSize(index));
|
const itemsHeight = navigationItems.map((item, index) => getItemSize(index));
|
||||||
|
|
||||||
const currentHeight = itemsHeight.reduce((a, b) => a + b);
|
const currentHeight = itemsHeight.reduce((a, b) => a + b);
|
||||||
console.log(
|
// 22 is padding-bottom last item
|
||||||
currentHeight,
|
// 109 is nav height + height section header
|
||||||
window.innerHeight,
|
return currentHeight + 22 > window.innerHeight - 109
|
||||||
currentHeight + 30 > window.innerHeight - 110
|
? window.innerHeight - 109
|
||||||
? window.innerHeight - 110
|
: currentHeight + 22;
|
||||||
: currentHeight + 20,
|
|
||||||
);
|
|
||||||
return currentHeight + 30 > window.innerHeight - 110
|
|
||||||
? window.innerHeight - 110
|
|
||||||
: currentHeight + 20;
|
|
||||||
}, [height]);
|
}, [height]);
|
||||||
|
|
||||||
// useEffect(() => {
|
|
||||||
// const items = [];
|
|
||||||
// const itemsText = [];
|
|
||||||
// const sectionWidth = document.getElementById('section').offsetWidth;
|
|
||||||
// navigationItems.forEach((item) => {
|
|
||||||
// items.push(document.getElementById(item.id));
|
|
||||||
// itemsText.push(document.getElementById(`item-text-${item.id}`));
|
|
||||||
// });
|
|
||||||
// let maxTextWidth = 0;
|
|
||||||
|
|
||||||
// itemsText.forEach((item) => {
|
|
||||||
// item.offsetWidth > maxTextWidth ? (maxTextWidth = item.offsetWidth) : null;
|
|
||||||
// });
|
|
||||||
|
|
||||||
// if (sectionWidth < maxTextWidth + 57) {
|
|
||||||
// setCurrentWidth(sectionWidth);
|
|
||||||
// } else {
|
|
||||||
// setCurrentWidth(maxTextWidth + 57);
|
|
||||||
// }
|
|
||||||
|
|
||||||
// items.forEach((item, index) => {});
|
|
||||||
// }, []);
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<StyledBox ref={ref} width={width} height={getListHeight()} changeWidth={changeWidth}>
|
<StyledBox ref={ref} width={width} height={getListHeight()} changeWidth={changeWidth}>
|
||||||
<StyledContainer canCreate={canCreate}>
|
<StyledContainer canCreate={canCreate}>
|
||||||
|
@ -36,9 +36,8 @@ const StyledIconWrapper = styled.div`
|
|||||||
|
|
||||||
const StyledText = styled(Text)`
|
const StyledText = styled(Text)`
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
/* line-height: 20px; */
|
|
||||||
position: relative;
|
position: relative;
|
||||||
bottom: -1px;
|
bottom: ${(props) => (props.isRoot ? '-2px' : '-1px')};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Item = ({ id, title, isRoot, onClick, ...rest }) => {
|
const Item = ({ id, title, isRoot, onClick, ...rest }) => {
|
||||||
|
Loading…
Reference in New Issue
Block a user