finished react 10 -- need review on the css
This commit is contained in:
parent
7d7280cf9a
commit
8aa30868ce
34
react/8/pics/src/components/ImageCard.js
Normal file
34
react/8/pics/src/components/ImageCard.js
Normal file
|
@ -0,0 +1,34 @@
|
||||||
|
import React from 'react'
|
||||||
|
|
||||||
|
class ImageCard extends React.Component {
|
||||||
|
constructor(props) {
|
||||||
|
super(props)
|
||||||
|
|
||||||
|
this.state = { spans: 0 }
|
||||||
|
|
||||||
|
this.imageRef = React.createRef()
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
this.imageRef.current.addEventListener('load', this.setSpans)
|
||||||
|
}
|
||||||
|
|
||||||
|
setSpans = () => {
|
||||||
|
const height = this.imageRef.current.clientHeight
|
||||||
|
|
||||||
|
const spans = Math.ceil(height / 150 + 1)
|
||||||
|
|
||||||
|
this.setState({ spans })
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { description, urls } = this.props.image
|
||||||
|
return (
|
||||||
|
<div style={{ gridRowEnd: `span ${this.state.spans}` }}>
|
||||||
|
<img ref={this.imageRef} src={urls.regular} alt={description} />
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ImageCard
|
|
@ -1,11 +1,13 @@
|
||||||
import React from 'react'
|
import React from 'react'
|
||||||
|
import ImageCard from './ImageCard'
|
||||||
|
import './imageList.css'
|
||||||
|
|
||||||
const ImageList = (props) => {
|
const ImageList = (props) => {
|
||||||
const images = props.images.map((image) => {
|
const images = props.images.map((image) => {
|
||||||
return <img key={image.id} src={image.urls.regular} alt={image.description} />
|
return <ImageCard key={image.id} image={image} />
|
||||||
})
|
})
|
||||||
|
|
||||||
return <div>{images}</div>
|
return <div className="image-list">{images}</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
export default ImageList
|
export default ImageList
|
10
react/8/pics/src/components/imageList.css
Normal file
10
react/8/pics/src/components/imageList.css
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
.image-list {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||||
|
grid-gap: 0 10px;
|
||||||
|
grid-auto-rows: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-list img {
|
||||||
|
width: 250px;
|
||||||
|
}
|
Loading…
Reference in a new issue