@mwater/visualization 5.4.5 → 5.5.0

package/src/widgets/charts/pivot/PivotChartLayoutComponent.tsx

@@ -1,7 +1,5 @@
 import _ from "lodash"
 import React from "react"
-const R = React.createElement
-
 import Color from "color"
 import * as ui from "@mwater/react-library/lib/bootstrap"
 import classNames from "classnames"
@@ -61,77 +59,71 @@ export default class PivotChartLayoutComponent extends React.Component<PivotChar
   }
 
   renderRow(row: PivotChartLayoutRow, rowIndex: number) {
-    return R(
-      "tr",
-      { key: rowIndex },
-      _.map(row.cells, (cell, columnIndex) => {
-        return R(LayoutCellComponent, {
-          ref: this.recordCellComp.bind(null, rowIndex, columnIndex),
-          key: columnIndex,
-          layout: this.props.layout,
-          rowIndex,
-          columnIndex,
-          onHover: this.props.editable ? () => this.setState({ hoverSection: cell.section ?? null }) : undefined,
-          hoverSection: this.props.editable ? this.state.hoverSection : undefined,
-          onEditSection: this.props.onEditSection ? this.props.onEditSection.bind(null, cell.section) : undefined,
-          onSummarizeSegment: this.props.onSummarizeSegment
+    return <tr key={rowIndex}>
+      {_.map(row.cells, (cell, columnIndex) => {
+        return <LayoutCellComponent
+          ref={this.recordCellComp.bind(null, rowIndex, columnIndex)}
+          key={columnIndex}
+          layout={this.props.layout}
+          rowIndex={rowIndex}
+          columnIndex={columnIndex}
+          onHover={this.props.editable ? () => this.setState({ hoverSection: cell.section ?? null }) : undefined}
+          hoverSection={this.props.editable ? this.state.hoverSection : undefined}
+          onEditSection={this.props.onEditSection ? this.props.onEditSection.bind(null, cell.section) : undefined}
+          onSummarizeSegment={this.props.onSummarizeSegment
             ? this.props.onSummarizeSegment.bind(null, cell.section)
-            : undefined
-        })
-      })
-    )
+            : undefined}
+        />
+      })}
+    </tr>
   }
 
   renderHoverPlusIcon = (key: any, x: any, y: any, onClick: any) => {
     // Render a plus box
-    return R(
-      "div",
-      {
-        key,
-        onClick,
-        style: {
-          position: "absolute",
-          left: x - 7,
-          top: y - 6,
-          border: "solid 1px #337ab7",
-          backgroundColor: "white",
-          paddingLeft: 2,
-          paddingRight: 2,
-          paddingTop: 0,
-          color: "#337ab7",
-          fontSize: 9,
-          cursor: "pointer",
-          opacity: 0.8
-        }
-      },
-      R(ui.Icon, { id: "fa-plus" })
-    )
+    return <div
+      key={key}
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        left: x - 7,
+        top: y - 6,
+        border: "solid 1px #337ab7",
+        backgroundColor: "white",
+        paddingLeft: 2,
+        paddingRight: 2,
+        paddingTop: 0,
+        color: "#337ab7",
+        fontSize: 9,
+        cursor: "pointer",
+        opacity: 0.8
+      }}
+    >
+      <ui.Icon id="fa-plus" />
+    </div>
   }
 
   renderHoverRemoveIcon = (key: any, x: any, y: any, onClick: any) => {
     // Render a plus box
-    return R(
-      "div",
-      {
-        key,
-        onClick,
-        style: {
-          position: "absolute",
-          left: x - 7,
-          top: y - 6,
-          border: "solid 1px #337ab7",
-          backgroundColor: "white",
-          paddingLeft: 3,
-          paddingRight: 3,
-          paddingTop: 0,
-          color: "#337ab7",
-          fontSize: 9,
-          cursor: "pointer",
-          opacity: 0.8
-        }
-      },
-      R(ui.Icon, { id: "fa-remove" })
-    )
+    return <div
+      key={key}
+      onClick={onClick}
+      style={{
+        position: "absolute",
+        left: x - 7,
+        top: y - 6,
+        border: "solid 1px #337ab7",
+        backgroundColor: "white",
+        paddingLeft: 3,
+        paddingRight: 3,
+        paddingTop: 0,
+        color: "#337ab7",
+        fontSize: 9,
+        cursor: "pointer",
+        opacity: 0.8
+      }}
+    >
+      <ui.Icon id="fa-remove" />
+    </div>
   }
 
   // Render floating hover controls
@@ -259,24 +251,20 @@ export default class PivotChartLayoutComponent extends React.Component<PivotChar
       )
     }
 
-    return R("div", { key: "hover-controls" }, controls)
+    return <div key="hover-controls">{controls}</div>
   }
 
   render() {
-    return R(
-      "div",
-      {
-        style: { position: "relative" },
-        onMouseLeave: () => this.setState({ hoverSection: null })
-      },
-      // Define CSS classes to keep HTML as small as possible
-      // https://stackoverflow.com/a/19047221/876117
-      // https://github.com/mWater/mwater-portal/issues/1183
-      // cell borders not visible in firefox when you have a cell with position relative inside a table with collapsed borders
-      R(
-        "style",
-        null,
-        `\
+    return <div
+      style={{ position: "relative" }}
+      onMouseLeave={() => this.setState({ hoverSection: null })}
+    >
+      {/* Define CSS classes to keep HTML as small as possible
+      https://stackoverflow.com/a/19047221/876117
+      https://github.com/mWater/mwater-portal/issues/1183
+      cell borders not visible in firefox when you have a cell with position relative inside a table with collapsed borders */}
+      <style>
+        {`\
 .pivot-chart-table {
 width: 100%;
 border-spacing: 0;
@@ -304,42 +292,32 @@ vertical-align: top;
 .pivot-chart-table .br1 { border-right: solid 1px #f4f4f4 }
 .pivot-chart-table .br2 { border-right: solid 1px #ccc }
 .pivot-chart-table .br3 { border-right: solid 1px #888 }\
-`
-      ),
-      this.props.layout.tooManyRows
-        ? R(
-            "div",
-            { className: "text-warning", style: { fontSize: 12 } },
-            R("i", { className: "fa fa-exclamation-circle" }),
-            T`Warning: Too many rows in table to display`
-          )
-        : undefined,
-
-      this.props.layout.tooManyColumns
-        ? R(
-            "div",
-            { className: "text-warning", style: { fontSize: 12 } },
-            R("i", { className: "fa fa-exclamation-circle" }),
-            T`Warning: Too many columns in table to display`
-          )
-        : undefined,
-      R(
-        "div",
-        { style: { position: "relative" } },
-        R(
-          "table",
-          { className: "pivot-chart-table" },
-          R(
-            "tbody",
-            null,
-            _.map(this.props.layout.rows, (row, rowIndex) => {
+`}
+      </style>
+      {this.props.layout.tooManyRows ? (
+        <div className="text-warning" style={{ fontSize: 12 }}>
+          <i className="fa fa-exclamation-circle" />
+          {T`Warning: Too many rows in table to display`}
+        </div>
+      ) : undefined}
+
+      {this.props.layout.tooManyColumns ? (
+        <div className="text-warning" style={{ fontSize: 12 }}>
+          <i className="fa fa-exclamation-circle" />
+          {T`Warning: Too many columns in table to display`}
+        </div>
+      ) : undefined}
+      <div style={{ position: "relative" }}>
+        <table className="pivot-chart-table">
+          <tbody>
+            {_.map(this.props.layout.rows, (row, rowIndex) => {
               return this.renderRow(row, rowIndex)
-            })
-          )
-        ),
-        this.renderHoverControls()
-      )
-    )
+            })}
+          </tbody>
+        </table>
+        {this.renderHoverControls()}
+      </div>
+    </div>
   }
 }
 
@@ -387,17 +365,13 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
       return null
     }
     
-    return R(
-      "span",
-      { style: { fontSize: "90%" } },
-      R("a", { className: "link-plain", onClick: this.props.onEditSection }, T`Edit`),
-      cell.summarize
-        ? [
-            R("span", { className: "text-muted" }, ` / `),
-            R("a", { className: "link-plain", onClick: this.props.onSummarizeSegment }, T`Summarize`)
-          ]
-        : undefined
-    )
+    return <span style={{ fontSize: "90%" }}>
+      <a className="link-plain" onClick={this.props.onEditSection}>{T`Edit`}</a>
+      {cell.summarize ? [
+        <span className="text-muted"> / </span>,
+        <a className="link-plain" onClick={this.props.onSummarizeSegment}>{T`Summarize`}</a>
+      ] : undefined}
+    </span>
   }
 
   render() {
@@ -452,12 +426,13 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
       textColor = lightness < 0.5 ? "rgb(204,204,204)" : undefined
     }
 
-    const style = {
-      backgroundColor,
+    const style: React.CSSProperties = {
+      backgroundColor: backgroundColor || undefined,
       textAlign: cell.align,
       cursor: isHover && !cell.unconfigured ? "pointer" : undefined,
-      color: textColor
+      color: textColor || undefined
     }
+    
     const classes = classNames({
       cell: true,
       // List out borders in compact way to keep HTML smaller
@@ -476,32 +451,28 @@ class LayoutCellComponent extends React.Component<LayoutCellComponentProps> {
     })
 
     // Style that should not affect popup menu
-    const innerStyle = {
+    const innerStyle: React.CSSProperties = {
       fontWeight: cell.bold ? "bold" : undefined,
       fontStyle: cell.italic ? "italic" : undefined,
       marginLeft: cell.indent ? cell.indent * 5 : undefined
     }
 
-    return R(
-      "td",
-      {
-        ref: (c) => {
-          this.tdComponent = c
-        },
-        onMouseEnter: this.props.onHover,
-        onClick: this.handleClick,
-        className: classes,
-        style,
-        colSpan: cell.columnSpan || null,
-        rowSpan: cell.rowSpan || null
-      },
-      R(
-        "span",
-        { style: innerStyle },
-        cell.unconfigured && this.props.onEditSection
+    return <td
+      ref={(c) => {
+        this.tdComponent = c
+      }}
+      onMouseEnter={this.props.onHover}
+      onClick={this.handleClick}
+      className={classes}
+      style={style}
+      colSpan={cell.columnSpan || undefined}
+      rowSpan={cell.rowSpan || undefined}
+    >
+      <span style={innerStyle}>
+        {cell.unconfigured && this.props.onEditSection
           ? this.renderUnconfigured(cell)
-          : cell.text || "\u00A0\u00A0\u00A0"
-      )
-    )
+          : cell.text || "\u00A0\u00A0\u00A0"}
+      </span>
+    </td>
   }
 }