feat(comp: transfer): add customAdditional (#872)

IDuxFE · May 5, 2022 · 84c4e61 · 84c4e61
1 parent 7a7d556
commit 84c4e61
Show file tree

Hide file tree

Showing 10 changed files with 317 additions and 305 deletions.
diff --git a/...ges/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap b/...ges/components/_private/checkable-list/__tests__/__snapshots__/checkableList.spec.ts.snap
@@ -5,104 +5,64 @@ exports[`CheckableList > render work 1`] = `
   <ul class=\\"ix-checkable-list-inner\\">
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"0\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-0</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"1\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-1</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"2\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-2</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"3\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-3</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"4\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-4</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"5\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-5</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"6\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-6</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"7\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-7</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"8\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-8</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"9\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-9</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"10\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-10</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"11\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-11</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"12\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-12</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"13\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-13</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"14\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-14</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"15\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-15</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"16\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-16</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"17\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-17</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"18\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-18</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
     <li class=\\"ix-checkable-list-item\\"><label class=\\"ix-checkbox ix-checkable-list-item-checkbox\\" role=\\"checkbox\\" aria-checked=\\"false\\" aria-disabled=\\"false\\"><span class=\\"ix-checkbox-input\\"><input type=\\"checkbox\\" class=\\"ix-checkbox-input-inner\\" aria-hidden=\\"true\\" value=\\"19\\"><span class=\\"ix-checkbox-input-box\\"></span></span><span class=\\"ix-checkbox-label\\">Option-19</span>
         <!---->
-      </label>
-      <!---->
-    </li>
+      </label></li>
   </ul>
 </div>"
 `;
diff --git a/packages/components/_private/checkable-list/src/CheckableList.tsx b/packages/components/_private/checkable-list/src/CheckableList.tsx
@@ -5,11 +5,9 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import type { VirtualScrollInstance } from '@idux/cdk/scroll'
-
 import { computed, defineComponent, normalizeClass, provide, ref } from 'vue'
 
-import { CdkVirtualScroll } from '@idux/cdk/scroll'
+import { CdkVirtualScroll, type VirtualItemRenderFn, type VirtualScrollInstance } from '@idux/cdk/scroll'
 import { callEmit } from '@idux/cdk/utils'
 import { useGlobalConfig } from '@idux/components/config'
 
@@ -47,7 +45,7 @@ export default defineComponent({
       callEmit(props.onScrolledChange, startIndex, endIndex, visibleData)
     }
 
-    const renderListItem = (item: CheckableListData) => {
+    const renderListItem: VirtualItemRenderFn<CheckableListData> = ({ item, index }) => {
       const key = getRowKey(item)
       const onCheckChange = (checked: boolean) => {
         callEmit(props.onCheckChange, item, checked)
@@ -56,6 +54,8 @@ export default defineComponent({
         callEmit(props.onRemove, item)
       }
 
+      const customAdditional = props.customAdditional ? props.customAdditional({ data: item, index }) : undefined
+
       return (
         <CheckableListItem
           key={key}
@@ -68,7 +68,8 @@ export default defineComponent({
           v-slots={{ default: slots.label && (() => slots.label?.(item)) }}
           onCheckChange={onCheckChange}
           onRemove={onRemove}
-          {...(item.additional ?? {})}
+          {...item.additional}
+          {...customAdditional}
         />
       )
     }
@@ -91,7 +92,7 @@ export default defineComponent({
             getKey={getRowKey}
             height={height as number}
             itemHeight={32}
-            itemRender={({ item }) => renderListItem(item)}
+            itemRender={renderListItem}
             virtual
             onScroll={handleScroll}
             onScrolledBottom={handleScrolledBottom}
@@ -102,7 +103,7 @@ export default defineComponent({
 
       return (
         <ul class={`${mergedPrefixCls.value}-inner`} onScroll={handleScroll}>
-          {data.map(item => renderListItem(item))}
+          {data.map((item, index) => renderListItem({ item, index }))}
         </ul>
       )
     }

diff --git a/packages/components/_private/checkable-list/src/CheckableListItem.tsx b/packages/components/_private/checkable-list/src/CheckableListItem.tsx
@@ -5,11 +5,12 @@
  * found in the LICENSE file at https://github.com/IDuxFE/idux/blob/main/LICENSE
  */
 
-import { computed, defineComponent, inject, normalizeClass } from 'vue'
+import { VNodeChild, computed, defineComponent, inject, normalizeClass } from 'vue'
 
 import { callEmit } from '@idux/cdk/utils'
 import { IxCheckbox } from '@idux/components/checkbox'
 import { IxIcon } from '@idux/components/icon'
+import { convertStringVNode } from '@idux/components/utils'
 
 import { checkableListContext } from './token'
 import { checkableListItemProps } from './types'
@@ -26,26 +27,6 @@ export default defineComponent({
       callEmit(props.onRemove)
     }
 
-    const renderLabel = (prefixCls: string) => {
-      const { checked, value, disabled, checkable } = props
-
-      if (checkable) {
-        return (
-          <IxCheckbox
-            class={`${prefixCls}-checkbox`}
-            v-slots={slots}
-            label={props.label}
-            value={value}
-            checked={checked}
-            disabled={disabled}
-            onChange={onCheckChange}
-          />
-        )
-      }
-
-      return <label class={`${prefixCls}-label`}>{slots.default?.() ?? props.label}</label>
-    }
-
     const classes = computed(() => {
       const prefixCls = `${mergedPrefixCls.value}-item`
 
@@ -58,14 +39,29 @@ export default defineComponent({
     return () => {
       const prefixCls = `${mergedPrefixCls.value}-item`
 
-      return (
-        <li class={classes.value}>
-          {renderLabel(prefixCls)}
-          {props.removable && !props.disabled && (
-            <IxIcon class={`${prefixCls}-close-icon`} name="close" onClick={onRemove} />
-          )}
-        </li>
-      )
+      const children: VNodeChild[] = []
+      if (props.checkable) {
+        children.push(
+          <IxCheckbox
+            class={`${prefixCls}-checkbox`}
+            v-slots={slots}
+            label={props.label}
+            value={props.value}
+            checked={props.checked}
+            disabled={props.disabled}
+            onChange={onCheckChange}
+          />,
+        )
+      } else {
+        const labelNode = convertStringVNode(slots.default, props.label)
+        children.push(<label class={`${prefixCls}-label`}>{labelNode}</label>)
+      }
+
+      if (props.removable && !props.disabled) {
+        children.push(<IxIcon class={`${prefixCls}-close-icon`} name="close" onClick={onRemove} />)
+      }
+
+      return <li class={classes.value}>{children}</li>
     }
   },
 })
diff --git a/packages/components/_private/checkable-list/src/types.ts b/packages/components/_private/checkable-list/src/types.ts
@@ -7,22 +7,15 @@
 
 import type { VirtualScrollToFn } from '@idux/cdk/scroll'
 import type { ExtractInnerPropTypes, ExtractPublicPropTypes } from '@idux/cdk/utils'
-import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { DefineComponent, HTMLAttributes, PropType } from 'vue'
 
 import { IxPropTypes, type VKey } from '@idux/cdk/utils'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export interface CheckableListData extends Record<VKey, any> {
+export interface CheckableListData {
   key?: VKey
   label?: string
   disabled?: boolean
-  additional?: {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    class?: any
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    style?: any
-    [key: string]: unknown
-  }
+  [key: string]: unknown
 }
 
 export interface CheckableListScroll {
@@ -35,6 +28,7 @@ export const checkableListProps = {
   checkable: IxPropTypes.bool.def(true),
   removable: IxPropTypes.bool.def(false),
   checked: IxPropTypes.func<(item: CheckableListData) => boolean>(),
+  customAdditional: { type: Object as PropType<CheckableListCustomAdditional>, default: undefined },
   disabled: IxPropTypes.func<(item: CheckableListData) => boolean>(),
   getRowKey: IxPropTypes.func<(item: CheckableListData) => VKey>(),
   virtual: IxPropTypes.bool,
@@ -69,3 +63,9 @@ export type CheckableListComponent = DefineComponent<
   CheckableListApi
 >
 export type CheckableListInstance = InstanceType<DefineComponent<CheckableListProps, CheckableListApi>>
+
+export type CheckableListCustomAdditional = (options: {
+  data: CheckableListData
+  index: number
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+}) => Record<string, any> | undefined