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

---

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireDefault(require("react"));

require("./selectedPanel.css");

var _Tag = _interopRequireDefault(require("./Tag"));

var _commonUtils = _interopRequireDefault(require("@beisen-phoenix/common-utils"));

var classes = _commonUtils.default.BEMClass('lookup');

var SelectedPanel =
/*#__PURE__*/
function (_React$PureComponent) {
  (0, _inherits2.default)(SelectedPanel, _React$PureComponent);

  function SelectedPanel() {
    (0, _classCallCheck2.default)(this, SelectedPanel);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(SelectedPanel).apply(this, arguments));
  }

  (0, _createClass2.default)(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.default.createElement("div", {
        className: classes({
          element: 'selectedWrapper'
        })
      }, _react.default.createElement("div", {
        className: classes({
          element: 'selectedInfo'
        })
      }, _react.default.createElement("span", null, "".concat(translation.selected)), _react.default.createElement("span", {
        className: classes({
          element: 'selectedTotal'
        })
      }, data.length), maxSize ? _react.default.createElement("span", {
        className: classes({
          element: 'selectedLimit'
        })
      }, "/", maxSize) : null, _react.default.createElement("span", {
        onClick: onClearAll,
        className: classes({
          element: 'clearSelected',
          modifiers: {
            active: data.length > 0
          }
        })
      }, translation.clearSelected)), _react.default.createElement("div", {
        className: classes({
          element: 'tagsWrapper'
        })
      }, data && data.length > 0 ? data.map(function (item, index) {
        return _react.default.createElement(_Tag.default, {
          item: item,
          key: index,
          extraCls: classes({
            element: 'tagItem'
          }),
          onClear: onClearItem
        });
      }) : _react.default.createElement("div", {
        className: classes({
          element: 'emptyMsg'
        })
      }, translation.emptyMsg)));
    }
  }]);
  return SelectedPanel;
}(_react.default.PureComponent);

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