diff --git a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js index fc68eae924..235ad5c6c6 100644 --- a/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js +++ b/products/ASC.People/Client/src/components/pages/ProfileAction/Section/Body/FormFields/RadioField.js @@ -21,10 +21,7 @@ class RadioField extends React.Component { radioIsDisabled, radioOnChange, - tooltipContent, - tooltipMaxWidth, - tooltipOffsetRight, - tooltipId + tooltipContent } = this.props; return ( @@ -33,9 +30,6 @@ class RadioField extends React.Component { hasError={hasError} labelText={labelText} tooltipContent={tooltipContent} - tooltipMaxWidth={tooltipMaxWidth} - tooltipOffsetRight={tooltipOffsetRight} - tooltipId={tooltipId} > {t("EmailPopupHelper")}} - tooltipMaxWidth={312} - tooltipOffsetRight={100} - tooltipId="EmailTooltip" /> { - //console.log(`afterShow ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e); - this.setState({ isOpen: true }, () => { - handleAnyClick(true, this.handleClick); - }); - }; - - afterHide = () => { - //console.log(`afterHide ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e); - if (this.state.isOpen) { - this.setState({ isOpen: false }, () => { - 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(); - } - }; - - componentWillUnmount() { - handleAnyClick(false, this.handleClick); - } - - render() { const { isVertical, @@ -107,10 +70,7 @@ class FieldContainer extends React.Component { hasError, labelText, children, - tooltipContent, - tooltipOffsetRight, - tooltipMaxWidth, - tooltipId + tooltipContent } = this.props; return ( @@ -124,30 +84,9 @@ class FieldContainer extends React.Component { className="field-label" /> {tooltipContent && ( -
- - - {tooltipContent} - -
+ )}
{children}
@@ -169,10 +108,7 @@ FieldContainer.propTypes = { PropTypes.arrayOf(PropTypes.node), PropTypes.node ]), - tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), - tooltipOffsetRight: PropTypes.number, - tooltipMaxWidth: PropTypes.number, - tooltipId: PropTypes.string + tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]) }; export default FieldContainer; diff --git a/web/ASC.Web.Components/src/components/help-button/README.md b/web/ASC.Web.Components/src/components/help-button/README.md new file mode 100644 index 0000000000..c2ca956d46 --- /dev/null +++ b/web/ASC.Web.Components/src/components/help-button/README.md @@ -0,0 +1,23 @@ +# Buttons: HelpButton + +## Usage + +```js +import { HelpButton } from "asc-web-components"; +``` + +#### Description + +HelpButton is used for a action on a page. + +#### Usage + +```js + +``` + +#### Properties + +| Props | Type | Required | Values | Default | Description | +| ---------------- | ------------------ | :------: | ------ | ------- | --------------- | +| `tooltipContent` | `object or string` | ✅ | - | - | Tooltip content | diff --git a/web/ASC.Web.Components/src/components/help-button/help-button.stories.js b/web/ASC.Web.Components/src/components/help-button/help-button.stories.js new file mode 100644 index 0000000000..5ae7e6b352 --- /dev/null +++ b/web/ASC.Web.Components/src/components/help-button/help-button.stories.js @@ -0,0 +1,26 @@ +import React from "react"; +import { storiesOf } from "@storybook/react"; +import { withKnobs } from "@storybook/addon-knobs/react"; +import withReadme from "storybook-readme/with-readme"; +import Readme from "./README.md"; +import HelpButton from "."; +import Section from "../../../.storybook/decorators/section"; + +storiesOf("Components|Buttons", module) + .addDecorator(withKnobs) + .addDecorator(withReadme(Readme)) + .add("help button", () => { + return ( +
+
+ +
+
+ +
+
+ +
+
+ ); + }); diff --git a/web/ASC.Web.Components/src/components/help-button/help-button.test.js b/web/ASC.Web.Components/src/components/help-button/help-button.test.js new file mode 100644 index 0000000000..e14df49113 --- /dev/null +++ b/web/ASC.Web.Components/src/components/help-button/help-button.test.js @@ -0,0 +1,12 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import HelpButton from '.'; + +describe('', () => { + it('renders without error', () => { + const wrapper = mount( + + ); + expect(wrapper).toExist(); + }); +}); diff --git a/web/ASC.Web.Components/src/components/help-button/index.js b/web/ASC.Web.Components/src/components/help-button/index.js new file mode 100644 index 0000000000..7f489f64a3 --- /dev/null +++ b/web/ASC.Web.Components/src/components/help-button/index.js @@ -0,0 +1,87 @@ +import React from "react"; +import PropTypes from "prop-types"; +import IconButton from "../icon-button"; +import Tooltip from "../tooltip"; +import { handleAnyClick } from "../../utils/event"; +import uniqueId from "lodash/uniqueId"; + +class HelpButton extends React.Component { + constructor(props) { + super(props); + + this.state = { isOpen: false }; + this.ref = React.createRef(); + this.refTooltip = React.createRef(); + this.id = uniqueId(); + } + + 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); + }); + }; + + afterHide = () => { + //console.log(`afterHide ${this.props.tooltipId} isOpen=${this.state.isOpen}`, this.ref, e); + if (this.state.isOpen) { + this.setState({ isOpen: false }, () => { + 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(); + } + }; + + componentWillUnmount() { + handleAnyClick(false, this.handleClick); + } + + render() { + const { tooltipContent } = this.props; + + return ( +
+ + + {tooltipContent} + +
+ ); + } +} + +HelpButton.propTypes = { + children: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.node), + PropTypes.node + ]), + tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + tooltipOffsetRight: PropTypes.number, + tooltipMaxWidth: PropTypes.number, + tooltipId: PropTypes.string +}; + +export default HelpButton; diff --git a/web/ASC.Web.Components/src/components/icon-button/index.js b/web/ASC.Web.Components/src/components/icon-button/index.js index 354a76dd65..1cb9f4cf06 100644 --- a/web/ASC.Web.Components/src/components/icon-button/index.js +++ b/web/ASC.Web.Components/src/components/icon-button/index.js @@ -128,7 +128,8 @@ class IconButton extends React.PureComponent { isDisabled, isFill, isClickable, - onClick + onClick, + id } = this.props; return ( @@ -141,6 +142,9 @@ class IconButton extends React.PureComponent { onMouseDown={this.onMouseDown} onMouseUp={this.onMouseUp} isClickable={typeof onClick === "function" || isClickable} + data-tip="" + data-event="click focus" + data-for={id} //{...this.props} > {React.createElement(Icons[this.state.currentIconName], { @@ -168,7 +172,8 @@ IconButton.propTypes = { onClick: PropTypes.func, onMouseEnter: PropTypes.func, onMouseDown: PropTypes.func, - onMouseUp: PropTypes.func + onMouseUp: PropTypes.func, + id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]) }; IconButton.defaultProps = { diff --git a/web/ASC.Web.Components/src/components/label/README.md b/web/ASC.Web.Components/src/components/label/README.md index 7d77b6d431..0be9ab31ba 100644 --- a/web/ASC.Web.Components/src/components/label/README.md +++ b/web/ASC.Web.Components/src/components/label/README.md @@ -35,10 +35,3 @@ Component displays the field name in the form | `truncate` | `bool` | - | - | false | Disables word wrapping | | `htmlFor` | `string` | - | - | - | The field ID to which the label is attached | | `text` | `string` | - | - | - | Text | -| `tooltipId` | `string` | - | - | - | Tooltip id | -| `tooltipEvent` | `string` | - | - | - | Tooltip event | -| `iconButton` | `string` | - | - | - | Tooltip icon button | - - - - diff --git a/web/ASC.Web.Components/src/components/tooltip/all.stories.js b/web/ASC.Web.Components/src/components/tooltip/all.stories.js index 90d13949d0..1bd7ab2f16 100644 --- a/web/ASC.Web.Components/src/components/tooltip/all.stories.js +++ b/web/ASC.Web.Components/src/components/tooltip/all.stories.js @@ -3,15 +3,12 @@ import { storiesOf } from "@storybook/react"; import withReadme from "storybook-readme/with-readme"; import Readme from "./README.md"; import Tooltip from "./"; -import IconButton from "../icon-button"; import Section from "../../../.storybook/decorators/section"; import Link from "../link"; import { Text } from "../text"; -const BodyStyle = { marginTop: 100, marginLeft: 50, position: "absolute" }; -const headerStyle = { marginTop: 70, marginLeft: 15, position: "absolute" }; -const BodyStyle_2 = { marginTop: 70, marginLeft: 200, position: "absolute" }; -const BodyStyle_3 = { marginTop: 70, marginLeft: 400 }; +const BodyStyle = { marginTop: 70, marginLeft: 50, position: "absolute" }; +const BodyStyle_2 = { marginTop: 70, marginLeft: 250 }; const arrayUsers = [ { @@ -51,25 +48,7 @@ storiesOf("Components|Tooltip", module) .add("all", () => { return (
-
Click on me
- - - - -
+
Hover on me
Bob Johnston @@ -87,7 +66,7 @@ storiesOf("Components|Tooltip", module)
-
+
Hover group
Bob diff --git a/web/ASC.Web.Components/src/components/tooltip/index.js b/web/ASC.Web.Components/src/components/tooltip/index.js index 962d69883e..066f74780e 100644 --- a/web/ASC.Web.Components/src/components/tooltip/index.js +++ b/web/ASC.Web.Components/src/components/tooltip/index.js @@ -71,11 +71,9 @@ class Tooltip extends Component { left: offsetLeft }} wrapper="div" - resizeHide={true} - scrollHide={true} afterShow={afterShow} - isCapture={true} afterHide={afterHide} + isCapture={true} > {children} diff --git a/web/ASC.Web.Components/src/index.js b/web/ASC.Web.Components/src/index.js index ec1fcbe68c..7b6bb2ea4a 100644 --- a/web/ASC.Web.Components/src/index.js +++ b/web/ASC.Web.Components/src/index.js @@ -58,4 +58,5 @@ export { default as utils } from './utils' export { default as DatePicker } from './components/date-picker' export { default as PasswordInput } from './components/password-input' export { default as Tooltip } from './components/tooltip' +export { default as HelpButton } from './components/help-button'