Awesome

English | 简体中文

✨ 特性

• 支持定制字段属性
• 支持表名定制
• 支持字段连接数量限制
• 支持字段排序
• 支持延迟渲染，自动适配高宽，四周留白等配置
• 支持空字段内容定制

🔨快速本地DEMO

git clone git@github.com:aliyun/react-data-mapping.git
npm install
cd example
npm install
npm start

📦 安装

npm install react-data-mapping

API<a name='canvas-attr'></a>：

<b>DataMapping属性</b>

<a name='columns-type'></a><b>Column</b>

列描述数据对象，是Columns中的一项

<a name='source-data'></a><b>sourceData</b>

来源表数据，当type为 single 时，sourceData的类型为<font color='#c41d7f'>{ }</font>；当type为 mutiply 时，sourceData的类型为<font color='#c41d7f'>[ ]</font>

<a name='target-data'></a><b>targetData</b>

目标表数据，当type为 single 时，targetData的类型为<font color='#c41d7f'>{ }</font>；当type为 mutiply 时，targetData的类型为<font color='#c41d7f'>[ ]</font>，属性详情见sourceData

<a name='mapping-data'></a><b>mappingData</b>

<a name='config'></a><b>config</b>

组件的额外属性配置

<a name='extraPos-prop'></a><b>extraPos</b>

画布渲染的时候预留padding

<a name='checkable-prop'></a><b>checkable</b>

来源表，目标表是否有勾选框

🔗API

interface columns { // 设置每列的属性
  title ? : string; // 每列的title，类似thead的概念
  key: string; // 每列的唯一标志，对应数据上的key值
  width ? : number; // 每列宽度
  primaryKey: boolean // 这列的key对应的value是否作为键值对
}

interface config {
  delayDraw: number; // 延迟渲染，此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染,否则坐标都产生偏移,如：antd的modal的动画
  extraPos ? : { // 画布渲染的时候会留padding
      paddingLeft ? : number,
      paddingRight ? : number,
      paddingTop ? : number,
      paddingBottom ? : number,
      paddingCenter ? : number,
    },
    sortable ? : boolean | { // 排序支持，假如是true，会整个画布都支持排序
      source ? : boolean, // 假如是true，单纯左侧来源表支持排序
      target ? : boolean // 假如是true，单纯左侧目标表支持排序
    },
    linkNumLimit ? : number | { // 连线数量支持，假如是number，会整个画布都支持n条连线
      source ? : number, // 假如是number，单纯左侧来源表支持n条连线
      target ? : number // 假如是number，单纯左侧来源表支持n条连线
    },
    checkable ？: {  // 源表目标表是否有勾选框
      source ? : boolean, // 假如是true，单纯左侧来源表支持勾选框
      target ? : boolean
    }
}

interface ComProps { // 组件props属性
  width ? : number | string; // 组件的宽度，自适应的话可以设置"auto"
  height ? : number | string; // 组件的高度，自适应的话可以设置"auto"
  type ? : string; // "single"or"mutiply",单表映射(上图一) or 多表映射(上图二)
  className ? : string; // 组件类名
  sourceClassName ? : string; // 来源表类名
  targetClassName ? : string; // 目标表类名
  columns: Array < columns > ; // 请参考上述interface columns
  sourceData: Array < any > | Object; // 单表映射对应Object,多表映射Array,可参考demo
  targetData: Array < any > | Object; // 单表映射对应Object,多表映射Array,可参考demo
  mappingData: Array < any > ; // 初始化对应关系数据,可参考demo
  emptyContent ? : string | JSX.Element; // 当表字段为空时显示内容
  emptyWidth ? : number | string; // 当表字段为空时表容器宽度
  isConnect?(edge: any): boolean; // 每次连线前触发isConnect,返回true则进行连线,false则不会
  onChange(data: any): void; // 每次连线都是触发onChange事件
  onRowMouseOver?(row:any):void, // 鼠标移入某一行数据时触发
  onRowMouseOut?(row:any):void, // 鼠标移出某一行数据时触发
};

import ButterflyDataMapping from 'react-data-mapping';
import 'react-data-mapping/dist/index.css';

<ButterflyDataMapping
  width={500}
  height={1000}
  type={'single'}
  columns={columns}
  sourceData={sourceData}
  targetData={targetData}
  mappingData={mappingData}
  className={'butterfly-data-mappint'}
  sourceClassName={'source-column'}
  targetClassName={'target-column'}
/>

如需要更多定制的需求，您可以提issue或者参考Butterfly来定制您需要的需求