feat(ui-toolkit): refator bottomNav to work for subSections
This commit is contained in:
parent
88fe0ea92d
commit
91e1fb192b
@ -15,30 +15,63 @@ const Link = styled.a`
|
||||
text-decoration: none;
|
||||
`;
|
||||
|
||||
export default props => {
|
||||
const items = props.items.map(item => item.name);
|
||||
const selectedIndex =
|
||||
items.indexOf(props.link) > -1 ? items.indexOf(props.link) : 0;
|
||||
const previousAndNextSections = data => {
|
||||
const items = data.items;
|
||||
const link = data.link;
|
||||
const sectionNames = items.map(item => item.name);
|
||||
const index = items.findIndex(item => item.name === link);
|
||||
let ret = { prevSection: null, nextSection: null };
|
||||
|
||||
if (!items.length) {
|
||||
if (index > -1) {
|
||||
ret = {
|
||||
prevSection: index !== 0 ? sectionNames[index - 1] : null,
|
||||
nextSection:
|
||||
index < sectionNames.length - 1 ? sectionNames[index + 1] : null
|
||||
};
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
items.map(section => {
|
||||
if (section.components.length > 0 && section.components[0].slug) {
|
||||
section.components.map(subSection => {
|
||||
if (subSection.slug === link.toLowerCase()) {
|
||||
ret = previousAndNextSections({ items, link: section.name });
|
||||
}
|
||||
return subSection;
|
||||
});
|
||||
}
|
||||
return section;
|
||||
});
|
||||
|
||||
return ret;
|
||||
};
|
||||
|
||||
export default props => {
|
||||
const selectedIndex = previousAndNextSections({
|
||||
items: props.items,
|
||||
link: props.link
|
||||
});
|
||||
|
||||
if (!props.items.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<BottomNav>
|
||||
<div>
|
||||
{selectedIndex > 0 ? (
|
||||
<Link href={`/#!/${items[selectedIndex - 1]}`}>
|
||||
← {items[selectedIndex - 1]}
|
||||
{selectedIndex.prevSection && (
|
||||
<Link href={`/#!/${selectedIndex.prevSection}`}>
|
||||
← {selectedIndex.prevSection}
|
||||
</Link>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
{selectedIndex < items.length ? (
|
||||
<Link href={`/#!/${items[selectedIndex + 1]}`}>
|
||||
{items[selectedIndex + 1]} →
|
||||
{selectedIndex.nextSection && (
|
||||
<Link href={`/#!/${selectedIndex.nextSection}`}>
|
||||
{selectedIndex.nextSection} →
|
||||
</Link>
|
||||
) : null}
|
||||
)}
|
||||
</div>
|
||||
</BottomNav>
|
||||
);
|
||||
|
Loading…
Reference in New Issue
Block a user