jc-biz-components/lib/jc-display-item/index.js

jc component library based on Antd

'use strict';

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

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _tooltip = require('antd/lib/tooltip');

var _tooltip2 = _interopRequireDefault(_tooltip);

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _form = require('antd/lib/form');

var _form2 = _interopRequireDefault(_form);

require('antd/lib/tooltip/style');

require('antd/lib/form/style');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _lang = require('../jc-_utils/lang');

require('./style');

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

var FormItem = _form2['default'].Item;

// todo text 支持所有类型，media.eg.

var DisplayItem = function (_React$PureComponent) {
  (0, _inherits3['default'])(DisplayItem, _React$PureComponent);

  function DisplayItem() {
    (0, _classCallCheck3['default'])(this, DisplayItem);
    return (0, _possibleConstructorReturn3['default'])(this, (DisplayItem.__proto__ || Object.getPrototypeOf(DisplayItem)).apply(this, arguments));
  }

  (0, _createClass3['default'])(DisplayItem, [{
    key: 'render',
    value: function render() {
      var _classNames;

      var prefixCls = 'jc-display-item';
      var _props = this.props,
          mode = _props.mode,
          text = _props.text,
          children = _props.children,
          labelAlign = _props.labelAlign,
          labelWidth = _props.labelWidth,
          className = _props.className,
          maxLength = _props.maxLength;


      var labelClass = prefixCls + '-label-width-' + labelWidth;

      var classes = (0, _classnames2['default'])(prefixCls, className, labelClass, (_classNames = {}, (0, _defineProperty3['default'])(_classNames, prefixCls + '-label-left', labelAlign === 'left'), (0, _defineProperty3['default'])(_classNames, prefixCls + '-label-right', labelAlign === 'right'), _classNames));

      var renderText = function renderText() {
        if (text && ((0, _lang.isNumber)(text) || (0, _lang.isString)(text))) {
          return _react2['default'].createElement(
            'div',
            { className: prefixCls + '-item-text' },
            text.toString().length < maxLength ? _react2['default'].createElement(
              'span',
              null,
              text
            ) : _react2['default'].createElement(
              _tooltip2['default'],
              { placement: 'topLeft', title: text },
              _react2['default'].createElement(
                'span',
                { style: { cursor: 'pointer' } },
                text && text.toString().substring(0, maxLength),
                '...'
              )
            )
          );
        } else {
          return '';
        }
      };
      return _react2['default'].createElement(
        FormItem,
        (0, _extends3['default'])({ className: classes }, this.props),
        mode === 'view' && renderText(),
        mode === 'edit' && _react2['default'].createElement(
          'div',
          null,
          children
        )
      );
    }
  }]);
  return DisplayItem;
}(_react2['default'].PureComponent);

DisplayItem.defaultProps = {
  mode: 'view', // 模式 view || edit
  labelAlign: 'left', // label对齐 left || right
  // tooltip: false, // text 是否显示tooltip(view下)
  maxLength: 30,
  expand: true, // true 是显示全部文字且显示展开收起
  label: '', // label文字
  text: '', // text <String><Number>
  labelWidth: '5' // label的宽度 支持 4，5，6，7,8
};
exports['default'] = DisplayItem;
module.exports = exports['default'];