From 032a512b229c9ee3dec1ff7e6567617ee2f46955 Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 20 Apr 2021 19:31:04 +0800 Subject: [PATCH] fix(Rate): select half star correctly when clicked (#8580) * fix(Rate): select half star correctly when clicked * fix: failed to click * chore: upd --- src/form/test/__snapshots__/demo.spec.ts.snap | 20 +- src/rate/README.md | 2 +- src/rate/README.zh-CN.md | 2 +- src/rate/Rate.tsx | 70 +++--- src/rate/demo/index.vue | 8 +- src/rate/index.less | 1 - src/rate/test/__snapshots__/demo.spec.ts.snap | 218 ++++-------------- .../test/__snapshots__/index.spec.ts.snap | 20 +- src/rate/test/index.spec.ts | 17 +- 9 files changed, 93 insertions(+), 265 deletions(-) diff --git a/src/form/test/__snapshots__/demo.spec.ts.snap b/src/form/test/__snapshots__/demo.spec.ts.snap index aee7e5123..6c01b248f 100644 --- a/src/form/test/__snapshots__/demo.spec.ts.snap +++ b/src/form/test/__snapshots__/demo.spec.ts.snap @@ -308,9 +308,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - +
- +
- +
- +
- +
diff --git a/src/rate/README.md b/src/rate/README.md index f91033417..72aab94c2 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -56,7 +56,7 @@ export default { ### Half Star ```html - + ``` ```js diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md index 3bbe865b7..e180f9f3b 100644 --- a/src/rate/README.zh-CN.md +++ b/src/rate/README.zh-CN.md @@ -56,7 +56,7 @@ export default { ### 半星 ```html - + ``` ```js diff --git a/src/rate/Rate.tsx b/src/rate/Rate.tsx index e7ef69936..d5d19f567 100644 --- a/src/rate/Rate.tsx +++ b/src/rate/Rate.tsx @@ -16,8 +16,8 @@ const [name, bem] = createNamespace('rate'); type RateStatus = 'full' | 'half' | 'void'; type RateListItem = { - status: RateStatus; value: number; + status: RateStatus; }; function getRateStatus( @@ -80,8 +80,6 @@ export default defineComponent({ emits: ['change', 'update:modelValue'], setup(props, { emit }) { - let ranges: Array<{ left: number; score: number }>; - const touch = useTouch(); const [itemRefs, setItemRefs] = useRefs(); @@ -101,29 +99,9 @@ export default defineComponent({ ) ); - const select = (index: number) => { - if (!props.disabled && !props.readonly && index !== props.modelValue) { - emit('update:modelValue', index); - emit('change', index); - } - }; - - const getScoreByPosition = (x: number) => { - for (let i = ranges.length - 1; i > 0; i--) { - if (x > ranges[i].left) { - return ranges[i].score; - } - } - return props.allowHalf ? 0.5 : 1; - }; - - const onTouchStart = (event: TouchEvent) => { - if (untouchable()) { - return; - } - - touch.start(event); + let ranges: Array<{ left: number; score: number }>; + const updateRanges = () => { const rects = itemRefs.value.map((item) => item.getBoundingClientRect()); ranges = []; @@ -139,6 +117,31 @@ export default defineComponent({ }); }; + const getScoreByPosition = (x: number) => { + for (let i = ranges.length - 1; i > 0; i--) { + if (x > ranges[i].left) { + return ranges[i].score; + } + } + return props.allowHalf ? 0.5 : 1; + }; + + const select = (index: number) => { + if (!props.disabled && !props.readonly && index !== props.modelValue) { + emit('update:modelValue', index); + emit('change', index); + } + }; + + const onTouchStart = (event: TouchEvent) => { + if (untouchable()) { + return; + } + + touch.start(event); + updateRanges(); + }; + const onTouchMove = (event: TouchEvent) => { if (untouchable()) { return; @@ -170,6 +173,7 @@ export default defineComponent({ const score = index + 1; const isFull = item.status === 'full'; const isVoid = item.status === 'void'; + const renderHalf = allowHalf && item.value > 0 && item.value < 1; let style; if (gutter && score !== +count) { @@ -178,6 +182,11 @@ export default defineComponent({ }; } + const onClickItem = (event: MouseEvent) => { + updateRanges(); + select(allowHalf ? getScoreByPosition(event.clientX) : score); + }; + return (
{ - select(score); - }} /> - {allowHalf && ( + {renderHalf && ( { - select(score - 0.5); - }} /> )}
diff --git a/src/rate/demo/index.vue b/src/rate/demo/index.vue index 882073d8a..cbf15a517 100644 --- a/src/rate/demo/index.vue +++ b/src/rate/demo/index.vue @@ -18,13 +18,7 @@ - + diff --git a/src/rate/index.less b/src/rate/index.less index c02388165..208c0194b 100644 --- a/src/rate/index.less +++ b/src/rate/index.less @@ -23,7 +23,6 @@ position: absolute; top: 0; left: 0; - width: 0.5em; overflow: hidden; } diff --git a/src/rate/test/__snapshots__/demo.spec.ts.snap b/src/rate/test/__snapshots__/demo.spec.ts.snap index 5d8c74d03..fb302acfc 100644 --- a/src/rate/test/__snapshots__/demo.spec.ts.snap +++ b/src/rate/test/__snapshots__/demo.spec.ts.snap @@ -13,9 +13,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - +
- +
- +
- +
- +
@@ -80,9 +70,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - +
- +
- +
- +
- +
@@ -149,7 +129,6 @@ exports[`should render demo and match snapshot 1`] = ` > @@ -162,7 +141,6 @@ exports[`should render demo and match snapshot 1`] = ` > @@ -175,7 +153,6 @@ exports[`should render demo and match snapshot 1`] = ` > @@ -188,7 +165,6 @@ exports[`should render demo and match snapshot 1`] = ` > @@ -201,7 +177,6 @@ exports[`should render demo and match snapshot 1`] = ` > @@ -219,15 +194,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - - - +
- - - +
- +
@@ -273,15 +228,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="4" aria-checked="false" > - - - +
- - - +
@@ -316,9 +255,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - +
- +
- +
- +
- +
- +
@@ -395,9 +322,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - +
- +
- +
- +
- +
@@ -462,9 +379,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - +
- +
- +
- +
- +
@@ -529,14 +436,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - - - +
- - - +
- - - +
- +
@@ -597,14 +480,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="5" aria-checked="false" > - - - + @@ -621,9 +497,7 @@ exports[`should render demo and match snapshot 1`] = ` aria-posinset="1" aria-checked="true" > - +
- +
- +
- +
- +
diff --git a/src/rate/test/__snapshots__/index.spec.ts.snap b/src/rate/test/__snapshots__/index.spec.ts.snap index ad4f9b60e..5770ac22c 100644 --- a/src/rate/test/__snapshots__/index.spec.ts.snap +++ b/src/rate/test/__snapshots__/index.spec.ts.snap @@ -13,9 +13,7 @@ exports[`should render gutter when using gutter prop 1`] = ` aria-posinset="1" aria-checked="false" > - +
- +
- +
- +
- +
diff --git a/src/rate/test/index.spec.ts b/src/rate/test/index.spec.ts index 33fbe2870..b0dde45b6 100644 --- a/src/rate/test/index.spec.ts +++ b/src/rate/test/index.spec.ts @@ -42,19 +42,6 @@ test('should not emit change and update:modelValue event when rate is not change expect(wrapper.emitted('update:modelValue')).toBeFalsy(); }); -test('should allow half rate when using allow-half prop', () => { - const wrapper = mount(Rate, { - props: { - allowHalf: true, - }, - }); - - const item4 = wrapper.findAll('.van-rate__icon--half')[3]; - item4.trigger('click'); - expect(wrapper.emitted('change')![0]).toEqual([3.5]); - expect(wrapper.emitted('update:modelValue')![0]).toEqual([3.5]); -}); - test('should not emit change or update:modelValue event when rate is disabled', () => { const wrapper = mount(Rate, { props: { @@ -137,6 +124,6 @@ test('should get decimal when using allow-half and readonly prop', () => { }, }); - const item4 = wrapper.findAll('.van-rate__icon--half')[3]; - expect(item4.style.width).toEqual('0.3em'); + const halfIcon = wrapper.find('.van-rate__icon--half'); + expect(halfIcon.style.width).toEqual('0.3em'); });