From e9cdbe389d549548e0335478b879ae789364560e Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Thu, 25 Mar 2021 11:58:25 -0700 Subject: [PATCH 1/2] Add a ToolTip component --- demo/Demo.react.js | 27 +++- src/components/ToolTip.react.js | 249 ++++++++++++++++++++++++++++++++ src/index.js | 4 +- tests/unit/ToolTip.test.js | 35 +++++ 4 files changed, 312 insertions(+), 3 deletions(-) create mode 100644 src/components/ToolTip.react.js create mode 100644 tests/unit/ToolTip.test.js 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..78ca37703 --- /dev/null +++ b/src/components/ToolTip.react.js @@ -0,0 +1,249 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {omit} from 'ramda'; +import _JSXStyle from "styled-jsx/style"; + +/** + * 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); + }); +}); From cdbdf1967ea5b9e41abd33e43b32c0f07e139076 Mon Sep 17 00:00:00 2001 From: Ricky Reusser Date: Thu, 25 Mar 2021 12:00:13 -0700 Subject: [PATCH 2/2] Remove JSXStyle workaround --- src/components/ToolTip.react.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/ToolTip.react.js b/src/components/ToolTip.react.js index 78ca37703..7987aba6e 100644 --- a/src/components/ToolTip.react.js +++ b/src/components/ToolTip.react.js @@ -1,7 +1,6 @@ import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {omit} from 'ramda'; -import _JSXStyle from "styled-jsx/style"; /** * A basic HTML textarea for entering multiline text.