react-data-matrix 0.3.3 → 0.3.6

package/README.md

@@ -61,7 +61,7 @@ const App: FC = () => {
 
 # Expected Data Structure
 
-- 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,
+- See [`./src/lib/utils/data.ts`](https://github.com/bronz3beard/react-matrix/blob/main/src/lib/utils/data.ts) 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.
 
 ```ts

package/dist/components/MatrixHeaders.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { MatrixHeaderProps } from "../types";
+declare const MatrixHeaders: FC<MatrixHeaderProps>;
+export default MatrixHeaders;

package/dist/components/MatrixHeaders.jsx

@@ -0,0 +1,38 @@
+import React from "react";
+import { getHeaderRowStyles, getHeaderTitleStyles, getHeaderSubTitleStyles, getHeaderPrimaryTitleStyles, } from "../helpers/getStyles";
+import { capitaliseString } from "../utils/functions";
+// import "./styles/riskMatrix.scss";
+const MatrixHeaders = ({ data, hasInlineStyles = true, headerPrimaryUpper = true, thRowStyles = {}, thTitleStyles = {}, thSubTitleStyles = {}, thPrimaryTitleStyles = {}, customHeaderRowIdValue = "", customDynamicHeaderTitleIdValue = "", customDynamicSubHeaderTitleIdValue = "", }) => {
+    const headerRowStyles = getHeaderRowStyles(hasInlineStyles, thRowStyles);
+    const headerTitleStyles = getHeaderTitleStyles(hasInlineStyles, thTitleStyles);
+    const headerSubTitleStyles = getHeaderSubTitleStyles(hasInlineStyles, thSubTitleStyles);
+    const headerPrimaryTitleStyles = getHeaderPrimaryTitleStyles(hasInlineStyles, thPrimaryTitleStyles);
+    const headerPrimaryTitle = !headerPrimaryUpper
+        ? capitaliseString(data === null || data === void 0 ? void 0 : data.primary_header_title)
+        : data === null || data === void 0 ? void 0 : data.primary_header_title;
+    return (<thead>
+      <tr id="react-matrix-blank-headers-primary-title-row">
+        <th headers="blank" colSpan={4}></th>
+        <th style={headerPrimaryTitleStyles} id="react-matrix-header-primary-title">
+          {headerPrimaryTitle}
+        </th>
+        <th headers="blank" colSpan={2}></th>
+      </tr>
+      <tr style={headerRowStyles} id={`react-matrix-dynamic-headers-row-${customHeaderRowIdValue}`}>
+        <th headers="blank" colSpan={2}></th>
+        {data.matrix_details.slice(0, data.matrix_size).map((column, index) => {
+            return (<th scope="col" style={headerTitleStyles} id={`react-matrix-dynamic-column-header-title${!customDynamicHeaderTitleIdValue
+                    ? ""
+                    : `-${customDynamicHeaderTitleIdValue}`}`} key={`${column.id}-${index}`}>
+              {column.header_title}
+              <div style={headerSubTitleStyles} id={`react-matrix-dynamic-column-header-sub-title${!customDynamicSubHeaderTitleIdValue
+                    ? ""
+                    : `-${customDynamicSubHeaderTitleIdValue}`}`}>
+                {column.header_sub_title}
+              </div>
+            </th>);
+        })}
+      </tr>
+    </thead>);
+};
+export default MatrixHeaders;

package/dist/components/MatrixRows.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { MatrixRowsProps } from "../types";
+declare const MatrixRows: FC<MatrixRowsProps>;
+export default MatrixRows;

package/dist/components/MatrixRows.jsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { getHeaderRowStyles, getHeaderTitleStyles, getHeaderSubTitleStyles, getHeaderPrimaryTitleStyles, } from "../helpers/getStyles";
+import { groupObjectsByProp, capitaliseString } from "../utils/functions";
+import TableData from "./TableData";
+const MatrixRows = ({ data, rowPrimaryUpper = true, hasInlineStyles = true, reverseMatrixValues = true, trRowStyles = {}, trTitleStyles = {}, trSubTitleStyles = {}, trPrimaryTitleStyles = {}, tdStyles = {}, customRowDynamicIdValue = "", customRowHeaderDynamicIdValue = "", customTableDataDynamicIdValue = "", }) => {
+    const valuesArray = reverseMatrixValues
+        ? groupObjectsByProp(data.matrix_values, "likelihood_descriptor")
+            .reverse()
+            .slice(0, data.matrix_size)
+        : groupObjectsByProp(data.matrix_values, "likelihood_descriptor").slice(0, data.matrix_size);
+    const tableRowStyles = getHeaderRowStyles(hasInlineStyles, trRowStyles);
+    const tableRowHeaderTitleStyles = getHeaderTitleStyles(hasInlineStyles, trTitleStyles);
+    const tableRowHeaderSubTitleStyles = getHeaderSubTitleStyles(hasInlineStyles, trSubTitleStyles);
+    const rowHeaderPrimaryTitleStyles = getHeaderPrimaryTitleStyles(hasInlineStyles, trPrimaryTitleStyles);
+    const rowPrimaryTitle = rowPrimaryUpper
+        ? capitaliseString(data.primary_row_header_title)
+        : data.primary_row_header_title;
+    return (<tbody>
+      <tr id="react-matrix-row-primary-title">
+        <th scope="row" rowSpan={6} style={rowHeaderPrimaryTitleStyles}>
+          {rowPrimaryTitle}
+        </th>
+      </tr>
+      {valuesArray.map((row, index) => {
+            var _a, _b, _c, _d, _e, _f;
+            const rowHeaderOrder = reverseMatrixValues
+                ? data.matrix_size - (index + 1)
+                : index;
+            return (<tr style={tableRowStyles} key={`row-${index}`} id={`react-matrix-dynamic-rows-${(_a = data.matrix_details[rowHeaderOrder]) === null || _a === void 0 ? void 0 : _a.row_header_title}-${(_b = data.matrix_details[rowHeaderOrder]) === null || _b === void 0 ? void 0 : _b.row_header_sub_title}${!customRowDynamicIdValue ? "" : `-${customRowDynamicIdValue}`}`}>
+            <th scope="row" style={tableRowHeaderTitleStyles} id={`react-matrix-dynamic-rows-${(_c = data.matrix_details[rowHeaderOrder]) === null || _c === void 0 ? void 0 : _c.row_header_title}-${(_d = data.matrix_details[rowHeaderOrder]) === null || _d === void 0 ? void 0 : _d.row_header_sub_title}${!customRowHeaderDynamicIdValue
+                    ? ""
+                    : `-${customRowHeaderDynamicIdValue}`}`}>
+              {(_e = data.matrix_details[rowHeaderOrder]) === null || _e === void 0 ? void 0 : _e.row_header_title}
+              <div style={tableRowHeaderSubTitleStyles}>
+                {(_f = data.matrix_details[rowHeaderOrder]) === null || _f === void 0 ? void 0 : _f.row_header_sub_title}
+              </div>
+            </th>
+            {row
+                    .slice(0, data.matrix_size)
+                    .map((item, index) => {
+                    return (<TableData data={item} tdStyles={tdStyles} key={`${item.id}-${index}`} hasInlineStyles={hasInlineStyles} customTableDataDynamicIdValue={customTableDataDynamicIdValue}/>);
+                })}
+          </tr>);
+        })}
+    </tbody>);
+};
+MatrixRows.defaultProps = {};
+export default MatrixRows;

package/dist/components/ReactMatrix.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { ReactMatrixProps } from "../types";
+declare const ReactMatrix: FC<ReactMatrixProps>;
+export default ReactMatrix;

package/dist/components/ReactMatrix.jsx

@@ -0,0 +1,42 @@
+import React from "react";
+import { getTableStyles, getTableBoarder, getContainerStyles, } from "../helpers/getStyles";
+import MatrixHeaders from "./MatrixHeaders";
+import MatrixRows from "./MatrixRows";
+const ReactMatrix = ({ data, matrixName, tableStyles: contextTableStyles, hasTableBorder: contextHasTableBorder, hasInlineStyles: contextHasInlineStyles, matrixDescription, hasContainerStyles: contextHasContainerStyles, tableContainerStyles: contextTableContainerStyles, tableStyles = {}, }) => {
+    const tableBorder = getTableBoarder(!!(contextHasInlineStyles && contextHasTableBorder));
+    const tableElmStyles = getTableStyles(!!(contextHasInlineStyles && contextTableStyles), tableStyles);
+    const containerStyles = getContainerStyles(!!(contextHasInlineStyles && contextHasContainerStyles), contextTableContainerStyles !== null && contextTableContainerStyles !== void 0 ? contextTableContainerStyles : {});
+    return (<div style={containerStyles}>
+      <h1>{matrixName}</h1>
+      <h4>{matrixDescription}</h4>
+      <table id="matrix-table" style={Object.assign(Object.assign({}, tableElmStyles), tableBorder)}>
+        <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>);
+};
+export default ReactMatrix;

package/dist/components/TableData.d.ts

@@ -0,0 +1,4 @@
+import { FC } from "react";
+import { TableDataProps } from "../types";
+declare const TableData: FC<TableDataProps>;
+export default TableData;

package/dist/components/TableData.jsx

@@ -0,0 +1,19 @@
+import React from "react";
+const TableData = ({ data, tdStyles = {}, hasInlineStyles = true, customTableDataDynamicIdValue = "", }) => {
+    const handleCellClick = (tdSelected) => {
+        alert(`${tdSelected === null || tdSelected === void 0 ? void 0 : tdSelected.description}, ${tdSelected === null || tdSelected === void 0 ? void 0 : tdSelected.score_value} \n${tdSelected === null || tdSelected === void 0 ? void 0 : tdSelected.response}`);
+    };
+    const customTdStyles = !tdStyles ? {} : tdStyles;
+    const tableDataStyles = hasInlineStyles
+        ? Object.assign({ cursor: "pointer", textAlign: "center", borderColor: "black", borderStyle: "solid", borderWidth: `${1}px`, backgroundColor: data === null || data === void 0 ? void 0 : data.colour }, tdStyles) : Object.assign({}, customTdStyles);
+    return (<>
+      <td style={tableDataStyles} onClick={() => handleCellClick(data)} id={`react-matrix-dynamic-table-data${!customTableDataDynamicIdValue
+            ? ""
+            : `-${customTableDataDynamicIdValue}`}`}>
+        {`${data === null || data === void 0 ? void 0 : data.description}`}
+        <br />
+        {`(${data === null || data === void 0 ? void 0 : data.score_value})`}
+      </td>
+    </>);
+};
+export default TableData;

package/dist/helpers/getStyles.d.ts

@@ -0,0 +1,12 @@
+export declare const getCustomStyles: (hasStyle: boolean) => {};
+export declare const getContainerStyles: (hasStyle: boolean, styles: React.CSSProperties) => React.CSSProperties;
+export declare const getTableBoarder: (hasStyle: boolean) => {
+    border?: undefined;
+} | {
+    border: string;
+};
+export declare const getTableStyles: (hasStyle: boolean, styles: React.CSSProperties) => React.CSSProperties;
+export declare const getHeaderPrimaryTitleStyles: (hasStyle: boolean, styles: React.CSSProperties) => React.CSSProperties;
+export declare const getHeaderRowStyles: (hasStyle: boolean, styles: React.CSSProperties) => React.CSSProperties;
+export declare const getHeaderTitleStyles: (hasStyle: boolean, styles: React.CSSProperties) => React.CSSProperties;
+export declare const getHeaderSubTitleStyles: (hasStyle: boolean, styles: React.CSSProperties) => React.CSSProperties;

package/dist/helpers/getStyles.js

@@ -0,0 +1,16 @@
+export const getCustomStyles = (hasStyle) => !hasStyle ? {} : hasStyle;
+export const getContainerStyles = (hasStyle, styles) => 
+// if custom styles are passed remove default styles by returning a spread empty object
+!hasStyle
+    ? Object.assign({}, getCustomStyles(hasStyle)) : Object.assign({ top: `${50}%`, left: `${50}%`, height: `${100}%`, textAlign: "center", position: "absolute", transform: `translate(${-50}%, ${-50}%)` }, styles);
+export const getTableBoarder = (hasStyle) => !hasStyle ? {} : { border: `${1}px solid black` };
+export const getTableStyles = (hasStyle, styles) => !hasStyle
+    ? Object.assign({}, getCustomStyles(hasStyle)) : Object.assign({ width: `${70}rem` }, styles);
+export const getHeaderPrimaryTitleStyles = (hasStyle, styles) => !hasStyle
+    ? Object.assign({}, getCustomStyles(hasStyle)) : Object.assign({ borderWidth: `${0}`, padding: `${1}rem ${0} ${1}rem ${0}` }, styles);
+export const getHeaderRowStyles = (hasStyle, styles) => !hasStyle
+    ? Object.assign({}, getCustomStyles(hasStyle)) : Object.assign({ borderColor: "black", borderStyle: "solid", padding: `${10}rem ${0} ${0} ${0}`, borderWidth: `${0} ${0} ${0} ${10}px` }, styles);
+export const getHeaderTitleStyles = (hasStyle, styles) => !hasStyle
+    ? Object.assign({}, getCustomStyles(hasStyle)) : Object.assign({ padding: `${0} ${0.5}rem ${0} ${0.5}rem`, backgroundColor: "light-grey", border: `${1}px solid black` }, styles);
+export const getHeaderSubTitleStyles = (hasStyle, styles) => !hasStyle
+    ? Object.assign({}, getCustomStyles(hasStyle)) : Object.assign({ fontSize: `${0.9}em`, fontWeight: "normal" }, styles);

package/dist/index.js

@@ -0,0 +1 @@
+export { default as ReactMatrix } from "./components/ReactMatrix";

package/dist/types/index.d.ts

@@ -1,109 +1,104 @@
+/// <reference types="react" />
 export interface MatrixDetail {
-  id: number;
-  position: number;
-  matrix_type: string;
-  likelihood: string;
-  consequence: number;
-  header_title: string;
-  header_sub_title: string;
-  row_header_title: string;
-  row_header_sub_title: string;
+    id: number;
+    position: number;
+    matrix_type: string;
+    likelihood: string;
+    consequence: number;
+    header_title: string;
+    header_sub_title: string;
+    row_header_title: string;
+    row_header_sub_title: string;
 }
-
 export interface MatrixValue {
-  id: number;
-  matrix_id: number;
-  description: string;
-  score_value: number;
-  colour: string;
-  position: number;
-  likelihood_descriptor: string;
-  consequence_descriptor: number;
-  response: string;
+    id: number;
+    matrix_id: number;
+    description: string;
+    score_value: number;
+    colour: string;
+    position: number;
+    likelihood_descriptor: string;
+    consequence_descriptor: number;
+    response: string;
 }
-
 export interface MatrixData {
-  id: number;
-  matrix_size: number;
-  matrix_name: string;
-  primary_header_title: string;
-  primary_row_header_title: string;
-  matrix_description: string;
-  matrix_details: MatrixDetail[];
-  matrix_values: MatrixValue[];
+    id: number;
+    matrix_size: number;
+    matrix_name: string;
+    primary_header_title: string;
+    primary_row_header_title: string;
+    matrix_description: string;
+    matrix_details: MatrixDetail[];
+    matrix_values: MatrixValue[];
 }
-
 export interface ReactMatrixProps {
-  data: MatrixData;
-  matrixName: string;
-  matrixDescription: string;
-  hasTableBorder?: boolean;
-  hasInlineStyles?: boolean | undefined;
-  hasContainerStyles?: boolean | undefined;
-  reverseMatrixValues?: boolean;
-  matrixSizeSelected?: number;
-  rowPrimaryUpper?: boolean;
-  headerPrimaryUpper?: boolean;
-  tableContainerStyles?: React.CSSProperties;
-  tableStyles?: React.CSSProperties;
-  thRowStyles?: React.CSSProperties;
-  thTitleStyles?: React.CSSProperties;
-  thSubTitleStyles?: React.CSSProperties;
-  thPrimaryTitleStyles?: React.CSSProperties;
-  trRowStyles?: React.CSSProperties;
-  trTitleStyles?: React.CSSProperties;
-  trSubTitleStyles?: React.CSSProperties;
-  trPrimaryTitleStyles?: React.CSSProperties;
-  tdStyles?: React.CSSProperties;
-  customHeaderRowIdValue?: string;
-  customDynamicHeaderTitleIdValue?: string;
-  customDynamicSubHeaderTitleIdValue?: string;
-  customRowDynamicIdValue?: string;
-  customRowHeaderDynamicIdValue?: string;
-  customTableDataDynamicIdValue?: string;
+    data: MatrixData;
+    matrixName: string;
+    matrixDescription: string;
+    hasTableBorder?: boolean;
+    hasInlineStyles?: boolean | undefined;
+    hasContainerStyles?: boolean | undefined;
+    reverseMatrixValues?: boolean;
+    matrixSizeSelected?: number;
+    rowPrimaryUpper?: boolean;
+    headerPrimaryUpper?: boolean;
+    tableContainerStyles?: React.CSSProperties;
+    tableStyles?: React.CSSProperties;
+    thRowStyles?: React.CSSProperties;
+    thTitleStyles?: React.CSSProperties;
+    thSubTitleStyles?: React.CSSProperties;
+    thPrimaryTitleStyles?: React.CSSProperties;
+    trRowStyles?: React.CSSProperties;
+    trTitleStyles?: React.CSSProperties;
+    trSubTitleStyles?: React.CSSProperties;
+    trPrimaryTitleStyles?: React.CSSProperties;
+    tdStyles?: React.CSSProperties;
+    customHeaderRowIdValue?: string;
+    customDynamicHeaderTitleIdValue?: string;
+    customDynamicSubHeaderTitleIdValue?: string;
+    customRowDynamicIdValue?: string;
+    customRowHeaderDynamicIdValue?: string;
+    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;
+    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;
+    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;
-    colour: string;
-    position: number;
-    matrix_id: number;
-    score_value: number;
-    description: string;
-    response: string;
-    likelihood_descriptor: string;
-    consequence_descriptor: number;
-  };
-  tdStyles?: React.CSSProperties;
-  hasInlineStyles?: boolean;
-  customTableDataDynamicIdValue?: string;
+    data: {
+        id: number;
+        colour: string;
+        position: number;
+        matrix_id: number;
+        score_value: number;
+        description: string;
+        response: string;
+        likelihood_descriptor: string;
+        consequence_descriptor: number;
+    };
+    tdStyles?: React.CSSProperties;
+    hasInlineStyles?: boolean;
+    customTableDataDynamicIdValue?: string;
 }

package/dist/types/index.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/data.d.ts

@@ -0,0 +1,2 @@
+import { MatrixData } from "../types";
+export declare const data: MatrixData;