Skip to content

Commit e65bc09

Browse files
taiontaion
committed
Clean up use of Affix
- Removed vestigial Affix component - Explain what to do in docs instead - Switch docs to use react-overlays AutoAffix - Move SubNav into docs, where it belongs - Explain why we're missing scrollspy as well
1 parent 60a7b07 commit e65bc09

7 files changed

Lines changed: 103 additions & 256 deletions

File tree

‎docs/assets/docs.css‎

Lines changed: 8 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -535,8 +535,10 @@ body {
535535
*/
536536

537537
/* By default it's not affixed in mobile views, so undo that */
538-
.bs-docs-sidebar.affix {
539-
position: static;
538+
@media (max-width: 991px) {
539+
.bs-docs-sidebar {
540+
position: static !important;
541+
}
540542
}
541543
@media (min-width: 768px) {
542544
.bs-docs-sidebar {
@@ -628,35 +630,17 @@ body {
628630

629631
/* Show and affix the side nav when space allows it */
630632
@media (min-width: 992px) {
633+
.bs-docs-sidebar-holder {
634+
padding-top: 20px;
635+
}
631636
.bs-docs-sidebar .nav > .active > ul {
632637
display: block;
633638
}
634-
/* Widen the fixed sidebar */
635-
.bs-docs-sidebar.affix,
636-
.bs-docs-sidebar.affix-bottom {
637-
width: 213px;
638-
}
639-
.bs-docs-sidebar.affix {
640-
position: fixed; /* Undo the static from mobile first approach */
641-
top: 20px;
642-
}
643-
.bs-docs-sidebar.affix-bottom {
644-
position: absolute; /* Undo the static from mobile first approach */
645-
}
646-
.bs-docs-sidebar.affix-bottom .bs-docs-sidenav,
647-
.bs-docs-sidebar.affix .bs-docs-sidenav {
639+
.bs-docs-sidebar .bs-docs-sidenav {
648640
margin-top: 0;
649641
margin-bottom: 0;
650642
}
651643
}
652-
@media (min-width: 1200px) {
653-
/* Widen the fixed sidebar again */
654-
.bs-docs-sidebar.affix-bottom,
655-
.bs-docs-sidebar.affix {
656-
width: 263px;
657-
}
658-
}
659-
660644

661645
/*
662646
* Docs sections

‎docs/src/ComponentsPage.js‎

Lines changed: 91 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
1-
/* eslint react/no-did-mount-set-state: 0 */
2-
31
import React from 'react';
4-
import ReactDOM from 'react-dom';
5-
import getOffset from 'dom-helpers/query/offset';
6-
import css from 'dom-helpers/style';
2+
import AutoAffix from 'react-overlays/lib/AutoAffix';
73

8-
import Affix from '../../src/Affix';
94
import Nav from '../../src/Nav';
10-
import SubNav from '../../src/SubNav';
115
import NavItem from '../../src/NavItem';
126

137
import NavMain from './NavMain';
@@ -17,32 +11,31 @@ import PageFooter from './PageFooter';
1711
import ReactPlayground from './ReactPlayground';
1812
import Samples from './Samples';
1913
import Anchor from './Anchor';
14+
import SubNav from './SubNav';
2015

2116
const ComponentsPage = React.createClass({
2217
getInitialState() {
2318
return {
24-
activeNavItemHref: null,
25-
navOffsetTop: null
19+
activeNavItemHref: null
2620
};
2721
},
2822

29-
handleNavItemSelect(key, href) {
30-
this.setState({
31-
activeNavItemHref: href
32-
});
23+
getMain() {
24+
return this.refs.main;
25+
},
3326

27+
handleNavItemSelect(key, href) {
3428
window.location = href;
29+
this.setActiveNavItem();
3530
},
3631

3732
componentDidMount() {
38-
let elem = ReactDOM.findDOMNode(this.refs.sideNav);
39-
let sideNavOffsetTop = getOffset(elem).top;
40-
let sideNavMarginTop = parseInt(css(elem.firstChild, 'marginTop'), 10);
41-
let topNavHeight = ReactDOM.findDOMNode(this.refs.topNav).offsetHeight;
33+
this.setActiveNavItem();
34+
},
4235

36+
setActiveNavItem() {
4337
this.setState({
44-
navOffsetTop: sideNavOffsetTop - topNavHeight - sideNavMarginTop,
45-
navOffsetBottom: ReactDOM.findDOMNode(this.refs.footer).offsetHeight
38+
activeNavItemHref: window.location.hash
4639
});
4740
},
4841

@@ -55,7 +48,7 @@ const ComponentsPage = React.createClass({
5548
title="Components"
5649
subTitle="" />
5750

58-
<div className="container bs-docs-container">
51+
<div ref="main" className="container bs-docs-container">
5952
<div className="row">
6053
<div className="col-md-9" role="main">
6154

@@ -965,58 +958,87 @@ const ComponentsPage = React.createClass({
965958
<h4><Anchor id="utilities-fade-props">Props</Anchor></h4>
966959
<PropTable component="Fade"/>
967960
</div>
961+
962+
{/* Missing components */}
963+
<div className="bs-docs-section">
964+
<h1 className="page-header"><Anchor id="missing">Missing components</Anchor></h1>
965+
966+
<p className="lead">We've intentionally omitted a few components from React-Bootstrap. Don't worry, though &ndash; we cover what to do in this section.</p>
967+
</div>
968+
969+
<div className="bs-docs-section">
970+
<h2 className="page-header"><Anchor id="affix">Affix</Anchor></h2>
971+
972+
<p>Use <a href="http://react-bootstrap.github.io/react-overlays/examples/#affixes"><code>{'<AutoAffix>'}</code> or <code>{'<Affix>'}</code> from react-overlays</a>.</p>
973+
<p>There isn't really any additional Bootstrap markup associated with affixes, so we didn't add a Bootstrap-specific affix class. The upstream ones already give you everything you need.</p>
974+
</div>
975+
976+
<div className="bs-docs-section">
977+
<h2 className="page-header"><Anchor id="scrollspy">Scrollspy</Anchor></h2>
978+
979+
<p>Setting up a scrollspy in idiomatic React requires wiring up a number of components across your entire page, both to handle elements scrolling in and to wire that up to the navigation. It's a poor fit for a component library, because it's not a standalone component.</p>
980+
<p>To implement this functionality, use a library like <a href="http://brigade.github.io/react-waypoint/">React Waypoint</a> along with a bit of your own state management.</p>
981+
</div>
968982
</div>
969983

970984

971-
<div className="col-md-3">
972-
<Affix
973-
className="bs-docs-sidebar hidden-print"
974-
role="complementary"
975-
offsetTop={this.state.navOffsetTop}
976-
offsetBottom={this.state.navOffsetBottom}>
977-
<Nav
978-
className="bs-docs-sidenav"
979-
activeHref={this.state.activeNavItemHref}
980-
onSelect={this.handleNavItemSelect}
981-
ref="sideNav">
982-
<SubNav href="#buttons" key={1} text="Buttons">
983-
<NavItem href="#btn-groups" key={2}>Button groups</NavItem>
984-
<NavItem href="#btn-dropdowns" key={3}>Button dropdowns</NavItem>
985-
<NavItem href="#menu-item" key={25}>Menu Item</NavItem>
986-
</SubNav>
987-
<NavItem href="#panels" key={4}>Panels</NavItem>
988-
<NavItem href="#modals" key={5}>Modals</NavItem>
989-
<NavItem href="#tooltips" key={6}>Tooltips</NavItem>
990-
<NavItem href="#popovers" key={7}>Popovers</NavItem>
991-
<NavItem href="#overlays" key={27}>Overlays</NavItem>
992-
<NavItem href="#progress" key={8}>Progress bars</NavItem>
993-
<NavItem href="#navs" key={9}>Navs</NavItem>
994-
<NavItem href="#navbars" key={10}>Navbars</NavItem>
995-
<NavItem href="#breadcrumbs" key={30}>Breadcrumbs</NavItem>
996-
<NavItem href="#tabs" key={11}>Tabs</NavItem>
997-
<NavItem href="#pager" key={12}>Pager</NavItem>
998-
<NavItem href="#pagination" key={13}>Pagination</NavItem>
999-
<NavItem href="#alerts" key={14}>Alerts</NavItem>
1000-
<NavItem href="#carousels" key={15}>Carousels</NavItem>
1001-
<NavItem href="#grids" key={16}>Grids</NavItem>
1002-
<NavItem href="#images" key={29}>Images</NavItem>
1003-
<NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
1004-
<NavItem href="#listgroup" key={18}>List group</NavItem>
1005-
<NavItem href="#labels" key={19}>Labels</NavItem>
1006-
<NavItem href="#badges" key={20}>Badges</NavItem>
1007-
<NavItem href="#jumbotron" key={21}>Jumbotron</NavItem>
1008-
<NavItem href="#page-header" key={22}>Page Header</NavItem>
1009-
<NavItem href="#responsive-embed" key={31}>Responsive embed</NavItem>
1010-
<NavItem href="#wells" key={23}>Wells</NavItem>
1011-
<NavItem href="#glyphicons" key={24}>Glyphicons</NavItem>
1012-
<NavItem href="#tables" key={25}>Tables</NavItem>
1013-
<NavItem href="#input" key={26}>Input</NavItem>
1014-
<NavItem href="#utilities" key={28}>Utilities</NavItem>
1015-
</Nav>
1016-
<a className="back-to-top" href="#top">
1017-
Back to top
1018-
</a>
1019-
</Affix>
985+
<div className="col-md-3 bs-docs-sidebar-holder">
986+
<AutoAffix
987+
viewportOffsetTop={20}
988+
container={this.getMain}
989+
>
990+
<div
991+
className="bs-docs-sidebar hidden-print"
992+
role="complementary"
993+
>
994+
<Nav
995+
className="bs-docs-sidenav"
996+
activeHref={this.state.activeNavItemHref}
997+
onSelect={this.handleNavItemSelect}
998+
>
999+
<SubNav href="#buttons" key={1} text="Buttons">
1000+
<NavItem href="#btn-groups" key={2}>Button groups</NavItem>
1001+
<NavItem href="#btn-dropdowns" key={3}>Button dropdowns</NavItem>
1002+
<NavItem href="#menu-item" key={25}>Menu Item</NavItem>
1003+
</SubNav>
1004+
<NavItem href="#panels" key={4}>Panels</NavItem>
1005+
<NavItem href="#modals" key={5}>Modals</NavItem>
1006+
<NavItem href="#tooltips" key={6}>Tooltips</NavItem>
1007+
<NavItem href="#popovers" key={7}>Popovers</NavItem>
1008+
<NavItem href="#overlays" key={27}>Overlays</NavItem>
1009+
<NavItem href="#progress" key={8}>Progress bars</NavItem>
1010+
<NavItem href="#navs" key={9}>Navs</NavItem>
1011+
<NavItem href="#navbars" key={10}>Navbars</NavItem>
1012+
<NavItem href="#breadcrumbs" key={30}>Breadcrumbs</NavItem>
1013+
<NavItem href="#tabs" key={11}>Tabs</NavItem>
1014+
<NavItem href="#pager" key={12}>Pager</NavItem>
1015+
<NavItem href="#pagination" key={13}>Pagination</NavItem>
1016+
<NavItem href="#alerts" key={14}>Alerts</NavItem>
1017+
<NavItem href="#carousels" key={15}>Carousels</NavItem>
1018+
<NavItem href="#grids" key={16}>Grids</NavItem>
1019+
<NavItem href="#images" key={29}>Images</NavItem>
1020+
<NavItem href="#thumbnail" key={17}>Thumbnail</NavItem>
1021+
<NavItem href="#listgroup" key={18}>List group</NavItem>
1022+
<NavItem href="#labels" key={19}>Labels</NavItem>
1023+
<NavItem href="#badges" key={20}>Badges</NavItem>
1024+
<NavItem href="#jumbotron" key={21}>Jumbotron</NavItem>
1025+
<NavItem href="#page-header" key={22}>Page Header</NavItem>
1026+
<NavItem href="#responsive-embed" key={31}>Responsive embed</NavItem>
1027+
<NavItem href="#wells" key={23}>Wells</NavItem>
1028+
<NavItem href="#glyphicons" key={24}>Glyphicons</NavItem>
1029+
<NavItem href="#tables" key={25}>Tables</NavItem>
1030+
<NavItem href="#input" key={26}>Input</NavItem>
1031+
<NavItem href="#utilities" key={28}>Utilities</NavItem>
1032+
<SubNav href="#missing" key={32} text="Missing components">
1033+
<NavItem href="#affix" key={33}>Affix</NavItem>
1034+
<NavItem href="#scrollspy" key={34}>Scrollspy</NavItem>
1035+
</SubNav>
1036+
</Nav>
1037+
<a className="back-to-top" href="#top">
1038+
Back to top
1039+
</a>
1040+
</div>
1041+
</AutoAffix>
10201042
</div>
10211043
</div>
10221044
</div>

src/SubNav.js renamed to docs/src/SubNav.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { cloneElement } from 'react';
22
import classNames from 'classnames';
33

4-
import ValidComponentChildren from './utils/ValidComponentChildren';
5-
import createChainedFunction from './utils/createChainedFunction';
6-
import SafeAnchor from './SafeAnchor';
4+
import ValidComponentChildren from '../../src/utils/ValidComponentChildren';
5+
import createChainedFunction from '../../src/utils/createChainedFunction';
6+
import SafeAnchor from '../../src/SafeAnchor';
77

88
const SubNav = React.createClass({
99

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@
120120
"invariant": "^2.1.2",
121121
"keycode": "^2.1.0",
122122
"lodash-compat": "^3.10.1",
123-
"react-overlays": "^0.5.0",
123+
"react-overlays": "^0.5.1",
124124
"react-prop-types": "^0.3.0",
125125
"uncontrollable": "^3.1.3",
126126
"warning": "^2.1.0"

‎src/Affix.js‎

Lines changed: 0 additions & 26 deletions
This file was deleted.

0 commit comments

Comments
 (0)