IsotopeGrid + VisibilityFilter

Author: Kyle Kim

lib/IsotopeGrid/IsotopeGrid.js

@@ -32,6 +32,8 @@ var _isotopeLayout = require('isotope-layout');
 
 var _isotopeLayout2 = _interopRequireDefault(_isotopeLayout);
 
+var _reactRedux = require('react-redux');
+
 var _reactBootstrap = require('react-bootstrap');
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -177,7 +179,7 @@ var IsotopeGrid = function (_React$Component) {
             });
             var reload = oldElems.length !== newElems.length;
             var options = {};
-            if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim() || JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList)) {
+            if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim() || JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList) || JSON.stringify(this.props.category) !== JSON.stringify(nextProps.category)) {
                 var reg = nextProps.wholeWord ? RegExp('\\b' + nextProps.searchTerm.toLowerCase().trim() + '\\b', 'i') : RegExp('' + nextProps.searchTerm.toLowerCase().trim(), 'i');
                 options.filter = function (itemElem) {
                     var _this3 = this;
@@ -312,7 +314,8 @@ IsotopeGrid.propTypes = {
     sortOrder: _propTypes2.default.string,
     searchTerm: _propTypes2.default.string,
     wholeWord: _propTypes2.default.bool,
-    filterList: _propTypes2.default.arrayOf(_propTypes2.default.func)
+    filterList: _propTypes2.default.arrayOf(_propTypes2.default.func),
+    category: _propTypes2.default.object
 };
 
 IsotopeGrid.defaultProps = {
@@ -324,4 +327,8 @@ IsotopeGrid.defaultProps = {
 
 IsotopeGrid.Item = IsotopeItem;
 
-exports.default = IsotopeGrid;
+exports.default = (0, _reactRedux.connect)(function (state) {
+    return {
+        category: state.visibilityFilter && state.visibilityFilter.category
+    };
+})(IsotopeGrid);

src/IsotopeGrid/IsotopeGrid.jsx

@@ -4,6 +4,7 @@ import shallowCompare from 'react-addons-shallow-compare';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Isotope from 'isotope-layout';
+import { connect } from 'react-redux';
 import { Row, Col } from 'react-bootstrap';
 
 const columnProps = PropTypes.oneOfType([
@@ -126,7 +127,8 @@ class IsotopeGrid extends React.Component {
         if (
             this.props.searchTerm.toLowerCase().trim() !==
                 nextProps.searchTerm.toLowerCase().trim() ||
-            JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList)
+            JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList) ||
+            JSON.stringify(this.props.category) !== JSON.stringify(nextProps.category)
         ) {
             const reg = nextProps.wholeWord
                 ? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i')
@@ -252,6 +254,7 @@ IsotopeGrid.propTypes = {
     searchTerm: PropTypes.string,
     wholeWord: PropTypes.bool,
     filterList: PropTypes.arrayOf(PropTypes.func),
+    category: PropTypes.object,
 };
 
 IsotopeGrid.defaultProps = {
@@ -263,4 +266,6 @@ IsotopeGrid.defaultProps = {
 
 IsotopeGrid.Item = IsotopeItem;
 
-export default IsotopeGrid;
+export default connect(state => ({
+    category: state.visibilityFilter && state.visibilityFilter.category,
+}))(IsotopeGrid);

stories/IsotopeGrid/StoryBasicExample.src

@@ -62,4 +62,9 @@ class IsotopeGridContainer extends React.Component {
     }
 }
 
-return <IsotopeGridContainer />;
+const example = (
+    <Provider store={store}>
+        <IsotopeGridContainer />
+    </Provider>
+);
+return example;

stories/IsotopeGrid/index.js

@@ -1,9 +1,20 @@
 import React from 'react';
 import { Button, ButtonGroup } from 'react-bootstrap';
+import thunk from 'redux-thunk';
 import { storiesOf } from '@kadira/storybook';
 import IsotopeGrid from '../../src/IsotopeGrid/IsotopeGrid';
 import StoryBasicExample from 'raw!./StoryBasicExample.src';
+import { Provider } from 'react-redux';
+import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
+import { visibilityFilterReducer } from '../../src/util/visibilityFilter';
 
+const store = createStore(
+    combineReducers({
+        visibilityFilter: visibilityFilterReducer,
+    }),
+    {},
+    compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f),
+);
 storiesOf('IsotopeGrid', module).addWithInfo('Basic Example', () => StoryBasicExample, {
-    scope: { IsotopeGrid, Button, ButtonGroup },
+    scope: { Provider, store, IsotopeGrid, Button, ButtonGroup },
 });