Make tooltips behaviour as in guides

Author: tihonove

.vscode/settings.json

@@ -9,5 +9,9 @@
         "*.js": "javascript",
         "*.js.flow": "javascript"
     },
-    "prettier.eslintIntegration": true
+    "prettier.eslintIntegration": true,
+    "files.exclude": {
+        "**/dist": true,
+        "**/retail-ui-dist": true,
+    }
 }

src/Behaviour/ValidationContext.jsx

@@ -104,7 +104,6 @@ export default class ValidationContext extends React.Component<ValidationContext
             if (!withoutFocus) {
                 firstInvalid.focus();
             }
-            firstInvalid.activateValidationMessageIfNeed();
         }
 
         if (this.props.onValidationUpdated) {

src/Behaviour/ValidationWrapper.jsx

@@ -188,12 +188,6 @@ export default class ValidationWrapper extends React.Component<ValidationWrapper
         }
     }
 
-    activateValidationMessageIfNeed() {
-        if (this.refs.errorMessage && typeof this.refs.errorMessage.setOpened === "function") {
-            this.refs.errorMessage.setOpened(true);
-        }
-    }
-
     async focus(): Promise<void> {
         if (this.child) {
             const childDomElement = ReactDom.findDOMNode(this.child);

src/Tooltips/ValidationTooltip.jsx

@@ -1,7 +1,6 @@
 // @flow
 /* eslint-disable import/no-dynamic-require, prefer-template */
 import * as React from "react";
-import PropTypes from "prop-types";
 import ReactUiDetection from "../ReactUiDetection";
 
 // $FlowFixMe we use define plugin
@@ -10,7 +9,7 @@ const Tooltip = requireDefault(Tooltip2);
 
 function requireDefault<T>(obj: T): T {
     // $FlowFixMe default is a same module
-    return obj && obj.__esModule ? obj.default : obj // eslint-disable-line
+    return obj && obj.__esModule ? obj.default : obj; // eslint-disable-line
 }
 
 type ValidationTooltipProps = {
@@ -20,63 +19,30 @@ type ValidationTooltipProps = {
 };
 
 type ValidationTooltipState = {
-    opened: boolean,
+    focus: boolean,
+    mouseOver: boolean,
 };
 
 export default class ValidationTooltip extends React.Component<ValidationTooltipProps, ValidationTooltipState> {
     state: ValidationTooltipState = {
-        opened: false,
+        focus: false,
+        mouseOver: false,
     };
 
-    static contextTypes = {
-        validationTooltipContext: PropTypes.any,
-    };
-
-    componentWillReceiveProps(nextProps: ValidationTooltipProps) {
-        if (this.props.error !== nextProps.error) {
-            this.context.validationTooltipContext.errorStateUpdated(this, this.props.error, nextProps.error);
-        }
-    }
-
-    componentWillMount() {
-        if (this.context.validationTooltipContext) {
-            this.context.validationTooltipContext.registerInstance(this);
-        }
-    }
-
-    componentWillUnmount() {
-        if (this.context.validationTooltipContext) {
-            this.context.validationTooltipContext.unregisterInstance(this);
-        }
-    }
-
-    setOpened(opened: boolean) {
-        if (this.state.opened !== opened) {
-            this.setState({
-                opened: opened,
-            });
-        }
-    }
-
-    getBoxDomElement(): Element {
-        // eslint-disable-next-line no-underscore-dangle
-        return this.refs.tooltip._hotspotDOM;
-    }
-
     handleFocus() {
-        this.context.validationTooltipContext.instanceFocus(this);
+        this.setState({ focus: true });
     }
 
     handleBlur() {
-        this.context.validationTooltipContext.instanceBlur(this);
+        this.setState({ focus: false });
     }
 
     handleMouseOver() {
-        this.context.validationTooltipContext.instanceMouseOver(this);
+        this.setState({ mouseOver: true });
     }
 
     handleMouseOut() {
-        this.context.validationTooltipContext.instanceMouseOut(this);
+        this.setState({ mouseOver: false });
     }
 
     render(): React.Node {
@@ -108,7 +74,9 @@ export default class ValidationTooltip extends React.Component<ValidationTooltip
                             ref="tooltip"
                             {...props}
                             closeButton={false}
-                            trigger={this.props.error && this.state.opened ? "opened" : "closed"}>
+                            trigger={
+                                this.props.error && (this.state.focus || this.state.mouseOver) ? "opened" : "closed"
+                            }>
                             {React.cloneElement(prevRenderItem(value, data, ...rest))}
                         </Tooltip>
                     );
@@ -122,7 +90,7 @@ export default class ValidationTooltip extends React.Component<ValidationTooltip
                 ref="tooltip"
                 {...props}
                 closeButton={false}
-                trigger={this.props.error && this.state.opened ? "opened" : "closed"}>
+                trigger={this.props.error && (this.state.focus || this.state.mouseOver) ? "opened" : "closed"}>
                 {React.cloneElement(onlyChild, childProps)}
             </Tooltip>
         );

src/Tooltips/ValidationTooltipContext.jsx

@@ -1,13 +1,12 @@
 // @flow
 /* eslint-disable react/no-multi-comp */
 import * as React from "react";
-import ValidationTooltipContext from "./Tooltips/ValidationTooltipContext";
 import ValidationContext from "./Behaviour/ValidationContext";
 import ValidationWrapper from "./Behaviour/ValidationWrapper";
 import ValidationTooltip from "./Tooltips/ValidationTooltip";
 import type { RenderErrorMessage } from "./Behaviour/ValidationWrapper";
 
-export { ValidationTooltip, ValidationTooltipContext, ValidationContext, ValidationWrapper };
+export { ValidationTooltip, ValidationContext, ValidationWrapper };
 
 type ValidationContainerProps = {
     children?: any,
@@ -33,7 +32,7 @@ export class ValidationContainer extends React.Component<ValidationContainerProp
         contextProps.verticalOffset = this.props.scrollOffset || 50;
         return (
             <ValidationContext ref="childContext" {...contextProps}>
-                <ValidationTooltipContext ref="childTooltipContext">{children}</ValidationTooltipContext>
+                {children}
             </ValidationContext>
         );
     }

src/index.js

@@ -227,6 +227,49 @@ class Example6 extends React.Component {
     }
 }
 
+class Example7 extends React.Component {
+    state = {
+        value1: "",
+        value2: "",
+        value3: "",
+    };
+
+    validateValue(value) {
+        if (value === "") {
+            return { message: "Должно быть не пусто", type: "submit" };
+        } else if (value.split(" ").length !== 2) {
+            return { message: "Значение должно состоять из двух слов.", type: "lostfocus" };
+        }
+        return null;
+    }
+
+    render() {
+        const { value1, value2, value3 } = this.state;
+        return (
+            <ValidationContainer ref="container">
+                <div>
+                    <div style={{ padding: 20 }}>
+                        <ValidationWrapperV1 validationInfo={this.validateValue(value1)}>
+                            <Input value={value1} onChange={(e, value) => this.setState({ value1: value })} />
+                        </ValidationWrapperV1>
+                    </div>
+                    <div style={{ padding: 20 }}>
+                        <ValidationWrapperV1 validationInfo={this.validateValue(value2)}>
+                            <Input value={value2} onChange={(e, value) => this.setState({ value2: value })} />
+                        </ValidationWrapperV1>
+                    </div>
+                    <div style={{ padding: 20 }}>
+                        <ValidationWrapperV1 validationInfo={this.validateValue(value3)}>
+                            <Input value={value3} onChange={(e, value) => this.setState({ value3: value })} />
+                        </ValidationWrapperV1>
+                    </div>
+                </div>
+                <Button onClick={() => this.refs.container.submit()}>Отправить</Button>
+            </ValidationContainer>
+        );
+    }
+}
+
 storiesOf("Input", module)
     .add("#1", () => {
         return <Example1 />;
@@ -245,4 +288,7 @@ storiesOf("Input", module)
     })
     .add("#6 Выбор первого контра для валидации", () => {
         return <Example6 />;
+    })
+    .add("#7 Три невалидных поля по сабмиту", () => {
+        return <Example7 />;
     });

stories/Input.stories.js

@@ -12,8 +12,8 @@ class RadioGroupStory extends React.Component {
     };
 
     validateSex() {
-        const { value1 } = this.state;
-        if (value1 == null) {
+        const { sex } = this.state;
+        if (sex == null) {
             return { message: "Должно быть не пусто", type: "submit" };
         }
         return null;