feat(rate): add disabled prop and clean code (#474)

* feat:n-input Support hidden password * feat(form): support require-mark-placement(#171) * Revert "feat(form): support require-mark-placement(#171)" This reverts commit 0627777. * Revert "feat:n-input Support hidden password" This reverts commit ea64917. * feat(rate): add disabled prop and clean code * feat(rate): add test * feat(rate): fix code * feat(rate): fix code * feat(rate): fix test
tusen-ai · Jul 12, 2021 · b4a1ab6 · b4a1ab6
1 parent 6ff56c5
commit b4a1ab6
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 21 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -7,6 +7,7 @@
 - `n-rate` add `allow-half` prop.
 - `n-carousel` add `show-arrow` prop.
 - `n-slider` add `format-tooltip` prop.
+- `n-rate` add `readonly` prop.
 
 ### Fixes
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -6,7 +6,8 @@
 
 - `n-rate` 新增 `allow-half` 属性
 - `n-carousel` 新增 `show-arrow` 属性
-- `n-slider` 新增 `format-tooltip` 属性.
+- `n-slider` 新增 `format-tooltip` 属性
+- `n-rate` 新增 `readonly` 属性
 
 ### Fixes
 

diff --git a/src/rate/demos/enUS/index.demo-entry.md b/src/rate/demos/enUS/index.demo-entry.md
@@ -10,6 +10,7 @@ size
 color
 icon
 allow-half
+readonly
 ```
 
 ## Props
@@ -20,6 +21,7 @@ allow-half
 | color | `string` | `undefined` | Icon color activated(support `#FFF`, `#FFFFFF`, `yellow`,`rgb(0, 0, 0)` formatted colors). |
 | count | `number` | `5` | Icon count. |
 | default-value | `number` | `0` | Value of activated icons by default. |
+| readonly | `boolean` | `false` | Read only. |
 | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | Icon size. |
 | value | `number` | `undefined` | Value of activated icons. |
 | on-update:value | `(value: number) => void` | `undefined` | Callback when update value. |

diff --git a/src/rate/demos/enUS/readonly.demo.md b/src/rate/demos/enUS/readonly.demo.md
@@ -0,0 +1,5 @@
+# Read only
+
+```html
+<n-rate readonly :default-value="3" />
+```
diff --git a/src/rate/demos/zhCN/index.demo-entry.md b/src/rate/demos/zhCN/index.demo-entry.md
@@ -10,6 +10,7 @@ size
 color
 icon
 allow-half
+readonly
 ```
 
 ## Props
@@ -20,6 +21,7 @@ allow-half
 | color | `string` | `undefined` | 已激活图标颜色（支持形如 `#FFF`， `#FFFFFF`， `yellow`，`rgb(0, 0, 0)` 的颜色） |
 | count | `number` | `5` | 图标个数 |
 | default-value | `number` | `0` | 默认已激活图标个数 |
+| readonly | `boolean` | `false` | 只读，交互失效 |
 | size | `'small' \| 'medium' \| 'large' \| number` | `'medium'` | 图标尺寸 |
 | value | `number` | `undefined` | 绑定已激活图标个数 |
 | on-update:value | `(value: number) => void` | `undefined` | 激活图标个数改变时触发 |

diff --git a/src/rate/demos/zhCN/readonly.demo.md b/src/rate/demos/zhCN/readonly.demo.md
@@ -0,0 +1,5 @@
+# 只读
+
+```html
+<n-rate readonly :default-value="3" />
+```
diff --git a/src/rate/src/Rate.tsx b/src/rate/src/Rate.tsx
@@ -31,6 +31,7 @@ const rateProps = {
     type: Number,
     default: 0
   },
+  readonly: Boolean,
   size: {
     type: [String, Number] as PropType<number | 'small' | 'medium' | 'large'>,
     default: 'medium'
@@ -100,16 +101,12 @@ export default defineComponent({
     function handleClick (index: number, e: MouseEvent): void {
       doUpdateValue(getDerivedValue(index, e))
     }
-    function handleHalfClick (index: number): void {
-      doUpdateValue(index + 0.5)
-    }
     return {
       mergedClsPrefix: mergedClsPrefixRef,
       mergedValue: useMergedState(controlledValueRef, uncontrolledValueRef),
       hoverIndex: hoverIndexRef,
       handleMouseMove,
       handleClick,
-      handleHalfClick,
       handleMouseLeave,
       cssVars: computed(() => {
         const { size } = props
@@ -135,14 +132,20 @@ export default defineComponent({
   },
   render () {
     const {
+      readonly,
       hoverIndex,
       mergedValue,
       mergedClsPrefix,
       $slots: { default: defaultSlot }
     } = this
     return (
       <div
-        class={`${mergedClsPrefix}-rate`}
+        class={[
+          `${mergedClsPrefix}-rate`,
+          {
+            [`${mergedClsPrefix}-rate--readonly`]: readonly
+          }
+        ]}
         style={this.cssVars as CSSProperties}
         onMouseleave={this.handleMouseLeave}
       >
@@ -166,12 +169,20 @@ export default defineComponent({
                       : index + 1 <= mergedValue
                 }
               ]}
-              onClick={(e) => {
-                this.handleClick(index, e)
-              }}
-              onMousemove={(e) => {
-                this.handleMouseMove(index, e)
-              }}
+              onClick={
+                readonly
+                  ? undefined
+                  : (e) => {
+                      this.handleClick(index, e)
+                    }
+              }
+              onMousemove={
+                readonly
+                  ? undefined
+                  : (e) => {
+                      this.handleMouseMove(index, e)
+                    }
+              }
             >
               {icon}
               {this.allowHalf ? (

diff --git a/src/rate/src/styles/index.cssr.ts b/src/rate/src/styles/index.cssr.ts
@@ -1,4 +1,4 @@
-import { c, cB, cE, cM } from '../../../_utils/cssr'
+import { c, cB, cE, cM, cNotM } from '../../../_utils/cssr'
 
 // vars:
 // --bezier
@@ -23,22 +23,27 @@ export default cB('rate', {
       color .3s var(--bezier);
     transform: scale(1);
     font-size: var(--item-size);
-    cursor: pointer;
     color: var(--item-color);
   `, [
-    c('&:hover', {
-      transform: 'scale(1.05)'
-    }),
-    c('&:active', {
-      transform: 'scale(0.96)'
-    }),
     c('&:not(:first-child)', {
       marginLeft: '6px'
     }),
     cM('active', {
       color: 'var(--item-color-active)'
     })
   ]),
+  cNotM('readonly', `
+    cursor: pointer;
+  `, [
+    cE('item', [
+      c('&:hover', {
+        transform: 'scale(1.05)'
+      }),
+      c('&:active', {
+        transform: 'scale(0.96)'
+      })
+    ])
+  ]),
   cE('half', `
     display: flex;
     transition: inherit;
@@ -49,7 +54,7 @@ export default cB('rate', {
     width: 50%;
     overflow: hidden;
     color: var(--item-color);
-`, [
+  `, [
     cM('active', {
       color: 'var(--item-color-active)'
     })

diff --git a/src/rate/tests/Rate.spec.ts b/src/rate/tests/Rate.spec.ts
@@ -79,4 +79,23 @@ describe('n-rate', () => {
 
     wrapper.unmount()
   })
+
+  it('should work with `readonly` prop', async () => {
+    const wrapper = mount(NRate)
+
+    await wrapper.setProps({ readonly: true })
+
+    expect(wrapper.find('.n-rate').classes()).toContain('n-rate--readonly')
+
+    await wrapper.setProps({ readonly: true, value: 3 })
+    expect(wrapper.findAll('.n-rate__item--active').length).toBe(3)
+
+    await wrapper.findAll('.n-rate__item')[3].trigger('click')
+    expect(wrapper.findAll('.n-rate__item--active').length).toBe(3)
+
+    await wrapper.findAll('.n-rate__item')[3].trigger('mousemove')
+    expect(wrapper.findAll('.n-rate__item--active').length).toBe(3)
+
+    wrapper.unmount()
+  })
 })