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 = ({ const MarkdownPage = ({
authors, authors,
createLink, createLink,
date, date,
enableScrollSync, enableScrollSync,
ogDescription, ogDescription,
location, location,
markdownRemark, markdownRemark,
@ -99,7 +99,7 @@ const MarkdownPage = ({
<div css={sharedStyles.articleLayout.sidebar}> <div css={sharedStyles.articleLayout.sidebar}>
<StickyResponsiveSidebar <StickyResponsiveSidebar
enableScrollSync={enableScrollSync} enableScrollSync={enableScrollSync}
createLink={createLink} createLink={createLink}
defaultActiveSection={findSectionForPath( defaultActiveSection={findSectionForPath(
location.pathname, location.pathname,
@ -133,8 +133,8 @@ MarkdownPage.defaultProps = {
MarkdownPage.propTypes = { MarkdownPage.propTypes = {
authors: PropTypes.array.isRequired, authors: PropTypes.array.isRequired,
createLink: PropTypes.func.isRequired, createLink: PropTypes.func.isRequired,
date: PropTypes.string, date: PropTypes.string,
enableScrollSync: PropTypes.bool, enableScrollSync: PropTypes.bool,
location: PropTypes.object.isRequired, location: PropTypes.object.isRequired,
markdownRemark: PropTypes.object.isRequired, markdownRemark: PropTypes.object.isRequired,
sectionList: PropTypes.array.isRequired, sectionList: PropTypes.array.isRequired,

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

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

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

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

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

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

2
src/templates/tutorial.js

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

2
src/utils/createLink.js

@ -44,7 +44,7 @@ const createLinkCommunity = ({isActive, item, section}) => {
); );
} }
return createLinkDocs({ return createLinkDocs({
isActive, isActive,
item, item,
section, 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 // This comment should not be true anymore since we're using 300 redirects
const isItemActive = (location, item) => { const isItemActive = (location, item) => {
if (location.hash) { if (location.hash) {
if (item.href) { if (item.href) {
return location.hash === toAnchor(item.href); return location.hash === toAnchor(item.href);
} }

Loading…
Cancel
Save