vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Fixes #1171

old
Javi Velasco 2017-01-24 11:12:40 +01:00
parent ad30d7b4d8
commit 181e5c27fb
3 changed files with 33 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
components/font_icon/FontIcon.js
View File

@ -1,7 +1,7 @@
import React, { PropTypes } from 'react'; import React, { PropTypes } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
const FontIcon = ({ alt, children, className, value, ...other}) => ( const FontIcon = ({ alt, children, className, theme, value, ...other}) => ( // eslint-disable-line
<span <span
data-react-toolbox='font-icon' data-react-toolbox='font-icon'
aria-label={alt} aria-label={alt}
@ -17,6 +17,7 @@ FontIcon.propTypes = {
alt: PropTypes.string, alt: PropTypes.string,
children: PropTypes.any, children: PropTypes.any,
className: PropTypes.string, className: PropTypes.string,
theme: PropTypes.object,
value: PropTypes.oneOfType([ value: PropTypes.oneOfType([
PropTypes.string, PropTypes.string,
PropTypes.element PropTypes.element

50
components/tooltip/Tooltip.js
View File

@ -19,6 +19,7 @@ const defaults = {
className: '', className: '',
delay: 0, delay: 0,
hideOnClick: true, hideOnClick: true,
passthrough: true,
showOnClick: false, showOnClick: false,
position: POSITION.VERTICAL, position: POSITION.VERTICAL,
theme: {} theme: {}
@ -30,6 +31,7 @@ const tooltipFactory = (options = {}) => {
delay: defaultDelay, delay: defaultDelay,
hideOnClick: defaultHideOnClick, hideOnClick: defaultHideOnClick,
showOnClick: defaultShowOnClick, showOnClick: defaultShowOnClick,
passthrough: defaultPassthrough,
position: defaultPosition, position: defaultPosition,
theme: defaultTheme theme: defaultTheme
} = {...defaults, ...options}; } = {...defaults, ...options};
@ -181,11 +183,14 @@ const tooltipFactory = (options = {}) => {
children, children,
className, className,
theme, theme,
onClick, // eslint-disable-line no-unused-vars
onMouseEnter, // eslint-disable-line no-unused-vars
onMouseLeave, // eslint-disable-line no-unused-vars
tooltip, tooltip,
tooltipDelay, //eslint-disable-line no-unused-vars tooltipDelay, // eslint-disable-line no-unused-vars
tooltipHideOnClick, //eslint-disable-line no-unused-vars tooltipHideOnClick, // eslint-disable-line no-unused-vars
tooltipPosition, //eslint-disable-line no-unused-vars tooltipPosition, // eslint-disable-line no-unused-vars
tooltipShowOnClick, //eslint-disable-line no-unused-vars tooltipShowOnClick, // eslint-disable-line no-unused-vars
...other ...other
} = this.props; } = this.props;
@ -194,26 +199,25 @@ const tooltipFactory = (options = {}) => {
[theme[positionClass]]: theme[positionClass] [theme[positionClass]]: theme[positionClass]
}); });
const isNative = typeof ComposedComponent === 'string'; const childProps = {
...other,
className,
onClick: this.handleClick,
onMouseEnter: this.handleMouseEnter,
onMouseLeave: this.handleMouseLeave
};
return ( const shouldPass = typeof ComposedComponent !== 'string' && defaultPassthrough;
<ComposedComponent const finalProps = shouldPass ? { ...childProps, theme } : childProps;
{...other}
className={className} return React.createElement(ComposedComponent, finalProps, children,
onClick={this.handleClick} visible && (
onMouseEnter={this.handleMouseEnter} <Portal>
onMouseLeave={this.handleMouseLeave} <span ref="tooltip" className={_className} data-react-toolbox="tooltip" style={{top, left}}>
{...isNative ? {} : {theme}} <span className={theme.tooltipInner}>{tooltip}</span>
> </span>
{children ? children : null} </Portal>
{visible && ( )
<Portal>
<span ref="tooltip" className={_className} data-react-toolbox="tooltip" style={{top, left}}>
<span className={theme.tooltipInner}>{tooltip}</span>
</span>
</Portal>
)}
</ComposedComponent>
); );
} }
} }

5
spec/components/tooltip.js
View File

@ -1,10 +1,12 @@
import React from 'react'; import React from 'react';
import Button from '../../components/button'; import Button from '../../components/button';
import Input from '../../components/input'; import Input from '../../components/input';
import Tooltip from '../../components/tooltip'; import FontIcon from '../../components/font_icon';
import Tooltip, { tooltipFactory } from '../../components/tooltip';
import Chip from '../../components/chip'; import Chip from '../../components/chip';
import Avatar from '../../components/avatar'; import Avatar from '../../components/avatar';
const TooltipFontIcon = tooltipFactory({ passthrough: false })(FontIcon);
const TooltipButton = Tooltip(Button); const TooltipButton = Tooltip(Button);
const TooltipInput = Tooltip(Input); const TooltipInput = Tooltip(Input);
const TooltipStrong = Tooltip(({children, ...other}) => { const TooltipStrong = Tooltip(({children, ...other}) => {
@ -40,6 +42,7 @@ const TooltipTest = () => (
</TooltipStrongDirect> </TooltipStrongDirect>
{' '}. This is useful for mobile! {' '}. This is useful for mobile!
</p> </p>
<TooltipFontIcon value="code" tooltip="This is a test with FontIcon" />
</section> </section>
); );