import * as React from 'react' ; import styled from 'styled-components' ; import { ExpansionButton } from './ExpansionButton' ; import { ArrowExpansionButton } from './ArrowExpansionButton' ; import { IAction , IActionComponent } from '../interface/ListItem' ; import { PrimaryButton } from './PrimaryButton' ; import { ColumnContentAlignment } from '../interface' ; const Container = styled . div `
  background: ${ ( { theme } ) => theme . colors . white };
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 1px;

  @media (max-width: ${ ( { theme } ) => theme . grid . breakpoints . lg }px) {
    margin-left: 0px;
    padding-left: 0px;
  }
` ; const ListItemActionsContainer = styled . div < { alignment ? : ColumnContentAlignment ; } > `
  display: flex;
  flex: 1;
  justify-content: ${ ( { alignment } ) => { if ( alignment === ColumnContentAlignment . LEFT ) { return 'flex-start' ; } else if ( alignment === ColumnContentAlignment . CENTER ) { return alignment ; } else { return 'flex-end' ; } } };
` ; const ListItemSingleAction = styled ( PrimaryButton ) < { isFullHeight ? : boolean ; } > `
  ${ ( { isFullHeight } ) => isFullHeight && ` height: 100%;` }
  max-height: 40px;
  text-transform: capitalize;
` ; const ExpansionSecion = styled ( ExpansionButton ) < { isFullHeight ? : boolean ; } > `
  ${ ( { isFullHeight } ) => isFullHeight && ` height: 100%;` }
` ; const ArrowExpansionSecion = styled ( ArrowExpansionButton ) < { isFullHeight ? : boolean ; } > `
  ${ ( { isFullHeight } ) => isFullHeight && ` height: 100%;` }
` ; interface IListItemActionProps { actions : IAction [ ] ; id ? : string ; expanded ? : boolean ; arrowExpansion ? : boolean ; isFullHeight ? : boolean ; onExpand ? : ( ) => void ; alignment ? : ColumnContentAlignment ; } function isActionComponent ( action ) { return ( action as IActionComponent ) . actionComponent !== undefined ; } export function ListItemAction ( props ) { const { actions , expanded , arrowExpansion , onExpand , id , isFullHeight , alignment } = props ; return ( < Container id = { id } > < ListItemActionsContainer alignment = { alignment } > { actions && actions . map ( ( action ) => isActionComponent ( action ) ? ( React . cloneElement ( action . actionComponent , { id } ) ) : ( < ListItemSingleAction isFullHeight = { isFullHeight } key = { action . label as string } id = { `${ id }-${ action . label as string }` } onClick = { action . handler } icon = { action . icon } > { action . label } < /ListItemSingleAction>))} < /ListItemActionsContainer> { onExpand && ( ( arrowExpansion && ( < ArrowExpansionSecion isFullHeight = { isFullHeight } expanded = { expanded } onClick = { onExpand } / > ) ) || ( < ExpansionSecion isFullHeight = { isFullHeight } expanded = { expanded } onClick = { onExpand } / > ) ) } < /Container>); }