chowa
Version:
UI component library based on React
126 lines (125 loc) • 5.27 kB
JavaScript
/**
* @license chowa v1.1.3
*
* Copyright (c) Chowa Techonlogies Co.,Ltd.(http://www.chowa.cn).
*
* This source code is licensed under the MIT license found in the
* LICENSE file in the root directory of this source tree.
*/
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const React = require("react");
const PropTypes = require("prop-types");
const classnames_1 = require("classnames");
const utils_1 = require("../utils");
const icon_1 = require("../icon");
const i18n_1 = require("../i18n");
class Rate extends React.PureComponent {
constructor(props) {
super(props);
this.state = {
result: props.value || props.defaultValue || 0,
hoverValue: 0
};
[
'onItemClickHandler',
'onItemHoverHandler',
'onItemOutHandler',
'onItemKeyDownHandler'
].forEach((fn) => {
this[fn] = this[fn].bind(this);
});
}
componentDidUpdate(preProps) {
if (preProps.value !== this.props.value && this.state.result !== this.props.value) {
this.setState({ result: this.props.value });
}
}
onItemClickHandler(val, e) {
const { result } = this.state;
val = val === result ? 0 : val;
this.setState({
result: val
}, () => {
if (this.props.onChange) {
this.props.onChange(val);
}
});
utils_1.stopReactPropagation(e);
}
onItemHoverHandler(val, e) {
this.setState({ hoverValue: val });
utils_1.stopReactPropagation(e);
}
onItemOutHandler(e) {
this.setState({ hoverValue: -1 });
utils_1.stopReactPropagation(e);
}
onItemKeyDownHandler(val, e) {
if (e.keyCode === 13) {
this.onItemClickHandler(val, e);
}
}
renderItem() {
const { result, hoverValue } = this.state;
const { count, character, allowHalf, disabled, showValue, valueUnit, activeColor, tabIndex } = this.props;
const nodes = [];
for (let i = 1; i <= count; i++) {
const halfValue = i - 0.5;
const itemClass = classnames_1.default({
[utils_1.preClass('rate-item')]: true,
[utils_1.preClass('rate-disabled')]: disabled
});
nodes.push(React.createElement("li", { key: i, className: itemClass, tabIndex: disabled ? -1 : tabIndex, onKeyDown: disabled ? null : this.onItemKeyDownHandler.bind(this, i) },
React.createElement("div", { className: classnames_1.default({
[utils_1.preClass('rate-item-full')]: true,
[utils_1.preClass('rate-selected')]: result >= i || hoverValue >= i
}), style: (result >= i || hoverValue >= i) && utils_1.isExist(activeColor)
? { color: activeColor }
: null, onClick: disabled ? null : this.onItemClickHandler.bind(this, i), onMouseLeave: disabled ? null : this.onItemOutHandler, onMouseOver: disabled ? null : this.onItemHoverHandler.bind(this, i) }, character === undefined ? React.createElement(icon_1.default, { type: 'star' }) : character),
allowHalf &&
React.createElement("div", { className: classnames_1.default({
[utils_1.preClass('rate-item-half')]: true,
[utils_1.preClass('rate-selected')]: result >= halfValue || hoverValue >= halfValue
}), style: (result >= halfValue || hoverValue >= halfValue) && utils_1.isExist(activeColor)
? { color: activeColor } : null, onClick: disabled ? null : this.onItemClickHandler.bind(this, halfValue), onMouseLeave: disabled ? null : this.onItemOutHandler, onMouseOver: disabled ? null : this.onItemHoverHandler.bind(this, halfValue) }, character === undefined ? React.createElement(icon_1.default, { type: 'star' }) : character)));
}
if (showValue) {
nodes.push(React.createElement("li", { key: 'value', className: utils_1.preClass('rate-value') },
result,
React.createElement(i18n_1.I18nReceiver, { module: 'Rate' }, (i18n) => valueUnit || i18n.valueUnit)));
}
return nodes;
}
render() {
const { className, style } = this.props;
const componentClass = classnames_1.default({
[utils_1.preClass('rate')]: true,
[className]: utils_1.isExist(className)
});
return (React.createElement("ul", { style: style, className: componentClass }, this.renderItem()));
}
}
Rate.propTypes = {
className: PropTypes.string,
style: PropTypes.object,
tabIndex: PropTypes.number,
defaultValue: PropTypes.number,
value: PropTypes.number,
count: PropTypes.number,
disabled: PropTypes.bool,
allowHalf: PropTypes.bool,
character: PropTypes.node,
onChange: PropTypes.func,
showValue: PropTypes.bool,
valueUnit: PropTypes.node,
activeColor: PropTypes.string
};
Rate.defaultProps = {
tabIndex: 0,
count: 5,
disabled: false,
allowHalf: false,
showValue: false
};
exports.default = Rate;