choerodon-ui/pro/lib/rate/Rate.js

An enterprise-class UI design language and React-based implementation

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _get2 = _interopRequireDefault(require("@babel/runtime/helpers/get"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));

var _tslib = require("tslib");

var _react = _interopRequireDefault(require("react"));

var _mobxReact = require("mobx-react");

var _mobx = require("mobx");

var _classnames = _interopRequireDefault(require("classnames"));

var _noop = _interopRequireDefault(require("lodash/noop"));

var _UnitConvertor = require("../../../lib/_util/UnitConvertor");

var _rate = _interopRequireDefault(require("../../../lib/rate"));

var _utils = require("../form/utils");

var _FormField2 = require("../field/FormField");

var _utils2 = require("../field/utils");

var _icon = _interopRequireDefault(require("../icon"));

var _enum = require("../form/enum");

var _autobind = _interopRequireDefault(require("../_util/autobind"));

var _singleton = require("../tooltip/singleton");

var _enum2 = require("../field/enum");

var Rate = /*#__PURE__*/function (_FormField) {
  (0, _inherits2["default"])(Rate, _FormField);

  var _super = (0, _createSuper2["default"])(Rate);

  function Rate() {
    var _this;

    (0, _classCallCheck2["default"])(this, Rate);
    _this = _super.apply(this, arguments);

    _this.onChange = function (value) {
      _this.setValue(value);
    };

    return _this;
  }

  (0, _createClass2["default"])(Rate, [{
    key: "hasFloatLabel",
    get: function get() {
      var labelLayout = this.labelLayout;

      if (labelLayout) {
        return [_enum.LabelLayout["float"], _enum.LabelLayout.placeholder].includes(labelLayout);
      }

      return false;
    }
  }, {
    key: "renderValidationResult",
    value: function renderValidationResult(validationResult) {
      var validationMessage = this.getValidationMessage(validationResult);
      var _this$context = this.context,
          labelLayout = _this$context.labelLayout,
          showValidation = _this$context.showValidation,
          getProPrefixCls = _this$context.getProPrefixCls;

      if (validationMessage) {
        var showIcon = !(labelLayout && [_enum.LabelLayout["float"], _enum.LabelLayout.placeholder].includes(labelLayout) || showValidation === _enum.ShowValidation.newLine);
        return (0, _utils2.renderValidationMessage)(validationMessage, showIcon, getProPrefixCls);
      }
    }
  }, {
    key: "handleHelpMouseEnter",
    value: function handleHelpMouseEnter(e) {
      var _this$context2 = this.context,
          getTooltipTheme = _this$context2.getTooltipTheme,
          getTooltipPlacement = _this$context2.getTooltipPlacement;
      var helpTooltipProps = this.helpTooltipProps;
      var helpTooltipCls = "".concat(this.getContextConfig('proPrefixCls'), "-tooltip-popup-help");

      if (helpTooltipProps && helpTooltipProps.popupClassName) {
        helpTooltipCls = helpTooltipCls.concat(' ', helpTooltipProps.popupClassName);
      }

      (0, _singleton.show)(e.currentTarget, (0, _objectSpread2["default"])((0, _objectSpread2["default"])({
        title: this.getDisplayProp('help'),
        theme: getTooltipTheme('help'),
        placement: getTooltipPlacement('help')
      }, helpTooltipProps), {}, {
        popupClassName: helpTooltipCls
      }));
    }
  }, {
    key: "handleHelpMouseLeave",
    value: function handleHelpMouseLeave() {
      (0, _singleton.hide)();
    }
  }, {
    key: "renderTooltipHelp",
    value: function renderTooltipHelp() {
      var help = this.getDisplayProp('help');

      if (help) {
        return /*#__PURE__*/_react["default"].createElement(_icon["default"], {
          type: "help",
          onMouseEnter: this.handleHelpMouseEnter,
          onMouseLeave: this.handleHelpMouseLeave
        });
      }
    }
  }, {
    key: "renderFloatLabel",
    value: function renderFloatLabel() {
      if (this.hasFloatLabel) {
        var label = this.getLabel();

        if (label) {
          var _classNames;

          var floatLabelOffsetX = this.floatLabelOffsetX;
          var prefixCls = this.getContextProPrefixCls(_utils.FIELD_SUFFIX);
          var required = this.getProp('required');
          var classString = (0, _classnames["default"])("".concat(prefixCls, "-label"), (_classNames = {}, (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-required"), required), (0, _defineProperty2["default"])(_classNames, "".concat(prefixCls, "-readonly"), this.readOnly), _classNames));
          var style = floatLabelOffsetX ? {
            marginLeft: (0, _UnitConvertor.pxToRem)(floatLabelOffsetX, true)
          } : undefined;
          return /*#__PURE__*/_react["default"].createElement("div", {
            className: "".concat(prefixCls, "-label-wrapper"),
            style: style
          }, /*#__PURE__*/_react["default"].createElement("div", {
            className: classString,
            onMouseEnter: this.handleFloatLabelMouseEnter,
            onMouseLeave: this.handleFloatLabelMouseLeave
          }, label), this.renderTooltipHelp());
        }
      }
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = (0, _get2["default"])((0, _getPrototypeOf2["default"])(Rate.prototype), "getOtherProps", this).call(this);
      otherProps.onFocus = _noop["default"];
      otherProps.onBlur = _noop["default"];
      return otherProps;
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var value = this.getValue();
      return /*#__PURE__*/_react["default"].createElement("label", (0, _extends2["default"])({
        key: "wrapper"
      }, this.getWrapperProps()), this.renderFloatLabel(), /*#__PURE__*/_react["default"].createElement("div", {
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      }, /*#__PURE__*/_react["default"].createElement(_rate["default"], (0, _extends2["default"])({}, this.getOtherProps(), {
        onChange: this.onChange,
        value: value
      }))));
    }
  }, {
    key: "renderHelpMessage",
    value: function renderHelpMessage() {
      var showHelp = this.showHelp;
      var label = this.getLabel();
      if ([_enum2.ShowHelp.none, _enum2.ShowHelp.label].includes(showHelp)) return;

      if (!this.hasFloatLabel || !label) {
        var help = this.getDisplayProp('help');

        if (help) {
          return /*#__PURE__*/_react["default"].createElement("div", {
            key: "help",
            className: "".concat(this.getContextProPrefixCls(_utils.FIELD_SUFFIX), "-help")
          }, (0, _mobx.toJS)(help));
        }
      }
    }
  }]);
  return Rate;
}(_FormField2.FormField);

Rate.displayName = 'Rate';
Rate.defaultProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, _rate["default"].defaultProps), _FormField2.FormField.defaultProps), {}, {
  suffixCls: 'rate'
}); // eslint-disable-next-line camelcase

Rate.__PRO_RATE = true; // eslint-disable-next-line camelcase

Rate.__IS_IN_CELL_EDITOR = true;
(0, _tslib.__decorate)([_autobind["default"]], Rate.prototype, "renderValidationResult", null);
(0, _tslib.__decorate)([_autobind["default"]], Rate.prototype, "handleHelpMouseEnter", null);
Rate = (0, _tslib.__decorate)([_mobxReact.observer], Rate);
var _default = Rate;
exports["default"] = _default;
//# sourceMappingURL=Rate.js.map