import { keyframes , CSSObject } from '@emotion/core' ; import canvas from '@workday/canvas-kit-react/tokens' ; import { EmotionCanvasTheme , defaultCanvasTheme } from '../theming/index' ; import memoize from 'lodash/memoize' ; interface FocusRingOptions { width ? : number ; separation ? : number ; animate ? : boolean ; /**
     * Specifies where the ring(s) should be attached.
     * - undefined: Both "inner" and "outer" shadows outside the container.
     * - 'inner': "Inner" shadow inset. "Outer" shadow outside the container.
     * - 'outer': Both "inner" and "outer" shadows inside the container.
     */ inset ? : 'inner' | 'outer' ; innerColor ? : string ; outerColor ? : string ; memoize ? : boolean ; } function calculateFocusRing ( { width , separation , animate , inset , innerColor , outerColor , } ) { let boxShadow , innerWidth , outerWidth ; switch ( inset ) { case 'outer' : innerWidth = width + separation ; outerWidth = separation ; boxShadow = `inset 0 0 0 ${ outerWidth }px ${ outerColor }, inset 0 0 0 ${ innerWidth }px ${ innerColor }` ; break ; case 'inner' : innerWidth = separation ; outerWidth = width ; boxShadow = `inset 0 0 0 ${ innerWidth }px ${ innerColor }, 0 0 0 ${ outerWidth }px ${ outerColor }` ; break ; default : innerWidth = separation ; outerWidth = width + separation ; boxShadow = `0 0 0 ${ innerWidth }px ${ innerColor }, 0 0 0 ${ outerWidth }px ${ outerColor }` ; break ; } if ( animate ) { const fadeIn = keyframes ( { '0%' : { boxShadow } , '100%' : { boxShadow } , } ) ; return { animation : `${ fadeIn } 100ms` , boxShadow } ; } return { boxShadow } ; } export const memoizedFocusRing = memoize ( calculateFocusRing , ( ... args ) => JSON . stringify ( args ) ) ; param width param separation param animate param inset param innerShadowColor param outerShadowColor returns { CSSObject } returns { CSSObject } export function focusRing ( options = { } , theme ? ) { const { width = 2 , separation = 0 , animate = true , innerColor = canvas . colors . frenchVanilla100 , outerColor = theme && theme . canvas ? theme . canvas . palette . common . focusOutline : defaultCanvasTheme . palette . common . focusOutline , memoize = true , inset , } = options ; const args = { width : width , separation : separation , innerColor : innerColor , outerColor : outerColor , animate , inset , } ; if ( memoize ) { return memoizedFocusRing ( args ) ; } return calculateFocusRing ( args ) ; }