apeman-react-button
Version:
apeman react package for button component.
263 lines (254 loc) • 7.76 kB
JSX
/**
* Style for ApButton.
* @class ApButtonStyle
*/
'use strict'
import React, { PropTypes as types } from 'react'
import { ApStyle } from 'apeman-react-style'
/** @lends ApButtonStyle */
const ApButtonStyle = React.createClass({
propTypes: {
style: types.object,
highlightColor: types.string,
backgroundColor: types.string,
dangerColor: types.string,
disabledColor: types.string
},
getDefaultProps () {
return {
style: {},
highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR,
dangerColor: ApStyle.DEFAULT_DANGER_COLOR,
disabledColor: '#AAA'
}
},
statics: {
styleData (config) {
let {
highlightColor,
backgroundColor,
dangerColor,
disabledColor
} = config
return {
all: {
'.ap-button': {
display: 'inline-block',
boxSizing: 'border-box',
padding: '0.5em 1em',
position: 'relative',
textAlign: 'center',
textDecoration: 'none',
borderRadius: '2px',
margin: '4px',
color: `${highlightColor}`,
border: `1px solid ${highlightColor}`,
background: `${backgroundColor}`,
WebkitUserSelect: 'none',
MozUserSelect: 'none',
MsUserSelect: 'none',
UserSelect: 'none',
whiteSpace: 'nowrap'
},
'.ap-big-button': {
borderRadius: '50%',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
borderWidth: '4px',
padding: 0,
textAlign: 'center',
boxShadow: '2px 2px 4px rgba(0,0,0,0.2)',
whiteSpace: 'normal'
},
'.ap-big-button:active': {
boxShadow: 'none'
},
'.ap-big-button .ap-button-spinner': {
borderRadius: '50%'
},
'.ap-button > *': {
pointerEvents: 'none'
},
'.ap-button:hover': {
cursor: 'pointer',
opacity: 0.9,
textDecoration: 'none'
},
'.ap-button:active': {
boxShadow: '1px 1px 2px rgba(0,0,0,0.1) inset',
opacity: 0.8
},
'.ap-button.ap-button-spinning,.ap-button.ap-button-spinning:hover,.ap-button.ap-button-spinning:active': {
cursor: 'default',
boxShadow: 'none',
pointerEvents: 'none',
opacity: 1
},
'.ap-button.ap-button-primary,.ap-button.ap-button-primary:link,.ap-button.ap-button-primary:visited': {
color: 'white',
background: `${highlightColor}`
},
'.ap-button-primary .ap-button-spinner': {
color: `${highlightColor}`
},
'.ap-button.ap-button-danger,.ap-button.ap-button-danger:link,.ap-button.ap-button-danger:visited': {
color: 'white',
background: `${dangerColor}`
},
'.ap-button.ap-button-disabled,.ap-button.ap-button-disabled:link,.ap-button.ap-button-disabled:visited,.ap-button.ap-button-disabled:hover,.ap-button.ap-button-disabled:active': {
cursor: 'default',
boxShadow: 'none',
color: `${disabledColor}`,
borderColor: `${disabledColor}`,
backgroundColor: '#F0F0F0',
pointerEvents: 'none',
opacity: 1
},
'.ap-button-wide': {
width: '100%',
boxSizing: 'border-box',
maxWidth: '240px',
marginLeft: 0,
marginRight: 0
},
'.ap-icon-button': {
textAlign: 'center',
display: 'inline-block',
justifyContent: 'inherit',
flexDirection: 'column',
alignItems: 'center'
},
'.ap-icon-button-simple': {
border: 'none',
background: 'transparent'
},
'.ap-icon-button-simple:active': {
boxShadow: 'none',
opacity: '0.8'
},
'.ap-icon-button-simple .ap-icon-button-icon': {
fontSize: 'inherit'
},
'.ap-icon-button-icon': {
margin: '2px 0',
display: 'block',
fontSize: '2em'
},
'.ap-icon-button-text': {
display: 'block',
fontSize: '0.66em',
padding: '2px 0'
},
'.ap-icon-button-row': {
display: 'flex',
maxWidth: ApStyle.CONTENT_WIDTH,
margin: '0 auto'
},
'.ap-icon-button-row .ap-button': {
display: 'block',
width: '100%',
whiteSpace: 'normal'
},
'.ap-cell-button': {
textAlign: 'center',
background: 'transparent',
lineHeight: '1em',
fontSize: '14px',
margin: 0,
borderRadius: 0,
boxSizing: 'border-box'
},
'.ap-cell-button-aligner': {
opacity: 0,
display: 'inline-block',
width: '1px',
marginRight: '-1px',
boxSizing: 'border-box',
padding: '8px 0',
verticalAlign: 'middle'
},
'.ap-cell-button-text': {
display: 'inline-block',
verticalAlign: 'middle'
},
'.ap-cell-button-row': {
display: 'flex',
maxWidth: ApStyle.CONTENT_WIDTH,
width: '100%',
margin: '8px auto'
},
'.ap-cell-button-row .ap-cell-button': {
borderRightColor: 'transparent',
borderBottomColor: 'transparent',
width: '100%'
},
'.ap-cell-button-row .ap-cell-button:first-child': {
borderLeftColor: 'transparent'
},
'.ap-cell-button-row .ap-button': {
display: 'block',
width: '100%'
},
'.ap-next-button,.ap-prev-button': {
padding: '0.25em 1em'
},
'.ap-next-button-icon': {
marginLeft: '4px',
marginRight: 0
},
'.ap-prev-button-icon': {
marginLeft: 0,
marginRight: '4px'
},
'.ap-button-hidden': {
display: 'none !important'
},
'.ap-button-simple': {
border: 'none',
background: 'transparent'
},
'.ap-button-simple:active': {
boxShadow: 'none',
opacity: '0.8'
},
'.ap-button-group': {
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center'
},
'.ap-button-group-centered': {
textAlign: 'center'
},
'.ap-button-spinner': {
position: 'absolute',
left: 0,
top: 0,
right: 0,
bottom: 0,
zIndex: 8,
background: ApStyle.COVER_BACKGROUND,
color: ApStyle.COVER_COLOR
}
},
small: {},
medium: {},
large: {}
}
}
},
render () {
const s = this
let { props } = s
let { all, small, medium, large } = ApButtonStyle.styleData(props)
return (
<ApStyle data={ Object.assign(all, props.style) }
smallMediaData={ small }
mediumMediaData={ medium }
largeMediaData={ large }
>{ props.children }</ApStyle>
)
}
})
export default ApButtonStyle