mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-30 12:52:43 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(rate): refactor half

Browse Source
This commit is contained in:
07akioni 2021-07-10 01:08:25 +08:00
parent 675cee20a6
commit 199061c9b4
2 changed files with 64 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

125
src/rate/src/Rate.tsx
View File

@ -77,26 +77,28 @@ export default defineComponent({
nTriggerFormChange()
nTriggerFormInput()
}
function handleMouseMove (
index: number,
offset: number,
size: number
): void {
function getDerivedValue (index: number, e: MouseEvent): number {
if (props.allowHalf) {
if (offset >= Math.floor(size / 2)) {
hoverIndexRef.value = index + 1
if (
e.offsetX >=
Math.floor((e.currentTarget as HTMLDivElement).offsetWidth / 2)
) {
return index + 1
} else {
hoverIndexRef.value = index + 0.5
return index + 0.5
}
} else {
hoverIndexRef.value = index + 1
return index + 1
}
}
function handleMouseMove (index: number, e: MouseEvent): void {
hoverIndexRef.value = getDerivedValue(index, e)
}
function handleMouseLeave (): void {
hoverIndexRef.value = null
}
function handleClick (index: number): void {
doUpdateValue(index + 1)
function handleClick (index: number, e: MouseEvent): void {
doUpdateValue(getDerivedValue(index, e))
}
function handleHalfClick (index: number): void {
doUpdateValue(index + 0.5)
@ -144,61 +146,52 @@ export default defineComponent({
style={this.cssVars as CSSProperties}
onMouseleave={this.handleMouseLeave}
>
{renderList(this.count, (_, index) => (
<div
key={index}
class={[
`${mergedClsPrefix}-rate__item`,
{
[`${mergedClsPrefix}-rate__item--active`]:
hoverIndex !== null
? index + 1 <= hoverIndex
: index + 1 <= mergedValue
}
]}
onClick={() => this.handleClick(index)}
onMousemove={(e) => {
this.handleMouseMove(
index,
e.offsetX,
(e.currentTarget as HTMLDivElement).offsetWidth
)
}}
>
{defaultSlot ? (
defaultSlot()
) : (
<NBaseIcon clsPrefix={mergedClsPrefix}>
{{ default: () => StarIcon }}
</NBaseIcon>
)}
{this.allowHalf ? (
<div
class={[
`${mergedClsPrefix}-rate__item__left`,
{
[`${mergedClsPrefix}-rate__item__left--active`]:
hoverIndex !== null
? index + 0.5 <= hoverIndex
: index + 0.5 <= mergedValue
}
]}
onClick={(e) => {
e.stopPropagation()
this.handleHalfClick(index)
}}
>
{defaultSlot ? (
defaultSlot()
) : (
<NBaseIcon clsPrefix={mergedClsPrefix}>
{{ default: () => StarIcon }}
</NBaseIcon>
)}
</div>
) : null}
</div>
))}
{renderList(this.count, (_, index) => {
const icon = defaultSlot ? (
defaultSlot()
) : (
<NBaseIcon clsPrefix={mergedClsPrefix}>
{{ default: () => StarIcon }}
</NBaseIcon>
)
return (
<div
key={index}
class={[
`${mergedClsPrefix}-rate__item`,
{
[`${mergedClsPrefix}-rate__item--active`]:
hoverIndex !== null
? index + 1 <= hoverIndex
: index + 1 <= mergedValue
}
]}
onClick={(e) => {
this.handleClick(index, e)
}}
onMousemove={(e) => {
this.handleMouseMove(index, e)
}}
>
{icon}
{this.allowHalf ? (
<div
class={[
`${mergedClsPrefix}-rate__half`,
{
[`${mergedClsPrefix}-rate__half--active`]:
hoverIndex !== null
? index + 0.5 <= hoverIndex
: index + 0.5 <= mergedValue
}
]}
>
{icon}
</div>
) : null}
</div>
)
})}
</div>
)
}

16
src/rate/src/styles/index.cssr.ts
View File

@ -12,7 +12,7 @@ export default cB('rate', {
cE('item', `
transition:
transform .1s var(--bezier),
color .1s var(--bezier);
color .3s var(--bezier);
`)
]),
cE('item', `
@ -39,23 +39,17 @@ export default cB('rate', {
color: 'var(--item-color-active)'
})
]),
cE('item__left', `
display: inherit;
cE('half', `
display: flex;
transition: inherit;
transform: inherit;
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 50%;
height: 100%;
overflow: hidden;
color: var(--item-color);
`, [
c('&:hover', {
transform: 'scale(1.05)'
}),
c('&:active', {
transform: 'scale(0.96)'
}),
cM('active', {
color: 'var(--item-color-active)'
})