@govuk-frederic/array-object-table - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

es/index.js

@@ -15,4 +15,2 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
  * ```jsx
- * import { rowsFromArray, titlesFromFields } from '@govuk-frederic/utils';
- * 
  * const fields = [
@@ -28,10 +26,8 @@ *   { key: 'one', heading: 'One' },
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title}/>;
  * ```
- * 
+ *
  * With skipEmptyRows
  * ```jsx
- * import { rowsFromArray, titlesFromFields } from '@govuk-frederic/utils';
- * 
  * const fields = [
@@ -46,10 +42,8 @@ *   { key: 'one', heading: 'One' },
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>
  * ```
- * 
+ *
  * With skipEmptyRows and hideWithNoValues
  * ```jsx
- * import { rowsFromArray, titlesFromFields } from '@govuk-frederic/utils';
- * 
  * const fields = [
@@ -64,22 +58,40 @@ *   { key: 'one', heading: 'One' },
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;
  * ```
+ *
+ * With object transform and default transform
+ * ```jsx
+ * const fields = [
+ *   { key: 'one', heading: 'One' },
+ *   { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '' },
+ *   { key: 'three', heading: 'Three' },
+ *   { key: 'three', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
+ * ];
+ * const array = [
+ *   {one: 'One', two: 'Two'},
+ * ];
+ * const title = ['Heading'];
+ * const defaultTransform = value => (value || '-');
+ *
+ * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues defaultTransform={defaultTransform}/>
+ * ```
  * */
 
 var ArrayObjectTable = function ArrayObjectTable(_ref) {
-  var _ref$fields = _ref.fields,
-      fields = _ref$fields === void 0 ? [] : _ref$fields,
-      _ref$array = _ref.array,
-      array = _ref$array === void 0 ? [] : _ref$array,
-      _ref$hideWithNoValues = _ref.hideWithNoValues,
-      hideWithNoValues = _ref$hideWithNoValues === void 0 ? false : _ref$hideWithNoValues,
-      _ref$skipEmptyRows = _ref.skipEmptyRows,
-      skipEmptyRows = _ref$skipEmptyRows === void 0 ? false : _ref$skipEmptyRows,
+  var fields = _ref.fields,
+      array = _ref.array,
+      hideWithNoValues = _ref.hideWithNoValues,
+      skipEmptyRows = _ref.skipEmptyRows,
       title = _ref.title,
-      props = _objectWithoutProperties(_ref, ["fields", "array", "hideWithNoValues", "skipEmptyRows", "title"]);
+      defaultTransform = _ref.defaultTransform,
+      props = _objectWithoutProperties(_ref, ["fields", "array", "hideWithNoValues", "skipEmptyRows", "title", "defaultTransform"]);
 
-  var rows = rowsFromArray(array, fields, skipEmptyRows);
-  if (!rows.length && !hideWithNoValues) rows = rowsFromArray([{}], fields, false);
-  return rows.length ? React.createElement(Fragment, null, title ? title : null, React.createElement(Table, _extends({
+  var rows = rowsFromArray(array, fields, skipEmptyRows, defaultTransform);
+
+  if (!rows.length && !hideWithNoValues) {
+    rows = rowsFromArray([{}], fields, false, defaultTransform);
+  }
+
+  return rows.length ? React.createElement(Fragment, null, title, React.createElement(Table, _extends({
     rows: rows,
@@ -90,14 +102,13 @@ titles: titlesFromFields(fields)
 
-ArrayObjectTable.propTypes = process.env.NODE_ENV !== "production" ? {
-  fields: PropTypes.arrayOf(PropTypes.shape({
-    key: PropTypes.string.isRequired,
-    heading: PropTypes.string.isRequired,
-    transform: PropTypes.func
-  })),
-  array: PropTypes.arrayOf(PropTypes.object),
-  hideWithNoValues: PropTypes.bool,
-  skipEmptyRows: PropTypes.bool,
-  title: PropTypes.node
-} : {};
+ArrayObjectTable.defaultProps = {
+  hideWithNoValues: false,
+  skipEmptyRows: false,
+  defaultTransform: function defaultTransform(value) {
+    return value ? value : '-';
+  },
+
+  /* "||" breaks api-docs formatting! */
+  title: null
+};
 export default ArrayObjectTable;
 //# sourceMappingURL=index.js.map

es/stories.js

@@ -67,2 +67,41 @@ import React from 'react';
 });
+examples.add('With object transform and default transform', function () {
+  var fields = [{
+    key: 'one',
+    heading: 'One'
+  }, {
+    key: 'two',
+    heading: 'Two',
+    transform: function transform(value) {
+      return value ? value.toLowerCase() : '';
+    }
+  }, {
+    key: 'three',
+    heading: 'Three'
+  }, {
+    key: 'three',
+    heading: 'Four',
+    transform: function transform(value) {
+      return value ? value.toLowerCase() : '*';
+    }
+  }];
+  var array = [{
+    one: 'One',
+    two: 'Two'
+  }];
+  var title = ['Heading'];
+
+  var defaultTransform = function defaultTransform(value) {
+    return value || '-';
+  };
+
+  return React.createElement(ArrayObjectTable, {
+    fields: fields,
+    array: array,
+    title: title,
+    skipEmptyRows: true,
+    hideWithNoValues: true,
+    defaultTransform: defaultTransform
+  });
+});
 //# sourceMappingURL=stories.js.map

es/test.js

 import React from 'react';
-import { mount } from 'enzyme';
-import Component from '.';
+import { mount, shallow } from 'enzyme';
+import ArrayObjectTable from '.';
+var fields = [{
+  key: 'one',
+  heading: 'One'
+}, {
+  key: 'two',
+  heading: 'Two',
+  transform: function transform() {
+    return 'two';
+  }
+}, {
+  key: 'three',
+  heading: 'Three'
+}];
+var array = [{}, {
+  one: 'test',
+  two: 'test'
+}];
+
+var getRows = function getRows(wrapper) {
+  return wrapper.find('Table').prop('rows');
+};
+
 describe('ArrayObjectTable', function () {
-  var fields = [{
-    key: 'one',
-    heading: 'One'
-  }, {
-    key: 'two',
-    heading: 'Two',
-    transform: function transform() {
-      return 'two';
-    }
-  }, {
-    key: 'three',
-    heading: 'Three'
-  }];
-  var array = [{}, // empty record to be automatically omitted
-  {
-    one: 'test',
-    two: 'test'
-  }];
-  var title = 'Heading';
-  var wrapper;
-  it('renders with defaults', function () {
-    wrapper = mount(React.createElement(Component, null));
-    expect(wrapper.exists()).toBe(true);
-  });
-  it('renders with basic props', function () {
-    wrapper = mount(React.createElement(Component, {
+  it('renders with required props', function () {
+    var wrapper = shallow(React.createElement(ArrayObjectTable, {
       fields: fields,
@@ -36,25 +34,58 @@ array: array
   });
-  it('renders a table of data based on props passed', function () {
-    var table = wrapper.find('Table');
-    var rows = table.prop('rows');
-    var titles = table.prop('titles');
-    expect(rows).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
-    expect(titles).toEqual(['One', 'Two', 'Three']);
-  });
-  it('skips empty rows when skipEmptyRows prop is passed', function () {
-    wrapper.setProps({
-      skipEmptyRows: true
+  describe('renders table data', function () {
+    it('renders expected table heading cells ', function () {
+      var wrapper = mount(React.createElement(ArrayObjectTable, {
+        fields: fields,
+        array: array
+      }));
+      var titles = wrapper.find('Table').prop('titles');
+      expect(titles).toEqual(['One', 'Two', 'Three']);
     });
-    var table = wrapper.find('Table');
-    var rows = table.prop('rows');
-    expect(rows).toEqual([['test', 'two', '-']]);
+    it('renders expected table data cells', function () {
+      var wrapper = mount(React.createElement(ArrayObjectTable, {
+        fields: fields,
+        array: array
+      }));
+      expect(getRows(wrapper)).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
+    });
   });
-  it('optionally renders a heading for a table', function () {
-    wrapper.setProps({
-      title: title
+  describe('responds as expected to additional props', function () {
+    it('renders a table heading if provided', function () {
+      var wrapper = shallow(React.createElement(ArrayObjectTable, {
+        fields: fields,
+        array: array,
+        title: "Heading"
+      }));
+      expect(wrapper.contains('Heading')).toBe(true);
     });
-    expect(wrapper.contains('Heading')).toBe(true);
+    it('skips empty rows if skipEmptyRows is true', function () {
+      var wrapper = mount(React.createElement(ArrayObjectTable, {
+        fields: fields,
+        array: array,
+        skipEmptyRows: true
+      }));
+      expect(getRows(wrapper)).toEqual([['test', 'two', '-']]);
+    });
+    it('renders nothing if no rows are returned and hideWithNoValues is true', function () {
+      var emptyArray = [{}, {}, {}];
+      var wrapper = shallow(React.createElement(ArrayObjectTable, {
+        fields: fields,
+        array: emptyArray,
+        skipEmptyRows: true,
+        hideWithNoValues: true
+      }));
+      expect(wrapper.html()).toBe(null);
+    });
+    it('renders one tbody row if no rows are returned and hideWithNoValues is not true', function () {
+      var emptyArray = [{}, {}, {}];
+      var wrapper = mount(React.createElement(ArrayObjectTable, {
+        fields: fields,
+        array: emptyArray,
+        skipEmptyRows: true
+      }));
+      expect(wrapper.find('tbody tr').length).toBe(1);
+    });
   });
-  it('renders one tbody row when no rows are returned if hideWithNoValues is not true', function () {
-    fields = [{
+  describe('uses transforms as expected', function () {
+    var fieldsWithTransforms = [{
       key: 'one',
@@ -64,6 +95,34 @@ heading: 'One'
       key: 'two',
-      heading: 'Two'
+      heading: 'Two',
+      transform: function transform(value) {
+        return value ? value.toLowerCase() : '-';
+      }
+    }, {
+      key: 'three',
+      heading: 'Three'
+    }, {
+      key: 'four',
+      heading: 'Four',
+      transform: function transform(value) {
+        return value ? value.toLowerCase() : '*';
+      }
     }];
-    array = [{}, {}];
-    wrapper = mount(React.createElement(Component, {
+    var arrayOfOnlyTwo = [{
+      one: 'One',
+      two: 'Two'
+    }];
+    it('sends table row cells as expected', function () {
+      var wrapper = mount(React.createElement(ArrayObjectTable, {
+        fields: fieldsWithTransforms,
+        array: arrayOfOnlyTwo,
+        title: "Heading",
+        defaultTransform: function defaultTransform(value) {
+          return value || 'x';
+        }
+      }));
+      expect(getRows(wrapper)).toEqual([['One', 'two', 'x', '*']]);
+    });
+  });
+  it('matches snapshot', function () {
+    var wrapper = mount(React.createElement(ArrayObjectTable, {
       fields: fields,
@@ -73,17 +132,5 @@ array: array,
     }));
-    var table = wrapper.find('Table');
-    var rows = table.prop('rows');
-    expect(rows).toEqual([['-', '-']]);
-    expect(wrapper.find('tbody tr').length).toBe(1);
+    expect(wrapper).toMatchSnapshot();
   });
-  it('renders nothing when no rows are returned and hideWithNoValues is true', function () {
-    wrapper = mount(React.createElement(Component, {
-      fields: fields,
-      array: array,
-      skipEmptyRows: true,
-      hideWithNoValues: true
-    }));
-    expect(wrapper.html()).toBe(null);
-  });
 });
 //# sourceMappingURL=test.js.map

lib/index.js

@@ -28,4 +28,2 @@ "use strict";
  * ```jsx
- * import { rowsFromArray, titlesFromFields } from '@govuk-frederic/utils';
- * 
  * const fields = [
@@ -41,10 +39,8 @@ *   { key: 'one', heading: 'One' },
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title}/>;
  * ```
- * 
+ *
  * With skipEmptyRows
  * ```jsx
- * import { rowsFromArray, titlesFromFields } from '@govuk-frederic/utils';
- * 
  * const fields = [
@@ -59,10 +55,8 @@ *   { key: 'one', heading: 'One' },
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>
  * ```
- * 
+ *
  * With skipEmptyRows and hideWithNoValues
  * ```jsx
- * import { rowsFromArray, titlesFromFields } from '@govuk-frederic/utils';
- * 
  * const fields = [
@@ -77,21 +71,39 @@ *   { key: 'one', heading: 'One' },
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;
  * ```
+ *
+ * With object transform and default transform
+ * ```jsx
+ * const fields = [
+ *   { key: 'one', heading: 'One' },
+ *   { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '' },
+ *   { key: 'three', heading: 'Three' },
+ *   { key: 'three', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
+ * ];
+ * const array = [
+ *   {one: 'One', two: 'Two'},
+ * ];
+ * const title = ['Heading'];
+ * const defaultTransform = value => (value || '-');
+ *
+ * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues defaultTransform={defaultTransform}/>
+ * ```
  * */
 var ArrayObjectTable = function ArrayObjectTable(_ref) {
-  var _ref$fields = _ref.fields,
-      fields = _ref$fields === void 0 ? [] : _ref$fields,
-      _ref$array = _ref.array,
-      array = _ref$array === void 0 ? [] : _ref$array,
-      _ref$hideWithNoValues = _ref.hideWithNoValues,
-      hideWithNoValues = _ref$hideWithNoValues === void 0 ? false : _ref$hideWithNoValues,
-      _ref$skipEmptyRows = _ref.skipEmptyRows,
-      skipEmptyRows = _ref$skipEmptyRows === void 0 ? false : _ref$skipEmptyRows,
+  var fields = _ref.fields,
+      array = _ref.array,
+      hideWithNoValues = _ref.hideWithNoValues,
+      skipEmptyRows = _ref.skipEmptyRows,
       title = _ref.title,
-      props = _objectWithoutProperties(_ref, ["fields", "array", "hideWithNoValues", "skipEmptyRows", "title"]);
+      defaultTransform = _ref.defaultTransform,
+      props = _objectWithoutProperties(_ref, ["fields", "array", "hideWithNoValues", "skipEmptyRows", "title", "defaultTransform"]);
 
-  var rows = (0, _utils.rowsFromArray)(array, fields, skipEmptyRows);
-  if (!rows.length && !hideWithNoValues) rows = (0, _utils.rowsFromArray)([{}], fields, false);
-  return rows.length ? _react.default.createElement(_react.Fragment, null, title ? title : null, _react.default.createElement(_govukFrederic.Table, _extends({
+  var rows = (0, _utils.rowsFromArray)(array, fields, skipEmptyRows, defaultTransform);
+
+  if (!rows.length && !hideWithNoValues) {
+    rows = (0, _utils.rowsFromArray)([{}], fields, false, defaultTransform);
+  }
+
+  return rows.length ? _react.default.createElement(_react.Fragment, null, title, _react.default.createElement(_govukFrederic.Table, _extends({
     rows: rows,
@@ -102,13 +114,12 @@ titles: (0, _utils.titlesFromFields)(fields)
 
-ArrayObjectTable.propTypes = process.env.NODE_ENV !== "production" ? {
-  fields: _propTypes.default.arrayOf(_propTypes.default.shape({
-    key: _propTypes.default.string.isRequired,
-    heading: _propTypes.default.string.isRequired,
-    transform: _propTypes.default.func
-  })),
-  array: _propTypes.default.arrayOf(_propTypes.default.object),
-  hideWithNoValues: _propTypes.default.bool,
-  skipEmptyRows: _propTypes.default.bool,
-  title: _propTypes.default.node
-} : {};
+ArrayObjectTable.defaultProps = {
+  hideWithNoValues: false,
+  skipEmptyRows: false,
+  defaultTransform: function defaultTransform(value) {
+    return value ? value : '-';
+  },
+
+  /* "||" breaks api-docs formatting! */
+  title: null
+};
 var _default = ArrayObjectTable;
@@ -115,0 +126,0 @@ exports.default = _default;

lib/stories.js

@@ -77,2 +77,41 @@ "use strict";
 });
+examples.add('With object transform and default transform', function () {
+  var fields = [{
+    key: 'one',
+    heading: 'One'
+  }, {
+    key: 'two',
+    heading: 'Two',
+    transform: function transform(value) {
+      return value ? value.toLowerCase() : '';
+    }
+  }, {
+    key: 'three',
+    heading: 'Three'
+  }, {
+    key: 'three',
+    heading: 'Four',
+    transform: function transform(value) {
+      return value ? value.toLowerCase() : '*';
+    }
+  }];
+  var array = [{
+    one: 'One',
+    two: 'Two'
+  }];
+  var title = ['Heading'];
+
+  var defaultTransform = function defaultTransform(value) {
+    return value || '-';
+  };
+
+  return _react.default.createElement(_.default, {
+    fields: fields,
+    array: array,
+    title: title,
+    skipEmptyRows: true,
+    hideWithNoValues: true,
+    defaultTransform: defaultTransform
+  });
+});
 //# sourceMappingURL=stories.js.map

lib/test.js

@@ -11,29 +11,27 @@ "use strict";
 
+var fields = [{
+  key: 'one',
+  heading: 'One'
+}, {
+  key: 'two',
+  heading: 'Two',
+  transform: function transform() {
+    return 'two';
+  }
+}, {
+  key: 'three',
+  heading: 'Three'
+}];
+var array = [{}, {
+  one: 'test',
+  two: 'test'
+}];
+
+var getRows = function getRows(wrapper) {
+  return wrapper.find('Table').prop('rows');
+};
+
 describe('ArrayObjectTable', function () {
-  var fields = [{
-    key: 'one',
-    heading: 'One'
-  }, {
-    key: 'two',
-    heading: 'Two',
-    transform: function transform() {
-      return 'two';
-    }
-  }, {
-    key: 'three',
-    heading: 'Three'
-  }];
-  var array = [{}, // empty record to be automatically omitted
-  {
-    one: 'test',
-    two: 'test'
-  }];
-  var title = 'Heading';
-  var wrapper;
-  it('renders with defaults', function () {
-    wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, null));
-    expect(wrapper.exists()).toBe(true);
-  });
-  it('renders with basic props', function () {
-    wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+  it('renders with required props', function () {
+    var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
       fields: fields,
@@ -44,25 +42,58 @@ array: array
   });
-  it('renders a table of data based on props passed', function () {
-    var table = wrapper.find('Table');
-    var rows = table.prop('rows');
-    var titles = table.prop('titles');
-    expect(rows).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
-    expect(titles).toEqual(['One', 'Two', 'Three']);
-  });
-  it('skips empty rows when skipEmptyRows prop is passed', function () {
-    wrapper.setProps({
-      skipEmptyRows: true
+  describe('renders table data', function () {
+    it('renders expected table heading cells ', function () {
+      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+        fields: fields,
+        array: array
+      }));
+      var titles = wrapper.find('Table').prop('titles');
+      expect(titles).toEqual(['One', 'Two', 'Three']);
     });
-    var table = wrapper.find('Table');
-    var rows = table.prop('rows');
-    expect(rows).toEqual([['test', 'two', '-']]);
+    it('renders expected table data cells', function () {
+      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+        fields: fields,
+        array: array
+      }));
+      expect(getRows(wrapper)).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
+    });
   });
-  it('optionally renders a heading for a table', function () {
-    wrapper.setProps({
-      title: title
+  describe('responds as expected to additional props', function () {
+    it('renders a table heading if provided', function () {
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        fields: fields,
+        array: array,
+        title: "Heading"
+      }));
+      expect(wrapper.contains('Heading')).toBe(true);
     });
-    expect(wrapper.contains('Heading')).toBe(true);
+    it('skips empty rows if skipEmptyRows is true', function () {
+      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+        fields: fields,
+        array: array,
+        skipEmptyRows: true
+      }));
+      expect(getRows(wrapper)).toEqual([['test', 'two', '-']]);
+    });
+    it('renders nothing if no rows are returned and hideWithNoValues is true', function () {
+      var emptyArray = [{}, {}, {}];
+      var wrapper = (0, _enzyme.shallow)(_react.default.createElement(_.default, {
+        fields: fields,
+        array: emptyArray,
+        skipEmptyRows: true,
+        hideWithNoValues: true
+      }));
+      expect(wrapper.html()).toBe(null);
+    });
+    it('renders one tbody row if no rows are returned and hideWithNoValues is not true', function () {
+      var emptyArray = [{}, {}, {}];
+      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+        fields: fields,
+        array: emptyArray,
+        skipEmptyRows: true
+      }));
+      expect(wrapper.find('tbody tr').length).toBe(1);
+    });
   });
-  it('renders one tbody row when no rows are returned if hideWithNoValues is not true', function () {
-    fields = [{
+  describe('uses transforms as expected', function () {
+    var fieldsWithTransforms = [{
       key: 'one',
@@ -72,6 +103,34 @@ heading: 'One'
       key: 'two',
-      heading: 'Two'
+      heading: 'Two',
+      transform: function transform(value) {
+        return value ? value.toLowerCase() : '-';
+      }
+    }, {
+      key: 'three',
+      heading: 'Three'
+    }, {
+      key: 'four',
+      heading: 'Four',
+      transform: function transform(value) {
+        return value ? value.toLowerCase() : '*';
+      }
     }];
-    array = [{}, {}];
-    wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+    var arrayOfOnlyTwo = [{
+      one: 'One',
+      two: 'Two'
+    }];
+    it('sends table row cells as expected', function () {
+      var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
+        fields: fieldsWithTransforms,
+        array: arrayOfOnlyTwo,
+        title: "Heading",
+        defaultTransform: function defaultTransform(value) {
+          return value || 'x';
+        }
+      }));
+      expect(getRows(wrapper)).toEqual([['One', 'two', 'x', '*']]);
+    });
+  });
+  it('matches snapshot', function () {
+    var wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
       fields: fields,
@@ -81,17 +140,5 @@ array: array,
     }));
-    var table = wrapper.find('Table');
-    var rows = table.prop('rows');
-    expect(rows).toEqual([['-', '-']]);
-    expect(wrapper.find('tbody tr').length).toBe(1);
+    expect(wrapper).toMatchSnapshot();
   });
-  it('renders nothing when no rows are returned and hideWithNoValues is true', function () {
-    wrapper = (0, _enzyme.mount)(_react.default.createElement(_.default, {
-      fields: fields,
-      array: array,
-      skipEmptyRows: true,
-      hideWithNoValues: true
-    }));
-    expect(wrapper.html()).toBe(null);
-  });
 });
 //# sourceMappingURL=test.js.map

package.json

 {
   "name": "@govuk-frederic/array-object-table",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "dependencies": {
-    "@govuk-frederic/table": "^0.0.5",
-    "@govuk-frederic/utils": "^0.0.4"
+    "@govuk-frederic/table": "^0.0.6",
+    "@govuk-frederic/utils": "^0.0.6"
   },
@@ -8,0 +8,0 @@ "devDependencies": {

README.md

@@ -58,11 +58,29 @@ ArrayObjectTable
 
+With object transform and default transform
+```jsx
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '' },
+  { key: 'three', heading: 'Three' },
+  { key: 'three', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
+];
+const array = [
+  {one: 'One', two: 'Two'},
+];
+const title = ['Heading'];
+const defaultTransform = value => (value || '-');
+
+<ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues defaultTransform={defaultTransform}/>
+```
+
 ### Properties
 Prop | Required | Default | Type | Description
 :--- | :------- | :------ | :--- | :----------
- `array` |  | ```[]``` | arrayOf[object Object] | 
- `fields` |  | ```[]``` | arrayOf[object Object] | 
+ `array` | true | `````` | arrayOf[object Object] | 
+ `defaultTransform` |  | ```value => (value ? value : '-')``` | func | 
+ `fields` | true | `````` | arrayOf[object Object] | 
  `hideWithNoValues` |  | ```false``` | bool | 
  `skipEmptyRows` |  | ```false``` | bool | 
- `title` |  | `````` | node | 
+ `title` |  | ```null``` | node | 
 
 

src/index.js

@@ -23,6 +23,6 @@ import React, { Fragment } from 'react';
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title}/>;
  * ```
- * 
+ *
  * With skipEmptyRows
@@ -39,6 +39,6 @@ * ```jsx
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows/>
  * ```
- * 
+ *
  * With skipEmptyRows and hideWithNoValues
@@ -55,10 +55,35 @@ * ```jsx
  * const title = ['Heading'];
- * 
+ *
  * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues/>;
  * ```
+ *
+ * With object transform and default transform
+ * ```jsx
+ * const fields = [
+ *   { key: 'one', heading: 'One' },
+ *   { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '' },
+ *   { key: 'three', heading: 'Three' },
+ *   { key: 'three', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
+ * ];
+ * const array = [
+ *   {one: 'One', two: 'Two'},
+ * ];
+ * const title = ['Heading'];
+ * const defaultTransform = value => (value || '-');
+ *
+ * <ArrayObjectTable fields={fields} array={array} title={title} skipEmptyRows hideWithNoValues defaultTransform={defaultTransform}/>
+ * ```
  * */
-const ArrayObjectTable = ({ fields, array, hideWithNoValues, skipEmptyRows, title, ...props }) => {
-  let rows = rowsFromArray(array, fields, skipEmptyRows);
+const ArrayObjectTable = ({
+  fields,
+  array,
+  hideWithNoValues,
+  skipEmptyRows,
+  title,
+  defaultTransform,
+  ...props
+}) => {
+  let rows = rowsFromArray(array, fields, skipEmptyRows, defaultTransform);
   if (!rows.length && !hideWithNoValues) {
-    rows = rowsFromArray([{}], fields, false);
+    rows = rowsFromArray([{}], fields, false, defaultTransform);
   }
@@ -79,6 +104,7 @@ return rows.length ?
     transform: PropTypes.func,
-  })),
-  array: PropTypes.arrayOf(PropTypes.object),
+  })).isRequired,
+  array: PropTypes.arrayOf(PropTypes.object).isRequired,
   hideWithNoValues: PropTypes.bool,
   skipEmptyRows: PropTypes.bool,
+  defaultTransform: PropTypes.func,
   title: PropTypes.node,
@@ -88,6 +114,5 @@ };
 ArrayObjectTable.defaultProps = {
-  fields: [],
-  array: [],
   hideWithNoValues: false,
   skipEmptyRows: false,
+  defaultTransform: value => (value ? value : '-'), /* "||" breaks api-docs formatting! */
   title: null,
@@ -94,0 +119,0 @@ };

src/stories.js

@@ -57,1 +57,24 @@ import React from 'react';
 });
+
+examples.add('With object transform and default transform', () => {
+  const fields = [
+    { key: 'one', heading: 'One' },
+    { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '' },
+    { key: 'three', heading: 'Three' },
+    { key: 'three', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
+  ];
+  const array = [
+    {one: 'One', two: 'Two'},
+  ];
+  const title = ['Heading'];
+  const defaultTransform = value => (value || '-');
+
+  return <ArrayObjectTable
+    fields={fields}
+    array={array}
+    title={title}
+    skipEmptyRows
+    hideWithNoValues
+    defaultTransform={defaultTransform}
+    />;
+});

src/test.js

 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 
-import Component from '.';
+import ArrayObjectTable from '.';
 
-describe('ArrayObjectTable', () => {
-  let fields = [
-    { key: 'one', heading: 'One' },
-    { key: 'two', heading: 'Two', transform: () => 'two' },
-    { key: 'three', heading: 'Three' },
-  ];
-  let array = [
-    {}, // empty record to be automatically omitted
-    { one: 'test', two: 'test' },
-  ];
-  const title = 'Heading';
-  let wrapper;
+const fields = [
+  { key: 'one', heading: 'One' },
+  { key: 'two', heading: 'Two', transform: () => 'two' },
+  { key: 'three', heading: 'Three' },
+];
 
-  it('renders with defaults', () => {
-    wrapper = mount(<Component />);
-    expect(wrapper.exists()).toBe(true);
-  });
+const array = [
+  {},
+  { one: 'test', two: 'test' },
+];
 
-  it('renders with basic props', () => {
-    wrapper = mount(<Component fields={fields} array={array} />);
-    
+const getRows = wrapper => wrapper.find('Table').prop('rows');
+
+describe('ArrayObjectTable', () => {
+  it('renders with required props', () => {
+    const wrapper = shallow(<ArrayObjectTable fields={fields} array={array} />);
     expect(wrapper.exists()).toBe(true);
   });
 
-  it('renders a table of data based on props passed', () => {
-    const table = wrapper.find('Table');
-    const rows = table.prop('rows');
-    const titles = table.prop('titles');
-  
-    expect(rows).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
-    expect(titles).toEqual(['One', 'Two', 'Three']);
+  describe('renders table data', () => {
+    it('renders expected table heading cells ', () => {
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={array} />);
+      const titles = wrapper.find('Table').prop('titles');
+      expect(titles).toEqual(['One', 'Two', 'Three']);
+    });
+
+    it('renders expected table data cells', () => {
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={array} />);
+      expect(getRows(wrapper)).toEqual([['-', 'two', '-'], ['test', 'two', '-']]);
+    });
   });
 
-  it('skips empty rows when skipEmptyRows prop is passed', () => {
-    wrapper.setProps({ skipEmptyRows: true });
-    const table = wrapper.find('Table');
-    const rows = table.prop('rows');
+  describe('responds as expected to additional props', () => {
+    it('renders a table heading if provided', () => {
+      const wrapper = shallow(<ArrayObjectTable fields={fields} array={array} title="Heading"/>);
+      expect(wrapper.contains('Heading')).toBe(true);
+    });
 
-    expect(rows).toEqual([['test', 'two', '-']]);
-  });
+    it('skips empty rows if skipEmptyRows is true', () => {
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={array} skipEmptyRows/>);
+      expect(getRows(wrapper)).toEqual([['test', 'two', '-']]);
+    });
 
-  it('optionally renders a heading for a table', () => {
-    wrapper.setProps({ title });
+    it('renders nothing if no rows are returned and hideWithNoValues is true', () => {
+      const emptyArray = [{}, {}, {}];
+      const wrapper = shallow(<ArrayObjectTable fields={fields} array={emptyArray} skipEmptyRows hideWithNoValues />);
+      expect(wrapper.html()).toBe(null);
+    });
 
-    expect(wrapper.contains('Heading')).toBe(true);
+    it('renders one tbody row if no rows are returned and hideWithNoValues is not true', () => {
+      const emptyArray = [{}, {}, {}];
+      const wrapper = mount(<ArrayObjectTable fields={fields} array={emptyArray} skipEmptyRows />);
+      expect(wrapper.find('tbody tr').length).toBe(1);
+    });
   });
 
-  it('renders one tbody row when no rows are returned if hideWithNoValues is not true', () => {
-    fields = [
+  describe('uses transforms as expected', () => {
+    const fieldsWithTransforms = [
       { key: 'one', heading: 'One' },
-      { key: 'two', heading: 'Two' },
+      { key: 'two', heading: 'Two', transform: value => value ? value.toLowerCase() : '-' },
+      { key: 'three', heading: 'Three' },
+      { key: 'four', heading: 'Four', transform: value => value ? value.toLowerCase() : '*' },
     ];
-    array = [
-      {},
-      {},
+    const arrayOfOnlyTwo = [
+      {one: 'One', two: 'Two'},
     ];
-    wrapper = mount(<Component fields={fields} array={array} skipEmptyRows/>);
-    const table = wrapper.find('Table');
-    const rows = table.prop('rows');
-    expect(rows).toEqual([['-', '-']]);
-    expect(wrapper.find('tbody tr').length).toBe(1);
+
+    it('sends table row cells as expected', () => {
+      const wrapper = mount(<ArrayObjectTable
+        fields={fieldsWithTransforms}
+        array={arrayOfOnlyTwo}
+        title="Heading"
+        defaultTransform={value => (value || 'x')}
+      />);
+      expect(getRows(wrapper)).toEqual([['One', 'two', 'x', '*']]);
+    });
   });
 
-  it('renders nothing when no rows are returned and hideWithNoValues is true', () => {
-    wrapper = mount(<Component fields={fields} array={array} skipEmptyRows hideWithNoValues/>);
-
-    expect(wrapper.html()).toBe(null);
+  it('matches snapshot', () => {
+    const wrapper = mount(<ArrayObjectTable fields={fields} array={array} skipEmptyRows />);
+    expect(wrapper).toMatchSnapshot();
   });
 });
-

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

68342

increased by40.04%

Number of package files

18

increased by5.88%

Lines of code

937

increased by34.43%

Number of lines in readme file

86

increased by26.47%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@govuk-frederic/table@0.0.6(transitive)

• + Added@govuk-frederic/utils@0.0.6(transitive)

• - Removed@govuk-frederic/table@0.0.5(transitive)

• - Removed@govuk-frederic/utils@0.0.4(transitive)

• Updated@govuk-frederic/table@^0.0.6

• Updated@govuk-frederic/utils@^0.0.6