Skip to content

Commit bc85604

Browse files
tangjinzhoutangjinzhou
committed
refactor: rate
1 parent 836ae6d commit bc85604

File tree

6 files changed

+47
-58
lines changed

6 files changed

+47
-58
lines changed

‎components/_util/hooks/useRef.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
1-
import { onBeforeUpdate, readonly, ref, DeepReadonly, UnwrapRef } from 'vue';
1+
import { onBeforeUpdate, ref, Ref } from 'vue';
22

3-
export type UseRef = [(el: any) => void, DeepReadonly<UnwrapRef<any[]>>];
3+
export type UseRef = [(el: any, key: string | number) => void, Ref<any>];
44

55
export const useRef = (): UseRef => {
6-
const refs = ref<any>([]);
7-
const setRef = (el: any) => {
8-
refs.value.push(el);
6+
const refs = ref<any>({});
7+
const setRef = (el: any, key: string | number) => {
8+
refs.value[key] = el;
99
};
1010
onBeforeUpdate(() => {
11-
refs.value = [];
11+
refs.value = {};
1212
});
13-
return [setRef, readonly(refs)];
13+
return [setRef, refs];
1414
};

‎components/_util/props-util/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -390,7 +390,7 @@ function isValidElement(element) {
390390
}
391391

392392
function getPropsSlot(slots, props, prop = 'default') {
393-
return slots[prop]?.() ?? props[prop];
393+
return props[prop] ?? slots[prop]?.();
394394
}
395395

396396
export {

‎components/rate/Star.tsx

+7-8
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export const starProps = {
1212
characterRender: PropTypes.func,
1313
focused: PropTypes.looseBool,
1414
count: PropTypes.number,
15-
1615
onClick: PropTypes.func,
1716
onHover: PropTypes.func,
1817
};
@@ -23,23 +22,24 @@ export default defineComponent({
2322
name: 'Star',
2423
inheritAttrs: false,
2524
props: starProps,
25+
emits: ['hover', 'click'],
2626
setup(props, { slots, emit }) {
27-
const onHover = e => {
27+
const onHover = (e: MouseEvent) => {
2828
const { index } = props;
2929
emit('hover', e, index);
3030
};
31-
const onClick = e => {
31+
const onClick = (e: MouseEvent) => {
3232
const { index } = props;
3333
emit('click', e, index);
3434
};
35-
const onKeyDown = e => {
35+
const onKeyDown = (e: KeyboardEvent) => {
3636
const { index } = props;
3737
if (e.keyCode === 13) {
3838
emit('click', e, index);
3939
}
4040
};
4141

42-
const getClassName = computed(() => {
42+
const cls = computed(() => {
4343
const { prefixCls, index, value, allowHalf, focused } = props;
4444
const starValue = index + 1;
4545
let className = prefixCls;
@@ -59,12 +59,11 @@ export default defineComponent({
5959
return className;
6060
});
6161

62-
const character = getPropsSlot(slots, props, 'character');
63-
6462
return () => {
6563
const { disabled, prefixCls, characterRender, index, count, value } = props;
64+
const character = getPropsSlot(slots, props, 'character');
6665
let star = (
67-
<li class={getClassName.value}>
66+
<li class={cls.value}>
6867
<div
6968
onClick={disabled ? null : onClick}
7069
onKeydown={disabled ? null : onKeyDown}

‎components/rate/index.tsx

+31-39
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,4 @@
1-
import {
2-
defineComponent,
3-
ExtractPropTypes,
4-
ref,
5-
reactive,
6-
VNode,
7-
onUpdated,
8-
onBeforeUpdate,
9-
onMounted,
10-
} from 'vue';
1+
import { defineComponent, ExtractPropTypes, ref, reactive, VNode, onMounted } from 'vue';
112
import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util';
123
import { withInstall } from '../_util/type';
134
import { getOffsetLeft } from './util';
@@ -39,6 +30,7 @@ export type RateProps = Partial<ExtractPropTypes<typeof rateProps>>;
3930

4031
const Rate = defineComponent({
4132
name: 'ARate',
33+
inheritAttrs: false,
4234
props: initDefaultProps(rateProps, {
4335
value: 0,
4436
count: 5,
@@ -55,16 +47,16 @@ const Rate = defineComponent({
5547
const rateRef = ref();
5648
const [setRef, starRefs] = useRef();
5749
const state = reactive({
58-
sValue: props.value,
50+
value: props.value,
5951
focused: false,
6052
cleanedValue: null,
6153
hoverValue: undefined,
6254
});
6355

64-
const getStarDOM = index => {
65-
return findDOMNode(starRefs[index]);
56+
const getStarDOM = (index: number) => {
57+
return findDOMNode(starRefs.value[index]);
6658
};
67-
const getStarValue = (index, x) => {
59+
const getStarValue = (index: number, x: number) => {
6860
const reverse = direction.value === 'rtl';
6961
let value = index + 1;
7062
if (props.allowHalf) {
@@ -80,12 +72,12 @@ const Rate = defineComponent({
8072
return value;
8173
};
8274
const changeValue = (value: number) => {
83-
state.sValue = value;
75+
state.value = value;
8476
emit('update:value', value);
8577
emit('change', value);
8678
};
8779

88-
const onHover = (e: MouseEvent, index) => {
80+
const onHover = (e: MouseEvent, index: number) => {
8981
const hoverValue = getStarValue(index, e.pageX);
9082
if (hoverValue !== state.cleanedValue) {
9183
state.hoverValue = hoverValue;
@@ -98,12 +90,12 @@ const Rate = defineComponent({
9890
state.cleanedValue = null;
9991
emit('hoverChange', undefined);
10092
};
101-
const onClick = (event: MouseEvent, index) => {
93+
const onClick = (event: MouseEvent, index: number) => {
10294
const { allowClear } = props;
10395
const newValue = getStarValue(index, event.pageX);
10496
let isReset = false;
10597
if (allowClear) {
106-
isReset = newValue === state.sValue;
98+
isReset = newValue === state.value;
10799
}
108100
onMouseLeave();
109101
changeValue(isReset ? 0 : newValue);
@@ -117,41 +109,41 @@ const Rate = defineComponent({
117109
state.focused = false;
118110
emit('blur');
119111
};
120-
const onKeyDown = event => {
112+
const onKeyDown = (event: KeyboardEvent) => {
121113
const { keyCode } = event;
122114
const { count, allowHalf } = props;
123115
const reverse = direction.value === 'rtl';
124-
if (keyCode === KeyCode.RIGHT && state.sValue < count && !reverse) {
116+
if (keyCode === KeyCode.RIGHT && state.value < count && !reverse) {
125117
if (allowHalf) {
126-
state.sValue += 0.5;
118+
state.value += 0.5;
127119
} else {
128-
state.sValue += 1;
120+
state.value += 1;
129121
}
130-
changeValue(state.sValue);
122+
changeValue(state.value);
131123
event.preventDefault();
132-
} else if (keyCode === KeyCode.LEFT && state.sValue > 0 && !reverse) {
124+
} else if (keyCode === KeyCode.LEFT && state.value > 0 && !reverse) {
133125
if (allowHalf) {
134-
state.sValue -= 0.5;
126+
state.value -= 0.5;
135127
} else {
136-
state.sValue -= 1;
128+
state.value -= 1;
137129
}
138-
changeValue(state.sValue);
130+
changeValue(state.value);
139131
event.preventDefault();
140-
} else if (keyCode === KeyCode.RIGHT && state.sValue > 0 && reverse) {
132+
} else if (keyCode === KeyCode.RIGHT && state.value > 0 && reverse) {
141133
if (allowHalf) {
142-
state.sValue -= 0.5;
134+
state.value -= 0.5;
143135
} else {
144-
state.sValue -= 1;
136+
state.value -= 1;
145137
}
146-
changeValue(state.sValue);
138+
changeValue(state.value);
147139
event.preventDefault();
148-
} else if (keyCode === KeyCode.LEFT && state.sValue < count && reverse) {
140+
} else if (keyCode === KeyCode.LEFT && state.value < count && reverse) {
149141
if (allowHalf) {
150-
state.sValue += 0.5;
142+
state.value += 0.5;
151143
} else {
152-
state.sValue += 1;
144+
state.value += 1;
153145
}
154-
changeValue(state.sValue);
146+
changeValue(state.value);
155147
event.preventDefault();
156148
}
157149
emit('keydown', event);
@@ -174,8 +166,8 @@ const Rate = defineComponent({
174166
});
175167

176168
onMounted(() => {
177-
const { autoFocus, disabled } = props;
178-
if (autoFocus && !disabled) {
169+
const { autofocus, disabled } = props;
170+
if (autofocus && !disabled) {
179171
focus();
180172
}
181173
});
@@ -195,14 +187,14 @@ const Rate = defineComponent({
195187
for (let index = 0; index < count; index++) {
196188
stars.push(
197189
<Star
198-
ref={setRef}
190+
ref={(r: any) => setRef(r, index)}
199191
key={index}
200192
index={index}
201193
count={count}
202194
disabled={disabled}
203195
prefixCls={`${prefixCls.value}-star`}
204196
allowHalf={allowHalf}
205-
value={state.hoverValue === undefined ? state.sValue : state.hoverValue}
197+
value={state.hoverValue === undefined ? state.value : state.hoverValue}
206198
onClick={onClick}
207199
onHover={onHover}
208200
character={character}

‎components/rate/util.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
/* eslint-disable import/prefer-default-export */
2-
31
function getScroll(w: Window) {
42
let ret = w.pageXOffset;
53
const method = 'scrollLeft';

‎v2-doc

0 commit comments

Comments
 (0)