diff --git a/src/Popup.js b/src/Popup.js index 7389fd3..7ec30c5 100644 --- a/src/Popup.js +++ b/src/Popup.js @@ -31,7 +31,7 @@ export default class Popup extends React.PureComponent { state = { isOpen: this.props.open || this.props.defaultOpen, modal: this.props.modal ? true : !this.props.trigger - // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't existe + // we create this modal state because the popup can't be a tooltip if the trigger prop doesn't exist }; constructor(props) { @@ -147,7 +147,7 @@ export default class Popup extends React.PureComponent { e.stopPropagation(); } }; - if (!modal && on.indexOf("hover")>=0) { + if (!modal && on.indexOf("hover") >= 0) { childrenElementProps.onMouseEnter = this.onMouseEnter; childrenElementProps.onMouseLeave = this.onMouseLeave; } @@ -199,7 +199,7 @@ export default class Popup extends React.PureComponent { render() { const { overlayStyle, closeOnDocumentClick, on } = this.props; const { modal } = this.state; - const overlay = this.state.isOpen && !(on.indexOf("hover")>=0); + const overlay = this.state.isOpen && !(on.indexOf("hover") >= 0); const ovStyle = modal ? styles.overlay.modal : styles.overlay.tooltip; return [ this.state.isOpen && ( diff --git a/stories/src/Controlledpopup.js b/stories/src/ControlledModal.js similarity index 91% rename from stories/src/Controlledpopup.js rename to stories/src/ControlledModal.js index ad3abd7..2bfa0b0 100644 --- a/stories/src/Controlledpopup.js +++ b/stories/src/ControlledModal.js @@ -1,10 +1,10 @@ import React from "react"; import Popup from "../../src/Popup"; -const ControlledPopup = () => { +const ControlledModal = () => { return (
- +
{" "} Lorem ipsum dolor sit amet consectetur adipisicing elit. Nemo voluptas @@ -15,9 +15,9 @@ const ControlledPopup = () => { ); }; -export default ControlledPopup; +export default ControlledModal; -class ControlledPopupClass extends React.Component { +class ControlledModalClass extends React.Component { constructor(props) { super(props); this.state = { open: false }; diff --git a/stories/src/ControlledTooltip.js b/stories/src/ControlledTooltip.js new file mode 100644 index 0000000..be1fc5e --- /dev/null +++ b/stories/src/ControlledTooltip.js @@ -0,0 +1,32 @@ +import React from "react"; +import Popup from "../../src/Popup"; + +export default class ControlledPopup extends React.Component { + constructor(props) { + super(props); + } + + render() { + return ( + Controlled Tooltip } + position="right center" + //open={this.state.open} + closeOnDocumentClick + // onClose={this.closeModal} + > + {close => ( +
+ + × remove + + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae + magni omnis delectus nemo, maxime molestiae dolorem numquam + mollitia, voluptate ea, accusamus excepturi deleniti ratione + sapiente! Laudantium, aperiam doloribus. Odit, aut. +
+ )} +
+ ); + } +} diff --git a/stories/src/index.js b/stories/src/index.js index cea1a17..49ebf03 100644 --- a/stories/src/index.js +++ b/stories/src/index.js @@ -8,7 +8,9 @@ import PopupFuncStory from "./PopupFunc"; import PopupInputFocusStory from "./PopupInputFocus"; import ModalStory from "./Modal"; import Menu from "./Menu"; -import ControlledPopup from "./Controlledpopup"; +import ControlledModal from "./ControlledModal"; +import ControlledTooltip from "./ControlledTooltip"; + import CellTablePopupStory from "./CellTablePopup"; const storyProps = { text: "Parcel Storybook" }; @@ -33,8 +35,12 @@ export default [ component: Centred(() => ) }, { - name: "Controlled Popup Component", // without props - component: Centred(ControlledPopup) + name: "Controlled Modal Component", // without props + component: Centred(ControlledModal) + }, + { + name: "Controlled Tooltip Component", // without props + component: Centred(ControlledTooltip) }, { name: "Menu Component", // without props