gab-social/app/javascript/gabsocial/components/toast.js

import React from 'react'
import PropTypes from 'prop-types'
import {
  CX,
  TOAST_TYPE_ERROR,
  TOAST_TYPE_SUCCESS,
  // TOAST_TYPE_NOTIFICATION,
} from '../constants'
import Button from './button'
import Image from './image'
import RelativeTimestamp from './relative_timestamp'
import Text from './text'

class Toast extends React.PureComponent {

  componentDidMount() {
    this._timer = setTimeout(() => {
      this.handleOnDismiss()
    }, 5000)
  }

  componentWillUnmount() {
    clearTimeout(this._timer)
  }

  handleOnDismiss = () => {
    this.props.onDismiss(this.props.id)
  }

  render() {
    const {
      image,
      isImageAccount,
      title,
      message,
      date,
      to,
    } = this.props

    const containerClasses = CX({
      d: 1,
      radiusSmall: 1,
      w228PX: 1,
      mt5: 1,
      mb5: 1,
      px15: 1,
      pt10: 1,
      pb15: !!title,
      pb10: !title,
      bgToast: 1,
      boxShadowToast: 1,
    })

    const contentClasses = CX({
      d: 1,
      mt5: !!title,
      pt2: !!title,
      flexRow: !!image,
    })

    const innerContentClasses = CX({
      d: 1,
      flexNormal: 1,
      pl10: !!image,
      pt2: !!image,
      displayInline: !!date && !image,
    })

    const imageClasses = CX({
      radiusSmall: !isImageAccount,
      circle: isImageAccount,
    })

    const dateClasses = CX({
      mr5: 1,
      mt2: !!image,
    })

    return (
      <div className={containerClasses}>
        <div className={[_s.default, _s.flexRow, _s.alignItemsCenter, _s.justifyContentCenter].join(' ')}>
          <Text size='medium' color='alt' weight='bold'>
            {title}
          </Text>
        </div>
        <div className={contentClasses}>
          {
            !!image &&
            <Image
              src={image}
              className={imageClasses}
              height='52px'
              width='52px'
            />
          }
          <div className={innerContentClasses}>
            <Text size='small' color='alt'>
              {message}
            </Text>
            {
              date &&
              <Text color='tertiary' size='extraSmall' className={dateClasses}>
                {
                  !image &&
                  <Text size='small' color='tertiary' className={[_s.ml5, _s.mr5].join(' ')}>·</Text>
                }
                <RelativeTimestamp timestamp={date} />
              </Text>
              }
          </div>
        </div>
      </div>
    )
  }

}

Toast.propTypes = {
  date: PropTypes.string.isRequired,
  image: PropTypes.string,
  isImageAccount: PropTypes.bool,
  id: PropTypes.string.isRequired,
  message: PropTypes.string.isRequired,
  onDismiss: PropTypes.func.isRequired,
  title: PropTypes.string.isRequired,
  to: PropTypes.string,
}

export default Toast