SHARE
TWEET

src/templates/SingleJob/Description.js

dfghgfhplkjbv Feb 20th, 2019 67 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. import React, { Component } from 'react'
  2. import PropTypes from 'prop-types'
  3. import styles from './Description.module.scss'
  4. import posed from 'react-pose'
  5.  
  6. const Content = posed.div({
  7.   closed: { height: '225px' },
  8.   opened: { height: 'auto' },
  9. })
  10.  
  11. class Description extends Component {
  12.   state = { isOpen: false }
  13.  
  14.   toggleDescription = () => {
  15.     this.setState({ isOpen: !this.state.isOpen })
  16.   }
  17.  
  18.   render() {
  19.     const { title, company, content } = this.props
  20.     return (
  21.  
  22.       <div className={styles.root}>
  23.         <h1 className={styles.title}>{title}</h1>
  24.         <div className={styles.companyData}>
  25.           <span className={styles.company}>{company}</span>
  26.         </div>
  27.         <Content className={styles.content} pose={this.state.isOpen ? 'opened' : 'closed'}>
  28.           {content}
  29.           {!this.state.isOpen && <div className={styles.gradient} />}
  30.         </Content>
  31.         <button onClick={this.toggleDescription} className={styles.showMore}>
  32.           {!this.state.isOpen ? 'Read full job description' : 'Show less'}
  33.         </button>
  34.       </div>
  35.     )
  36.   }
  37. }
  38.  
  39. Description.propTypes = {
  40.   title: PropTypes.string,
  41.   url: PropTypes.string,
  42. }
  43.  
  44. export default Description
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top