React Suite 4.4.0 release 🍺

Dear front-end developers, React Suite has been updated again 🎉. I hope that the new features released in V4.4.0 will bring you a good mood 😄. At the same time, I hope that friends from various countries can take personal protection and overcome COVID-19.

https://rsuitejs.com

1. Table supports page-level fixed scroll bars and table headers

Why is there this feature? For example, such a usage scenario: If a table displays 100 rows of data on one page, the table is automatically high, and the internal scroll bar does not appear. Browse the table data through the page scroll bar. However, there are many columns in this table, and horizontal scroll bars appear. If you want to browse the data in the right-most column of the table, you need to first scroll the page to the bottom. Then operate the horizontal scroll bar, the whole process of the experience is very bad. If your business cannot be solved by modifying the design, this new feature should be very good for you.

{
  affixHeader: boolean|number
  affixHorizontalScrollbar: boolean|number
}

• affixHeader Affix the table header to the specified position on the page.
• affixHorizontalScrollbar Affix the table horizontal scrollbar to the specified position on the page.

In the actual business, Table often needs to reset the position of the scroll bar after the data is updated, but in some business situations, the position of the scroll bar cannot be repeated, such as asynchronous loading of Tree nodes, editing in the table, and so on. The processing logic in versions prior to V4.4.0 is based on the change in the number of data rows, and at the same time, the data update in the case of not TreeTable will reset the scroll bar. However, there are still many complicated business situations in the actual business, so an API has been added in this version to let developers control whether to update the scroll bar.

{
  shouldUpdateScroll:boolean;
  onDataUpdated:(nextData: object[], scrollTo: (coord: { x: number; y: number }) => void) => void;
}

• shouldUpdateScroll Whether to update the scroll bar after data update.
• onDataUpdated Callback after table data update.

2.Added Rate component

A rating indicates user interest in content.

Supported features:

• Support setting the component size.
• Support to set the color of components.
• Supports half selection and vertical half selection.
• Support disabled and read-only, used in the form.
• Support other Icon, emoji, digital, Chinese or other SVG icons.

3. Tree component supports draggable

When you need to sequence the data of a tree structure and modify the hierarchy, Tree’s drag and drop function can easily achieve this operation. You only need to set a `draggable` attribute for the Tree component.

4. DatePicker supports 12-hour clock

The default time selection of DatePicker is 24-hour clock, and 12-hour clock is a method often used in business. Therefore, a new `showMeridian` props is added to support the 12-hour clock.

6. Support custom overlay

The Whisper component can listen to an element, and when operating on the element, an overlay will be opened around it for prompting of related information, such as Popover and Tooltip.

<Whisper 
  trigger="click" 
  speaker={<Popover>popover!</Popover>}
  >
  <Button>click me</Button>
</Whisper>

In this version, Whisper can support opening a custom overlay.

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. Other updates

• Feature: Added support for Italian language.
• Feature: <TagPicker> component supports tagProps and sets Tag properties.
• Feature: <Affix> supports the container attribute, which fixes the element only within the visible range of the container.
• Feature: All Picker components with search function support searchBy attribute and can customize search rules.
• Breaking: Fixed the misspelling of Uploader attribute dragable, changed todraggable.
• Improve: Improve all Picker components, support the sizeprops by default, the previous version needs to be combined with Button.
• Improve Improve the animation effect of <Placeholder>.
• Bugfix: Fixed the incompatibility of wordWrap attribute of<Table>androwHeight.
• Bugfix: Fixed some definition errors in Typescript.
• Example: Added example project with-preact.
• Chore: Migrate rsuite-utils library torsuite for easy maintenance.

7、Supporting React Suite

I hope that our growth will bring a better experience to more developers.If you like React Suite, you can show your support by either

• Star this repo.
• Leaving a comment here if you are using RSUITE in your project
• Becoming a backer on OpenCollective