fix eslint and review issues

src/else-dimension-measures.jsx

@@ -105,7 +105,7 @@ class ElseDimensionMeasures extends React.PureComponent {
           fontSize: (12 + vLetterSize) + 'px'
         };
         const seperatorElement = (
-          <th class = "empty" style={seperatorStyle}>*</th>
+          <th key={nMeasures22} className="empty" style={seperatorStyle}>*</th>
         );
         measurementCells.push(seperatorElement);
         nMeasure7 = 1;
@@ -147,13 +147,13 @@ class ElseDimensionMeasures extends React.PureComponent {
         };
         if (vSpecialF.substring(vSpecialF.length - 1) == '%' && vNumMeasures > 1) {
           cellElement = (
-            <td className={'grid-cells-small' + sufixCells} style={cellStyle}>
+            <td key={nMeasures22} className={'grid-cells-small' + sufixCells} style={cellStyle}>
               {columnNumber}
             </td>
           );
         } else {
           cellElement = (
-            <td className={'grid-cells' + sufixCells} style={cellStyle}>
+            <td key={nMeasures22} className={'grid-cells' + sufixCells} style={cellStyle}>
               {columnNumber}
             </td>
           );
@@ -167,13 +167,13 @@ class ElseDimensionMeasures extends React.PureComponent {
         };
         if (vSpecialF.substring(vSpecialF.length - 1) == '%' && vNumMeasures > 1) {
           cellElement = (
-            <td className={'grid-cells-small' + sufixCells} style={cellStyle}>
+            <td key={nMeasures22} className={'grid-cells-small' + sufixCells} style={cellStyle}>
               {columnNumber}
             </td>
           );
         } else {
           cellElement = (
-            <td className={'grid-cells' + sufixCells} style={cellStyle}>
+            <td key={nMeasures22} className={'grid-cells' + sufixCells} style={cellStyle}>
               {columnNumber}
             </td>
           );
@@ -186,10 +186,36 @@ class ElseDimensionMeasures extends React.PureComponent {
       <React.Fragment>
         {measurementCells}
       </React.Fragment>
-    )
+    );
   }
 }
 
-ElseDimensionMeasures.propTypes = {};
+ElseDimensionMeasures.propTypes = {
+  vFontFamily: PropTypes.any,
+  vSeparatorCols: PropTypes.any,
+  measure_count: PropTypes.any,
+  sufixCells: PropTypes.any,
+  vSymbolForNulls: PropTypes.any,
+  vLetterSize: PropTypes.any,
+  vColorMetric1: PropTypes.any,
+  vColorMetric1Text: PropTypes.any,
+  vColorMetric2: PropTypes.any,
+  vColorMetric2Text: PropTypes.any,
+  vColorMetric3: PropTypes.any,
+  vColorMetric3Text: PropTypes.any,
+  vAllSemaphores: PropTypes.any,
+  ConceptMatrixPivot: PropTypes.any,
+  ConceptsAffectedMatrix: PropTypes.any,
+  vAllMetrics: PropTypes.any,
+  MetricsAffectedMatrix: PropTypes.any,
+  vCritic: PropTypes.any,
+  vMMedium: PropTypes.any,
+  vNumMeasures: PropTypes.any,
+  vNumMeasures2: PropTypes.any,
+  MeasuresFormat: PropTypes.any,
+  rowNumber: PropTypes.any,
+  columnText: PropTypes.any,
+  styleBuilder: PropTypes.any
+};
 
 export default ElseDimensionMeasures;

src/else-dimension-row-list.jsx

@@ -56,7 +56,7 @@ class ElseDimensionRowList extends React.PureComponent {
         const measurementsProps = { rowNumber, columnText, styleBuilder };
         const rowElement = (
           <tr>
-            <td class="fdim-cells" style={rowStyle}>
+            <td className="fdim-cells" style={rowStyle}>
               {paddingTextElement}{columnText}
             </td>
             <ElseDimensionMeasures

src/header-wrapper.jsx

@@ -185,7 +185,7 @@ class HeaderWrapper extends PureComponent {
                 verticalAlign: 'middle'
               };
               return (
-                <th className={'grid-cells2' + sufixCells} style={cells2Style}>
+                <th key={measureFormatIndex} className={'grid-cells2' + sufixCells} style={cells2Style}>
                   <span className="wrapclass25">
                     {LabelsArray[measureFormatIndex + 1]} {ExtraLabelsArray[measureFormatIndex]}
                   </span>
@@ -224,7 +224,7 @@ class HeaderWrapper extends PureComponent {
         };
         return (
           <th key={measureInfoIndex} className={'grid-cells2' + sufixCells} style={thStyle}>
-            <span className={'wrapclass' + sufixWrap} style={ 'font-family:' + vFontFamily}>
+            <span className={'wrapclass' + sufixWrap} style={{ fontFamily: vFontFamily }}>
               {measureInfo.qFallbackTitle + vExtraLabel}
             </span>
           </th>

src/paint.js

@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import { enableExcelExport } from './excel-export';
 import { generateHeaderWrapper } from './header-wrapper.jsx';
-import { generateRowWrapper } from './row-wrapper';
+import { generateRowWrapper } from './row-wrapper.jsx';
 import initializeStore from './store';
 
 export default async function paint($element, layout, component) {
@@ -16,7 +16,6 @@ export default async function paint($element, layout, component) {
   } = state.properties;
 
   let html = await generateHeaderWrapper({ state });
-
   const rowWrapperHTML = await generateRowWrapper({
     layout,
     colors: state.colors,

src/row-list.jsx

@@ -24,13 +24,13 @@ class RowList extends React.PureComponent {
       vCustomFileBool,
       vFontFamily,
       tableData, //ConceptMatrix,
-      measuresComponent
+      MeasurementsComponent
     } = this.props;
 
     return (
       <React.Fragment>
         {tableData.map((row, rowNumber) => {
-          const rowHeaderText = row[0];
+          const rowHeaderText = row[0] || '';
           if (rowHeaderText === '-') {
             return null;
           }
@@ -50,11 +50,12 @@ class RowList extends React.PureComponent {
           const paddingTextElement = this.generatePaddingTextElement(styleBuilder.hasCustomFileStyle());
           const measurementsProps = { rowNumber, rowHeaderText, styleBuilder };
           return (
-            <tr>
-              <td class="fdim-cells" style={rowStyle}>
+            <tr key={rowNumber}>
+              <td className="fdim-cells" style={rowStyle}>
                 {paddingTextElement}{rowHeaderText}
               </td>
-              <measuresComponent
+              <MeasurementsComponent
+                columnText={rowHeaderText}
                 {...this.props}
                 {...measurementsProps}
               />
@@ -67,7 +68,7 @@ class RowList extends React.PureComponent {
 }
 
 RowList.propTypes = {
-  tableData: PropTypes.Array.isRequired
+  tableData: PropTypes.array.isRequired
 };
 
 export default RowList;

src/row-wrapper.jsx

@@ -2,9 +2,9 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { renderToStaticMarkup } from 'react-dom/server';
 import $ from 'jquery';
-import RowList from './row-list';
-import SingleDimensionMeasures from './single-dimension-measures';
-import ElseDimensionMeasures from './single-dimension-measures';
+import RowList from './row-list.jsx';
+import SingleDimensionMeasures from './single-dimension-measures.jsx';
+import ElseDimensionMeasures from './else-dimension-measures.jsx';
 
 // TableBody?
 class RowWrapper extends React.PureComponent {
@@ -13,13 +13,13 @@ class RowWrapper extends React.PureComponent {
       ConceptMatrix,
       ConceptMatrixPivot
     } = this.props;
-    let tableData, measurementsComponent;
+    let tableData, MeasurementsComponent;
     if (this.props.vNumDims === 1) {
       tableData = ConceptMatrix;
-      measurementsComponent = SingleDimensionMeasures;
+      MeasurementsComponent = SingleDimensionMeasures;
     } else {
-      tableData = ConceptMatrixPivot;
-      measurementsComponent = ElseDimensionMeasures;
+      tableData = ConceptMatrixPivot.filter(array => array.length);
+      MeasurementsComponent = ElseDimensionMeasures;
     }
 
     return (
@@ -27,7 +27,7 @@ class RowWrapper extends React.PureComponent {
         <table>
           <RowList
             tableData={tableData}
-            measurementsComponent={measurementsComponent}
+            MeasurementsComponent={MeasurementsComponent}
             {...this.props}
           />
         </table>
@@ -37,13 +37,14 @@ class RowWrapper extends React.PureComponent {
 }
 
 RowWrapper.propTypes = {
-  ConceptMatrix: PropTypes.Array.isRequired,
-  ConceptMatrixPivot: PropTypes.Array.isRequired
+  ConceptMatrix: PropTypes.array.isRequired,
+  ConceptMatrixPivot: PropTypes.array.isRequired
 };
 
 async function prepareProps ({ state }) {
   const { colors, layout, vAllSemaphores, vDynamicColorBody, vDynamicColorBodyP } = state;
   const props = {
+    colors,
     vCustomFileBool: layout.customfilebool,
     vCustomFile: layout.customfile,
     vPadding: layout.indentbool,
@@ -126,7 +127,7 @@ async function prepareProps ({ state }) {
   return props;
 }
 
-export async function generateRowWrapper ({ state }) {
+export async function generateRowWrapper (state) {
   const preparedProps = await prepareProps({ state });
   const html = renderToStaticMarkup(
     <RowWrapper

src/single-dimension-measures.jsx

@@ -133,6 +133,27 @@ class SingleDimensionMeasures extends React.PureComponent {
   }
 }
 
-SingleDimensionMeasures.propTypes = {};
+SingleDimensionMeasures.propTypes = {
+  vFontFamily: PropTypes.any,
+  vSymbolForNulls: PropTypes.any,
+  vColorMetric1: PropTypes.any,
+  vColorMetric1Text: PropTypes.any,
+  vColorMetric2: PropTypes.any,
+  vColorMetric2Text: PropTypes.any,
+  vColorMetric3: PropTypes.any,
+  vColorMetric3Text: PropTypes.any,
+  ConceptMatrix: PropTypes.any,
+  vAllSemaphores: PropTypes.any,
+  ConceptsAffectedMatrix: PropTypes.any,
+  vAllMetrics: PropTypes.any,
+  MetricsAffectedMatrix: PropTypes.any,
+  vCritic: PropTypes.any,
+  vMMedium: PropTypes.any,
+  vNumMeasures: PropTypes.any,
+  MeasuresFormat: PropTypes.any,
+  rowNumber: PropTypes.any,
+  columnText: PropTypes.any,
+  styleBuilder: PropTypes.any
+};
 
 export default SingleDimensionMeasures;

src/single-dimension-row-list.jsx

@@ -58,7 +58,7 @@ class SingleDimensionRowList extends React.PureComponent {
         const measurementsProps = { rowNumber, columnText, styleBuilder };
         const rowElement = (
           <tr>
-            <td class="fdim-cells" style={rowStyle}>
+            <td className="fdim-cells" style={rowStyle}>
               {paddingTextElement}{columnText}
             </td>
             <SingleDimensionMeasures

src/store.js

@@ -214,11 +214,13 @@ function initialize ({ $element, layout, component }) {
   var MeasurePos = 0;
   for (var nPivotElems = 0; nPivotElems <= lastrow; nPivotElems++) {
     ConceptMatrixPivot[nPivotElems] = new Array();
+    // TODO: ConceptMatrixFirstClean is empty at this point when building new application
     ConceptPos = ConceptMatrixFirstClean.indexOf(ConceptMatrix[nPivotElems][0]);
     ConceptMatrixPivot[ConceptPos][0] = ConceptMatrix[nPivotElems][0];
 
     for (var nMeas2 = 1; nMeas2 <= measure_count; nMeas2++) {
       nMeas3 = nMeas2 + 1;
+      // TODO: SecondHeader is undefined at this point when building new application
       vHeaderIndex = (SecondHeader.indexOf(ConceptMatrix[nPivotElems][1]) + 1);
       MeasurePos = (vHeaderIndex * measure_count) + (nMeas2 - measure_count);
       ConceptMatrixPivot[ConceptPos][MeasurePos] = ConceptMatrix[nPivotElems][nMeas3];

src/style-builder.js

@@ -9,7 +9,9 @@ function StyleBuilder (state) {
     vLetterSize,
     colors
   } = state;
-  let style = {};
+  let style = {
+    fontSize: (14 + vLetterSize) + 'px'
+  };
   let hasComments = false; // vGlobalComment
   let commentColor; // vGlobalCommentColor
   let hasCustomFileStyle = false; // vGlobalComas, vGlobalComas2
@@ -55,19 +57,23 @@ function StyleBuilder (state) {
   function isCSSColor (property) {
     const isHexColor = property.substring(0, 1) == '#';
     const isRGBColor = property.substring(0, 3).toUpperCase() == 'RGB';
+
     return isHexColor || isRGBColor;
   }
 
   function applyProperty (property) {
+    if (!property || property === 'none') {
+      return;
+    }
+    if (isCSSColor(property)) {
+      applyColor(property);
+      return;
+    }
     if (properties[property]) {
       properties[property]();
     } else {
       console.error(`Custom property ${property} does not exist`); // eslint-disable-line no-console
     }
-
-    if (isCSSColor(property)) {
-      applyColor(property);
-    }
   }
 
   function applyCustomStyle(customStyle) {
@@ -88,15 +94,6 @@ function StyleBuilder (state) {
       }
       applyProperty(customAttribute);
     }
-
-    // TODO: rework hasStyle so that defaults can be on style from start
-    // Apply defaults
-    if (!style.color) {
-      style.color = 'white';
-    }
-    if (!style.fontSize) {
-      style.fontSize = (14 + vLetterSize) + 'px';
-    }
   }
 
   return {

webpack.config.js

@@ -23,6 +23,10 @@ const config = {
       root: '_'
     },
   },
+  // TODO: breaks core-js for some reason
+  // resolve: {
+  //   extensions: ['js', 'jsx']
+  // },
   module: {
     rules: [
       {