Merge pull request #124 from kylekim-oicr/master

Isotope This

Author: culturedbarbarian

lib/IsotopeGrid/IsotopeGrid.js

@@ -34,10 +34,6 @@ var _isotopeLayout2 = _interopRequireDefault(_isotopeLayout);
 
 var _reactBootstrap = require('react-bootstrap');
 
-var _jquery = require('jquery');
-
-var _jquery2 = _interopRequireDefault(_jquery);
-
 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"); } }
@@ -119,8 +115,6 @@ var IsotopeGrid = function (_React$Component) {
     _createClass(IsotopeGrid, [{
         key: 'createIsotope',
         value: function createIsotope() {
-            var _this2 = this;
-
             var _props = this.props,
                 id = _props.id,
                 wholeWord = _props.wholeWord,
@@ -137,9 +131,11 @@ var IsotopeGrid = function (_React$Component) {
                         itemSelector: '.' + id + '-item',
                         layoutMode: 'fitRows',
                         filter: function filter(itemElem) {
-                            var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : (0, _jquery2.default)(_this2).find('.isotope-search');
+                            var _this2 = this;
+
+                            var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : this.querySelector('.isotope-search');
                             return (!filterList || filterList.length === 0 || filterList.every(function (filter) {
-                                return filter(itemElem || (0, _jquery2.default)(_this2));
+                                return filter(itemElem || _this2);
                             })) && reg.test(isoSearch ? isoSearch.innerText : '');
                         }
                     })
@@ -156,8 +152,6 @@ var IsotopeGrid = function (_React$Component) {
     }, {
         key: 'componentWillReceiveProps',
         value: function componentWillReceiveProps(nextProps) {
-            var _this3 = this;
-
             var oldElems = [];
 
             this.props.children.forEach(function (item) {
@@ -186,9 +180,11 @@ var IsotopeGrid = function (_React$Component) {
             if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim() || JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList)) {
                 var reg = nextProps.wholeWord ? RegExp('\\b' + nextProps.searchTerm.toLowerCase().trim() + '\\b', 'i') : RegExp('' + nextProps.searchTerm.toLowerCase().trim(), 'i');
                 options.filter = function (itemElem) {
-                    var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : (0, _jquery2.default)(_this3).find('.isotope-search');
+                    var _this3 = this;
+
+                    var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : this.querySelector('.isotope-search');
                     return (!nextProps.filterList || nextProps.filterList.length === 0 || nextProps.filterList.every(function (filter) {
-                        return filter(itemElem || (0, _jquery2.default)(_this3));
+                        return filter(itemElem || _this3);
                     })) && reg.test(isoSearch ? isoSearch.innerText : '');
                 };
             }

src/IsotopeGrid/IsotopeGrid.jsx

@@ -5,7 +5,6 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Isotope from 'isotope-layout';
 import { Row, Col } from 'react-bootstrap';
-import $ from 'jquery';
 
 const columnProps = PropTypes.oneOfType([
     PropTypes.string,
@@ -80,14 +79,14 @@ class IsotopeGrid extends React.Component {
                 isotope: new Isotope(ReactDOM.findDOMNode(this), {
                     itemSelector: `.${id}-item`,
                     layoutMode: 'fitRows',
-                    filter: (itemElem) => {
+                    filter(itemElem) {
                         const isoSearch = itemElem
                             ? itemElem.querySelector('.isotope-search')
-                            : $(this).find('.isotope-search');
+                            : this.querySelector('.isotope-search');
                         return (
                             (!filterList ||
                                 filterList.length === 0 ||
-                                filterList.every(filter => filter(itemElem || $(this)))) &&
+                                filterList.every(filter => filter(itemElem || this))) &&
                             reg.test(isoSearch ? isoSearch.innerText : '')
                         );
                     },
@@ -132,14 +131,14 @@ class IsotopeGrid extends React.Component {
             const reg = nextProps.wholeWord
                 ? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i')
                 : RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
-            options.filter = (itemElem) => {
+            options.filter = function (itemElem) {
                 const isoSearch = itemElem
                     ? itemElem.querySelector('.isotope-search')
-                    : $(this).find('.isotope-search');
+                    : this.querySelector('.isotope-search');
                 return (
                     (!nextProps.filterList ||
                         nextProps.filterList.length === 0 ||
-                        nextProps.filterList.every(filter => filter(itemElem || $(this)))) &&
+                        nextProps.filterList.every(filter => filter(itemElem || this))) &&
                     reg.test(isoSearch ? isoSearch.innerText : '')
                 );
             };