cnd-components-mcp/componentData/components/CndTransfer.md

An MCP service for Cnd components query | 一个减少 Cnd 组件代码生成幻觉的 MCP 服务，包含系统提示词、组件文档、API 文档、代码示例和更新日志查询

---
group:
  title: 云原生业务组件
---
# CndTransfer 穿梭框

## 代码库地址
https://code.alibaba-inc.com/cn-lowcode/cnd-transfer

## 基本使用

```tsx preview
import React, { useState }  from "react";
import { CndTransfer } from "@ali/cnd";

const Demo = () => {
  const [values, setValues] = useState([]);
  const largeData = Array.from({length: 1000}).map((_v, i) => ({
    label: `Service ${i}`, value: `Service ${i}`, 
  }));
  return (
    <div style={{width: "400px"}}>
      <CndTransfer 
        titles={['选择服务', '已选择']}
        dataSource={largeData} 
        value={values}
        onChecked={setValues}
        checkedAllButton={{
          show: true,
          text: `已选择${values.length}项`
        }}
        clearAllButton={{
          show: true,
          text: '清空',
        }}
      />
    </div>
  )
};

export default Demo;
```

## 选项禁用

```tsx preview
import React, { useState }  from "react";
import { CndTransfer } from "@ali/cnd";

const Demo = () => {
  const [values, setValues] = useState([]);
  const largeData = Array.from({length: 100}).map((_v, i) => ({
    label: `Service ${i}`, value: `Service ${i}`, disabled: i % 2 === 0
  }));
  return (
    <div style={{width: "400px"}}>
      <CndTransfer 
        titles={[
           '选择服务',
           '已选择'
          ]}
        dataSource={largeData} 
        value={values}
        onChecked={setValues}
        checkedAllButton={{
          show: true,
          text: `已选择${values.length}项`
        }}
      />
    </div>
  )
};

export default Demo;
```

## 隐藏全选

```tsx preview
import  React, { useState } from "react";
import { CndTransfer } from "@ali/cnd";

const Demo = () => {
  const [values, setValues] = useState([]);
  const largeData = Array.from({length: 100}).map((_v, i) => ({
    label: `Service ${i}`, value: `Service ${i}`
  }));
  return (
    <div style={{width: "400px"}}>
      <CndTransfer 
        titles={['选择服务', '已选择']}
        dataSource={largeData} 
        value={values}
        onChecked={setValues}
        checkedAllButton={{
          show: false,
        }}
      />
    </div>
  )
};

export default Demo;
```

## 回车添加

```tsx preview
import React, { useState } from "react";
import { CndTransfer } from "@ali/cnd";

const Demo = () => {
  const [values, setValues] = useState([]);
  const [dataSource, setDataSource] = useState(() => Array.from({length: 10}).map((_v, i) => ({
    label: `Service ${i}`, value: `Service ${i}`
  })));
  const [loading, setLoading] = useState(false);
  const handleRefresh = () => {
    setLoading(true);
    setTimeout(() => {
      setLoading(false);
    }, 1000)
  }
  const handlePressEnter = (evt) => {
    const value = evt.target.value;
    setDataSource([...dataSource, {label: value, value}]);
    setValues([...values, value])
  }
  return (
    <div style={{width: "400px"}}>
      <CndTransfer 
        titles={[ 
          <div style={{display: 'flex', justifyContent: 'space-between'}}>
            <span>选择服务</span>
            <span  onClick={handleRefresh} >Refresh</span>
          </div>, 
          '已选择'
        ]}
        dataSource={dataSource} 
        value={values}
        onChecked={setValues}
        checkedAllButton={{
          show: false,
        }}
        empty={<div>暂无数据</div>}
        onPressEnter={handlePressEnter}
        loadingProps={{
          show: loading,
          slot: <div>Loading...</div>
        }}
      />
    </div>
  )
};

export default Demo;
```

## API

| 属性             | 说明                     | 类型                                   | 默认值 |
| ---------------- | ------------------------ | -------------------------------------- | ------ |
| value            | 值                       | string[]                               | []     |
| onChecked        | 数据发生改变时触发事件   | (values: string[]) => void            | -      |
| dataSource       | 列表项                   | [DataSource](#DataSource)[]            | []     |
| titles           | 左右标题                 | React.ReactNode[]                      | []     |
| className        | 自定义类名               | string                                 | -      |
| style            | 自定义样式               | React.CSSProperties                    | -      |
| listBoxStyle     | 列表区自定义样式         | React.CSSProperties                    | -      |
| checkedBoxStyle  | 选择区自定义样式         | React.CSSProperties                    | -      |
| itemSize         | 列表项高度               | number                                 | 30     |
| checkedAllButton | 全选按钮                 | { show: boolean, text: React.ReactNode } | -      |
| clearAllButton   | 清空按钮                 | { show: boolean, text: React.ReactNode } | -      |
| onPressEnter     | 按下回车事件             | (evt: React.KeyboardEvent\<HTMLInputElement\>) => void | -      |
| empty            | 空状态                   | React.ReactNode                            | -      |
| loadingProps     | 加载状态                 | { show: boolean, text: React.ReactNode } | -      |



### DataSource

| 属性  | 说明  | 类型   | 默认值 |
| ----- | ----- | ------ | ------ |
| label   | 选项名   | string \| number | -      |
| value | 选项值 | string \| number | -      |
| disabled | 禁用态 | boolean | -      |