kitten-components/assets/javascripts/kitten/components/cards/reward-card/image.js

Front-end components library

import React, { Component, Fragment } from 'react'
import Radium from 'radium'
import PropTypes from 'prop-types'
import { styles } from 'kitten/components/cards/reward-card'
import { Deprecated } from 'kitten/helpers/utils/deprecated'

const RewardCardImageBase = ({ isDisabled, imageProps }) => {
  const imageStyles = [isDisabled && styles.disabled]
  const shouldDisplayImage = imageProps && imageProps.src

  if (!shouldDisplayImage) return null

  return (
    <Deprecated warningMessage="Please use RewardCard sub-component to make your composition. You can check some examples on https://kisskissbankbank.github.io/kitten/">
      <div style={imageStyles} disabled={isDisabled}>
        <img {...imageProps} alt={imageProps.alt || ''} style={styles.image} />
      </div>
    </Deprecated>
  )
}

RewardCardImageBase.propTypes = {
  isDisabled: PropTypes.bool,
  imageProps: PropTypes.object,
}

RewardCardImageBase.defaultProps = {
  isDisabled: false,
  imageProps: {},
}

export const RewardCardImage = Radium(RewardCardImageBase)