feat: #1575 #1576 for v3

XiaoMi · Feb 21, 2021 · 5383327 · 5383327
1 parent 572b761
commit 5383327
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # 更新日志
 ## 3.4.1
 
+- 新增 `Transfer` 组件 render 自定义菜单渲染函数 [#1575](https://github.com/XiaoMi/hiui/issues/1575)
 - 修复 `DatePicker` type 为 week 或者 weekrange 时 输入相应格式日期解析错误问题  [#1579](https://github.com/XiaoMi/hiui/issues/1579)
 - 修复 `Preview` 图片预览组件，滚轮放大缩小错误 [#1573](https://github.com/XiaoMi/hiui/issues/1573)
 - 修复 `TimePicker` 时间范围选择，为空时无法选择打开弹窗时的当前值 [#1530](https://github.com/XiaoMi/hiui/issues/1530)
@@ -202,3 +203,4 @@
 ## 1.x
 
 [更新日志汇总](https://github.com/XiaoMi/hiui/blob/stable/1.x/CHANGELOG.md)
+
diff --git a/components/checkbox/style/index.scss b/components/checkbox/style/index.scss
@@ -61,6 +61,7 @@ $prefixCls: '.hi-checkbox' !default;
     border-radius: 2px;
     transition: 0.3s ease-out;
     line-height: 1;
+    flex: none;
 
     &--indeterminate {
       &::after {

diff --git a/components/transfer/Item.js b/components/transfer/Item.js
@@ -19,7 +19,8 @@ class Item extends Component {
       dir,
       draggable,
       dividerPosition,
-      theme
+      theme,
+      render
     } = this.props
     const sourceStyle =
       sourceNode === item.id && isDragging
@@ -51,10 +52,10 @@ class Item extends Component {
               checkboxOnChange(item.id, e.checked)
             }}
           >
-            {item.content}
+            {render ? render(item) : item.content}
           </Checkbox>
         ) : (
-          item.content
+          <span className="hi-transfer__item-content">{render ? render(item) : item.content}</span>
         )}
       </li>
     )

diff --git a/components/transfer/Transfer.js b/components/transfer/Transfer.js
@@ -276,7 +276,8 @@ class Transfer extends Component {
       theme,
       localeDatas,
       onDragStart,
-      onDrop
+      onDrop,
+      render
     } = this.props
     const {
       sourceSelectedKeys,
@@ -334,6 +335,7 @@ class Transfer extends Component {
                     draggable={draggable}
                     key={index}
                     theme={theme}
+                    render={render}
                     onClick={(e) => this.clickItemEvent(item, index, dir)}
                     mode={mode === 'basic' && type === 'default' ? 'basic' : 'multiple'}
                     item={item}

diff --git a/components/transfer/style/index.scss b/components/transfer/style/index.scss
@@ -40,6 +40,19 @@
     }
   }
 
+  .hi-checkbox {
+    max-width: 100%;
+  }
+
+  .hi-checkbox__text {
+    width: 100%;
+    height: 36px;
+    line-height: 36px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   &__split {
     width: 100%;
     height: 8px;
@@ -102,6 +115,15 @@
       display: flex;
       align-items: center;
     }
+
+    &-content {
+      display: inline-block;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font-size: 14px;
+    }
   }
 
   &__warning {

diff --git a/docs/zh-CN/components/transfer.mdx b/docs/zh-CN/components/transfer.mdx
@@ -54,13 +54,13 @@ import DemoArea from '../../demo/transfer/section-area.jsx'
 | 名称     | 说明                             | 类型                                                                                            | 参数                                                                                           | 返回值 |
 | -------- | -------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------ |
 | onChange | 选中元素被移动到目标框内后的回调 | (targetKeys: number[] \| string[], direction: 'left' \| 'right', moveDatas: DataItem[]) => void | targetKeys: 目标框内的元素 ID 集合 <br/> direction: 移动方向 <br/> moveDatas: 移动的数据项集合 | -      |
-
+| render   | 自定义菜单渲染函数             | (item: DataItem) => ReactNode      | -                                            | 无内容   | 
 ## Type
 
 ### DataItem
 
 | 参数     | 说明     | 类型                | 可选值        | 默认值 |
 | -------- | -------- | ------------------- | ------------- | ------ |
 | id       | 唯一 id  | string              | number        | -      |
-| content  | 显示内容 | string \| ReactNode | -             | -      |
+| content  | 显示内容 | string               | -             | -      |
 | disabled | 是否禁用 | boolean             | true \| false | false  |