react-data-matrix 0.1.2 → 0.1.5

package/README.md

@@ -1,12 +1,30 @@
-# React Matrix
+# React Matrix   [![npm version](https://badge.fury.io/js/react-data-matrix.svg)](https://badge.fury.io/js/react-data-matrix)
+
 [React Matrix Demo](https://react-matrix.herokuapp.com/)
 
 React Matrix table shows relationships between two or more variables in a data set in grid format.
 
 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.
 
+# PR's
+- 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.
+
+# Usage
+
+```js 
+import { ReactMatrix } from "react-data-matrix";
+
+const App = () => {
+  ...
+
+  return (
+    <ReactMatrix data={data} {...seeOtherPropsBelow} />
+  )
+}
+```
+
 # Expected Data Structure
-- See ```./src/lib/utils/data.js``` for an example of the data, this can be used for testing if needed,
+- See [```./src/lib/utils/data.js```](https://github.com/bronz3beard/react-matrix/blob/main/src/lib/utils/data.js) for an example of the data, this can be used for testing if needed,
   or an example of how to construct/deconstruct your data objects from your api.
 
 ```js
@@ -161,7 +179,7 @@ The most common usage for a table like React Matrix, is to display the __likelih
 ```
 
 # Available Properties
-----
+
 - __hasInlineStyles__
   * Default is true.
   * If false all inline styles are removed.
@@ -230,6 +248,10 @@ The most common usage for a table like React Matrix, is to display the __likelih
 __These styles can be added to the current styles or, 
 if you make ```hasInlineStyles = false```, then add these values with your own styles, you can have full control over styling inline.__
 
+__ReactMatrix__
+- tableContainerStyles={{}}
+- tableStyles={{}}
+
 __MatrixHeaders__
 - thRowStyles={{}}
 - thTitleStyles={{}}

package/dist/components/matrixHeaders.js

@@ -13,9 +13,9 @@ var _functions = require("../utils/functions");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
+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; }
 
-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; }
+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; }
 
 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; }
 
@@ -47,6 +47,7 @@ const MatrixHeaders = props => {
   }, thRowStyles) : _objectSpread({}, customRowStyles);
   const customThTitleStyles = !thTitleStyles ? {} : thTitleStyles;
   const headerTitleStyles = hasInlineStyles ? _objectSpread({
+    padding: "".concat(0, " ", 0.5, "rem ", 0, " ", 0.5, "rem"),
     backgroundColor: "light-grey",
     border: "".concat(1, "px solid black")
   }, thTitleStyles) : _objectSpread({}, customThTitleStyles);
@@ -59,27 +60,20 @@ const MatrixHeaders = props => {
   return /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
     id: "react-matrix-blank-headers-primary-title-row"
   }, /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
-  }), /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
-  }), /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
-  }), /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
+    headers: "blank",
+    colSpan: "4"
   }), /*#__PURE__*/_react.default.createElement("th", {
     style: headerPrimaryTitleStyles,
     id: "react-matrix-header-primary-title"
   }, headerPrimaryTitle), /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
-  }), /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
+    headers: "blank",
+    colSpan: "2"
   })), /*#__PURE__*/_react.default.createElement("tr", {
     style: headerRowStyles,
     id: "react-matrix-dynamic-headers-row-".concat(customHeaderRowIdValue)
   }, /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
-  }), /*#__PURE__*/_react.default.createElement("th", {
-    headers: "blank"
+    headers: "blank",
+    colSpan: "2"
   }), data.matrix_details.slice(0, data.matrix_size).map((column, index) => {
     return /*#__PURE__*/_react.default.createElement("th", {
       scope: "col",

package/dist/components/matrixRows.js

@@ -17,9 +17,9 @@ var _tableData = _interopRequireDefault(require("./tableData"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
+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; }
 
-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; }
+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; }
 
 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; }
 
@@ -47,7 +47,7 @@ const MatrixRows = props => {
   }, customRowStyles) : _objectSpread({}, customRowStyles);
   const customTitleStyle = !trTitleStyles ? {} : trTitleStyles;
   const tableRowHeaderTitleStyles = hasInlineStyles ? _objectSpread({
-    backgroundColor: "light-black",
+    padding: "".concat(0, " ", 0.5, "rem ", 0, " ", 0.5, "rem"),
     border: "".concat(1, "px solid black")
   }, trTitleStyles) : _objectSpread({}, customTitleStyle);
   const customSubTitleStyle = !trSubTitleStyles ? {} : trSubTitleStyles;

package/dist/components/reactMatrix.js

@@ -15,9 +15,16 @@ var _matrixRows = _interopRequireDefault(require("./matrixRows"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
+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; }
+
+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; }
+
 const ReactMatrix = props => {
   const {
     data,
+    tableStyles,
     thRowStyles,
     trRowStyles,
     trTitleStyles,
@@ -33,27 +40,34 @@ const ReactMatrix = props => {
     reverseMatrixValues,
     thPrimaryTitleStyles,
     trPrimaryTitleStyles,
+    tableContainerStyles,
     customHeaderRowIdValue,
     customRowDynamicIdValue,
     customTableDataDynamicIdValue,
     customDynamicHeaderTitleIdValue,
     customDynamicSubHeaderTitleIdValue
   } = props;
-  const containerStyles = hasInlineStyles && hasContainerStyles ? {
+  const customContainerStyles = !tableContainerStyles ? {} : tableContainerStyles;
+  const containerStyles = hasInlineStyles && hasContainerStyles ? _objectSpread({
     top: "".concat(50, "%"),
     left: "".concat(50, "%"),
+    height: "".concat(100, "%"),
     textAlign: "center",
     position: "absolute",
     transform: "translate(".concat(-50, "%, ").concat(-50, "%)")
-  } : {};
+  }, tableContainerStyles) : _objectSpread({}, customContainerStyles);
   const tableBorder = hasInlineStyles && hasTableBorder ? {
     border: "".concat(1, "px solid black")
   } : {};
+  const customTableStyles = !tableStyles ? {} : tableStyles;
+  const tableElmStyles = hasInlineStyles && tableStyles ? _objectSpread({
+    width: "".concat(70, "rem")
+  }, tableStyles) : _objectSpread({}, customTableStyles);
   return /*#__PURE__*/_react.default.createElement("div", {
     style: containerStyles
   }, /*#__PURE__*/_react.default.createElement("h1", null, data.matrix_name), /*#__PURE__*/_react.default.createElement("h4", null, data.matrix_description), /*#__PURE__*/_react.default.createElement("table", {
     id: "matrix-table",
-    style: tableBorder
+    style: _objectSpread(_objectSpread({}, tableElmStyles), tableBorder)
   }, /*#__PURE__*/_react.default.createElement(_matrixHeaders.default, {
     data: data,
     thRowStyles: thRowStyles,
@@ -89,6 +103,8 @@ ReactMatrix.defaultProps = {
   headerPrimaryUpper: true,
   hasContainerStyles: true,
   reverseMatrixValues: true,
+  tableContainerStyles: {},
+  tableStyles: {},
   thRowStyles: {},
   thTitleStyles: {},
   thSubTitleStyles: {},
@@ -139,6 +155,8 @@ ReactMatrix.propTypes = {
   matrixSizeSelected: _propTypes.default.number,
   rowPrimaryUpper: _propTypes.default.bool,
   headerPrimaryUpper: _propTypes.default.bool,
+  tableContainerStyles: _propTypes.default.shape({}),
+  tableStyles: _propTypes.default.shape({}),
   thRowStyles: _propTypes.default.shape({}),
   thTitleStyles: _propTypes.default.shape({}),
   thSubTitleStyles: _propTypes.default.shape({}),

package/dist/components/tableData.js

@@ -13,9 +13,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-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; }
+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; }
 
-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; }
+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; }
 
 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; }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-matrix",
-  "version": "0.1.2",
+  "version": "0.1.5",
   "private": false,
   "license": "MIT",
   "homepage": "https://github.com/bronz3beard/react-matrix",
@@ -12,7 +12,9 @@
     "matrix",
     "react",
     "table",
-    "data table"
+    "data table",
+    "data grid",
+    "data matrix"
   ],
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -26,16 +28,20 @@
   },
   "description": "View structured data in a matrix table (data grid), showing a value located at an X and Y coordinate.",
   "dependencies": {
-    "@babel/polyfill": "^7.12.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "prop-types": "^15.7.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-scripts": "4.0.3",
-    "sass": "^1.42.1",
-    "web-vitals": "^1.0.1"
+    "@babel/polyfill": "latest",
+    "@fortawesome/fontawesome-svg-core": "latest",
+    "@fortawesome/free-brands-svg-icons": "latest",
+    "@fortawesome/react-fontawesome": "latest",
+    "@testing-library/jest-dom": "latest",
+    "@testing-library/react": "latest",
+    "@testing-library/user-event": "latest",
+    "prop-types": "latest",
+    "react": "latest",
+    "react-data-matrix": "latest",
+    "react-dom": "latest",
+    "react-scripts": "latest",
+    "sass": "latest",
+    "web-vitals": "latest"
   },
   "scripts": {
     "start": "react-scripts start",