choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
301 lines (249 loc) • 8.45 kB
JavaScript
"use strict";
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireWildcard(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _classnames = _interopRequireDefault(require("classnames"));
var _noop = _interopRequireDefault(require("lodash/noop"));
var _KeyCode = _interopRequireDefault(require("../../_util/KeyCode"));
var _util = require("./util");
var _Star = _interopRequireDefault(require("./Star"));
var Rate = /*#__PURE__*/function (_Component) {
(0, _inherits2["default"])(Rate, _Component);
var _super = (0, _createSuper2["default"])(Rate);
function Rate(props) {
var _this;
(0, _classCallCheck2["default"])(this, Rate);
_this = _super.call(this, props);
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onHover", function (event, index) {
var hoverValue = _this.getStarValue(index, event.pageX);
var cleanedValue = _this.state.cleanedValue;
if (hoverValue !== cleanedValue) {
_this.setState({
hoverValue: hoverValue,
cleanedValue: null
});
}
_this.props.onHoverChange(hoverValue);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onMouseLeave", function () {
_this.setState({
hoverValue: undefined,
cleanedValue: null
});
_this.props.onHoverChange(undefined);
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (event, index) {
var value = _this.getStarValue(index, event.pageX);
var isReset = false;
if (_this.props.allowClear) {
isReset = value === _this.state.value;
}
_this.onMouseLeave(true);
_this.changeValue(isReset ? 0 : value);
_this.setState({
cleanedValue: isReset ? value : null
});
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onFocus", function () {
var onFocus = _this.props.onFocus;
_this.setState({
focused: true
});
if (onFocus) {
onFocus();
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onBlur", function () {
var onBlur = _this.props.onBlur;
_this.setState({
focused: false
});
if (onBlur) {
onBlur();
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onKeyDown", function (event) {
var keyCode = event.keyCode;
var _this$props = _this.props,
count = _this$props.count,
allowHalf = _this$props.allowHalf,
onKeyDown = _this$props.onKeyDown;
var value = _this.state.value;
if (keyCode === _KeyCode["default"].RIGHT && value < count) {
if (allowHalf) {
value += 0.5;
} else {
value += 1;
}
_this.changeValue(value);
event.preventDefault();
} else if (keyCode === _KeyCode["default"].LEFT && value > 0) {
if (allowHalf) {
value -= 0.5;
} else {
value -= 1;
}
_this.changeValue(value);
event.preventDefault();
}
if (onKeyDown) {
onKeyDown(event);
}
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveRef", function (index) {
return function (node) {
_this.stars[index] = node;
};
});
(0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "saveRate", function (node) {
_this.rate = node;
});
var _value = props.value;
if (_value === undefined) {
_value = props.defaultValue;
}
_this.stars = {};
_this.state = {
value: _value,
focused: false,
cleanedValue: null
};
return _this;
}
(0, _createClass2["default"])(Rate, [{
key: "componentDidMount",
value: function componentDidMount() {
if (this.props.autoFocus && !this.props.disabled) {
this.focus();
}
}
}, {
key: "componentWillReceiveProps",
value: function componentWillReceiveProps(nextProps) {
if ('value' in nextProps) {
var value = nextProps.value;
if (value === undefined) {
value = nextProps.defaultValue;
}
this.setState({
value: value
});
}
}
}, {
key: "getStarDOM",
value: function getStarDOM(index) {
return _reactDom["default"].findDOMNode(this.stars[index]);
}
}, {
key: "getStarValue",
value: function getStarValue(index, x) {
var value = index + 1;
if (this.props.allowHalf) {
var starEle = this.getStarDOM(index);
var leftDis = (0, _util.getOffsetLeft)(starEle);
var width = starEle.clientWidth;
if (x - leftDis < width / 2) {
value -= 0.5;
}
}
return value;
}
}, {
key: "focus",
value: function focus() {
if (!this.props.disabled) {
this.rate.focus();
}
}
}, {
key: "blur",
value: function blur() {
if (!this.props.disabled) {
this.rate.focus();
}
}
}, {
key: "changeValue",
value: function changeValue(value) {
if (!('value' in this.props)) {
this.setState({
value: value
});
}
this.props.onChange(value);
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
count = _this$props2.count,
allowHalf = _this$props2.allowHalf,
style = _this$props2.style,
prefixCls = _this$props2.prefixCls,
disabled = _this$props2.disabled,
className = _this$props2.className,
character = _this$props2.character,
tabIndex = _this$props2.tabIndex;
var _this$state = this.state,
value = _this$state.value,
hoverValue = _this$state.hoverValue,
focused = _this$state.focused;
var stars = [];
var disabledClass = disabled ? "".concat(prefixCls, "-disabled") : '';
for (var index = 0; index < count; index++) {
stars.push( /*#__PURE__*/_react["default"].createElement(_Star["default"], {
ref: this.saveRef(index),
index: index,
count: count,
disabled: disabled,
prefixCls: "".concat(prefixCls, "-star"),
allowHalf: allowHalf,
value: hoverValue === undefined ? value : hoverValue,
onClick: this.onClick,
onHover: this.onHover,
key: index,
character: character,
focused: focused
}));
}
return /*#__PURE__*/_react["default"].createElement("ul", {
className: (0, _classnames["default"])(prefixCls, disabledClass, className),
style: style,
onMouseLeave: disabled ? null : this.onMouseLeave,
tabIndex: disabled ? -1 : tabIndex,
onFocus: disabled ? null : this.onFocus,
onBlur: disabled ? null : this.onBlur,
onKeyDown: disabled ? null : this.onKeyDown,
ref: this.saveRate,
role: "radiogroup"
}, stars);
}
}]);
return Rate;
}(_react.Component);
exports["default"] = Rate;
(0, _defineProperty2["default"])(Rate, "defaultProps", {
defaultValue: 0,
count: 5,
allowHalf: false,
allowClear: true,
style: {},
prefixCls: 'rc-rate',
onChange: _noop["default"],
character: '★',
onHoverChange: _noop["default"],
tabIndex: 0
});
//# sourceMappingURL=Rate.js.map