From acc15195c1eb4a625201561f0ee293f2bb183472 Mon Sep 17 00:00:00 2001 From: JamesShaw Date: Mon, 7 Oct 2019 16:34:12 +0100 Subject: [PATCH 1/2] Added field whitelisting --- README.md | 23 ++++++++++++++- dist/DynamicDataTable.js | 60 ++++++++++++++++++++++++++++------------ package.json | 2 +- src/DynamicDataTable.jsx | 24 +++++++++++++++- 4 files changed, 88 insertions(+), 21 deletions(-) diff --git a/README.md b/README.md index fe4c0af..59cb178 100644 --- a/README.md +++ b/README.md @@ -46,7 +46,11 @@ The `rows` prop expects an array of objects, such as the following. ### Excluding fields By default, React Dynamic Data Table will render a table containing all fields present -in the `rows` prop. To exclude specific fields, you can use the `fieldsToExclude` props. +in the `rows` prop. + +#### Blacklisting + +To exclude specific fields, you can use the `fieldsToExclude` prop. In the example below, the `email` field will be excluded. @@ -68,6 +72,23 @@ In the example below, all ID fields will be excluded. The `fieldsToExclude` prop expects an array of strings or regex expressions that represent the fields to exclude. +#### Whitelisting + +To only allow specific fields, you can use the `fieldstoInclude` prop. + +In the example below, the `email` field will be allowed, all other fields will be removed. + +```JSX + +``` + +The `fieldsToInclude` prop expects an array of strings. It does **not** support regex expressions. + +**Note:** Using both a black and white list will result in all fields not appearing on the whitelist being removed, and any fields remaining that are also on the blacklist, also being removed. + ### Mapping fields By default, React Dynamic Data Table creates table headers based on the field name, diff --git a/dist/DynamicDataTable.js b/dist/DynamicDataTable.js index 1647b4f..cae8ae7 100644 --- a/dist/DynamicDataTable.js +++ b/dist/DynamicDataTable.js @@ -31,10 +31,10 @@ require("core-js/modules/es6.array.is-array"); require("core-js/modules/es6.array.find-index"); -require("core-js/modules/es6.array.index-of"); - require("core-js/modules/es6.array.filter"); +require("core-js/modules/es6.array.index-of"); + require("core-js/modules/es6.regexp.constructor"); require("core-js/modules/es6.regexp.replace"); @@ -133,11 +133,16 @@ function (_Component) { value: function getFields() { var rows = this.props.rows; var _this$props2 = this.props, + fieldsToInclude = _this$props2.fieldsToInclude, fieldsToExclude = _this$props2.fieldsToExclude, fieldMap = _this$props2.fieldMap, fieldOrder = _this$props2.fieldOrder; var fields = []; + if (!fieldsToInclude) { + fieldsToInclude = []; + } + if (!fieldsToExclude) { fieldsToExclude = []; } @@ -179,42 +184,59 @@ function (_Component) { } } + if (fieldsToInclude.length > 0) { + for (var _i = 0; _i < fields.length; _i++) { + var _field = fields[_i]; + var shouldExclude = false; + + if (fieldsToInclude.indexOf(_field.name) === -1) { + shouldExclude = true; + } + + if (shouldExclude) { + fields.splice(_i, 1); + _i--; + continue; + } + } + } + var regExpsToExclude = fieldsToExclude.filter(function (field) { return field.constructor && field.constructor === RegExp; }); - for (var _i = 0; _i < fields.length; _i++) { - var _field = fields[_i]; - var shouldExclude = false; // Field exclusion + for (var _i2 = 0; _i2 < fields.length; _i2++) { + var _field2 = fields[_i2]; + var _shouldExclude = false; // Field exclusion - if (fieldsToExclude.indexOf(_field.name) !== -1) { - shouldExclude = true; + if (fieldsToExclude.indexOf(_field2.name) !== -1) { + _shouldExclude = true; } else { for (var _j = 0; _j < regExpsToExclude.length; _j++) { - if (regExpsToExclude[_j].test(_field.name)) { - shouldExclude = true; + if (regExpsToExclude[_j].test(_field2.name)) { + _shouldExclude = true; break; } } } - if (shouldExclude) { - fields.splice(_i, 1); - _i--; + if (_shouldExclude) { + fields.splice(_i2, 1); + _i2--; continue; } // Field mapping - if (fieldMap.hasOwnProperty(_field.name)) { - fields[_i].label = fieldMap[_field.name]; + if (fieldMap.hasOwnProperty(_field2.name)) { + fields[_i2].label = fieldMap[_field2.name]; } } if (fieldOrder.length) { var orderedFields = Array(fieldOrder.length); - var _loop = function _loop(_i2) { - var field = fields[_i2]; + var _loop = function _loop(_i3) { + var field = fields[_i3]; var j = fieldOrder.findIndex(function (query) { if (query.constructor) { switch (query.constructor) { @@ -246,8 +268,8 @@ function (_Component) { orderedFields.push(field); }; - for (var _i2 = 0; _i2 < fields.length; _i2++) { - var _ret = _loop(_i2); + for (var _i3 = 0; _i3 < fields.length; _i3++) { + var _ret = _loop(_i3); if (_ret === "continue") continue; } @@ -642,6 +664,7 @@ function (_Component) { DynamicDataTable.propTypes = { rows: _propTypes["default"].array, + fieldsToInclude: _propTypes["default"].array, fieldsToExclude: _propTypes["default"].array, fieldMap: _propTypes["default"].object, fieldOrder: _propTypes["default"].array, @@ -679,6 +702,7 @@ DynamicDataTable.propTypes = { }; DynamicDataTable.defaultProps = { rows: [], + fieldsToInclude: [], fieldsToExclude: [], fieldMap: {}, fieldOrder: [], diff --git a/package.json b/package.json index db8c8a5..43e60bc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@langleyfoxall/react-dynamic-data-table", - "version": "7.4.1", + "version": "7.5.0", "description": "Re-usable data table for React with sortable columns, pagination and more.", "keywords": [ "react", diff --git a/src/DynamicDataTable.jsx b/src/DynamicDataTable.jsx index a1d2563..0f9a027 100644 --- a/src/DynamicDataTable.jsx +++ b/src/DynamicDataTable.jsx @@ -69,10 +69,14 @@ class DynamicDataTable extends Component { getFields() { const { rows } = this.props; - let { fieldsToExclude, fieldMap, fieldOrder } = this.props; + let { fieldsToInclude, fieldsToExclude, fieldMap, fieldOrder } = this.props; const fields = []; + if (!fieldsToInclude) { + fieldsToInclude = []; + } + if (!fieldsToExclude) { fieldsToExclude = []; } @@ -119,6 +123,22 @@ class DynamicDataTable extends Component { } } + if (fieldsToInclude.length > 0) { + for (let i = 0; i < fields.length; i++) { + const field = fields[i]; + let shouldExclude = false; + if (fieldsToInclude.indexOf(field.name) === -1) { + shouldExclude = true; + } + + if (shouldExclude) { + fields.splice(i, 1); + i--; + continue; + } + } + } + const regExpsToExclude = fieldsToExclude.filter(field => field.constructor && field.constructor === RegExp); for (let i = 0; i < fields.length; i++) { @@ -533,6 +553,7 @@ class DynamicDataTable extends Component { DynamicDataTable.propTypes = { rows: PropTypes.array, + fieldsToInclude: PropTypes.array, fieldsToExclude: PropTypes.array, fieldMap: PropTypes.object, fieldOrder: PropTypes.array, @@ -573,6 +594,7 @@ DynamicDataTable.propTypes = { DynamicDataTable.defaultProps = { rows: [], + fieldsToInclude: [], fieldsToExclude: [], fieldMap: {}, fieldOrder: [], From c217fefce3b12a71637a5d47c559441bcf71aea6 Mon Sep 17 00:00:00 2001 From: JamesShaw Date: Wed, 13 Nov 2019 11:14:38 +0000 Subject: [PATCH 2/2] Version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index ddddcaa..b697345 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@langleyfoxall/react-dynamic-data-table", - "version": "7.7.0", + "version": "7.8.0", "description": "Re-usable data table for React with sortable columns, pagination and more.", "keywords": [ "react",