Skip to content

Commit 850dc5e

Browse files
culturedbarbarianculturedbarbarian
authored
Merge pull request #119 from webdev-dev/master
 Isotope Grid
2 parents 4aaa060 + d8447b6 commit 850dc5e

4 files changed

Lines changed: 103 additions & 59 deletions

File tree

‎lib/FilteredIsotope/FilteredIsotope.js‎

Lines changed: 41 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,9 @@ var FilteredIsotope = function (_React$Component) {
7979
var reg = wholeWord ? RegExp('\\b' + searchTerm.toLowerCase().trim() + '\\b', 'i') : RegExp('' + searchTerm.toLowerCase().trim(), 'i');
8080

8181
if (!isotope) {
82-
this.setState({ isotope: new _isotopeLayout2.default(_reactDom2.default.findDOMNode(this), {
82+
this.setState({
83+
isotope: new _isotopeLayout2.default(_reactDom2.default.findDOMNode(this), {
84+
itemSelector: '.wfui-isotope-element',
8385
layoutMode: 'fitRows',
8486
getSortData: getSortData,
8587
sortBy: sortBy || 'original-order',
@@ -89,7 +91,8 @@ var FilteredIsotope = function (_React$Component) {
8991
return filter(itemElem);
9092
})) && reg.test(itemElem.querySelector('.isotope-search').innerText);
9193
}
92-
}) });
94+
})
95+
});
9396
} else {
9497
this.state.isotope.reloadItems();
9598
}
@@ -136,8 +139,12 @@ var FilteredIsotope = function (_React$Component) {
136139
});
137140
}
138141
} else {
139-
if (this.props.sortBy !== nextProps.sortBy) options.sortBy = nextProps.sortBy || 'original-order';
140-
if (this.props.sortOrder !== nextProps.sortOrder) options.sortAscending = nextProps.sortOrder ? nextProps.sortOrder === 'asc' : true;
142+
if (this.props.sortBy !== nextProps.sortBy) {
143+
options.sortBy = nextProps.sortBy || 'original-order';
144+
}
145+
if (this.props.sortOrder !== nextProps.sortOrder) {
146+
options.sortAscending = nextProps.sortOrder ? nextProps.sortOrder === 'asc' : true;
147+
}
141148
if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim() || JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList)) {
142149
var _reg = nextProps.wholeWord ? RegExp('\\b' + nextProps.searchTerm.toLowerCase().trim() + '\\b', 'i') : RegExp('' + nextProps.searchTerm.toLowerCase().trim(), 'i');
143150
options.filter = function (itemElem) {
@@ -151,33 +158,30 @@ var FilteredIsotope = function (_React$Component) {
151158
if (options) this.state.isotope.arrange(_extends({}, options));
152159
}
153160
/*
154-
if (JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)) {
155-
this.setState({ reload: true });
156-
} else if (this.state.reload) {
157-
this.setState({ reload: false });
158-
}
159-
160-
if (JSON.stringify(this.props.getSortData) !== JSON.stringify(nextProps.getSortData)) {
161-
this.state.isotope.destroy();
162-
this.setState({ isotope: new Isotope(ReactDOM.findDOMNode(this), {
163-
layoutMode: 'fitRows',
164-
getSortData: nextProps.getSortData,
165-
}) });
166-
}
167-
168-
if (this.props.sortBy !== nextProps.sortBy || this.props.sortOrder !== nextProps.sortOrder) {
169-
this.state.isotope.arrange({
170-
sortBy: nextProps.sortBy || 'original-order',
171-
sortAscending: nextProps.sortOrder ? nextProps.sortOrder === 'asc' : true,
172-
});
173-
}
174-
175-
if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim()) {
176-
const reg = nextProps.wholeWord ? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i') : RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
177-
this.state.isotope.arrange({
178-
filter: itemElem => (!nextProps.filterList || nextProps.filterList.length === 0 || nextProps.filterList.every(filter => filter(itemElem))) && reg.test(itemElem.querySelector('.isotope-search').innerText),
179-
});
180-
}
161+
if (JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)) {
162+
this.setState({ reload: true });
163+
} else if (this.state.reload) {
164+
this.setState({ reload: false });
165+
}
166+
if (JSON.stringify(this.props.getSortData) !== JSON.stringify(nextProps.getSortData)) {
167+
this.state.isotope.destroy();
168+
this.setState({ isotope: new Isotope(ReactDOM.findDOMNode(this), {
169+
layoutMode: 'fitRows',
170+
getSortData: nextProps.getSortData,
171+
}) });
172+
}
173+
if (this.props.sortBy !== nextProps.sortBy || this.props.sortOrder !== nextProps.sortOrder) {
174+
this.state.isotope.arrange({
175+
sortBy: nextProps.sortBy || 'original-order',
176+
sortAscending: nextProps.sortOrder ? nextProps.sortOrder === 'asc' : true,
177+
});
178+
}
179+
if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim()) {
180+
const reg = nextProps.wholeWord ? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i') : RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
181+
this.state.isotope.arrange({
182+
filter: itemElem => (!nextProps.filterList || nextProps.filterList.length === 0 || nextProps.filterList.every(filter => filter(itemElem))) && reg.test(itemElem.querySelector('.isotope-search').innerText),
183+
});
184+
}
181185
*/
182186
}
183187
}, {
@@ -216,7 +220,12 @@ var FilteredIsotope = function (_React$Component) {
216220
'div',
217221
{ className: (0, _classnames2.default)(className, 'wfui-isotope-grid') },
218222
data.map(function (item, idx) {
219-
return _react2.default.createElement(_Element2.default, { className: itemClassName, item: item, itemDisplay: itemDisplay, key: idx });
223+
return _react2.default.createElement(_Element2.default, {
224+
className: itemClassName,
225+
item: item,
226+
itemDisplay: itemDisplay,
227+
key: idx
228+
});
220229
})
221230
);
222231
}

‎lib/index.js‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Object.defineProperty(exports, "__esModule", {
44
value: true
55
});
6-
exports.WFUIDropdown = exports.Description = exports.PanelFilter = exports.CascadingPane = exports.ModalDialog = exports.Card = exports.FilterFields = exports.FilterItem = exports.Filters = exports.ReactMarkdown = exports.CollapsibleFilter = exports.Search = exports.FormFields = exports.LoadingComponent = exports.TimezonePicker = exports.Dropzone = exports.NotificationSystem = exports.DisqusFeed = exports.GroupsDrawer = exports.Drawer = exports.UserDrawer = exports.DashboardCard = exports.DashboardBox = exports.DraggableWithContext = exports.Draggable = exports.PasswordValidator = exports.FilteredIsotope = exports.FilteredTableV2 = exports.FilteredTable = exports.TwitterFeed = exports.Spinner = exports.FilteredList = undefined;
6+
exports.WFUIDropdown = exports.Description = exports.PanelFilter = exports.CascadingPane = exports.ModalDialog = exports.Card = exports.FilterFields = exports.FilterItem = exports.Filters = exports.ReactMarkdown = exports.CollapsibleFilter = exports.Search = exports.FormFields = exports.LoadingComponent = exports.TimezonePicker = exports.Dropzone = exports.NotificationSystem = exports.DisqusFeed = exports.GroupsDrawer = exports.Drawer = exports.UserDrawer = exports.DashboardCard = exports.DashboardBox = exports.DraggableWithContext = exports.Draggable = exports.PasswordValidator = exports.IsotopeGrid = exports.FilteredIsotope = exports.FilteredTableV2 = exports.FilteredTable = exports.TwitterFeed = exports.Spinner = exports.FilteredList = undefined;
77

88
var _reactBootstrap = require('react-bootstrap');
99

@@ -57,6 +57,10 @@ var _FilteredIsotope = require('./FilteredIsotope/FilteredIsotope');
5757

5858
var _FilteredIsotope2 = _interopRequireDefault(_FilteredIsotope);
5959

60+
var _IsotopeGrid = require('./IsotopeGrid/IsotopeGrid');
61+
62+
var _IsotopeGrid2 = _interopRequireDefault(_IsotopeGrid);
63+
6064
var _PasswordValidator = require('./PasswordValidator/PasswordValidator');
6165

6266
var _PasswordValidator2 = _interopRequireDefault(_PasswordValidator);
@@ -155,6 +159,7 @@ exports.TwitterFeed = _TwitterFeed2.default;
155159
exports.FilteredTable = _FilteredTable2.default;
156160
exports.FilteredTableV2 = _FilteredTable4.default;
157161
exports.FilteredIsotope = _FilteredIsotope2.default;
162+
exports.IsotopeGrid = _IsotopeGrid2.default;
158163
exports.PasswordValidator = _PasswordValidator2.default;
159164
exports.Draggable = _Draggable2.default;
160165
exports.DraggableWithContext = DraggableWithContext;

‎src/FilteredIsotope/FilteredIsotope.jsx‎

Lines changed: 54 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -23,16 +23,25 @@ class FilteredIsotope extends React.Component {
2323
const { getSortData, sortBy, sortOrder, wholeWord, searchTerm, filterList } = this.props;
2424
const { isotope } = this.state;
2525

26-
const reg = wholeWord ? RegExp(`\\b${searchTerm.toLowerCase().trim()}\\b`, 'i') : RegExp(`${searchTerm.toLowerCase().trim()}`, 'i');
26+
const reg = wholeWord
27+
? RegExp(`\\b${searchTerm.toLowerCase().trim()}\\b`, 'i')
28+
: RegExp(`${searchTerm.toLowerCase().trim()}`, 'i');
2729

2830
if (!isotope) {
29-
this.setState({ isotope: new Isotope(ReactDOM.findDOMNode(this), {
30-
layoutMode: 'fitRows',
31-
getSortData,
32-
sortBy: sortBy || 'original-order',
33-
sortAscending: sortOrder ? sortOrder === 'asc' : true,
34-
filter: itemElem => (!filterList || filterList.length === 0 || filterList.every(filter => filter(itemElem))) && reg.test(itemElem.querySelector('.isotope-search').innerText),
35-
}) });
31+
this.setState({
32+
isotope: new Isotope(ReactDOM.findDOMNode(this), {
33+
itemSelector: '.wfui-isotope-element',
34+
layoutMode: 'fitRows',
35+
getSortData,
36+
sortBy: sortBy || 'original-order',
37+
sortAscending: sortOrder ? sortOrder === 'asc' : true,
38+
filter: itemElem =>
39+
(!filterList ||
40+
filterList.length === 0 ||
41+
filterList.every(filter => filter(itemElem))) &&
42+
reg.test(itemElem.querySelector('.isotope-search').innerText),
43+
}),
44+
});
3645
} else {
3746
this.state.isotope.reloadItems();
3847
}
@@ -50,11 +59,17 @@ class FilteredIsotope extends React.Component {
5059

5160
if (JSON.stringify(this.props.getSortData) !== JSON.stringify(nextProps.getSortData)) {
5261
this.state.isotope.destroy();
53-
const reg = nextProps.wholeWord ? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i') : RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
62+
const reg = nextProps.wholeWord
63+
? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i')
64+
: RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
5465
options.getSortData = nextProps.getSortData;
5566
options.sortBy = nextProps.sortBy || 'original-order';
5667
options.sortAscending = nextProps.sortOrder ? nextProps.sortOrder === 'asc' : true;
57-
options.filter = itemElem => (!nextProps.filterList || nextProps.filterList.length === 0 || nextProps.filterList.every(filter => filter(itemElem))) && reg.test(itemElem.querySelector('.isotope-search').innerText);
68+
options.filter = itemElem =>
69+
(!nextProps.filterList ||
70+
nextProps.filterList.length === 0 ||
71+
nextProps.filterList.every(filter => filter(itemElem))) &&
72+
reg.test(itemElem.querySelector('.isotope-search').innerText);
5873
if (reload !== this.state.reload) {
5974
this.setState({
6075
isotope: new Isotope(ReactDOM.findDOMNode(this), {
@@ -74,18 +89,31 @@ class FilteredIsotope extends React.Component {
7489
});
7590
}
7691
} else {
77-
if (this.props.sortBy !== nextProps.sortBy) options.sortBy = nextProps.sortBy || 'original-order';
78-
if (this.props.sortOrder !== nextProps.sortOrder) options.sortAscending = nextProps.sortOrder ? nextProps.sortOrder === 'asc' : true;
79-
if (this.props.searchTerm.toLowerCase().trim() !== nextProps.searchTerm.toLowerCase().trim() ||
80-
JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList)) {
81-
const reg = nextProps.wholeWord ? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i') : RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
82-
options.filter = itemElem => (!nextProps.filterList || nextProps.filterList.length === 0 || nextProps.filterList.every(filter => filter(itemElem))) && reg.test(itemElem.querySelector('.isotope-search').innerText);
92+
if (this.props.sortBy !== nextProps.sortBy) {
93+
options.sortBy = nextProps.sortBy || 'original-order';
94+
}
95+
if (this.props.sortOrder !== nextProps.sortOrder) {
96+
options.sortAscending = nextProps.sortOrder ? nextProps.sortOrder === 'asc' : true;
97+
}
98+
if (
99+
this.props.searchTerm.toLowerCase().trim() !==
100+
nextProps.searchTerm.toLowerCase().trim() ||
101+
JSON.stringify(this.props.filterList) !== JSON.stringify(nextProps.filterList)
102+
) {
103+
const reg = nextProps.wholeWord
104+
? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i')
105+
: RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
106+
options.filter = itemElem =>
107+
(!nextProps.filterList ||
108+
nextProps.filterList.length === 0 ||
109+
nextProps.filterList.every(filter => filter(itemElem))) &&
110+
reg.test(itemElem.querySelector('.isotope-search').innerText);
83111
}
84112

85113
if (reload !== this.state.reload) this.setState({ reload });
86114
if (options) this.state.isotope.arrange({ ...options });
87115
}
88-
/*
116+
/*
89117
if (JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)) {
90118
this.setState({ reload: true });
91119
} else if (this.state.reload) {
@@ -140,11 +168,14 @@ class FilteredIsotope extends React.Component {
140168

141169
return (
142170
<div className={classNames(className, 'wfui-isotope-grid')}>
143-
{
144-
data.map((item, idx) => (
145-
<Element className={itemClassName} item={item} itemDisplay={itemDisplay} key={idx} />
146-
))
147-
}
171+
{data.map((item, idx) => (
172+
<Element
173+
className={itemClassName}
174+
item={item}
175+
itemDisplay={itemDisplay}
176+
key={idx}
177+
/>
178+
))}
148179
</div>
149180
);
150181
}
@@ -154,10 +185,7 @@ FilteredIsotope.propTypes = {
154185
itemDisplay: PropTypes.element.isRequired,
155186
data: PropTypes.arrayOf(PropTypes.any).isRequired,
156187
className: PropTypes.string,
157-
getSortData: PropTypes.objectOf(PropTypes.oneOfType([
158-
PropTypes.string,
159-
PropTypes.func,
160-
])),
188+
getSortData: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.func])),
161189
sortBy: PropTypes.string,
162190
sortOrder: PropTypes.string,
163191
searchTerm: PropTypes.string,

‎src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import TwitterFeed from './TwitterFeed/TwitterFeed';
88
import FilteredTable from './FilteredTable/1/FilteredTable';
99
import FilteredTableV2 from './FilteredTable/2/FilteredTable';
1010
import FilteredIsotope from './FilteredIsotope/FilteredIsotope';
11+
import IsotopeGrid from './IsotopeGrid/IsotopeGrid';
1112
import PasswordValidator from './PasswordValidator/PasswordValidator';
1213
import Draggable, { withContext } from './Draggable/Draggable';
1314
import DashboardBox from './DashboardBox/DashboardBox';
@@ -43,6 +44,7 @@ export {
4344
FilteredTable,
4445
FilteredTableV2,
4546
FilteredIsotope,
47+
IsotopeGrid,
4648
PasswordValidator,
4749
Draggable,
4850
DraggableWithContext,

0 commit comments

Comments
 (0)