@beisen-phoenix/lookup/lib/components/advancedCmpt/SelectedPanel.js

---

import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import React from 'react';
import './selectedPanel.css';
import Tag from './Tag';
import utils from '@beisen-phoenix/common-utils';
var classes = utils.BEMClass('lookup');

var SelectedPanel =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(SelectedPanel, _React$PureComponent);

  function SelectedPanel() {
    _classCallCheck(this, SelectedPanel);

    return _possibleConstructorReturn(this, _getPrototypeOf(SelectedPanel).apply(this, arguments));
  }

  _createClass(SelectedPanel, [{
    key: "componentDidUpdate",
    value: function componentDidUpdate(prevProps, prevState) {
      var _this$props$data = this.props.data,
          data = _this$props$data === void 0 ? [] : _this$props$data;

      if (data.length > prevProps.data.length) {
        var tagsWrp = document.querySelector('.phoenix-lookup__tagsWrapper');

        if (tagsWrp) {
          tagsWrp.scrollTop = tagsWrp.scrollHeight;
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          translation = _this$props.translation,
          _this$props$data2 = _this$props.data,
          data = _this$props$data2 === void 0 ? [] : _this$props$data2,
          onClearAll = _this$props.onClearAll,
          onClearItem = _this$props.onClearItem,
          maxSize = _this$props.maxSize;
      return React.createElement("div", {
        className: classes({
          element: 'selectedWrapper'
        })
      }, React.createElement("div", {
        className: classes({
          element: 'selectedInfo'
        })
      }, React.createElement("span", null, "".concat(translation.selected)), React.createElement("span", {
        className: classes({
          element: 'selectedTotal'
        })
      }, data.length), maxSize ? React.createElement("span", {
        className: classes({
          element: 'selectedLimit'
        })
      }, "/", maxSize) : null, React.createElement("span", {
        onClick: onClearAll,
        className: classes({
          element: 'clearSelected',
          modifiers: {
            active: data.length > 0
          }
        })
      }, translation.clearSelected)), React.createElement("div", {
        className: classes({
          element: 'tagsWrapper'
        })
      }, data && data.length > 0 ? data.map(function (item, index) {
        return React.createElement(Tag, {
          item: item,
          key: index,
          extraCls: classes({
            element: 'tagItem'
          }),
          onClear: onClearItem
        });
      }) : React.createElement("div", {
        className: classes({
          element: 'emptyMsg'
        })
      }, translation.emptyMsg)));
    }
  }]);

  return SelectedPanel;
}(React.PureComponent);

SelectedPanel.defaultProps = {
  translation: {
    clearSelected: "清空已选",
    selected: "已选",
    emptyMsg: "请在左侧选择内容"
  }
};
export { SelectedPanel as default };