<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/7iomka/pen/wGxzNq?depth=everything&order=popularity&page=67&q=react&show_forks=false" />
<style class="cp-pen-styles">* {
transition: 0.25s ease-in-out all;
}
.PhotoGallery {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.photo-container {
margin: 10px;
position:relative;
animation: fadeUP .5s;
}
.photo-container img {
max-width: 100%;
}
@keyframes fadeUP {
from {top: -40px; opacity:0;}
to {top: 0; opacity:1}
}
.filter-panel {
display: flex;
background: #F8F8F8;
padding: 25px;
justify-content: center;
align-items: center;
box-shadow: 0 3px 10px rgba(0,0,0,.085);
}
.filter-panel a {
display: inline-block;
background: #B677B4;
position: relative;
padding: 10px 25px;
font-size: 25px;
color: white;
border: 1px solid #BB00FF;
margin: 5px 15px;
transition: .25s ease-in;
border-radius: 4px;
font-family: 'Segoe UI','Open Sans', sans-serif;
cursor: pointer;
}
.filter-panel a:hover {
background: #B25DB0;
}
.filter-panel a.active {
top:-8px;
}
.filter-panel a.resetBtn {background: #E55E5C;}
.filter-panel a.resetBtn:hover {
background: #D34A48;
}</style></head><body>
<title>Image filter with React.js (get from jSON)</title>
<link rel="stylesheet" href="css/style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.6.15/browser.js"></script>
</head>
<body>
<div id="main"></div>
</script>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script>
<script >'use strict';
{/* Get an array of photos with parameters */}
var PHOTODATA = [{
id: 1,
category: 'fruits',
imageUrl: 'http://polzavred.ru/wp-content/uploads/klubnika-poleznie-svoistva.jpg'
}, {
id: 2,
category: 'fruits',
imageUrl: 'https://blistogreen.com.ua/180-home_default/grusha-noyabrskaya-11-13-m.jpg'
}, {
id: 3,
category: 'fruits',
imageUrl: 'http://3.imimg.com/data3/RD/MF/MY-8642081/juicy-red-apples-250x250.jpg'
}, {
id: 4,
category: 'vegetables',
imageUrl: 'http://portamur.ru.opt-images.1c-bitrix-cdn.ru/upload/iblock/60f/kartofell.jpg?146035093210522'
}, {
id: 5,
category: 'vegetables',
imageUrl: 'http://www.slim.ru/news_img/2050img2.png'
}, {
id: 6,
category: 'another',
imageUrl: 'http://clodo.infoniac.ru/iblock/9c4/9c4b4b7fa55c63d3e4aea77c3f869565/662156de618b3f2010a499c5947b6b19.jpg'
}];
{/*Create a component of the filter panel*/}
var FilterPanel = React.createClass({
displayName: 'FilterPanel',
render: function render() {
return React.createElement(
'a',
{ onClick: this.props.onClick },
this.props.category
);
}
});
{/*Create a layout component for one photo*/}
var Photo = React.createClass({
displayName: 'Photo',
render: function render() {
return React.createElement(
'div',
{ className: 'photo-container', 'data-category': this.props.category },
React.createElement('img', { src: this.props.imageUrl })
);
}
});
{/*Create a final collection of photos in photoGallery*/}
var PhotoGallery = React.createClass({
displayName: 'PhotoGallery',
getInitialState: function getInitialState() {
return {
displayedCategories: PHOTODATA,
active: false
};
},
toggleActive: function toggleActive() {
this.setState({
active: !this.state.active
});
},
selectCategory: function selectCategory(element) {
console.log('element is: ' + element);
var categoryName = element.toLowerCase();
var displayedCategories = PHOTODATA.filter(function (el) {
var searchValue = el.category.toLowerCase();
return searchValue.indexOf(categoryName) !== -1;
});
this.setState({
displayedCategories: displayedCategories
});
},
resetFilter: function resetFilter(element) {
this.setState({
displayedCategories: PHOTODATA
});
},
render: function render() {
var buttonClass = this.state.active ? 'active' : '';
var categoryToSelect = this.selectCategory;
var getUniqueCategories = [];
PHOTODATA.forEach(function (el) {
if (getUniqueCategories.indexOf(el.category) === -1) getUniqueCategories.push(el.category);
});
return React.createElement(
'div',
{ className: 'overlay-photogallery' },
React.createElement(
'div',
{ className: 'filter-panel' },
getUniqueCategories.map(function (el, i) {
var boundClick = categoryToSelect.bind(null, el);
return React.createElement(FilterPanel, { onClick: boundClick, category: el, key: i });
}),
React.createElement(
'a',
{ className: 'resetBtn', onClick: this.resetFilter },
' Reset Filter '
)
),
React.createElement(
'div',
{ className: 'PhotoGallery' },
this.state.displayedCategories.map(function (el) {
return React.createElement(Photo, { key: el.id, imageUrl: el.imageUrl, category: el.category });
})
)
);
}
});
ReactDOM.render(React.createElement(PhotoGallery, null), document.getElementById('main'));
//# sourceURL=pen.js
</script>
</body></html>
