Skip to content

Commit d8ab4e9

Browse files
committed
clean up from #136
1 parent 2a9bdca commit d8ab4e9

File tree

4 files changed

+31
-68
lines changed

4 files changed

+31
-68
lines changed

docs/USING_BULK_SELECTION.md

Lines changed: 21 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,29 @@
11
# Bulk & Selection Plugins
22

3-
The Bulk and Selection plugins compliment each other. After selecting multiple rows, the user will most likely want to perform a bulk action on the selected rows such as altering them to have the same value.
3+
The Bulk and Selection plugins compliment each other. After selecting multiple rows, the user will most likely want to perform a bulk action on the selected rows such as altering them to have the same value.
44

5-
The selection plugin turns the first column into checkboxes so that rows can be selected and unselected. The selected rows are captured in the selection state.
5+
When using the selection plugin, the selected rows are captured in the selection state.
66

7-
#### grid vs dataSource vs selection reducers
7+
#### The subdivision of state
8+
9+
Each slice of state managed by grid is stored in separate objects inside the grid state atom:
810

911
```
1012
// grid
11-
const columnData = this.props.grid.get('sticky');
12-
console.log(JSON.stringify(columnData) ); <-- only column data
13+
const columnData = this.props.grid.get('state-key');
14+
console.log(columnData.toJS()); <-- only column data
1315
1416
// dataSource
15-
const rowData = this.props.dataSource.get('sticky');
16-
console.log(columnData.toJS()); <-- only row data
17+
const rowData = this.props.dataSource.get('state-key');
18+
console.log(rowData.toJS()); <-- only row data
1719
1820
// selection
19-
const selectedIds = this.props.selection.get('sticky').get("indexes");
21+
const selectedIds = this.props.selection.get('state-key').get("indexes");
2022
```
2123

2224
#### Get Selected Ids
2325

24-
In order to get the selected ids, you need to use the selection state.
26+
In general, as with all redux components/app, if you care about a piece of state, you must declare that by using `connect`. In this example, we will connect our component to listen to the grid and selection state:
2527

2628
```
2729
const mapStateToProps = (state) => ({
@@ -35,17 +37,14 @@ Selection state is an [Immutablejs Ordered Map](https://facebook.github.io/immut
3537
```
3638
const getSelectedIds = ()=> {
3739
38-
const bulkMap = selection.get("bulk"); // selection is React-Redux-Grid reducer available from the store
39-
const selectedIds = bulkMap.get("indexes");
40+
const selectedIds = selection.get('state-key').get('indexes');
4041
41-
if (undefined !== selectedIds) {
42-
return selectedIds;
42+
if (selectedIds !== undefined) {
43+
return selectedIds;
4344
} else {
44-
// you could dispatch a notification...
45-
// this.props.displayWarningRequestMessage("No rows selected");
46-
console.warn("BulkPage selectedIds were false!");
45+
console.warn('no indexes were found');
4746
return [];
48-
}
47+
}
4948
};
5049
```
5150

@@ -61,7 +60,7 @@ SELECTION_MODEL: {
6160
},
6261
```
6362

64-
If you set activeCls to false, the rows will change color as you hover over and click on them but the checkbox will not toggle state until you actually click on the checkox.
63+
If you set activeCls to false, the rows will change color as you hover over and click on them but the checkbox will not toggle state until you actually click on the checkox.
6564

6665

6766
```
@@ -72,18 +71,18 @@ SELECTION_MODEL: {
7271
activeCls: 'false',
7372
selectionEvent: 'false'
7473
},
75-
```
74+
```
7675

77-
#### Bulk & Selection Plugins
76+
#### Bulk & Selection Plugins
7877

7978
```
8079
export const plugins = {
8180
SELECTION_MODEL: {
8281
mode: 'checkbox-multi',
8382
enabled: true,
8483
allowDeselect: true,
85-
activeCls: 'active', // the css for the active cell
86-
selectionEvent: 'singleclick' // singleclick vs doubleclick
84+
activeCls: 'active', // the css for the active cell
85+
selectionEvent: 'singleclick' // singleclick vs doubleclick
8786
},
8887
BULK_ACTIONS: {
8988
enabled: true,

docs/USING_TYPES.md

Lines changed: 6 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,12 @@
1-
# Types
1+
# Action Types
22

3-
In you use redux logging tool like redux-logger, you can see the action types that React-Redux-Grid produces as you are interacting with the grid.
4-
5-
You have may other components that may wish to listen to these commands and you can use the React-Redux-Grid types in your own reducers.
6-
7-
#### Grid Types
8-
9-
import { applyGridConfig } from 'react-redux-grid';
10-
11-
```
12-
switch (action.type) {
13-
case applyGridConfig.SET_DATA:
14-
return Object.assign({}, state, {
15-
dataSetAction: true,
16-
})
17-
default:
18-
return Object.assign({}, state, {
19-
default: "hello world"
20-
})
21-
}
22-
```
23-
24-
#### Action Types
3+
If you want to listen for interal `react-redux-grid` Actions, you can import them and add them to your own reducers.
254

5+
```js
266
import { ActionTypes } from 'react-redux-grid';
277

28-
```
298
switch (action.type) {
309
case ActionTypes.SET_LOADING_STATE:
31-
return Object.assign({}, state, {
32-
isLoading: true,
33-
})
34-
default:
35-
return Object.assign({}, state, {
36-
default: "hello world"
37-
})
38-
}
39-
```
10+
// handle new loading state for grid
11+
}
12+
```

src/index.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@ import * as ActionTypes from './constants/ActionTypes';
1313
const modules = {
1414
Actions,
1515
Grid,
16-
GridRootReducer: combineReducers(Reducers),
1716
Reducers,
1817
applyGridConfig,
1918
ActionTypes,

test/index.test.js

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -33,8 +33,8 @@ describe('React Redux Grid Exports', () => {
3333
expect(imports).toBeTruthy();
3434
});
3535

36-
it('Should export 8 modules', () =>{
37-
expect(Object.keys(imports).length).toEqual(8);
36+
it('Should export 7 modules', () =>{
37+
expect(Object.keys(imports).length).toEqual(7);
3838
});
3939

4040
});
@@ -43,7 +43,8 @@ describe('Action Types Export', () =>{
4343

4444
it('Should export the Action Types', () =>{
4545
expect(imports.ActionTypes).toBeTruthy();
46-
expect(imports.ActionTypes.SELECT_ROW).toEqual('@@react-redux-grid/SELECT_ROW');
46+
expect(imports.ActionTypes.SELECT_ROW)
47+
.toEqual('@@react-redux-grid/SELECT_ROW');
4748
});
4849

4950
});
@@ -113,12 +114,3 @@ describe('Reducers Export', () =>{
113114
});
114115

115116
});
116-
117-
describe('Combined Root Reducer Export', () =>{
118-
119-
it('Should export a root Reducer', () =>{
120-
expect(imports.GridRootReducer).toBeTruthy();
121-
expect(typeof imports.GridRootReducer).toEqual('function');
122-
});
123-
124-
});

0 commit comments

Comments
 (0)