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

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

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _get from "@babel/runtime/helpers/get";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _inherits from "@babel/runtime/helpers/inherits";
import _createSuper from "@babel/runtime/helpers/createSuper";
import { __decorate } from "tslib";
import React from 'react';
import { observer } from 'mobx-react';
import { toJS } from 'mobx';
import classNames from 'classnames';
import noop from 'lodash/noop';
import { pxToRem } from '../../../es/_util/UnitConvertor';
import C7NRate from '../../../es/rate';
import { FIELD_SUFFIX } from '../form/utils';
import { FormField } from '../field/FormField';
import { renderValidationMessage } from '../field/utils';
import Icon from '../icon';
import { LabelLayout, ShowValidation } from '../form/enum';
import autobind from '../_util/autobind';
import { hide, show } from '../tooltip/singleton';
import { ShowHelp } from '../field/enum';

var Rate = /*#__PURE__*/function (_FormField) {
  _inherits(Rate, _FormField);

  var _super = _createSuper(Rate);

  function Rate() {
    var _this;

    _classCallCheck(this, Rate);

    _this = _super.apply(this, arguments);

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

    return _this;
  }

  _createClass(Rate, [{
    key: "hasFloatLabel",
    get: function get() {
      var labelLayout = this.labelLayout;

      if (labelLayout) {
        return [LabelLayout["float"], 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 && [LabelLayout["float"], LabelLayout.placeholder].includes(labelLayout) || showValidation === ShowValidation.newLine);
        return 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);
      }

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

      if (help) {
        return /*#__PURE__*/React.createElement(Icon, {
          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(FIELD_SUFFIX);
          var required = this.getProp('required');
          var classString = classNames("".concat(prefixCls, "-label"), (_classNames = {}, _defineProperty(_classNames, "".concat(prefixCls, "-required"), required), _defineProperty(_classNames, "".concat(prefixCls, "-readonly"), this.readOnly), _classNames));
          var style = floatLabelOffsetX ? {
            marginLeft: pxToRem(floatLabelOffsetX, true)
          } : undefined;
          return /*#__PURE__*/React.createElement("div", {
            className: "".concat(prefixCls, "-label-wrapper"),
            style: style
          }, /*#__PURE__*/React.createElement("div", {
            className: classString,
            onMouseEnter: this.handleFloatLabelMouseEnter,
            onMouseLeave: this.handleFloatLabelMouseLeave
          }, label), this.renderTooltipHelp());
        }
      }
    }
  }, {
    key: "getOtherProps",
    value: function getOtherProps() {
      var otherProps = _get(_getPrototypeOf(Rate.prototype), "getOtherProps", this).call(this);

      otherProps.onFocus = noop;
      otherProps.onBlur = noop;
      return otherProps;
    }
  }, {
    key: "renderWrapper",
    value: function renderWrapper() {
      var value = this.getValue();
      return /*#__PURE__*/React.createElement("label", _extends({
        key: "wrapper"
      }, this.getWrapperProps()), this.renderFloatLabel(), /*#__PURE__*/React.createElement("div", {
        onMouseEnter: this.handleMouseEnter,
        onMouseLeave: this.handleMouseLeave
      }, /*#__PURE__*/React.createElement(C7NRate, _extends({}, this.getOtherProps(), {
        onChange: this.onChange,
        value: value
      }))));
    }
  }, {
    key: "renderHelpMessage",
    value: function renderHelpMessage() {
      var showHelp = this.showHelp;
      var label = this.getLabel();
      if ([ShowHelp.none, ShowHelp.label].includes(showHelp)) return;

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

        if (help) {
          return /*#__PURE__*/React.createElement("div", {
            key: "help",
            className: "".concat(this.getContextProPrefixCls(FIELD_SUFFIX), "-help")
          }, toJS(help));
        }
      }
    }
  }]);

  return Rate;
}(FormField);

Rate.displayName = 'Rate';
Rate.defaultProps = _objectSpread(_objectSpread(_objectSpread({}, C7NRate.defaultProps), FormField.defaultProps), {}, {
  suffixCls: 'rate'
}); // eslint-disable-next-line camelcase

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

Rate.__IS_IN_CELL_EDITOR = true;

__decorate([autobind], Rate.prototype, "renderValidationResult", null);

__decorate([autobind], Rate.prototype, "handleHelpMouseEnter", null);

Rate = __decorate([observer], Rate);
export default Rate;
//# sourceMappingURL=Rate.js.map