diff --git a/demo/Demo.react.js b/demo/Demo.react.js index 623e9cbff..21eb15b76 100644 --- a/demo/Demo.react.js +++ b/demo/Demo.react.js @@ -12,7 +12,8 @@ import { Slider, Interval, Markdown, - Upload + Upload, + ToolTip } from '../src'; @@ -293,6 +294,27 @@ class Controller extends Component { ReactDOM.render(, mountNode);` +const ToolTipExample = `class Controller extends Component { + render() { + return ( +
+

This is an inline ToolTip top tooltip.

+

+ You can also position them using CSS: + ToolTip top + ToolTip right + ToolTip bottom + ToolTip left +

+
+ ); + } +} + +ReactDOM.render(, mountNode); +`; + + const examples = [ {name: 'Upload', code: UploadExample}, {name: 'Markdown', code: MarkdownExample}, @@ -304,7 +326,8 @@ const examples = [ {name: 'Slider', code: SliderExample}, {name: 'RangeSlider', code: RangeSliderExample}, {name: 'Input', code: InputExample}, - {name: 'DatePickerRange', code: DatePickerRangeExample} + {name: 'DatePickerRange', code: DatePickerRangeExample}, + {name: 'Tooltip', code: ToolTipExample}, ]; class Demo extends Component { diff --git a/src/components/ToolTip.react.js b/src/components/ToolTip.react.js new file mode 100644 index 000000000..7987aba6e --- /dev/null +++ b/src/components/ToolTip.react.js @@ -0,0 +1,248 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {omit} from 'ramda'; + +/** + * A basic HTML textarea for entering multiline text. + * + */ +export default class ToolTip extends Component { + render() { + const {loading_state, value, children, direction, colors} = this.props; + + return ( + + + {children} + + + + + ); + } +} + +ToolTip.defaultProps = { + persisted_props: ['value'], + persistence_type: 'local', + direction: 'right', + colors: { + border: '#d6d6d6', + background: 'white', + }, +}; + +ToolTip.propTypes = { + /** + * The ID of this component, used to identify dash components + * in callbacks. The ID needs to be unique across all of the + * components in an app. + */ + id: PropTypes.string, + + /** + * Often used with CSS to style elements with common properties. + */ + className: PropTypes.string, + + /** + * Defines the direction in which the hover opens. + */ + direction: PropTypes.oneOf([ + 'top', + 'right', + 'bottom', + 'left' + ]), + + /** + * Holds the colors used by the ToolTip component. If you set these, you should specify colors for all properties, so: + * colors: { + * border: '#d6d6d6', + * primary: '#1975FA', + * background: '#f9f9f9' + * } + */ + colors: PropTypes.exact({ + border: PropTypes.string, + background: PropTypes.string, + }), + + /** + * Prevents rendering of given element, while keeping child elements, e.g. script elements, active. + */ + hidden: PropTypes.string, + + /** + * Defines CSS styles which will override styles previously set. + */ + style: PropTypes.object, + + /** + * Object that holds the loading state object coming from dash-renderer + */ + loading_state: PropTypes.shape({ + /** + * Determines if the component is loading or not + */ + is_loading: PropTypes.bool, + /** + * Holds which property is loading + */ + prop_name: PropTypes.string, + /** + * Holds the name of the component that is loading + */ + component_name: PropTypes.string, + }), +}; diff --git a/src/index.js b/src/index.js index 7b67c46fc..e2ecb2042 100644 --- a/src/index.js +++ b/src/index.js @@ -22,6 +22,7 @@ import Tabs from './components/Tabs.react'; import Tab from './components/Tab.react'; import Store from './components/Store.react'; import LogoutButton from './components/LogoutButton.react'; +import ToolTip from './components/ToolTip.react'; import 'react-dates/lib/css/_datepicker.css'; import './components/css/react-dates@20.1.0-fix.css'; @@ -49,5 +50,6 @@ export { Upload, Store, LogoutButton, - Download + Download, + ToolTip }; diff --git a/tests/unit/ToolTip.test.js b/tests/unit/ToolTip.test.js new file mode 100644 index 000000000..530a9d389 --- /dev/null +++ b/tests/unit/ToolTip.test.js @@ -0,0 +1,35 @@ +import ToolTip from '../../src/components/ToolTip.react.js'; +import React from 'react'; +import {mount, render} from 'enzyme'; +import DashRendererMock from './mocks/DashRendererMock.react.js'; + +test('ToolTip render', () => { + const tabs = render( + + content + + ); + + expect(tabs.html()).toBeDefined(); +}); + +describe('All props can be set properly', () => { + const defaultProps = { + id: 'test-tooltip', + colors: { + border: 'red', + background: 'blue', + }, + }; + const app = mount( + + + + ); + test('props.id =>', () => { + expect(app.find(ToolTip).props().id).toEqual(defaultProps.id); + }); + test('props.colors=>', () => { + expect(app.find(ToolTip).props().colors).toEqual(defaultProps.colors); + }); +});