import React , { FunctionComponent } from "react" ; import { PropTypesOf } from "coral-framework/types" ; import DecisionHistoryItemContainer from "./DecisionHistoryItemContainer" ; import DecisionList from "./DecisionList" ; import Empty from "./Empty" ; import Main from "./Main" ; import ShowMoreButton from "./ShowMoreButton" ; import Title from "./Title" ; interface Props { actions : Array < { id : string ; } & PropTypesOf < typeof DecisionHistoryItemContainer > [ "action" ] > ; onLoadMore ? : ( ) => void ; hasMore ? : boolean ; disableLoadMore ? : boolean ; onClosePopover : ( ) => void ; } const DecisionHistory = ( props ) => ( < div data - testid = "decisionHistory-container" > < Title /> < Main > < DecisionList > { props . actions . length === 0 && < Empty />} { props . actions . map ( ( action ) => ( < DecisionHistoryItemContainer key = { action . id } action = { action } onClosePopover = { props . onClosePopover } / > ) ) } < /DecisionList> { props . hasMore && ( < ShowMoreButton onClick = { props . onLoadMore } disabled = { props . disableLoadMore } / > ) } < /Main> < /div>); export default DecisionHistory ;