UNPKG

choerodon-ui

Version:

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

301 lines (249 loc) 8.45 kB
"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