Sha256: d791592b0e1824a45598b707c83a1f719c9e036d4dbcc8e838e9cb0a6142b968

Contents?: true

Size: 1.19 KB

Versions: 6

Compression:

Stored size: 1.19 KB

Contents

/* @flow */

import React from 'react'
import classnames from 'classnames'
import { globalProps } from '../utilities/globalProps.js'
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'

type ImageProps = {
  alt?: string,
  aria?: object,
  className?: string,
  data?: object,
  id?: string,
  onError?: () => {},
  size: "xs" | "sm" | "md" | "lg" | "xl",
  rounded?: boolean,
  transition: "blur" | "fade" | "scale",
  url: string,
}

const Image = (props: ImageProps) => {
  const {
    alt = '',
    aria = {},
    className,
    data = {},
    id,
    onError = null,
    rounded = false,
    size = '',
    transition = 'fade',
    url = '',
  } = props

  const ariaProps = buildAriaProps(aria)
  const classes = classnames(
    buildCss('pb_image_kit', size),
    'lazyload',
    transition,
    { rounded },
    globalProps(props),
    className
  )
  const dataProps = buildDataProps(data)

  return (
    <img
        {...ariaProps}
        {...dataProps}
        alt={alt}
        className={classes}
        data-src={url}
        id={id}
        onError={onError}
        rounded={+rounded}
        src={url}
        transition={transition}
    />
  )
}

export default Image

Version data entries

6 entries across 6 versions & 1 rubygems

Version Path
playbook_ui-10.23.0.pre.cachetest app/pb_kits/playbook/pb_image/_image.jsx
playbook_ui-10.21.0.pre.alpha.rg1 app/pb_kits/playbook/pb_image/_image.jsx
playbook_ui-10.21.0.pre.alpha.jg1 app/pb_kits/playbook/pb_image/_image.jsx
playbook_ui-10.21.0.pre.alpha.na1 app/pb_kits/playbook/pb_image/_image.jsx
playbook_ui-10.20.0 app/pb_kits/playbook/pb_image/_image.jsx
playbook_ui-10.19.0 app/pb_kits/playbook/pb_image/_image.jsx