react-data-matrix 0.1.3 → 0.1.6

package/README.md

@@ -1,10 +1,14 @@
-# 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 
@@ -20,7 +24,7 @@ const App = () => {
 ```
 
 # 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
@@ -165,6 +169,8 @@ const App = () => {
 
     tdStyles: {},
 
+    matrixName: "",
+    matrixDescription: "",
     customHeaderRowIdValue: "",
     customRowDynamicIdValue: "",
     customTableDataDynamicIdValue: "",
@@ -175,7 +181,7 @@ const App = () => {
 ```
 
 # Available Properties
-----
+
 - __hasInlineStyles__
   * Default is true.
   * If false all inline styles are removed.
@@ -244,6 +250,10 @@ const App = () => {
 __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

@@ -9,16 +9,12 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _getStyles = require("../helpers/getStyles");
+
 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 _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 _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; }
-
 // import "./styles/riskMatrix.scss";
 const MatrixHeaders = props => {
   const {
@@ -33,53 +29,28 @@ const MatrixHeaders = props => {
     customDynamicHeaderTitleIdValue,
     customDynamicSubHeaderTitleIdValue
   } = props;
-  const customPrimaryTitleStyles = !thPrimaryTitleStyles ? {} : thPrimaryTitleStyles;
-  const headerPrimaryTitleStyles = hasInlineStyles ? _objectSpread({
-    borderWidth: "".concat(0),
-    padding: "".concat(1, "rem ", 0, " ", 1, "rem ", 0)
-  }, thPrimaryTitleStyles) : _objectSpread({}, customPrimaryTitleStyles);
-  const customRowStyles = !thRowStyles ? {} : thRowStyles;
-  const headerRowStyles = hasInlineStyles ? _objectSpread({
-    borderColor: "black",
-    borderStyle: "solid",
-    padding: "".concat(10, "rem ", 0, " ", 0, " ", 0),
-    borderWidth: "".concat(0, " ", 0, " ", 0, " ", 10, "px")
-  }, thRowStyles) : _objectSpread({}, customRowStyles);
-  const customThTitleStyles = !thTitleStyles ? {} : thTitleStyles;
-  const headerTitleStyles = hasInlineStyles ? _objectSpread({
-    backgroundColor: "light-grey",
-    border: "".concat(1, "px solid black")
-  }, thTitleStyles) : _objectSpread({}, customThTitleStyles);
-  const customThSubTitleStyles = !thSubTitleStyles ? {} : thSubTitleStyles;
-  const headerSubTitleStyles = hasInlineStyles ? _objectSpread({
-    fontSize: "".concat(0.9, "em"),
-    fontWeight: "normal"
-  }, thSubTitleStyles) : _objectSpread({}, customThSubTitleStyles);
+  const headerRowStyles = (0, _getStyles.getHeaderRowStyles)(hasInlineStyles, thRowStyles);
+  const headerTitleStyles = (0, _getStyles.getHeaderTitleStyles)(hasInlineStyles, thTitleStyles);
+  const headerSubTitleStyles = (0, _getStyles.getHeaderSubTitleStyles)(hasInlineStyles, thSubTitleStyles);
+  const headerPrimaryTitleStyles = (0, _getStyles.getHeaderPrimaryTitleStyles)(hasInlineStyles, thPrimaryTitleStyles);
   const headerPrimaryTitle = headerPrimaryUpper ? (0, _functions.capitaliseString)(data.primary_header_title) : data.primary_header_title;
   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",
@@ -100,6 +71,7 @@ MatrixHeaders.defaultProps = {
   thTitleStyles: {},
   thSubTitleStyles: {},
   thPrimaryTitleStyles: {},
+  matrixSizeSelected: 5,
   customHeaderRowIdValue: "",
   customDynamicHeaderTitleIdValue: "",
   customDynamicSubHeaderTitleIdValue: ""

package/dist/components/matrixRows.js

@@ -9,6 +9,8 @@ require("core-js/modules/es.array.reverse.js");
 
 var _react = _interopRequireDefault(require("react"));
 
+var _getStyles = require("../helpers/getStyles");
+
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _functions = require("../utils/functions");
@@ -17,12 +19,6 @@ 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 _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 _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 MatrixRows = props => {
   const {
     data,
@@ -39,22 +35,10 @@ const MatrixRows = props => {
     customTableDataDynamicIdValue
   } = props;
   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);
-  const customPrimaryTitleStyles = !trPrimaryTitleStyles ? {} : trPrimaryTitleStyles;
-  const rowHeaderPrimaryTitleStyles = hasInlineStyles ? _objectSpread({}, trPrimaryTitleStyles) : _objectSpread({}, customPrimaryTitleStyles);
-  const customRowStyles = !trRowStyles ? {} : trRowStyles;
-  const tableRowStyles = hasInlineStyles ? _objectSpread({
-    border: "".concat(1, "px solid black")
-  }, customRowStyles) : _objectSpread({}, customRowStyles);
-  const customTitleStyle = !trTitleStyles ? {} : trTitleStyles;
-  const tableRowHeaderTitleStyles = hasInlineStyles ? _objectSpread({
-    backgroundColor: "light-black",
-    border: "".concat(1, "px solid black")
-  }, trTitleStyles) : _objectSpread({}, customTitleStyle);
-  const customSubTitleStyle = !trSubTitleStyles ? {} : trSubTitleStyles;
-  const tableRowHeaderSubTitleStyles = hasInlineStyles ? _objectSpread({
-    fontSize: "".concat(0.9, "em"),
-    fontWeight: "normal"
-  }, trSubTitleStyles) : _objectSpread({}, customSubTitleStyle);
+  const tableRowStyles = (0, _getStyles.getHeaderRowStyles)(hasInlineStyles, trRowStyles);
+  const tableRowHeaderTitleStyles = (0, _getStyles.getHeaderTitleStyles)(hasInlineStyles, trTitleStyles);
+  const tableRowHeaderSubTitleStyles = (0, _getStyles.getHeaderSubTitleStyles)(hasInlineStyles, trSubTitleStyles);
+  const rowHeaderPrimaryTitleStyles = (0, _getStyles.getHeaderPrimaryTitleStyles)(hasInlineStyles, trPrimaryTitleStyles);
   const rowPrimaryTitle = rowPrimaryUpper ? (0, _functions.capitaliseString)(data.primary_row_header_title) : data.primary_row_header_title;
   return /*#__PURE__*/_react.default.createElement("tbody", null, /*#__PURE__*/_react.default.createElement("tr", {
     id: "react-matrix-row-primary-title"
@@ -97,6 +81,7 @@ MatrixRows.defaultProps = {
   trSubTitleStyles: {},
   trPrimaryTitleStyles: {},
   tdStyles: {},
+  matrixSizeSelected: 5,
   customRowDynamicIdValue: "",
   customRowHeaderDynamicIdValue: "",
   customTableDataDynamicIdValue: ""

package/dist/components/reactMatrix.js

@@ -9,101 +9,75 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _getStyles = require("../helpers/getStyles");
+
 var _matrixHeaders = _interopRequireDefault(require("./matrixHeaders"));
 
 var _matrixRows = _interopRequireDefault(require("./matrixRows"));
 
+var _context = require("../context");
+
 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,
-    thRowStyles,
-    trRowStyles,
-    trTitleStyles,
-    thTitleStyles,
+    matrixName,
+    tableStyles,
     hasTableBorder,
-    rowPrimaryUpper,
     hasInlineStyles,
-    thSubTitleStyles,
-    trSubTitleStyles,
-    headerPrimaryUpper,
-    matrixSizeSelected,
+    matrixDescription,
     hasContainerStyles,
-    reverseMatrixValues,
-    thPrimaryTitleStyles,
-    trPrimaryTitleStyles,
-    customHeaderRowIdValue,
-    customRowDynamicIdValue,
-    customTableDataDynamicIdValue,
-    customDynamicHeaderTitleIdValue,
-    customDynamicSubHeaderTitleIdValue
+    tableContainerStyles
   } = props;
-  const containerStyles = hasInlineStyles && hasContainerStyles ? {
-    top: "".concat(50, "%"),
-    left: "".concat(50, "%"),
-    textAlign: "center",
-    position: "absolute",
-    transform: "translate(".concat(-50, "%, ").concat(-50, "%)")
-  } : {};
-  const tableBorder = hasInlineStyles && hasTableBorder ? {
-    border: "".concat(1, "px solid black")
-  } : {};
+  const tableBorder = (0, _getStyles.getTableBoarder)(hasInlineStyles && hasTableBorder);
+  const tableElmStyles = (0, _getStyles.getTableStyles)(hasInlineStyles && tableStyles, tableStyles);
+  const containerStyles = (0, _getStyles.getContainerStyles)(hasInlineStyles && hasContainerStyles, tableContainerStyles);
   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", {
+  }, /*#__PURE__*/_react.default.createElement("h1", null, matrixName), /*#__PURE__*/_react.default.createElement("h4", null, matrixDescription), /*#__PURE__*/_react.default.createElement("table", {
     id: "matrix-table",
-    style: tableBorder
-  }, /*#__PURE__*/_react.default.createElement(_matrixHeaders.default, {
-    data: data,
-    thRowStyles: thRowStyles,
-    thTitleStyles: thTitleStyles,
-    hasInlineStyles: hasInlineStyles,
-    thSubTitleStyles: thSubTitleStyles,
-    headerPrimaryUpper: headerPrimaryUpper,
-    matrixSizeSelected: matrixSizeSelected,
-    thPrimaryTitleStyles: thPrimaryTitleStyles,
-    customHeaderRowIdValue: customHeaderRowIdValue,
-    customDynamicHeaderTitleIdValue: customDynamicHeaderTitleIdValue,
-    customDynamicSubHeaderTitleIdValue: customDynamicSubHeaderTitleIdValue
-  }), /*#__PURE__*/_react.default.createElement(_matrixRows.default, {
-    data: data,
-    trRowStyles: trRowStyles,
-    trTitleStyles: trTitleStyles,
-    rowPrimaryUpper: rowPrimaryUpper,
-    hasInlineStyles: hasInlineStyles,
-    trSubTitleStyles: trSubTitleStyles,
-    matrixSizeSelected: matrixSizeSelected,
-    reverseMatrixValues: reverseMatrixValues,
-    trPrimaryTitleStyles: trPrimaryTitleStyles,
-    customRowDynamicIdValue: customRowDynamicIdValue,
-    customTableDataDynamicIdValue: customTableDataDynamicIdValue
-  })));
+    style: _objectSpread(_objectSpread({}, tableElmStyles), tableBorder)
+  }, /*#__PURE__*/_react.default.createElement(_context.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_matrixHeaders.default, {
+    data: context.data,
+    thRowStyles: context.thRowStyles,
+    thTitleStyles: context.thTitleStyles,
+    hasInlineStyles: context.hasInlineStyles,
+    thSubTitleStyles: context.thSubTitleStyles,
+    headerPrimaryUpper: context.headerPrimaryUpper,
+    matrixSizeSelected: context.matrixSizeSelected,
+    thPrimaryTitleStyles: context.thPrimaryTitleStyles,
+    customHeaderRowIdValue: context.customHeaderRowIdValue,
+    customDynamicHeaderTitleIdValue: context.customDynamicHeaderTitleIdValue,
+    customDynamicSubHeaderTitleIdValue: context.customDynamicSubHeaderTitleIdValue
+  })), /*#__PURE__*/_react.default.createElement(_context.Consumer, null, context => /*#__PURE__*/_react.default.createElement(_matrixRows.default, {
+    data: context.data,
+    trRowStyles: context.trRowStyles,
+    trTitleStyles: context.trTitleStyles,
+    rowPrimaryUpper: context.rowPrimaryUpper,
+    hasInlineStyles: context.hasInlineStyles,
+    trSubTitleStyles: context.trSubTitleStyles,
+    matrixSizeSelected: context.matrixSizeSelected,
+    reverseMatrixValues: context.reverseMatrixValues,
+    trPrimaryTitleStyles: context.trPrimaryTitleStyles,
+    customRowDynamicIdValue: context.customRowDynamicIdValue,
+    customTableDataDynamicIdValue: context.customTableDataDynamicIdValue
+  }))));
 };
 
 ReactMatrix.defaultProps = {
+  tableStyles: {},
   hasTableBorder: true,
-  rowPrimaryUpper: true,
   hasInlineStyles: true,
-  matrixSizeSelected: 5,
-  headerPrimaryUpper: true,
   hasContainerStyles: true,
-  reverseMatrixValues: true,
-  thRowStyles: {},
-  thTitleStyles: {},
-  thSubTitleStyles: {},
-  thPrimaryTitleStyles: {},
-  trRowStyles: {},
-  trTitleStyles: {},
-  trSubTitleStyles: {},
-  trPrimaryTitleStyles: {},
-  tdStyles: {},
-  customHeaderRowIdValue: "",
-  customRowDynamicIdValue: "",
-  customTableDataDynamicIdValue: "",
-  customRowHeaderDynamicIdValue: "",
-  customDynamicHeaderTitleIdValue: "",
-  customDynamicSubHeaderTitleIdValue: ""
+  tableContainerStyles: {},
+  matrixName: "",
+  matrixDescription: ""
 };
 ReactMatrix.propTypes = {
   data: _propTypes.default.shape({
@@ -131,7 +105,7 @@ ReactMatrix.propTypes = {
       likelihood_descriptor: _propTypes.default.string.isRequired,
       consequence_descriptor: _propTypes.default.number
     })).isRequired
-  }).isRequired,
+  }),
   hasTableBorder: _propTypes.default.bool,
   hasInlineStyles: _propTypes.default.bool,
   hasContainerStyles: _propTypes.default.bool,
@@ -139,6 +113,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/dist/context/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Provider = exports.Consumer = void 0;
+
+var _react = require("react");
+
+const {
+  Provider,
+  Consumer
+} = /*#__PURE__*/(0, _react.createContext)();
+exports.Consumer = Consumer;
+exports.Provider = Provider;

package/dist/helpers/getStyles.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTableStyles = exports.getTableBoarder = exports.getHeaderTitleStyles = exports.getHeaderSubTitleStyles = exports.getHeaderRowStyles = exports.getHeaderPrimaryTitleStyles = exports.getCustomStyles = exports.getContainerStyles = void 0;
+
+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 getCustomStyles = hasStyle => !hasStyle ? {} : hasStyle;
+
+exports.getCustomStyles = getCustomStyles;
+
+const getContainerStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
+  top: "".concat(50, "%"),
+  left: "".concat(50, "%"),
+  height: "".concat(100, "%"),
+  textAlign: "center",
+  position: "absolute",
+  transform: "translate(".concat(-50, "%, ").concat(-50, "%)")
+}, styles);
+
+exports.getContainerStyles = getContainerStyles;
+
+const getTableBoarder = hasStyle => !hasStyle ? {} : {
+  border: "".concat(1, "px solid black")
+};
+
+exports.getTableBoarder = getTableBoarder;
+
+const getTableStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
+  width: "".concat(70, "rem")
+}, styles);
+
+exports.getTableStyles = getTableStyles;
+
+const getHeaderPrimaryTitleStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
+  borderWidth: "".concat(0),
+  padding: "".concat(1, "rem ", 0, " ", 1, "rem ", 0)
+}, styles);
+
+exports.getHeaderPrimaryTitleStyles = getHeaderPrimaryTitleStyles;
+
+const getHeaderRowStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
+  borderColor: "black",
+  borderStyle: "solid",
+  padding: "".concat(10, "rem ", 0, " ", 0, " ", 0),
+  borderWidth: "".concat(0, " ", 0, " ", 0, " ", 10, "px")
+}, styles);
+
+exports.getHeaderRowStyles = getHeaderRowStyles;
+
+const getHeaderTitleStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
+  padding: "".concat(0, " ", 0.5, "rem ", 0, " ", 0.5, "rem"),
+  backgroundColor: "light-grey",
+  border: "".concat(1, "px solid black")
+}, styles);
+
+exports.getHeaderTitleStyles = getHeaderTitleStyles;
+
+const getHeaderSubTitleStyles = (hasStyle, styles) => !hasStyle ? _objectSpread({}, getCustomStyles(styles)) : _objectSpread({
+  fontSize: "".concat(0.9, "em"),
+  fontWeight: "normal"
+}, styles);
+
+exports.getHeaderSubTitleStyles = getHeaderSubTitleStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-matrix",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "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",