github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor: rate

Browse Source
pull/4165/head
tanjinzhou 4 years ago
parent 836ae6d5fe
commit bc85604d94
6 changed files with 47 additions and 58 deletions
Show Stats Download Patch File Download Diff File

14
components/_util/hooks/useRef.ts
Unescape View File

@ -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<UnwrapRef<any[]>>];
export type UseRef = [(el: any, key: string | number) => void, Ref<any>];
export const useRef = (): UseRef => {
const refs = ref<any>([]);
const setRef = (el: any) => {
refs.value.push(el);
const refs = ref<any>({});
const setRef = (el: any, key: string | number) => {
refs.value[key] = el;
};
onBeforeUpdate(() => {
refs.value = [];
refs.value = {};
});
return [setRef, readonly(refs)];
return [setRef, refs];
};

2
components/_util/props-util/index.js
Unescape View File

@ -390,7 +390,7 @@ function isValidElement(element) {
}
function getPropsSlot(slots, props, prop = 'default') {
return slots[prop]?.() ?? props[prop];
return props[prop] ?? slots[prop]?.();
}
export {

15
components/rate/Star.tsx
Unescape View File

@ -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 = (
<li class={getClassName.value}>
<li class={cls.value}>
<div
onClick={disabled ? null : onClick}
onKeydown={disabled ? null : onKeyDown}

70
components/rate/index.tsx
Unescape View File

@ -1,13 +1,4 @@
import {
defineComponent,
ExtractPropTypes,
ref,
reactive,
VNode,
onUpdated,
onBeforeUpdate,
onMounted,
} from 'vue';
import { defineComponent, ExtractPropTypes, ref, reactive, VNode, onMounted } from 'vue';
import { initDefaultProps, getPropsSlot, findDOMNode } from '../_util/props-util';
import { withInstall } from '../_util/type';
import { getOffsetLeft } from './util';
@ -39,6 +30,7 @@ export type RateProps = Partial<ExtractPropTypes<typeof rateProps>>;
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(
<Star
ref={setRef}
ref={(r: any) => 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}

2
components/rate/util.ts
Unescape View File

@ -1,5 +1,3 @@
/* eslint-disable import/prefer-default-export */
function getScroll(w: Window) {
let ret = w.pageXOffset;
const method = 'scrollLeft';

2
v2-doc

@ -1 +1 @@
Subproject commit 0f6d531d088d5283250c8cec1c7e8be0e0d36a36
Subproject commit 001bf204ea9b389f1ab7ec1ce23cd6243db64251
Write Preview
Loading…
Cancel
Save