import React from 'react' ; import { Box } from 'design' ; import ButtonSso , { guessProviderType } from 'shared/components/ButtonSso' ; import { AuthProvider } from 'shared/services' ; const SSOBtnList = ( { providers , prefixText , isDisabled , onClick } ) => { const $btns = providers . map ( ( item , index ) => { let { name , type , displayName } = item ; const title = displayName || `${ prefixText } ${ name }` ; const ssoType = guessProviderType ( title , type ) ; return ( < ButtonSso key = { index } title = { title } ssoType = { ssoType } disabled = { isDisabled } mt = { 3 } onClick = { e => { e . preventDefault ( ) ; onClick ( item ) ; } } />); } ) ; if ( $btns . length === 0 ) { return < h4 > You have no SSO providers configured < /h4>; } return ( < Box px = { 6 } pt = { 2 } pb = { 5 } > { $btns } < /Box>); } ; type Props = { prefixText : string ; isDisabled : boolean ; onClick ( provider ) : void ; providers : AuthProvider [ ] ; } ; export default SSOBtnList ;