Sha256: cdb37b19c5f297b0d359a39acdb65c617e4bc279adb48a42453f33cd77acf4dd

Contents?: true

Size: 1.22 KB

Versions: 386

Compression:

Stored size: 1.22 KB

Contents

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

type ImageType = {
  alt?: string,
  aria?: {[key: string]: string},
  className?: string,
  data?: {[key: string]: string},
  id?: string,
  onError?: () => void,
  size?: "xs" | "sm" | "md" | "lg" | "xl",
  rounded?: boolean,
  transition?: "blur" | "fade" | "scale",
  url?: string,
} & GlobalProps

const Image = (props: ImageType): React.ReactElement => {
  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 ? `size_${size}` : null),
    '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}
        src={url}
    />
  )
}

export default Image

Version data entries

386 entries across 386 versions & 1 rubygems

Version Path
playbook_ui-13.11.1.pre.alpha.play900startratingasinput1530 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.12.0 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.11.1 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.11.0 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1051removinghighchartsdependency1465 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.webpackerregistercomponents1463 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.dependabotnpmandyarnfortawesomefontawesomepro6421439 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.play10561428 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.play1054tableheadersortconsolidation1416 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.play10561409 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.dependabotnpmandyarntiptapextensionlink21121407 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21365 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21358 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.play10481357 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.play845addswiftkitspage1332 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.PLAY978alphatesthighcharts41330 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21328 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.PLAY1046multilevelsingleselectphase21323 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0.pre.alpha.play978makehighchartsadevdependencypoc1322 app/pb_kits/playbook/pb_image/_image.tsx
playbook_ui-13.10.0 app/pb_kits/playbook/pb_image/_image.tsx