bilingo-ui/eslib/AllocWantedModal/index.js

import { a as _inherits, b as _createClass, c as _defineProperty, d as _classCallCheck, e as _possibleConstructorReturn, f as _getPrototypeOf, j as _assertThisInitialized } from '../_rollupPluginBabelHelpers-bf46fecd.js';
import React from 'react';
import { s as styleInject } from '../style-inject.es-1f59c1d0.js';
import { createPortal } from 'react-dom';
import { i as isBrowser, s as styles$1 } from '../Modal-67d33baf.js';
import { Tooltip, Input, Button, Popover } from 'antd';

var Modal =
/*#__PURE__*/
function (_React$PureComponent) {
  _inherits(Modal, _React$PureComponent);

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

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

  _createClass(Modal, [{
    key: "render",
    value: function render() {
      if (!isBrowser()) return null; // 服务端无需渲染下列代码，渲染也会出错

      var DEFAULT_CONTAINER = document.getElementById('container');
      var _this$props = this.props,
          children = _this$props.children,
          visible = _this$props.visible,
          onCancel = _this$props.onCancel,
          _this$props$container = _this$props.container,
          container = _this$props$container === void 0 ? DEFAULT_CONTAINER : _this$props$container;
      var finalMountContainer = document.body;

      if (!container) {
        if (!DEFAULT_CONTAINER) {
          if (!Modal.hasShowWarning) {
            Modal.hasShowWarning = true;
          }

          finalMountContainer = document.body;
        } else {
          if (!Modal.hasShowWarning) {
            Modal.hasShowWarning = true;
          }

          finalMountContainer = DEFAULT_CONTAINER;
        }
      }

      return visible && createPortal(React.createElement("div", {
        className: styles$1.wrapper
      }, React.createElement("div", {
        className: styles$1.overlay,
        onClick: onCancel
      }), React.createElement("div", {
        className: styles$1.container
      }, children)), finalMountContainer);
    }
  }]);

  return Modal;
}(React.PureComponent);

_defineProperty(Modal, "hasShowWarning", false);

const img = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAACMUlEQVQ4T52Uz4tSURTHPxP9oCkKy0UuIqvZSAsrHHgLEaFSDCJoU0GpQaBgqOCmP6AWKrR5kIELNzZZUUQLlReFFowOboQK2oyLkgExsxqJoprixlx5yXs1dXbvnO/93HPPO+dM8WfbCuwANgNfgA/A0OzIlElgH3AIsBrEl4EXwEvguz4+CdsIHAV2/yVjEX4PVFez/SXXwzYAJ4GdawBJyWfggQTqYSKj/f8AklKR4V1gRcJ2rWY1Zvl8PqumaW8n4YFAwFqpVCb988BzCTsCzMiDDodjut1uX11YWGh4PJ470p/L5ZRIJHI+kUhcU1V1UXfRR+CWhF0ARPHHpqrqbCwWC7darXm32z2Xz+fdoVDobL1ef+z1eu8ZlOO2gIkeChrVKpPJHEylUhd7vd5rm822V9O0it/vf2hS16qAbQfOmBW+3W6HnU6nMhgMlux2+5XRaLRion0iYJuAsJGgWq2e8Pv9x5vN5lOXy6V0Op1XiqLkh8PhNwN9WdbsHLBFL6jVaqc8Hs+xYrE4FwwGnyWTyZl0On2p2+0uKopyo9/vf9XpfwA3JcwNHND/zUajcblUKpWj0WhT+qPRqD2bzUbi8fj1QqHwRgfrA/clbBtwGlgnBRaLZb3Rc0z8j4COfgJmgcP/MQEiw/LkbAqwGCmxMdZq7wDRKmI9/Tbo8ltk6NQ/2YTcAWrA+EeY7TPRewK4B5jWwcRB8Syxy5YmLzGD6XViQuSm/QSINjC0n/ltqZBTCKFgAAAAAElFTkSuQmCC';

var css = ".AllocWantedModal_wantedModalContent__3tJgp {\n  background-color: white;\n  width: 360px;\n  height: 314px;\n  padding: 22px 28px;\n  border-radius: 7px;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_title__31N0x {\n  font-size: 18px;\n  font-weight: 400;\n  text-align: center;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_wantedValueText__39a-6 {\n  color: #565656;\n  margin-top: 48px;\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_wantedInputNumber__2qs1k {\n  margin: 11px auto;\n  text-align: center;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_wantedInputNumber__2qs1k .ant-input {\n  color: #FB4B56;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_wantedValueTipBottom__2JmOx {\n  margin: 0 auto;\n  font-size: 12px;\n  text-align: center;\n  width: 208px;\n  color: #9B9B9B;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_buttonRow__RkN1C {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-top: 23px;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_buttonRow__RkN1C .AllocWantedModal_confirmButton__1oARY {\n  color: white;\n  background-color: #71C135;\n  width: 170px;\n  height: 36px;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_buttonRow__RkN1C .AllocWantedModal_confirmButton__1oARY:hover,\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_buttonRow__RkN1C .AllocWantedModal_confirmButton__1oARY:focus {\n  outline: none;\n  border-color: #8cd158;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_buttonRow__RkN1C .AllocWantedModal_tipsButton__QUN7t {\n  margin-left: 22px;\n  width: 20px;\n}\n.AllocWantedModal_wantedModalContent__3tJgp .AllocWantedModal_buttonRow__RkN1C .AllocWantedModal_tipsButton__QUN7t .schedule {\n  font-size: 18px;\n  cursor: pointer;\n}\n.AllocWantedModal_closeButton__1Os0F {\n  position: absolute;\n  right: 10px;\n  top: 10px;\n  display: block;\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  cursor: pointer;\n}\n.AllocWantedModal_closeButton__1Os0F img {\n  width: 100%;\n  height: 100%;\n}\n.AllocWantedModal_tipsView__3AZ9T h6 {\n  margin: 0;\n  font-size: 12px;\n  line-height: 22px;\n  color: #3D3D3D;\n}\n.AllocWantedModal_tipsView__3AZ9T div {\n  font-size: 12px;\n}\n.AllocWantedModal_outRangeTextTip__3LKBb .ant-tooltip-inner {\n  color: red;\n}\n";
var styles = {"wantedModalContent":"AllocWantedModal_wantedModalContent__3tJgp","title":"AllocWantedModal_title__31N0x","wantedValueText":"AllocWantedModal_wantedValueText__39a-6","wantedInputNumber":"AllocWantedModal_wantedInputNumber__2qs1k","wantedValueTipBottom":"AllocWantedModal_wantedValueTipBottom__2JmOx","buttonRow":"AllocWantedModal_buttonRow__RkN1C","confirmButton":"AllocWantedModal_confirmButton__1oARY","tipsButton":"AllocWantedModal_tipsButton__QUN7t","closeButton":"AllocWantedModal_closeButton__1Os0F","tipsView":"AllocWantedModal_tipsView__3AZ9T","outRangeTextTip":"AllocWantedModal_outRangeTextTip__3LKBb"};
styleInject(css);

var AllocWantedModal =
/*#__PURE__*/
function (_React$Component) {
  _inherits(AllocWantedModal, _React$Component);

  function AllocWantedModal(props) {
    var _this;

    _classCallCheck(this, AllocWantedModal);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(AllocWantedModal).call(this, props));

    _defineProperty(_assertThisInitialized(_this), "ModalInputRef", void 0);

    _defineProperty(_assertThisInitialized(_this), "ModalContentRef", void 0);

    _defineProperty(_assertThisInitialized(_this), "handleSendValueChange", function (v) {
      if (_this.state.outRangeTip) {
        _this.setState({
          outRangeTip: !_this.checkSendValue()
        });
      }

      _this.setState({
        sendValue: v
      });
    });

    _defineProperty(_assertThisInitialized(_this), "checkSendValue", function () {
      var sendValueRange = _this.props.sendValueRange;
      var sendValue = _this.state.sendValue;
      var min = 0;
      var max = Number(_this.props.allocValue);

      if (sendValueRange) {
        min = Number(sendValueRange[0]);
        max = Number(sendValueRange[1]);
      }

      if (sendValue > max) {
        _this.setState({
          // sendValue: max,
          outRangeTip: true
        });

        return false;
      } else if (sendValue < min) {
        _this.setState({
          // sendValue: max,
          outRangeTip: true
        });

        return false;
      }

      return true;
    });

    _defineProperty(_assertThisInitialized(_this), "handleCloseAction", function () {
      _this.setState({
        visible: false,
        sendValue: 0,
        outRangeTip: false
      }, function () {
        _this.props.handleVisibleChange(false);
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleShowAction", function () {
      _this.setState({
        visible: true
      }, function () {
        _this.props.handleVisibleChange(true);
      });
    });

    _defineProperty(_assertThisInitialized(_this), "handleConfirm", function () {
      var sendGiftData = _this.props.sendGiftData;

      var checkResult = _this.checkSendValue();

      if (!checkResult) {
        // 未通过验证
        return null;
      } // 进行分配请求


      Promise.resolve(_this.props.sendRequest({
        business_type: 14,
        // 表示悬赏答案
        ref_id: sendGiftData.answerId.toString(),
        // 对应回答的id
        origin_id: sendGiftData.questionId,
        // 对应问题的id
        to_user: sendGiftData.toUserId,
        // 悬赏给谁
        goods_id: 2,
        // 礼物id 帮币的话为2
        num: Number(_this.state.sendValue) // 礼物数量

      })).then(function (res) {
        console.log("res: ", res);

        if (res) {
          _this.handleCloseAction();
        } else {
          _this.handleCloseAction();
        }
      });
    });

    _defineProperty(_assertThisInitialized(_this), "renderCloseButton", function () {
      return React.createElement("div", {
        role: "button",
        tabIndex: -1,
        className: styles.closeButton,
        onClick: function onClick() {
          _this.handleCloseAction();
        }
      }, React.createElement("img", {
        src: img,
        alt: "close button for send wanted"
      })); // return null;
    });

    _defineProperty(_assertThisInitialized(_this), "renderModalContent", function () {
      return React.createElement("div", {
        className: styles.wantedModalContent,
        ref: _this.ModalContentRef
      }, _this.renderCloseButton(), React.createElement("h4", {
        className: styles.title
      }, "\u5206\u914D\u60AC\u8D4F\u5956\u91D1"), React.createElement("div", {
        className: styles.wantedValueText
      }, "\u5269\u4F59\u53EF\u5206\u914D ".concat(_this.props.allocValue, "\u5143")), React.createElement(Tooltip, {
        visible: _this.state.outRangeTip,
        title: "\u8D85\u8FC7\u8303\u56F4\u503C",
        placement: "bottom",
        overlayClassName: styles.outRangeTextTip,
        getTooltipContainer: function getTooltipContainer() {
          return _this.ModalContentRef && _this.ModalContentRef.current;
        }
      }, React.createElement(Input, {
        ref: _this.ModalInputRef,
        className: styles.wantedInputNumber,
        suffix: "\u5143",
        value: _this.state.sendValue,
        onChange: function onChange(e) {
          return _this.handleSendValueChange(e.target.value);
        },
        onFocus: function onFocus(e) {
          return e.target.setSelectionRange(0, String(_this.state.sendValue).length);
        }
      })), React.createElement("div", {
        className: styles.wantedValueTipBottom
      }, "\u9700\u8981\u5728\u60AC\u8D4F\u65F6\u95F4\u7ED3\u675F\u524D\u5C06\u5956\u91D1\u5206\u914D\u5B8C\u6210, \u5426\u5219\u5C06\u6309\u7167\u89C4\u5219\u81EA\u52A8\u5206\u914D"), React.createElement("div", {
        className: styles.buttonRow
      }, React.createElement("div", {
        className: styles.tipsButton
      }), React.createElement(Button, {
        className: styles.confirmButton,
        onClick: _this.handleConfirm
      }, "\u786E\u8BA4"), React.createElement("div", {
        className: styles.tipsButton
      }, React.createElement(Popover, {
        placement: "bottom",
        trigger: "click",
        getPopupContainer: function getPopupContainer() {
          return _this.ModalContentRef && _this.ModalContentRef.current;
        },
        overlayStyle: {
          width: "320px"
        },
        content: React.createElement("div", {
          className: styles.tipsView
        }, React.createElement("h6", null, "1\u3001\u5982\u4F55\u53C2\u4E0E\u60AC\u8D4F\uFF1F"), React.createElement("div", null, "\u60AC\u8D4F\u95EE\u9898\u7686\u6709\u6709\u6548\u671F\uFF0C\u9ED8\u8BA4\u4E3A120\u5C0F\u65F6\uFF085\u5929\uFF09\uFF0C\u5728\u6709\u6548\u671F\u5185\u56DE\u590D\u7684\u7B54\u6848\uFF0C\u624D\u6709\u8D44\u683C\u88AB\u9009\u4E3A\u6700\u4F73\u7B54\u6848\uFF0C\u4EE5\u53CA\u5206\u5F97\u8D4F\u91D1\u3002"), React.createElement("h6", null, "2\u3001\u8D4F\u91D1\u5982\u4F55\u5206\uFF1F"), React.createElement("div", null, "\u60AC\u8D4F\u65F6\u95F4\u7ED3\u675F\u524D\uFF0C\u63D0\u95EE\u8005\u53EF\u968F\u65F6\u9009\u51FA\u6700\u4F18\u7B54\u6848\uFF0C\u5E76\u5BF9\u8D4F\u91D1\u8FDB\u884C\u5206\u914D\uFF0C\u76F4\u81F3\u8D4F\u91D1\u88AB\u5206\u5B8C\u6216\u65F6\u95F4\u5230\u671F\u4E3A\u6B62\u3002\u82E5\u60AC\u8D4F\u65F6\u95F4\u5230\u671F\uFF0C\u60AC\u8D4F\u8005\u4ECD\u672A\u5206\u914D\u8D4F\u91D1\uFF0C\u4E14\u56DE\u7B54\u6570\u5927\u4E8E\u7B49\u4E8E2\uFF0C\u7CFB\u7EDF\u5219\u9ED8\u8BA4\u5C06\u8D4F\u91D1\u5E73\u5206\u7ED9\u70B9\u8D5E\u6570\u524D3\u540D\u7684\u56DE\u7B54\u3002"), React.createElement("h6", null, "3\u3001\u8D4F\u91D1\u80FD\u9000\u6B3E\u5417\uFF1F"), React.createElement("div", null, "\u8D4F\u91D1\u53EA\u4F1A\u5728\u4EE5\u4E0B2\u79CD\u60C5\u51B5\u8FDB\u884C\u9000\u6B3E\uFF1A\u4E00\u3001\u60AC\u8D4F\u65F6\u95F4\u5230\u671F\uFF0C\u56DE\u7B54\u6570\u5C0F\u4E8E2\uFF0C\u8D4F\u91D1\u5C06\u81EA\u52A8\u9000\u8FD8\u81F3\u63D0\u95EE\u8005\u7684\u94B1\u5305\uFF1B\u4E8C\u3001\u60AC\u8D4F\u65F6\u95F4\u5230\u671F\uFF0C\u60AC\u8D4F\u8005\u672A\u5206\u914D\u5B8C\u8D4F\u91D1\uFF0C\u7CFB\u7EDF\u81EA\u52A8\u5C06\u5269\u4F59\u7684\u8D4F\u91D1\u9000\u8FD8\u81F3\u63D0\u95EE\u8005\u7684\u94B1\u5305\u3002"))
      }, React.createElement("i", {
        className: "schedule schedule-icon_rewardtips"
      })))));
    });

    _this.state = {
      visible: false,
      sendValue: 0,
      outRangeTip: false
    };
    _this.ModalContentRef = React.createRef();
    _this.ModalInputRef = React.createRef();
    return _this;
  }

  _createClass(AllocWantedModal, [{
    key: "render",
    value: function render() {
      var _this2 = this;

      var children = this.props.children;
      return React.createElement(React.Fragment, null, React.createElement("div", {
        className: styles.wrapper,
        onClick: function onClick() {
          return _this2.handleShowAction();
        }
      }, children), React.createElement(Modal, {
        visible: this.state.visible,
        onCancel: function onCancel() {
          return _this2.handleCloseAction();
        }
      }, this.renderModalContent()));
    }
  }]);

  return AllocWantedModal;
}(React.Component);

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