lukechilds
/
react.dev
mirror of https://github.com/lukechilds/react.dev.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

PR Changes

main
jxom 7 years ago
parent
63280cca1d
commit
e9d0884a43
7 changed files with 210 additions and 182 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 7
      src/components/MarkdownPage/MarkdownPage.js
  2. 108
      src/templates/components/Sidebar/ScrollSyncSection.js
  3. 228
      src/templates/components/Sidebar/Section.js
  4. 9
      src/templates/components/Sidebar/Sidebar.js
  5. 1
      src/templates/tutorial.js
  6. 37
      src/utils/createLink.js
  7. 2
      src/utils/isItemActive.js

7
src/components/MarkdownPage/MarkdownPage.js
View File

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

108
src/templates/components/Sidebar/ScrollSyncSection.js
View File

@ -0,0 +1,108 @@
/**
* Copyright (c) 2013-present, Facebook, Inc.
*
* This source code is licensed under the CC-BY-4.0 license found
* in the LICENSE file in the root directory of this source tree.
*
* @emails react-core
*/
'use strict';
import React, {Component} from 'react';
import Section from './Section';
class ScrollSyncSection extends Component {
constructor(props, context) {
super(props, context);
this.state = {
activeItemId: '',
itemTopOffsets: [],
};
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);
}
componentWillUnmount() {
window.removeEventListener('resize', this.handleResize);
window.removeEventListener('scroll', this.handleScroll);
}
calculateItemTopOffsets() {
const {section} = this.props;
const itemIds = _getItemIds(section.items);
this.setState({
itemTopOffsets: _getElementTopOffsetsById(itemIds),
});
}
handleResize() {
this.calculateItemTopOffsets();
this.handleScroll();
}
handleScroll() {
const {itemTopOffsets} = this.state;
const item = itemTopOffsets.find((itemTopOffset, i) => {
const nextItemTopOffset = itemTopOffsets[i + 1];
if (nextItemTopOffset) {
return (
window.scrollY >= itemTopOffset.offsetTop &&
window.scrollY < nextItemTopOffset.offsetTop
);
}
return window.scrollY >= itemTopOffset.offsetTop;
});
this.setState({
activeItemId: item ? item.id : '',
});
}
render() {
const {activeItemId} = this.state;
return (
<Section
isScrollSync
activeItemId={activeItemId} {...this.props}
/>
);
}
}
const _getItemIds = items =>
items
.map(item => {
let subItemIds = [];
if (item.subitems) {
subItemIds = item.subitems.map(subitem => subitem.id);
}
return [item.id, ...subItemIds];
})
.reduce((prev, current) => prev.concat(current));
const _getElementTopOffsetsById = ids =>
ids
.map(id => {
const element = document.getElementById(id);
if (!element) {
return null;
}
return {
id,
offsetTop: element.offsetTop,
};
})
.filter(item => item);
export default ScrollSyncSection;

228
src/templates/components/Sidebar/Section.js
View File

@ -9,161 +9,89 @@
'use strict';
import React, {Component} from 'react';
import {colors, media} from 'theme';
import isItemActive from 'utils/isItemActive';
import MetaTitle from '../MetaTitle';
import ChevronSvg from '../ChevronSvg';
class Section extends Component {
constructor(props, context) {
super(props, context);
this.state = {
activeItemId: null,
itemTopOffsets: [],
};
this.handleScroll = this.handleScroll.bind(this);
}
componentDidMount() {
const {section} = this.props;
const itemIds = _getItemIds(section.items);
this.setState({
itemTopOffsets: _getElementTopOffsetsById(itemIds),
});
window.addEventListener('scroll', this.handleScroll);
}
componentWillUnmount() {
window.removeEventListener('scroll', this.handleScroll);
}
handleScroll() {
const {itemTopOffsets} = this.state;
const item = itemTopOffsets.find((itemTopOffset, i) => {
const nextItemTopOffset = itemTopOffsets[i + 1];
if (nextItemTopOffset) {
return (
window.scrollY >= itemTopOffset.offsetTop &&
window.scrollY < nextItemTopOffset.offsetTop
);
}
return window.scrollY >= itemTopOffset.offsetTop;
});
this.setState({
activeItemId: item ? item.id : null,
});
}
render() {
const {
createLink,
isActive,
location,
onLinkClick,
onSectionTitleClick,
section,
} = this.props;
const {activeItemId} = this.state;
return (
<div>
<MetaTitle
onClick={onSectionTitleClick}
cssProps={{
marginTop: 10,
[media.greaterThan('small')]: {
color: isActive ? colors.text : colors.subtle,
':hover': {
color: colors.text,
},
},
}}>
{section.title}
<ChevronSvg
cssProps={{
marginLeft: 7,
transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
transition: 'transform 0.2s ease',
[media.lessThan('small')]: {
display: 'none',
},
}}
/>
</MetaTitle>
<ul
const Section = ({
activeItemId,
createLink,
isActive,
isScrollSync,
location,
onLinkClick,
onSectionTitleClick,
section,
}) => (
<div>
<MetaTitle
onClick={onSectionTitleClick}
cssProps={{
marginTop: 10,
[media.greaterThan('small')]: {
color: isActive ? colors.text : colors.subtle,
':hover': {
color: colors.text,
},
},
}}>
{section.title}
<ChevronSvg
cssProps={{
marginLeft: 7,
transform: isActive ? 'rotateX(180deg)' : 'rotateX(0deg)',
transition: 'transform 0.2s ease',
[media.lessThan('small')]: {
display: 'none',
},
}}
/>
</MetaTitle>
<ul
css={{
marginBottom: 10,
[media.greaterThan('small')]: {
display: isActive ? 'block' : 'none',
},
}}>
{section.items.map(item => (
<li
key={item.id}
css={{
marginBottom: 10,
[media.greaterThan('small')]: {
display: isActive ? 'block' : 'none',
},
marginTop: 5,
}}>
{section.items.map(item => (
<li
key={item.id}
css={{
marginTop: 5,
}}>
{createLink({
item,
location,
onLinkClick,
section,
isActive: activeItemId === item.id,
})}
{item.subitems && (
<ul css={{marginLeft: 20}}>
{item.subitems.map(subitem => (
<li key={subitem.id}>
{createLink({
item: subitem,
location,
onLinkClick,
section,
isActive: activeItemId === subitem.id,
})}
</li>
))}
</ul>
)}
</li>
))}
</ul>
</div>
);
}
}
const _getItemIds = items =>
items
.map(item => {
let subItemIds = [];
if (item.subitems) {
subItemIds = item.subitems.map(subitem => subitem.id);
}
return [item.id, ...subItemIds];
})
.reduce((prev, current) => prev.concat(current));
const _getElementTopOffsetsById = ids =>
ids
.map(id => {
const element = document.getElementById(id);
if (!element) {
return null;
}
return {
id,
offsetTop: element.offsetTop,
};
})
.filter(item => item);
{createLink({
isActive: isScrollSync ? activeItemId === item.id : isItemActive(location, item),
item,
location,
onLinkClick,
section,
})}
{item.subitems && (
<ul css={{marginLeft: 20}}>
{item.subitems.map(subitem => (
<li key={subitem.id}>
{createLink({
isActive: isScrollSync ? activeItemId === subitem.id : isItemActive(location, subitem),
item: subitem,
location,
onLinkClick,
section,
})}
</li>
))}
</ul>
)}
</li>
))}
</ul>
</div>
);
export default Section;

9
src/templates/components/Sidebar/Sidebar.js
View File

@ -12,6 +12,7 @@
import React, {Component} from 'react';
import Flex from 'components/Flex';
import Section from './Section';
import ScrollSyncSection from './ScrollSyncSection';
import {media} from 'theme';
class Sidebar extends Component {
@ -24,8 +25,10 @@ class Sidebar extends Component {
}
render() {
const {closeParentMenu, createLink, 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;
return (
<Flex
@ -46,7 +49,7 @@ class Sidebar extends Component {
},
}}>
{sectionList.map((section, index) => (
<Section
<SectionComponent
createLink={createLink}
isActive={activeSection === section || sectionList.length === 1}
key={index}

1
src/templates/tutorial.js
View File

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

37
src/utils/createLink.js
View File

@ -18,19 +18,16 @@ import isItemActive from 'utils/isItemActive';
import slugify from 'utils/slugify';
import {colors, media} from 'theme';
const createLinkBlog = ({item, location, section, isActive}) => {
const active =
typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
const createLinkBlog = ({isActive, item, section}) => {
return (
<Link css={[linkCss, active && activeLinkCss]} to={item.id}>
{active && <span css={activeLinkBefore} />}
<Link css={[linkCss, isActive && activeLinkCss]} to={item.id}>
{isActive && <span css={activeLinkBefore} />}
{item.title}
</Link>
);
};
const createLinkCommunity = ({item, location, section}) => {
const createLinkCommunity = ({isActive, item, section}) => {
if (item.href) {
return (
<a css={[linkCss]} href={item.href} target="_blank" rel="noopener">
@ -47,42 +44,30 @@ const createLinkCommunity = ({item, location, section}) => {
);
}
return createLinkDocs({
isActive,
item,
location,
section,
});
};
const createLinkDocs = ({item, location, section, isActive}) => {
const active =
typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
const createLinkDocs = ({isActive, item, section}) => {
return (
<Link
css={[linkCss, active && activeLinkCss]}
css={[linkCss, isActive && activeLinkCss]}
to={slugify(item.id, section.directory)}>
{active && <span css={activeLinkBefore} />}
{isActive && <span css={activeLinkBefore} />}
{item.title}
</Link>
);
};
const createLinkTutorial = ({
item,
location,
onLinkClick,
section,
isActive,
}) => {
const active =
typeof isActive === 'boolean' ? isActive : isItemActive(location, item);
const createLinkTutorial = ({isActive, item, onLinkClick, section}) => {
return (
<Link
css={[linkCss, active && activeLinkCss]}
css={[linkCss, isActive && activeLinkCss]}
onClick={onLinkClick}
to={item.href}>
{active && <span css={activeLinkBefore} />}
{isActive && <span css={activeLinkBefore} />}
{item.title}
</Link>
);

2
src/utils/isItemActive.js
View File

@ -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);
}

Write Preview
Loading…
Cancel
Save