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

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

## 基本使用
```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: '清空',
        }}
      />
    &lt;/div&gt;
  )
};

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 (
    &lt;div style={{width: "400px"}}&gt;
      <CndTransfer 
        titles={[
           '选择服务',
           '已选择'
          ]}
        dataSource={largeData} 
        value={values}
        onChecked={setValues}
        checkedAllButton={{
          show: true,
          text: `已选择${values.length}项`
        }}
      />
    &lt;/div&gt;
  )
};

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 (
    &lt;div style={{width: "400px"}}&gt;
      <CndTransfer 
        titles={['选择服务', '已选择']}
        dataSource={largeData} 
        value={values}
        onChecked={setValues}
        checkedAllButton={{
          show: false,
        }}
      />
    &lt;/div&gt;
  )
};

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 (
    &lt;div style={{width: "400px"}}&gt;
      <CndTransfer 
        titles={[ 
          &lt;div style={{display: 'flex', justifyContent: 'space-between'}}&gt;
            &lt;span&gt;选择服务&lt;/span&gt;
            &lt;span  onClick={handleRefresh} &gt;Refresh&lt;/span&gt;
          &lt;/div&gt;, 
          '已选择'
        ]}
        dataSource={dataSource} 
        value={values}
        onChecked={setValues}
        checkedAllButton={{
          show: false,
        }}
        empty={&lt;div&gt;暂无数据&lt;/div&gt;}
        onPressEnter={handlePressEnter}
        loadingProps={{
          show: loading,
          slot: &lt;div&gt;Loading...&lt;/div&gt;
        }}
      />
    &lt;/div&gt;
  )
};

export default Demo;
```