Skip to content

Commit 706186a

Browse files
bebrawbebraw
committed
Initial commit
0 parents  commit 706186a

13 files changed

+478
-0
lines changed

‎.babelrc

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
{
2+
"presets": [
3+
"es2015",
4+
"react"
5+
],
6+
"plugins": [
7+
"syntax-object-rest-spread",
8+
"transform-object-rest-spread"
9+
]
10+
}

‎.eslintignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
packages/*/node_modules
2+
node_modules
3+
gh-pages
4+
dist
5+
build
6+
coverage
7+

‎.eslintrc.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
module.exports = {
2+
"extends": "airbnb",
3+
"parser": "babel-eslint",
4+
"env": {
5+
"browser": true,
6+
"jasmine": true,
7+
"node": true
8+
},
9+
"globals": {
10+
"jest": true
11+
},
12+
"plugins": [
13+
"react"
14+
],
15+
"rules": {
16+
"comma-dangle": ["error", "never"], // personal preference
17+
"prefer-arrow-callback": 0, // mocha tests (recommendation)
18+
"func-names": 0, // mocha tests (recommendation)
19+
"import/extensions": 0, // skip import extensions
20+
"import/no-extraneous-dependencies": 0, // monorepo setup
21+
"import/no-unresolved": [1, { ignore: ['^reactabular'] }], // monorepo setup
22+
"no-underscore-dangle": 0, // implementation detail (_highlights etc.)
23+
"no-unused-expressions": 0, // chai
24+
"no-use-before-define": 0, // personal preference
25+
"react/forbid-prop-types": 0, // TODO: re-enable this later
26+
"react/sort-comp": 0, // personal preference
27+
"react/no-multi-comp": 0, // personal preference
28+
"react/jsx-filename-extension": 0, // personal preference
29+
"jsx-a11y/no-static-element-interactions": 0 // personal preference
30+
}
31+
};

‎.gitignore

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules/
2+
coverage/
3+
dist/
4+
.eslintcache
5+

‎.travis.yml

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
language: node_js
2+
node_js:
3+
- "4"
4+
- "5"
5+
- "6"
6+
script:
7+
- npm run test
8+
after_success:
9+
- bash <(curl -s https://codecov.io/bash)

‎CHANGELOG.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
## react-visibility-toggles
2+
3+
1.0.0 / 2016-11-27
4+
==================
5+
6+
* Initial re-release under a different name and an improved API.
7+
* Bug fix - Show a visibility toggle only for those columns that have `header` defined.
8+
* Breaking - Generalize `onToggleColumn`. It's `onToggleColumn({ column, columnIndex })` now instead of `onToggleColumn(columnIndex)`. This way it works with data not depending on index.
9+
* Feature - Expose `isVisible(column)`. It checks `column.visible` by default. You can override the default behavior through this prop.
10+
11+
---
12+
13+
## reactabular-visibility-toggles
14+
15+
2.0.0 / 2016-08-16
16+
==================
17+
18+
* Initial release.
19+

‎LICENSE.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
The MIT License (MIT)
2+
3+
Copyright (c) 2016 Juho Vepsäläinen
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.

‎README.md

Lines changed: 155 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,155 @@
1+
[![build status](https://secure.travis-ci.org/reactabular/react-visibility-toggles.svg)](http://travis-ci.org/reactabular/react-visibility-toggles) [![bitHound Score](https://www.bithound.io/github/reactabular/react-visibility-toggles/badges/score.svg)](https://www.bithound.io/github/reactabular/react-visibility-toggles) [![codecov](https://codecov.io/gh/reactabular/react-visibility-toggles/branch/master/graph/badge.svg)](https://codecov.io/gh/reactabular/react-visibility-toggles)
2+
3+
# react-visibility-toggles - Visibility toggles for React
4+
5+
`react-visibility-toggles` provides a React component for rendering visibility toggles for table columns.
6+
7+
## API
8+
9+
```javascript
10+
import VisibilityToggles from 'react-visibility-toggles';
11+
12+
...
13+
14+
<VisibilityToggles
15+
columns={columns}
16+
onToggleColumn={this.onToggleColumn}
17+
isVisible={this.isVisible}
18+
props={{}}
19+
/>
20+
```
21+
22+
**`columns` - [<column>]**
23+
24+
```javascript
25+
[
26+
{
27+
header: {
28+
label: 'Name'
29+
},
30+
visible: true
31+
},
32+
{
33+
header: {
34+
label: 'Age'
35+
},
36+
visible: false
37+
}
38+
]
39+
```
40+
41+
**`onToggleColumn = ({ column, columnIndex }) => ...`**
42+
43+
**`isVisible = ({ column }) => <boolean>`**
44+
45+
This checks `visible` flag by default but you can override that here.
46+
47+
**`props = { container: {}, label: {}, toggle: {} }`
48+
49+
Props attached to different parts of the component.
50+
51+
## How to Use?
52+
53+
The following example shows how to integrate `react-visibility-toggles` with Reactabular.
54+
55+
**Example:**
56+
57+
```jsx
58+
/*
59+
import React from 'react';
60+
import * as Table from 'reactabular-table';
61+
import cloneDeep from 'lodash/cloneDeep';
62+
import VisibilityToggles from 'react-visibility-toggles';
63+
*/
64+
65+
class ToggleColumnsTable extends React.Component {
66+
constructor(props) {
67+
super(props);
68+
69+
this.state = {
70+
columns: [
71+
{
72+
property: 'name',
73+
header: {
74+
label: 'Name'
75+
},
76+
visible: true
77+
},
78+
{
79+
property: 'age',
80+
header: {
81+
label: 'Age'
82+
},
83+
visible: false
84+
},
85+
{
86+
property: 'color',
87+
header: {
88+
label: 'Color'
89+
},
90+
cell: {
91+
transforms: [color => ({ style: { color } })]
92+
},
93+
visible: true
94+
}
95+
],
96+
rows: [
97+
{
98+
id: 100,
99+
name: 'Adam',
100+
age: 12,
101+
color: 'red'
102+
},
103+
{
104+
id: 101,
105+
name: 'Brian',
106+
age: 44,
107+
color: 'green'
108+
},
109+
{
110+
id: 102,
111+
name: 'Mike',
112+
age: 25,
113+
color: 'blue'
114+
}
115+
]
116+
};
117+
118+
this.onToggleColumn = this.onToggleColumn.bind(this);
119+
}
120+
render() {
121+
const { columns, rows } = this.state;
122+
123+
return (
124+
<div>
125+
<VisibilityToggles
126+
columns={columns}
127+
onToggleColumn={this.onToggleColumn}
128+
/>
129+
130+
<Table.Provider
131+
columns={columns.filter(column => column.visible)}
132+
>
133+
<Table.Header />
134+
135+
<Table.Body rows={rows} rowKey="id" />
136+
</Table.Provider>
137+
</div>
138+
);
139+
}
140+
onToggleColumn({ columnIndex }) {
141+
const columns = cloneDeep(this.state.columns);
142+
143+
columns[columnIndex].visible = !columns[columnIndex].visible;
144+
145+
this.setState({ columns });
146+
}
147+
}
148+
149+
<ToggleColumnsTable />
150+
```
151+
152+
## License
153+
154+
MIT. See LICENSE for details.
155+

‎__tests__/visibility-toggles-test.js

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
/* eslint-disable react/prop-types */
2+
import React from 'react';
3+
import TestUtils from 'react-addons-test-utils';
4+
import VisibilityToggles from '../src';
5+
6+
describe('VisibilityToggles', function () {
7+
it('renders', function () {
8+
const columns = [
9+
{
10+
property: 'first',
11+
header: {
12+
label: 'First'
13+
}
14+
}
15+
];
16+
17+
const toggles = TestUtils.renderIntoDocument(
18+
<Wrapper>
19+
<VisibilityToggles
20+
columns={columns}
21+
onToggleColumn={() => {}}
22+
/>
23+
</Wrapper>
24+
);
25+
26+
const toggle = TestUtils.findRenderedDOMComponentWithClass(
27+
toggles, 'visibility-toggle'
28+
);
29+
30+
expect(toggle).toBeDefined();
31+
});
32+
33+
it('triggers change', function () {
34+
const change = jest.fn();
35+
const columns = [
36+
{
37+
property: 'first',
38+
header: {
39+
label: 'First'
40+
}
41+
}
42+
];
43+
44+
const toggles = TestUtils.renderIntoDocument(
45+
<Wrapper>
46+
<VisibilityToggles
47+
columns={columns}
48+
onToggleColumn={change}
49+
/>
50+
</Wrapper>
51+
);
52+
53+
const toggle = TestUtils.findRenderedDOMComponentWithClass(
54+
toggles, 'visibility-toggle'
55+
);
56+
57+
TestUtils.Simulate.change(toggle);
58+
59+
expect(change).toHaveBeenCalled();
60+
});
61+
});
62+
63+
class Wrapper extends React.Component { // eslint-disable-line max-len, react/prefer-stateless-function
64+
render() {
65+
return React.createElement('div', {}, this.props.children);
66+
}
67+
}

0 commit comments

Comments
 (0)