apeman-react-list
Version:
apeman react package for list component.
235 lines (220 loc) • 6.65 kB
JavaScript
/**
* Style for ApList.
* @class ApListStyle
*/
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _apemanReactStyle = require('apeman-react-style');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
/** @lends ApListStyle */
var ApListStyle = _react2.default.createClass({
displayName: 'ApListStyle',
propTypes: {
style: _react.PropTypes.object
},
getDefaultProps: function getDefaultProps() {
return {
style: {},
borderColor: '#EEE',
backgroundColor: _apemanReactStyle.ApStyle.DEFAULT_BACKGROUND_COLOR,
headerColor: _apemanReactStyle.ApStyle.CAPTION_COLOR,
headerBorderColor: _apemanReactStyle.ApStyle.CAPTION_BORDER_COLOR,
rowHeight: _apemanReactStyle.ApStyle.ROW_HEIGHT
};
},
statics: {
styleData: function styleData(config) {
var rowHeight = config.rowHeight;
var borderColor = config.borderColor;
var backgroundColor = config.backgroundColor;
var headerColor = config.headerColor;
var headerBorderColor = config.headerBorderColor;
return {
all: {
'.ap-list': {
display: 'block',
padding: 0,
margin: '8px 0',
listStyle: 'none',
position: 'relative',
minHeight: '48px'
},
'.ap-list-spinner': {
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
right: 0,
zIndex: 4,
backgroundColor: '' + _apemanReactStyle.ApStyle.COVER_BACKGROUND
},
'.ap-list-item': {
display: 'block',
borderBottom: '1px solid ' + borderColor,
minHeight: rowHeight + 'px',
padding: '0 4px'
},
'.ap-list-item-tappable': {
cursor: 'pointer'
},
'.ap-list-item-tappable:hover': {
backgroundColor: 'rgba(200,200,200,0.1)'
},
'.ap-list-item-tappable:active': {
opacity: '0.8'
},
'.ap-list-item-inner': {
display: 'flex',
alignContent: 'center',
justifyContent: 'flex-end'
},
'.ap-list-item-icon': {
padding: '0 4px'
},
'.ap-list-item-text': {
display: 'inline-block',
padding: '0 8px',
width: '100%'
},
'.ap-list-item-aligner': {
display: 'inline-block',
opacity: 0,
width: '1px',
overflow: 'hidden',
whiteSpace: 'pre',
color: 'transparent',
verticalAlign: 'middle'
},
'.ap-list-item-arrow-icon': {
color: '#AAA',
fontSize: '24px'
},
'.ap-list-item-sumbnail-image': {
marginLeft: '-4px'
},
'.ap-list-header': {
display: 'block',
fontSize: '9px',
padding: '2px 12px 1px',
verticalAlign: 'middle',
position: 'relative',
borderTop: '1px solid ' + headerBorderColor,
borderBottom: '1px solid ' + headerBorderColor,
marginBottom: '-1px',
color: '' + headerColor,
fontWeight: '100',
background: 'rgba(0, 0, 0, 0.01)'
},
'.ap-list-body': {
display: 'block',
margin: '0 0 -1px',
overflow: 'hidden'
},
'.ap-list-footer': {
display: 'block',
position: 'relative'
},
'.ap-list-footer-spinner': {
position: 'absolute',
left: 0,
top: 0,
bottom: 0,
right: 0,
zIndex: 4,
backgroundColor: '' + _apemanReactStyle.ApStyle.COVER_BACKGROUND
},
'.ap-list-more-button': {
display: 'none',
textAlign: 'center',
padding: '16px 0',
fontSize: '11px',
color: '#888',
background: 'rgba(0, 0, 0, 0.01)',
borderTop: '1px solid ' + borderColor
},
'.ap-list-more-button:hover': {
cursor: 'pointer',
opacity: '0.9'
},
'.ap-list-more-button:active': {
cursor: 'pointer',
opacity: '0.66'
},
'.ap-list-more-button-enabled': {
display: 'block'
},
'.ap-list-item-title-wrap': {
display: 'inline-flex',
justifyContent: 'center',
flexDirection: 'column'
},
'.ap-list-item-title': {
display: 'block',
lineHeight: 'initial'
},
'.ap-list-item-sub-title': {
display: 'block',
fontSize: '9px',
lineHeight: 'initial',
color: '#AAA'
},
'.ap-list-empty .ap-list-body': {
background: '#F5F5F5'
},
'.ap-list-empty .ap-list-alt': {
display: 'block'
},
'.ap-list-alt': {
display: 'none',
textAlign: 'center',
padding: '32px 8px',
color: '#CCC'
},
'.ap-list-bar': {
display: 'flex',
margin: 0,
padding: '0 8px',
background: 'transparent',
justifyContent: 'space-between'
},
'.ap-list-bar .ap-form': {
margin: 0,
display: 'inline-flex',
alignItems: 'center'
},
'.ap-list-bar-message': {
lineHeight: '36px',
fontSize: 'smaller',
display: 'inline-block',
padding: '0 4px',
color: '#888'
}
}
};
}
},
render: function render() {
var s = this;
var props = s.props;
var _ApListStyle$styleDat = ApListStyle.styleData(props);
var all = _ApListStyle$styleDat.all;
var small = _ApListStyle$styleDat.small;
var medium = _ApListStyle$styleDat.medium;
var large = _ApListStyle$styleDat.large;
return _react2.default.createElement(
_apemanReactStyle.ApStyle,
{ data: Object.assign(all, props.style),
smallMediaData: small,
mediumMediaData: medium,
largeMediaData: large
},
props.children
);
}
});
exports.default = ApListStyle;
//# sourceMappingURL=data:application/json;base64,bnVsbA==