From 66c4db283c3a486f09ab570c4eda49dcf773452a Mon Sep 17 00:00:00 2001 From: ES Date: Thu, 6 Jun 2019 10:33:20 +0530 Subject: [PATCH 01/11] When height not defined, windowing is disabled. Full table with all the rows visible rows are displayed when height is not defined in the table config object --- src/components/Tbody.js | 6 +++--- src/createTable.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/Tbody.js b/src/components/Tbody.js index 491269a..31b31b1 100644 --- a/src/components/Tbody.js +++ b/src/components/Tbody.js @@ -50,14 +50,14 @@ const Tbody = React.forwardRef(({ ); }); -const StyledTbody = styled(Tbody).attrs(({ isPrinting, windowing, height }) => ( +const StyledTbody = styled(Tbody).attrs(({ isPrinting, height }) => ( isPrinting === false ? { style: { height } } : null ))` max-width: 100%; margin-right: auto; margin-left: auto; - overflow-y: ${props => props.isPrinting ? 'none': 'scroll'}; - overflow-x: ${props => props.isPrinting ? 'none': 'scroll'}; + overflow-y: ${props => props.isPrinting || props.innerHeight === props.visibleHeight ? 'hidden': 'scroll'}; + overflow-x: ${props => props.isPrinting ? 'hidden': 'scroll'}; border-bottom: 1px solid #ddd; `; const ExtendedStyledTbody = styled(StyledTbody)(getExtendedStyles()); diff --git a/src/createTable.js b/src/createTable.js index 65ef83c..fc0d998 100755 --- a/src/createTable.js +++ b/src/createTable.js @@ -188,7 +188,7 @@ const renderTable = ({ className="rdt-table-body" ref={ tableBody } width={ width } - height={ `${height > visibleHeight ? visibleHeight : height}px` } + height={ height > visibleHeight ? visibleHeight : height } innerHeight={ height } data={ items } startTop={ top } @@ -345,7 +345,7 @@ const ReduxDatatable = ( props ) => { tableBody, thunk, top, - visibleHeight: height, + visibleHeight: height || (rowHeight * ( tableData.items || [] ).length), width, widthAdjustment, }) } From 15c0a64af941aa3f4402b76f822f5ce08921c170 Mon Sep 17 00:00:00 2001 From: ES Date: Thu, 6 Jun 2019 10:33:49 +0530 Subject: [PATCH 02/11] Added class name to html elements in the toolbar --- src/components/Toolbar.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Toolbar.js b/src/components/Toolbar.js index 0fd8603..299827a 100644 --- a/src/components/Toolbar.js +++ b/src/components/Toolbar.js @@ -33,6 +33,7 @@ const Toolbar = ({
{ items.map((row, rowIndex) => ( ( Date: Thu, 6 Jun 2019 16:11:53 +0530 Subject: [PATCH 03/11] Update dependencies --- nwb.config.js | 21 ++++++++++------- package-lock.json | 60 +++++++++++++++++++++++++++++++---------------- package.json | 17 ++++++++------ 3 files changed, 62 insertions(+), 36 deletions(-) diff --git a/nwb.config.js b/nwb.config.js index cf35913..4a2d548 100644 --- a/nwb.config.js +++ b/nwb.config.js @@ -1,12 +1,15 @@ module.exports = { - type: 'react-component', - npm: { - esModules: true, - umd: { - global: 'ReduxDatatable', - externals: { - react: 'React' - } + type: 'react-component', + npm: { + esModules: true, + umd: { + global: 'ReduxDatatable', + externals: { + react: 'React', + lodash: '_', + "redux-observable": 'ReduxObservable', + "redux-thunk": 'ReduxThunk' + } + } } - } }; diff --git a/package-lock.json b/package-lock.json index 3969d62..42a322f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -721,19 +721,36 @@ "dev": true }, "axios": { - "version": "0.18.0", - "resolved": "https://registry.npmjs.org/axios/-/axios-0.18.0.tgz", - "integrity": "sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=", + "version": "0.19.0", + "resolved": "https://registry.npmjs.org/axios/-/axios-0.19.0.tgz", + "integrity": "sha512-1uvKqKQta3KBxIz14F2v06AEHZ/dIoeKfbTRkK1E5oqjDnuEerLmYTgJB5AiQZHJcljpg1TuRzdjDR06qNk0DQ==", "dev": true, "requires": { - "follow-redirects": "^1.3.0", - "is-buffer": "^1.1.5" + "follow-redirects": "1.5.10", + "is-buffer": "^2.0.2" + }, + "dependencies": { + "follow-redirects": { + "version": "1.5.10", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.5.10.tgz", + "integrity": "sha512-0V5l4Cizzvqt5D44aTXbFZz+FtyXV1vrDN6qrelxtfYQKW0KO0W2T/hkE8xvGa/540LkZlkaUjO4ailYTFtHVQ==", + "dev": true, + "requires": { + "debug": "=3.1.0" + } + }, + "is-buffer": { + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-2.0.3.tgz", + "integrity": "sha512-U15Q7MXTuZlrbymiz95PJpZxu8IlipAp4dtS3wOdgPXx3mqBnslrWU14kxfHB+Py/+2PVKSr37dMAgM2A4uArw==", + "dev": true + } } }, "axios-observable": { - "version": "1.0.7", - "resolved": "https://registry.npmjs.org/axios-observable/-/axios-observable-1.0.7.tgz", - "integrity": "sha512-pS2OXVSdS2exE0JplBSBx0E/SX2fuMJcQvg1FMudMr7DpYqT9htAuoeM9gMqTWVAt0H12+WE3xCAV4UwNAfmiQ==", + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/axios-observable/-/axios-observable-1.1.0.tgz", + "integrity": "sha512-+dmhX0BgbNt27DvsyA9lRmOJpk4yNXK8k2pCjeiFbbVdaiUR9A9g0x49z8O97SI25m5otadmTIrSPUG8bKhDdQ==", "dev": true }, "babel-cli": { @@ -5328,12 +5345,12 @@ "dev": true }, "handlebars": { - "version": "4.1.0", - "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.0.tgz", - "integrity": "sha512-l2jRuU1NAWK6AW5qqcTATWQJvNPEwkM7NEKSiv/gqOsoSQbVoWyqVEY5GS+XPQ88zLNmqASRpzfdm8d79hJS+w==", + "version": "4.1.2", + "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.1.2.tgz", + "integrity": "sha512-nvfrjqvt9xQ8Z/w0ijewdD/vvWDTOweBUm96NTr66Wfvo1mJenBLwcYmPs3TIBP5ruzYGD7Hx/DaM9RmhroGPw==", "dev": true, "requires": { - "async": "^2.5.0", + "neo-async": "^2.6.0", "optimist": "^0.6.1", "source-map": "^0.6.1", "uglify-js": "^3.1.4" @@ -6773,9 +6790,9 @@ "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "js-yaml": { - "version": "3.12.2", - "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.12.2.tgz", - "integrity": "sha512-QHn/Lh/7HhZ/Twc7vJYQTkjuCa0kaCcDcjK5Zlk2rvnUpy7DxMJ23+Jc2dcyvltwQVg1nygAVlB2oRDFHoRS5Q==", + "version": "3.13.1", + "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.13.1.tgz", + "integrity": "sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==", "dev": true, "requires": { "argparse": "^1.0.7", @@ -7545,7 +7562,8 @@ "lodash": { "version": "4.17.11", "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz", - "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==" + "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==", + "dev": true }, "lodash.camelcase": { "version": "4.3.0", @@ -10400,14 +10418,16 @@ } }, "redux-observable": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/redux-observable/-/redux-observable-1.0.0.tgz", - "integrity": "sha512-6bXnpqWTBeLaLQjXHyN1giXq4nLxCmv+SUkdmiwBgvmVxvDbdmydvL1Z7DGo0WItyzI/kqXQKiucUuTxnrPRkA==" + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/redux-observable/-/redux-observable-1.1.0.tgz", + "integrity": "sha512-G0nxgmTZwTK3Z3KoQIL8VQu9n0YCUwEP3wc3zxKQ8zAZm+iYkoZvBqAnBJfLi4EsD1E64KR4s4jFH/dFXpV9Og==", + "dev": true }, "redux-thunk": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz", - "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==" + "integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw==", + "dev": true }, "regenerate": { "version": "1.4.0", diff --git a/package.json b/package.json index b6897a0..bc3783b 100644 --- a/package.json +++ b/package.json @@ -20,28 +20,29 @@ "test:watch": "nwb test-react --server" }, "peerDependencies": { + "lodash": ">=4.17.11", "react": "^16.8.6", "react-dom": "^16.8.6", "rxjs": "^6.4.0", "prop-types": "^15.6.2", "react-redux": "^6.0.1", "redux": "^4.0.1", - "styled-components": "^4.2.0" + "styled-components": "^4.2.0", + "redux-observable": "^1.1.0", + "redux-thunk": "^2.3.0" }, "dependencies": { - "lodash": ">=4.17.10", "normalizr": "^3.3.0", "object-assign-deep": "^0.4.0", "query-string": "^6.1.0", "react-pure-time": "^0.2.2", - "react-redux-notify": "^4.1.0", - "redux-observable": "^1.0.0", - "redux-thunk": "^2.3.0" + "react-redux-notify": "^4.1.1" }, "devDependencies": { - "axios": "^0.18.0", - "axios-observable": "^1.0.7", + "axios": "^0.19.0", + "axios-observable": "^1.1.0", "bootstrap": "^4.3.1", + "lodash": ">=4.17.11", "nwb": "0.23.x", "path-to-regexp": "^3.0.0", "react": "^16.8.6", @@ -49,6 +50,8 @@ "react-redux": "^6.0.1", "redux": "^4.0.1", "redux-logger": "^3.0.6", + "redux-observable": "^1.1.0", + "redux-thunk": "^2.3.0", "rxjs": "^6.4.0", "styled-components": "^4.2.0" }, From 5f7c85cf41bae3fec3938abfac0c9bdb871a7864 Mon Sep 17 00:00:00 2001 From: ES Date: Thu, 6 Jun 2019 16:15:52 +0530 Subject: [PATCH 04/11] Disable autocomplete on filters (fixes #29) --- src/Renderer/Filter/Date.js | 2 ++ src/Renderer/Filter/Number.js | 2 ++ src/Renderer/Filter/String.js | 1 + 3 files changed, 5 insertions(+) diff --git a/src/Renderer/Filter/Date.js b/src/Renderer/Filter/Date.js index e730573..0e5a85c 100644 --- a/src/Renderer/Filter/Date.js +++ b/src/Renderer/Filter/Date.js @@ -38,6 +38,7 @@ const Date = ({ name, value = [], filterer }) => ( value={ value[0] || '' } onChange={ applyFilter.bind(this, 0, filterer) } placeholder="From" + autocomplete="off" /> @@ -48,6 +49,7 @@ const Date = ({ name, value = [], filterer }) => ( value={ value[1] || '' } onChange={ applyFilter.bind(this, 1, filterer) } placeholder="To" + autocomplete="off" /> diff --git a/src/Renderer/Filter/Number.js b/src/Renderer/Filter/Number.js index 3c33d91..3565fe9 100644 --- a/src/Renderer/Filter/Number.js +++ b/src/Renderer/Filter/Number.js @@ -38,6 +38,7 @@ const Number = ({ name, value = [], filterer }) => ( onChange={ applyFilter.bind(this, 0, filterer) } value={ value[0] || '' } placeholder="From" + autocomplete="off" /> @@ -48,6 +49,7 @@ const Number = ({ name, value = [], filterer }) => ( value={ value[1] || ''} onChange={ applyFilter.bind(this, 1, filterer) } placeholder="To" + autocomplete="off" /> diff --git a/src/Renderer/Filter/String.js b/src/Renderer/Filter/String.js index b49bc39..c5e1d06 100644 --- a/src/Renderer/Filter/String.js +++ b/src/Renderer/Filter/String.js @@ -22,6 +22,7 @@ const String = ({ name, value = '', filterer }) => ( name={ name } value={ value } onChange={ applyFilter.bind(this, filterer) } + autocomplete="off" /> ); From d1599766aaf6bb49287c1fde9e4b5e231319f22d Mon Sep 17 00:00:00 2001 From: ES Date: Thu, 6 Jun 2019 16:42:19 +0530 Subject: [PATCH 05/11] Updated modified fields feature * Hightlight modified fields (fixes #30) * Manage modified fields only with primary key in the state --- src/Renderer/Body/Date.js | 6 ++++-- src/Renderer/Body/Options.js | 10 ++++++++-- src/Renderer/Body/Text.js | 6 ++++-- src/components/Field.js | 7 ++++++- src/createTable.js | 11 +++++++---- 5 files changed, 29 insertions(+), 11 deletions(-) diff --git a/src/Renderer/Body/Date.js b/src/Renderer/Body/Date.js index c017314..18ee521 100644 --- a/src/Renderer/Body/Date.js +++ b/src/Renderer/Body/Date.js @@ -9,7 +9,7 @@ const Date = ({ index, isEditing, handleChange, - modifiedData, + modifiedValue, colConfig: { name, textAlign, format, editable } }) => ( @@ -20,7 +20,9 @@ const Date = ({ type="date" name={ name } onChange={ handleChange } - value={ formatDate(_.get(modifiedData, name) || _.get(data, name, ''), 'Y-m-d') } + modified={ !!modifiedValue } + className={ !!modifiedValue ? 'modified' : ''} + value={ formatDate(modifiedValue || _.get(data, name, ''), 'Y-m-d') } /> )} diff --git a/src/Renderer/Body/Options.js b/src/Renderer/Body/Options.js index fb1ad3d..d20b232 100644 --- a/src/Renderer/Body/Options.js +++ b/src/Renderer/Body/Options.js @@ -8,7 +8,7 @@ const Options = ({ data, isEditing, handleChange, - modifiedData, + modifiedValue, colConfig: { name, options, editable } }) => { const value = _.get(data, name); @@ -26,7 +26,13 @@ const Options = ({ return !!editable && isEditing && ( - + { _.map(options, ({ label }, key ) => ( diff --git a/src/Renderer/Body/Text.js b/src/Renderer/Body/Text.js index e8dcd6f..5c4cf9b 100644 --- a/src/Renderer/Body/Text.js +++ b/src/Renderer/Body/Text.js @@ -8,7 +8,7 @@ const Text = ({ index, isEditing, handleChange, - modifiedData, + modifiedValue, colConfig: { name, editable } }) => ( @@ -19,7 +19,9 @@ const Text = ({ type="text" name={ name } onChange={ handleChange } - value={ _.get(modifiedData, name) || _.get(data, name, '') } + modified={ !!modifiedValue } + className={ !!modifiedValue ? 'modified' : ''} + value={ modifiedValue || _.get(data, name, '') } /> )} diff --git a/src/components/Field.js b/src/components/Field.js index 9bb0287..413d710 100644 --- a/src/components/Field.js +++ b/src/components/Field.js @@ -9,7 +9,8 @@ const formControl = ({ color, padding, focusShadow, - focusBorderColor + focusBorderColor, + modified }) => css ` display: block; width: 100%; @@ -27,6 +28,10 @@ const formControl = ({ box-shadow: ${focusShadow || 'none'}; border-color: ${focusBorderColor || '#80bdff'} }; + + ${modified && css` + border: 1px solid #007bff; + `} `; const Input = styled.input ` diff --git a/src/createTable.js b/src/createTable.js index fc0d998..0709f3c 100755 --- a/src/createTable.js +++ b/src/createTable.js @@ -201,8 +201,9 @@ const renderTable = ({ windowing={ true } > {({ item, top, index: rowIndex }) => { - var data = prepareData(item, schema, state); - var modifiedData = modified[data[primaryKey]] || {}; + const data = prepareData(item, schema, state); + const primarKeyValue = _.get(data, primaryKey); + const modifiedData = modified[primarKeyValue] || {}; return ( { - const newData = Object.assign({}, data); + var newData = { ...modifiedData }; + _.set(newData, primaryKey, primarKeyValue); _.set(newData, event.target.name, event.target.value); - action(MODIFY_DATA)({ key: newData[primaryKey], value: newData }) + action(MODIFY_DATA)({ key: primarKeyValue, value: newData }) }} /> From 711d88c8e4eee3702dd199209d79249499ef8ff0 Mon Sep 17 00:00:00 2001 From: ES Date: Thu, 6 Jun 2019 17:03:22 +0530 Subject: [PATCH 06/11] Updated editable feature --- src/Renderer/Body/Date.js | 10 ++++++---- src/Renderer/Body/Options.js | 9 +++++---- src/Renderer/Body/Text.js | 10 ++++++---- src/createTable.js | 8 +++++++- 4 files changed, 24 insertions(+), 13 deletions(-) diff --git a/src/Renderer/Body/Date.js b/src/Renderer/Body/Date.js index 18ee521..5be33b0 100644 --- a/src/Renderer/Body/Date.js +++ b/src/Renderer/Body/Date.js @@ -9,20 +9,22 @@ const Date = ({ index, isEditing, handleChange, + isModified, modifiedValue, + value = '', colConfig: { name, textAlign, format, editable } }) => ( - { (!editable || !isEditing) &&