ekko/dist/es6/Grid.js

Excel like Grid in React

import "core-js/modules/es6.function.name";

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import * as React from 'react'; // import orderBy from 'lodash.orderby';

import Row from './Row';
import HeaderCell from './HeaderCell';
import { cssGrid } from './styles';

class Grid extends React.Component {
  constructor(...args) {
    var _temp;

    return _temp = super(...args), _defineProperty(_defineProperty(_defineProperty(_defineProperty(this, "state", {
      sortIndex: -1,
      sortOrder: 'none'
    }), "getNextSortOrder", index => ({
      asc: 'desc',
      desc: 'none',
      none: 'asc'
    })[index === this.state.sortIndex ? this.state.sortOrder : 'none']), "handleSort", () => {// const order = this.getNextSortOrder(index);
      // const ordered =
      //   order === 'none'
      //     ? this.props.ids
      //     : orderBy(
      //         Object.keys(this.store).map(id => ({
      //           id,
      //           value: this.store[id][index],
      //         })),
      //         'value',
      //         order
      //       ).map(config => config.id);
      // return this.setState({
      //   ids: ordered,
      //   sortIndex: index,
      //   sortOrder: order,
      // });
    }), "renderRows", () => {
      const _this$props = this.props,
            onRowChange = _this$props.onRowChange,
            columns = _this$props.columns,
            data = _this$props.data;
      return Object.keys(data).map(id => React.createElement(Row, {
        key: id,
        id: id,
        onRowChange: onRowChange,
        data: data[id],
        columns: columns
      }));
    }), _temp;
  }

  shouldComponentUpdate(nextProps, nextState) {
    Object.keys(nextProps).forEach(key => {
      if (nextProps[key] !== this.props[key]) {
        console.log(`\t[Grid] Prop ${key} changed`);
      }
    });
    Object.keys(nextState).forEach(key => {
      if (nextState[key] !== this.state[key]) {
        console.log(`\t[Grid] State ${key} changed`);
      }
    });
    return true;
  }

  render() {
    const _this$props2 = this.props,
          columns = _this$props2.columns,
          data = _this$props2.data;
    const _this$state = this.state,
          sortIndex = _this$state.sortIndex,
          sortOrder = _this$state.sortOrder;
    console.log('[Grid]: render');
    return React.createElement("div", {
      className: cssGrid,
      style: {
        gridTemplateColumns: `repeat(${columns.length}, auto)`,
        gridTemplateRows: `60px repeat(${Object.keys(data).length}, auto)`
      }
    }, columns.map((column, index) => React.createElement(HeaderCell, {
      key: column.name,
      label: column.label,
      index: index,
      onSort: this.handleSort,
      sortable: !!column.sortable,
      sortOrder: sortIndex === index ? sortOrder : 'none'
    })), this.renderRows());
  }

}

_defineProperty(Grid, "defaultProps", {
  onRowChange: () => {}
});

export default Grid;