perf: remove rate
tanjinzhou
parent
bc85604d94
commit
a58cb3cd39
|
|
@ -1,103 +0,0 @@
|
|||
@rate-prefix-cls: rc-rate;
|
||||
@rate-star-color: #f5a623;
|
||||
@font-size-base: 13px;
|
||||
|
||||
.@{rate-prefix-cls} {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
font-size: 18px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
outline: none;
|
||||
|
||||
&-disabled &-star {
|
||||
&:before,
|
||||
&-content:before {
|
||||
cursor: default;
|
||||
}
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&-star {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
position: relative;
|
||||
transition: all 0.3s;
|
||||
color: #e9e9e9;
|
||||
cursor: pointer;
|
||||
line-height: 1.5;
|
||||
|
||||
&-first,
|
||||
&-second {
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
&-focused,
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
&-first {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
&-half &-first,
|
||||
&-half &-second {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
&-half &-first,
|
||||
&-full &-second {
|
||||
color: @rate-star-color;
|
||||
}
|
||||
|
||||
&-half:hover &-first,
|
||||
&-full:hover &-second {
|
||||
color: tint(@rate-star-color, 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@icon-url: '//at.alicdn.com/t/font_r5u29ls31bgldi';
|
||||
|
||||
@font-face {
|
||||
font-family: 'anticon';
|
||||
src: url('@{icon-url}.eot'); /* IE9*/
|
||||
src: url('@{icon-url}.eot?#iefix') format('embedded-opentype'),
|
||||
/* IE6-IE8 */ url('@{icon-url}.woff') format('woff'),
|
||||
/* chrome、firefox */ url('@{icon-url}.ttf') format('truetype'),
|
||||
/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('@{icon-url}.svg#iconfont')
|
||||
format('svg'); /* iOS 4.1- */
|
||||
}
|
||||
|
||||
.anticon {
|
||||
font-style: normal;
|
||||
vertical-align: baseline;
|
||||
text-align: center;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
&:before {
|
||||
display: block;
|
||||
font-family: 'anticon' !important;
|
||||
}
|
||||
}
|
||||
|
||||
.anticon-star:before {
|
||||
content: '\e660';
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// based on rc-rate 2.5.0
|
||||
import Rate from './src/';
|
||||
export default Rate;
|
||||
|
|
@ -1,215 +0,0 @@
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
import classNames from '../../_util/classNames';
|
||||
import KeyCode from '../../_util/KeyCode';
|
||||
import {
|
||||
initDefaultProps,
|
||||
hasProp,
|
||||
getOptionProps,
|
||||
getComponent,
|
||||
findDOMNode,
|
||||
} from '../../_util/props-util';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { getOffsetLeft } from './util';
|
||||
import Star from './Star';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
const rateProps = {
|
||||
disabled: PropTypes.looseBool,
|
||||
value: PropTypes.number,
|
||||
defaultValue: PropTypes.number,
|
||||
count: PropTypes.number,
|
||||
allowHalf: PropTypes.looseBool,
|
||||
allowClear: PropTypes.looseBool,
|
||||
prefixCls: PropTypes.string,
|
||||
character: PropTypes.any,
|
||||
characterRender: PropTypes.func,
|
||||
tabindex: PropTypes.number,
|
||||
autofocus: PropTypes.looseBool,
|
||||
};
|
||||
|
||||
function noop() {}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Rate',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: initDefaultProps(rateProps, {
|
||||
defaultValue: 0,
|
||||
count: 5,
|
||||
allowHalf: false,
|
||||
allowClear: true,
|
||||
prefixCls: 'rc-rate',
|
||||
tabindex: 0,
|
||||
character: '★',
|
||||
}),
|
||||
data() {
|
||||
let value = this.value;
|
||||
if (!hasProp(this, 'value')) {
|
||||
value = this.defaultValue;
|
||||
}
|
||||
return {
|
||||
sValue: value,
|
||||
focused: false,
|
||||
cleanedValue: null,
|
||||
hoverValue: undefined,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.setState({
|
||||
sValue: val,
|
||||
});
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
if (this.autofocus && !this.disabled) {
|
||||
this.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
onHover(event, index) {
|
||||
const hoverValue = this.getStarValue(index, event.pageX);
|
||||
const { cleanedValue } = this;
|
||||
if (hoverValue !== cleanedValue) {
|
||||
this.setState({
|
||||
hoverValue,
|
||||
cleanedValue: null,
|
||||
});
|
||||
}
|
||||
this.__emit('hoverChange', hoverValue);
|
||||
},
|
||||
onMouseLeave() {
|
||||
this.setState({
|
||||
hoverValue: undefined,
|
||||
cleanedValue: null,
|
||||
});
|
||||
this.__emit('hoverChange', undefined);
|
||||
},
|
||||
onClick(event, index) {
|
||||
const { allowClear, sValue: value } = this;
|
||||
const newValue = this.getStarValue(index, event.pageX);
|
||||
let isReset = false;
|
||||
if (allowClear) {
|
||||
isReset = newValue === value;
|
||||
}
|
||||
this.onMouseLeave(true);
|
||||
this.changeValue(isReset ? 0 : newValue);
|
||||
this.setState({
|
||||
cleanedValue: isReset ? newValue : null,
|
||||
});
|
||||
},
|
||||
onFocus() {
|
||||
this.setState({
|
||||
focused: true,
|
||||
});
|
||||
this.__emit('focus');
|
||||
},
|
||||
onBlur() {
|
||||
this.setState({
|
||||
focused: false,
|
||||
});
|
||||
this.__emit('blur');
|
||||
},
|
||||
onKeyDown(event) {
|
||||
const { keyCode } = event;
|
||||
const { count, allowHalf } = this;
|
||||
let { sValue } = this;
|
||||
if (keyCode === KeyCode.RIGHT && sValue < count) {
|
||||
if (allowHalf) {
|
||||
sValue += 0.5;
|
||||
} else {
|
||||
sValue += 1;
|
||||
}
|
||||
this.changeValue(sValue);
|
||||
event.preventDefault();
|
||||
} else if (keyCode === KeyCode.LEFT && sValue > 0) {
|
||||
if (allowHalf) {
|
||||
sValue -= 0.5;
|
||||
} else {
|
||||
sValue -= 1;
|
||||
}
|
||||
this.changeValue(sValue);
|
||||
event.preventDefault();
|
||||
}
|
||||
this.__emit('keydown', event);
|
||||
},
|
||||
getStarDOM(index) {
|
||||
return findDOMNode(this.$refs['stars' + index]);
|
||||
},
|
||||
getStarValue(index, x) {
|
||||
let value = index + 1;
|
||||
if (this.allowHalf) {
|
||||
const starEle = this.getStarDOM(index);
|
||||
const leftDis = getOffsetLeft(starEle);
|
||||
const width = starEle.clientWidth;
|
||||
if (x - leftDis < width / 2) {
|
||||
value -= 0.5;
|
||||
}
|
||||
}
|
||||
return value;
|
||||
},
|
||||
focus() {
|
||||
if (!this.disabled) {
|
||||
this.$refs.rateRef.focus();
|
||||
}
|
||||
},
|
||||
blur() {
|
||||
if (!this.disabled) {
|
||||
this.$refs.rateRef.blur();
|
||||
}
|
||||
},
|
||||
changeValue(value) {
|
||||
if (!hasProp(this, 'value')) {
|
||||
this.setState({
|
||||
sValue: value,
|
||||
});
|
||||
}
|
||||
this.__emit('update:value', value);
|
||||
this.__emit('change', value);
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const { count, allowHalf, prefixCls, disabled, tabindex } = getOptionProps(this);
|
||||
const { sValue, hoverValue, focused } = this;
|
||||
const { class: className, style } = this.$attrs;
|
||||
const stars = [];
|
||||
const disabledClass = disabled ? `${prefixCls}-disabled` : '';
|
||||
const character = getComponent(this, 'character');
|
||||
const characterRender = this.characterRender || this.$slots.characterRender;
|
||||
for (let index = 0; index < count; index++) {
|
||||
const starProps = {
|
||||
index,
|
||||
count,
|
||||
disabled,
|
||||
prefixCls: `${prefixCls}-star`,
|
||||
allowHalf,
|
||||
value: hoverValue === undefined ? sValue : hoverValue,
|
||||
character,
|
||||
characterRender,
|
||||
focused,
|
||||
onClick: this.onClick,
|
||||
onHover: this.onHover,
|
||||
key: index,
|
||||
ref: `stars${index}`,
|
||||
};
|
||||
stars.push(<Star {...starProps} />);
|
||||
}
|
||||
return (
|
||||
<ul
|
||||
class={classNames(prefixCls, disabledClass, className)}
|
||||
style={style}
|
||||
onMouseleave={disabled ? noop : this.onMouseLeave}
|
||||
tabindex={disabled ? -1 : tabindex}
|
||||
onFocus={disabled ? noop : this.onFocus}
|
||||
onBlur={disabled ? noop : this.onBlur}
|
||||
onKeydown={disabled ? noop : this.onKeyDown}
|
||||
ref="rateRef"
|
||||
role="radiogroup"
|
||||
>
|
||||
{stars}
|
||||
</ul>
|
||||
);
|
||||
},
|
||||
});
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
import PropTypes from '../../_util/vue-types';
|
||||
import BaseMixin from '../../_util/BaseMixin';
|
||||
import { getComponent } from '../../_util/props-util';
|
||||
function noop() {}
|
||||
|
||||
export default {
|
||||
name: 'Star',
|
||||
mixins: [BaseMixin],
|
||||
inheritAttrs: false,
|
||||
props: {
|
||||
value: PropTypes.number,
|
||||
index: PropTypes.number,
|
||||
prefixCls: PropTypes.string,
|
||||
allowHalf: PropTypes.looseBool,
|
||||
disabled: PropTypes.looseBool,
|
||||
character: PropTypes.any,
|
||||
characterRender: PropTypes.func,
|
||||
focused: PropTypes.looseBool,
|
||||
count: PropTypes.number,
|
||||
},
|
||||
methods: {
|
||||
onHover(e) {
|
||||
const { index } = this;
|
||||
this.__emit('hover', e, index);
|
||||
},
|
||||
onClick(e) {
|
||||
const { index } = this;
|
||||
this.__emit('click', e, index);
|
||||
},
|
||||
onKeyDown(e) {
|
||||
const { index } = this.$props;
|
||||
if (e.keyCode === 13) {
|
||||
this.__emit('click', e, index);
|
||||
}
|
||||
},
|
||||
getClassName() {
|
||||
const { prefixCls, index, value, allowHalf, focused } = this;
|
||||
const starValue = index + 1;
|
||||
let className = prefixCls;
|
||||
if (value === 0 && index === 0 && focused) {
|
||||
className += ` ${prefixCls}-focused`;
|
||||
} else if (allowHalf && value + 0.5 === starValue) {
|
||||
className += ` ${prefixCls}-half ${prefixCls}-active`;
|
||||
if (focused) {
|
||||
className += ` ${prefixCls}-focused`;
|
||||
}
|
||||
} else {
|
||||
className += starValue <= value ? ` ${prefixCls}-full` : ` ${prefixCls}-zero`;
|
||||
if (starValue === value && focused) {
|
||||
className += ` ${prefixCls}-focused`;
|
||||
}
|
||||
}
|
||||
return className;
|
||||
},
|
||||
},
|
||||
render() {
|
||||
const {
|
||||
onHover,
|
||||
onClick,
|
||||
onKeyDown,
|
||||
disabled,
|
||||
prefixCls,
|
||||
characterRender,
|
||||
index,
|
||||
count,
|
||||
value,
|
||||
} = this;
|
||||
|
||||
const character = getComponent(this, 'character');
|
||||
let star = (
|
||||
<li class={this.getClassName()}>
|
||||
<div
|
||||
onClick={disabled ? noop : onClick}
|
||||
onKeydown={disabled ? noop : onKeyDown}
|
||||
onMousemove={disabled ? noop : onHover}
|
||||
role="radio"
|
||||
aria-checked={value > index ? 'true' : 'false'}
|
||||
aria-posinset={index + 1}
|
||||
aria-setsize={count}
|
||||
tabindex={0}
|
||||
>
|
||||
<div class={`${prefixCls}-first`}>{character}</div>
|
||||
<div class={`${prefixCls}-second`}>{character}</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
if (characterRender) {
|
||||
star = characterRender(star, this.$props);
|
||||
}
|
||||
return star;
|
||||
},
|
||||
};
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
import Rate from './Rate';
|
||||
export default Rate;
|
||||
|
|
@ -1,39 +0,0 @@
|
|||
function getScroll(w, top) {
|
||||
let ret = top ? w.pageYOffset : w.pageXOffset;
|
||||
const method = top ? 'scrollTop' : 'scrollLeft';
|
||||
if (typeof ret !== 'number') {
|
||||
const d = w.document;
|
||||
// ie6,7,8 standard mode
|
||||
ret = d.documentElement[method];
|
||||
if (typeof ret !== 'number') {
|
||||
// quirks mode
|
||||
ret = d.body[method];
|
||||
}
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
|
||||
function getClientPosition(elem) {
|
||||
let x;
|
||||
let y;
|
||||
const doc = elem.ownerDocument;
|
||||
const body = doc.body;
|
||||
const docElem = doc && doc.documentElement;
|
||||
const box = elem.getBoundingClientRect();
|
||||
x = box.left;
|
||||
y = box.top;
|
||||
x -= docElem.clientLeft || body.clientLeft || 0;
|
||||
y -= docElem.clientTop || body.clientTop || 0;
|
||||
return {
|
||||
left: x,
|
||||
top: y,
|
||||
};
|
||||
}
|
||||
|
||||
export function getOffsetLeft(el) {
|
||||
const pos = getClientPosition(el);
|
||||
const doc = el.ownerDocument;
|
||||
const w = doc.defaultView || doc.parentWindow;
|
||||
pos.left += getScroll(w);
|
||||
return pos.left;
|
||||
}
|
||||
Loading…
Reference in New Issue