Browse Source

Run check-all script

main
jxom 7 years ago
parent
commit
15fc32561f
  1. 10
      src/components/MarkdownPage/MarkdownPage.js
  2. 47
      src/templates/components/Sidebar/ScrollSyncSection.js
  3. 14
      src/templates/components/Sidebar/Section.js
  4. 12
      src/templates/components/Sidebar/Sidebar.js
  5. 2
      src/templates/tutorial.js
  6. 2
      src/utils/createLink.js
  7. 2
      src/utils/isItemActive.js

10
src/components/MarkdownPage/MarkdownPage.js

@ -25,8 +25,8 @@ import createOgUrl from 'utils/createOgUrl';
const MarkdownPage = ({
authors,
createLink,
date,
enableScrollSync,
date,
enableScrollSync,
ogDescription,
location,
markdownRemark,
@ -99,7 +99,7 @@ const MarkdownPage = ({
<div css={sharedStyles.articleLayout.sidebar}>
<StickyResponsiveSidebar
enableScrollSync={enableScrollSync}
enableScrollSync={enableScrollSync}
createLink={createLink}
defaultActiveSection={findSectionForPath(
location.pathname,
@ -133,8 +133,8 @@ MarkdownPage.defaultProps = {
MarkdownPage.propTypes = {
authors: PropTypes.array.isRequired,
createLink: PropTypes.func.isRequired,
date: PropTypes.string,
enableScrollSync: PropTypes.bool,
date: PropTypes.string,
enableScrollSync: PropTypes.bool,
location: PropTypes.object.isRequired,
markdownRemark: PropTypes.object.isRequired,
sectionList: PropTypes.array.isRequired,

47
src/templates/components/Sidebar/ScrollSyncSection.js

@ -21,36 +21,36 @@ class ScrollSyncSection extends Component {
itemTopOffsets: [],
};
this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this);
this.handleResize = this.handleResize.bind(this);
this.calculateItemTopOffsets = this.calculateItemTopOffsets.bind(this);
this.handleResize = this.handleResize.bind(this);
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount() {
this.calculateItemTopOffsets();
window.addEventListener('resize', this.handleResize);
window.addEventListener('scroll', this.handleScroll);
window.addEventListener('resize', this.handleResize);
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
window.removeEventListener('scroll', this.handleScroll);
}
window.removeEventListener('resize', this.handleResize);
window.removeEventListener('scroll', this.handleScroll);
}
calculateItemTopOffsets() {
const {section} = this.props;
calculateItemTopOffsets() {
const {section} = this.props;
const itemIds = _getItemIds(section.items);
this.setState({
itemTopOffsets: _getElementTopOffsetsById(itemIds),
});
}
const itemIds = _getItemIds(section.items);
this.setState({
itemTopOffsets: _getElementTopOffsetsById(itemIds),
});
}
handleResize() {
this.calculateItemTopOffsets();
this.handleScroll();
}
handleResize() {
this.calculateItemTopOffsets();
this.handleScroll();
}
handleScroll() {
const {itemTopOffsets} = this.state;
@ -63,7 +63,7 @@ class ScrollSyncSection extends Component {
);
}
return window.scrollY >= itemTopOffset.offsetTop;
});
});
this.setState({
activeItemId: item ? item.id : '',
});
@ -71,12 +71,7 @@ class ScrollSyncSection extends Component {
render() {
const {activeItemId} = this.state;
return (
<Section
isScrollSync
activeItemId={activeItemId} {...this.props}
/>
);
return <Section isScrollSync activeItemId={activeItemId} {...this.props} />;
}
}
@ -103,6 +98,6 @@ const _getElementTopOffsetsById = ids =>
offsetTop: element.offsetTop,
};
})
.filter(item => item);
.filter(item => item);
export default ScrollSyncSection;

14
src/templates/components/Sidebar/Section.js

@ -15,10 +15,10 @@ import MetaTitle from '../MetaTitle';
import ChevronSvg from '../ChevronSvg';
const Section = ({
activeItemId,
activeItemId,
createLink,
isActive,
isScrollSync,
isActive,
isScrollSync,
location,
onLinkClick,
onSectionTitleClick,
@ -66,7 +66,9 @@ const Section = ({
marginTop: 5,
}}>
{createLink({
isActive: isScrollSync ? activeItemId === item.id : isItemActive(location, item),
isActive: isScrollSync
? activeItemId === item.id
: isItemActive(location, item),
item,
location,
onLinkClick,
@ -78,7 +80,9 @@ const Section = ({
{item.subitems.map(subitem => (
<li key={subitem.id}>
{createLink({
isActive: isScrollSync ? activeItemId === subitem.id : isItemActive(location, subitem),
isActive: isScrollSync
? activeItemId === subitem.id
: isItemActive(location, subitem),
item: subitem,
location,
onLinkClick,

12
src/templates/components/Sidebar/Sidebar.js

@ -25,10 +25,16 @@ class Sidebar extends Component {
}
render() {
const {closeParentMenu, createLink, enableScrollSync, location, sectionList} = this.props;
const {activeSection} = this.state;
const {
closeParentMenu,
createLink,
enableScrollSync,
location,
sectionList,
} = this.props;
const {activeSection} = this.state;
const SectionComponent = enableScrollSync ? ScrollSyncSection : Section;
const SectionComponent = enableScrollSync ? ScrollSyncSection : Section;
return (
<Flex

2
src/templates/tutorial.js

@ -27,7 +27,7 @@ const Tutorial = ({data, location}) => {
return (
<MarkdownPage
enableScrollSync
enableScrollSync
createLink={createLinkTutorial}
location={location}
markdownRemark={data.markdownRemark}

2
src/utils/createLink.js

@ -44,7 +44,7 @@ const createLinkCommunity = ({isActive, item, section}) => {
);
}
return createLinkDocs({
isActive,
isActive,
item,
section,
});

2
src/utils/isItemActive.js

@ -20,7 +20,7 @@ const toAnchor = (href = '') => {
// This comment should not be true anymore since we're using 300 redirects
const isItemActive = (location, item) => {
if (location.hash) {
if (location.hash) {
if (item.href) {
return location.hash === toAnchor(item.href);
}

Loading…
Cancel
Save