From b4a1ab63c82f02a129dd74c330f0e9e52d69c920 Mon Sep 17 00:00:00 2001 From: doom-9 <65016011+doom-9@users.noreply.github.com> Date: Mon, 12 Jul 2021 22:37:57 +0800 Subject: [PATCH] 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 06277776933ed4e68b32d2651014458aca2e50f6. * Revert "feat:n-input Support hidden password" This reverts commit ea6491783dcc79e610534632a05b2894ded97494. * feat(rate): add disabled prop and clean code * feat(rate): add test * feat(rate): fix code * feat(rate): fix code * feat(rate): fix test --- CHANGELOG.en-US.md | 1 + CHANGELOG.zh-CN.md | 3 ++- src/rate/demos/enUS/index.demo-entry.md | 2 ++ src/rate/demos/enUS/readonly.demo.md | 5 ++++ src/rate/demos/zhCN/index.demo-entry.md | 2 ++ src/rate/demos/zhCN/readonly.demo.md | 5 ++++ src/rate/src/Rate.tsx | 33 ++++++++++++++++--------- src/rate/src/styles/index.cssr.ts | 23 ++++++++++------- src/rate/tests/Rate.spec.ts | 19 ++++++++++++++ 9 files changed, 72 insertions(+), 21 deletions(-) create mode 100644 src/rate/demos/enUS/readonly.demo.md create mode 100644 src/rate/demos/zhCN/readonly.demo.md diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md index f4c8313f149..aaa3a968f12 100644 --- 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 index eba5c4c098d..d73bc9f84cd 100644 --- 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 index 809290bcd70..0ee1016c6a6 100644 --- 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 new file mode 100644 index 00000000000..80f56959cfa --- /dev/null +++ b/src/rate/demos/enUS/readonly.demo.md @@ -0,0 +1,5 @@ +# Read only + +```html + +``` diff --git a/src/rate/demos/zhCN/index.demo-entry.md b/src/rate/demos/zhCN/index.demo-entry.md index d6006acef5f..e6c26376722 100644 --- 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 new file mode 100644 index 00000000000..988cb3e2a50 --- /dev/null +++ b/src/rate/demos/zhCN/readonly.demo.md @@ -0,0 +1,5 @@ +# 只读 + +```html + +``` diff --git a/src/rate/src/Rate.tsx b/src/rate/src/Rate.tsx index 566fe937103..6073de036fb 100644 --- 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, 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,6 +132,7 @@ export default defineComponent({ }, render () { const { + readonly, hoverIndex, mergedValue, mergedClsPrefix, @@ -142,7 +140,12 @@ export default defineComponent({ } = this return (
@@ -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 index 19d3175ae16..06023bed85e 100644 --- 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,15 +23,8 @@ 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' }), @@ -39,6 +32,18 @@ export default cB('rate', { 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 index 5d7918880ae..026bcd6eb5b 100644 --- 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() + }) })