🎉 Выпуск React Suite 4.0

React.js внешний фреймворк

Школа началась, и это новая отправная точка. С прохладным осенним ветром,React SuiteНачал выпуск версии 4.0. Версия V4 была разработана в марте 2019 года. После более чем 6 месяцев разработки и тестирования, обсуждений и споров все планы были наконец реализованы.

Весной сажают одно зернышко проса, а осенью собирают десять тысяч семян.В этот сезон урожая мы подготовили для всех серию обновлений.Готовы?Дудудуду...

1. Переход с Flow на TypeScript

Прежде всего, спасибо Flow за обучение всей версии V3, что упрощает для библиотек компонентов статическую проверку типов. С более широким применением TypeScript и некоторыми проблемами, которые Flow выявлял одну за другой, в этой версии Flow покинул наш класс и провел рефакторинг всего кода с помощью TypeScript. Каждый неудачный рефакторинг — это возрождение, цель которого — сделать код более читабельным и удобным в сопровождении.

2. Улучшения доступности

Для поддержки новых функций браузера мы отказались от IE9 в последней версии V3. Но мы по-прежнему надеемся, что веб-приложения, разработанные с помощью React Suite, будут использоваться как можно большим количеством людей и будут использоваться лучше. Мы стараемся охватить как можно больше людей с точки зрения доступности.

2.1 Улучшение цветового контраста

В мире много людей с амблиопией, и мониторы, используемые этими пользователями, часто неравномерны, а контраст между текстом и фоном стал для пользователей самой основной функциональной проблемой. Как интимная библиотека компонентов пользовательского интерфейса, как она может не заботиться о глазах пользователя?

Согласно с "Web Content Accessibility Guidelines (WCAG) 》, цвет текста, толщина шрифта, мы улучшили контраст, скорректировали алгоритм цветовой палитры, цель сделать ваш продукт более доступным.

2.2 Добавлена ​​тема темного режима

Электроника вокруг нас, от операционных систем до браузеров, редакторов и всевозможных ридеров, начинает поддерживать ночной режим. Это высококонтрастный режим или режим отображения с обратным цветом, если вашим пользователям необходимо использовать ваш продукт в течение длительного времени, наличие ночного режима может эффективно снять усталость глаз и облегчить чтение.

Мы сделали красивый сон в вашу ночь, добавили тему Dark Mode на основе темы по умолчанию и предоставили полностью настраиваемые параметры.При разработке вам нужно только импортировать соответствующий файл стиля:

import 'rsuite/lib/styles/themes/dark/index.less';

Для получения дополнительной информации о настройках, связанных с темой, см.:пользовательская тема

3. Новые компоненты

Компонент — это наименьшая единица, предоставляемая React Suite. По мере того как веб-приложения становятся богаче и разнообразнее, мы продолжим предоставлять более богатые компоненты.

3.1 Компонент списка поддержки

ListКомпонентов очень много в мобильном терминале, но в продукте среднего фона это всегда был компонент, который не стандартизирован, и есть разница в форме производительности в разных бизнес-сценариях, так что мы будем реализовывать его в этот релиз. В дополнение к содержимому каждого элемента List обеспечивает перетаскивание по умолчанию.

3.2 Компонент поддержки заполнителя

Каждый в индустрии переднего плана знает слово «скелетный экран», его функция на самом деле такая же, как уLoaderТочно так же это состояние отображается пользователю перед загрузкой приложения, сообщая пользователю, что текущие данные загружаются. Преимущество «скелетного экрана» заключается в том, что пользователь может видеть общую структуру страницы заранее, до загрузки данных, что улучшает сенсорный опыт.

PlaceholderИменно такой компонент обеспечивает общую структуру данных. Общую структуру области содержимого можно изобразить с помощью линий, прямоугольников и кругов.

3.3 Компонент календаря поддержки

Calendarпредставляет собой простую панель календаря, которая отображает данные для событий. Предусмотрено два сценария использования: один — отображать большую панель календаря, которая по умолчанию заполняет контейнер, который может отображать данные в течение месяца. Другой — предоставить небольшую и компактную панель календаря, которую мы часто встречаем на боковой панели некоторых систем, для фильтрации данных.

3.4 Поддержка компонентов аватара и значка

служба поддержкиAvatarКомпонент, используемый для отображения аватара или логотипа.

служба поддержкиBadgeКомпонент для кнопок, цифр рядом со значками или маркеров состояния.

4. Подрывные изменения

Каждое обновление мы хотим сделать максимально совместимым с исторической версией, но все же будут некоторые критические изменения, такие как использование новых функций React или улучшения предыдущего необоснованного дизайна.

4.1 Не поддерживается для версий ниже React 16.6.

В этой версии используются некоторые новые функции React. Например: новый контекстный API, который поддерживает статическое свойство contextType компонента Class в React 16.6.0.#13728, мы используем эту функцию. Поэтому, чтобы использовать версию React Suite 4.0, вы должны обновить react и react-dom до версии >=16.6.

4.2 Меньше изменений совместимости

В этой версии поддерживается Темная тема, и скорректирован адрес импорта файла Less.

3.Версия*

import 'rsuite/styles/less/index.less';

4.Версия*

import 'rsuite/lib/styles/themes/default/index.less'

// 或者
// import 'rsuite/lib/styles/index.less';

В то же время версию Less необходимо обновить до версии >=3.0.

4.3 TreePicker и CheckTreePicker отбрасывают свойство expandAll

Компоненты TreePicker и CheckTreePicker устарели.expandAllсвойства, добавляяexpandItemValuesАтрибут для расширения указанного узла.

4.4 Скорректированы значения Dropdown, Whisper и всех свойств размещения компонентов Picker.

Свойство размещения — это позиция, в которой отображается селектор конфигурации после его открытия.Чтобы сделать значение параметра более читаемым, в значение были внесены следующие корректировки:

type Placement4 = 'top' | 'bottom' | 'right' | 'left';
type Placement8 =
| 'bottomStart'
| 'bottomEnd'
| 'topStart'
| 'topEnd'
| 'leftStart'
| 'rightStart'
| 'leftEnd'
| 'rightEnd';
type PlacementAuto =
| 'auto'
| 'autoVerticalStart'
| 'autoVerticalEnd'
| 'autoHorizontalStart'
| 'autoHorizontalEnd';

Совместим с версией 3.*

V. Ремонт и улучшения

5.1 Все компоненты Picker поддерживают настройку размера

У нас есть очень полная серия компонентов Picker в компоненте ввода данных, которые можно использовать не только в формах, но и в некоторых столбцах фильтра данных. Учитывая, что компоненты ввода и кнопки имеют свойство размера, размер которого можно изменить, свойство размера также добавляется ко всем средствам выбора, чтобы удовлетворить комбинированное использование большего количества сценариев.

5.2 Защита от переполнения компонентов Whisper и Picker

Все компоненты Picker и компоненты Whisper отображают плавающий слой в указанной позиции, но иногда, поскольку размер плавающего слоя превышает объем контейнера, часть плавающего слоя не может быть заблокирована и не видна. вы можете установитьpreventOverfowотносительное положение отображения плавающего слоя будет регулироваться в соответствии со свободным пространством контейнера, и плавающий слой будет отображаться на странице в максимально возможной степени.

5.3 Сборка формы только для чтения FormControl удалена

FormControlДобавлена ​​поддержка двух свойств:

  • readOnlyСделайте компонент формы доступным только для чтения и недоступным для редактирования.
  • plaintextПусть компоненты формы отображаются в виде простого текста.

Когда эти два свойства установлены для компонента формы, они будут установлены глобально для всех компонентов формы в форме. Во многих случаях нам нужно добавить страницу сведений о данных в форму ввода, а сейчас нам нужно добавить отдельный модуль для отображения макета данных. Чтобы улучшить повторное использование кода, здесь вы можете превратить форму в панель сведений о данных, установив свойство открытого текста для компонента формы.

5.4 DatePicker и DateRangePicker поддерживают отображение номера недели
<DatePicker showWeekNumbers />
<DateRangePicker showWeekNumbers />

Если вам нужно просмотреть номера недель в вашем бизнесе, вы можете установитьshowWeekNumbersномер недели текущей строки будет отображаться в левой части селектора календаря.

5.5 Схема комбинации форм поддерживает асинхронную проверку

Асинхронная проверка является основным требованием, и в этой версии Schema начинает поддерживать промисы. Вот несколько улучшений формы:

  • Требуется асинхронная проверка<FormControl>установлен наcheckAsyncАтрибуты.
  • Правила проверки для прохождения асинхронной проверкиschemaизaddRuleМетод добавляет объект, который возвращает Promise.
  • позвонив<Form>изcheckAsyncа такжеcheckForFieldAsyncдоступ, вы можете запустить проверку вручную.

Model

В примере нам нужно асинхронно проверить, существует ли уже адрес электронной почты на сервере.При добавлении правил в Modal вернуть объект Promise через метод addRule.

function asyncCheckEmail(email) {
  return new Promise(resolve => {
     // 异步处理逻辑 resolve(true);
  });
}

const model = SchemaModel({
  email: StringType()
    .isEmail('Please input the correct email address')
    .addRule((value, data) => {
      return asyncCheckEmail(value);
    }, 'Email address already exists')
});

FormЗадайте для объявленной модели соответствующую форму и задайте свойство checkAsync для компонента, который необходимо проверять асинхронно.


const formRef = React.createRef();

function render(){
  return (
    <Form model={model} ref={formRef}>
     <FormControl checkAsync name="email"/>
    </Form>
  )
}

Форма предоставляет метод check() по умолчанию, если это асинхронная проверка, вам нужно вызвать метод checkAsync().

formRef.current.checkAsync().then(result => {
    console.log(result);
});
5.6 Оповещения и уведомления поддерживают закрытие вручную

И Alert, и Notification поддерживают методы close и closeAll, которые закрывают последнее сообщение и закрывают все сообщения соответственно. В некоторых деловых ситуациях необходимо закрыть предупреждающее сообщение на странице после выполнения операции, сделать это можно следующими способами:

Alert.close();
Alert.closeAll();

Notification.close();
Notification.closeAll();
5.7 FlexboxGrid поддерживает отзывчивость

Компонент Col в макете Grid можно настроить для адаптивного макета, но он не обладает некоторыми характеристиками макета Flex. Чтобы интегрировать два макета, мы можем использовать FlexboxGrid.Item и Col в комбинации. После объединения FlexboxGrid и обладает характеристиками макета Flex, а также имеет свойства, связанные с адаптивной конфигурацией.

<FlexboxGrid.Item componentClass={Col} md={6}>
  content
</FlexboxGrid.Item>
5.8 Добавлены методы открытия и закрытия для всех сборщиков.

В некоторых случаях необходимо открыть или закрыть Picker после выполнения операции. Например: каскадная операция, после закрытия средства выбора вы хотите быстро выбрать следующее средство выбора по умолчанию. Мы предоставляем метод открытия и закрытия в Picker:

const pickerRef = React.createRef();

function render() {
  return <SelectPicker ref={pickerRef} />;
}

// 打开
pickerRef.current.open();

// 关闭
pickerRef.current.close();
5.9 Другие исправления
  • Исправлена ​​​​проблема с отображением Uploader, загружающего файлы размером более 1 ГБ.
  • Исправлена ​​проблема совместимости ввода на дисплее браузера IE.
  • Исправлена ​​проблема, из-за которой InputPicker очищал введенное значение клавиши Delete на клавиатуре.
  • Исправлены настройки раскрывающегося спискаtoggleComponentClass={Button}Проблема с неправильным стилем фона.
  • Исправлены недостающие стили при импорте по требованию.
  • Исправлена ​​проблема, из-за которой день отключения DatePicker и месяц отключения были несовместимы.
  • Исправлена ​​проблема, из-за которой положение полосы прокрутки не обновлялось после обновления данных таблицы.
  • Исправлено значение обновления свойства Table ExpandedRowKeys, которое не контролируется.
  • Исправлено отсутствующее событие для параметра обратного вызова свойства таблицы onRowClick.
  • Поддержка компонента фиксированной формы для события фокуса.
  • Изменен разделитель по умолчанию для Breadcrumb.
  • Исправлена ​​ошибка, из-за которой положение ручки не обновлялось после того, как ползунок менялся со скрытого на отображаемый.

6. Наконец

Мы надеемся, что наш рост может принести лучший опыт большему количеству разработчиков. Если вам нравится React Suite, вы можете поддержать нас:

  • Starэтот проект.
  • Если вы используете React Suite в своем проекте, добро пожаловать сюдасообщение!
  • существуетOpenCollectiveПоддержите нас.

Этот проект существует благодаря всем участникам.

В группу внутреннего обмена добавьте помощника React Suite, заметьте rsuite и пригласите присоединиться к группе.

Категории