import { Breakpoints , breakpointsOrder , ThemeInterface } from '@bigcommerce/big-design-theme' ; import { css , FlattenSimpleInterpolation } from 'styled-components' ; import { TableColumnDisplayOverload , TableColumnDisplayProps } from './types' ; export const withTableColumnDisplay = ( ) => css < TableColumnDisplayProps > `
  ${ ( { display , theme } ) => display && getDisplayStyles ( display , theme , 'display' ) };
` ; const getDisplayStyles = ( displayProp , theme , cssKey ) : FlattenSimpleInterpolation => { if ( typeof displayProp === 'object' ) { return getResponsiveDisplay ( displayProp , theme , cssKey ) ; } if ( typeof displayProp === 'string' || typeof displayProp === 'number' ) { return getSimpleDisplay ( displayProp , cssKey ) ; } return [ ] ; } ; const getSimpleDisplay = ( displayProp , cssKey ) : FlattenSimpleInterpolation => css `
  ${ cssKey }: ${ displayProp }
` ; const getResponsiveDisplay = ( displayProp , theme , cssKey ) : FlattenSimpleInterpolation [ ] => { const breakpointKeys = Object . keys ( displayProp ) . sort ( ( firstBreakpoint , secondBreakpoint ) => breakpointsOrder . indexOf ( firstBreakpoint as keyof Breakpoints ) - breakpointsOrder . indexOf ( secondBreakpoint as keyof Breakpoints ) ) ; return ( breakpointKeys as Array < keyof Breakpoints > ) . map ( ( breakpointKey ) => css `
        ${ theme . breakpoints [ breakpointKey ] } {
          ${ getSimpleDisplay ( displayProp [ breakpointKey ] , cssKey ) }
        }
      ` ) ; } ;