dh-c/dist/list/item.js

The front-end development engineers jimberton gulp react component

'use strict';

exports.__esModule = true;

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactDom = require('react-dom');

var _reactDom2 = _interopRequireDefault(_reactDom);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _radio = require('../radio');

var _radio2 = _interopRequireDefault(_radio);

var _index = require('../index.js');

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var ListItem = function (_React$Component) {
  _inherits(ListItem, _React$Component);

  function ListItem(props) {
    _classCallCheck(this, ListItem);

    var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));

    _this.state = {
      selected: false
    };
    _this.handleClick = _this.handleClick.bind(_this);
    _this.handleSuffixClick = _this.handleSuffixClick.bind(_this);
    return _this;
  }

  ListItem.prototype.componentWillMount = function componentWillMount() {};

  ListItem.prototype.componentDidMount = function componentDidMount() {
    var _props = this.props,
        selectedKeys = _props.selectedKeys,
        eventKey = _props.eventKey;

    var selected = selectedKeys.indexOf(eventKey) === -1 ? false : true;
    this.setState({ selected: selected });
  };

  ListItem.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
    var selectedKeys = nextProps.selectedKeys,
        eventKey = nextProps.eventKey;

    var selected = selectedKeys.indexOf(eventKey) === -1 ? false : true;
    this.setState({ selected: selected });
  };

  ListItem.prototype.handleClick = function handleClick() {
    if (this.context.forbid) {
      var _props2 = this.props,
          eventKey = _props2.eventKey,
          onChange = _props2.onChange,
          onClick = _props2.onClick;

      var selected = this.state.selected;
      // 回滚父级元素的Change事件
      if (onChange) {
        onChange(eventKey, !selected);
      }
      if (onClick) {
        onClick(eventKey, !selected);
      }
    }
  };

  ListItem.prototype.handleSuffixClick = function handleSuffixClick() {
    if (this.props.onSuffixClick) {
      this.props.onSuffixClick(this.props.eventKey);
    }
  };

  ListItem.prototype.renderSuffixElement = function renderSuffixElement() {
    var selected = this.state.selected;

    var suffix = this.props.suffix;
    var icon = this.context.icon;
    var otherProps = { onClick: this.handleSuffixClick };
    var element = null;
    if (_react2.default.isValidElement(suffix)) {
      element = suffix;
    } else if (icon && typeof icon === 'string') {
      element = _react2.default.createElement(
        'span',
        _extends({ className: 'dh-list-info' }, otherProps),
        _react2.default.createElement(_index.Icon, { type: icon })
      );
    } else if (typeof icon === 'boolean' && icon) {
      element = _react2.default.createElement(
        'span',
        _extends({ className: 'dh-list-info' }, otherProps),
        _react2.default.createElement(_index.Icon, { type: selected ? 'success' : 'radio' })
      );
    }
    return element;
  };

  ListItem.prototype.render = function render() {
    var _classNames;

    var _props3 = this.props,
        prefix = _props3.prefix,
        suffix = _props3.suffix,
        eventKey = _props3.eventKey;
    var selected = this.state.selected;
    var _context = this.context,
        itemClassName = _context.itemClassName,
        itemStyles = _context.itemStyles;

    var borderStyle = {
      transform: selected ? 'scaleY(1)' : ' scaleY(0)'
    };
    return _react2.default.createElement(
      'li',
      {
        className: (0, _classnames2.default)("dh-list-child", (_classNames = {}, _classNames[itemClassName] = itemClassName, _classNames)),
        style: itemStyles && itemStyles instanceof Object ? _extends({}, itemStyles) : {},
        'data-selected': selected },
      _react2.default.createElement(
        'div',
        { className: 'dh-list-child__inner' },
        prefix ? _react2.default.createElement(
          'div',
          { className: 'dh-list-inner__avatar' },
          prefix
        ) : null,
        _react2.default.createElement(
          'div',
          { className: 'dh-list-inner__title', onClick: this.handleClick },
          this.props.children
        ),
        _react2.default.isValidElement(this.renderSuffixElement()) ? _react2.default.createElement(
          'div',
          { className: 'dh-list-inner__icon' },
          this.renderSuffixElement()
        ) : null
      ),
      typeof this.context.animation === 'boolean' && this.context.animation ? _react2.default.createElement('div', { style: borderStyle, className: 'dh-list-child__border' }) : null
    );
  };

  return ListItem;
}(_react2.default.Component);

ListItem.contextTypes = {
  itemClassName: _propTypes2.default.string, // 子元素的classNames
  itemStyles: _propTypes2.default.object, // 子元素的styles
  animation: _propTypes2.default.bool,
  forbid: _propTypes2.default.bool
};
ListItem.propTypes = {
  prefix: _propTypes2.default.element, // 前缀元素
  suffix: _propTypes2.default.element, // 后缀元素
  eventKey: _propTypes2.default.string, // 标记的key
  selectedKeys: _propTypes2.default.arrayOf(_propTypes2.default.string), // 选中状态
  icon: _propTypes2.default.string };
exports.default = ListItem;