Merge pull request #773 from Ducz0r/lm-sci-1496

Add basic datatables & datagrid [SCI-1496]

app/javascript/packs/app/constants/colors.js

@@ -3,3 +3,7 @@ export const WHITE_COLOR = "#fff";
 export const BORDER_GRAY_COLOR = "#d2d2d2";
 export const WILD_SAND_COLOR = "#f5f5f5";
 export const MYSTIC_COLOR = "#eaeff2";
+
+export const COLOR_ALTO = "#dddddd";
+export const COLOR_GRAY = "#909088";
+export const COLOR_ALABASTER = "#fcfcfc";

app/javascript/packs/shared/data_grid/index.jsx

@@ -0,0 +1,149 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import ReactDataGrid from 'react-data-grid';
+import styled from "styled-components";
+import {
+  WHITE_COLOR,
+  COLOR_GRAY
+} from "../../app/constants/colors";
+
+const StyledReactDataGrid = styled(ReactDataGrid)`
+  background-color: inherit;
+
+  .react-grid-Grid {
+    background-color: inherit;
+  }
+
+  .react-grid-Header {
+    .react-grid-HeaderCell {
+      background-color: ${COLOR_GRAY};
+
+      color: ${WHITE_COLOR};
+      font-weight: normal;
+      vertical-align: bottom;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+
+  .react-grid-Canvas {
+    background-color: inherit;
+  }
+`;
+
+class DataGrid extends Component {
+  constructor(props) {
+    super(props);
+    this.cleanProps = this.cleanProps.bind(this);
+    this.transformColumns = this.transformColumns.bind(this);
+    this.setupDefaultProps = this.setupDefaultProps.bind(this);
+
+    this.transformColumns();
+    this.setupDefaultProps();
+
+    // Store the original rows array, and make a copy that
+    // can be used for modifying eg.filtering, sorting
+    this.state = {
+      originalRows: this.props.data,
+      rows: this.props.data.slice(0)
+    };
+  }
+
+  setupDefaultProps() {
+    // Setup the default props if they're not provided
+    if ('rowGetter' in this.props) {
+      this._rowGetter = this.props.rowGetter;
+    } else {
+      this._rowGetter = ((i) => this.state.rows[i]);
+    }
+    this._rowGetter = this._rowGetter.bind(this);
+
+    if ('rowsCount' in this.props) {
+      this._rowsCount = this.props.rowsCount;
+    } else {
+      this._rowsCount = this.props.data.length;
+    }
+
+    if ('onGridSort' in this.props) {
+      this._onGridSort = this.props.onGridSort;
+    } else {
+      this._onGridSort = ((sortColumn, sortDirection) => {
+        const comparer = (a, b) => {
+          if (sortDirection === 'ASC') {
+            return (a[sortColumn] > b[sortColumn]) ? 1 : -1;
+          } else if (sortDirection === 'DESC') {
+            return (a[sortColumn] < b[sortColumn]) ? 1 : -1;
+          }
+          return 0;
+        };
+        let rows;
+        if (sortDirection === 'NONE') {
+          rows = this.state.originalRows.slice(0);
+        } else {
+          rows = this.state.rows.sort(comparer);
+        }
+
+        this.setState({ rows });
+      });
+    }
+    this._onGridSort = this._onGridSort.bind(this);
+  }
+
+  transformColumns() {
+    // Transform columns from the "sciNote" representation into
+    // ReactDataGrid-compatible representation
+    this._columns =
+      this.props.columns
+      .sort((a, b) => a.position - b.position)
+      .filter((col) => (!('visible' in col) || col.visible))
+      .map((col) => ({
+        key: col.textId,
+        name: col.name,
+        locked: col.locked,
+        sortable: col.sortable
+      }));
+  }
+
+  cleanProps() {
+    // Remove additional props from the props value
+    const {
+      columns, rowGetter, rowsCount, ...cleanProps
+    } = this.props;
+    return cleanProps;
+  }
+
+  render() {
+    return (
+      <StyledReactDataGrid
+        columns={this._columns}
+        rowGetter={this._rowGetter}
+        rowsCount={this._rowsCount}
+        onGridSort={this._onGridSort}
+        {...this.cleanProps()}
+      />
+    );
+  }
+}
+
+DataGrid.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      isKey: PropTypes.bool.isRequired,
+      textId: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      position: PropTypes.number.isRequired,
+      visible: PropTypes.bool,
+      sortable: PropTypes.bool,
+      locked: PropTypes.bool
+    })
+  ).isRequired,
+  data: PropTypes.arrayOf(PropTypes.object).isRequired,
+  rowGetter: PropTypes.func,
+  rowsCount: PropTypes.number,
+  onGridSort: PropTypes.func
+};
+
+export default DataGrid;

app/javascript/packs/shared/data_table/index.jsx

@@ -0,0 +1,111 @@
+import React, { Component } from "react";
+import PropTypes from "prop-types";
+import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
+import styled from "styled-components";
+import {
+  WHITE_COLOR,
+  COLOR_GRAY,
+  COLOR_ALTO,
+  COLOR_ALABASTER
+} from "../../app/constants/colors";
+
+const StyledBootstrapTable = styled(BootstrapTable)`
+  thead {
+    background-color: ${COLOR_GRAY};
+
+    > tr > th,
+    >tr > td {
+      padding: 6px;
+      padding-right: 30px;
+    }
+
+    > tr > th {
+      border-bottom: 2px solid ${COLOR_ALTO};
+      border-bottom-width: 0;
+      border-left: 2px solid ${COLOR_ALABASTER};
+      color: ${WHITE_COLOR};
+      font-weight: normal;
+      vertical-align: bottom;
+
+      &:first-child {
+        border-left: none;
+      }
+    }
+  }
+
+  td, th {
+    box-sizing: content-box;
+  }
+
+  td {
+    overflow-wrap: break-word;
+    text-overflow: ellipsis;
+    word-break: break-word;
+  }
+`;
+
+class DataTable extends Component {
+  static cleanColumnAttributes(col) {
+    // Remove additional attributes from the columns
+    const {
+      id, isKey, textId, name, position, visible,
+      sortable, locked, ...cleanCol
+    } = col;
+    return cleanCol;
+  }
+
+  constructor(props) {
+    super(props);
+    this.cleanProps = this.cleanProps.bind(this);
+    this.displayHeader = this.displayHeader.bind(this);
+  }
+
+  cleanProps() {
+    // Remove additional props from the props value
+    const {columns, ...cleanProps} = this.props;
+    return cleanProps;
+  }
+
+
+  displayHeader() {
+    const orderedCols = this.props.columns.sort((a, b) => a.position - b.position);
+    return orderedCols.map((col) =>
+      <TableHeaderColumn
+        key={col.id}
+        dataField={col.textId}
+        isKey={col.isKey}
+        hidden={('visible' in col) && !col.visible}
+        dataSort={col.sortable}
+        {...DataTable.cleanColumnAttributes(col)}
+      >
+        {col.name}
+      </TableHeaderColumn>
+    );
+  }
+
+  render() {
+    return (
+      <StyledBootstrapTable {...this.cleanProps()}>
+        {this.displayHeader()}
+      </StyledBootstrapTable>
+    );
+  }
+}
+
+DataTable.propTypes = {
+  columns: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.number.isRequired,
+      isKey: PropTypes.bool.isRequired,
+      textId: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+      position: PropTypes.number.isRequired,
+      visible: PropTypes.bool,
+      sortable: PropTypes.bool,
+      locked: PropTypes.bool
+    })
+  ).isRequired,
+  data: PropTypes.arrayOf(PropTypes.object).isRequired
+};
+
+export default DataTable;

app/javascript/packs/styles/main.scss

@@ -1,4 +1,5 @@
 @import 'constants';
+@import '~react-bootstrap-table/dist/react-bootstrap-table.min';
 
 body {
   background-color: $color-concrete;

package.json

@@ -76,6 +76,8 @@
     "styled-components": "^2.1.1",
     "webpack": "^3.2.0",
     "webpack-manifest-plugin": "^1.1.2",
-    "webpack-merge": "^4.1.0"
+    "webpack-merge": "^4.1.0",
+    "react-bootstrap-table": "^4.0.0",
+    "react-data-grid": "^2.0.2"
   }
 }

yarn.lock

@@ -1281,7 +1281,7 @@ clap@^1.0.9:
   dependencies:
     chalk "^1.1.3"
 
-classnames@^2.2.5:
+classnames@^2.1.2, classnames@^2.2.5:
   version "2.2.5"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.5.tgz#fb3801d453467649ef3603c7d61a02bd129bde6d"
 
@@ -1538,7 +1538,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-class@^15.5.3, create-react-class@^15.6.0:
+create-react-class@^15.5.2, create-react-class@^15.5.3, create-react-class@^15.6.0:
   version "15.6.0"
   resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.0.tgz#ab448497c26566e1e29413e883207d57cfe7bed4"
   dependencies:
@@ -1879,6 +1879,10 @@ electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.14:
   version "1.3.15"
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.15.tgz#08397934891cbcfaebbd18b82a95b5a481138369"
 
+element-class@^0.2.0:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/element-class/-/element-class-0.2.2.tgz#9d3bbd0767f9013ef8e1c8ebe722c1402a60050e"
+
 elliptic@^6.0.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.0.tgz#cac9af8762c85836187003c8dfe193e5e2eae5df"
@@ -2211,6 +2215,10 @@ evp_bytestokey@^1.0.0:
   dependencies:
     create-hash "^1.1.1"
 
+exenv@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.0.tgz#3835f127abf075bfe082d0aed4484057c78e3c89"
+
 exit-hook@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/exit-hook/-/exit-hook-1.1.1.tgz#f05ca233b48c05d54fff07765df8507e95c02ff8"
@@ -4547,7 +4555,7 @@ prop-types-extra@^1.0.1:
   dependencies:
     warning "^3.0.0"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.5.8:
   version "15.5.10"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154"
   dependencies:
@@ -4651,6 +4659,15 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-bootstrap-table@^4.0.0:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/react-bootstrap-table/-/react-bootstrap-table-4.0.2.tgz#7e504141c8662fb203f0bcddab365c331b0e7106"
+  dependencies:
+    classnames "^2.1.2"
+    prop-types "^15.5.10"
+    react-modal "^1.4.0"
+    react-s-alert "^1.3.0"
+
 react-bootstrap@^0.31.1:
   version "0.31.1"
   resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-0.31.1.tgz#679c9f73ae77ff207867d536496207291f3a3ed7"
@@ -4667,6 +4684,14 @@ react-bootstrap@^0.31.1:
     uncontrollable "^4.1.0"
     warning "^3.0.0"
 
+react-data-grid@^2.0.2:
+  version "2.0.58"
+  resolved "https://registry.yarnpkg.com/react-data-grid/-/react-data-grid-2.0.58.tgz#83946bf9cc34d144552349c343e15888c2c6293c"
+
+react-dom-factories@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom-factories/-/react-dom-factories-1.0.1.tgz#c50692ac5ff1adb39d86dfe6dbe3485dacf58455"
+
 react-dom@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.1.tgz#2cb0ed4191038e53c209eb3a79a23e2a4cf99470"
@@ -4692,6 +4717,17 @@ react-intl@^2.3.0:
     intl-relativeformat "^1.3.0"
     invariant "^2.1.1"
 
+react-modal@^1.4.0:
+  version "1.9.7"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-1.9.7.tgz#07ef56790b953e3b98ef1e2989e347983c72871d"
+  dependencies:
+    create-react-class "^15.5.2"
+    element-class "^0.2.0"
+    exenv "1.2.0"
+    lodash.assign "^4.2.0"
+    prop-types "^15.5.7"
+    react-dom-factories "^1.0.0"
+
 react-overlays@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.7.0.tgz#531898ff566c7e5c7226ead2863b8cf9fbb5a981"
@@ -4747,6 +4783,12 @@ react-router@^4.1.1:
     prop-types "^15.5.4"
     warning "^3.0.0"
 
+react-s-alert@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/react-s-alert/-/react-s-alert-1.3.0.tgz#d81224a474f15e89c35c0ea6c2a73f232a767128"
+  dependencies:
+    babel-runtime "^6.23.0"
+
 react@^15.6.1:
   version "15.6.1"
   resolved "https://registry.yarnpkg.com/react/-/react-15.6.1.tgz#baa8434ec6780bde997cdc380b79cd33b96393df"