zent/table/lib/modules/Td.js

一套前端设计语言和基于React的实现

'use strict';

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

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _helper = require('../helper');

var _helper2 = _interopRequireDefault(_helper);

var _zentCheckbox = require('zent-checkbox');

var _zentCheckbox2 = _interopRequireDefault(_zentCheckbox);

var _assign = require('zent-utils/lodash/assign');

var _assign2 = _interopRequireDefault(_assign);

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

var Td = _react2['default'].createClass({
  displayName: 'Td',
  renderText: function renderText(name, data) {
    return data[name];
  },
  renderContent: function renderContent() {
    var _props = this.props,
        column = _props.column,
        data = _props.data,
        pos = _props.pos;
    var name = column.name,
        bodyRender = column.bodyRender;


    if (typeof bodyRender !== 'undefined') {
      if (typeof bodyRender === 'function') {
        if (bodyRender.prototype && bodyRender.prototype.isReactComponent) {
          var BodyRender = bodyRender;

          return _react2['default'].createElement(BodyRender, {
            data: data,
            name: name,
            pos: pos
          });
        }
        return typeof bodyRender(data, pos) !== 'undefined' ? bodyRender(data, pos) : '';
      }
      return bodyRender;
    }

    return this.renderText(name, data);
  },
  onSelect: function onSelect(e) {
    var isChecked = e.target.checked;
    var _props2 = this.props,
        selection = _props2.selection,
        data = _props2.data,
        rowKey = _props2.rowKey;

    selection.onSelect(data[rowKey], isChecked);
  },
  render: function render() {
    var _props3 = this.props,
        column = _props3.column,
        selection = _props3.selection,
        data = _props3.data,
        rowKey = _props3.rowKey;
    var textAlign = column.textAlign,
        _column$className = column.className,
        className = _column$className === undefined ? 'cell' : _column$className;
    var needSelect = selection.needSelect,
        canSelect = selection.canSelect;

    var self = this;
    var width = _helper2['default'].getCalculatedWidth(column.width);

    if (needSelect) {
      className += ' cell--selection';
    }

    if (column.isMoney) {
      className += ' cell--money';
    }

    var styleObj = {};

    if (width) {
      styleObj = {
        width: width,
        flex: '0 1 auto'
      };
    }

    if (textAlign) {
      if (['left', 'center', 'right'].indexOf(textAlign)) {
        styleObj = (0, _assign2['default'])(styleObj, {
          textAlign: textAlign
        });
      }
    }

    return _react2['default'].createElement(
      'div',
      { className: className, style: styleObj },
      needSelect && _react2['default'].createElement(_zentCheckbox2['default'], {
        className: 'select-check',
        checked: canSelect && selection.selectedRowKeys.indexOf(data[rowKey]) !== -1,
        disabled: !canSelect,
        onChange: self.onSelect
      }),
      this.renderContent()
    );
  }
});

exports['default'] = Td;
module.exports = exports['default'];