apeman-react-list/lib/ap_list_style.jsx

apeman react package for list component.

/**
 * Style for ApList.
 * @class ApListStyle
 */

'use strict'

import React, {PropTypes as types} from 'react'
import {ApStyle} from 'apeman-react-style'

/** @lends ApListStyle */
const ApListStyle = React.createClass({
  propTypes: {
    style: types.object
  },
  getDefaultProps () {
    return {
      style: {},
      borderColor: '#EEE',
      backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR,
      headerColor: ApStyle.CAPTION_COLOR,
      headerBorderColor: ApStyle.CAPTION_BORDER_COLOR,
      rowHeight: ApStyle.ROW_HEIGHT
    }
  },
  statics: {
    styleData (config) {
      let {
        rowHeight,
        borderColor,
        backgroundColor,
        headerColor,
        headerBorderColor
      } = config
      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: `${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: `${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 () {
    const s = this
    let { props } = s

    let { all, small, medium, large } = ApListStyle.styleData(props)

    return (
      <ApStyle data={ Object.assign(all, props.style) }
               smallMediaData={ small }
               mediumMediaData={ medium }
               largeMediaData={ large }
      >{ props.children }</ApStyle>
    )
  }
})

export default ApListStyle