From 5383327deaee3abc5210ac31c9b580c102743f79 Mon Sep 17 00:00:00 2001 From: wugaoliang Date: Mon, 22 Feb 2021 07:21:22 +0800 Subject: [PATCH 1/2] feat: #1575 #1576 for v3 --- CHANGELOG.md | 2 ++ components/checkbox/style/index.scss | 1 + components/transfer/Item.js | 7 ++++--- components/transfer/Transfer.js | 4 +++- components/transfer/style/index.scss | 22 ++++++++++++++++++++++ docs/zh-CN/components/transfer.mdx | 4 ++-- 6 files changed, 34 insertions(+), 6 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7933e37f7..bb6e0e8b7 100644 --- 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) + \ No newline at end of file diff --git a/components/checkbox/style/index.scss b/components/checkbox/style/index.scss index 3bbc2f9e4..f8e72bda9 100644 --- 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 index 1e67f2ad6..5415fd41c 100644 --- 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} ) : ( - item.content + {render ? render(item) : item.content} )} ) diff --git a/components/transfer/Transfer.js b/components/transfer/Transfer.js index acf53710a..f1641a79c 100755 --- 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 index a905ed80c..edb116849 100755 --- 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 index 692ee6f28..6931f4f63 100755 --- a/docs/zh-CN/components/transfer.mdx +++ b/docs/zh-CN/components/transfer.mdx @@ -54,7 +54,7 @@ import DemoArea from '../../demo/transfer/section-area.jsx' | 名称 | 说明 | 类型 | 参数 | 返回值 | | -------- | -------------------------------- | ----------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | ------ | | onChange | 选中元素被移动到目标框内后的回调 | (targetKeys: number[] \| string[], direction: 'left' \| 'right', moveDatas: DataItem[]) => void | targetKeys: 目标框内的元素 ID 集合
direction: 移动方向
moveDatas: 移动的数据项集合 | - | - +| render | 自定义菜单渲染函数 | (item: DataItem) => ReactNode | - | 无内容 | ## Type ### DataItem @@ -62,5 +62,5 @@ import DemoArea from '../../demo/transfer/section-area.jsx' | 参数 | 说明 | 类型 | 可选值 | 默认值 | | -------- | -------- | ------------------- | ------------- | ------ | | id | 唯一 id | string | number | - | -| content | 显示内容 | string \| ReactNode | - | - | +| content | 显示内容 | string | - | - | | disabled | 是否禁用 | boolean | true \| false | false | From ead811f0289583bb48bdd368212e7e5b72fc9aeb Mon Sep 17 00:00:00 2001 From: Wugaoliang Date: Mon, 22 Feb 2021 14:17:19 +0800 Subject: [PATCH 2/2] feat: render d.ts --- components/transfer/index.d.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/components/transfer/index.d.ts b/components/transfer/index.d.ts index 287eb10e3..c4f05cb50 100644 --- a/components/transfer/index.d.ts +++ b/components/transfer/index.d.ts @@ -15,6 +15,7 @@ interface Props { targetIds?: number[] | string[] targetSortType?: 'default' | 'queue' onChange?: (targetKey: number[] | string[], direction: 'left' | 'right', moveDatas: DataItem[]) => void + render?: (item: DataItem) => JSX.Element } declare const Transfer: React.ComponentType export default Transfer