Gallery.js 799 B

12345678910111213141516171819202122232425262728293031323334353637
  1. import styled from 'styled-components'
  2. const GalleryStyle = styled.div`
  3. border: 1px solid grey;
  4. #header {
  5. padding: 0 0.3em;
  6. background: lightgray;
  7. cursor: pointer
  8. }
  9. `
  10. class Gallery extends React.Component {
  11. state = {
  12. galleryOpen: false
  13. }
  14. openGallery = event => {
  15. this.setState({ galleryOpen: !this.state.galleryOpen })
  16. }
  17. render() {
  18. const { items, title } = this.props
  19. return (
  20. <GalleryStyle>
  21. <div onClick={this.openGallery} id="header">
  22. &#8227; {items.length} {title} available (click to {this.state.galleryOpen ? 'hide' : 'see'})
  23. </div>
  24. <div style={{ display: this.state.galleryOpen ? 'block' : 'none' }} id="gallery">
  25. {items}
  26. </div>
  27. </GalleryStyle>
  28. )
  29. }
  30. }
  31. export default Gallery