No Description

index.js 8.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167
  1. import { a as _inherits, b as _classCallCheck, c as _possibleConstructorReturn, d as _getPrototypeOf, e as _createClass } from '../inherits-6cb67931.js';
  2. import React, { Component } from 'react';
  3. import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
  4. import { _ as _defineProperty } from '../defineProperty-18999f8e.js';
  5. import '../_commonjsHelpers-97e6d7b1.js';
  6. import { c as classnames } from '../index-c9837619.js';
  7. import { a as addImageProcess } from '../utils-6b513b37.js';
  8. 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=";
  9. 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";
  10. var styles = {
  11. "wrapper": "ConsumeListView_wrapper__wlJjh",
  12. "consumelist": "ConsumeListView_consumelist__2dMCR",
  13. "consumeItem": "ConsumeListView_consumeItem__1QGpJ",
  14. "kingdomIcon": "ConsumeListView_kingdomIcon__1nBe5",
  15. "avatar": "ConsumeListView_avatar__1H-E5",
  16. "gray": "ConsumeListView_gray__3do1I",
  17. "toggle": "ConsumeListView_toggle__3eBTC",
  18. "expand": "ConsumeListView_expand__3l80q"
  19. };
  20. styleInject(css);
  21. var DEFAULT_AVATAR = '//links-comment.oss-cn-beijing.aliyuncs.com/comment/20180820/Kgka4_oU1.jpeg';
  22. var ConsumeListView =
  23. /*#__PURE__*/
  24. function (_Component) {
  25. _inherits(ConsumeListView, _Component);
  26. function ConsumeListView() {
  27. _classCallCheck(this, ConsumeListView);
  28. return _possibleConstructorReturn(this, _getPrototypeOf(ConsumeListView).apply(this, arguments));
  29. }
  30. _createClass(ConsumeListView, [{
  31. key: "renderConsumeItem",
  32. value: function renderConsumeItem() {
  33. var _this$props = this.props,
  34. dataSource = _this$props.dataSource,
  35. isToggle = _this$props.isToggle,
  36. onConsumeItemClick = _this$props.onConsumeItemClick,
  37. showLength = _this$props.showLength,
  38. listLength = _this$props.listLength,
  39. options = _this$props.options;
  40. var kingdomWidth = options.kingdomWidth,
  41. kingdomHeight = options.kingdomHeight,
  42. kingdomPosition = options.kingdomPosition,
  43. avatarSize = options.avatarSize,
  44. avatarMarginLeftAndRight = options.avatarMarginLeftAndRight;
  45. var renderData = dataSource;
  46. if (!isToggle && listLength > showLength) {
  47. renderData = dataSource.slice(0, showLength - 1);
  48. }
  49. return renderData.map(function (v, i) {
  50. var kingdom = null;
  51. if (i === 0) {
  52. kingdom = React.createElement("img", {
  53. className: styles.kingdomIcon,
  54. src: img,
  55. alt: "reward top user",
  56. style: {
  57. width: "".concat(kingdomWidth, "px"),
  58. height: "".concat(kingdomHeight, "px"),
  59. left: "".concat(kingdomPosition[0], "px"),
  60. top: "".concat(kingdomPosition[1], "px")
  61. }
  62. });
  63. }
  64. return React.createElement("li", {
  65. key: v.id,
  66. className: styles.consumeItem,
  67. style: {
  68. margin: "0 ".concat(avatarMarginLeftAndRight, "px 10px")
  69. }
  70. }, kingdom, React.createElement("div", {
  71. className: styles.avatar,
  72. onClick: function onClick(e) {
  73. return onConsumeItemClick(e, v);
  74. },
  75. style: {
  76. backgroundImage: "url(".concat(addImageProcess(v.user_avatar || DEFAULT_AVATAR, {
  77. small: true
  78. }), ")"),
  79. width: "".concat(avatarSize, "px"),
  80. height: "".concat(avatarSize, "px")
  81. }
  82. }), React.createElement("span", {
  83. className: styles.gray
  84. }));
  85. });
  86. }
  87. }, {
  88. key: "renderToggleButton",
  89. value: function renderToggleButton() {
  90. var _this$props2 = this.props,
  91. isToggle = _this$props2.isToggle,
  92. onToggleChange = _this$props2.onToggleChange,
  93. listLength = _this$props2.listLength,
  94. showLength = _this$props2.showLength,
  95. options = _this$props2.options;
  96. var avatarSize = options.avatarSize,
  97. avatarMarginLeftAndRight = options.avatarMarginLeftAndRight;
  98. if (listLength <= showLength) {
  99. return null;
  100. }
  101. return React.createElement("li", {
  102. onClick: function onClick() {
  103. return onToggleChange();
  104. },
  105. className: classnames(styles.toggle, _defineProperty({}, styles.expand, isToggle)),
  106. style: {
  107. width: "".concat(avatarSize, "px"),
  108. height: "".concat(avatarSize, "px"),
  109. lineHeight: "".concat(avatarSize, "px"),
  110. margin: "0 ".concat(avatarMarginLeftAndRight, "px 10px")
  111. }
  112. });
  113. }
  114. }, {
  115. key: "render",
  116. value: function render() {
  117. var _this$props3 = this.props,
  118. showLength = _this$props3.showLength,
  119. options = _this$props3.options;
  120. var avatarSize = options.avatarSize,
  121. avatarMarginLeftAndRight = options.avatarMarginLeftAndRight;
  122. return React.createElement("div", {
  123. className: styles.wrapper
  124. }, React.createElement("ul", {
  125. className: styles.consumelist,
  126. style: {
  127. width: "calc(".concat(avatarMarginLeftAndRight * 2 + avatarSize, "px * ").concat(showLength, ")")
  128. }
  129. }, this.renderConsumeItem(), this.renderToggleButton()));
  130. }
  131. }]);
  132. return ConsumeListView;
  133. }(Component);
  134. ConsumeListView.defaultProps = {
  135. isToggle: false,
  136. onToggleChange: function onToggleChange() {},
  137. onConsumeItemClick: function onConsumeItemClick() {},
  138. dataSource: [],
  139. listLength: 0,
  140. showLength: 6,
  141. options: {
  142. avatarSize: 36,
  143. avatarMarginLeftAndRight: 6,
  144. kingdomWidth: 24,
  145. kingdomHeight: 22,
  146. kingdomPosition: [-6, -12]
  147. }
  148. };
  149. export default ConsumeListView;
  150. //# sourceMappingURL=index.js.map