import * as React from 'react' ; import { CanvasGraphic , CanvasIconTypes } from '@workday/design-assets-types' ; import { CSSObject } from '@emotion/core' ; import Svg , { SvgProps } from './Svg' ; export interface GraphicStyles { default width ? : number | string ; default height ? : number | string ; default grow ? : boolean ; } export interface GraphicProps extends GraphicStyles , Pick < SvgProps , 'iconRef' | 'shouldMirror' > { /**
     * The graphic to display from `@workday/canvas-graphics-web`.
     */ src : CanvasGraphic ; } export const graphicStyles = ( { width , height , grow } ) : CSSObject => { if ( grow ) { return { width : '100%' , '& svg' : { width : '100%' , height : '100%' , } , } ; } if ( width ) { return { '& svg' : { width , height : '100%' , } , } ; } else if ( height ) { return { '& svg' : { height , width : '100%' , } , } ; } return { } ; } ; export default class Graphic extends React . Component < GraphicProps > { render ( ) { const { grow = false , src , width , height , iconRef , shouldMirror , ... elemProps } = this . props ; return ( < Svg src = { src } styles = { graphicStyles ( { width , height , grow } ) } type = { CanvasIconTypes . Graphic } iconRef = { iconRef } shouldMirror = { shouldMirror } { ... elemProps } />); } }