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");
require("../_commonjsHelpers-72d386ba.js");
var index = require("../index-44e17595.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