React Suite 4.4.0 版本发布 ????，带来了一些新特性

内容简介：家人们啊 :man::woman::girl::boy:，React Suite 又双叒叕更新了 :tada:，在这全球新冠病毒的笼罩下，希望本次 V4.4.0 发布的新特性能给大家带来一丝丝心情上的改变 :smile:。 1、Table 支持页面级固定滚动条与表...

家人们啊 ????‍????‍????‍????，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、新增 Rete 组件

一个评分组件，表示用户对内容的的评价。

示例代码

<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????????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 上赞助我们。

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。