skbkontur / react-ui-validations Goto Github PK

View Code? Open in Web Editor NEW

4.0 20.0 7.0 111.55 MB

Репозиторий переехал в skbkontur/retail-ui

Home Page: https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations

JavaScript 40.14% C# 20.82% CSS 3.08% TypeScript 35.96%

react-ui retail-ui validations forms

react-ui-validations's Introduction

react-ui-validations

Разработка библиотеки переехала в другой репозиторий skbkontur/retail-ui

Набор компонентов, реализующих поведение валидаций по контур-гайдам.

Документация

Использование

npm install --save react-ui-validations

import { ValidationContainer, ValidationWrapperV1 } from 'react-ui-validations';

export default class DataEditor extends React.Component {
    // ...
    render() {
        return (
            <ValidationContainer>
                <ValidationWrapperV1 
                    validationInfo={/\d+/.test(phone) 
                        ? { message: 'Телефон должен состоять только из цифр' } 
                        : null}>
                    <Input
                        value={phone}
                        onChange={value => setState({ phone: value })}
                    />
                </ValidationWrapperV1>
            </ValidationContainer>
        );
    }
}

Запуск примеров

git clone [email protected]:skbkontur/react-ui-validations.git
cd react-ui-validations
npm install
cd docs
npm install
npm start

react-ui-validations's People

Contributors

Stargazers

Watchers

Forkers

slogger nanot1m molokovev frumcheg sashasushko mshatikhin chizhovyui

react-ui-validations's Issues

Понятное сообщение, если wrapper оказался вне ValidationContainer-а

Некорректно работает тултип в DatePicker

Не появляется тултип валидации по ховеру

По фокусу появляется, но перекрывает сам DatePicker

версии либ:
"@skbkontur/react-ui": "0.10.8",
"react-ui-validations": "0.2.13"

[TypeScript] Нет typings для экспортируемых функций

ValidationWrapperV1
ValidationContainer
ValidationTooltip

ValidationContainer, не скролит к элементу если он под fixed плашкой но во вьюпорте.

ValidationContainer, при заданном scrollOffset, не скролит к элементу если он под fixed плашкой но во вьюпорте.

Не появляется тултип валидации для RadioGroup

Ни по ховеру, ни по фокусу.

версии либ:
"@skbkontur/react-ui": "0.10.8",
"react-ui-validations": "0.2.13"

[react-ui-validations] Одновременный показ двух валидаций по потере фокуса

Начальные условия:

ПолеА с валидайией по потере фокуса
ПолеБ с валидацией по потере фокуса
Кнопка вызывающая валидацию формы
!Важно: ПолеБ идет после ПолеА

Сценарий:

Клик по ПолеБ
Ввести одну букву (не убирать фокус)
Нажать на кнопку мыхой с небольшой задержкой

При быстром клике на кнопку (нажал-отпустил) иногда не воспроизводится

Пример с http://tech.skbkontur.ru/react-ui-validations/#/on-blur-validations

Ситуация в бизнес сценарии

Валидация "lostfocus" пропадает при редактировании формы

Проявляется если сообщением валидации является реакт-компонент. Происходит это из-за того что валидации сравниваются по ссылке

react-ui-validations/src/Behaviour/ValidationWrapper.jsx

Line 95 in bb4afd4

if (!isEqual(this.props.validations, nextProps.validations)) {

после чего перестраивается state компонента но уже со скрытой валидацией

ниже код для стабильного воспроизведения на ts

interface BugState {
    xxx: string;
}

class Bug extends React.Component<{}, BugState> {
    state: BugState = {
        xxx: ""
    };

    x: number = -1;

    render() {
        ++this.x;
        return (
            <div style={{padding: 30}}>
                <ValidationContainer>
                    <Gapped vertical>
                        <ValidationWrapperV1 validationInfo={{message: Math.floor(this.x / 3).toString()}}>
                            <Input value={""}/>
                        </ValidationWrapperV1>
                        <ValidationWrapperV1 validationInfo={null}>
                            <Input value={""} onChange={() => this.forceUpdate()}/>
                        </ValidationWrapperV1>
                    </Gapped>
                </ValidationContainer>
            </div>
        )
    }
}

каждое третье нажатие с клавиатуры во втором поле будет скрывать валидацию первого поля

после того как убрать фокус из второго поля валидация на первом сразу появится

умолчательное положение тултипа "right middle" -> "right top"

сейчас по умолчанию тултип с валидацией отображается с позицией "right middle" а по гайдам должен "right top"

https://github.com/skbkontur/react-ui-validations/blob/master/src/index.js#L59

ссылка на гайд по валидациям https://guides.dev.kontur/principles/validation/
пример из гайда по валидациям

Совместимость react-ui-validations и старыми версиями react-ui

У меня в проекте используется react-ui версии 0.24.3, а очень хочется заиспользовать react-ui-validations. При сборке получаю:

Module not found: Error: Can't resolve '@skbkontur/react-ui/components/TokenInput' in 'C:\Users\a\Chemical_labs\myrepo\node_modules\@skbkontur\react-ui-validations'

Как можно обойти зависимость react-ui-validations от react-ui?

Обновить версию retail-ui в проекте

Сейчас в проекте используется версия retail-ui "^0.11.0",
Актуальная версия retail-ui 0.22.0.

children.focus()

Как видно из кода: https://github.com/skbkontur/react-ui-validations/blob/master/src/Behaviour/ValidationWrapper.jsx#L179,
скрол до невалидного элемента произойдет, если у него есть метод focus. Бывает, что нужно показать ошибку на элементе, у которого нет такого метода. Можно ли убрать ту проверку в коде? Тем более, что ниже есть еще одна такая же https://github.com/skbkontur/react-ui-validations/blob/master/src/Behaviour/ValidationWrapper.jsx#L186

DatePicker не валидируется при потере фокуса

Если навесить на DatePicker валидацию при потере фокуса она не срабатывает при выборе значения в виджете и срабатывает только при клике на контрол снова и затем клике снаружи.