npm package: @riil-frontend/component-block-list
Description: intro component
Latest version: 0.2.10

# 方块式可视化列表

block-list

方块式可视化列表

## API

| 参数名              | 说明                                                                                                                                      | 类型        | 默认值                    |
| ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------------------------- |
| dataSource          | 数据源，dataSource 中存在 backIconType 时，展示 Icon 组件为背景图                                                                         | Array       | -                         |
| primaryKey          | 唯一标识                                                                                                                                  | string      | id                        |
| size                | 指定方块大小<br/><br/>**可选值**<br/> small, medium, large                                                                                | Enum/Number | 'medium'                  |
| selectedKeys        | （用于受控）当前选中节点 key 的数组                                                                                                       | Array       | -                         |
| defaultSelectedKeys | （用于非受控）默认选中节点 key 的数组                                                                                                     | Array       | -                         |
| onSelect            | 选中或取消选中节点时触发的回调函数，回传 keys,infos                                                                                       | Function    | -                         |
| highlightKeys       | 高亮色块                                                                                                                                  | Array       | -                         |
| labelRender         | 色块内文本 render                                                                                                                         | Function    | (block) => block.label    |
| disabled            | 是否全局禁用色块选择                                                                                                                      | Boolean     | false                     |
| disabledRender      | 色块是否禁用选择 render                                                                                                                   | Function    | (block) => block.disabled |
| boxProps            | Box 组件属性透传                                                                                                                          | Object      | -                         |
| tagProps            | Tag.Selectable 组件属性透传                                                                                                               | Object      | -                         |
| isSearch            | 是否处于搜索模式，一般是有关键字或过滤条件时传为 true，该模式下所有色块变透明，highlightKeys 对应的色块高亮；否则所有色块无透明和高亮效果 | Boolean     | false                     |

## change log

-- 2021.09.01  
---- 1. 还原上一次处理（色块全部高亮时，禁用的色块透明度为 0.5），即禁用色块高亮效果与其他色块一致，无特殊处理；

-- 2021.08.31  
---- 1. dataSource 数据中增加 backIconType 字段，存在该字段时，组件中设置 Icon 组件的 type，且作为背景图显示；
---- 2. 背景图的大小目前为固定的 27px;
---- 3.  禁用的色块去掉背景颜色的设置，只保留鼠标手势和事件禁用；
---- 4. IP 地址功能中对禁用的色块，应同时设置 backIconType 和 disabled；
---- 5. 去掉色块 4px 的圆角，使用 tag 组件本身的 2px 的圆角；
---- 6. 更新“受控展示”demo 中的颜色色值；
---- 7. 色块全部高亮时，禁用的色块透明度为 0.5；
---- 8. 色块选中的样式修改，tag 组件选中三角的背景色改为白色，对勾颜色使用父级色块的颜色；

-- 2021.08.23  
---- 1. 修改框选时遮罩的计算逻辑，兼容多层级定位布局；
---- 2. 兼容内滚出现滚动条时的框选；

-- 2021.08.20  
---- 1. 添加 disabled 属性与 demo 样例，可全局设置或在 dataSource 中单项设置；
---- 2. 被 disabled 的色块组件内部不会做处理，保持原 disabled 设置与选中的项进行回调；

-- 2021.08.10  
---- 1. 处理清空场景下，传 selectedKeys=[]不生效的问题；
---- 2. 主动修改 selectedKeys 时，不回调 onChange 事件，防止循环调用；
---- 3. 重复选择相同 key 时，不响应 onChange 事件

-- 2021.08.04  
---- 1. 添加鼠标滑选特效；
---- 2. 取消 selectMode 参数，点击为单选，ctrl/command 按住单击为多选，鼠标按住拖动为滑选；
---- 3. 取消 boxProps 参数，内部取消了 Box 组件；
---- 4. 取消 onSelect 方法回调时的第二个参数，原因为：内部实现方法改动，暂无法获取当前节点数据，后续版本再支持；
---- 5. 由于增加了鼠标滑选操作，单击时如果鼠标抖动会认为是滑选操作，可能会引起选中又取消的现象；