feat(cascader): adds render-prefix & render-suffix props

jahnli · Apr 23, 2024 · d1d306c · d1d306c
1 parent 4845729
commit d1d306c
Show file tree

Hide file tree

Showing 14 changed files with 215 additions and 138 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -33,6 +33,8 @@
 - `n-scrollbar` adds `content-style` and `content-class` props, closes [#4497](https://github.com/tusen-ai/naive-ui/issues/4497).
 - `n-image` adds `render-toolbar` prop.
 - `n-cascader` adds `get-column-style` prop.
+- `n-cascader` adds `get-render-prefix` prop.
+- `n-cascader` adds `get-render-suffix` prop.
 - `n-image` optimizes download icon style.
 
 ## 2.38.1

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -33,6 +33,8 @@
 - `n-scrollbar` 新增 `content-style` 和 `content-class` 属性，关闭 [#4497](https://github.com/tusen-ai/naive-ui/issues/4497)
 - `n-image` 新增 `render-toolbar` 属性
 - `n-cascader` 新增 `get-column-width` 属性
+- `n-cascader` 新增 `render-prefix` 属性
+- `n-cascader` 新增 `render-suffix` 属性
 - `n-image` 优化下载按钮图标
 
 ## 2.38.1

diff --git a/src/cascader/demos/enUS/index.demo-entry.md b/src/cascader/demos/enUS/index.demo-entry.md
@@ -49,7 +49,9 @@ status.vue
 | placeholder | `string` | `'Please Select'` | Placeholder text. |  |
 | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | Cascader placement. | 2.25.0 |
 | remote | `boolean` | `false` | Whether to obtain data remotely. |  |
+| render-prefix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | Render function of all the options' prefix. | NEXT_VERSION |
 | render-label | `(option: CascaderOption, checked: boolean) => VNodeChild` | `undefined` | Render function for cascader menu option label. | 2.24.0 |
+| render-suffix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | Render function of all the options' suffix. | NEXT_VERSION |
 | separator | `string` | `' / '` | Selected option path value separator (used with `show-path`). |  |
 | show | `boolean` | `undefined` | Whether to show the menu. |  |
 | show-path | `boolean` | `true` | Whether to show the selected options as a path. |  |

diff --git a/src/cascader/demos/zhCN/index.demo-entry.md b/src/cascader/demos/zhCN/index.demo-entry.md
@@ -50,7 +50,9 @@ default-value-debug.vue
 | placeholder | `string` | `'请选择'` | 提示信息 |  |
 | placement | `'top-start' \| 'top' \| 'top-end' \| 'right-start' \| 'right' \| 'right-end' \| 'bottom-start' \| 'bottom' \| 'bottom-end' \| 'left-start' \| 'left' \| 'left-end'` | `'bottom-start'` | 弹出位置 | 2.25.0 |
 | remote | `boolean` | `false` | 是否远程获取数据 |  |
+| render-prefix | `(info: { option: CascaderOption, node: VNode \| null, checked: boolean }) => VNodeChild` | `undefined` | 节点前缀的渲染函数 | NEXT_VERSION |
 | render-label | `(option: CascaderOption, checked: boolean) => VNodeChild` | `undefined` | Cascader 菜单选项标签渲染函数 | 2.24.0 |
+| render-suffix | `(info: { option: CascaderOption, checked: boolean }) => VNodeChild` | `undefined` | 节点后缀的渲染函数 | NEXT_VERSION |
 | separator | `string` | `' / '` | 数据分隔符 |  |
 | show | `boolean` | `undefined` | 是否打开菜单 |  |
 | show-path | `boolean` | `true` | 是否在选择器中显示选项路径 |  |

diff --git a/src/cascader/src/Cascader.tsx b/src/cascader/src/Cascader.tsx
@@ -12,7 +12,8 @@ import {
   watchEffect,
   type VNodeChild,
   type HTMLAttributes,
-  nextTick
+  nextTick,
+  type VNode
 } from 'vue'
 import {
   createTreeMate,
@@ -172,6 +173,20 @@ export const cascaderProps = {
   getColumnStyle: Function as PropType<
   (detail: { level: number }) => string | CSSProperties
   >,
+  renderPrefix: Function as PropType<
+  (props: {
+    option: CascaderOption
+    checked: boolean
+    node: VNode | null
+  }) => VNodeChild
+  >,
+  renderSuffix: Function as PropType<
+  (props: {
+    option: CascaderOption
+    checked: boolean
+    node: VNode | null
+  }) => VNodeChild
+  >,
   // deprecated
   onChange: [Function, Array] as PropType<MaybeArray<OnUpdateValue> | undefined>
 } as const
@@ -877,6 +892,8 @@ export default defineComponent({
       labelFieldRef: toRef(props, 'labelField'),
       renderLabelRef: toRef(props, 'renderLabel'),
       getColumnStyleRef: toRef(props, 'getColumnStyle'),
+      renderPrefixRef: toRef(props, 'renderPrefix'),
+      renderSuffixRef: toRef(props, 'renderSuffix'),
       syncCascaderMenuPosition,
       syncSelectMenuPosition,
       updateKeyboardKey,

diff --git a/src/cascader/src/CascaderOption.tsx b/src/cascader/src/CascaderOption.tsx
@@ -4,7 +4,8 @@ import {
   inject,
   defineComponent,
   type PropType,
-  Transition
+  Transition,
+  type VNode
 } from 'vue'
 import { useMemo } from 'vooks'
 import { NCheckbox } from '../../checkbox'
@@ -39,6 +40,8 @@ export default defineComponent({
       mergedThemeRef,
       labelFieldRef,
       showCheckboxRef,
+      renderPrefixRef,
+      renderSuffixRef,
       updateHoverKey,
       updateKeyboardKey,
       addLoadingKey,
@@ -171,88 +174,121 @@ export default defineComponent({
       handleCheckboxUpdateValue,
       mergedHandleMouseEnter: mergedHandleMouseEnterRef,
       mergedHandleMouseMove: mergedHandleMouseMoveRef,
-      renderLabel: renderLabelRef
+      renderLabel: renderLabelRef,
+      renderPrefix: renderPrefixRef,
+      renderSuffix: renderSuffixRef
     }
   },
   render () {
-    const { mergedClsPrefix, renderLabel } = this
+    const {
+      mergedClsPrefix,
+      showCheckbox,
+      renderLabel,
+      renderPrefix,
+      renderSuffix
+    } = this
+
+    let prefixNode: VNode | null = null
+    if (showCheckbox || renderPrefix) {
+      const originalNode = this.showCheckbox ? (
+        <NCheckbox
+          focusable={false}
+          data-checkbox
+          disabled={this.disabled}
+          checked={this.checked}
+          indeterminate={this.indeterminate}
+          theme={this.mergedTheme.peers.Checkbox}
+          themeOverrides={this.mergedTheme.peerOverrides.Checkbox}
+          onUpdateChecked={this.handleCheckboxUpdateValue}
+        />
+      ) : null
+      prefixNode = (
+        <div class={`${mergedClsPrefix}-cascader-option__prefix`}>
+          {renderPrefix
+            ? renderPrefix({
+              option: this.tmNode.rawNode,
+              checked: this.checked,
+              node: originalNode
+            })
+            : originalNode}
+        </div>
+      )
+    }
+    let suffixNode: VNode | null = null
+    const originalSuffixChild = (
+      <div class={`${mergedClsPrefix}-cascader-option-icon-placeholder`}>
+        {!this.isLeaf ? (
+          <NBaseLoading
+            clsPrefix={mergedClsPrefix}
+            scale={0.85}
+            strokeWidth={24}
+            show={this.isLoading}
+            class={`${mergedClsPrefix}-cascader-option-icon`}
+          >
+            {{
+              default: () => (
+                <NBaseIcon
+                  clsPrefix={mergedClsPrefix}
+                  key="arrow"
+                  class={`${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--arrow`}
+                >
+                  {{
+                    default: () => <ChevronRightIcon />
+                  }}
+                </NBaseIcon>
+              )
+            }}
+          </NBaseLoading>
+        ) : this.checkStrategy === 'child' &&
+          !(this.multiple && this.cascade) ? (
+          <Transition name="fade-in-scale-up-transition">
+            {{
+              default: () =>
+                this.checked ? (
+                  <NBaseIcon
+                    clsPrefix={mergedClsPrefix}
+                    class={`${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--checkmark`}
+                  >
+                    {{ default: () => <CheckmarkIcon /> }}
+                  </NBaseIcon>
+                ) : null
+            }}
+          </Transition>
+            ) : null}
+      </div>
+    )
+    suffixNode = (
+      <div class={`${mergedClsPrefix}-cascader-option__suffix`}>
+        {renderSuffix
+          ? renderSuffix({
+            option: this.tmNode.rawNode,
+            checked: this.checked,
+            node: originalSuffixChild
+          })
+          : originalSuffixChild}
+      </div>
+    )
     return (
       <div
         class={[
           `${mergedClsPrefix}-cascader-option`,
-          {
-            [`${mergedClsPrefix}-cascader-option--pending`]:
-              this.keyboardPending || this.hoverPending,
-            [`${mergedClsPrefix}-cascader-option--disabled`]: this.disabled,
-            [`${mergedClsPrefix}-cascader-option--show-prefix`]:
-              this.showCheckbox
-          }
+          this.keyboardPending ||
+            (this.hoverPending &&
+              `${mergedClsPrefix}-cascader-option--pending`),
+          this.disabled && `${mergedClsPrefix}-cascader-option--disabled`,
+          this.showCheckbox && `${mergedClsPrefix}-cascader-option--show-prefix`
         ]}
         onMouseenter={this.mergedHandleMouseEnter}
         onMousemove={this.mergedHandleMouseMove}
         onClick={this.handleClick}
       >
-        {this.showCheckbox ? (
-          <div class={`${mergedClsPrefix}-cascader-option__prefix`}>
-            <NCheckbox
-              focusable={false}
-              data-checkbox
-              disabled={this.disabled}
-              checked={this.checked}
-              indeterminate={this.indeterminate}
-              theme={this.mergedTheme.peers.Checkbox}
-              themeOverrides={this.mergedTheme.peerOverrides.Checkbox}
-              onUpdateChecked={this.handleCheckboxUpdateValue}
-            />
-          </div>
-        ) : null}
+        {prefixNode}
         <span class={`${mergedClsPrefix}-cascader-option__label`}>
           {renderLabel
             ? renderLabel(this.tmNode.rawNode, this.checked)
             : this.label}
         </span>
-        <div class={`${mergedClsPrefix}-cascader-option__suffix`}>
-          <div class={`${mergedClsPrefix}-cascader-option-icon-placeholder`}>
-            {!this.isLeaf ? (
-              <NBaseLoading
-                clsPrefix={mergedClsPrefix}
-                scale={0.85}
-                strokeWidth={24}
-                show={this.isLoading}
-                class={`${mergedClsPrefix}-cascader-option-icon`}
-              >
-                {{
-                  default: () => (
-                    <NBaseIcon
-                      clsPrefix={mergedClsPrefix}
-                      key="arrow"
-                      class={`${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--arrow`}
-                    >
-                      {{
-                        default: () => <ChevronRightIcon />
-                      }}
-                    </NBaseIcon>
-                  )
-                }}
-              </NBaseLoading>
-            ) : this.checkStrategy === 'child' &&
-              !(this.multiple && this.cascade) ? (
-              <Transition name="fade-in-scale-up-transition">
-                {{
-                  default: () =>
-                    this.checked ? (
-                      <NBaseIcon
-                        clsPrefix={mergedClsPrefix}
-                        class={`${mergedClsPrefix}-cascader-option-icon ${mergedClsPrefix}-cascader-option-icon--checkmark`}
-                      >
-                        {{ default: () => <CheckmarkIcon /> }}
-                      </NBaseIcon>
-                    ) : null
-                }}
-              </Transition>
-                ) : null}
-          </div>
-        </div>
+        {suffixNode}
       </div>
     )
   }

diff --git a/src/cascader/src/interface.ts b/src/cascader/src/interface.ts
@@ -2,7 +2,7 @@ import type { CheckStrategy, TreeNode } from 'treemate'
 import type { MergedTheme } from '../../_mixins'
 import type { NLocale } from '../../locales'
 import type { CascaderTheme } from '../styles'
-import type { CSSProperties, Ref, Slots, VNodeChild } from 'vue'
+import type { CSSProperties, Ref, Slots, VNode, VNodeChild } from 'vue'
 import { createInjectionKey } from '../../_utils'
 
 export type ValueAtom = string | number
@@ -82,6 +82,22 @@ export interface CascaderInjection {
   getColumnStyleRef: Ref<
   ((detail: { level: number }) => string | CSSProperties) | undefined
   >
+  renderPrefixRef: Ref<
+  | ((info: {
+    option: CascaderOption
+    checked: boolean
+    node: VNode | null
+  }) => VNodeChild)
+  | undefined
+  >
+  renderSuffixRef: Ref<
+  | ((info: {
+    option: CascaderOption
+    checked: boolean
+    node: VNode | null
+  }) => VNodeChild)
+  | undefined
+  >
   syncCascaderMenuPosition: () => void
   syncSelectMenuPosition: () => void
   updateKeyboardKey: (value: Key | null) => void