feat(Input, Combobox): add showCleanCross prop #3594
Conversation
SchwJ
force-pushed
the
add-clean-cross-in-input-and-combobox
branch
from
8432121 to
4cf6e49
Compare
There was a problem hiding this comment.
Пример в доку Autocomplete, так как он наследует свойство инпута showCleanCross
There was a problem hiding this comment.
Тест, проверяющий что в Autocomplete работает свойство showCleanCross. Достаточно selenium теста, так как визуально всё аналогично инпуту
There was a problem hiding this comment.
Creevey-тест, проверяющий Combobox:
- появление крестика при вводе в инпут
- очистка при клике на крестик
- фокусировка по табу на крестике
| @@ -446,6 +453,20 @@ export class Input extends React.Component<InputProps, InputState> { | |||
|
|
|||
| return ( | |||
| <InputLayout | |||
| clearInput={() => { | |||
| if (this.props.onValueChange) { | |||
| this.props.onValueChange(''); | |||
There was a problem hiding this comment.
для управляемого инпута и для оповещения при неуправляемом
| if (this.props.onValueChange) { | ||
| this.props.onValueChange(''); | ||
| } | ||
| if (this.input) { |
| @@ -513,6 +534,10 @@ export class Input extends React.Component<InputProps, InputState> { | |||
| }; | |||
|
|
|||
| private handleChange = (event: React.ChangeEvent<HTMLInputElement>) => { | |||
| this.setState({ | |||
| needsShowCleanCross: this.state.focused && !!this.input?.value, | |||
There was a problem hiding this comment.
По договоренности с дизайном крестик отображается только в том случае, когда поле непустое и в фокусе
| @@ -582,7 +608,20 @@ export class Input extends React.Component<InputProps, InputState> { | |||
| private resetFocus = () => this.setState({ focused: false }); | |||
|
|
|||
| private handleBlur = (event: React.FocusEvent<HTMLInputElement>) => { | |||
| this.resetFocus(); | |||
| this.props.onBlur?.(event); | |||
| if (this.props.showCleanCross && this.isBlurToCleanCrossIcon(event)) { | |||
There was a problem hiding this comment.
Определяем кликнули ли на крестик
| if (this.props.showCleanCross && this.isBlurToCleanCrossIcon(event)) { | ||
| event.preventDefault(); | ||
| this.setState({ focused: false }); | ||
| } else { |
There was a problem hiding this comment.
Старое поведение, только resetFocus (делающий setState({ focused: false }) ) заменен на одновременное изменение двух полей стейта: setState({ needsShowCleanCross: false, focused: false })
SchwJ
changed the title
Проблема
Необходимо отрисовывать в инпуте крестик и очищать значение по клику на него.
Решение
Добавила пропы в Input и Combobox, отнаследовала проп в Autocomplete, написала скриншотные тесты и добавила примеры в документацию.
Ссылки
Задача
Гайд для Input с крестикой очистки
Тред в маттермосте с обсуждением дизайна
Чек-лист перед запросом ревью
Добавлены тесты на все изменения
✅ unit-тесты для логики
✅ скриншоты для верстки и кросс-браузерности
⬜ нерелевантно
Добавлена (обновлена) документация
✅ styleguidist для пропов и примеров использования компонентов
⬜ jsdoc для утилит и хелперов
⬜ комментарии для неочевидных мест в коде
⬜ прочие инструкции (
README.md,contributing.mdи др.)⬜ нерелевантно
Изменения корректно типизированы
✅ без использования
any(см. PR2856)⬜ нерелевантно
Прочее
✅ все тесты и линтеры на CI проходят
✅ в коде нет лишних изменений
✅ заголовок PR кратко и доступно отражает суть изменений (он попадет в changelog)