ekko/dist/commonjs/Grid.js

Excel like Grid in React

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

require("core-js/modules/es6.function.name");

var React = _interopRequireWildcard(require("react"));

var _Row = _interopRequireDefault(require("./Row"));

var _HeaderCell = _interopRequireDefault(require("./HeaderCell"));

var _styles = require("./styles");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }

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; }

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.default, {
        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: _styles.cssGrid,
      style: {
        gridTemplateColumns: `repeat(${columns.length}, auto)`,
        gridTemplateRows: `60px repeat(${Object.keys(data).length}, auto)`
      }
    }, columns.map((column, index) => React.createElement(_HeaderCell.default, {
      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: () => {}
});

var _default = Grid;
exports.default = _default;