apeman-react-button
Version:
apeman react package for button component.
194 lines (186 loc) • 6.65 kB
JSX
/**
* Style for ApButton.
* @constructor ApButtonStyle
*/
"use strict";
import React, {PropTypes as types} from 'react';
import {ApStyle} from 'apeman-react-style';
/** @lends ApButtonStyle */
let ApButtonStyle = React.createClass({
propTypes: {
scope: types.bool,
style: types.object,
highlightColor: types.string,
backgroundColor: types.string,
dangerColor: types.string,
disabledColor: types.string
},
getDefaultProps() {
return {
scope: false,
style: {},
highlightColor: ApStyle.DEFAULT_HIGHLIGHT_COLOR,
backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR,
dangerColor: ApStyle.DEFAULT_DANGER_COLOR,
disabledColor: '#AAA'
}
},
render() {
let s = this,
props = s.props;
let {highlightColor,
backgroundColor,
dangerColor,
disabledColor} = props;
let data = {
'.ap-button': {
display: `inline-block`,
boxSizing: `border-box`,
padding: `0.5em 1em`,
borderRadius: `2px`,
margin: `4px`,
color: `${highlightColor}`,
border: `1px solid ${highlightColor}`,
background: `${backgroundColor}`,
WebkitUserSelect: `none`,
MozUserSelect: `none`,
MsUserSelect: `none`,
UserSelect: `none`
},
'.ap-big-button': {
borderRadius: `50%`,
display: `inline-flex`,
alignItems: `center`,
justifyContent: `center`,
borderWidth: `4px`,
padding: 0,
boxShadow: `2px 2px 4px rgba(0,0,0,0.2)`
},
'.ap-big-button:active': {
boxShadow: `none`
},
'.ap-button > *': {
pointerEvents: `none`
},
'.ap-button:hover': {
cursor: `pointer`,
opacity: 0.9
},
'.ap-button:active': {
boxShadow: `1px 1px 2px rgba(0,0,0,0.1) inset`,
opacity: 0.8
},
'.ap-button.ap-button-disabled,.ap-button.ap-button-disabled:hover,.ap-button.ap-button-disabled:active': {
cursor: `default`,
boxShadow: `none`,
color: `${disabledColor}`,
borderColor: `${disabledColor}`,
backgroundColor: `#F0F0F0`
},
'.ap-button-primary': {
color: `white`,
background: `${highlightColor}`
},
'.ap-button-danger': {
color: `white`,
background: `${dangerColor}`
},
'.ap-button-wide': {
width: `100%`,
boxSizing: `border-box`,
maxWidth: `240px`,
marginLeft: 0,
marginRight: 0
},
'.ap-icon-button': {
textAlign: `center`,
display: `inline-block`
},
'.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: `480px`,
margin: `0 auto`
},
'.ap-icon-button-row .ap-button': {
display: `block`,
width: `100%`
},
'.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: `480px`,
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`
}
},
smallMediaData = {},
mediumMediaData = {},
largeMediaData = {};
return (
<ApStyle scoped={props.scoped}
data={Object.assign(data, props.style)}
smallMediaData={smallMediaData}
mediumMediaData={mediumMediaData}
largeMediaData={largeMediaData}
>{props.children}</ApStyle>
);
}
});
module.exports = ApButtonStyle;