Add proptypes and onclick to tooltip

Author: donnieberg

components/SLDSTooltip/index.jsx

@@ -12,51 +12,69 @@ THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
 import React, {PropTypes} from 'react';
 import SLDSPopover from '../SLDSPopover';
 
-import {KEYS,EventUtil} from '../utils';
-import omit from 'lodash.omit';
+//import {KEYS,EventUtil} from '../utils';
+//import omit from 'lodash.omit';
 
 import cx from 'classnames';
 
 module.exports = React.createClass( {
 
+  displayName: 'SLDSToolip',
+
   propTypes: {
-    hoverCloseDelay:PropTypes.number
+    align: PropTypes.string,
+    children: PropTypes.node,
+    content: PropTypes.node,
+    hoverCloseDelay: PropTypes.number,
+    openByDefault: PropTypes.bool,
+    openOnClick: PropTypes.bool,
+    openOnHover: PropTypes.bool,
   },
 
 
   getDefaultProps () {
     return {
-      content:<span>Tooltip</span>,
       align: 'top',
-      hoverCloseDelay:350,
-      openOnHover:false
+      content: <span>Tooltip</span>,
+      hoverCloseDelay: 350,
+      openByDefault: false,
+      openOnClick: false,
+      openOnHover: false,
     };
   },
 
   getInitialState(){
     return {
-      isOpen:!this.props.openOnHover,
-      isClosing:false
+      isOpen: this.props.openByDefault,
+      isClosing: false
     };
   },
 
   componentDidMount(){
   },
 
+  handleMouseClick(event) {
+    this.setState({
+      isOpen: !this.state.isOpen,
+      isClosing: !this.state.isOpen
+    });
+  },
+
+
   handleMouseEnter(event) {
     this.setState({
-      isOpen:true,
-      isClosing:false
+      isOpen: true,
+      isClosing: false
     });
   },
 
   handleMouseLeave(event) {
-    this.setState({isClosing:true});
+    this.setState({isClosing: true});
     setTimeout(()=>{
       if(this.isMounted && this.state.isClosing){
         this.setState({
-          isOpen:false,
-          isClosing:false
+          isOpen: false,
+          isClosing: false
         });
       }
     },this.props.hoverCloseDelay)
@@ -88,12 +106,12 @@ module.exports = React.createClass( {
 
   getTooltip() {
     const style = {
-      'slds-popover':true,
-      'slds-popover--tooltip':true,
-      'slds-nubbin--top':this.props.align === 'bottom',
-      'slds-nubbin--bottom':this.props.align === 'top',
-      'slds-nubbin--left':this.props.align === 'right',
-      'slds-nubbin--right':this.props.align === 'left'
+      'slds-popover': true,
+      'slds-popover--tooltip': true,
+      'slds-nubbin--top': this.props.align === 'bottom',
+      'slds-nubbin--bottom': this.props.align === 'top',
+      'slds-nubbin--left': this.props.align === 'right',
+      'slds-nubbin--right': this.props.align === 'left'
     };
 
     return this.state.isOpen?<SLDSPopover
@@ -117,11 +135,11 @@ module.exports = React.createClass( {
 
   render(){
     return (
-      <span refs='tooltipTarget' onMouseEnter={this.props.openOnHover?this.handleMouseEnter:null} onMouseLeave={this.props.openOnHover?this.handleMouseLeave:null}>
+      <span refs='tooltipTarget' onClick={this.props.openOnClick?this.handleMouseClick:null} onMouseEnter={this.props.openOnHover?this.handleMouseEnter:null} onMouseLeave={this.props.openOnHover?this.handleMouseLeave:null}>
         { this.props.children }
         { this.getTooltip() }
       </span>
     );
   }
 
-});
+});

demo/pages/HomePage/TooltipSection.jsx

@@ -59,7 +59,7 @@ module.exports = React.createClass( {
 
 
             <div className="slds-p-around--medium">
-              <h3 id='dropdownSection' className="slds-text-heading--medium slds-truncate">
+              <h3 id='tooltipSection' className="slds-text-heading--medium slds-truncate">
                 Tooltip
               </h3>
 {/*
@@ -70,21 +70,36 @@ module.exports = React.createClass( {
               <section style={{paddingLeft:'10rem'}}>
                 <div className="slds-p-vertical--large">
                   <p>
-                    <SLDSTooltip 
+                    <SLDSTooltip
                       content={<span>Tooltip with top alignment</span>}
-                      align={alignNames[this.state.alignIndex]}>
-                      Tooltip align top
+                      align={alignNames[this.state.alignIndex]}
+                      openByDefault={true}>
+                        Tooltip align options
                     </SLDSTooltip>
                   </p>
                 </div>
 
-                <div ref="super" className="slds-p-vertical--large">
+                <div ref="tooltipOnHover" className="slds-p-vertical--large">
                   <p style={{marginTop:'5rem'}}>
-                    <SLDSTooltip 
+                    <SLDSTooltip
                       content={<span>Tooltip with bottom alignment</span>}
                       align='bottom'
                       openOnHover={true}
-                      targetElement={this.refs.super}>Tooltip open on hover</SLDSTooltip>
+                      targetElement={this.refs.tooltipOnHover}>
+                        Tooltip open on hover
+                      </SLDSTooltip>
+                  </p>
+                </div>
+
+                <div ref="tooltipOnClick" className="slds-p-vertical--large">
+                  <p style={{marginTop:'5rem'}}>
+                    <SLDSTooltip
+                      content={<span>Tooltip with right alignment</span>}
+                      align='right'
+                      openOnClick={true}
+                      targetElement={this.refs.tooltipOnClick}>
+                        Tooltip open on click
+                      </SLDSTooltip>
                   </p>
                 </div>
               </section>
@@ -95,4 +110,4 @@ module.exports = React.createClass( {
 
     );
   }
-});
+});

demo/pages/HomePage/index.jsx

@@ -69,6 +69,7 @@ module.exports = React.createClass( {
     let that = this;
     return function() {
       var target = document.getElementById(elemId);
+      console.log(target);
       that.animate(document.body, "scrollTop", "", 0, target.offsetTop, 500, true);
     };
   },
@@ -126,6 +127,9 @@ module.exports = React.createClass( {
               <li>
                 <a href="javascript:void(0)" onClick={this.scrollTo('picklistSection')}>Picklist</a>
               </li>
+              <li>
+                <a href="javascript:void(0)" onClick={this.scrollTo('tooltipSection')}>Tooltip</a>
+              </li>
             </ul>
 
             <h3 className="slds-text-heading--medium slds-p-top--medium">Future Components</h3>
@@ -136,7 +140,6 @@ module.exports = React.createClass( {
             </ul>
             </section>
 
-            <TooltipSection/>
 
             <ButtonSection/>
 
@@ -160,6 +163,8 @@ module.exports = React.createClass( {
 
             <PicklistBaseCustomSection />
 
+            <TooltipSection/>
+
             <h1 className="slds-text-heading--large slds-p-top--large">Future Components</h1>
 
             <DatePickerSingleSelectSection />