From 8317e0baac36346a15cfff7477f4b482430a007d Mon Sep 17 00:00:00 2001 From: SchwJ <67754964+SchwJ@users.noreply.github.com> Date: Tue, 9 Jul 2024 15:20:35 +0500 Subject: [PATCH 1/5] fix(validations): program validation on multiple fields (#3454) --- .../src/ValidationWrapperInternal.tsx | 10 ++- .../tests/ValidationContainer.test.tsx | 84 +++++++++++++++++++ .../react-ui/components/Calendar/Calendar.tsx | 12 --- .../components/DatePicker/DatePicker.md | 27 +++--- 4 files changed, 100 insertions(+), 33 deletions(-) diff --git a/packages/react-ui-validations/src/ValidationWrapperInternal.tsx b/packages/react-ui-validations/src/ValidationWrapperInternal.tsx index e44be6d2bf8..399213e8546 100644 --- a/packages/react-ui-validations/src/ValidationWrapperInternal.tsx +++ b/packages/react-ui-validations/src/ValidationWrapperInternal.tsx @@ -248,10 +248,12 @@ export class ValidationWrapperInternal extends React.Component< } return new Promise((resolve) => { - this.setState({ validation }, resolve); - if (Boolean(current) !== Boolean(validation)) { - this.context.onValidationUpdated(this, !validation); - } + this.setState({ validation }, () => { + if (Boolean(current) !== Boolean(validation)) { + this.context.onValidationUpdated(this, !validation); + } + resolve(); + }); }); } diff --git a/packages/react-ui-validations/tests/ValidationContainer.test.tsx b/packages/react-ui-validations/tests/ValidationContainer.test.tsx index 3ffc23e5ece..39f7a0935f7 100644 --- a/packages/react-ui-validations/tests/ValidationContainer.test.tsx +++ b/packages/react-ui-validations/tests/ValidationContainer.test.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; import { + Button, ComboBox, DatePicker, FileUploader, @@ -15,6 +16,7 @@ import { FocusMode, ValidationContainer, ValidationContainerProps, + ValidationInfo, ValidationsFeatureFlagsContext, ValidationWrapper, } from '../src'; @@ -159,4 +161,86 @@ describe('ValidationContainer', () => { expect(screen.getByRole('textbox')).not.toHaveFocus(); }); }); + + describe('on validation updated', () => { + const renderValidationContainer = ( + children: React.ReactElement, + props?: ValidationContainerProps, + ): React.RefObject => { + const containerRef = React.createRef(); + render( + + {children} + , + ); + return containerRef; + }; + const validate = (value: string) => { + return value.includes('bad') ? ({ message: 'Ошибка', type: 'submit' } as ValidationInfo) : null; + }; + + it('works with one field', async () => { + const ValidationForm = () => { + const [value1, setValue1] = React.useState('bad'); + + return ( + <> + + + + + + ); + }; + + const onValidationUpdated = jest.fn(); + const containerRef = renderValidationContainer(, { onValidationUpdated }); + await containerRef.current?.submit(); + expect(onValidationUpdated).toBeCalledWith(false); + + screen.getByRole('button', { name: 'Repair' }).click(); + expect(onValidationUpdated).toBeCalledWith(true); + }); + + it('works with multiple fields', async () => { + const ValidationForm = () => { + const [value1, setValue1] = React.useState('bad'); + const [value2, setValue2] = React.useState('bad'); + const validationContainerRef = React.useRef(null); + + return ( + <> + + + + + + + + + + + ); + }; + + const onValidationUpdated = jest.fn(); + const containerRef = renderValidationContainer(, { onValidationUpdated }); + await containerRef.current?.submit(); + + expect(onValidationUpdated).toBeCalledWith(false); + + screen.getByRole('button', { name: 'Partial Repair' }).click(); + expect(onValidationUpdated).toBeCalledWith(false); + + screen.getByRole('button', { name: 'Repair' }).click(); + expect(onValidationUpdated).toBeCalledWith(true); + }); + }); }); diff --git a/packages/react-ui/components/Calendar/Calendar.tsx b/packages/react-ui/components/Calendar/Calendar.tsx index 402479b09e5..4b50dab03be 100644 --- a/packages/react-ui/components/Calendar/Calendar.tsx +++ b/packages/react-ui/components/Calendar/Calendar.tsx @@ -53,18 +53,6 @@ export interface CalendarProps extends CommonProps { * Дата задаётся в формате `dd.mm.yyyy` */ minDate?: string; - /** - * Задаёт начальную дату периода - * - * Дата задаётся в формате `dd.mm.yyyy` - */ - periodStartDate?: string; - /** - * Задаёт конечную дату периода - * - * Дата задаётся в формате `dd.mm.yyyy` - */ - periodEndDate?: string; /** * Функция для определения праздничных дней * @default (_day, isWeekend) => isWeekend diff --git a/packages/react-ui/components/DatePicker/DatePicker.md b/packages/react-ui/components/DatePicker/DatePicker.md index e00c85e21eb..71d35878c86 100644 --- a/packages/react-ui/components/DatePicker/DatePicker.md +++ b/packages/react-ui/components/DatePicker/DatePicker.md @@ -274,30 +274,23 @@ class DatePickerFormatting extends React.Component { ; ``` -### Период дат -Подбробный пример в [Calendar](#/Components/Calendar) - -```jsx harmony -const [value, setValue] = React.useState('12.05.2022'); - -; -``` - ### Кастомный рендер дня Подбробный пример в [Calendar](#/Components/Calendar) ```jsx harmony +import { CalendarDay } from "@skbkontur/react-ui"; + const [value, setValue] = React.useState('12.05.2022'); -const renderDay = (date, defaultProps, RenderDefault) => { - const isEven = defaultProps.children % 2 === 0; +const renderDay = (props) => { + const [date] = props.date.split('.').map(Number); + const isEven = date % 2 === 0; - return ; + if (isEven) { + return + } + + return }; From 6b457cee3fac55ddb49795708873c5d85dfa99e5 Mon Sep 17 00:00:00 2001 From: Egor Pogadaev Date: Tue, 9 Jul 2024 15:51:27 +0500 Subject: [PATCH 2/5] chore(release): publish - react-ui-validations@1.16.2 --- packages/react-ui-validations/CHANGELOG.md | 11 +++++++++++ packages/react-ui-validations/package.json | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react-ui-validations/CHANGELOG.md b/packages/react-ui-validations/CHANGELOG.md index 53386d27af0..1d1260da4c3 100644 --- a/packages/react-ui-validations/CHANGELOG.md +++ b/packages/react-ui-validations/CHANGELOG.md @@ -3,6 +3,17 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [1.16.2](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/compare/react-ui-validations@1.16.1...react-ui-validations@1.16.2) (2024-07-09) + + +### Bug Fixes + +* **validations:** program validation on multiple fields ([#3454](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/issues/3454)) ([8317e0b](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/commit/8317e0baac36346a15cfff7477f4b482430a007d)) + + + + + ## [1.16.1](https://github.com/skbkontur/retail-ui/tree/master/packages/react-ui-validations/compare/react-ui-validations@1.16.0...react-ui-validations@1.16.1) (2024-07-05) diff --git a/packages/react-ui-validations/package.json b/packages/react-ui-validations/package.json index 95d0f99ea90..ce71ea52668 100644 --- a/packages/react-ui-validations/package.json +++ b/packages/react-ui-validations/package.json @@ -1,6 +1,6 @@ { "name": "react-ui-validations", - "version": "1.16.1", + "version": "1.16.2", "description": "Validations for @skbkontur/react-ui", "scripts": { "prebuild": "yarn clean", From 5c0fccefea1de468a9a796456f6a8a9163587a51 Mon Sep 17 00:00:00 2001 From: HelenaIsh <32093844+HelenaIsh@users.noreply.github.com> Date: Tue, 16 Jul 2024 10:46:42 +0500 Subject: [PATCH 3/5] fix(Loader): fix Loader in 18 react (#3467) --- packages/react-ui/lib/taskWithDelayAndMinimalDuration.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/react-ui/lib/taskWithDelayAndMinimalDuration.ts b/packages/react-ui/lib/taskWithDelayAndMinimalDuration.ts index 0f2dc6c034a..be6b5990488 100644 --- a/packages/react-ui/lib/taskWithDelayAndMinimalDuration.ts +++ b/packages/react-ui/lib/taskWithDelayAndMinimalDuration.ts @@ -77,6 +77,7 @@ export class TaskWithDelayAndMinimalDuration { }; public clearTask = () => { + this.isTaskActive = false; this.clearTimeoutBeforeTaskStart(); this.clearTimeoutBeforeTaskStop(); }; From bc4cac9444667bc10f499fec417cd67cc1081075 Mon Sep 17 00:00:00 2001 From: Mikhail Shatikhin Date: Tue, 16 Jul 2024 12:18:05 +0500 Subject: [PATCH 4/5] fix(Select): pass disabled to _renderButton (#3468) --- .../react-ui/components/RadioGroup/RadioGroup.tsx | 13 +++++++++++-- .../RadioGroup/__tests__/RadioGroup-test.tsx | 6 ++++++ packages/react-ui/components/Select/Select.tsx | 1 + .../components/Select/__tests__/Select-test.tsx | 6 ++++++ packages/react-ui/components/Token/Token.tsx | 3 ++- .../components/Token/__tests__/Token-test.tsx | 6 ++++++ 6 files changed, 32 insertions(+), 3 deletions(-) diff --git a/packages/react-ui/components/RadioGroup/RadioGroup.tsx b/packages/react-ui/components/RadioGroup/RadioGroup.tsx index 39dea76ef6a..4e5bae0899a 100644 --- a/packages/react-ui/components/RadioGroup/RadioGroup.tsx +++ b/packages/react-ui/components/RadioGroup/RadioGroup.tsx @@ -11,6 +11,7 @@ import { Theme } from '../../lib/theming/Theme'; import { CommonProps, CommonWrapper } from '../../internal/CommonWrapper'; import { cx } from '../../lib/theming/Emotion'; import { rootNode, TSetRootNode } from '../../lib/rootNode'; +import { getVisualStateDataAttributes } from '../../internal/CommonWrapper/utils/getVisualStateDataAttributes'; import { styles } from './RadioGroup.styles'; import { Prevent } from './Prevent'; @@ -154,7 +155,15 @@ export class RadioGroup extends React.Component, RadioGrou } public renderMain() { - const { width, onMouseLeave, onMouseOver, onMouseEnter, onBlur, 'aria-describedby': ariaDescribedby } = this.props; + const { + width, + onMouseLeave, + onMouseOver, + onMouseEnter, + onBlur, + 'aria-describedby': ariaDescribedby, + disabled, + } = this.props; const style = { width: width ?? 'auto', }; @@ -165,7 +174,7 @@ export class RadioGroup extends React.Component, RadioGrou }; return ( - + ', () => { expect(radioGroup).toHaveAttribute('aria-describedby', 'elementRadioGroupId'); expect(radioGroup).toHaveAccessibleDescription('Description Radio group'); }); + + it('should have visual state disabled attribute', () => { + render(); + + expect(screen.getByRole('radiogroup')).toHaveAttribute('data-visual-state-disabled'); + }); }); diff --git a/packages/react-ui/components/Select/Select.tsx b/packages/react-ui/components/Select/Select.tsx index 30372eafef3..c0eb4c00fe1 100644 --- a/packages/react-ui/components/Select/Select.tsx +++ b/packages/react-ui/components/Select/Select.tsx @@ -368,6 +368,7 @@ export class Select extends React.Component { expect(screen.getByRole('button')).toHaveAttribute('aria-label', ariaLabel); }); + + it('sets value disabled `_renderButton` is passed', () => { + render(