Skip to content

Commit fd49f95

Browse files
author
Herman Starikov
committed
save
1 parent 63d8113 commit fd49f95

11 files changed

+385
-146
lines changed

‎.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
# production
1010
/build
11+
/lib
1112

1213
# misc
1314
.DS_Store

‎.travis.yml

+2-2
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ node_js:
66

77
cache: yarn
88

9-
# after_success:
10-
# - node_modules/.bin/codecov
9+
after_success:
10+
- node_modules/.bin/codecov
1111

1212
branches:
1313
only:

‎after-build.sh

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
#!/bin/bash
2+
3+
rm -rf lib
4+
mkdir lib
5+
cp build/static/js/main*.js lib/navbar-offcanvas.js
6+
cp build/static/js/main*.js.map lib/navbar-offcanvas.js.map
7+
cp build/static/css/main*.css lib/navbar-offcanvas.css
8+
cp build/static/css/main*.css.map lib/navbar-offcanvas.css.map

‎package.json

+8-6
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@
33
"description": "Off-canvas navigation for react using bootstrap",
44
"version": "1.0.1",
55
"homepage": "https://hermanya.github.io/react-bootstrap-navbar-offcanvas/build",
6-
"main": "src/NavbarOffcanvas.js",
7-
"jsnext:main": "src/NavbarOffcanvas.js",
6+
"main": "lib/navbar-offcanvas.js",
7+
"jsnext:main": "src/index.js",
88
"license": "MIT",
99
"repository": {
1010
"type": "git",
@@ -20,6 +20,7 @@
2020
"bootstrap"
2121
],
2222
"dependencies": {
23+
"codecov": "^3.0.0",
2324
"react": "^16.2.0",
2425
"react-bootstrap": "^0.31.5",
2526
"react-dom": "^16.2.0"
@@ -31,14 +32,15 @@
3132
"eslint-plugin-import": "^2.2.0",
3233
"eslint-plugin-jsx-a11y": "^6.0.3",
3334
"eslint-plugin-react": "^7.1.0",
35+
"node-sass-chokidar": "0.0.3",
3436
"react-scripts": "1.0.17"
3537
},
3638
"scripts": {
37-
"build-css": "node-sass-chokidar src/ -o src/",
38-
"watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
39+
"build-css": "node-sass-chokidar src/ -o public/",
40+
"watch-css": "npm run build-css && node-sass-chokidar src/ -o public/ --watch --recursive",
3941
"start": "react-scripts start",
40-
"build": "react-scripts build",
41-
"test": "react-scripts test --env=jsdom",
42+
"build": "react-scripts build && ./after-build.sh",
43+
"test": "react-scripts test --env=jsdom --coverage",
4244
"eject": "react-scripts eject"
4345
}
4446
}

‎public/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
-->
2222
<title>React App</title>
2323
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
24+
<link rel="stylesheet" href="/offcanvas.css">
2425
</head>
2526
<body>
2627
<noscript>
@@ -37,5 +38,53 @@
3738
To begin the development, run `npm start` or `yarn start`.
3839
To create a production bundle, use `npm run build` or `yarn build`.
3940
-->
41+
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
42+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
43+
<script src="https://unpkg.com/react-bootstrap@latest/dist/react-bootstrap.js"></script>
44+
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
45+
<script type="text/babel">
46+
const { Navbar, Nav, NavItem, MenuItem, NavDropdown, FormGroup, Button, FormControl } = ReactBootstrap
47+
const NavbarOffcanvas = ReactBootstrapNavbarOffcanvas
48+
class App extends React.Component {
49+
render() {
50+
return (
51+
<div className="App">
52+
<Navbar collapseOnSelect staticTop>
53+
<Navbar.Header>
54+
<Navbar.Brand>
55+
<a href="#">React-Bootstrap</a>
56+
</Navbar.Brand>
57+
<Navbar.Toggle />
58+
</Navbar.Header>
59+
<NavbarOffcanvas side="left">
60+
<Nav>
61+
<NavItem eventKey={1} href="#">Link</NavItem>
62+
<NavItem eventKey={2} href="#">Link</NavItem>
63+
<NavDropdown eventKey={3} title="Dropdown" id="basic-nav-dropdown">
64+
<MenuItem eventKey={3.1}>Action</MenuItem>
65+
<MenuItem eventKey={3.2}>Another action</MenuItem>
66+
<MenuItem eventKey={3.3}>Something else here</MenuItem>
67+
<MenuItem divider />
68+
<MenuItem eventKey={3.3}>Separated link</MenuItem>
69+
</NavDropdown>
70+
</Nav>
71+
<Navbar.Form pullRight>
72+
<FormGroup>
73+
<FormControl type="text" placeholder="Search" />
74+
</FormGroup>
75+
{' '}
76+
<Button type="submit" bsStyle="success">Submit</Button>
77+
</Navbar.Form>
78+
</NavbarOffcanvas>
79+
</Navbar>
80+
<p className="App-intro">
81+
To get started, edit <code>src/App.js</code> and save to reload.
82+
</p>
83+
</div>
84+
)
85+
}
86+
}
87+
ReactDOM.render(<App />, document.getElementById('root'))
88+
</script>
4089
</body>
4190
</html>

‎src/App.js

-46
This file was deleted.

‎src/App.test.js

-8
This file was deleted.

‎src/NavbarOffcanvas.js

-33
This file was deleted.

‎src/index.js

+37-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,39 @@
11
import React from 'react'
2-
import ReactDOM from 'react-dom'
3-
import App from './App'
2+
import PropTypes from 'prop-types'
43

5-
ReactDOM.render(<App />, document.getElementById('root'))
4+
import Offcanvas from './Offcanvas.js'
5+
import { prefix } from 'react-bootstrap/lib/utils/bootstrapUtils'
6+
7+
import './offcanvas.css'
8+
9+
const contextTypes = {
10+
$bs_navbar: PropTypes.shape({
11+
bsClass: PropTypes.string,
12+
expanded: PropTypes.bool,
13+
}),
14+
}
15+
16+
class NavbarOffcanvas extends React.Component {
17+
render() {
18+
const { children, ...props } = this.props
19+
const navbarProps = this.context.$bs_navbar || { bsClass: 'navbar' }
20+
21+
const bsClassName = prefix(navbarProps, 'offcanvas')
22+
23+
return (
24+
<Offcanvas in={navbarProps.expanded} {...props}>
25+
<div className={bsClassName}>
26+
{children}
27+
</div>
28+
</Offcanvas>
29+
)
30+
}
31+
}
32+
33+
NavbarOffcanvas.contextTypes = contextTypes
34+
35+
export default NavbarOffcanvas
36+
37+
if (typeof window !== 'undefined') {
38+
window.ReactBootstrapNavbarOffcanvas = NavbarOffcanvas
39+
}

‎src/test.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
import React from 'react'
2+
import ReactDOM from 'react-dom'
3+
import NavbarOffcanvas from './index.js'
4+
5+
it('renders without crashing', () => {
6+
const div = document.createElement('div')
7+
ReactDOM.render(<NavbarOffcanvas />, div)
8+
})

0 commit comments

Comments
 (0)