/data-mapping-component

A React Component which focus on Data-Mapping & Table-Field-Mapping.(基于React的数据/表字段映射组件)

Primary LanguageJavaScriptMIT LicenseMIT

一个基于React的数据/字段映射组件

npm version download gzip size license

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

DataMapping属性

参数 说明 类型 默认值
width 组件宽度 number 默认500,自适应的话可以设置"auto"
height 组件高度 number 默认500,自适应的话可以设置"auto"
type 映射类型 string single | mutiply ,默认 single
className 组件类名 string -
sourceClassName 来源表类名 string -
targetClassName 目标表类名 string -
columns 每列的属性 Columns | Array<Columns> undefined
sourceData 来源表数据 SourceData | Object | Array<SourceData> undefined
targetData 目标表数据 TargetData | Object | Array<TargetData> undefined
mappingData 初始映射关系,见mappingData Prop array [ ]
emptyContent 当表字段为空时显示内容 string | ReactNode -
emptyWidth 当表字段为空时,表容器的宽度 string | number 150
config 组件的额外属性配置,见config Prop object { }
isConnect 每次连线前触发,判断是否可以连线 function(edge): boolean
onChange 每次连线触发事件 function
onRowMouseOver 鼠标移入某一行数据时触发 function(row)
onRowMouseOut 鼠标移出某一行数据时触发 function(row)
onEdgeClick 点击连线时触发 function(row)
readonly 是否只读 boolean 默认false

Column

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

参数 说明 类型 默认值
key 列数据在数据项中对应的路径 string -
title 列头显示文字 string -
width 列宽度 number -
primaryKey 此属性是否为该组数据唯一标识 boolean 必须且仅有一个属性为true
render 自定义渲染函数,参数分别为当前行的值,当前行数据,行索引 function(text, record, index) {} -

sourceData

来源表数据,当typesingle 时,sourceData的类型为{ };当typemutiply 时,sourceData的类型为[ ]

参数 说明 类型 默认值
id 列标识, single 类型下,id可不填, mutiply 为必填 string -
title 列标题 string -
fileds 数据数组 array -
checked 勾选框是否已勾选 boolean false
disable 禁止连线 boolean false

targetData

目标表数据,当typesingle 时,targetData的类型为{ };当typemutiply 时,targetData的类型为[ ],属性详情见sourceData


mappingData

参数 说明 类型
source 来源表当前行数据的唯一标识 -
target 目标表当前行数据的唯一标识 -
sourceNode 来源表的id,见sourceData ID string
targetNode 目标表的id,见targetData ID string

config

组件的额外属性配置

参数 说明 类型 默认值
delayDraw 延迟渲染,此组件一定要确保画布容器渲染(包括动画执行)完毕才能渲染, 否则坐标都产生偏移, 如:antd的modal的动画 number 0
extraPos 画布渲染的时候会留padding, extraPos Prop { } -
sortable 排序支持 boolean | object -
linkNumLimit 连线数量支持 number | object -
checkable 来源表,目标表是否有勾选框 checkable Prop { } -

extraPos

画布渲染的时候预留padding

参数 说明 类型 默认值
paddingLeft 左侧padding间距 number 0
paddingRight 右侧padding间距 number 0
paddingTop 顶部padding间距 number 0
paddingBottom 底部padding间距 number 0
paddingCenter 水平间距 number 150
nodeVerticalPadding 节点垂直间距 number 10
rowHeight 节点每行的高度 number 26

checkable

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

参数 说明 类型 默认值
source 源表是否有勾选框 boolean false
target 目标表是否有勾选框 boolean false

🔗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来定制您需要的需求