react-table-searchable/lib/SearchList.js

React Table that is searchable and sortable

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _DefaultHeader = require('./DefaultHeader');

var _DefaultHeader2 = _interopRequireDefault(_DefaultHeader);

var _DefaultRow = require('./DefaultRow');

var _DefaultRow2 = _interopRequireDefault(_DefaultRow);

var _DefaultCell = require('./DefaultCell');

var _DefaultCell2 = _interopRequireDefault(_DefaultCell);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

Array.prototype.doReverse = function (boo) {
    return boo === 1 ? this.reverse() : this;
};
Array.prototype.clone = function () {
    return this.slice(0);
};

var SearchList = function (_React$Component) {
    _inherits(SearchList, _React$Component);

    function SearchList(props) {
        _classCallCheck(this, SearchList);

        var _this = _possibleConstructorReturn(this, Object.getPrototypeOf(SearchList).call(this, props));

        _this.getColumns = function () {
            if (_this.props.data.length > 0) {
                var columns = Object.keys(_this.props.data[0]);
            } else {
                var columns = [];
            }
            _this.setState({
                columns: columns
            });
        };

        _this.sort = function (column) {
            var sort = column;
            var dir = -1;

            if (_this.state.sortDir === -1 && _this.state.sort === column) {
                //Already sorting by the column (1st click)
                dir = 1;
            } else if (_this.state.sort === column) {
                sort = null;
                dir = 0;
            }

            _this.setState({
                sort: sort,
                sortDir: dir
            });
        };

        _this.mapHeaderColumns = function (column) {
            return _react2.default.createElement(_this.props.headerCell, { onClick: _this.sort.bind(_this, column), key: column, active: _this.state.sort === column, dir: _this.state.sortDir }, column);
        };

        _this.genKey = function (i) {
            return String(_this.state.sort) + '-' + String(i) + '-' + String(_this.state.sortDir);
        };

        _this.mapRows = function (row, i) {
            var cells = [];

            for (var key in row) {
                cells.push(_react2.default.createElement(_this.props.cell, { key: key, val: row[key] }));
            }

            return _react2.default.createElement(_this.props.row, { key: _this.genKey(i) }, cells);
        };

        _this.doSort = function (a, b) {
            if (_this.state.sort === null) {
                return 0;
            }
            if (_this.props.sort) {
                return _this.props.sort(a, b);
            }
            a = a[_this.state.sort];
            b = b[_this.state.sort];

            var ax = [],
                bx = [];

            a.replace(/(\d+)|(\D+)/g, function (_, $1, $2) {
                ax.push([$1 || Infinity, $2 || ""]);
            });
            b.replace(/(\d+)|(\D+)/g, function (_, $1, $2) {
                bx.push([$1 || Infinity, $2 || ""]);
            });

            while (ax.length && bx.length) {
                var an = ax.shift();
                var bn = bx.shift();
                var nn = an[0] - bn[0] || an[1].localeCompare(bn[1]);
                if (nn) return nn;
            }

            return ax.length - bx.length;
        };

        _this.state = {
            columns: [],
            sort: null,
            sortDir: 0
        };

        return _this;
    }

    _createClass(SearchList, [{
        key: 'componentWillMount',
        value: function componentWillMount() {
            this.getColumns();
        }
    }, {
        key: 'render',
        value: function render() {
            console.log(this.state);
            return _react2.default.createElement(
                'table',
                null,
                _react2.default.createElement(
                    'thead',
                    null,
                    _react2.default.createElement(
                        'tr',
                        null,
                        this.state.columns.map(this.mapHeaderColumns)
                    )
                ),
                _react2.default.createElement(
                    'tbody',
                    null,
                    this.props.data.clone().sort(this.doSort).doReverse(this.state.sortDir).map(this.mapRows)
                )
            );
        }
    }]);

    return SearchList;
}(_react2.default.Component);

SearchList.propTypes = {
    sort: _react2.default.PropTypes.func
};

SearchList.defaultProps = {
    headerCell: _DefaultHeader2.default,
    cell: _DefaultCell2.default,
    row: _DefaultRow2.default
};

exports.default = SearchList;