zent/es/rate/Rate.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
import { Component, createRef } from 'react';
import classNames from 'classnames';
import StarIcon from './star-icon';
import Star from './Star';
import { DisabledContext } from '../disabled';
function refArray(length) {
    var refs = [];
    for (var i = 0; i < length; i += 1) {
        refs.push(createRef());
    }
    return refs;
}
var Rate = (function (_super) {
    __extends(Rate, _super);
    function Rate(props) {
        var _this = _super.call(this, props) || this;
        _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.onMouseLeave = function () {
            _this.setState({
                hoverValue: null,
                cleanedValue: null,
            });
        };
        _this.onClick = function (event, index) {
            var onChange = _this.props.onChange;
            var value = _this.getStarValue(index, event.pageX);
            var isReset = false;
            if (_this.props.allowClear) {
                isReset = value === _this.props.value;
            }
            _this.onMouseLeave();
            onChange && onChange(isReset ? 0 : value);
            _this.setState({
                cleanedValue: isReset ? value : null,
            });
        };
        _this.state = {
            cleanedValue: null,
            hoverValue: null,
            starRefs: refArray(props.count),
        };
        return _this;
    }
    Rate.prototype.getStarDOM = function (index) {
        var ref = this.state.starRefs[index];
        if (!ref) {
            throw new Error('Missing Star Ref, this looks like a bug of zent, please file an issue');
        }
        var star = ref.current;
        if (!star) {
            throw new Error('Missing Star instance, this looks like a bug of zent, please file an issue');
        }
        var li = star.elRef.current;
        if (!li) {
            throw new Error('Missing Star element, this looks like a bug of zent, please file an issue');
        }
        return li;
    };
    Rate.prototype.getStarValue = function (index, x) {
        var value = index + 1;
        if (this.props.allowHalf) {
            var starEle = this.getStarDOM(index);
            var leftDis = starEle.getBoundingClientRect().left;
            var width = starEle.clientWidth;
            if (x - leftDis < width / 2) {
                value -= 0.5;
            }
        }
        return value;
    };
    Rate.getDerivedStateFromProps = function (_a, _b) {
        var count = _a.count;
        var starRefs = _b.starRefs;
        if (count !== starRefs.length) {
            return {
                starRefs: refArray(count),
            };
        }
        return null;
    };
    Rate.prototype.render = function () {
        var _a = this.props, count = _a.count, allowHalf = _a.allowHalf, style = _a.style, _b = _a.disabled, disabled = _b === void 0 ? this.context.value : _b, className = _a.className, character = _a.character, value = _a.value, readOnly = _a.readOnly;
        var _c = this.state, hoverValue = _c.hoverValue, starRefs = _c.starRefs;
        var stars = [];
        for (var index = 0; index < count; index++) {
            stars.push(_jsx(Star, { ref: starRefs[index], index: index, disabled: disabled, allowHalf: allowHalf, value: hoverValue !== null ? hoverValue : value, onClick: this.onClick, onHover: this.onHover, character: character, readOnly: readOnly }, index));
        }
        return (_jsx("ul", __assign({ className: classNames('zent-rate', {
                'zent-rate-disabled': disabled,
                'zent-rate-readonly': readOnly,
            }, className), style: style, onMouseLeave: disabled || readOnly ? undefined : this.onMouseLeave, "data-zv": '10.0.17' }, { children: stars }), void 0));
    };
    Rate.defaultProps = {
        value: 0,
        count: 5,
        allowHalf: false,
        allowClear: true,
        character: _jsx(StarIcon, { className: "zent-rate-star-icon" }, void 0),
        readOnly: false,
    };
    Rate.contextType = DisabledContext;
    return Rate;
}(Component));
export { Rate };
export default Rate;