ekko/dist/es6/HeaderCell.js

Excel like Grid in React

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 { cx } from 'react-emotion';
import { cssCell } from './styles';

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

    return _temp = super(...args), _defineProperty(_defineProperty(_defineProperty(this, "state", {}), "handleSort", () => {
      const _this$props = this.props,
            sortable = _this$props.sortable,
            index = _this$props.index,
            onSort = _this$props.onSort;

      if (sortable) {
        onSort(index);
      }
    }), "handKeyDown", event => {
      if (event.which === 13) {
        this.handleSort();
      }
    }), _temp;
  }

  render() {
    const _this$props2 = this.props,
          sortable = _this$props2.sortable,
          label = _this$props2.label,
          sortOrder = _this$props2.sortOrder;
    return React.createElement("div", {
      className: cx([cssCell, {
        sortable
      }]),
      tabIndex: 0,
      role: "textbox",
      onClick: this.handleSort,
      onKeyDown: this.handKeyDown
    }, label, sortOrder === 'none' ? null : sortOrder === 'asc' ? '^' : 'v');
  }

}

export default HeaderCell;