uxcore-rate
Version:
rate component for uxcore.
240 lines (193 loc) • 11.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _classnames4 = require('classnames');
var _classnames5 = _interopRequireDefault(_classnames4);
var _uxcoreTooltip = require('uxcore-tooltip');
var _uxcoreTooltip2 = _interopRequireDefault(_uxcoreTooltip);
var _uxcoreIcon = require('uxcore-icon');
var _uxcoreIcon2 = _interopRequireDefault(_uxcoreIcon);
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _propTypes = require('prop-types');
var _propTypes2 = _interopRequireDefault(_propTypes);
var _reactLifecyclesCompat = require('react-lifecycles-compat');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); } /**
* Rate Component for uxcore
* @author quanyun.mqy
*
* Copyright 2014-2015, Uxcore Team, Alinw.
* All rights reserved.
*/
var makeNewArray = function makeNewArray(len) {
var arr = [];
for (var i = 0; i < len; i++) {
arr.push(1);
}
return arr;
};
var Rate = function (_React$Component) {
_inherits(Rate, _React$Component);
Rate.getDerivedStateFromProps = function getDerivedStateFromProps(nextProps, prevState) {
if (nextProps.value !== prevState.lastValue) {
return {
hover: nextProps.value,
lastValue: nextProps.value
};
}
return null;
};
function Rate(props) {
_classCallCheck(this, Rate);
var _this = _possibleConstructorReturn(this, _React$Component.call(this, props));
_this.state = {
hover: props.value,
lastValue: props.value
};
_this.handleItemLeave = _this.handleItemLeave.bind(_this);
return _this;
}
Rate.prototype.componentDidMount = function componentDidMount() {
var _this2 = this;
if (this.props.total !== 5) {
setTimeout(function () {
// iconfont 会在 didMount 之后才加载进来，因此这里做了一个延时
_this2.resizeAlwaysTip();
}, 100);
}
};
Rate.prototype.componentDidUpdate = function componentDidUpdate(prevProps) {
if (prevProps.total !== this.props.total) {
this.resizeAlwaysTip();
}
};
Rate.prototype.resizeAlwaysTip = function resizeAlwaysTip() {
if (this.alwaysTip) {
var tipWidth = this.star0.offsetWidth * parseInt(this.props.total, 10);
this.alwaysTip.style.width = tipWidth + 'px';
}
};
Rate.prototype.handleItemHover = function handleItemHover(i) {
if (this.props.disabled) {
return;
}
this.setState({
hover: i
});
};
Rate.prototype.handleItemLeave = function handleItemLeave() {
if (this.props.disabled) {
return;
}
this.setState({
hover: this.props.value
});
};
Rate.prototype.handleItemClick = function handleItemClick(v) {
if (this.props.disabled) {
return;
}
this.props.onChange(v);
};
// when tipShow === 'always', render the tip
Rate.prototype.renderAlwaysTip = function renderAlwaysTip() {
var _this3 = this;
var t = this;
return _react2["default"].createElement(
'div',
{
className: t.props.prefixCls + '-always-tip-container',
ref: function ref(c) {
_this3.alwaysTip = c;
}
},
t.state.hover === 0 ? t.props.placeholder : t.props.scoreTips[parseInt(t.state.hover, 10) - 1]
);
};
Rate.prototype.render = function render() {
var _classnames,
_this4 = this;
var t = this;
var classes = (0, _classnames5["default"])(t.props.prefixCls, (_classnames = {}, _defineProperty(_classnames, t.props.className, !!t.props.className), _defineProperty(_classnames, 'disabled', !!t.props.disabled), _defineProperty(_classnames, t.props.prefixCls + '-' + t.props.size, true), _classnames));
return _react2["default"].createElement(
'div',
{ className: classes, onMouseLeave: this.handleItemLeave },
makeNewArray(t.props.total).map(function (v, k) {
var isActive = t.props.activeAll ? k + 1 <= t.state.hover : k + 1 === t.state.hover;
var icon = _react2["default"].createElement(_uxcoreIcon2["default"], {
name: '' + (isActive ? 'caozuo-xingji-full' : 'caozuo-xingji-line'),
className: (0, _classnames5["default"])(_defineProperty({}, t.props.prefixCls + '-icon-active', isActive))
});
if (t.props.icons[k]) {
icon = _react2["default"].cloneElement(isActive && t.props.activeIcons[k] ? t.props.activeIcons[k] : t.props.icons[k], {
className: (0, _classnames5["default"])(_defineProperty({}, t.props.prefixCls + '-icon-active', isActive))
});
}
return _react2["default"].createElement(
'div',
{
className: (0, _classnames5["default"])(t.props.prefixCls + '-item', {
active: k + 1 <= t.state.hover
}),
key: k + 1,
ref: function ref(c) {
_this4['star' + k] = c;
},
onClick: function onClick() {
t.handleItemClick(k + 1);
},
onMouseEnter: function onMouseEnter() {
t.handleItemHover(k + 1);
}
},
t.props.tipShow === 'hover' && t.props.scoreTips[k] ? _react2["default"].createElement(
_uxcoreTooltip2["default"],
{ placement: 'top', trigger: 'hover', overlay: t.props.scoreTips[k] },
icon
) : icon
);
}),
t.props.tipShow === 'always' ? t.renderAlwaysTip() : ''
);
};
return Rate;
}(_react2["default"].Component);
Rate.defaultProps = {
prefixCls: 'kuma-rate',
disabled: false,
total: 5,
value: 0,
scoreTips: [],
tipShow: 'hover',
onChange: function onChange() {},
size: 'normal',
icons: [],
activeIcons: [],
activeAll: true,
placeholder: '点击星星进行评分'
};
// http://facebook.github.io/react/docs/reusable-components.html
Rate.propTypes = {
size: _propTypes2["default"].string,
prefixCls: _propTypes2["default"].string,
className: _propTypes2["default"].string,
disabled: _propTypes2["default"].bool,
total: _propTypes2["default"].number,
value: _propTypes2["default"].number.isRequired,
scoreTips: _propTypes2["default"].arrayOf(_propTypes2["default"].string),
tipShow: _propTypes2["default"].oneOf(['hover', 'always', false]),
onChange: _propTypes2["default"].func.isRequired,
icons: _propTypes2["default"].array,
activeAll: _propTypes2["default"].bool,
placeholder: _propTypes2["default"].string
};
Rate.displayName = 'uxcore-rate';
(0, _reactLifecyclesCompat.polyfill)(Rate);
exports["default"] = Rate;
module.exports = exports['default'];