bilingo-ui/eslib/AllocWantedModal/index.js

import {
  a as _inherits,
  b as _classCallCheck,
  c as _possibleConstructorReturn,
  d as _getPrototypeOf,
  e as _createClass
} from "../inherits-6cb67931.js";
import React from "react";
import "react-dom";
import { Modal } from "../Modal/index.js";
import { s as styleInject } from "../style-inject.es-1f59c1d0.js";
import { Tooltip, Input, Button, Popover } from "antd";

var 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__1VodF {\n  background-color: white;\n  width: 360px;\n  height: 314px;\n  padding: 22px 28px;\n  border-radius: 7px;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_title__31i9F {\n  font-size: 18px;\n  font-weight: 400;\n  text-align: center;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_wantedValueText___uNQe {\n  color: #565656;\n  margin-top: 48px;\n  font-size: 14px;\n  line-height: 20px;\n  text-align: center;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_wantedInputNumber__3MyO5 {\n  margin: 11px auto;\n  text-align: center;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_wantedInputNumber__3MyO5 .ant-input {\n  color: #FB4B56;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_wantedValueTipBottom__3WBt0 {\n  margin: 0 auto;\n  font-size: 12px;\n  text-align: center;\n  width: 208px;\n  color: #9B9B9B;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_buttonRow__FegZX {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-top: 23px;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_buttonRow__FegZX .AllocWantedModal_confirmButton__1yXDN {\n  color: white;\n  background-color: #71C135;\n  width: 170px;\n  height: 36px;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_buttonRow__FegZX .AllocWantedModal_confirmButton__1yXDN:hover,\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_buttonRow__FegZX .AllocWantedModal_confirmButton__1yXDN:focus {\n  outline: none;\n  border-color: #8cd158;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_buttonRow__FegZX .AllocWantedModal_tipsButton__UmFpw {\n  margin-left: 22px;\n  width: 20px;\n}\n.AllocWantedModal_wantedModalContent__1VodF .AllocWantedModal_buttonRow__FegZX .AllocWantedModal_tipsButton__UmFpw .schedule {\n  font-size: 18px;\n  cursor: pointer;\n}\n.AllocWantedModal_closeButton__1d4p- {\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__1d4p- img {\n  width: 100%;\n  height: 100%;\n}\n.AllocWantedModal_tipsView__3my0J h6 {\n  margin: 0;\n  font-size: 12px;\n  line-height: 22px;\n  color: #3D3D3D;\n}\n.AllocWantedModal_tipsView__3my0J div {\n  font-size: 12px;\n}\n.AllocWantedModal_outRangeTextTip__3R4mw .ant-tooltip-inner {\n  color: red;\n}\n";
var styles = {
  wantedModalContent: "AllocWantedModal_wantedModalContent__1VodF",
  title: "AllocWantedModal_title__31i9F",
  wantedValueText: "AllocWantedModal_wantedValueText___uNQe",
  wantedInputNumber: "AllocWantedModal_wantedInputNumber__3MyO5",
  wantedValueTipBottom: "AllocWantedModal_wantedValueTipBottom__3WBt0",
  buttonRow: "AllocWantedModal_buttonRow__FegZX",
  confirmButton: "AllocWantedModal_confirmButton__1yXDN",
  tipsButton: "AllocWantedModal_tipsButton__UmFpw",
  closeButton: "AllocWantedModal_closeButton__1d4p-",
  tipsView: "AllocWantedModal_tipsView__3my0J",
  outRangeTextTip: "AllocWantedModal_outRangeTextTip__3R4mw"
};
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)
      );

      _this.handleSendValueChange = function(v) {
        if (_this.state.outRangeTip) {
          _this.setState({
            outRangeTip: !_this.checkSendValue()
          });
        }

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

      _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({
            outRangeTip: true
          });

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

          return false;
        }

        return true;
      };

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

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

      _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(),
            origin_id: sendGiftData.questionId,
            to_user: sendGiftData.toUserId,
            goods_id: 2,
            num: Number(_this.state.sendValue)
          })
        ).then(function(res) {
          console.log("res: ", res);

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

      _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"
          })
        );
      };

      _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