Skip to content

Commit abd2dfc

Browse files
culturedbarbarianculturedbarbarian
authored
Merge pull request #120 from webdev-dev/master
 Isotope Grid Fix
2 parents 850dc5e + b91a7e0 commit abd2dfc

2 files changed

Lines changed: 62 additions & 36 deletions

File tree

‎lib/IsotopeGrid/IsotopeGrid.js‎

Lines changed: 34 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,10 @@ var _isotopeLayout2 = _interopRequireDefault(_isotopeLayout);
3434

3535
var _reactBootstrap = require('react-bootstrap');
3636

37+
var _jquery = require('jquery');
38+
39+
var _jquery2 = _interopRequireDefault(_jquery);
40+
3741
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
3842

3943
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -42,6 +46,16 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen
4246

4347
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; }
4448

49+
var columnProps = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool, _propTypes2.default.shape({
50+
size: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.number, _propTypes2.default.string]),
51+
// example size values:
52+
// 12 || "12" => col-12 or col-`width`-12
53+
// auto => col-auto or col-`width`-auto
54+
// true => col or col-`width`
55+
order: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
56+
offset: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
57+
})]);
58+
4559
var IsotopeItem = function IsotopeItem(_ref) {
4660
var key = _ref.key,
4761
id = _ref.id,
@@ -50,7 +64,6 @@ var IsotopeItem = function IsotopeItem(_ref) {
5064
sm = _ref.sm,
5165
md = _ref.md,
5266
lg = _ref.lg,
53-
xl = _ref.xl,
5467
children = _ref.children;
5568
return width ? _react2.default.createElement(
5669
'div',
@@ -64,22 +77,20 @@ var IsotopeItem = function IsotopeItem(_ref) {
6477
xs: xs,
6578
sm: sm,
6679
md: md,
67-
lg: lg,
68-
xl: xl
80+
lg: lg
6981
},
7082
children
7183
);
7284
};
7385

7486
IsotopeItem.propTypes = {
7587
key: _propTypes2.default.number,
76-
id: _propTypes2.default.string.isRequired,
88+
id: _propTypes2.default.string,
7789
width: _propTypes2.default.number,
78-
xs: _react.columnProps,
79-
sm: _react.columnProps,
80-
md: _react.columnProps,
81-
lg: _react.columnProps,
82-
xl: _react.columnProps,
90+
xs: columnProps,
91+
sm: columnProps,
92+
md: columnProps,
93+
lg: columnProps,
8394
children: _propTypes2.default.node
8495
};
8596

@@ -108,6 +119,8 @@ var IsotopeGrid = function (_React$Component) {
108119
_createClass(IsotopeGrid, [{
109120
key: 'createIsotope',
110121
value: function createIsotope() {
122+
var _this2 = this;
123+
111124
var _props = this.props,
112125
id = _props.id,
113126
wholeWord = _props.wholeWord,
@@ -124,9 +137,9 @@ var IsotopeGrid = function (_React$Component) {
124137
itemSelector: '.' + id + '-item',
125138
layoutMode: 'fitRows',
126139
filter: function filter(itemElem) {
127-
var isoSearch = itemElem.querySelector('.isotope-search');
140+
var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : (0, _jquery2.default)(_this2).find('.isotope-search');
128141
return (!filterList || filterList.length === 0 || filterList.every(function (filter) {
129-
return filter(itemElem);
142+
return filter(itemElem || (0, _jquery2.default)(_this2));
130143
})) && reg.test(isoSearch ? isoSearch.innerText : '');
131144
}
132145
})
@@ -143,6 +156,8 @@ var IsotopeGrid = function (_React$Component) {
143156
}, {
144157
key: 'componentWillReceiveProps',
145158
value: function componentWillReceiveProps(nextProps) {
159+
var _this3 = this;
160+
146161
var oldElems = [];
147162

148163
this.props.children.forEach(function (item) {
@@ -171,9 +186,9 @@ var IsotopeGrid = function (_React$Component) {
171186
if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim() || JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList)) {
172187
var reg = nextProps.wholeWord ? RegExp('\\b' + nextProps.searchTerm.toLowerCase().trim() + '\\b', 'i') : RegExp('' + nextProps.searchTerm.toLowerCase().trim(), 'i');
173188
options.filter = function (itemElem) {
174-
var isoSearch = itemElem.querySelector('.isotope-search');
189+
var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : (0, _jquery2.default)(_this3).find('.isotope-search');
175190
return (!nextProps.filterList || nextProps.filterList.length === 0 || nextProps.filterList.every(function (filter) {
176-
return filter(itemElem);
191+
return filter(itemElem || (0, _jquery2.default)(_this3));
177192
})) && reg.test(isoSearch ? isoSearch.innerText : '');
178193
};
179194
}
@@ -213,7 +228,6 @@ var IsotopeGrid = function (_React$Component) {
213228
sm = _props2.sm,
214229
md = _props2.md,
215230
lg = _props2.lg,
216-
xl = _props2.xl,
217231
children = _props2.children,
218232
className = _props2.className;
219233

@@ -249,8 +263,7 @@ var IsotopeGrid = function (_React$Component) {
249263
xs: xs,
250264
sm: sm,
251265
md: md,
252-
lg: lg,
253-
xl: xl
266+
lg: lg
254267
});
255268
default:
256269
return null;
@@ -273,8 +286,7 @@ var IsotopeGrid = function (_React$Component) {
273286
xs: xs,
274287
sm: sm,
275288
md: md,
276-
lg: lg,
277-
xl: xl
289+
lg: lg
278290
});
279291
default:
280292
return null;
@@ -291,11 +303,10 @@ IsotopeGrid.propTypes = {
291303
id: _propTypes2.default.string.isRequired,
292304
className: _propTypes2.default.string,
293305
width: _propTypes2.default.number,
294-
xs: _react.columnProps,
295-
sm: _react.columnProps,
296-
md: _react.columnProps,
297-
lg: _react.columnProps,
298-
xl: _react.columnProps,
306+
xs: columnProps,
307+
sm: columnProps,
308+
md: columnProps,
309+
lg: columnProps,
299310
children: _propTypes2.default.node,
300311
sortBy: _propTypes2.default.string,
301312
sortOrder: _propTypes2.default.string,

‎src/IsotopeGrid/IsotopeGrid.jsx‎

Lines changed: 28 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,28 @@
1-
import React, { columnProps, cloneElement } from 'react';
1+
import React, { cloneElement } from 'react';
22
import ReactDOM from 'react-dom';
33
import shallowCompare from 'react-addons-shallow-compare';
44
import PropTypes from 'prop-types';
55
import classNames from 'classnames';
66
import Isotope from 'isotope-layout';
77
import { Row, Col } from 'react-bootstrap';
8+
import $ from 'jquery';
89

9-
const IsotopeItem = ({ key, id, width, xs, sm, md, lg, xl, children }) =>
10+
const columnProps = PropTypes.oneOfType([
11+
PropTypes.string,
12+
PropTypes.number,
13+
PropTypes.bool,
14+
PropTypes.shape({
15+
size: PropTypes.oneOfType([PropTypes.bool, PropTypes.number, PropTypes.string]),
16+
// example size values:
17+
// 12 || "12" => col-12 or col-`width`-12
18+
// auto => col-auto or col-`width`-auto
19+
// true => col or col-`width`
20+
order: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
21+
offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
22+
}),
23+
]);
24+
25+
const IsotopeItem = ({ key, id, width, xs, sm, md, lg, children }) =>
1026
width ? (
1127
<div key={key} className={classNames(`${id}-item`, 'wfui-isotope-item')} style={{ width }}>
1228
{children}
@@ -19,21 +35,19 @@ const IsotopeItem = ({ key, id, width, xs, sm, md, lg, xl, children }) =>
1935
sm={sm}
2036
md={md}
2137
lg={lg}
22-
xl={xl}
2338
>
2439
{children}
2540
</Col>
2641
);
2742

2843
IsotopeItem.propTypes = {
2944
key: PropTypes.number,
30-
id: PropTypes.string.isRequired,
45+
id: PropTypes.string,
3146
width: PropTypes.number,
3247
xs: columnProps,
3348
sm: columnProps,
3449
md: columnProps,
3550
lg: columnProps,
36-
xl: columnProps,
3751
children: PropTypes.node,
3852
};
3953

@@ -67,11 +81,13 @@ class IsotopeGrid extends React.Component {
6781
itemSelector: `.${id}-item`,
6882
layoutMode: 'fitRows',
6983
filter: (itemElem) => {
70-
const isoSearch = itemElem.querySelector('.isotope-search');
84+
const isoSearch = itemElem
85+
? itemElem.querySelector('.isotope-search')
86+
: $(this).find('.isotope-search');
7187
return (
7288
(!filterList ||
7389
filterList.length === 0 ||
74-
filterList.every(filter => filter(itemElem))) &&
90+
filterList.every(filter => filter(itemElem || $(this)))) &&
7591
reg.test(isoSearch ? isoSearch.innerText : '')
7692
);
7793
},
@@ -117,11 +133,13 @@ class IsotopeGrid extends React.Component {
117133
? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i')
118134
: RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
119135
options.filter = (itemElem) => {
120-
const isoSearch = itemElem.querySelector('.isotope-search');
136+
const isoSearch = itemElem
137+
? itemElem.querySelector('.isotope-search')
138+
: $(this).find('.isotope-search');
121139
return (
122140
(!nextProps.filterList ||
123141
nextProps.filterList.length === 0 ||
124-
nextProps.filterList.every(filter => filter(itemElem))) &&
142+
nextProps.filterList.every(filter => filter(itemElem || $(this)))) &&
125143
reg.test(isoSearch ? isoSearch.innerText : '')
126144
);
127145
};
@@ -151,7 +169,7 @@ class IsotopeGrid extends React.Component {
151169
}
152170

153171
render() {
154-
const { id, width, xs, sm, md, lg, xl, children, className } = this.props;
172+
const { id, width, xs, sm, md, lg, children, className } = this.props;
155173

156174
const elems = [];
157175

@@ -183,7 +201,6 @@ class IsotopeGrid extends React.Component {
183201
sm,
184202
md,
185203
lg,
186-
xl,
187204
});
188205
default:
189206
return null;
@@ -208,7 +225,6 @@ class IsotopeGrid extends React.Component {
208225
sm,
209226
md,
210227
lg,
211-
xl,
212228
});
213229
default:
214230
return null;
@@ -227,7 +243,6 @@ IsotopeGrid.propTypes = {
227243
sm: columnProps,
228244
md: columnProps,
229245
lg: columnProps,
230-
xl: columnProps,
231246
children: PropTypes.node,
232247
sortBy: PropTypes.string,
233248
sortOrder: PropTypes.string,

0 commit comments

Comments
 (0)