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, Component } from 'react'
import { ApStyle } from 'apeman-react-style'

/** @lends ApListStyle */
class ApListStyle extends Component {
  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>
    )
  }
}

Object.assign(ApListStyle, {
  propTypes: {
    style: types.object
  },
  defaultProps: {
    style: {},
    borderColor: '#EEE',
    backgroundColor: ApStyle.DEFAULT_BACKGROUND_COLOR,
    headerColor: ApStyle.CAPTION_COLOR,
    headerBorderColor: ApStyle.CAPTION_BORDER_COLOR,
    rowHeight: ApStyle.ROW_HEIGHT
  },
  styleData (config) {
    let {
      rowHeight,
      borderColor,
      backgroundColor,
      headerColor,
      headerBorderColor
    } = config
    let height = 48
    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',
          height: height,
          lineHeight: `${height}px`
        },
        '.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,.ap-list-item-inner:link,.ap-list-item-inner:link:hover,.ap-list-item-inner:link:active': {
          display: 'flex',
          alignContent: 'center',
          alignItems: 'center',
          justifyContent: 'flex-end',
          textDecoration: 'none',
          color: 'inherit'
        },
        '.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',
          display: 'inline-flex',
          justifyContent: 'center',
          alignItems: 'center'
        },
        '.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',
          overflow: 'hidden'
        },
        '.ap-list-item-title': {
          display: 'block',
          lineHeight: 'initial'
        },
        '.ap-list-item-sub-title': {
          display: 'block',
          fontSize: '9px',
          lineHeight: 'initial',
          color: '#AAA',
          whiteSpace: 'nowrap',
          textOverflow: 'ellipsis',
          overflow: 'hidden'
        },
        '.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-item-alt': {
          textAlign: 'center',
          color: '#CCC',
          width: '100%'
        },
        '.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'
        },
        '.ap-list-item-footer': {
          display: 'block',
          padding: '4px 8px',
          fontSize: '12px'
        }
      }
    }
  }
})

export default ApListStyle