@wix/design-system/dist/esm/Table/DataTable/docs/ExampleSortable.js

@wix/design-system

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/esm/Table/DataTable/docs/ExampleSortable.jsx";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
import React from 'react';
import DataTable from '..';
var baseData = [{
  firstName: 'Meghan',
  lastName: 'Bishop'
}, {
  firstName: 'Sara',
  lastName: 'Porter'
}, {
  firstName: 'Deborah',
  lastName: 'Rhodes'
}, {
  firstName: 'Walter',
  lastName: 'Jenning'
}, {
  firstName: 'Amanda',
  lastName: 'Woods'
}];
var DataTableSortableExample = /*#__PURE__*/function (_React$Component) {
  function DataTableSortableExample(props) {
    var _this;
    _classCallCheck(this, DataTableSortableExample);
    _this = _callSuper(this, DataTableSortableExample, [props]);
    _this.state = {
      sort: {},
      data: baseData
    };
    return _this;
  }
  _inherits(DataTableSortableExample, _React$Component);
  return _createClass(DataTableSortableExample, [{
    key: "handleSortClick",
    value: function handleSortClick(colNum) {
      var desc = !this.state.sort[colNum];
      var sort = _objectSpread(_objectSpread({}, this.state.sort), {}, _defineProperty({}, colNum, desc));
      var fields = {
        1: 'firstName',
        2: 'lastName'
      };
      var sortedData = this.sortDataByField(fields[colNum], desc);
      this.setState({
        sort: sort,
        data: sortedData
      });
    }
  }, {
    key: "sortDataByField",
    value: function sortDataByField(field, desc) {
      return this.state.data.sort(function (a, b) {
        return desc ? ~~(field ? a[field] < b[field] : a < b) : ~~(field ? a[field] > b[field] : a > b);
      }); // eslint-disable-line
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;
      return /*#__PURE__*/React.createElement("div", {
        style: this.props.style,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 41,
          columnNumber: 7
        }
      }, /*#__PURE__*/React.createElement(DataTable, {
        dataHook: this.props.dataHook,
        data: this.state.data,
        onSortClick: function onSortClick(col, colNum) {
          return _this2.handleSortClick(colNum);
        },
        itemsPerPage: 20,
        columns: [{
          title: 'Row Number',
          render: function render(row, rowNum) {
            return '#' + (rowNum + 1);
          },
          width: '20%',
          important: true,
          infoTooltipProps: {
            content: 'Very informative tooltip text'
          }
        }, {
          title: 'First Name',
          sortable: true,
          sortDescending: !!this.state.sort[1],
          render: function render(row) {
            return /*#__PURE__*/React.createElement("span", {
              __self: _this2,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 59,
                columnNumber: 30
              }
            }, row.firstName);
          },
          width: '40%'
        }, {
          title: 'Last Name',
          sortable: true,
          sortDescending: !!this.state.sort[2],
          render: function render(row) {
            return /*#__PURE__*/React.createElement("span", {
              __self: _this2,
              __source: {
                fileName: _jsxFileName,
                lineNumber: 66,
                columnNumber: 30
              }
            }, row.lastName);
          },
          width: '40%',
          infoTooltipProps: {
            content: 'Very informative tooltip text'
          }
        }],
        showLastRowDivider: false,
        __self: this,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 42,
          columnNumber: 9
        }
      }));
    }
  }]);
}(React.Component);
DataTableSortableExample.defaultProps = {
  style: {
    width: '966px'
  },
  dataHook: 'story-data-table-sortable'
};
export default DataTableSortableExample;