React Layout Computation

A.React Layout Computation.md

React Layout Computation

ImageList.jsx

import React from 'react';

class ImageCard extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      spans: 0,
      wrapperHeight: 0
    };

    this.imageRef = React.createRef();
  }

  componentDidMount() {
    this.imageRef.current.addEventListener('load', this.setSpans);
  }

  setSpans = () => {
    const height = this.imageRef.current.clientHeight;

    const wrapperHeight = height % 10 === 0 ?
      (Math.floor(height / 10)) * 10 - 10 :
      (Math.floor(height / 10)) * 10;

    const spans = Math.ceil(height / 10);

    this.setState({
      spans,
      wrapperHeight
    });
  };

  render() {
    const { description, urls } = this.props.image;

    return (
      <div style={{ gridRowEnd: `span ${this.state.spans}` }} className={'image__container'}>
        <div style={{ height: `${this.state.wrapperHeight}px` }} className={'wrapper'}>
          <img ref={this.imageRef} alt={description} src={urls.regular} />
        </div>
      </div>
    );
  }
}

export default ImageCard;