@6thquake/react-material/Table/AwesomeTable/Head.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

var _ = _interopRequireDefault(require(".."));

var _Cell = _interopRequireDefault(require("./Cell"));

var _TableHead = _interopRequireDefault(require("../../TableHead"));

var _TableRow = _interopRequireDefault(require("../../TableRow"));

var _HeadCell = _interopRequireDefault(require("./HeadCell"));

var _DragHeadCell = _interopRequireDefault(require("./DragHeadCell"));

var _withDragAndDrop = _interopRequireDefault(require("../../DragAndDrop/withDragAndDrop"));

var _TableSortLabel = _interopRequireDefault(require("../../TableSortLabel"));

var _throttle = require("../../utils/throttle");

var _reactResizable = require("react-resizable");

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

// import Resizable from 're-resizable';
var styles = function styles(theme) {
  return {
    root: {},
    layoutFixed: {
      tableLayout: 'fixed'
    },
    tableCell: {
      position: 'relative',
      '@global .react-resizable-handle': {
        position: 'absolute',
        width: 20,
        height: 20,
        bottom: 0,
        right: 0,
        background: "url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",
        'background-position': 'bottom right',
        padding: '0 3px 3px 0',
        'background-repeat': 'no-repeat',
        'background-origin': 'content-box',
        'box-sizing': 'border-box',
        cursor: 'se-resize'
      }
    }
  };
};

var colStyle = {
  // width: 150,
  minWidth: 100
};
/**
 * @ignore - internal component.
 */

var Head =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Head, _React$Component);

  function Head(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Head);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Head).call(this, props));
    _this.dragIndex = {
      targetIndex: '',
      sourceIndex: ''
    };

    _this.handleResizeStart = function () {
      // this.undragable = true
      _this.setState({
        undragable: true
      });
    };

    _this.handleDragStop = function () {
      _this.setState({
        undragable: false
      });
    };

    _this.handleResize = function () {
      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
        args[_key] = arguments[_key];
      }

      return function (e, _ref) {
        var size = _ref.size;
        var onResize = _this.props.onResize;
        onResize && onResize.apply(void 0, args.concat([size])); // this.throttleResize(...args,size)
      };
    };

    _this.resize = function () {
      var onResize = _this.props.onResize;
      onResize && onResize.apply(void 0, arguments);
    };

    _this.handleChangeOrder = function (sort, column) {
      return function (e) {
        var onSort = _this.props.onSort;
        onSort && onSort(sort, column);
      };
    };

    _this.handleDoubleClick = function (e) {
      e.stopPropagation();
    };

    _this.renderTableHeadCell = function (column, index) {
      var _this$props = _this.props,
          classes = _this$props.classes,
          onDragStart = _this$props.onDragStart,
          onDragEnd = _this$props.onDragEnd,
          resizable = _this$props.resizable,
          dragable = _this$props.dragable,
          baseLength = _this$props.baseLength,
          onColumnFixChange = _this$props.onColumnFixChange,
          disableClickToFixColumn = _this$props.disableClickToFixColumn,
          TableCellProps = _this$props.TableCellProps;
      var sorts = _this.props.sorts;
      var title = column.title,
          key = column.key,
          sortable = column.sortable,
          renderTitle = column.renderTitle;
      var sort = {
        key: key,
        order: '',
        orderList: ['', 'asc', 'desc'],
        index: 0
      };
      sorts.map(function (item) {
        if (item.key === column.key) {
          sort = item;
        }
      });
      var titleNode = typeof renderTitle === 'function' ? renderTitle(column) : title;
      var content = sortable ? _react.default.createElement(_TableSortLabel.default, {
        active: sort.order,
        direction: sort.order,
        onClick: _this.handleChangeOrder(sort, column),
        onDoubleClick: _this.handleDoubleClick
      }, titleNode) : titleNode || '';

      var cell = _react.default.createElement(_Cell.default, {
        numeric: column.numeric,
        sortDirection: true,
        onDragStart: onDragStart,
        onDragEnd: onDragEnd,
        index: index + baseLength,
        onColumnFixChange: onColumnFixChange,
        disableClickToFixColumn: disableClickToFixColumn,
        component: dragable && !_this.state.undragable ? _DragHeadCell.default : _HeadCell.default,
        className: classes.tableCell,
        key: column.key || column.title,
        fixed: column.fixed,
        TableCellProps: TableCellProps
      }, content);

      var C = resizable || column.resizable ? _react.default.createElement(_reactResizable.Resizable, {
        key: column.key || column.title,
        onResizeStart: _this.handleResizeStart,
        onResizeStop: _this.handleDragStop,
        width: column.width,
        height: 0,
        onResize: _this.handleResize(index, column) // axis = {'x'}
        // minConstraints={[50, 500]}

      }, cell) : cell;
      return C;
    };

    _this.state = {
      undragable: false
    };
    return _this;
  }

  (0, _createClass2.default)(Head, [{
    key: "componentDidMount",
    value: function componentDidMount() {// this.throttleResize = debounce(this.resize,1000)
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var _this$props2 = this.props,
          classes = _this$props2.classes,
          columns = _this$props2.columns,
          onDragStart = _this$props2.onDragStart,
          onDragEnd = _this$props2.onDragEnd,
          resizable = _this$props2.resizable,
          headRef = _this$props2.headRef,
          headRowHeight = _this$props2.headRowHeight,
          TableRowProps = _this$props2.TableRowProps;
      var rowStyle = {
        height: headRowHeight
      };
      return _react.default.createElement("div", {
        className: classes.root
      }, _react.default.createElement(_.default, {
        innerRef: headRef,
        classes: {
          root: classes.layoutFixed
        },
        className: classes.table
      }, _react.default.createElement("colgroup", null, columns.map(function (item) {
        return _react.default.createElement("col", {
          key: item.key || item.title,
          width: item.width,
          style: colStyle
        });
      })), _react.default.createElement(_TableHead.default, null, _react.default.createElement(_TableRow.default, (0, _extends2.default)({
        style: rowStyle
      }, TableRowProps), columns.map(function (column, index) {
        return _this2.renderTableHeadCell(column, index);
      })))));
    }
  }]);
  return Head;
}(_react.default.Component); // export default withDragAndDrop()(AbundantCrossTabulation);


var _default = (0, _styles.withStyles)(styles)((0, _withDragAndDrop.default)()(Head));

exports.default = _default;