jsx import { CSSObject , jsx } from '@emotion/core' ; import { COLOR } from '../Identity' ; import { defaultTransition } from '../Identity/motions' ; import type { Theme } from '../Layout' ; import { Loading } from '../Misc' ; import { TextProps , filterTextProps , textStyle } from '../Text' ; import { filterProps } from '../util' ; export interface ButtonProps < T = HTMLButtonElement > extends TextProps < T > { backgroundColor ? : string ; loadingColor ? : string ; noCapital ? : boolean ; showLoading ? : boolean ; } export const buttonStyle = ( theme , { backgroundColor = COLOR . BLUE , block = false , disabled = false , noCapital = false , bold = true , center = true , color = COLOR . WHITE , fontSize = '16px' , noWrap = true , textTransform = 'none' , truncate = true , ... props } ) => ( { ... textStyle ( theme , { block , bold , center , color , disabled , fontSize , noWrap , textTransform , truncate , ... props , } ) , '&:hover, &:focus' : { backgroundColor : disabled ? backgroundColor : COLOR . shade ( backgroundColor , 0.06 ) , textDecoration : 'none' , } , backgroundColor : backgroundColor , border : 0 , borderRadius : '8px' , cursor : disabled ? 'default' : 'pointer' , display : 'inline-block' , height : '48px' , lineHeight : '48px' , marginBottom : '16px' , maxWidth : '100%' , minWidth : '150px' , opacity : disabled ? 0.56 : 1 , outline : 'none' , padding : '0 32px' , textDecoration : 'none' , touchAction : 'manipulation' , transition : defaultTransition , width : block ? '100%' : 'auto' , } ) ; export const Button = ( { showLoading , children , loadingColor = COLOR . WHITE , ... props } ) => ( < button css = { theme => buttonStyle ( theme , props ) } { ... filterButtonProps ( props ) } > { showLoading ? < Loading size = { 30 } color = { loadingColor } style = { { display : 'flex' , margin : 'auto' } } / > : children } < /button>); export const filterButtonProps = ( props ) => { return filterProps ( filterTextProps ( props ) as ButtonProps , [ 'backgroundColor' , 'noCapital' ] ) ; } ;