bilingo-ui/eslib/ConsumeListView/index.js

import { a as _inherits, b as _createClass, c as _defineProperty, d as _classCallCheck, e as _possibleConstructorReturn, f as _getPrototypeOf } from '../_rollupPluginBabelHelpers-bf46fecd.js';
import React, { Component } from 'react';
import '../_commonjsHelpers-97e6d7b1.js';
import { c as classnames } from '../index-c9837619.js';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { a as addImageProcess } from '../utils-74f31cae.js';

const 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__28k7D {\n  display: flex;\n  justify-content: center;\n}\n.ConsumeListView_wrapper__28k7D .ConsumeListView_consumelist__2RETd {\n  padding: 0;\n  margin: 0;\n  display: flex;\n  flex-wrap: wrap;\n  padding-top: 10px;\n}\n.ConsumeListView_wrapper__28k7D .ConsumeListView_consumelist__2RETd li {\n  list-style: none;\n}\n.ConsumeListView_wrapper__28k7D .ConsumeListView_consumelist__2RETd .ConsumeListView_consumeItem__bsmS9 {\n  margin: 0 6px 10px;\n  text-align: center;\n  position: relative;\n}\n.ConsumeListView_wrapper__28k7D .ConsumeListView_consumelist__2RETd .ConsumeListView_consumeItem__bsmS9 .ConsumeListView_kingdomIcon__3tTNA {\n  position: absolute;\n  width: 24px;\n  height: 22px;\n  left: -6px;\n  top: -12px;\n}\n.ConsumeListView_wrapper__28k7D .ConsumeListView_consumelist__2RETd .ConsumeListView_consumeItem__bsmS9 .ConsumeListView_avatar__1WsJ3 {\n  margin: 0 auto 4px;\n  width: 36px;\n  height: 36px;\n  background-size: cover;\n  border-radius: 50%;\n}\n.ConsumeListView_wrapper__28k7D .ConsumeListView_consumelist__2RETd .ConsumeListView_consumeItem__bsmS9 .ConsumeListView_gray__oOyJP {\n  color: #9b9b9b;\n  font-size: 12px;\n}\n.ConsumeListView_wrapper__28k7D .ConsumeListView_consumelist__2RETd .ConsumeListView_toggle__2bNE3 {\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__28k7D .ConsumeListView_consumelist__2RETd .ConsumeListView_toggle__2bNE3.ConsumeListView_expand__26ifU {\n  transform: rotate(180deg);\n}\n";
var styles = {"wrapper":"ConsumeListView_wrapper__28k7D","consumelist":"ConsumeListView_consumelist__2RETd","consumeItem":"ConsumeListView_consumeItem__bsmS9","kingdomIcon":"ConsumeListView_kingdomIcon__3tTNA","avatar":"ConsumeListView_avatar__1WsJ3","gray":"ConsumeListView_gray__oOyJP","toggle":"ConsumeListView_toggle__2bNE3","expand":"ConsumeListView_expand__26ifU"};
styleInject(css);

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

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

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

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

  _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.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.createElement("li", {
          key: v.id,
          className: styles.consumeItem,
          style: {
            margin: "0 ".concat(avatarMarginLeftAndRight, "px 10px")
          }
        }, kingdom, React.createElement("div", {
          className: styles.avatar,
          onClick: function onClick(e) {
            return onConsumeItemClick(e, v);
          },
          style: {
            backgroundImage: "url(".concat(addImageProcess(v.user_avatar || DEFAULT_AVATAR, {
              small: true
            }), ")"),
            width: "".concat(avatarSize, "px"),
            height: "".concat(avatarSize, "px")
          }
        }), React.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.createElement("li", {
        onClick: function onClick() {
          return onToggleChange();
        },
        className: classnames(styles.toggle, _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.createElement("div", {
        className: styles.wrapper
      }, React.createElement("ul", {
        className: styles.consumelist,
        style: {
          width: "calc(".concat(avatarMarginLeftAndRight * 2 + avatarSize, "px * ").concat(showLength, ")")
        }
      }, this.renderConsumeItem(), this.renderToggleButton()));
    }
  }]);

  return ConsumeListView;
}(Component);

_defineProperty(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]
  }
});

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