Merge pull request #2353 from skbkontur/switcher-validation-tooltip

[Switcher] проблемы с валидацией

packages/react-ui-validations/src/ReactUiDetection.ts

@@ -19,4 +19,8 @@ export class ReactUiDetection {
   public static isTokenInput(childrenArray: any): boolean {
     return childrenArray != null && childrenArray.type?.__KONTUR_REACT_UI__ === 'TokenInput';
   }
+
+  public static isSwitcher(childrenArray: any): boolean {
+    return childrenArray != null && childrenArray.type?.__KONTUR_REACT_UI__ === 'Switcher';
+  }
 }

packages/react-ui-validations/src/ValidationTooltip.tsx

@@ -27,7 +27,11 @@ export class ValidationTooltip extends React.Component<ValidationTooltipProps> {
   public render() {
     const onlyChild = React.Children.only(this.props.children);
     const child = onlyChild && onlyChild.props ? onlyChild.props.children : null;
-    if (ReactUiDetection.isRadioGroup(child) || ReactUiDetection.isTokenInput(child)) {
+    if (
+      ReactUiDetection.isRadioGroup(child) ||
+      ReactUiDetection.isTokenInput(child) ||
+      ReactUiDetection.isSwitcher(child)
+    ) {
       return (
         <Tooltip
           useWrapper={false}

packages/react-ui-validations/stories/Switcher.stories.tsx

@@ -0,0 +1,50 @@
+import { storiesOf } from '@storybook/react';
+import React from 'react';
+import { Button } from '@skbkontur/react-ui/components/Button';
+import { Switcher } from '@skbkontur/react-ui/components/Switcher/Switcher';
+
+import { ValidationContainer, ValidationInfo, ValidationWrapper } from '../src';
+import { Nullable } from '../typings/Types';
+
+storiesOf('Switcher', module).add('required', () => <SwitcherStory />);
+
+interface SwitcherStoryState {
+  value: string;
+}
+
+class SwitcherStory extends React.Component<{}, SwitcherStoryState> {
+  public state: SwitcherStoryState = {
+    value: '',
+  };
+
+  private container: ValidationContainer | null = null;
+
+  public validateValue(): Nullable<ValidationInfo> {
+    const { value } = this.state;
+    if (!value) {
+      return { message: 'Поле обязательно', type: 'submit' };
+    }
+    return null;
+  }
+
+  public render() {
+    return (
+      <div style={{ padding: '20px 20px' }}>
+        <ValidationContainer ref={this.refContainer}>
+          <ValidationWrapper validationInfo={this.state.value === '' ? this.validateValue() : undefined}>
+            <Switcher
+              value={this.state.value}
+              items={['string1', 'string2']}
+              onValueChange={value => this.setState({ value })}
+            />
+          </ValidationWrapper>
+          <div style={{ padding: '20px 0' }}>
+            <Button onClick={() => this.container && this.container.validate()}>Check</Button>
+          </div>
+        </ValidationContainer>
+      </div>
+    );
+  }
+
+  private refContainer = (el: ValidationContainer | null) => (this.container = el);
+}