feat(rate): add disabled prop and clean code #474
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/tusimple/naive-ui/7mZ5dEwoAGSFBJiRmaZNEN7YH1vi |
Codecov Report
@@ Coverage Diff @@
## main #474 +/- ##
==========================================
+ Coverage 37.05% 37.06% +0.01%
==========================================
Files 507 507
Lines 12179 12180 +1
Branches 3351 3353 +2
==========================================
+ Hits 4513 4515 +2
+ Misses 6804 6803 -1
Partials 862 862
Continue to review full report at Codecov.
|
|
add test cases |
src/rate/src/Rate.tsx
Outdated
| onClick={(e) => { | ||
| this.handleClick(index, e) | ||
| !disabled && this.handleClick(index, e) | ||
| }} | ||
| onMousemove={(e) => { | ||
| this.handleMouseMove(index, e) | ||
| !disabled && this.handleMouseMove(index, e) | ||
| }} |
There was a problem hiding this comment.
话说都在这里用到了 disabled，那么不如直接在事件处理器层面优化一下
例如 :onMousemove={disabled ? undefined : (e) => { this.handleMouseMove(index, e) }}，这种写法虽然在事件太多的时候可能记不起来，但是在事件少的时候性能会（无法感知）的稍微好一点。
src/rate/demos/enUS/disabled.demo.md
Outdated
| @@ -0,0 +1,5 @@ | |||
| # Read only | |||
There was a problem hiding this comment.
readonly and disabled are 2 different concept. In the PR, readonly prop is better than disabled.
Compared with readonly, disabled awalys means different looking.
src/rate/demos/enUS/disabled.demo.md
Outdated
| # Read only | ||
|
|
||
| ```html | ||
| <n-rate disabled :default-value="3" /> |
There was a problem hiding this comment.
| <n-rate disabled :default-value="3" /> | |
| <n-rate readonly :default-value="3" /> |
| c('&:active', { | ||
| transform: 'none' | ||
| }) | ||
| ]) | ||
| ]), | ||
| cE('half', ` |
There was a problem hiding this comment.
| cE('half', ` | |
| cNotM('readonly', [ | |
| cE('item', [ | |
| c('&:hover', transform: 'scale(1.05)')... | |
| ]) | |
| ]), | |
| cE('half', ` |
src/rate/src/styles/index.cssr.ts
Outdated
| cM('disabled', { | ||
| cursor: 'default' | ||
| }, [ | ||
| c('&:hover', { | ||
| transform: 'none' | ||
| }), | ||
| c('&:active', { | ||
| transform: 'none' | ||
| }) | ||
| ]) |
There was a problem hiding this comment.
readonly 这种样式尽量加到最外层，因为全局生效的，除非不得不局部控制，比如说 tree，我们尽量把类都写在根部。
|
以后可以尝试使用 |
|
No description provided.