apeman-react-list/shim/node/ap_list_item.js

apeman react package for list component.

/**
 * List item component.
 * @class ApListItem
 */

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _apemanReactMixinTouch = require('apeman-react-mixin-touch');

var _ap_list_item_image = require('./ap_list_item_image');

var _ap_list_item_image2 = _interopRequireDefault(_ap_list_item_image);

var _ap_list_item_text = require('./ap_list_item_text');

var _ap_list_item_text2 = _interopRequireDefault(_ap_list_item_text);

var _ap_list_item_arrow_icon = require('./ap_list_item_arrow_icon');

var _ap_list_item_arrow_icon2 = _interopRequireDefault(_ap_list_item_arrow_icon);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/** @lends ApListItem */
var ApListItem = _react2.default.createClass({
  displayName: 'ApListItem',


  // --------------------
  // Specs
  // --------------------

  propTypes: {
    disclosure: _react.PropTypes.bool,
    imgSrc: _react.PropTypes.string,
    imgAlt: _react.PropTypes.string,
    imgWidth: _react.PropTypes.number,
    /** Titlte of item */
    title: _react.PropTypes.string,
    /** Sub titlte of item */
    subTitle: _react.PropTypes.string,
    /** Item height */
    height: _react.PropTypes.number,
    /** Data for events */
    data: _react.PropTypes.object
  },

  mixins: [_apemanReactMixinTouch.ApTouchMixin],

  statics: {},

  getInitialState: function getInitialState() {
    return {};
  },
  getDefaultProps: function getDefaultProps() {
    return {
      disclosure: false,
      imgSrc: null,
      imgAlt: null,
      imgWidth: 72,
      title: null,
      subTitle: null,
      height: 48,
      data: null
    };
  },
  render: function render() {
    var s = this;
    var props = s.props;


    var tappable = !!props.onTap;
    var height = props.height;
    var className = (0, _classnames2.default)('ap-list-item', props.className, {
      'ap-list-item-tappable': tappable
    });
    var style = Object.assign({
      height: height + 'px',
      lineHeight: height + 'px'
    }, props.style);
    return _react2.default.createElement(
      'li',
      { className: className,
        style: style },
      _react2.default.createElement(
        'div',
        { className: 'ap-list-item-inner' },
        _react2.default.createElement(
          'span',
          { className: 'ap-list-item-aligner' },
          ' '
        ),
        s._renderImage(props.imgSrc, props.imgAlt, props.imgWidth),
        s._renderTitle(props.title, props.subTitle),
        props.children,
        s._renderDisclosureIcon(props.disclosure)
      )
    );
  },


  // --------------------
  // For ApTouchMixin
  // --------------------
  getTouchData: function getTouchData() {
    var s = this;
    var props = s.props;

    return props.data;
  },


  // --------------------
  // Private
  // --------------------

  _renderDisclosureIcon: function _renderDisclosureIcon(disclosure) {
    var s = this;
    var props = s.props;

    if (!disclosure) {
      return null;
    }
    var style = {
      lineHeight: props.height + 'px'
    };
    return _react2.default.createElement(_ap_list_item_arrow_icon2.default, { className: 'ap-list-item-disclosure-icon',
      style: style });
  },
  _renderImage: function _renderImage(imgSrc, imgAlt, imgWidth) {
    var s = this;
    var props = s.props;

    if (imgSrc === null) {
      return null;
    }
    return _react2.default.createElement(_ap_list_item_image2.default, { className: 'ap-list-item-sumbnail-image',
      src: imgSrc,
      alt: imgAlt,
      height: props.height,
      width: imgWidth });
  },
  _renderTitle: function _renderTitle(title, subTitle) {
    var s = this;
    var props = s.props;

    if (title === null) {
      return;
    }
    return _react2.default.createElement(
      _ap_list_item_text2.default,
      { className: 'ap-list-item-title-wrap' },
      _react2.default.createElement(
        'span',
        { className: 'ap-list-item-title' },
        title
      ),
      _react2.default.createElement(
        'span',
        { className: 'ap-list-item-sub-title' },
        subTitle
      )
    );
  }
});

exports.default = ApListItem;
//# sourceMappingURL=data:application/json;base64,bnVsbA==