Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React, { Component } from 'react';
- import DATA from './data';
- class ProductsWrapper extends Component {
- constructor(props) {
- super(props);
- this.state = {numCol: 5};
- this.renderProducts = this.renderProducts.bind(this);
- this.changeCols = this.changeCols.bind(this);
- }
- componentDidMount(){
- window.addEventListener("resize", this.changeCols);
- this.changeCols();
- }
- componentWillUnmount(){
- window.removeEventListener("resize", this.changeCols);
- }
- changeCols(){
- const width = window.innerWidth;
- if(width < 525) this.setState({numCol: 255});
- }
- renderProducts(n) {
- const numberOfColumns = n;
- const numberOfPiecesInOneColumn = Math.ceil(DATA.length / numberOfColumns);
- const arr = [];
- for(var i = 0; i < numberOfColumns; i++) {
- arr.push(null);
- }
- arr.map((_, j) => {
- const data = [];
- for (let i = 0; i < numberOfPiecesInOneColumn; i++) {
- if (DATA[j + i * numberOfColumns]) {
- data.push(DATA[j + i * numberOfColumns]);
- }
- }
- arr[j] = data;
- });
- const cols = arr.map((d, i) => (
- <div key={`${i}parent`} className="flex-col" style={{ width: `${100/numberOfColumns}%` }}>
- {d.map((k, j) => (
- <div key={`${j}child`} className="product">
- <div className="inner">
- <img src={`${k.imgAddress}`} alt={`${k.imgName}`} />
- <div className="caption">
- <p className="product-name">{k.name}</p>
- <p className="product-author">{k.author}</p>
- <p className="product-location">{k.location}</p>
- </div>
- </div>
- </div>
- ))}
- </div>
- ));
- return cols;
- }
- render() {
- return (
- <div style={{ display: 'flex', padding: '8px', flexDirection: 'row', flexWrap: 'wrap' }}>
- {this.renderProducts(5)}
- </div>
- );
- }
- }
- ProductsWrapper.propTypes = {};
- export default ProductsWrapper;
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement