react-data-matrix 0.3.1 → 0.3.2

package/README.md

@@ -12,14 +12,49 @@ The most common usage for a table like React Matrix, is to display the **likelih
 
 # Usage
 
-```js
+```ts
 import { ReactMatrix } from "react-data-matrix";
 
-const App = () => {
+const App: FC = () => {
   ...
 
   return (
-    <ReactMatrix data={data} {...seeOtherPropsBelow} />
+    <ReactMatrix
+      {...{
+        matrixName: "",
+        matrixDescription: "",
+        hasTableBorder: true,
+        rowPrimaryUpper: true,
+        hasInlineStyles: true,
+        matrixSizeSelected: 5,
+        headerPrimaryUpper: true,
+        hasContainerStyles: true,
+        reverseMatrixValues: true,
+
+        tableContainerStyles: {},
+        tableStyles: {},
+
+        thRowStyles: {},
+        thTitleStyles: {},
+        thSubTitleStyles: {},
+        thPrimaryTitleStyles: {},
+
+        trRowStyles: {},
+        trTitleStyles: {},
+        trSubTitleStyles: {},
+        trPrimaryTitleStyles: {},
+
+        tdStyles: {},
+
+        customHeaderRowIdValue: "",
+        customRowDynamicIdValue: "",
+        customTableDataDynamicIdValue: "",
+        customRowHeaderDynamicIdValue: "",
+        customDynamicHeaderTitleIdValue: "",
+        customDynamicSubHeaderTitleIdValue: "",
+        data,
+      }}
+    />
   )
 }
 ```
@@ -29,7 +64,7 @@ const App = () => {
 - 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
+```ts
   const data = {
     id: 1,
     matrix_size: 5,
@@ -83,7 +118,7 @@ const App = () => {
   }
 ```
 
-# PropTypes
+# Types
 
 ```ts
 export interface MatrixDetail {
@@ -122,34 +157,7 @@ export interface MatrixData {
 }
 
 export interface ReactMatrixProps {
-  data?: {
-    id: number;
-    matrix_name: string;
-    matrix_description: string;
-    matrix_size: number;
-    primary_header_title: string;
-    primary_row_header_title: string;
-    matrix_details: {
-      id: number;
-      likelihood: string;
-      consequence: number;
-      header_title: string;
-      header_sub_title: string;
-      row_header_title: string;
-      row_header_sub_title: string;
-    }[];
-    matrix_values: {
-      id: number;
-      colour: string;
-      position: number;
-      matrix_id: number;
-      score_value: number;
-      description: string;
-      response: string;
-      likelihood_descriptor: string;
-      consequence_descriptor: number;
-    }[];
-  };
+  data: MatrixData;
   hasTableBorder?: boolean;
   hasInlineStyles?: boolean;
   hasContainerStyles?: boolean;
@@ -194,8 +202,10 @@ export interface TableDataProps {
 }
 ```
 
-```js
+```ts
 defaultProps = {
+  matrixName: "",
+  matrixDescription: "",
   hasTableBorder: true,
   rowPrimaryUpper: true,
   hasInlineStyles: true,
@@ -204,6 +214,9 @@ defaultProps = {
   hasContainerStyles: true,
   reverseMatrixValues: true,
 
+  tableContainerStyles: {},
+  tableStyles: {},
+
   thRowStyles: {},
   thTitleStyles: {},
   thSubTitleStyles: {},
@@ -216,8 +229,6 @@ defaultProps = {
 
   tdStyles: {},
 
-  matrixName: "",
-  matrixDescription: "",
   customHeaderRowIdValue: "",
   customRowDynamicIdValue: "",
   customTableDataDynamicIdValue: "",

package/dist/components/MatrixHeaders.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from "react";
+import React, { FC } from "react";
 import {
   getHeaderRowStyles,
   getHeaderTitleStyles,
@@ -6,23 +6,21 @@ import {
   getHeaderPrimaryTitleStyles,
 } from "../helpers/getStyles";
 import { capitaliseString } from "../utils/functions";
-import Context from "../context";
+import { MatrixHeaderProps } from "../types";
 // import "./styles/riskMatrix.scss";
 
-const MatrixHeaders: FC = () => {
-  const {
-    data,
-    hasInlineStyles = true,
-    headerPrimaryUpper = true,
-    thRowStyles = {},
-    thTitleStyles = {},
-    thSubTitleStyles = {},
-    thPrimaryTitleStyles = {},
-    customHeaderRowIdValue = "",
-    customDynamicHeaderTitleIdValue = "",
-    customDynamicSubHeaderTitleIdValue = "",
-  } = useContext(Context);
-
+const MatrixHeaders: FC<MatrixHeaderProps> = ({
+  data,
+  hasInlineStyles = true,
+  headerPrimaryUpper = true,
+  thRowStyles = {},
+  thTitleStyles = {},
+  thSubTitleStyles = {},
+  thPrimaryTitleStyles = {},
+  customHeaderRowIdValue = "",
+  customDynamicHeaderTitleIdValue = "",
+  customDynamicSubHeaderTitleIdValue = "",
+}: MatrixHeaderProps) => {
   const headerRowStyles = getHeaderRowStyles(hasInlineStyles, thRowStyles);
   const headerTitleStyles = getHeaderTitleStyles(
     hasInlineStyles,

package/dist/components/MatrixRows.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useContext } from "react";
+import React, { FC } from "react";
 import {
   getHeaderRowStyles,
   getHeaderTitleStyles,
@@ -7,25 +7,22 @@ import {
 } from "../helpers/getStyles";
 import { groupObjectsByProp, capitaliseString } from "../utils/functions";
 import TableData from "./TableData";
-import Context from "../context";
-import { MatrixValue } from "../types";
-
-const MatrixRows: FC = () => {
-  const {
-    data,
-    rowPrimaryUpper = true,
-    hasInlineStyles = true,
-    reverseMatrixValues = true,
-    trRowStyles = {},
-    trTitleStyles = {},
-    trSubTitleStyles = {},
-    trPrimaryTitleStyles = {},
-    tdStyles = {},
-    customRowDynamicIdValue = "",
-    customRowHeaderDynamicIdValue = "",
-    customTableDataDynamicIdValue = "",
-  } = useContext(Context);
+import { MatrixRowsProps, MatrixValue } from "../types";
 
+const MatrixRows: FC<MatrixRowsProps> = ({
+  data,
+  rowPrimaryUpper = true,
+  hasInlineStyles = true,
+  reverseMatrixValues = true,
+  trRowStyles = {},
+  trTitleStyles = {},
+  trSubTitleStyles = {},
+  trPrimaryTitleStyles = {},
+  tdStyles = {},
+  customRowDynamicIdValue = "",
+  customRowHeaderDynamicIdValue = "",
+  customTableDataDynamicIdValue = "",
+}: MatrixRowsProps) => {
   const valuesArray = reverseMatrixValues
     ? groupObjectsByProp(data.matrix_values, "likelihood_descriptor")
         .reverse()
@@ -113,23 +110,6 @@ const MatrixRows: FC = () => {
   );
 };
 
-MatrixRows.defaultProps = {
-  rowPrimaryUpper: true,
-  hasInlineStyles: true,
-  reverseMatrixValues: true,
-
-  trRowStyles: {},
-  trTitleStyles: {},
-  trSubTitleStyles: {},
-  trPrimaryTitleStyles: {},
-
-  tdStyles: {},
-
-  matrixSizeSelected: 5,
-
-  customRowDynamicIdValue: "",
-  customRowHeaderDynamicIdValue: "",
-  customTableDataDynamicIdValue: "",
-};
+MatrixRows.defaultProps = {};
 
 export default MatrixRows;

package/dist/components/ReactMatrix.tsx

@@ -6,30 +6,30 @@ import {
 } from "../helpers/getStyles";
 import MatrixHeaders from "./MatrixHeaders";
 import MatrixRows from "./MatrixRows";
-import Context from "../context";
 import { ReactMatrixProps } from "../types";
 
-const ReactMatrix: FC<ReactMatrixProps> = ({ tableStyles = {} }) => {
-  const {
-    matrixName,
-    tableStyles: contextTableStyles,
-    hasTableBorder: contextHasTableBorder,
-    hasInlineStyles: contextHasInlineStyles,
-    matrixDescription,
-    hasContainerStyles: contextHasContainerStyles,
-    tableContainerStyles: contextTableContainerStyles,
-  } = useContext(Context);
+const ReactMatrix: FC<ReactMatrixProps> = ({
+  data,
+  matrixName,
+  tableStyles: contextTableStyles,
+  hasTableBorder: contextHasTableBorder,
+  hasInlineStyles: contextHasInlineStyles,
+  matrixDescription,
+  hasContainerStyles: contextHasContainerStyles,
+  tableContainerStyles: contextTableContainerStyles,
 
+  tableStyles = {},
+}) => {
   const tableBorder = getTableBoarder(
-    contextHasInlineStyles && contextHasTableBorder
+    !!(contextHasInlineStyles && contextHasTableBorder)
   );
   const tableElmStyles = getTableStyles(
     !!(contextHasInlineStyles && contextTableStyles),
     tableStyles
   );
   const containerStyles = getContainerStyles(
-    contextHasInlineStyles && contextHasContainerStyles,
-    contextTableContainerStyles
+    !!(contextHasInlineStyles && contextHasContainerStyles),
+    contextTableContainerStyles ?? {}
   );
 
   return (
@@ -37,8 +37,36 @@ const ReactMatrix: FC<ReactMatrixProps> = ({ tableStyles = {} }) => {
       <h1>{matrixName}</h1>
       <h4>{matrixDescription}</h4>
       <table id="matrix-table" style={{ ...tableElmStyles, ...tableBorder }}>
-        <MatrixHeaders />
-        <MatrixRows />
+        <MatrixHeaders
+          {...{
+            data,
+            hasInlineStyles: true,
+            headerPrimaryUpper: true,
+            thRowStyles: {},
+            thTitleStyles: {},
+            thSubTitleStyles: {},
+            thPrimaryTitleStyles: {},
+            customHeaderRowIdValue: "",
+            customDynamicHeaderTitleIdValue: "",
+            customDynamicSubHeaderTitleIdValue: "",
+          }}
+        />
+        <MatrixRows
+          {...{
+            data,
+            rowPrimaryUpper: true,
+            hasInlineStyles: true,
+            reverseMatrixValues: true,
+            trRowStyles: {},
+            trTitleStyles: {},
+            trSubTitleStyles: {},
+            trPrimaryTitleStyles: {},
+            tdStyles: {},
+            customRowDynamicIdValue: "",
+            customRowHeaderDynamicIdValue: "",
+            customTableDataDynamicIdValue: "",
+          }}
+        />
       </table>
     </div>
   );

package/dist/types/index.d.ts

@@ -34,37 +34,12 @@ export interface MatrixData {
 }
 
 export interface ReactMatrixProps {
-  data?: {
-    id: number;
-    matrix_name: string;
-    matrix_description: string;
-    matrix_size: number;
-    primary_header_title: string;
-    primary_row_header_title: string;
-    matrix_details: {
-      id: number;
-      likelihood: string;
-      consequence: number;
-      header_title: string;
-      header_sub_title: string;
-      row_header_title: string;
-      row_header_sub_title: string;
-    }[];
-    matrix_values: {
-      id: number;
-      colour: string;
-      position: number;
-      matrix_id: number;
-      score_value: number;
-      description: string;
-      response: string;
-      likelihood_descriptor: string;
-      consequence_descriptor: number;
-    }[];
-  };
+  data: MatrixData;
+  matrixName: string;
+  matrixDescription: string;
   hasTableBorder?: boolean;
-  hasInlineStyles?: boolean;
-  hasContainerStyles?: boolean;
+  hasInlineStyles?: boolean | undefined;
+  hasContainerStyles?: boolean | undefined;
   reverseMatrixValues?: boolean;
   matrixSizeSelected?: number;
   rowPrimaryUpper?: boolean;
@@ -88,6 +63,34 @@ export interface ReactMatrixProps {
   customTableDataDynamicIdValue?: string;
 }
 
+export interface MatrixHeaderProps {
+  data: MatrixData;
+  hasInlineStyles?: boolean | undefined;
+  headerPrimaryUpper?: boolean;
+  thRowStyles?: React.CSSProperties;
+  thTitleStyles?: React.CSSProperties;
+  thSubTitleStyles?: React.CSSProperties;
+  thPrimaryTitleStyles?: React.CSSProperties;
+  customHeaderRowIdValue?: string;
+  customDynamicHeaderTitleIdValue?: string;
+  customDynamicSubHeaderTitleIdValue?: string;
+}
+
+export interface MatrixRowsProps {
+  data: MatrixData;
+  rowPrimaryUpper?: boolean;
+  hasInlineStyles?: boolean | undefined;
+  reverseMatrixValues?: boolean;
+  trRowStyles?: React.CSSProperties;
+  trTitleStyles?: React.CSSProperties;
+  trSubTitleStyles?: React.CSSProperties;
+  trPrimaryTitleStyles?: React.CSSProperties;
+  tdStyles?: React.CSSProperties;
+  customRowDynamicIdValue?: string;
+  customRowHeaderDynamicIdValue?: string;
+  customTableDataDynamicIdValue?: string;
+}
+
 export interface TableDataProps {
   data: {
     id: number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-data-matrix",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "types": "./lib/types/index.d.ts",
   "private": false,
   "license": "MIT",

package/dist/context/index.tsx

@@ -1,66 +0,0 @@
-import { createContext } from "react";
-import { MatrixData } from "../types";
-
-interface ContextType {
-  data: MatrixData;
-  matrixName: string;
-  matrixDescription: string;
-  hasTableBorder: boolean;
-  rowPrimaryUpper: boolean;
-  hasInlineStyles: boolean;
-  matrixSizeSelected: number;
-  headerPrimaryUpper: boolean;
-  hasContainerStyles: boolean;
-  reverseMatrixValues: boolean;
-  tableContainerStyles: Record<string, any>;
-  tableStyles: Record<string, any>;
-  thRowStyles: Record<string, any>;
-  thTitleStyles: Record<string, any>;
-  thSubTitleStyles: Record<string, any>;
-  thPrimaryTitleStyles: Record<string, any>;
-  trRowStyles: Record<string, any>;
-  trTitleStyles: Record<string, any>;
-  trSubTitleStyles: Record<string, any>;
-  trPrimaryTitleStyles: Record<string, any>;
-  tdStyles: Record<string, any>;
-  customHeaderRowIdValue: string;
-  customRowDynamicIdValue: string;
-  customTableDataDynamicIdValue: string;
-  customRowHeaderDynamicIdValue: string;
-  customDynamicHeaderTitleIdValue: string;
-  customDynamicSubHeaderTitleIdValue: string;
-}
-
-const Context = createContext<ContextType>({
-  data: {} as MatrixData,
-  matrixName: "",
-  matrixDescription: "",
-  hasTableBorder: true,
-  rowPrimaryUpper: true,
-  hasInlineStyles: true,
-  matrixSizeSelected: 5,
-  headerPrimaryUpper: true,
-  hasContainerStyles: true,
-  reverseMatrixValues: true,
-  tableContainerStyles: {},
-  tableStyles: {},
-  thRowStyles: {},
-  thTitleStyles: {},
-  thSubTitleStyles: {},
-  thPrimaryTitleStyles: {},
-  trRowStyles: {},
-  trTitleStyles: {},
-  trSubTitleStyles: {},
-  trPrimaryTitleStyles: {},
-  tdStyles: {},
-  customHeaderRowIdValue: "",
-  customRowDynamicIdValue: "",
-  customTableDataDynamicIdValue: "",
-  customRowHeaderDynamicIdValue: "",
-  customDynamicHeaderTitleIdValue: "",
-  customDynamicSubHeaderTitleIdValue: "",
-});
-
-export const Provider = Context.Provider;
-
-export default Context;