bilingo-ui/lib/ConsumeListView/index.js

'use strict';

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

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var inherits = require('../inherits-c86d64c1.js');
var React = require('react');
var React__default = _interopDefault(React);
var styleInject_es = require('../style-inject.es-dcee06b6.js');
var defineProperty = require('../defineProperty-ba7cd53d.js');
var index = require('../index-4c407188.js');
var utils = require('../utils-b800dc99.js');

var img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAABvklEQVQ4T62UTygEcRTHv29MIsqfk6OL5CYH5aKd9WfjwqxEnBzExYWTCEWJJGove5H8OTA1uwdCrOWAi83ZwUXJiSj5u+Z5s0msmd2SX81h+r33ee/7fW+G8E+H/srhqEcFCjphve1RzcaVK4j3mmoB5YxqQzdOxTji1wE2QZglb2jAEcT7/g4wr0rQugS1OYJ26nOg5nYDr4ZrR7yrl0FBAKBlqjEX3eRLwSXAmidvOJbSI47oF9LVKaCOkNc4/w7kSPOoFBqDwjpp4XA60LUkF8nzbsuERQt4ejtGdsYwiAYTYIV6STOD6UB3EpqXJC0u7zKxz0Mk3Zrj7lOLerJg5T9K+2lWhALiYx8xS9NbDZnUuPXy0wN/hYw3lnbPiNfE7HaSfTAloRqKWkya8WAnMrdmIBqfBqM/BehJAo+gKHMibdMGzUhqKUiZAHGVXJYLwPdpshPnRDRM4fl5+7uKL/0c1WXdOSie5Dh3wZcyoR7SQttO9z+M5MOWEsStFQmsTAoOwVK7qM64d5P6ayKJj9EqHBa5Q4kx2/ujqR1Exnsq493HH2muFN98oNtJ0g7s3Ul5/vwbSab+G+gDqFybE11pYkYAAAAASUVORK5CYII=";

var css = ".ConsumeListView_wrapper__wlJjh {\n  display: flex;\n  justify-content: center;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR {\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  padding-top: 10px;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR li {\n  list-style: none;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR .ConsumeListView_consumeItem__1QGpJ {\n  margin: 0 6px 10px;\n  text-align: center;\n  position: relative;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR .ConsumeListView_consumeItem__1QGpJ .ConsumeListView_kingdomIcon__1nBe5 {\n  position: absolute;\n  width: 24px;\n  height: 22px;\n  left: -6px;\n  top: -12px;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR .ConsumeListView_consumeItem__1QGpJ .ConsumeListView_avatar__1H-E5 {\n  margin: 0 auto 4px;\n  width: 36px;\n  height: 36px;\n  background-size: cover;\n  border-radius: 50%;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR .ConsumeListView_consumeItem__1QGpJ .ConsumeListView_gray__3do1I {\n  color: #9b9b9b;\n  font-size: 12px;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR .ConsumeListView_toggle__3eBTC {\n  margin: 0 6px 10px;\n  width: 36px;\n  height: 36px;\n  line-height: 36px;\n  background-color: #ececec;\n  border-radius: 50%;\n  color: #a8adb6;\n  cursor: pointer;\n  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAACv0lEQVRIS8WXTW8SURSGzzAYNSYCA7SCUEqBioLtohvjD9CN7ozG36AmXfsRafxYN9b+BqNx50r3GjddqEVRRgSRVr4GWmOsERjfOwEzVYa5lAokEwJzznnOe865d+4IxPFRVXVPrVY73Wq1TgmCMIffYbjZ2q4b+E/GfysWi+WZw+F4it+/zMIKvQwAszcajXnYXEIwl1kwdh8JVPC1bLVaF5FE3cjHEFytVs8hyH04jvMAu9gUkexlp9P5uJv/P2DABCi9hbJehUPPinAkpKL8d6H8BpJQ9fbbAjOooigP8H2BIyi3CaAPJUm6qIdvAwN6G0qvcUfswxDK7wB+vePyB9zu6aNdKK9ROioUn+/0XAOz6W02m6kBBolXe1EUxSibdg0MtQn09Sav9yB2UL0A1QmBbQ6VSmWNd50OAu2sc5fL5WVTfAYD9WTQgP34Y9DOClB7D05X+nHcBdslAf19jnKfNAr2cmWVDuzfR7HoFCFTUyaqR8lUhr7/2KITc/Gu9mjrC6a4iLtjRhHfvv9Ea1/L5JLsNBML94Qz6OukTBWlTt5Dbjp2JGgUtsTAW7i713DxqSql0jkqrJfIKdloNhbpCmfQV8k0VZUNOuwZo2gkQFBmFPanKVibRFxpOUefC0VyOmw0E4+QqCt7s8mgH0ipbdKEb5wiIUB7N0UD9yy13l/O5CmbXyfJfpBm49MkihbSoKuA1jdpcsJD4aDfdA5gUDIdrr+jZLIFyuQK5AD8+NEQvXknU63+jUKTPgoGvDxQ1gJtuPpeTkw1U8+mnPU2MuWngN/DBW0bLe14A8mj3x+zX7TS+ryGi6JrMtoGMrItk6VULpcTqPtQHhIQuuB2uxOjfSwy1SM5CHQmYCRHn/azcjSHvQ586Mdb/aIb+oFeD2eHQOxM87j6eoXBBrGMa2evMPoE/sdL22+mI4T0ou1LqAAAAABJRU5ErkJggg==);\n  background-position: center;\n}\n.ConsumeListView_wrapper__wlJjh .ConsumeListView_consumelist__2dMCR .ConsumeListView_toggle__3eBTC.ConsumeListView_expand__3l80q {\n  transform: rotate(180deg);\n}\n";
var styles = {
  "wrapper": "ConsumeListView_wrapper__wlJjh",
  "consumelist": "ConsumeListView_consumelist__2dMCR",
  "consumeItem": "ConsumeListView_consumeItem__1QGpJ",
  "kingdomIcon": "ConsumeListView_kingdomIcon__1nBe5",
  "avatar": "ConsumeListView_avatar__1H-E5",
  "gray": "ConsumeListView_gray__3do1I",
  "toggle": "ConsumeListView_toggle__3eBTC",
  "expand": "ConsumeListView_expand__3l80q"
};
styleInject_es.styleInject(css);

var DEFAULT_AVATAR = '//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg';

var ConsumeListView =
/*#__PURE__*/
function (_Component) {
  inherits._inherits(ConsumeListView, _Component);

  function ConsumeListView() {
    inherits._classCallCheck(this, ConsumeListView);

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

  inherits._createClass(ConsumeListView, [{
    key: "renderConsumeItem",
    value: function renderConsumeItem() {
      var _this$props = this.props,
          dataSource = _this$props.dataSource,
          isToggle = _this$props.isToggle,
          onConsumeItemClick = _this$props.onConsumeItemClick,
          showLength = _this$props.showLength,
          listLength = _this$props.listLength,
          options = _this$props.options;
      var kingdomWidth = options.kingdomWidth,
          kingdomHeight = options.kingdomHeight,
          kingdomPosition = options.kingdomPosition,
          avatarSize = options.avatarSize,
          avatarMarginLeftAndRight = options.avatarMarginLeftAndRight;
      var renderData = dataSource;

      if (!isToggle && listLength > showLength) {
        renderData = dataSource.slice(0, showLength - 1);
      }

      return renderData.map(function (v, i) {
        var kingdom = null;

        if (i === 0) {
          kingdom = React__default.createElement("img", {
            className: styles.kingdomIcon,
            src: img,
            alt: "reward top user",
            style: {
              width: "".concat(kingdomWidth, "px"),
              height: "".concat(kingdomHeight, "px"),
              left: "".concat(kingdomPosition[0], "px"),
              top: "".concat(kingdomPosition[1], "px")
            }
          });
        }

        return React__default.createElement("li", {
          key: v.id,
          className: styles.consumeItem,
          style: {
            margin: "0 ".concat(avatarMarginLeftAndRight, "px 10px")
          }
        }, kingdom, React__default.createElement("div", {
          className: styles.avatar,
          onClick: function onClick(e) {
            return onConsumeItemClick(e, v);
          },
          style: {
            backgroundImage: "url(".concat(utils.addImageProcess(v.user_avatar || DEFAULT_AVATAR, {
              small: true
            }), ")"),
            width: "".concat(avatarSize, "px"),
            height: "".concat(avatarSize, "px")
          }
        }), React__default.createElement("span", {
          className: styles.gray
        }));
      });
    }
  }, {
    key: "renderToggleButton",
    value: function renderToggleButton() {
      var _this$props2 = this.props,
          isToggle = _this$props2.isToggle,
          onToggleChange = _this$props2.onToggleChange,
          listLength = _this$props2.listLength,
          showLength = _this$props2.showLength,
          options = _this$props2.options;
      var avatarSize = options.avatarSize,
          avatarMarginLeftAndRight = options.avatarMarginLeftAndRight;

      if (listLength <= showLength) {
        return null;
      }

      return React__default.createElement("li", {
        onClick: function onClick() {
          return onToggleChange();
        },
        className: index.classnames(styles.toggle, defineProperty._defineProperty({}, styles.expand, isToggle)),
        style: {
          width: "".concat(avatarSize, "px"),
          height: "".concat(avatarSize, "px"),
          lineHeight: "".concat(avatarSize, "px"),
          margin: "0 ".concat(avatarMarginLeftAndRight, "px 10px")
        }
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props3 = this.props,
          showLength = _this$props3.showLength,
          options = _this$props3.options;
      var avatarSize = options.avatarSize,
          avatarMarginLeftAndRight = options.avatarMarginLeftAndRight;
      return React__default.createElement("div", {
        className: styles.wrapper
      }, React__default.createElement("ul", {
        className: styles.consumelist,
        style: {
          width: "calc(".concat(avatarMarginLeftAndRight * 2 + avatarSize, "px * ").concat(showLength, ")")
        }
      }, this.renderConsumeItem(), this.renderToggleButton()));
    }
  }]);

  return ConsumeListView;
}(React.Component);

ConsumeListView.defaultProps = {
  isToggle: false,
  onToggleChange: function onToggleChange() {},
  onConsumeItemClick: function onConsumeItemClick() {},
  dataSource: [],
  listLength: 0,
  showLength: 6,
  options: {
    avatarSize: 36,
    avatarMarginLeftAndRight: 6,
    kingdomWidth: 24,
    kingdomHeight: 22,
    kingdomPosition: [-6, -12]
  }
};

exports.default = ConsumeListView;
//# sourceMappingURL=index.js.map