首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

ReactSuite4.4.0版本发布????，带来了一些新特性

作者：黄家驹1994 | 来源：互联网 | 2023-09-01 17:31
家人们啊:man::woman::girl::boy:，ReactSuite又双叒叕更新了:tada:，在这全球新冠病毒的笼罩下，希望本次V4.4.0发布的新特性能给大家带来一丝丝心情上的改变:smile:。1、Table支持页面级固定滚动条与表

家人们啊 ????‍????‍????‍????，React Suite 又双叒叕更新了 ????，在这全球新冠病毒的笼罩下，希望本次 V4.4.0 发布的新特性能给大家带来一丝丝心情上的改变 ????。

1、Table 支持页面级固定滚动条与表头

为什么有这个功能？ 我们看看一个使用场景：一个表格如果一页要显示100 行数据，表格自动高度，表格内部不出现滚动条，通过页面滚动条浏览表格数据，但是，业务要求表格的列又很多，出现了横向滚动条，如果要浏览表格最右侧列的数据，首先需要页面滚动到最底部，然后再操作横向滚动条，想想这整个过程就很难受 ????。如果你的业务没办法通过修改设计解决，那这个新特性对你来说应该"真香" ????, 先看看效果：

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

新增属性:

{
  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 组件

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

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

示例代码

支持的功能包括:

  • 支持设置组件大小。
  • 支持设置组件的颜色。
  • 支持半选,及垂直半选。
  • 支持禁用与只读，在表单中使用。
  • 支持使用其他 Icon、emoji、数字、中文或是其他 SVG 图标。

3、Tree 组件新增支持拖拽

在需要对一个树结构的数据进行调序，修改层级的时候，Tree 的拖拽功能能够很方便实现这个操作。只需要为 Tree 组件设置一个 draggable 属性。

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

4、DatePicker 支持 12 小时制 ????

DatePicker 默认时间的选择是 24 小时制，12 小时制是业务中经常会用到的一种方式。所以新增了一个 showMeridian 属性，用于支持 12 小时制。

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

5、Progress 支持垂直显示

 组件新增 vertical 属性，垂直显示进度条。

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

6、支持自定义浮层

Whisper 组件可以监听一个元素，对元素进行操作时候，会在其周围打开一个浮层，用于相关信息的提示，比如 Popover 与 Tooltip。

popover!}
  >

在这次的版本中，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 (
    

      Overlay
    

  );
});

const App = () => (
   {
      const { className, left, top } = props;
      return ;
    }}
  >
    
  
);

7、其他更新