家人们啊 👨👩👧👦，React Suite 又双叒叕更新了 🎉，在这全球新冠病毒的笼罩下，希望本次 V4.4.0 发布的新特性能给大家带来一丝丝心情上的改变 😄。
1、Table 支持页面级固定滚动条与表头
为什么有这个功能？ 我们看看一个使用场景：一个表格如果一页要显示100 行数据，表格自动高度，表格内部不出现滚动条，通过页面滚动条浏览表格数据，但是，业务要求表格的列又很多，出现了横向滚动条，如果要浏览表格最右侧列的数据，首先需要页面滚动到最底部，然后再操作横向滚动条，想想这整个过程就很难受 😭。如果你的业务没办法通过修改设计解决，那这个新特性对你来说应该"真香" 😋, 先看看效果：
新增属性:
{
affixHeader: boolean|number
affixHorizontalScrollbar: boolean|number
}
affixHeader将表头固定到页面上的指定位置affixHorizontalScrollbar将横向滚动条固定在页面底部的指定位置
😈破坏性变更
Table 在实际的业务中，往往都需要在数据更新后重置滚动条的位置，但是在某些业务情况下又不能重重滚动条位置，比如异步加载 Tree 节点，表格内编辑等等。在 V4.4.0 之前版本的处理逻辑是根据数据行数发生变化，同时不是 TreeTable 情况下的数据更新会重重滚动条。但是，在实际的业务中还是有很多复杂的业务情况，所以在这个版本中新增了 API 让开发者自己控制是否更新滚动条。
{
shouldUpdateScroll:boolean;
onDataUpdated:(nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => void;
}
shouldUpdateScroll数据更新后更新滚动条位置，默认为 true。onDataUpdated数据更新后的回调函数。
2、新增 Rate 组件
一个评分组件，表示用户对内容的的评价。
示例代码
<Rate defaultValue={2.5} allowHalf />
支持的功能包括:
- 支持设置组件大小。
- 支持设置组件的颜色。
- 支持半选,及垂直半选。
- 支持禁用与只读，在表单中使用。
- 支持使用其他 Icon、emoji、数字、中文或是其他 SVG 图标。
3、Tree 组件新增支持拖拽
在需要对一个树结构的数据进行调序，修改层级的时候，Tree 的拖拽功能能够很方便实现这个操作。只需要为 Tree 组件设置一个 draggable 属性。
<Tree draggable data={data} />
4、DatePicker 支持 12 小时制 🕒
DatePicker 默认时间的选择是 24 小时制，12 小时制是业务中经常会用到的一种方式。所以新增了一个 showMeridian 属性，用于支持 12 小时制。
<DatePicker showMeridian format="YYYY-MM-DD HH:mm:ss" />
5、Progress 支持垂直显示
<Progress.Line> 组件新增 vertical 属性，垂直显示进度条。
<Progress.Line vertical />
6、支持自定义浮层
Whisper 组件可以监听一个元素，对元素进行操作时候，会在其周围打开一个浮层，用于相关信息的提示，比如 Popover 与 Tooltip。
<Whisper
trigger="click"
speaker={<Popover>popover!</Popover>}
>
<Button>click me</Button>
</Whisper>
在这次的版本中，Whisper 可以支持打开一个自定义的浮层。
const Overlay = React.forwardRef(({ style, ...rest }, ref) => {
const styles = {
...style,
background: '#000',
padding: 20,
borderRadius: 4,
position: 'absolute',
boxShadow: '0 3px 6px -2px rgba(0, 0, 0, 0.6)'
};
return (
<div {...rest} style={styles} ref={ref}>
Overlay
</div>
);
});
const App = () => (
<Whisper
trigger="click"
speaker={(props, ref) => {
const { className, left, top } = props;
return <Overlay style={{ left, top }} className={className} ref={ref} />;
}}
>
<Button>Test</Button>
</Whisper>
);
7、其他更新
- Feature: 新增对意大利语言支持。
- Feature:
<TagPicker>组件支持tagProps，设置 Tag 属性。 - Feature:
<Affix>支持container属性，把元素只在容器可见范围内才固定。 - Feature: 所有带搜索功能的 Picker 组件支持
searchBy属性，可以自定义搜索规则。 - Breaking: 修复 Uploader 属性
dragable拼写错误，修改为draggable。 - Improve: 改进所有的 Picker 组件，默认支持
size属性，之前的版本中需要配 Button 组合使用。 - Improve 改进
<Placeholder>的动画效果。 - Bugfix: 修复
<Table>的wordWrap属性与rowHeight不兼容的问题。 - Bugfix: 修复 Typescript 一些定义错误。
- Example: 新增示例项目 with-preact。
- Chore: 迁移
rsuite-utils库到rsuite，方便维护。
8、最后 🤝
希望我们的成长，能给更多的开发者带来更好的体验。如果您喜欢 React Suite，可以通过以下方式支持我们：
- Star 这个项目。
- 如果您在您的项目中使用了 React Suite，欢迎在这里留言！
- 在 OpenCollective 上赞助我们。
