Skip to content

Commit e960497

Browse files
author
Kyle Kim
committed
Isotope Grid V2
1 parent 0a7a92e commit e960497

6 files changed

Lines changed: 91 additions & 67 deletions

File tree

‎.storybook/config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ function loadStories() {
1919
require('../stories/UserDrawer');
2020
require('../stories/FilteredList');
2121
require('../stories/FilteredTable');
22-
require('../stories/FilteredIsotope');
2322
require('../stories/TwitterFeed');
2423
require('../stories/Spinner');
2524
require('../stories/PasswordValidator');

‎lib/IsotopeGrid/IsotopeGrid.js‎

Lines changed: 40 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@ var _reactRedux = require('react-redux');
3636

3737
var _reactBootstrap = require('react-bootstrap');
3838

39+
var _stringifyValues = require('../util/stringifyValues');
40+
3941
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
4042

4143
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -46,10 +48,6 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
4648

4749
var columnProps = _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number, _propTypes2.default.bool, _propTypes2.default.shape({
4850
size: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.number, _propTypes2.default.string]),
49-
// example size values:
50-
// 12 || "12" => col-12 or col-`width`-12
51-
// auto => col-auto or col-`width`-auto
52-
// true => col or col-`width`
5351
order: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string]),
5452
offset: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.string])
5553
})]);
@@ -62,13 +60,15 @@ var IsotopeItem = function IsotopeItem(_ref) {
6260
sm = _ref.sm,
6361
md = _ref.md,
6462
lg = _ref.lg,
65-
children = _ref.children;
63+
children = _ref.children,
64+
item = _ref.item;
6665
return width ? _react2.default.createElement(
6766
'div',
6867
{
6968
key: key,
7069
className: (0, _classnames2.default)(id + '-item', 'wfui-isotope-item'),
71-
style: { width: width + 'px' }
70+
style: { width: width + 'px' },
71+
'data-item': (0, _stringifyValues.stringifyValues)(item)
7272
},
7373
children
7474
) : _react2.default.createElement(
@@ -79,7 +79,8 @@ var IsotopeItem = function IsotopeItem(_ref) {
7979
xs: xs,
8080
sm: sm,
8181
md: md,
82-
lg: lg
82+
lg: lg,
83+
'data-item': (0, _stringifyValues.stringifyValues)(item)
8384
},
8485
children
8586
);
@@ -93,7 +94,8 @@ IsotopeItem.propTypes = {
9394
sm: columnProps,
9495
md: columnProps,
9596
lg: columnProps,
96-
children: _propTypes2.default.node
97+
children: _propTypes2.default.node,
98+
item: _propTypes2.default.any
9799
};
98100

99101
IsotopeItem.defaultProps = {
@@ -125,7 +127,10 @@ var IsotopeGrid = function (_React$Component) {
125127
id = _props.id,
126128
wholeWord = _props.wholeWord,
127129
searchTerm = _props.searchTerm,
128-
filterList = _props.filterList;
130+
filterList = _props.filterList,
131+
sortBy = _props.sortBy,
132+
sortAscending = _props.sortAscending,
133+
getSortData = _props.getSortData;
129134
var isotope = this.state.isotope;
130135

131136

@@ -136,13 +141,16 @@ var IsotopeGrid = function (_React$Component) {
136141
isotope: new _isotopeLayout2.default(_reactDom2.default.findDOMNode(this), {
137142
itemSelector: '.' + id + '-item',
138143
layoutMode: 'fitRows',
144+
sortBy: sortBy,
145+
sortAscending: sortAscending,
146+
getSortData: getSortData,
139147
filter: function filter(itemElem) {
140148
var _this2 = this;
141149

142-
var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : this.querySelector('.isotope-search');
150+
var isoSearch = itemElem ? itemElem.dataset.item : this.dataset.item;
143151
return (!filterList || filterList.length === 0 || filterList.every(function (filter) {
144152
return filter(itemElem || _this2);
145-
})) && reg.test(isoSearch ? isoSearch.innerText : '');
153+
})) && reg.test(isoSearch || '');
146154
}
147155
})
148156
});
@@ -188,17 +196,26 @@ var IsotopeGrid = function (_React$Component) {
188196
options.filter = function (itemElem) {
189197
var _this3 = this;
190198

191-
var isoSearch = itemElem ? itemElem.querySelector('.isotope-search') : this.querySelector('.isotope-search');
199+
var isoSearch = itemElem ? itemElem.dataset.item : this.dataset.item;
192200
return (!nextProps.filterList || nextProps.filterList.length === 0 || nextProps.filterList.every(function (filter) {
193201
return filter(itemElem || _this3);
194-
})) && reg.test(isoSearch ? isoSearch.innerText : '');
202+
})) && reg.test(isoSearch || '');
195203
};
196204
}
205+
if (this.props.sortBy !== nextProps.sortBy) {
206+
options.sortBy = nextProps.sortBy;
207+
}
208+
if (this.props.sortAscending !== nextProps.sortAscending) {
209+
options.sortAscending = nextProps.sortAscending;
210+
}
211+
if (JSON.stringify(this.props.getSortData) !== JSON.stringify(nextProps.getSortData)) {
212+
options.getSortData = nextProps.getSortData;
213+
}
197214

198215
if (reload !== this.state.reload) this.setState({ reload: reload });
199-
if (options && this.state.isotope) {
216+
if (Object.keys(options).length && this.state.isotope) {
200217
this.state.isotope.arrange(_extends({}, options));
201-
} else if (options) {
218+
} else if (!Object.keys(options).length) {
202219
this.createIsotope();
203220
}
204221
}
@@ -314,26 +331,24 @@ IsotopeGrid.propTypes = {
314331
md: columnProps,
315332
lg: columnProps,
316333
children: _propTypes2.default.node,
317-
sortBy: _propTypes2.default.string,
318-
sortOrder: _propTypes2.default.string,
334+
sortBy: _propTypes2.default.oneOf(_propTypes2.default.string, _propTypes2.default.arrayOf(_propTypes2.default.string)),
335+
sortAscending: _propTypes2.default.bool,
336+
getSortData: _propTypes2.default.object,
319337
searchTerm: _propTypes2.default.string,
320338
wholeWord: _propTypes2.default.bool,
321-
filterList: _propTypes2.default.arrayOf(_propTypes2.default.func),
322-
category: _propTypes2.default.object
339+
filterList: _propTypes2.default.arrayOf(_propTypes2.default.func)
323340
};
324341

325342
IsotopeGrid.defaultProps = {
326343
searchTerm: '',
327344
xs: 12,
328345
sm: 6,
329346
md: 4,
330-
lg: 4
347+
lg: 4,
348+
sortBy: 'original-order',
349+
sortAscending: true
331350
};
332351

333352
IsotopeGrid.Item = IsotopeItem;
334353

335-
exports.default = (0, _reactRedux.connect)(function (state) {
336-
return {
337-
category: state.visibilityFilter && state.visibilityFilter.category
338-
};
339-
})(IsotopeGrid);
354+
exports.default = IsotopeGrid;

‎lib/index.js‎

Lines changed: 1 addition & 6 deletions
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.IsotopeGrid = 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.FilteredTableV2 = exports.FilteredTable = exports.TwitterFeed = exports.Spinner = exports.FilteredList = undefined;
77

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

@@ -53,10 +53,6 @@ var _FilteredTable3 = require('./FilteredTable/2/FilteredTable');
5353

5454
var _FilteredTable4 = _interopRequireDefault(_FilteredTable3);
5555

56-
var _FilteredIsotope = require('./FilteredIsotope/FilteredIsotope');
57-
58-
var _FilteredIsotope2 = _interopRequireDefault(_FilteredIsotope);
59-
6056
var _IsotopeGrid = require('./IsotopeGrid/IsotopeGrid');
6157

6258
var _IsotopeGrid2 = _interopRequireDefault(_IsotopeGrid);
@@ -158,7 +154,6 @@ exports.Spinner = _Spinner2.default;
158154
exports.TwitterFeed = _TwitterFeed2.default;
159155
exports.FilteredTable = _FilteredTable2.default;
160156
exports.FilteredTableV2 = _FilteredTable4.default;
161-
exports.FilteredIsotope = _FilteredIsotope2.default;
162157
exports.IsotopeGrid = _IsotopeGrid2.default;
163158
exports.PasswordValidator = _PasswordValidator2.default;
164159
exports.Draggable = _Draggable2.default;

‎src/IsotopeGrid/IsotopeGrid.jsx‎

Lines changed: 38 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,28 +6,26 @@ import classNames from 'classnames';
66
import Isotope from 'isotope-layout';
77
import { connect } from 'react-redux';
88
import { Row, Col } from 'react-bootstrap';
9+
import { stringifyValues } from '../util/stringifyValues';
910

1011
const columnProps = PropTypes.oneOfType([
1112
PropTypes.string,
1213
PropTypes.number,
1314
PropTypes.bool,
1415
PropTypes.shape({
1516
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`
2017
order: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
2118
offset: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
2219
}),
2320
]);
2421

25-
const IsotopeItem = ({ key, id, width, xs, sm, md, lg, children }) =>
22+
const IsotopeItem = ({ key, id, width, xs, sm, md, lg, children, item }) =>
2623
width ? (
2724
<div
2825
key={key}
2926
className={classNames(`${id}-item`, 'wfui-isotope-item')}
3027
style={{ width: `${width}px` }}
28+
data-item={stringifyValues(item)}
3129
>
3230
{children}
3331
</div>
@@ -39,6 +37,7 @@ const IsotopeItem = ({ key, id, width, xs, sm, md, lg, children }) =>
3937
sm={sm}
4038
md={md}
4139
lg={lg}
40+
data-item={stringifyValues(item)}
4241
>
4342
{children}
4443
</Col>
@@ -53,6 +52,7 @@ IsotopeItem.propTypes = {
5352
md: columnProps,
5453
lg: columnProps,
5554
children: PropTypes.node,
55+
item: PropTypes.any,
5656
};
5757

5858
IsotopeItem.defaultProps = {
@@ -72,7 +72,15 @@ class IsotopeGrid extends React.Component {
7272
}
7373

7474
createIsotope() {
75-
const { id, wholeWord, searchTerm, filterList } = this.props;
75+
const {
76+
id,
77+
wholeWord,
78+
searchTerm,
79+
filterList,
80+
sortBy,
81+
sortAscending,
82+
getSortData,
83+
} = this.props;
7684
const { isotope } = this.state;
7785

7886
const reg = wholeWord
@@ -84,15 +92,16 @@ class IsotopeGrid extends React.Component {
8492
isotope: new Isotope(ReactDOM.findDOMNode(this), {
8593
itemSelector: `.${id}-item`,
8694
layoutMode: 'fitRows',
95+
sortBy,
96+
sortAscending,
97+
getSortData,
8798
filter(itemElem) {
88-
const isoSearch = itemElem
89-
? itemElem.querySelector('.isotope-search')
90-
: this.querySelector('.isotope-search');
99+
const isoSearch = itemElem ? itemElem.dataset.item : this.dataset.item;
91100
return (
92101
(!filterList ||
93102
filterList.length === 0 ||
94103
filterList.every(filter => filter(itemElem || this))) &&
95-
reg.test(isoSearch ? isoSearch.innerText : '')
104+
reg.test(isoSearch || '')
96105
);
97106
},
98107
}),
@@ -138,22 +147,29 @@ class IsotopeGrid extends React.Component {
138147
? RegExp(`\\b${nextProps.searchTerm.toLowerCase().trim()}\\b`, 'i')
139148
: RegExp(`${nextProps.searchTerm.toLowerCase().trim()}`, 'i');
140149
options.filter = function (itemElem) {
141-
const isoSearch = itemElem
142-
? itemElem.querySelector('.isotope-search')
143-
: this.querySelector('.isotope-search');
150+
const isoSearch = itemElem ? itemElem.dataset.item : this.dataset.item;
144151
return (
145152
(!nextProps.filterList ||
146153
nextProps.filterList.length === 0 ||
147154
nextProps.filterList.every(filter => filter(itemElem || this))) &&
148-
reg.test(isoSearch ? isoSearch.innerText : '')
155+
reg.test(isoSearch || '')
149156
);
150157
};
151158
}
159+
if (this.props.sortBy !== nextProps.sortBy) {
160+
options.sortBy = nextProps.sortBy;
161+
}
162+
if (this.props.sortAscending !== nextProps.sortAscending) {
163+
options.sortAscending = nextProps.sortAscending;
164+
}
165+
if (JSON.stringify(this.props.getSortData) !== JSON.stringify(nextProps.getSortData)) {
166+
options.getSortData = nextProps.getSortData;
167+
}
152168

153169
if (reload !== this.state.reload) this.setState({ reload });
154-
if (options && this.state.isotope) {
170+
if (Object.keys(options).length && this.state.isotope) {
155171
this.state.isotope.arrange({ ...options });
156-
} else if (options) {
172+
} else if (!Object.keys(options).length) {
157173
this.createIsotope();
158174
}
159175
}
@@ -253,12 +269,12 @@ IsotopeGrid.propTypes = {
253269
md: columnProps,
254270
lg: columnProps,
255271
children: PropTypes.node,
256-
sortBy: PropTypes.string,
257-
sortOrder: PropTypes.string,
272+
sortBy: PropTypes.oneOf(PropTypes.string, PropTypes.arrayOf(PropTypes.string)),
273+
sortAscending: PropTypes.bool,
274+
getSortData: PropTypes.object,
258275
searchTerm: PropTypes.string,
259276
wholeWord: PropTypes.bool,
260277
filterList: PropTypes.arrayOf(PropTypes.func),
261-
category: PropTypes.object,
262278
};
263279

264280
IsotopeGrid.defaultProps = {
@@ -267,10 +283,10 @@ IsotopeGrid.defaultProps = {
267283
sm: 6,
268284
md: 4,
269285
lg: 4,
286+
sortBy: 'original-order',
287+
sortAscending: true,
270288
};
271289

272290
IsotopeGrid.Item = IsotopeItem;
273291

274-
export default connect(state => ({
275-
category: state.visibilityFilter && state.visibilityFilter.category,
276-
}))(IsotopeGrid);
292+
export default IsotopeGrid;

‎src/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import Spinner from './Spinner/Spinner';
77
import TwitterFeed from './TwitterFeed/TwitterFeed';
88
import FilteredTable from './FilteredTable/1/FilteredTable';
99
import FilteredTableV2 from './FilteredTable/2/FilteredTable';
10-
import FilteredIsotope from './FilteredIsotope/FilteredIsotope';
1110
import IsotopeGrid from './IsotopeGrid/IsotopeGrid';
1211
import PasswordValidator from './PasswordValidator/PasswordValidator';
1312
import Draggable, { withContext } from './Draggable/Draggable';
@@ -43,7 +42,6 @@ export {
4342
TwitterFeed,
4443
FilteredTable,
4544
FilteredTableV2,
46-
FilteredIsotope,
4745
IsotopeGrid,
4846
PasswordValidator,
4947
Draggable,

0 commit comments

Comments
 (0)