fix(color-picker): change modes not working

CHANGELOG.en-US.md

@@ -3,12 +3,14 @@
 ## Pending
 
 ### Fixes
+
 - Fix `n-slider` doesn't support touch events
 - Fix `n-button` causes crash when it's imported in script inside head tag. [#68](https://github.com/TuSimple/naive-ui/pull/68)
 - Fix `n-spin` animation shifts.
 - Fix `n-menu` lack `on-update-value` and `on-update-expanded-keys` props.
 - Fix `n-popconfirm` icon slot not working.
 - Fix `n-tabs` logs useless info.
+- Fix `n-color-picker` set `modes` not working. [#77](https://github.com/TuSimple/naive-ui/issues/77)
 
 ## 2.11.5 (2021-06-10)
 

CHANGELOG.zh-CN.md

@@ -10,6 +10,7 @@
 - 修正 `n-menu` 缺少 `on-update-value` 和 `on-update-expanded-keys` 属性
 - 修正 `n-popconfirm` icon slot 不生效
 - 修正 `n-tabs` 在控制台输出无用信息
+- 修正 `n-color-picker` 设定 `modes` 无效 [#77](https://github.com/TuSimple/naive-ui/issues/77)
 
 ## 2.11.5 (2021-06-10)
 

src/color-picker/demos/enUS/index.demo-entry.md

@@ -8,6 +8,7 @@ Compared with real world, its space is discrete.
 basic
 alpha
 size
+modes
 form
 ```
 

src/color-picker/demos/enUS/modes.demo.md

@@ -0,0 +1,7 @@
+# Set Mode
+
+Use `modes` to set available modes.
+
+```html
+<n-color-picker :modes="['hex']" />
+```

src/color-picker/demos/zhCN/index.demo-entry.md

@@ -8,6 +8,7 @@
 basic
 alpha
 size
+modes
 form
 ```
 

src/color-picker/demos/zhCN/modes.demo.md

@@ -0,0 +1,7 @@
+# 设定模式
+
+使用 `modes` 设定可选模式。
+
+```html
+<n-color-picker :modes="['hex']" />
+```

src/color-picker/src/ColorInput.tsx

@@ -27,6 +27,10 @@ export default defineComponent({
       type: String as PropType<ColorPickerMode>,
       required: true
     },
+    modes: {
+      type: Array as PropType<ColorPickerMode[]>,
+      required: true
+    },
     showAlpha: {
       type: Boolean,
       required: true
@@ -37,7 +41,7 @@ export default defineComponent({
       default: null
     },
     valueArr: {
-      type: (Array as unknown) as PropType<HSVA | RGBA | HSLA | null>,
+      type: Array as unknown as PropType<HSVA | RGBA | HSLA | null>,
       default: null
     },
     onUpdateValue: {
@@ -89,12 +93,15 @@ export default defineComponent({
     }
   },
   render () {
-    const { clsPrefix } = this
+    const { clsPrefix, modes } = this
     return (
       <div class={`${clsPrefix}-color-picker-input`}>
         <div
           class={`${clsPrefix}-color-picker-input__mode`}
           onClick={this.onUpdateMode}
+          style={{
+            cursor: modes.length === 1 ? '' : 'pointer'
+          }}
         >
           {this.mode.toUpperCase() + (this.showAlpha ? 'A' : '')}
         </div>

src/color-picker/src/ColorPicker.tsx

@@ -163,33 +163,11 @@ export default defineComponent({
     function handleUpdateDisplayedMode (): void {
       const { modes } = props
       const { value: displayedMode } = displayedModeRef
-      switch (displayedMode) {
-        case 'rgb':
-          if (modes.includes('hex')) {
-            displayedModeRef.value = 'hex'
-            break
-          }
-        // eslint-disable-next-line no-fallthrough
-        case 'hex':
-          if (modes.includes('hsv')) {
-            displayedModeRef.value = 'hsv'
-            break
-          }
-        // eslint-disable-next-line no-fallthrough
-        case 'hsv':
-          if (modes.includes('hsl')) {
-            displayedModeRef.value = 'hsl'
-            break
-          }
-        // eslint-disable-next-line no-fallthrough
-        case 'hsl':
-          if (modes.includes('rgb')) {
-            displayedModeRef.value = 'rgb'
-            break
-          }
-        // eslint-disable-next-line no-fallthrough
-        default:
-          displayedModeRef.value = 'rgb'
+      const currentModeIndex = modes.findIndex((mode) => mode === displayedMode)
+      if (~currentModeIndex) {
+        displayedModeRef.value = modes[(currentModeIndex + 1) % modes.length]
+      } else {
+        displayedModeRef.value = 'rgb'
       }
     }
 
@@ -501,7 +479,7 @@ export default defineComponent({
     function renderPanel (): VNode {
       const { value: rgba } = rgbaRef
       const { value: displayedHue } = displayedHueRef
-      const { internalActions } = props
+      const { internalActions, modes } = props
       const { value: mergedTheme } = themeRef
       const { value: mergedClsPrefix } = mergedClsPrefixRef
       return (
@@ -540,6 +518,7 @@ export default defineComponent({
               clsPrefix={mergedClsPrefix}
               showAlpha={props.showAlpha}
               mode={displayedModeRef.value}
+              modes={modes}
               onUpdateMode={handleUpdateDisplayedMode}
               value={mergedValueRef.value}
               valueArr={mergedValueArrRef.value}

src/color-picker/src/styles/index.cssr.ts

@@ -120,7 +120,6 @@ export default c([
       flex-basis: 0;
     `),
     cE('mode', `
-      cursor: pointer;
       width: 72px;
       text-align: center;
     `)

src/color-picker/tests/ColorPicker.spec.tsx

@@ -0,0 +1,46 @@
+import { nextTick } from 'vue'
+import { mount } from '@vue/test-utils'
+import { NColorPicker } from '../index'
+
+describe('n-color-picker', () => {
+  it('should work with import on demand', () => {
+    mount(NColorPicker)
+  })
+  describe('props.modes', () => {
+    it('multiple modes', async () => {
+      const wrapper = mount(NColorPicker, {
+        attachTo: document.body,
+        props: {
+          modes: ['hex', 'hsl']
+        }
+      })
+      await wrapper.find('.n-color-picker-trigger').trigger('click')
+      expect(document.querySelector('.n-color-picker-panel')).not.toEqual(null)
+      const modeDom = document.querySelector('.n-color-picker-input__mode')
+      expect(modeDom?.textContent).toEqual('HEXA')
+      ;(modeDom as HTMLElement).click()
+      await nextTick()
+      expect(modeDom?.textContent).toEqual('HSLA')
+      ;(modeDom as HTMLElement).click()
+      await nextTick()
+      expect(modeDom?.textContent).toEqual('HEXA')
+      wrapper.unmount()
+    })
+    it('single mode', async () => {
+      const wrapper = mount(NColorPicker, {
+        attachTo: document.body,
+        props: {
+          modes: ['hex']
+        }
+      })
+      await wrapper.find('.n-color-picker-trigger').trigger('click')
+      expect(document.querySelector('.n-color-picker-panel')).not.toEqual(null)
+      const modeDom = document.querySelector('.n-color-picker-input__mode')
+      expect(modeDom?.textContent).toEqual('HEXA')
+      ;(modeDom as HTMLElement).click()
+      await nextTick()
+      expect(modeDom?.textContent).toEqual('HEXA')
+      wrapper.unmount()
+    })
+  })
+})