├── .babelrc
├── .editorconfig
├── .eslintrc
├── .gitignore
├── .travis.yml
├── LICENSE
├── README.md
├── example
├── README.md
├── package-lock.json
├── package.json
├── public
│ ├── index.html
│ └── manifest.json
└── src
│ ├── App.js
│ ├── index.css
│ ├── index.js
│ └── sidebar.css
├── package-lock.json
├── package.json
├── rollup.config.js
└── src
├── .eslintrc
├── MenuButton.js
├── Sidebar.js
├── Tab.js
├── __snapshots__
└── test.js.snap
├── index.js
├── sidebar.css
└── test.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": [
3 | ["env", {
4 | "modules": false
5 | }],
6 | "stage-0",
7 | "react"
8 | ]
9 | }
10 |
--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
1 | root = true
2 |
3 | [*]
4 | charset = utf-8
5 | indent_style = space
6 | indent_size = 2
7 | end_of_line = lf
8 | insert_final_newline = true
9 | trim_trailing_whitespace = true
10 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "parser": "babel-eslint",
3 | "extends": [
4 | "standard",
5 | "standard-react"
6 | ],
7 | "env": {
8 | "es6": true
9 | },
10 | "plugins": [
11 | "react"
12 | ],
13 | "parserOptions": {
14 | "sourceType": "module"
15 | },
16 | "rules": {
17 | // don't force es6 functions to include space before paren
18 | "space-before-function-paren": 0,
19 |
20 | // allow specifying true explicitly for boolean props
21 | "react/jsx-boolean-value": 0
22 | }
23 | }
24 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 |
2 | # See https://help.github.com/ignore-files/ for more about ignoring files.
3 |
4 | # dependencies
5 | node_modules
6 |
7 | # builds
8 | build
9 | dist
10 |
11 | # misc
12 | .DS_Store
13 | .env
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - 9
4 | - 8
5 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2018 Eyüp Ferhat GÜDÜCÜ
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # react-leaflet-sidetabs [(DEMO)](https://eferhatg.com/react-leaflet-sidetabs/)
2 |
3 | > A [react-leaflet](https://github.com/PaulLeCam/react-leaflet) plugin of [sidebar-v2](https://github.com/Turbo87/sidebar-v2)
4 |
5 | [](https://www.npmjs.com/package/react-leaflet-v2sidebar-v2) [](https://standardjs.com)
6 |
7 | inspired by [@condense/react-leaflet-sidebarv2](https://github.com/condense/react-leaflet-sidebarv2)
8 |
9 |
10 |
11 | ## Install
12 |
13 | ```bash
14 | npm install --save react-leaflet-sidetabs
15 | ```
16 |
17 | ## Usage
18 |
19 | Sidebar should be sibling of react-leaflet Map component.
20 |
21 | [react-icons](https://github.com/react-icons/react-icons) is used at the example below. Any other icon library can also be used by giving icon names as string to *icon* and *closeIcon* props.
22 |
23 | *onClose* and *onOpen* callbacks should be given as props to change state *collapsed* and *selected* especially.
24 |
25 | Sidebar is alignable to left and right with *position* prop. Also Tabs are alignable to bottom and top with *anchor* prop.
26 |
27 |
28 | ```jsx
29 | import React, { Component } from 'react'
30 | import { Map, TileLayer } from 'react-leaflet';
31 | import 'leaflet/dist/leaflet.css';
32 | import { Sidebar, Tab } from 'react-leaflet-sidetabs'
33 | import { FiHome, FiChevronRight, FiSearch, FiSettings } from "react-icons/fi";
34 |
35 | export default class App extends Component {
36 | constructor(props) {
37 | super(props);
38 | this.state = {
39 | collapsed: true,
40 | selected: 'home',
41 | };
42 | }
43 |
44 | onClose() {
45 | this.setState({collapsed: true});
46 | }
47 | onOpen(id) {
48 | this.setState({
49 | collapsed: false,
50 | selected: id,
51 | })
52 | }
53 |
54 | render () {
55 | return (
56 |
57 | }
62 | selected={this.state.selected}
63 | onOpen={this.onOpen.bind(this)}
64 | onClose={this.onClose.bind(this)}
65 | >
66 |
}>
67 |
No place like home!
68 |
69 |
}>
70 |
The noblest search is the search for excellence!
71 |
72 |
}>
73 |
We don't want privacy so much as privacy settings!
74 |
75 |
76 |
77 |
83 |
29 |
35 |
36 | }
40 | selected={this.state.selected}
41 | onOpen={this.onOpen.bind(this)}
42 | onClose={this.onClose.bind(this)}
43 | >
44 |
}>
45 |
No place like home!
46 |
47 |
}>
48 |
The noblest search is the search for excellence!
49 |
50 |
}>
51 |
We don't want privacy so much as privacy settings!
52 |
53 |
54 |
{
49 | this.rootElement = el
50 | }}
51 | >
52 |
53 |
54 | {toptabs.map(t =>
55 | )}
64 |
65 |
66 | {bottomtabs.map(t =>
67 | )}
76 |
77 |
78 |
79 | {this.renderPanes(this.props.children)}
80 |
81 |
10 |
11 | {props.header}
12 |
{closeIcon}
17 |
18 |
19 | {props.children}
20 |
53 |
56 | Home
57 |
62 |
65 |
66 |
67 |
68 | No place like home!
69 |
70 |
78 |
81 | Home
82 |
87 |
90 |
91 |
92 |
93 | No place like home!
94 |
95 |
103 |
106 | Home
107 |
112 |
115 |
116 |
117 |
118 | No place like home!
119 |
120 |
128 |
131 | Home
132 |
137 |
140 |
141 |
142 |
143 | No place like home!
144 |
145 |
No place like home!
69 | )
70 | let tree = component.toJSON()
71 | expect(tree).toMatchSnapshot()
72 | })
73 |
74 | it('has active class with active prop', () => {
75 | const component = renderer.create(
76 |
77 | No place like home!
78 | )
79 | let tree = component.toJSON()
80 | expect(tree).toMatchSnapshot()
81 | })
82 |
83 | it('makes closeIcon fa fa-caret-right when position is right', () => {
84 | const component = renderer.create(
85 |
86 | No place like home!
87 | )
88 | let tree = component.toJSON()
89 | expect(tree).toMatchSnapshot()
90 | })
91 |
92 | it('makes closeIcon fa fa-caret-left when position is left', () => {
93 | const component = renderer.create(
94 |
95 | No place like home!
96 | )
97 | let tree = component.toJSON()
98 | expect(tree).toMatchSnapshot()
99 | })
100 | })
101 |
102 | describe('Sidebar', () => {
103 | it('is truthy', () => {
104 | expect(Sidebar).toBeTruthy()
105 | })
106 | })
107 |
--------------------------------------------------------------------------------