Merge pull request #444 from ONLYOFFICE/bugfix/tooltip

Bugfix/tooltip

packages/asc-web-components/help-button/help-button.test.js

@@ -9,17 +9,6 @@ describe("<HelpButton />", () => {
     expect(wrapper).toExist();
   });
 
-  it("HelpButton renders without error in Aside mode", () => {
-    const wrapper = mount(
-      <HelpButton
-        tooltipContent={tooltipContent}
-        displayType="aside"
-        helpButtonHeaderContent="Header text"
-      />
-    );
-    expect(wrapper).toExist();
-  });
-
   it("HelpButton componentWillUnmount  test", () => {
     const wrapper = mount(<HelpButton tooltipContent={tooltipContent} />);
     const componentWillUnmount = jest.spyOn(
@@ -35,11 +24,11 @@ describe("<HelpButton />", () => {
       <HelpButton tooltipContent={tooltipContent} />
     ).instance();
     wrapper.afterHide();
-    expect(wrapper.state.isOpen).toEqual(false);
+    expect(wrapper.state.hideTooltip).toEqual(false);
 
-    wrapper.setState({ isOpen: true });
+    wrapper.setState({ hideTooltip: false });
     wrapper.afterHide();
-    expect(wrapper.state.isOpen).toEqual(false);
+    expect(wrapper.state.hideTooltip).toEqual(false);
   });
 
   it("accepts id", () => {
@@ -65,16 +54,4 @@ describe("<HelpButton />", () => {
 
     expect(wrapper.getDOMNode().style).toHaveProperty("color", "red");
   });
-
-  it("", () => {
-    const wrapper = mount(
-      <HelpButton tooltipContent={tooltipContent} />
-    ).instance();
-    wrapper.componentDidUpdate(wrapper.props);
-
-    wrapper.componentDidUpdate({ displayType: "auto" });
-    wrapper.componentDidUpdate({ displayType: "aside" });
-
-    expect(wrapper.props).toBe(wrapper.props);
-  });
 });

packages/asc-web-components/help-button/index.js

@@ -5,125 +5,62 @@ import IconButton from "../icon-button";
 import Tooltip from "../tooltip";
 import { handleAnyClick } from "../utils/event";
 import uniqueId from "lodash/uniqueId";
-import Aside from "../aside";
-import { desktop } from "../utils/device";
-import Backdrop from "../backdrop";
-import Heading from "../heading";
-import throttle from "lodash/throttle";
-import { Content, HeaderContent, Body } from "./styled-help-button";
 
 class HelpButton extends React.Component {
   constructor(props) {
     super(props);
 
     this.state = {
-      isOpen: false,
-      displayType: this.getTypeByWidth(),
       hideTooltip: false,
     };
     this.ref = React.createRef();
     this.refTooltip = React.createRef();
     this.id = this.props.id || uniqueId();
-
-    this.throttledResize = throttle(this.resize, 300);
   }
 
   afterShow = () => {
     this.refTooltip.current.updatePosition();
-    //console.log(`afterShow ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
-    this.setState({ isOpen: true }, () => {
-      handleAnyClick(true, this.handleClick);
-    });
+    handleAnyClick(true, this.handleClick);
 
     if (this.state.hideTooltip) {
       this.refTooltip.current.hideTooltip();
     }
   };
 
   afterHide = () => {
-    //console.log(`afterHide ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
-    if (this.state.isOpen && !this.state.hideTooltip) {
-      this.setState({ isOpen: false }, () => {
-        handleAnyClick(false, this.handleClick);
-      });
+    if (!this.state.hideTooltip) {
+      handleAnyClick(false, this.handleClick);
     }
   };
 
   handleClick = (e) => {
-    //console.log(`handleClick ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e);
-
     if (!this.ref.current.contains(e.target)) {
-      //console.log(`hideTooltip() tooltipId=${this.props.tooltipId}`, this.refTooltip.current);
       this.refTooltip.current.hideTooltip();
     }
   };
 
-  onClose = () => {
-    this.setState({ isOpen: false });
-  };
-
-  componentDidMount() {
-    window.addEventListener("resize", this.throttledResize);
-  }
-
   componentWillUnmount() {
     handleAnyClick(false, this.handleClick);
-    window.removeEventListener("resize", this.throttledResize);
-  }
-
-  componentDidUpdate(prevProps) {
-    if (this.props.displayType !== prevProps.displayType) {
-      this.setState({ displayType: this.getTypeByWidth() });
-    }
-    if (this.state.isOpen && this.state.displayType === "aside") {
-      window.addEventListener("popstate", this.popstate, false);
-    }
   }
 
-  popstate = () => {
-    window.removeEventListener("popstate", this.popstate, false);
-    this.onClose();
-    window.history.go(1);
-  };
-
-  resize = () => {
-    if (this.props.displayType !== "auto") return;
-    const type = this.getTypeByWidth();
-    if (type === this.state.displayType) return;
-    this.setState({ displayType: type });
-  };
-
-  getTypeByWidth = () => {
-    if (this.props.displayType !== "auto") return this.props.displayType;
-    return window.innerWidth < desktop.match(/\d+/)[0] ? "aside" : "dropdown";
-  };
-
   onClick = () => {
-    let state = false;
-    if (this.state.displayType === "aside") {
-      state = true;
-    }
-    this.setState({ isOpen: !this.state.isOpen, hideTooltip: state });
+    this.setState({ hideTooltip: false });
   };
 
   render() {
-    const { isOpen, displayType } = this.state;
     const {
       tooltipContent,
       place,
       offsetTop,
       offsetBottom,
       offsetRight,
       offsetLeft,
-      zIndex,
-      helpButtonHeaderContent,
       iconName,
       color,
       getContent,
       className,
       dataTip,
       style,
-      tooltipColor,
     } = this.props;
 
     return (
@@ -152,7 +89,6 @@ class HelpButton extends React.Component {
             afterShow={this.afterShow}
             afterHide={this.afterHide}
             getContent={getContent}
-            color={tooltipColor}
           />
         ) : (
           <Tooltip
@@ -164,33 +100,10 @@ class HelpButton extends React.Component {
             offsetLeft={offsetLeft}
             afterShow={this.afterShow}
             afterHide={this.afterHide}
-            color={tooltipColor}
           >
             {tooltipContent}
           </Tooltip>
         )}
-        {displayType === "aside" && (
-          <>
-            <Backdrop
-              onClick={this.onClose}
-              visible={isOpen}
-              zIndex={zIndex}
-              isAside={true}
-            />
-            <Aside visible={isOpen} scale={false} zIndex={zIndex}>
-              <Content>
-                {helpButtonHeaderContent && (
-                  <HeaderContent>
-                    <Heading className="header" size="medium" truncate={true}>
-                      {helpButtonHeaderContent}
-                    </Heading>
-                  </HeaderContent>
-                )}
-                <Body>{tooltipContent}</Body>
-              </Content>
-            </Aside>
-          </>
-        )}
       </div>
     );
   }
@@ -209,11 +122,6 @@ HelpButton.propTypes = {
   tooltipMaxWidth: PropTypes.number,
   tooltipId: PropTypes.string,
   place: PropTypes.string,
-  zIndex: PropTypes.number,
-  /** Tooltip display type  */
-  displayType: PropTypes.oneOf(["dropdown", "aside", "auto"]),
-  /** Tooltip header content (tooltip opened in aside) */
-  helpButtonHeaderContent: PropTypes.string,
   iconName: PropTypes.string,
   color: PropTypes.string,
   dataTip: PropTypes.string,
@@ -223,7 +131,6 @@ HelpButton.propTypes = {
   /** Accepts id */
   id: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-  tooltipColor: PropTypes.string,
 };
 
 HelpButton.defaultProps = {
@@ -233,11 +140,8 @@ HelpButton.defaultProps = {
   offsetLeft: 0,
   offsetTop: 0,
   offsetBottom: 0,
-  zIndex: 310,
-  displayType: "auto",
   className: "icon-button",
   color: "#A3A9AE",
-  tooltipColor: "#fff",
 };
 
 export default HelpButton;

packages/asc-web-components/tooltip/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from "react";
 import PropTypes from "prop-types";
 import ReactTooltip from "react-tooltip";
-
+import Portal from "../portal";
 import StyledTooltip from "./styled-tooltip";
 
 class Tooltip extends Component {
@@ -13,16 +13,6 @@ class Tooltip extends Component {
     ReactTooltip.rebuild();
   }
 
-  overridePosition = ({ left, top }) => {
-    const d = document.documentElement;
-    left = Math.min(d.clientWidth - 340, left);
-    top = Math.min(d.clientHeight - 0, top);
-    left = Math.max(0, left);
-    top = Math.max(0, top);
-    //console.log("left:", left, "top:", top);
-    return { top, left };
-  };
-
   render() {
     const {
       effect,
@@ -40,10 +30,16 @@ class Tooltip extends Component {
       className,
       style,
       color,
+      maxWidth,
     } = this.props;
 
-    return (
-      <StyledTooltip className={className} style={style} color={color}>
+    const renderTooltip = () => (
+      <StyledTooltip
+        className={className}
+        style={style}
+        color={color}
+        maxWidth={maxWidth}
+      >
         <ReactTooltip
           id={id}
           ref={reference}
@@ -61,12 +57,15 @@ class Tooltip extends Component {
           afterShow={afterShow}
           afterHide={afterHide}
           isCapture={true}
-          overridePosition={this.overridePosition}
         >
           {children}
         </ReactTooltip>
       </StyledTooltip>
     );
+
+    const tooltip = renderTooltip();
+
+    return <Portal element={tooltip} />;
   }
 }
 
@@ -100,6 +99,7 @@ Tooltip.propTypes = {
   /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
   color: PropTypes.string,
+  maxWidth: PropTypes.string,
 };
 
 Tooltip.defaultProps = {
@@ -109,7 +109,7 @@ Tooltip.defaultProps = {
   offsetRight: 0,
   offsetBottom: 0,
   offsetLeft: 0,
-  color: "#fff",
+  color: "#f8f7bf",
 };
 
 export default Tooltip;

packages/asc-web-components/tooltip/styled-tooltip.js

@@ -13,7 +13,8 @@ const StyledTooltip = styled.div`
     opacity: ${(props) => props.theme.tooltip.opacity};
     padding: ${(props) => props.theme.tooltip.padding};
     pointer-events: ${(props) => props.theme.tooltip.pointerEvents};
-    max-width: ${(props) => props.theme.tooltip.maxWidth};
+    max-width: ${(props) =>
+      props.maxWidth ? props.maxWidth : props.theme.tooltip.maxWidth};
 
     &:before {
       border: ${(props) => props.theme.tooltip.before.border};

products/ASC.Files/Client/src/components/panels/UploadPanel/FileRow.js

@@ -45,28 +45,6 @@ const StyledFileRow = styled(Row)`
     padding-right: 12px;
   }
 
-  .__react_component_tooltip.type-light {
-    background-color: #f8f7bf !important;
-    box-shadow: none;
-    -moz-box-shadow: none;
-    -webkit-box-shadow: none;
-  }
-  .__react_component_tooltip.place-left::after {
-    border-left: 6px solid #f8f7bf !important;
-  }
-
-  .__react_component_tooltip.place-right::after {
-    border-right: 6px solid #f8f7bf !important;
-  }
-
-  .__react_component_tooltip.place-top::after {
-    border-top: 6px solid #f8f7bf !important;
-  }
-
-  .__react_component_tooltip.place-bottom::after {
-    border-bottom: 6px solid #f8f7bf !important;
-  }
-
   .upload-panel_file-row-link {
     ${(props) =>
       !props.isMediaActive &&
@@ -203,7 +181,7 @@ const FileRow = (props) => {
                 getContent={(dataTip) => <Text fontSize="13px">{dataTip}</Text>}
                 effect="float"
                 place="left"
-                maxWidth={320}
+                maxWidth="250px"
                 color="#f8f7bf"
               />
             </div>

products/ASC.People/Client/src/pages/Profile/Section/Body/ProfileInfo/ProfileInfo.js

@@ -251,7 +251,7 @@ class ProfileInfo extends React.PureComponent {
             {{ supportEmail }}
           </Link>
           to take part in the translation and get up to 1 year free of charge."
-        </Trans>
+        </Trans>{" "}
         <Link
           isHovered={true}
           href="https://helpcenter.onlyoffice.com/ru/guides/become-translator.aspx"