Skip to content

Commit cefdd94

Browse files
easeqeaseq
authored
Merge pull request #32 from easeq/master
0.5.2
2 parents c15ece1 + 07618fb commit cefdd94

File tree

18 files changed

+165
-91
lines changed

18 files changed

+165
-91
lines changed

‎README.md‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -218,8 +218,8 @@ const YourComponent = () =>
218218
| toolbar | array | false | \[] | Toolbar definition (Check below) |
219219
| columns | array | true | - | Columns to display |
220220
| styles | object | false | {} | Custom styles for your table |
221-
| editable | boolean | false | {} | Set whether the table is editable |
222-
| editing | boolean | false | {} | Set the default state of the table to be in editing mode |
221+
| editable | boolean | false | {} | Set whether the table is editable |
222+
| editing | boolean | false | {} | Set the default state of the table to be in editing mode |
223223
| primaryKey | string | true | {} | Set the primary key column of the table for actions like editing. |
224224

225225
#### Pagination object
@@ -255,19 +255,21 @@ const YourComponent = () =>
255255
Toolbar config is an array of array of object where objects are the
256256
toolbar items. Each inner array represents a different row.
257257

258-
| Key | Type | Required | Default | Description |
259-
| --------------------- | -------- | -------- | ------- | ------------------------------------------------------------------------- |
260-
| type | string | false | actions | Available values resetFilters, print, editable and columns |
261-
| label | string | true | - | Label for the toolbar item |
262-
| visible | boolean | false | true | Whether the item is visible |
263-
| state | boolean | false | false | Whether to pass the state object as item prop |
264-
| **For type: actions** | | | | |
265-
| options | array | true | - | Array of option objects |
266-
| **-- options** | | | | |
267-
| type | string | true | action | Available option: action |
268-
| name | string | true | - | Unique name for the action |
269-
| label | string | true | - | Label for the action |
270-
| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
258+
| Key | Type | Required | Default | Description |
259+
| ---------------------- | -------- | -------- | ------------------------------------------------------------- | ------------------------------------------------------------------------- |
260+
| type | string | false | actions | Available values resetFilters, print, editable and columns |
261+
| label | string | true | - | Label for the toolbar item |
262+
| visible | boolean | false | true | Whether the item is visible |
263+
| state | boolean | false | false | Whether to pass the state object as item prop |
264+
| **For type: actions** | | | | |
265+
| options | array | true | - | Array of option objects |
266+
| **-- options** | | | | |
267+
| type | string | true | action | Available option: action |
268+
| name | string | true | - | Unique name for the action |
269+
| label | string | true | - | Label for the action |
270+
| thunk | function | true | - | An action creator which is dispatched on action click. Check demo schema. |
271+
| **For type: editable** | | | | |
272+
| labels | object | false | { show: 'Make editable', hide: 'Hide editable', save: 'Save'} | Labels for each of the buttons enabled when the table is editable |
271273

272274
Note: action of type "editable" is required when you set the table to be editable
273275

@@ -279,7 +281,7 @@ Note: action of type "editable" is required when you set the table to be editabl
279281
| label | string | true | - | Label for the column |
280282
| sortable | boolean | false | true | Whether the column is sortable |
281283
| filterable | boolean | false | true | Whether the column is filterable |
282-
| editable | boolean | false | false | When the table is set to be editable, set whether the respective column is among the editable |
284+
| editable | boolean | false | false | When the table is set to be editable, set whether the respective column is among the editable |
283285
| visible | boolean | false | true | Whether the column is visible on load |
284286
| type | string | true | string | Available types: selection, number, date, string, image, options, actions |
285287
| width | integer | true | - | Width of the column |

‎demo/src/schema/basic.js‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react';
2+
import { MODIFY_DATA } from '../../../src/actions';
23

34
export default {
45
name: 'posts',
@@ -149,7 +150,7 @@ export default {
149150
name: 'delete',
150151
label: 'Delete',
151152
indexField: '@id',
152-
thunk: ( payload ) => ( dispatch, getState ) => {
153+
thunk: ( config ) => ( dispatch, getState ) => {
153154
// Get current table state.
154155
const tableState = getState()[payload.reducerName][payload.name];
155156
confirm('Are your sure you want to delete the selected items?')
@@ -172,7 +173,7 @@ export default {
172173
label: 'Simple Button',
173174
visible: true,
174175
state: false,
175-
thunk: ( payload ) => ( dispatch, getState ) => {
176+
thunk: ( config ) => ( dispatch, getState ) => {
176177
console.log('toolbar button click', payload);
177178
}
178179
}, {
@@ -194,16 +195,17 @@ export default {
194195
}, {
195196
name: 'editable',
196197
type: 'editable',
197-
editableLabel: {
198-
0: 'Make editable',
199-
1: 'Hide editable'
198+
labels: {
199+
show: 'Make editable',
200+
hide: 'Hide editable',
201+
save: 'Save',
200202
},
201-
saveLabel: 'Save',
202-
save: ( payload ) => ( dispatch, getState ) => {
203-
const tableState = getState()[payload.reducerName][payload.name];
204-
console.log('toolbar save click with modified data', payload, tableState.modified);
203+
save: ( config ) => ( dispatch, getState ) => {
204+
const tableState = getState()[config.reducerName][config.name];
205+
console.log('toolbar save click with modified data', config, tableState.modified);
206+
config.payload.action(MODIFY_DATA)({ clear: true });
205207
// Dispatch MODIFY_DATA action with clear: true, to reset the modified data
206-
// Dispatch REQUEST_DATA action "payload.action(REQUEST_DATA)" to refresh data.
208+
// Dispatch REQUEST_DATA action "config.payload.action(REQUEST_DATA)" to refresh data.
207209
}
208210
}],
209211
],
@@ -230,6 +232,7 @@ export default {
230232
sortable: true,
231233
filterable: true,
232234
textAlign: "center",
235+
width: 150,
233236
options: {
234237
"published": {
235238
"label": "Published"
@@ -277,7 +280,7 @@ export default {
277280
params: {
278281
id: '@id',
279282
},
280-
thunk: ( payload ) => ( dispatch, getState ) => {
283+
thunk: ( config ) => ( dispatch, getState ) => {
281284
console.log('edit', payload, getState());
282285
}
283286
}, {
@@ -288,7 +291,7 @@ export default {
288291
params: {
289292
id: '@id'
290293
},
291-
thunk: ( payload ) => ( dispatch, getState ) => {
294+
thunk: ( config ) => ( dispatch, getState ) => {
292295
confirm('Are your sure you want to delete this page?')
293296
? console.log('delete', getState())
294297
: console.log(false);

‎nwb.config.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,15 @@
11
module.exports = {
2-
type: 'react-component',
3-
npm: {
4-
esModules: true,
5-
umd: {
6-
global: 'ReduxDatatable',
7-
externals: {
8-
react: 'React'
9-
}
2+
type: 'react-component',
3+
npm: {
4+
esModules: true,
5+
umd: {
6+
global: 'ReduxDatatable',
7+
externals: {
8+
react: 'React',
9+
lodash: '_',
10+
"redux-observable": 'ReduxObservable',
11+
"redux-thunk": 'ReduxThunk'
12+
}
13+
}
1014
}
11-
}
1215
};

‎package-lock.json‎

Lines changed: 41 additions & 21 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 11 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@flipbyte/redux-datatable",
3-
"version": "0.5.1",
3+
"version": "0.5.2",
44
"description": "React-Redux data table",
55
"main": "lib/index.js",
66
"module": "es/index.js",
@@ -20,35 +20,38 @@
2020
"test:watch": "nwb test-react --server"
2121
},
2222
"peerDependencies": {
23+
"lodash": ">=4.17.11",
2324
"react": "^16.8.6",
2425
"react-dom": "^16.8.6",
2526
"rxjs": "^6.4.0",
2627
"prop-types": "^15.6.2",
2728
"react-redux": "^6.0.1",
2829
"redux": "^4.0.1",
29-
"styled-components": "^4.2.0"
30+
"styled-components": "^4.2.0",
31+
"redux-observable": "^1.1.0",
32+
"redux-thunk": "^2.3.0"
3033
},
3134
"dependencies": {
32-
"lodash": ">=4.17.10",
3335
"normalizr": "^3.3.0",
3436
"object-assign-deep": "^0.4.0",
3537
"query-string": "^6.1.0",
3638
"react-pure-time": "^0.2.2",
37-
"react-redux-notify": "^4.1.0",
38-
"redux-observable": "^1.0.0",
39-
"redux-thunk": "^2.3.0"
39+
"react-redux-notify": "^4.1.1"
4040
},
4141
"devDependencies": {
42-
"axios": "^0.18.0",
43-
"axios-observable": "^1.0.7",
42+
"axios": "^0.19.0",
43+
"axios-observable": "^1.1.0",
4444
"bootstrap": "^4.3.1",
45+
"lodash": ">=4.17.11",
4546
"nwb": "0.23.x",
4647
"path-to-regexp": "^3.0.0",
4748
"react": "^16.8.6",
4849
"react-dom": "^16.8.6",
4950
"react-redux": "^6.0.1",
5051
"redux": "^4.0.1",
5152
"redux-logger": "^3.0.6",
53+
"redux-observable": "^1.1.0",
54+
"redux-thunk": "^2.3.0",
5255
"rxjs": "^6.4.0",
5356
"styled-components": "^4.2.0"
5457
},

‎src/Renderer/Body/Date.js‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,22 @@ const Date = ({
99
index,
1010
isEditing,
1111
handleChange,
12-
modifiedData,
12+
isModified,
13+
modifiedValue,
14+
value = '',
1315
colConfig: { name, textAlign, format, editable }
1416
}) => (
1517
<Fragment>
16-
{ (!editable || !isEditing) && <Time value={ _.get(data, name, '') } format={ format ? format : 'F j, Y, g:i a' } /> }
18+
{ (!editable || !isEditing) && <Time value={ value } format={ format ? format : 'F j, Y, g:i a' } /> }
1719
{ !!editable && isEditing && (
1820
<Row padding="0 0 5px">
1921
<Field.Input
2022
type="date"
2123
name={ name }
2224
onChange={ handleChange }
23-
value={ formatDate(_.get(modifiedData, name) || _.get(data, name, ''), 'Y-m-d') }
25+
modified={ isModified }
26+
className={ isModified ? 'modified' : ''}
27+
value={ formatDate(value, 'Y-m-d') }
2428
/>
2529
</Row>
2630
)}

0 commit comments

Comments
 (0)