Merge branch 'master' of github.com:skbkontur/retail-ui into react-17

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);
+}

packages/react-ui/components/SidePage/SidePage.tsx

@@ -266,7 +266,7 @@ export class SidePage extends React.Component<SidePageProps, SidePageState> {
   }
 
   private handleStackChange = (stack: ReadonlyArray<React.Component>) => {
-    const sidePages = stack.filter(x => x instanceof SidePage);
+    const sidePages = stack.filter(x => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);
     const currentSidePagePosition = sidePages.indexOf(this);
 
     const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;

packages/react-ui/components/SidePage/__stories__/SidePage.stories.tsx

@@ -320,6 +320,47 @@ class SidePageWithLeftPosition extends React.Component<{
   }
 }
 
+class LeftSidePageWithRightSidePage extends React.Component<{
+  disableAnimations?: boolean;
+}> {
+  public render() {
+    return (
+      <>
+        <SidePage disableAnimations={this.props.disableAnimations} fromLeft={true}>
+          <SidePage.Header>test</SidePage.Header>
+          <SidePage.Body>
+            <SidePage.Container>
+              {textSample}
+              {textSample}
+            </SidePage.Container>
+          </SidePage.Body>
+          <SidePage.Footer panel>
+            <Gapped>
+              <Button use="primary">Ok</Button>
+              <Button>Cancel</Button>
+            </Gapped>
+          </SidePage.Footer>
+        </SidePage>
+        <SidePage disableAnimations={this.props.disableAnimations} fromLeft={false}>
+          <SidePage.Header>test</SidePage.Header>
+          <SidePage.Body>
+            <SidePage.Container>
+              {textSample}
+              {textSample}
+            </SidePage.Container>
+          </SidePage.Body>
+          <SidePage.Footer panel>
+            <Gapped>
+              <Button use="primary">Ok</Button>
+              <Button>Cancel</Button>
+            </Gapped>
+          </SidePage.Footer>
+        </SidePage>
+      </>
+    );
+  }
+}
+
 class SimpleSidePage extends React.Component<{}, {}> {
   public render() {
     return (
@@ -615,6 +656,12 @@ SidePageWithLeftPositionStory.story = {
   parameters: { creevey: { captureElement: null } },
 };
 
+export const LeftSidePageWithRightSidePageStory = () => <LeftSidePageWithRightSidePage disableAnimations />;
+LeftSidePageWithRightSidePageStory.story = {
+  name: 'Left SidePage With Right SidePage',
+  parameters: { creevey: { captureElement: null } },
+};
+
 export const Simple: CSFStory<JSX.Element> = () => <SimpleSidePage />;
 Simple.story = {
   parameters: {