react-data-matrix 0.1.4 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +7 -1
  2. package/dist/components/matrixHeaders.js +15 -68
  3. package/dist/components/matrixRows.js +15 -63
  4. package/dist/components/reactMatrix.js +29 -89
  5. package/dist/components/tableData.js +2 -2
  6. package/dist/context/index.js +39 -0
  7. package/dist/helpers/getStyles.js +70 -0
  8. package/dist/utils/functions.js +18 -2
  9. package/package.json +15 -14
package/README.md CHANGED
@@ -1,10 +1,14 @@
1
- # React Matrix
1
+ # React Matrix   [![npm version](https://badge.fury.io/js/react-data-matrix.svg)](https://badge.fury.io/js/react-data-matrix)
2
+
2
3
  [React Matrix Demo](https://react-matrix.herokuapp.com/)
3
4
 
4
5
  React Matrix table shows relationships between two or more variables in a data set in grid format.
5
6
 
6
7
  The most common usage for a table like React Matrix, is to display the __likelihood__ and __consequence__ "scores" of __risks/hazards__, this can be for anything from Corporate, Work Health Safety and Environment risks, and more.
7
8
 
9
+ # PR's
10
+ - Have a look at the [PR template doc](https://github.com/bronz3beard/react-matrix/blob/main/docs) for best approach to getting your pr merged.
11
+
8
12
  # Usage
9
13
 
10
14
  ```js
@@ -165,6 +169,8 @@ const App = () => {
165
169
 
166
170
  tdStyles: {},
167
171
 
172
+ matrixName: "",
173
+ matrixDescription: "",
168
174
  customHeaderRowIdValue: "",
169
175
  customRowDynamicIdValue: "",
170
176
  customTableDataDynamicIdValue: "",
package/dist/components/matrixHeaders.js CHANGED
@@ -1,26 +1,28 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/web.dom-collections.iterator.js");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
9
 
8
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
9
11
 
10
- var _propTypes = _interopRequireDefault(require("prop-types"));
12
+ var _getStyles = require("../helpers/getStyles");
11
13
 
12
14
  var _functions = require("../utils/functions");
13
15
 
14
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
16
+ var _context = _interopRequireDefault(require("../context"));
15
17
 
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
18
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
19
 
18
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
20
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
21
 
20
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
22
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
23
 
22
24
  // import "./styles/riskMatrix.scss";
23
- const MatrixHeaders = props => {
25
+ const MatrixHeaders = () => {
24
26
  const {
25
27
  data,
26
28
  thRowStyles,
@@ -32,30 +34,11 @@ const MatrixHeaders = props => {
32
34
  customHeaderRowIdValue,
33
35
  customDynamicHeaderTitleIdValue,
34
36
  customDynamicSubHeaderTitleIdValue
35
- } = props;
36
- const customPrimaryTitleStyles = !thPrimaryTitleStyles ? {} : thPrimaryTitleStyles;
37
- const headerPrimaryTitleStyles = hasInlineStyles ? _objectSpread({
38
- borderWidth: "".concat(0),
39
- padding: "".concat(1, "rem ", 0, " ", 1, "rem ", 0)
40
- }, thPrimaryTitleStyles) : _objectSpread({}, customPrimaryTitleStyles);
41
- const customRowStyles = !thRowStyles ? {} : thRowStyles;
42
- const headerRowStyles = hasInlineStyles ? _objectSpread({
43
- borderColor: "black",
44
- borderStyle: "solid",
45
- padding: "".concat(10, "rem ", 0, " ", 0, " ", 0),
46
- borderWidth: "".concat(0, " ", 0, " ", 0, " ", 10, "px")
47
- }, thRowStyles) : _objectSpread({}, customRowStyles);
48
- const customThTitleStyles = !thTitleStyles ? {} : thTitleStyles;
49
- const headerTitleStyles = hasInlineStyles ? _objectSpread({
50
- padding: "".concat(0, " ", 0.5, "rem ", 0, " ", 0.5, "rem"),
51
- backgroundColor: "light-grey",
52
- border: "".concat(1, "px solid black")
53
- }, thTitleStyles) : _objectSpread({}, customThTitleStyles);
54
- const customThSubTitleStyles = !thSubTitleStyles ? {} : thSubTitleStyles;
55
- const headerSubTitleStyles = hasInlineStyles ? _objectSpread({
56
- fontSize: "".concat(0.9, "em"),
57
- fontWeight: "normal"
58
- }, thSubTitleStyles) : _objectSpread({}, customThSubTitleStyles);
37
+ } = (0, _react.useContext)(_context.default);
38
+ const headerRowStyles = (0, _getStyles.getHeaderRowStyles)(hasInlineStyles, thRowStyles);
39
+ const headerTitleStyles = (0, _getStyles.getHeaderTitleStyles)(hasInlineStyles, thTitleStyles);
40
+ const headerSubTitleStyles = (0, _getStyles.getHeaderSubTitleStyles)(hasInlineStyles, thSubTitleStyles);
41
+ const headerPrimaryTitleStyles = (0, _getStyles.getHeaderPrimaryTitleStyles)(hasInlineStyles, thPrimaryTitleStyles);
59
42
  const headerPrimaryTitle = headerPrimaryUpper ? (0, _functions.capitaliseString)(data.primary_header_title) : data.primary_header_title;
60
43
  return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
61
44
  id: "react-matrix-blank-headers-primary-title-row"
@@ -94,46 +77,10 @@ MatrixHeaders.defaultProps = {
94
77
  thTitleStyles: {},
95
78
  thSubTitleStyles: {},
96
79
  thPrimaryTitleStyles: {},
80
+ matrixSizeSelected: 5,
97
81
  customHeaderRowIdValue: "",
98
82
  customDynamicHeaderTitleIdValue: "",
99
83
  customDynamicSubHeaderTitleIdValue: ""
100
84
  };
101
- MatrixHeaders.propTypes = {
102
- data: _propTypes.default.shape({
103
- id: _propTypes.default.number,
104
- matrix_name: _propTypes.default.string,
105
- matrix_description: _propTypes.default.string,
106
- matrix_size: _propTypes.default.number.isRequired,
107
- matrix_details: _propTypes.default.arrayOf(_propTypes.default.shape({
108
- id: _propTypes.default.number,
109
- likelihood: _propTypes.default.string,
110
- consequence: _propTypes.default.number,
111
- header_title: _propTypes.default.string,
112
- header_sub_title: _propTypes.default.string,
113
- row_header_title: _propTypes.default.string,
114
- row_header_sub_title: _propTypes.default.string
115
- })).isRequired,
116
- matrix_values: _propTypes.default.arrayOf(_propTypes.default.shape({
117
- id: _propTypes.default.number.isRequired,
118
- colour: _propTypes.default.string,
119
- position: _propTypes.default.number.isRequired,
120
- matrix_id: _propTypes.default.number,
121
- score_value: _propTypes.default.number,
122
- description: _propTypes.default.string,
123
- response: _propTypes.default.string,
124
- likelihood_descriptor: _propTypes.default.string.isRequired,
125
- consequence_descriptor: _propTypes.default.number
126
- })).isRequired
127
- }).isRequired,
128
- hasInlineStyles: _propTypes.default.bool,
129
- headerPrimaryUpper: _propTypes.default.bool,
130
- thRowStyles: _propTypes.default.shape({}),
131
- thTitleStyles: _propTypes.default.shape({}),
132
- thSubTitleStyles: _propTypes.default.shape({}),
133
- thPrimaryTitleStyles: _propTypes.default.shape({}),
134
- customHeaderRowIdValue: _propTypes.default.string,
135
- customDynamicHeaderTitleIdValue: _propTypes.default.string,
136
- customDynamicSubHeaderTitleIdValue: _propTypes.default.string
137
- };
138
85
  var _default = MatrixHeaders;
139
86
  exports.default = _default;
package/dist/components/matrixRows.js CHANGED
@@ -1,5 +1,7 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/web.dom-collections.iterator.js");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
@@ -7,23 +9,23 @@ exports.default = void 0;
7
9
 
8
10
  require("core-js/modules/es.array.reverse.js");
9
11
 
10
- var _react = _interopRequireDefault(require("react"));
12
+ var _react = _interopRequireWildcard(require("react"));
11
13
 
12
- var _propTypes = _interopRequireDefault(require("prop-types"));
14
+ var _getStyles = require("../helpers/getStyles");
13
15
 
14
16
  var _functions = require("../utils/functions");
15
17
 
16
18
  var _tableData = _interopRequireDefault(require("./tableData"));
17
19
 
18
- function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
20
+ var _context = _interopRequireDefault(require("../context"));
19
21
 
20
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
22
+ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
21
23
 
22
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
23
25
 
24
- function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
25
27
 
26
- const MatrixRows = props => {
28
+ const MatrixRows = () => {
27
29
  const {
28
30
  data,
29
31
  tdStyles,
@@ -37,24 +39,12 @@ const MatrixRows = props => {
37
39
  customRowDynamicIdValue,
38
40
  customRowHeaderDynamicIdValue,
39
41
  customTableDataDynamicIdValue
40
- } = props;
42
+ } = (0, _react.useContext)(_context.default);
41
43
  const valuesArray = reverseMatrixValues ? (0, _functions.groupObjectsByProp)(data.matrix_values, "likelihood_descriptor").reverse().slice(0, data.matrix_size) : (0, _functions.groupObjectsByProp)(data.matrix_values, "likelihood_descriptor").slice(0, data.matrix_size);
42
- const customPrimaryTitleStyles = !trPrimaryTitleStyles ? {} : trPrimaryTitleStyles;
43
- const rowHeaderPrimaryTitleStyles = hasInlineStyles ? _objectSpread({}, trPrimaryTitleStyles) : _objectSpread({}, customPrimaryTitleStyles);
44
- const customRowStyles = !trRowStyles ? {} : trRowStyles;
45
- const tableRowStyles = hasInlineStyles ? _objectSpread({
46
- border: "".concat(1, "px solid black")
47
- }, customRowStyles) : _objectSpread({}, customRowStyles);
48
- const customTitleStyle = !trTitleStyles ? {} : trTitleStyles;
49
- const tableRowHeaderTitleStyles = hasInlineStyles ? _objectSpread({
50
- padding: "".concat(0, " ", 0.5, "rem ", 0, " ", 0.5, "rem"),
51
- border: "".concat(1, "px solid black")
52
- }, trTitleStyles) : _objectSpread({}, customTitleStyle);
53
- const customSubTitleStyle = !trSubTitleStyles ? {} : trSubTitleStyles;
54
- const tableRowHeaderSubTitleStyles = hasInlineStyles ? _objectSpread({
55
- fontSize: "".concat(0.9, "em"),
56
- fontWeight: "normal"
57
- }, trSubTitleStyles) : _objectSpread({}, customSubTitleStyle);
44
+ const tableRowStyles = (0, _getStyles.getHeaderRowStyles)(hasInlineStyles, trRowStyles);
45
+ const tableRowHeaderTitleStyles = (0, _getStyles.getHeaderTitleStyles)(hasInlineStyles, trTitleStyles);
46
+ const tableRowHeaderSubTitleStyles = (0, _getStyles.getHeaderSubTitleStyles)(hasInlineStyles, trSubTitleStyles);
47
+ const rowHeaderPrimaryTitleStyles = (0, _getStyles.getHeaderPrimaryTitleStyles)(hasInlineStyles, trPrimaryTitleStyles);
58
48
  const rowPrimaryTitle = rowPrimaryUpper ? (0, _functions.capitaliseString)(data.primary_row_header_title) : data.primary_row_header_title;
59
49
  return /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", {
60
50
  id: "react-matrix-row-primary-title"
@@ -97,48 +87,10 @@ MatrixRows.defaultProps = {
97
87
  trSubTitleStyles: {},
98
88
  trPrimaryTitleStyles: {},
99
89
  tdStyles: {},
90
+ matrixSizeSelected: 5,
100
91
  customRowDynamicIdValue: "",
101
92
  customRowHeaderDynamicIdValue: "",
102
93
  customTableDataDynamicIdValue: ""
103
94
  };
104
- MatrixRows.propTypes = {
105
- data: _propTypes.default.shape({
106
- id: _propTypes.default.number,
107
- matrix_name: _propTypes.default.string,
108
- matrix_description: _propTypes.default.string,
109
- matrix_size: _propTypes.default.number.isRequired,
110
- matrix_details: _propTypes.default.arrayOf(_propTypes.default.shape({
111
- id: _propTypes.default.number,
112
- likelihood: _propTypes.default.string,
113
- consequence: _propTypes.default.number,
114
- header_title: _propTypes.default.string,
115
- header_sub_title: _propTypes.default.string,
116
- row_header_title: _propTypes.default.string,
117
- row_header_sub_title: _propTypes.default.string
118
- })).isRequired,
119
- matrix_values: _propTypes.default.arrayOf(_propTypes.default.shape({
120
- id: _propTypes.default.number.isRequired,
121
- colour: _propTypes.default.string,
122
- position: _propTypes.default.number.isRequired,
123
- matrix_id: _propTypes.default.number,
124
- score_value: _propTypes.default.number,
125
- description: _propTypes.default.string,
126
- response: _propTypes.default.string,
127
- likelihood_descriptor: _propTypes.default.string.isRequired,
128
- consequence_descriptor: _propTypes.default.number
129
- })).isRequired
130
- }).isRequired,
131
- rowPrimaryUpper: _propTypes.default.bool,
132
- hasInlineStyles: _propTypes.default.bool,
133
- reverseMatrixValues: _propTypes.default.bool,
134
- trRowStyles: _propTypes.default.shape({}),
135
- trTitleStyles: _propTypes.default.shape({}),
136
- trSubTitleStyles: _propTypes.default.shape({}),
137
- trPrimaryTitleStyles: _propTypes.default.shape({}),
138
- tdStyles: _propTypes.default.shape({}),
139
- customRowDynamicIdValue: _propTypes.default.string,
140
- customRowHeaderDynamicIdValue: _propTypes.default.string,
141
- customTableDataDynamicIdValue: _propTypes.default.string
142
- };
143
95
  var _default = MatrixRows;
144
96
  exports.default = _default;
package/dist/components/reactMatrix.js CHANGED
@@ -1,125 +1,65 @@
1
1
  "use strict";
2
2
 
3
+ require("core-js/modules/web.dom-collections.iterator.js");
4
+
3
5
  Object.defineProperty(exports, "__esModule", {
4
6
  value: true
5
7
  });
6
8
  exports.default = void 0;
7
9
 
8
- var _react = _interopRequireDefault(require("react"));
10
+ var _react = _interopRequireWildcard(require("react"));
9
11
 
10
12
  var _propTypes = _interopRequireDefault(require("prop-types"));
11
13
 
14
+ var _getStyles = require("../helpers/getStyles");
15
+
12
16
  var _matrixHeaders = _interopRequireDefault(require("./matrixHeaders"));
13
17
 
14
18
  var _matrixRows = _interopRequireDefault(require("./matrixRows"));
15
19
 
20
+ var _context = _interopRequireDefault(require("../context"));
21
+
16
22
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
17
23
 
18
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
24
+ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
25
+
26
+ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
19
27
 
20
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
28
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
29
+
30
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
21
31
 
22
32
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
23
33
 
24
- const ReactMatrix = props => {
34
+ const ReactMatrix = () => {
25
35
  const {
26
- data,
36
+ matrixName,
27
37
  tableStyles,
28
- thRowStyles,
29
- trRowStyles,
30
- trTitleStyles,
31
- thTitleStyles,
32
38
  hasTableBorder,
33
- rowPrimaryUpper,
34
39
  hasInlineStyles,
35
- thSubTitleStyles,
36
- trSubTitleStyles,
37
- headerPrimaryUpper,
38
- matrixSizeSelected,
40
+ matrixDescription,
39
41
  hasContainerStyles,
40
- reverseMatrixValues,
41
- thPrimaryTitleStyles,
42
- trPrimaryTitleStyles,
43
- tableContainerStyles,
44
- customHeaderRowIdValue,
45
- customRowDynamicIdValue,
46
- customTableDataDynamicIdValue,
47
- customDynamicHeaderTitleIdValue,
48
- customDynamicSubHeaderTitleIdValue
49
- } = props;
50
- const customContainerStyles = !tableContainerStyles ? {} : tableContainerStyles;
51
- const containerStyles = hasInlineStyles && hasContainerStyles ? _objectSpread({
52
- top: "".concat(50, "%"),
53
- left: "".concat(50, "%"),
54
- height: "".concat(100, "%"),
55
- textAlign: "center",
56
- position: "absolute",
57
- transform: "translate(".concat(-50, "%, ").concat(-50, "%)")
58
- }, tableContainerStyles) : _objectSpread({}, customContainerStyles);
59
- const tableBorder = hasInlineStyles && hasTableBorder ? {
60
- border: "".concat(1, "px solid black")
61
- } : {};
62
- const customTableStyles = !tableStyles ? {} : tableStyles;
63
- const tableElmStyles = hasInlineStyles && tableStyles ? _objectSpread({
64
- width: "".concat(70, "rem")
65
- }, tableStyles) : _objectSpread({}, customTableStyles);
42
+ tableContainerStyles
43
+ } = (0, _react.useContext)(_context.default);
44
+ const tableBorder = (0, _getStyles.getTableBoarder)(hasInlineStyles && hasTableBorder);
45
+ const tableElmStyles = (0, _getStyles.getTableStyles)(hasInlineStyles && tableStyles, tableStyles);
46
+ const containerStyles = (0, _getStyles.getContainerStyles)(hasInlineStyles && hasContainerStyles, tableContainerStyles);
66
47
  return /*#__PURE__*/_react.default.createElement("div", {
67
48
  style: containerStyles
68
- }, /*#__PURE__*/_react.default.createElement("h1", null, data.matrix_name), /*#__PURE__*/_react.default.createElement("h4", null, data.matrix_description), /*#__PURE__*/_react.default.createElement("table", {
49
+ }, /*#__PURE__*/_react.default.createElement("h1", null, matrixName), /*#__PURE__*/_react.default.createElement("h4", null, matrixDescription), /*#__PURE__*/_react.default.createElement("table", {
69
50
  id: "matrix-table",
70
51
  style: _objectSpread(_objectSpread({}, tableElmStyles), tableBorder)
71
- }, /*#__PURE__*/_react.default.createElement(_matrixHeaders.default, {
72
- data: data,
73
- thRowStyles: thRowStyles,
74
- thTitleStyles: thTitleStyles,
75
- hasInlineStyles: hasInlineStyles,
76
- thSubTitleStyles: thSubTitleStyles,
77
- headerPrimaryUpper: headerPrimaryUpper,
78
- matrixSizeSelected: matrixSizeSelected,
79
- thPrimaryTitleStyles: thPrimaryTitleStyles,
80
- customHeaderRowIdValue: customHeaderRowIdValue,
81
- customDynamicHeaderTitleIdValue: customDynamicHeaderTitleIdValue,
82
- customDynamicSubHeaderTitleIdValue: customDynamicSubHeaderTitleIdValue
83
- }), /*#__PURE__*/_react.default.createElement(_matrixRows.default, {
84
- data: data,
85
- trRowStyles: trRowStyles,
86
- trTitleStyles: trTitleStyles,
87
- rowPrimaryUpper: rowPrimaryUpper,
88
- hasInlineStyles: hasInlineStyles,
89
- trSubTitleStyles: trSubTitleStyles,
90
- matrixSizeSelected: matrixSizeSelected,
91
- reverseMatrixValues: reverseMatrixValues,
92
- trPrimaryTitleStyles: trPrimaryTitleStyles,
93
- customRowDynamicIdValue: customRowDynamicIdValue,
94
- customTableDataDynamicIdValue: customTableDataDynamicIdValue
95
- })));
52
+ }, /*#__PURE__*/_react.default.createElement(_matrixHeaders.default, null), /*#__PURE__*/_react.default.createElement(_matrixRows.default, null)));
96
53
  };
97
54
 
98
55
  ReactMatrix.defaultProps = {
56
+ tableStyles: {},
99
57
  hasTableBorder: true,
100
- rowPrimaryUpper: true,
101
58
  hasInlineStyles: true,
102
- matrixSizeSelected: 5,
103
- headerPrimaryUpper: true,
104
59
  hasContainerStyles: true,
105
- reverseMatrixValues: true,
106
60
  tableContainerStyles: {},
107
- tableStyles: {},
108
- thRowStyles: {},
109
- thTitleStyles: {},
110
- thSubTitleStyles: {},
111
- thPrimaryTitleStyles: {},
112
- trRowStyles: {},
113
- trTitleStyles: {},
114
- trSubTitleStyles: {},
115
- trPrimaryTitleStyles: {},
116
- tdStyles: {},
117
- customHeaderRowIdValue: "",
118
- customRowDynamicIdValue: "",
119
- customTableDataDynamicIdValue: "",
120
- customRowHeaderDynamicIdValue: "",
121
- customDynamicHeaderTitleIdValue: "",
122
- customDynamicSubHeaderTitleIdValue: ""
61
+ matrixName: "",
62
+ matrixDescription: ""
123
63
  };
124
64
  ReactMatrix.propTypes = {
125
65
  data: _propTypes.default.shape({
@@ -135,7 +75,7 @@ ReactMatrix.propTypes = {
135
75
  header_sub_title: _propTypes.default.string,
136
76
  row_header_title: _propTypes.default.string,
137
77
  row_header_sub_title: _propTypes.default.string
138
- })).isRequired,
78
+ })),
139
79
  matrix_values: _propTypes.default.arrayOf(_propTypes.default.shape({
140
80
  id: _propTypes.default.number.isRequired,
141
81
  colour: _propTypes.default.string,
@@ -146,8 +86,8 @@ ReactMatrix.propTypes = {
146
86
  response: _propTypes.default.string,
147
87
  likelihood_descriptor: _propTypes.default.string.isRequired,
148
88
  consequence_descriptor: _propTypes.default.number
149
- })).isRequired
150
- }).isRequired,
89
+ }))
90
+ }),
151
91
  hasTableBorder: _propTypes.default.bool,
152
92
  hasInlineStyles: _propTypes.default.bool,
153
93
  hasContainerStyles: _propTypes.default.bool,
package/dist/components/tableData.js CHANGED
@@ -13,9 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
13
13
 
14
14
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
15
15
 
16
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
16
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
17
17
 
18
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
18
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
19
19
 
20
20
  function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
21
21
 
package/dist/context/index.js ADDED
@@ -0,0 +1,39 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.default = exports.Provider = void 0;
7
+
8
+ var _react = require("react");
9
+
10
+ const Context = /*#__PURE__*/(0, _react.createContext)({
11
+ hasTableBorder: true,
12
+ rowPrimaryUpper: true,
13
+ hasInlineStyles: true,
14
+ matrixSizeSelected: 5,
15
+ headerPrimaryUpper: true,
16
+ hasContainerStyles: true,
17
+ reverseMatrixValues: true,
18
+ tableContainerStyles: {},
19
+ tableStyles: {},
20
+ thRowStyles: {},
21
+ thTitleStyles: {},
22
+ thSubTitleStyles: {},
23
+ thPrimaryTitleStyles: {},
24
+ trRowStyles: {},
25
+ trTitleStyles: {},
26
+ trSubTitleStyles: {},
27
+ trPrimaryTitleStyles: {},
28
+ tdStyles: {},
29
+ customHeaderRowIdValue: "",
30
+ customRowDynamicIdValue: "",
31
+ customTableDataDynamicIdValue: "",
32
+ customRowHeaderDynamicIdValue: "",
33
+ customDynamicHeaderTitleIdValue: "",
34
+ customDynamicSubHeaderTitleIdValue: ""
35
+ });
36
+ const Provider = Context.Provider;
37
+ exports.Provider = Provider;
38
+ var _default = Context;
39
+ exports.default = _default;
package/dist/helpers/getStyles.js ADDED
@@ -0,0 +1,70 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getTableStyles = exports.getTableBoarder = exports.getHeaderTitleStyles = exports.getHeaderSubTitleStyles = exports.getHeaderRowStyles = exports.getHeaderPrimaryTitleStyles = exports.getCustomStyles = exports.getContainerStyles = void 0;
7
+
8
+ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
9
+
10
+ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
11
+
12
+ function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
13
+
14
+ const getCustomStyles = hasStyle => !hasStyle ? {} : hasStyle;
15
+
16
+ exports.getCustomStyles = getCustomStyles;
17
+
18
+ const getContainerStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
19
+ top: "".concat(50, "%"),
20
+ left: "".concat(50, "%"),
21
+ height: "".concat(100, "%"),
22
+ textAlign: "center",
23
+ position: "absolute",
24
+ transform: "translate(".concat(-50, "%, ").concat(-50, "%)")
25
+ }, styles);
26
+
27
+ exports.getContainerStyles = getContainerStyles;
28
+
29
+ const getTableBoarder = hasStyle => !hasStyle ? {} : {
30
+ border: "".concat(1, "px solid black")
31
+ };
32
+
33
+ exports.getTableBoarder = getTableBoarder;
34
+
35
+ const getTableStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
36
+ width: "".concat(70, "rem")
37
+ }, styles);
38
+
39
+ exports.getTableStyles = getTableStyles;
40
+
41
+ const getHeaderPrimaryTitleStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
42
+ borderWidth: "".concat(0),
43
+ padding: "".concat(1, "rem ", 0, " ", 1, "rem ", 0)
44
+ }, styles);
45
+
46
+ exports.getHeaderPrimaryTitleStyles = getHeaderPrimaryTitleStyles;
47
+
48
+ const getHeaderRowStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
49
+ borderColor: "black",
50
+ borderStyle: "solid",
51
+ padding: "".concat(10, "rem ", 0, " ", 0, " ", 0),
52
+ borderWidth: "".concat(0, " ", 0, " ", 0, " ", 10, "px")
53
+ }, styles);
54
+
55
+ exports.getHeaderRowStyles = getHeaderRowStyles;
56
+
57
+ const getHeaderTitleStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
58
+ padding: "".concat(0, " ", 0.5, "rem ", 0, " ", 0.5, "rem"),
59
+ backgroundColor: "light-grey",
60
+ border: "".concat(1, "px solid black")
61
+ }, styles);
62
+
63
+ exports.getHeaderTitleStyles = getHeaderTitleStyles;
64
+
65
+ const getHeaderSubTitleStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
66
+ fontSize: "".concat(0.9, "em"),
67
+ fontWeight: "normal"
68
+ }, styles);
69
+
70
+ exports.getHeaderSubTitleStyles = getHeaderSubTitleStyles;
package/dist/utils/functions.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.groupObjectsByProp = exports.capitaliseString = exports.capitaliseFirstCharacter = void 0;
6
+ exports.groupObjectsByProp = exports.capitaliseString = exports.capitaliseFirstCharacter = exports.callAll = void 0;
7
7
 
8
8
  require("core-js/modules/web.dom-collections.iterator.js");
9
9
 
@@ -27,4 +27,20 @@ exports.capitaliseFirstCharacter = capitaliseFirstCharacter;
27
27
 
28
28
  const capitaliseString = stringValue => stringValue.toUpperCase();
29
29
 
30
- exports.capitaliseString = capitaliseString;
30
+ exports.capitaliseString = capitaliseString;
31
+
32
+ const callAll = function callAll() {
33
+ for (var _len = arguments.length, fns = new Array(_len), _key = 0; _key < _len; _key++) {
34
+ fns[_key] = arguments[_key];
35
+ }
36
+
37
+ return function () {
38
+ for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
39
+ args[_key2] = arguments[_key2];
40
+ }
41
+
42
+ return fns.forEach(fn => fn && fn(...args));
43
+ };
44
+ };
45
+
46
+ exports.callAll = callAll;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-data-matrix",
3
- "version": "0.1.4",
3
+ "version": "0.1.7",
4
4
  "private": false,
5
5
  "license": "MIT",
6
6
  "homepage": "https://github.com/bronz3beard/react-matrix",
@@ -28,19 +28,20 @@
28
28
  },
29
29
  "description": "View structured data in a matrix table (data grid), showing a value located at an X and Y coordinate.",
30
30
  "dependencies": {
31
- "@babel/polyfill": "^7.12.1",
32
- "@fortawesome/fontawesome-svg-core": "^1.2.36",
33
- "@fortawesome/free-brands-svg-icons": "^5.15.4",
34
- "@fortawesome/react-fontawesome": "^0.1.15",
35
- "@testing-library/jest-dom": "^5.11.4",
36
- "@testing-library/react": "^11.1.0",
37
- "@testing-library/user-event": "^12.1.10",
38
- "prop-types": "^15.7.2",
39
- "react": "^17.0.2",
40
- "react-dom": "^17.0.2",
41
- "react-scripts": "4.0.3",
42
- "sass": "^1.42.1",
43
- "web-vitals": "^1.0.1"
31
+ "@babel/polyfill": "latest",
32
+ "@fortawesome/fontawesome-svg-core": "latest",
33
+ "@fortawesome/free-brands-svg-icons": "latest",
34
+ "@fortawesome/react-fontawesome": "latest",
35
+ "@testing-library/jest-dom": "latest",
36
+ "@testing-library/react": "latest",
37
+ "@testing-library/user-event": "latest",
38
+ "prop-types": "latest",
39
+ "react": "latest",
40
+ "react-data-matrix": "latest",
41
+ "react-dom": "latest",
42
+ "react-scripts": "latest",
43
+ "sass": "latest",
44
+ "web-vitals": "latest"
44
45
  },
45
46
  "scripts": {
46
47
  "start": "react-scripts start",