diff --git a/components/_util/hooks/useRef.ts b/components/_util/hooks/useRef.ts index 41216855b..22f3a9059 100644 --- a/components/_util/hooks/useRef.ts +++ b/components/_util/hooks/useRef.ts @@ -1,14 +1,14 @@ -import { onBeforeUpdate, readonly, ref, DeepReadonly, UnwrapRef } from 'vue'; +import { onBeforeUpdate, ref, Ref } from 'vue'; -export type UseRef = [(el: any) => void, DeepReadonly>]; +export type UseRef = [(el: any, key: string | number) => void, Ref]; export const useRef = (): UseRef => { - const refs = ref([]); - const setRef = (el: any) => { - refs.value.push(el); + const refs = ref({}); + const setRef = (el: any, key: string | number) => { + refs.value[key] = el; }; onBeforeUpdate(() => { - refs.value = []; + refs.value = {}; }); - return [setRef, readonly(refs)]; + return [setRef, refs]; }; diff --git a/components/_util/props-util/index.js b/components/_util/props-util/index.js index 068f57d54..0497d9d7b 100644 --- a/components/_util/props-util/index.js +++ b/components/_util/props-util/index.js @@ -390,7 +390,7 @@ function isValidElement(element) { } function getPropsSlot(slots, props, prop = 'default') { - return slots[prop]?.() ?? props[prop]; + return props[prop] ?? slots[prop]?.(); } export { diff --git a/components/rate/Star.tsx b/components/rate/Star.tsx index eb7dc5328..aa4da1d7c 100644 --- a/components/rate/Star.tsx +++ b/components/rate/Star.tsx @@ -12,7 +12,6 @@ export const starProps = { characterRender: PropTypes.func, focused: PropTypes.looseBool, count: PropTypes.number, - onClick: PropTypes.func, onHover: PropTypes.func, }; @@ -23,23 +22,24 @@ export default defineComponent({ name: 'Star', inheritAttrs: false, props: starProps, + emits: ['hover', 'click'], setup(props, { slots, emit }) { - const onHover = e => { + const onHover = (e: MouseEvent) => { const { index } = props; emit('hover', e, index); }; - const onClick = e => { + const onClick = (e: MouseEvent) => { const { index } = props; emit('click', e, index); }; - const onKeyDown = e => { + const onKeyDown = (e: KeyboardEvent) => { const { index } = props; if (e.keyCode === 13) { emit('click', e, index); } }; - const getClassName = computed(() => { + const cls = computed(() => { const { prefixCls, index, value, allowHalf, focused } = props; const starValue = index + 1; let className = prefixCls; @@ -59,12 +59,11 @@ export default defineComponent({ return className; }); - const character = getPropsSlot(slots, props, 'character'); - return () => { const { disabled, prefixCls, characterRender, index, count, value } = props; + const character = getPropsSlot(slots, props, 'character'); let star = ( -
  • +
  • >; const Rate = defineComponent({ name: 'ARate', + inheritAttrs: false, props: initDefaultProps(rateProps, { value: 0, count: 5, @@ -55,16 +47,16 @@ const Rate = defineComponent({ const rateRef = ref(); const [setRef, starRefs] = useRef(); const state = reactive({ - sValue: props.value, + value: props.value, focused: false, cleanedValue: null, hoverValue: undefined, }); - const getStarDOM = index => { - return findDOMNode(starRefs[index]); + const getStarDOM = (index: number) => { + return findDOMNode(starRefs.value[index]); }; - const getStarValue = (index, x) => { + const getStarValue = (index: number, x: number) => { const reverse = direction.value === 'rtl'; let value = index + 1; if (props.allowHalf) { @@ -80,12 +72,12 @@ const Rate = defineComponent({ return value; }; const changeValue = (value: number) => { - state.sValue = value; + state.value = value; emit('update:value', value); emit('change', value); }; - const onHover = (e: MouseEvent, index) => { + const onHover = (e: MouseEvent, index: number) => { const hoverValue = getStarValue(index, e.pageX); if (hoverValue !== state.cleanedValue) { state.hoverValue = hoverValue; @@ -98,12 +90,12 @@ const Rate = defineComponent({ state.cleanedValue = null; emit('hoverChange', undefined); }; - const onClick = (event: MouseEvent, index) => { + const onClick = (event: MouseEvent, index: number) => { const { allowClear } = props; const newValue = getStarValue(index, event.pageX); let isReset = false; if (allowClear) { - isReset = newValue === state.sValue; + isReset = newValue === state.value; } onMouseLeave(); changeValue(isReset ? 0 : newValue); @@ -117,41 +109,41 @@ const Rate = defineComponent({ state.focused = false; emit('blur'); }; - const onKeyDown = event => { + const onKeyDown = (event: KeyboardEvent) => { const { keyCode } = event; const { count, allowHalf } = props; const reverse = direction.value === 'rtl'; - if (keyCode === KeyCode.RIGHT && state.sValue < count && !reverse) { + if (keyCode === KeyCode.RIGHT && state.value < count && !reverse) { if (allowHalf) { - state.sValue += 0.5; + state.value += 0.5; } else { - state.sValue += 1; + state.value += 1; } - changeValue(state.sValue); + changeValue(state.value); event.preventDefault(); - } else if (keyCode === KeyCode.LEFT && state.sValue > 0 && !reverse) { + } else if (keyCode === KeyCode.LEFT && state.value > 0 && !reverse) { if (allowHalf) { - state.sValue -= 0.5; + state.value -= 0.5; } else { - state.sValue -= 1; + state.value -= 1; } - changeValue(state.sValue); + changeValue(state.value); event.preventDefault(); - } else if (keyCode === KeyCode.RIGHT && state.sValue > 0 && reverse) { + } else if (keyCode === KeyCode.RIGHT && state.value > 0 && reverse) { if (allowHalf) { - state.sValue -= 0.5; + state.value -= 0.5; } else { - state.sValue -= 1; + state.value -= 1; } - changeValue(state.sValue); + changeValue(state.value); event.preventDefault(); - } else if (keyCode === KeyCode.LEFT && state.sValue < count && reverse) { + } else if (keyCode === KeyCode.LEFT && state.value < count && reverse) { if (allowHalf) { - state.sValue += 0.5; + state.value += 0.5; } else { - state.sValue += 1; + state.value += 1; } - changeValue(state.sValue); + changeValue(state.value); event.preventDefault(); } emit('keydown', event); @@ -174,8 +166,8 @@ const Rate = defineComponent({ }); onMounted(() => { - const { autoFocus, disabled } = props; - if (autoFocus && !disabled) { + const { autofocus, disabled } = props; + if (autofocus && !disabled) { focus(); } }); @@ -195,14 +187,14 @@ const Rate = defineComponent({ for (let index = 0; index < count; index++) { stars.push( setRef(r, index)} key={index} index={index} count={count} disabled={disabled} prefixCls={`${prefixCls.value}-star`} allowHalf={allowHalf} - value={state.hoverValue === undefined ? state.sValue : state.hoverValue} + value={state.hoverValue === undefined ? state.value : state.hoverValue} onClick={onClick} onHover={onHover} character={character} diff --git a/components/rate/util.ts b/components/rate/util.ts index 42730abb4..1bc62e2a4 100644 --- a/components/rate/util.ts +++ b/components/rate/util.ts @@ -1,5 +1,3 @@ -/* eslint-disable import/prefer-default-export */ - function getScroll(w: Window) { let ret = w.pageXOffset; const method = 'scrollLeft'; diff --git a/v2-doc b/v2-doc index 0f6d531d0..001bf204e 160000 --- a/v2-doc +++ b/v2-doc @@ -1 +1 @@ -Subproject commit 0f6d531d088d5283250c8cec1c7e8be0e0d36a36 +Subproject commit 001bf204ea9b389f1ab7ec1ce23cd6243db64251