Repository: h2oai/wave
File: ui/src/image.tsx (TypeScript)

Code before:
  /** The image MIME subtype. One of `apng`, `bmp`, `gif`, `x-icon`, `jpeg`, `png`, `webp`. Required only if `image` is set. */
  type?: S
  /** Image data, base64-encoded. */
  image?: S
  /** The path or URL or data URL of the image, e.g. `/foo.png` or `http://example.com/foo.png` or `data:image/png;base64,???`. */
  path?: S
  /** The width of the image, e.g. '100px'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** The path or URL or data URL of the high resolution image. It is displayed inside the popup when clicking on the image. This does not replace a `path` property. */
  path_popup?: S
}

export const
  XImage = ({ model: m }: { model: Image }) => {
    const
      { title, type, image, width, path_popup } = m,
      lightboxProps: LightboxProps = { images: [{ title, type, image, path: path_popup }] },
      getImageSrc = ({ type, image, path }: Image) => path
        ? path
        : (image && type)
          ? `data:image/${type};base64,${image}`
          : ''

    return <img className={css.img} alt={title} src={getImageSrc(m)} width={formItemWidth(width)} onClick={path_popup ? () => lightboxB(lightboxProps) : undefined} style={{ cursor: path_popup ? 'pointer' : 'default' }} />

  },
  View = bond(({ name, state, changed }: Model<State>) => {
    const render = () => {
      const { title, type, image, data, path, path_popup } = state
      return (
        <div data-test={name} className={css.card}>
          <Format data={data} format={title} className='wave-s12 wave-w6' />
          <XImage model={{ title, type, image, path, path_popup }} />
        </div >
      )
    }
    return { render, changed }
  })

cards.register('image', View)

Review comment (suggestion):
```suggestion
    const onImgClick = () => {
        if(path_popup) lightboxB({ images: [{ title, type, image, path: path_popup }] })
    }

    return <img className={css.img} alt={title} src={getImageSrc(m)} width={formItemWidth(width)} onClick={onImgClick} style={{ cursor: path_popup ? 'pointer' : 'default' }} />
```

Code after:
  /** The image MIME subtype. One of `apng`, `bmp`, `gif`, `x-icon`, `jpeg`, `png`, `webp`. Required only if `image` is set. */
  type?: S
  /** Image data, base64-encoded. */
  image?: S
  /** The path or URL or data URL of the image, e.g. `/foo.png` or `http://example.com/foo.png` or `data:image/png;base64,???`. */
  path?: S
  /** The width of the image, e.g. '100px'. */
  width?: S
  /** True if the component should be visible. Defaults to True. */
  visible?: B
  /** The path or URL or data URL of the image displayed in the popup after clicking the image. Does not replace the `path` property. */
  path_popup?: S
}

export const
  XImage = ({ model: m }: { model: Image }) => {
    const
      { title, type, image, width, path_popup } = m,
      getImageSrc = ({ type, image, path }: Image) => path
        ? path
        : (image && type)
          ? `data:image/${type};base64,${image}`
          : '',
      onImgClick = () => {
        if (path_popup) lightboxB({ images: [{ title, type, image, path: path_popup }] })
      }

    return <img className={css.img} alt={title} src={getImageSrc(m)} width={formItemWidth(width)} onClick={onImgClick} style={{ cursor: path_popup ? 'pointer' : 'default' }} />

  },
  View = bond(({ name, state, changed }: Model<State>) => {
    const render = () => {
      const { title, type, image, data, path, path_popup } = state
      return (
        <div data-test={name} className={css.card}>
          <Format data={data} format={title} className='wave-s12 wave-w6' />
          <XImage model={{ title, type, image, path, path_popup }} />
        </div >
      )
    }
    return { render, changed }
  })

cards.register('image', View)